[#4] Button component (#54)

* update button component

* update code lint

panda.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from '@pandacss/dev';
 import { avatarSlotRecipe } from '@/components/ui/avatar/AvatarSlotRecipe';
+import { buttonRecipe } from '@/components/ui/button/ButtonRecipe';
 
 export default defineConfig({
   preflight: true,
@@ -11,6 +12,9 @@ export default defineConfig({
       slotRecipes: {
         avatar: avatarSlotRecipe,
       },
+      recipes: {
+        button: buttonRecipe,
+      },
     },
   },
   jsxFramework: 'react',

src/components/ui/button/Button.tsx

@@ -1,6 +1,5 @@
 import { ark } from '@ark-ui/react';
-import { styled, type HTMLStyledProps } from '@/styled/jsx';
+import { styled } from '@/styled/jsx';
 import { button } from '@/styled/recipes';
 
 export const Button = styled(ark.button, button);
-export interface ButtonProps extends HTMLStyledProps<typeof Button> {}

src/components/ui/button/ButtonRecipe.tsx

@@ -0,0 +1,218 @@
+import { defineRecipe } from '@pandacss/dev';
+
+/**
+ * Update styles for Button component.
+ */
+export const buttonRecipe = defineRecipe({
+  className: 'button',
+  base: {
+    alignItems: 'center',
+    appearance: 'none',
+    borderRadius: 'l2',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    fontWeight: 'semibold',
+    minWidth: '0',
+    justifyContent: 'center',
+    outline: 'none',
+    transitionDuration: 'normal',
+    transitionProperty: 'background, border-color, color, box-shadow',
+    transitionTimingFunction: 'default',
+    userSelect: 'none',
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+    _hidden: {
+      display: 'none',
+    },
+  },
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+  variants: {
+    variant: {
+      solid: {
+        background: 'colorPalette.default',
+        color: 'colorPalette.fg',
+        colorPalette: 'accent',
+        _hover: {
+          background: 'colorPalette.emphasized',
+        },
+        _focusVisible: {
+          outline: '2px solid',
+          outlineColor: 'colorPalette.default',
+          outlineOffset: '2px',
+        },
+        _disabled: {
+          color: 'fg.disabled',
+          background: 'bg.disabled',
+          cursor: 'not-allowed',
+          _hover: {
+            color: 'fg.disabled',
+            background: 'bg.disabled',
+          },
+        },
+      },
+      outline: {
+        borderWidth: '1px',
+        borderColor: 'colorPalette.a8',
+        color: 'colorPalette.text',
+        colorPalette: 'gray',
+        _hover: {
+          background: 'colorPalette.a2',
+        },
+        _disabled: {
+          borderColor: 'border.disabled',
+          color: 'fg.disabled',
+          cursor: 'not-allowed',
+          _hover: {
+            background: 'transparent',
+            borderColor: 'border.disabled',
+            color: 'fg.disabled',
+          },
+        },
+        _focusVisible: {
+          outline: '2px solid',
+          outlineColor: 'colorPalette.default',
+          outlineOffset: '2px',
+        },
+        _selected: {
+          background: 'accent.default',
+          borderColor: 'accent.default',
+          color: 'accent.fg',
+          _hover: {
+            background: 'accent.emphasized',
+            borderColor: 'accent.emphasized',
+          },
+        },
+      },
+      ghost: {
+        color: 'colorPalette.text',
+        colorPalette: 'gray',
+        _hover: {
+          background: 'colorPalette.a3',
+        },
+        _selected: {
+          background: 'colorPalette.a3',
+        },
+        _disabled: {
+          color: 'fg.disabled',
+          cursor: 'not-allowed',
+          _hover: {
+            background: 'transparent',
+            color: 'fg.disabled',
+          },
+        },
+        _focusVisible: {
+          outline: '2px solid',
+          outlineColor: 'colorPalette.default',
+          outlineOffset: '2px',
+        },
+      },
+      link: {
+        verticalAlign: 'baseline',
+        _disabled: {
+          color: 'border.disabled',
+          cursor: 'not-allowed',
+          _hover: {
+            color: 'border.disabled',
+          },
+        },
+        height: 'auto!',
+        px: '0!',
+        minW: '0!',
+      },
+      subtle: {
+        background: 'colorPalette.a3',
+        color: 'colorPalette.text',
+        colorPalette: 'gray',
+        _hover: {
+          background: 'colorPalette.a4',
+        },
+        _focusVisible: {
+          outline: '2px solid',
+          outlineColor: 'colorPalette.default',
+          outlineOffset: '2px',
+        },
+        _disabled: {
+          background: 'bg.disabled',
+          color: 'fg.disabled',
+          cursor: 'not-allowed',
+          _hover: {
+            background: 'bg.disabled',
+            color: 'fg.disabled',
+          },
+        },
+      },
+    },
+    size: {
+      xs: {
+        h: '8',
+        minW: '8',
+        textStyle: 'xs',
+        px: '3',
+        gap: '2',
+        '& svg': {
+          fontSize: 'md',
+          width: '4',
+          height: '4',
+        },
+      },
+      sm: {
+        h: '9',
+        minW: '9',
+        textStyle: 'sm',
+        px: '3.5',
+        gap: '2',
+        '& svg': {
+          width: '4',
+          height: '4',
+        },
+      },
+      md: {
+        h: '10',
+        minW: '10',
+        textStyle: 'sm',
+        px: '4',
+        gap: '2',
+        '& svg': {
+          width: '5',
+          height: '5',
+        },
+      },
+      lg: {
+        h: '11',
+        minW: '11',
+        textStyle: 'md',
+        px: '4.5',
+        gap: '2',
+        '& svg': {
+          width: '5',
+          height: '5',
+        },
+      },
+      xl: {
+        h: '12',
+        minW: '12',
+        textStyle: 'md',
+        px: '5',
+        gap: '2.5',
+        '& svg': {
+          width: '5',
+          height: '5',
+        },
+      },
+      '2xl': {
+        h: '16',
+        minW: '16',
+        textStyle: 'lg',
+        px: '7',
+        gap: '3',
+        '& svg': {
+          width: '6',
+          height: '6',
+        },
+      },
+    },
+  },
+});

src/components/ui/button/index.ts

@@ -1,4 +1,5 @@
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
+import { ButtonProps } from './interface';
 
 export { Button };
 export type { ButtonProps };

src/components/ui/button/interface.ts

@@ -0,0 +1,4 @@
+import { type HTMLStyledProps } from '@/styled/jsx';
+import { Button } from '@/components/ui/button';
+
+export interface ButtonProps extends HTMLStyledProps<typeof Button> {}