@okshaun/components 1.0.2 → 2.0.1

package/src/recipes/button.ts

@@ -1,13 +1,27 @@
 import { defineSlotRecipe } from '@pandacss/dev';
 
+const iconDefaultStyles = {
+  fill: 'icon.decorative',
+  mixBlendMode: { base: 'multiply', _dark: 'screen' },
+  _groupHover: { fill: 'current' },
+  _groupActive: { fill: 'current' },
+};
+
+const iconInverseStyles = {
+  fill: 'icon.decorative.inverse',
+  mixBlendMode: { base: 'screen', _dark: 'multiply' },
+  _groupHover: { fill: 'icon.decorative.inverse' },
+  _groupActive: { fill: 'icon.decorative.inverse' },
+};
+
 const baseButtonStyles = {
   container: {
     position: 'relative',
     appearance: 'none',
     display: 'flex',
     alignItems: 'center',
-    gap: 4,
-    minWidth: 0,
+    gap: '4',
+    minWidth: '0',
     width: 'fit',
     height: 'fit',
     transitionDuration: 'fast',
@@ -17,39 +31,28 @@ const baseButtonStyles = {
     verticalAlign: 'middle',
     fontFamily: 'sans',
     fontWeight: 'medium',
-    fontSize: 16,
+    fontSize: '16',
     lineHeight: 'default',
-    borderWidth: 1,
+    borderWidth: '1',
     borderStyle: 'solid',
     borderColor: 'transparent',
-    borderRadius: 4,
-    outlineWidth: 2,
+    borderRadius: '4',
+    outlineWidth: '2',
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     textDecoration: 'none',
     whiteSpace: 'nowrap',
     cursor: 'pointer',
-    _focusVisible: {
-      outlineColor: 'border.focused',
-    },
     _disabled: {
       cursor: 'not-allowed',
-      bg: 'bg.disabled',
-      color: 'text.disabled',
-      borderColor: 'border.disabled',
-      icon: { fill: 'icon.disabled' },
-      _hover: {
-        bg: 'bg.disabled',
-        color: 'text.disabled',
-        borderColor: 'border.disabled',
-        icon: { fill: 'icon.disabled' },
-      },
+      opacity: '0.3',
     },
-    _selected: {
-      bg: 'bg.selected',
-      color: 'text.selected',
-      borderColor: 'transparent',
-      icon: { fill: 'icon.selected' },
+    _loading: {
+      cursor: 'not-allowed',
+      opacity: '0.3',
+    },
+    _focusVisible: {
+      outlineColor: 'border.focused',
     },
   },
   icon: {
@@ -66,131 +69,224 @@ const buttonVariants = {
       container: {
         bg: 'bg.neutral',
         color: 'text',
-        icon: { fill: 'icon.decorative' },
         _hover: {
           bg: 'bg.neutral.hovered',
-          icon: { fill: 'icon.decorative.hovered' },
         },
         _active: {
           bg: 'bg.neutral.pressed',
-          icon: { fill: 'icon.decorative.hovered' },
         },
       },
+      icon: iconDefaultStyles,
     },
     primary: {
       container: {
         bg: 'bg.brand.boldest',
         color: 'text.inverse',
-        icon: { fill: 'icon.decorative.inverse' },
         _hover: {
           bg: 'bg.brand.boldest.hovered',
-          icon: { fill: 'icon.inverse' },
         },
         _active: {
           bg: 'bg.brand.boldest.pressed',
-          icon: { fill: 'icon.inverse' },
+        },
+      },
+      icon: {
+        ...iconInverseStyles,
+        fill: 'icon.decorative.inverse.subtle',
+        _groupDisabled: {
+          fill: 'icon.decorative.inverse.subtle',
         },
       },
     },
-    subtle: {
+    ghost: {
       container: {
         bg: 'bg.neutral.subtle',
         color: 'text.subtle',
-        icon: { fill: 'icon.decorative' },
         _hover: {
           bg: 'bg.neutral.subtle.hovered',
           color: 'text',
-          icon: { fill: 'icon.decorative.hovered' },
         },
         _active: {
           bg: 'bg.neutral.subtle.pressed',
           color: 'text',
-          icon: { fill: 'icon.decorative.hovered' },
         },
       },
+      icon: iconDefaultStyles,
     },
-    hollow: {
+    subtle: {
       container: {
         bg: 'bg.neutral.subtle',
         color: 'text.subtle',
-        borderColor: 'border',
-        icon: { fill: 'icon.decorative' },
         _hover: {
           bg: 'bg.neutral.subtle.hovered',
           color: 'text',
-          borderColor: 'border',
-          icon: { fill: 'icon.decorative.hovered' },
         },
         _active: {
           bg: 'bg.neutral.subtle.pressed',
           color: 'text',
-          borderColor: 'border',
-          icon: { fill: 'icon.decorative.hovered' },
+        },
+      },
+      icon: iconDefaultStyles,
+    },
+    hollow: {
+      container: {
+        bg: 'bg.neutral.subtle',
+        borderColor: 'border',
+        color: 'text',
+        _hover: {
+          bg: 'bg.neutral.subtle.hovered',
+        },
+        _active: {
+          bg: 'bg.neutral.subtle.pressed',
         },
         _disabled: {
           borderColor: 'border.disabled',
-          _hover: {
-            borderColor: 'border.disabled',
-          },
         },
       },
+      icon: iconDefaultStyles,
     },
-  },
-};
-
-export const buttonRecipe = defineSlotRecipe({
-  className: 'button',
-  jsx: ['Button'],
-  slots: ['container', 'icon'],
-  base: baseButtonStyles,
-  variants: {
-    ...buttonVariants,
-    size: {
-      md: {
-        container: {
-          fontSize: '16',
-          py: '3',
-          px: '12',
+    danger: {
+      container: {
+        bg: 'red.50',
+        color: 'neutral.0',
+        _hover: {
+          bg: 'red.40',
         },
-        icon: {
-          w: '24',
-          h: '24',
+        _active: {
+          bg: 'red.60',
         },
       },
-      xl: {
-        container: {
-          fontSize: '20',
-          py: '9',
-          px: '16',
+      icon: {
+        ...iconInverseStyles,
+        _groupDisabled: {
+          fill: 'icon.decorative.inverse',
         },
-        icon: {
-          w: '28',
-          h: '28',
+      },
+    },
+    selected: {
+      container: {
+        bg: 'bg.selected',
+        color: 'text.selected',
+        _hover: {
+          bg: 'bg.selected.hovered',
+          color: 'text.selected.hovered',
+        },
+        _active: {
+          bg: 'bg.selected.pressed',
+          color: 'text.selected',
         },
       },
-      lg: {
-        container: {
-          fontSize: '16',
-          py: '7',
-          px: '14',
+      icon: {
+        fill: 'icon.selected',
+        mixBlendMode: { base: 'multiply', _dark: 'screen' },
+        _groupHover: { fill: 'icon.selected' },
+        _groupActive: { fill: 'icon.selected' },
+        _groupDisabled: {
+          fill: 'icon.selected',
         },
-        icon: {
-          w: '24',
-          h: '24',
+      },
+    },
+    selectedBold: {
+      container: {
+        bg: 'bg.selected.bold',
+        color: 'text.inverse',
+        _hover: {
+          bg: 'bg.selected.bold.hovered',
+        },
+        _active: {
+          bg: 'bg.selected.bold.pressed',
         },
       },
-      sm: {
-        container: {
-          fontSize: '14',
-          py: '1',
-          px: '8',
+      icon: {
+        fill: 'icon.inverse',
+        mixBlendMode: { base: 'screen', _dark: 'multiply' },
+        _groupHover: { fill: 'icon.inverse' },
+        _groupActive: { fill: 'icon.inverse' },
+        _groupDisabled: {
+          fill: 'icon.inverse',
         },
-        icon: {
-          w: '22',
-          h: '22',
+      },
+    },
+    selectedSubtle: {
+      container: {
+        bg: 'bg.selected',
+        color: 'text.selected',
+        _hover: {
+          bg: 'bg.selected.hovered',
+          color: 'text.selected.hovered',
+        },
+        _active: {
+          bg: 'bg.selected.pressed',
+          color: 'text.selected',
+        },
+      },
+      icon: {
+        fill: 'icon.selected',
+        mixBlendMode: { base: 'multiply', _dark: 'screen' },
+        _groupHover: { fill: 'icon.selected' },
+        _groupActive: { fill: 'icon.selected' },
+        _groupDisabled: {
+          fill: 'icon.selected',
         },
       },
     },
+  },
+};
+
+const buttonSizes = {
+  sm: {
+    container: {
+      fontSize: '14',
+      py: '1',
+      px: '8',
+    },
+    icon: {
+      w: '22',
+      h: '22',
+    },
+  },
+  md: {
+    container: {
+      fontSize: '16',
+      py: '3',
+      px: '12',
+    },
+    icon: {
+      w: '24',
+      h: '24',
+    },
+  },
+  lg: {
+    container: {
+      fontSize: '16',
+      py: '7',
+      px: '14',
+    },
+    icon: {
+      w: '24',
+      h: '24',
+    },
+  },
+  xl: {
+    container: {
+      fontSize: '20',
+      py: '9',
+      px: '16',
+    },
+    icon: {
+      w: '28',
+      h: '28',
+    },
+  },
+};
+
+export const buttonRecipe = defineSlotRecipe({
+  className: 'button',
+  jsx: ['Button'],
+  slots: ['container', 'icon'],
+  base: baseButtonStyles,
+  variants: {
+    ...buttonVariants,
+    size: buttonSizes,
     iconBefore: {
       true: { container: {} },
     },
@@ -200,31 +296,31 @@ export const buttonRecipe = defineSlotRecipe({
   },
   compoundVariants: [
     {
-      size: 'md',
+      size: 'sm',
       iconBefore: true,
       css: {
-        container: { ps: '3' },
+        container: { ps: '2' },
       },
     },
     {
-      size: 'md',
+      size: 'sm',
       iconAfter: true,
       css: {
-        container: { pe: '3' },
+        container: { pe: '2' },
       },
     },
     {
-      size: 'sm',
+      size: 'md',
       iconBefore: true,
       css: {
-        container: { ps: '2' },
+        container: { ps: '3' },
       },
     },
     {
-      size: 'sm',
+      size: 'md',
       iconAfter: true,
       css: {
-        container: { pe: '2' },
+        container: { pe: '3' },
       },
     },
     {
@@ -270,16 +366,6 @@ export const iconButtonRecipe = defineSlotRecipe({
   variants: {
     ...buttonVariants,
     size: {
-      md: {
-        container: {
-          fontSize: '16',
-          p: '3',
-        },
-        icon: {
-          w: '24',
-          h: '24',
-        },
-      },
       sm: {
         container: {
           fontSize: '14',
@@ -290,6 +376,16 @@ export const iconButtonRecipe = defineSlotRecipe({
           h: '22',
         },
       },
+      md: {
+        container: {
+          fontSize: '16',
+          p: '3',
+        },
+        icon: {
+          w: '24',
+          h: '24',
+        },
+      },
       lg: {
         container: {
           fontSize: '16',

package/src/recipes/card.ts

@@ -32,6 +32,11 @@ export const cardRecipe = defineRecipe({
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0',
+    overflow: 'hidden',
+    _disabled: {
+      opacity: '0.4',
+      cursor: 'not-allowed',
+    },
   },
   variants: {
     variant: {
@@ -143,6 +148,5 @@ export const cardRecipe = defineRecipe({
   ],
   defaultVariants: {
     variant: 'default',
-    interactive: false,
   },
 });

package/src/recipes/checkbox.ts

@@ -3,20 +3,16 @@ import { defineSlotRecipe } from '@pandacss/dev';
 export const checkboxRecipe = defineSlotRecipe({
   className: 'checkbox',
   jsx: ['Checkbox'],
-  slots: ['container', 'input', 'indicator'],
+  slots: ['container', 'input', 'indicator', 'checkBg'],
   base: {
     container: {
       position: 'relative',
       display: 'inline-grid',
+      placeContent: 'center',
       gridTemplateColumns: 'auto 1fr',
-      gap: 4,
       alignItems: 'start',
       cursor: 'pointer',
       userSelect: 'none',
-      color: 'text',
-      _error: {
-        color: 'text.danger',
-      },
     },
     input: {
       position: 'absolute',
@@ -25,15 +21,17 @@ export const checkboxRecipe = defineSlotRecipe({
       height: 'full',
       margin: '0',
       padding: '0',
-      zIndex: 1,
+      zIndex: 'raised',
       cursor: 'inherit',
       "& ~ [name='checkbox']": {
         display: 'inline-grid',
+        zIndex: '3',
       },
       _checked: {
         "& ~ [name='checkbox-checked']": {
           display: 'inline-grid',
           fill: 'icon',
+          zIndex: '2',
         },
         "& ~ [name='checkbox']": {
           display: 'none',
@@ -43,26 +41,17 @@ export const checkboxRecipe = defineSlotRecipe({
         "& ~ [name='checkbox-indeterminate']": {
           display: 'inline-grid',
           fill: 'icon',
-          _disabled: {},
+          zIndex: '3',
         },
         "& ~ [name='checkbox']": {
           display: 'none',
         },
       },
-      _disabled: {
-        '& ~ svg': {
-          // fill: 'icon.disabled',
-          pointerEvents: 'none',
-        },
-        display: 'inline-grid',
-        _hover: {
-          cursor: 'not-allowed',
-        },
-      },
       _error: {
         display: 'inline-grid',
-        '& ~ svg': {
-          fill: 'icon.danger',
+        '& ~ svg:not([name="square"])': {
+          fill: 'red.50',
+          zIndex: '3',
         },
       },
       _focusVisible: {
@@ -70,18 +59,28 @@ export const checkboxRecipe = defineSlotRecipe({
           display: 'inline-grid',
           position: 'absolute',
           fill: 'border.focused',
+          zIndex: '2',
         },
       },
     },
     indicator: {
-      placeContent: 'center',
       display: 'none',
-      width: 24,
-      height: 24,
+      width: '24',
+      height: '24',
+      zIndex: '3',
       "&:is([name='checkbox'])": {
-        display: 'inline-grid',
         fill: 'icon.subtlest',
+        zIndex: '3',
       },
     },
+    checkBg: {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '24',
+      height: '24',
+      fill: 'surface',
+      zIndex: 'base',
+    },
   },
 });

package/src/recipes/checkboxInput.ts

@@ -0,0 +1,25 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const checkboxInputBase = {
+  display: 'flex',
+  alignItems: 'start',
+  gap: '4',
+  '&[class*="-label"]': {
+    fontSize: '{sizes.16}',
+    lineHeight: 'default',
+  },
+  _disabled: {
+    opacity: '40%',
+    cursor: 'not-allowed',
+  },
+  _groupDisabled: {
+    opacity: 1, // let FormField handle disabled state opacity
+  },
+};
+
+export const checkboxInputRecipe = defineRecipe({
+  className: 'checkboxInput',
+  jsx: ['CheckboxInput', 'Checkboxinput'],
+  base: checkboxInputBase,
+  variants: {},
+});