feat: button hover effect added

.changeset/cold-drinks-matter.md

@@ -0,0 +1,7 @@
+---
+"@alice-ui/react": patch
+"@alice-ui/theme": patch
+---
+
+Button hover effect added
+disableAutosize prop added to Textarea, this disable the auto resize.

apps/storybook/package.json

@@ -19,27 +19,27 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/blocks": "^7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-vite": "^7.4.0",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
     "@storybook/testing-library": "^0.2.0",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "autoprefixer": "^10.4.15",
-    "eslint": "^8.45.0",
+    "@types/react": "^18.2.57",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "postcss": "^8.4.29",
-    "storybook": "^7.4.0",
-    "storybook-dark-mode": "^3.0.1",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.35",
+    "storybook": "^7.6.17",
+    "storybook-dark-mode": "^3.0.3",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^4.5.2"
   }
 }

package.json

@@ -32,7 +32,7 @@
     "@changesets/cli": "^2.27.1",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@storybook/react": "^7.6.6",
+    "@storybook/react": "^7.6.17",
     "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",

packages/react/package.json

@@ -53,7 +53,7 @@
     "@react-stately/utils": "^3.9.0",
     "@react-types/shared": "^3.22.0",
     "react-aria": "^3.31.0",
-    "react-aria-components": "1.0.0",
+    "react-aria-components": "1.1.1",
     "react-stately": "^3.29.0",
     "react-textarea-autosize": "^8.5.3"
   },

packages/react/src/button/button.tsx

@@ -24,13 +24,13 @@ export interface ButtonProps extends AriaButtonProps, Omit<ButtonVariantProps, '
    */
   disableRipple?: boolean;
   /**
-   * Adds icon before button label.
+   * The button start content.
    */
-  leftIcon?: ReactNode;
+  startContent?: ReactNode;
   /**
-   * Adds icon after button label.
+   * The button end content.
    */
-  rightIcon?: ReactNode;
+  endContent?: ReactNode;
   /**
    * Spinner to display when loading.
    */
@@ -62,8 +62,8 @@ function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
     isLoading,
     spinner = <Spinner color="current" size="sm" {...props.spinnerProps} />,
     spinnerPlacement = 'start',
-    leftIcon,
-    rightIcon,
+    startContent: startContentProp,
+    endContent: endContentProp,
     disableAnimation,
     disableRipple,
     className,
@@ -104,19 +104,19 @@ function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
         })
       : null;
 
-  const leftIconNode = getIconClone(leftIcon);
-  const rightIconNode = getIconClone(rightIcon);
+  const startContent = getIconClone(startContentProp);
+  const endContent = getIconClone(endContentProp);
 
   return (
     // @ts-ignore
     <AriaButton ref={ref} className={styles} {...otherProps}>
       {({ isDisabled }) => (
         <>
-          {leftIconNode}
+          {startContent}
           {isLoading && spinnerPlacement === 'start' && <div className="shrink-0">{spinner}</div>}
           <>{children}</>
           {isLoading && spinnerPlacement === 'end' && spinner}
-          {rightIconNode}
+          {endContent}
           {(!disableRipple || !isDisabled) && (
             <>
               <div aria-hidden className="absolute inset-0 h-full w-full" onClick={handleClick} />

packages/react/src/input/textarea.tsx

@@ -21,6 +21,11 @@ type TextareaAutoSizeStyle = Omit<
 export interface TextAreaProps
   extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'color' | 'size'>,
     InputVariantProps {
+  /**
+   * Whether the textarea should automatically grow vertically to accomodate content.
+   * @default false
+   */
+  disableAutosize?: boolean;
   /**
    * Minimum number of rows to show for textarea
    * @default 3
@@ -73,6 +78,7 @@ function TextArea(props: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>)
     minRows = 3,
     maxRows = 8,
     cacheMeasurements = false,
+    disableAutosize = false,
     onHeightChange,
     ...otherProps
   } = props;
@@ -106,17 +112,27 @@ function TextArea(props: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>)
 
   const inputProps = getInputProps();
 
+  const content = disableAutosize ? (
+    <textarea
+      {...inputProps}
+      className={slots.input({ class: classNames?.input })}
+      style={mergeProps(inputProps.style, style ?? {})}
+    />
+  ) : (
+    <TextareaAutosize
+      {...inputProps}
+      className={slots.input({ class: classNames?.input })}
+      cacheMeasurements={cacheMeasurements}
+      maxRows={maxRows}
+      minRows={minRows}
+      style={mergeProps(inputProps.style as TextareaAutoSizeStyle, style ?? {})}
+      onHeightChange={onHeightChange}
+    />
+  );
+
   return (
     <div className={slots.base({ class: baseStyles })} {...getInputWrapperProps()}>
-      <TextareaAutosize
-        {...inputProps}
-        className={slots.input({ class: classNames?.input })}
-        cacheMeasurements={cacheMeasurements}
-        maxRows={maxRows}
-        minRows={minRows}
-        style={mergeProps(inputProps.style as TextareaAutoSizeStyle, style ?? {})}
-        onHeightChange={onHeightChange}
-      />
+      {content}
       {clearButton}
     </div>
   );

packages/react/stories/button.stories.tsx

@@ -1,6 +1,5 @@
 import { CheckCircleIcon, ExclamationCircleFilledIcon, InfoIcon } from '@alice-ui/icons';
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import { Button } from '../src/button';
 
 const meta: Meta<typeof Button> = {
@@ -254,16 +253,20 @@ export const Loading: Story = {
 export const WithIcons: Story = {
   render: () => (
     <div className="flex items-center gap-4">
-      <Button color="primary" leftIcon={<CheckCircleIcon className="h-5 w-5" />}>
+      <Button color="primary" startContent={<CheckCircleIcon className="h-5 w-5" />}>
         Like
       </Button>
-      <Button color="danger" variant="bordered" leftIcon={<CheckCircleIcon className="h-5 w-5" />}>
+      <Button
+        color="danger"
+        variant="bordered"
+        startContent={<CheckCircleIcon className="h-5 w-5" />}
+      >
         Send
       </Button>
-      <Button size="sm" leftIcon={<InfoIcon className="h-4 w-4" />}>
+      <Button size="sm" startContent={<InfoIcon className="h-4 w-4" />}>
         Add
       </Button>
-      <Button rightIcon={<InfoIcon className="h-5 w-5" />}>Like</Button>
+      <Button endContent={<InfoIcon className="h-5 w-5" />}>Like</Button>
       <Button isIconOnly color="danger" aria-label="Like">
         <ExclamationCircleFilledIcon className="h-5 w-5" />
       </Button>

packages/react/stories/textarea.stories.tsx

@@ -1,6 +1,5 @@
 import { input } from '@alice-ui/theme';
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import { TextArea, TextAreaProps } from '../src/input';
 
 const meta: Meta<typeof TextArea> = {
@@ -31,6 +30,11 @@ const meta: Meta<typeof TextArea> = {
       },
       options: ['sm', 'md', 'lg'],
     },
+    disableAutosize: {
+      control: {
+        type: 'boolean',
+      },
+    },
   },
 };
 

packages/theme/package.json

@@ -31,13 +31,6 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@types/color": "^3.0.6",
-    "@types/flat": "^5.0.5",
-    "@types/lodash.foreach": "^4.5.9",
-    "@types/lodash.get": "^4.4.9",
-    "@types/lodash.kebabcase": "^4.1.9",
-    "@types/lodash.mapkeys": "^4.6.9",
-    "@types/lodash.omit": "^4.5.9",
     "color": "^4.2.3",
     "color2k": "^2.0.3",
     "deepmerge": "4.3.1",
@@ -47,13 +40,20 @@
     "lodash.kebabcase": "^4.1.1",
     "lodash.mapkeys": "^4.6.0",
     "lodash.omit": "^4.5.0",
-    "tailwind-variants": "^0.1.20",
-    "tailwindcss": "^3.4.1"
+    "tailwind-variants": "^0.1.18"
   },
   "peerDependencies": {
     "tailwindcss": "*"
   },
   "devDependencies": {
+    "@types/color": "^3.0.6",
+    "@types/flat": "^5.0.5",
+    "@types/lodash.foreach": "^4.5.9",
+    "@types/lodash.get": "^4.4.9",
+    "@types/lodash.kebabcase": "^4.1.9",
+    "@types/lodash.mapkeys": "^4.6.9",
+    "@types/lodash.omit": "^4.5.9",
+    "tailwindcss": "^3.4.1",
     "clean-package": "^2.2.0"
   },
   "tsup": {

packages/theme/src/components/button.ts

@@ -362,6 +362,11 @@ const button = tv({
       size: 'lg',
       class: ['min-w-[3rem]', 'w-12', 'h-12', 'text-[1.75rem]'],
     },
+    // variant / hover
+    {
+      variant: ['solid', 'faded', 'flat', 'bordered', 'shadow'],
+      class: 'data-[hovered=true]:opacity-hover',
+    },
   ],
 });
 

packages/theme/src/components/drawer.ts

@@ -15,6 +15,7 @@ const drawer = tv({
       'box-border',
       'bg-content1',
       'outline-none',
+      'overflow-hidden',
       'shadow-[0_8px_10px_-5px_rgba(0,0,0,0.2),0_16px_24px_2px_rgba(0,0,0,0.14),0_6px_30px_5px_rgba(0,0,0,0.12)]',
       // top
       'data-[placement=top]:[--slide-enter:0%]',

packages/theme/src/components/menu.ts

@@ -48,6 +48,7 @@ const menuItem = tv({
       'outline-none',
       'cursor-pointer',
       'tap-highlight-transparent',
+      'data-[hovered=true]:transition-colors',
       'data-[focus-visible=true]:dark:ring-offset-background-content1',
       'data-[disabled=true]:opacity-disabled',
       'data-[disabled=true]:pointer-events-none',

packages/theme/src/components/radio.ts

@@ -184,9 +184,8 @@ const radioGroup = tv({
   },
 });
 
-export type RadioGroupSlots = keyof ReturnType<typeof radioGroup>;
-
 export type RadioVariantProps = VariantProps<typeof radio>;
 export type RadioSlots = keyof ReturnType<typeof radio>;
+export type RadioGroupSlots = keyof ReturnType<typeof radioGroup>;
 
 export { radio, radioGroup };

packages/theme/src/default-layout.ts

@@ -36,9 +36,12 @@ export const defaultLayout: LayoutTheme = {
   },
 };
 
-export const lightLayout: LayoutTheme = {};
+export const lightLayout: LayoutTheme = {
+  hoverOpacity: '.8',
+};
 
 export const darkLayout: LayoutTheme = {
+  hoverOpacity: '.9',
   boxShadow: {
     small:
       '0 0 0 1px rgb(53 55 60), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)',

packages/theme/src/plugin.ts

@@ -185,6 +185,7 @@ const corePlugin = (
             large: `var(--${prefix}-radius-large)`,
           },
           opacity: {
+            hover: `var(--${prefix}-hover-opacity)`,
             disabled: `var(--${prefix}-disabled-opacity)`,
           },
           boxShadow: {

packages/theme/src/types.ts

@@ -122,6 +122,14 @@ export interface LayoutTheme {
    * @default .5
    */
   disabledOpacity?: string | number;
+  /**
+   * A number between 0 and 1 that is applied as opacity-[value] when the component is hovered.
+   *
+   * format: ".[value]"
+   *
+   * @default .8
+   */
+  hoverOpacity?: string | number;
   /**
    * The default height applied to the divider component.
    * we recommend to use `px` units.