@okshaun/components 1.0.2 → 2.0.1

package/src/recipes/chip.ts

@@ -19,24 +19,16 @@ const chipBase = {
     transitionTimingFunction: 'default',
     userSelect: 'none',
     border: 'none',
-    outlineWidth: 2,
+    outlineWidth: '2',
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     bg: 'bg.neutral',
     color: 'text',
-    icon: {
-      fill: 'icon.decorative',
-      transitionDuration: 'fast',
-      transitionProperty: 'fill',
-      transitionTimingFunction: 'default',
-    },
     _hover: {
       bg: 'bg.neutral.hovered',
-      icon: { fill: 'icon.decorative.hovered' },
     },
     _active: {
       bg: 'bg.neutral.pressed',
-      icon: { fill: 'icon.decorative.hovered' },
     },
     _focusVisible: {
       outlineColor: 'border.focused',
@@ -48,72 +40,78 @@ const chipBase = {
     _deleted: {
       textDecoration: 'line-through',
       cursor: 'not-allowed',
-      opacity: 0.6,
+      opacity: '[0.6]',
     },
     _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' },
       },
     },
     _selected: {
-      bg: 'bg.brand.boldest',
+      bg: 'bg.neutral.boldest',
       color: 'text.inverse',
-      icon: { fill: 'icon.decorative.inverse' },
       _hover: {
-        bg: 'bg.brand.boldest.hovered',
-        icon: { fill: 'icon.inverse' },
+        bg: 'bg.neutral.bold.hovered',
       },
       _active: {
-        bg: 'bg.brand.boldest.pressed',
-        icon: { fill: 'icon.inverse' },
+        bg: 'bg.neutral.bold.pressed',
       },
     },
   },
-  icon: {
+  chipIcon: {
+    fill: 'icon.decorative',
     aspectRatio: 'square',
     transitionDuration: 'fast',
     transitionProperty: 'fill',
     transitionTimingFunction: 'default',
+    _groupHover: { fill: 'icon.decorative.hovered' },
+    _groupActive: { fill: 'icon.decorative.hovered' },
+    _groupDisabled: { fill: 'icon.decorative' },
+
+    '[data-selected=true] &': {
+      fill: 'icon.decorative.inverse',
+    },
+    '.group:is(:hover, [data-hover])[data-selected=true] &': {
+      fill: 'icon.decorative.inverse.hovered',
+    },
   },
 };
 
 export const chipRecipe = defineSlotRecipe({
   className: 'chip',
   jsx: ['Chip'],
-  slots: ['container', 'icon'],
+  slots: ['container', 'chipIcon'],
   base: chipBase,
   variants: {
     size: {
-      md: {
+      sm: {
         container: {
-          gap: '4',
-          h: '24',
-          px: '8',
-          py: '1',
+          gap: '2',
+          h: '20',
+          px: '6',
+          py: '0',
           fontSize: '14',
         },
-        icon: {
+        chipIcon: {
           w: '20',
           h: '20',
         },
       },
-      sm: {
+      md: {
         container: {
-          gap: '2',
-          h: '20',
-          px: '6',
-          py: '0',
+          gap: '4',
+          h: '24',
+          px: '8',
+          py: '1',
           fontSize: '14',
         },
-        icon: {
+        chipIcon: {
           w: '20',
           h: '20',
         },
@@ -126,7 +124,7 @@ export const chipRecipe = defineSlotRecipe({
           py: '4',
           fontSize: '16',
         },
-        icon: {
+        chipIcon: {
           w: '24',
           h: '24',
         },
@@ -141,28 +139,28 @@ export const chipRecipe = defineSlotRecipe({
   },
   compoundVariants: [
     {
-      size: 'md',
+      size: 'sm',
       before: true,
       css: {
         container: { ps: '2' },
       },
     },
     {
-      size: 'md',
+      size: 'sm',
       after: true,
       css: {
         container: { pe: '2' },
       },
     },
     {
-      size: 'sm',
+      size: 'md',
       before: true,
       css: {
         container: { ps: '2' },
       },
     },
     {
-      size: 'sm',
+      size: 'md',
       after: true,
       css: {
         container: { pe: '2' },

package/src/recipes/code.ts

@@ -1,7 +1,7 @@
 import { defineRecipe } from '@pandacss/dev';
 
 const codeBase = {
-  bg: 'gray.80',
+  bg: 'bg.neutral.inverse',
   position: 'relative',
   overflow: 'auto',
   p: '4',
@@ -13,9 +13,9 @@ const preBase = {
   borderRadius: '8',
   overflow: 'hidden',
   borderWidth: '0',
-  borderColor: 'gray.60',
-  bg: 'gray.80',
-  color: 'gray.10',
+  borderColor: 'border',
+  bg: 'bg.neutral.inverse',
+  color: 'text.inverse.subtlest',
   px: '16',
   py: '8',
   my: '8',

package/src/recipes/datePicker.ts

@@ -0,0 +1,212 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+const datePickerBase = {
+  root: {
+    display: 'inline-flex',
+    flexDirection: 'column',
+    position: 'relative',
+  },
+  input: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '2',
+    width: 'full',
+    borderWidth: '1',
+    borderStyle: 'solid',
+    borderColor: 'border.input',
+    borderRadius: '4',
+    outlineWidth: '2',
+    outlineOffset: '-1',
+    outlineStyle: 'solid',
+    outlineColor: 'transparent',
+    bg: 'bg.input',
+    color: 'text',
+    fontFamily: 'mono',
+    lineHeight: 'default',
+    cursor: 'text',
+    userSelect: 'none',
+    transitionDuration: 'fast',
+    transitionProperty: 'background, border-color, outline-color',
+    transitionTimingFunction: 'default',
+    _focusWithin: {
+      bg: 'bg.input.pressed',
+      borderColor: 'border.focused',
+      outlineColor: 'border.focused',
+    },
+    _open: {
+      bg: 'bg.input.pressed',
+      borderColor: 'border.focused',
+      outlineColor: 'border.focused',
+    },
+    _disabled: {
+      bg: 'bg.disabled',
+      borderColor: 'border.disabled',
+      color: 'text.disabled',
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+    },
+    _error: {
+      bg: 'bg.danger',
+      borderColor: 'border.danger',
+      color: 'text.danger',
+      _hover: {
+        bg: 'bg.danger.hovered',
+        borderColor: 'border.danger',
+      },
+      _focusWithin: {
+        bg: 'bg.danger',
+        borderColor: 'border.danger',
+        outlineColor: 'border.danger',
+      },
+      _open: {
+        bg: 'bg.danger',
+        borderColor: 'border.danger',
+        outlineColor: 'border.danger',
+      },
+    },
+  },
+  segment: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    outline: 'none',
+    borderRadius: '{sizes.2}',
+    cursor: 'default',
+    userSelect: 'none',
+    fontFamily: 'mono',
+    fontVariantsProperty: 'mono',
+    fontVariantNumeric: 'tabular-nums',
+    minWidth: '{sizes.24}',
+    textAlign: 'center',
+    color: 'text',
+    _focusVisible: {
+      bg: 'bg.neutral.hovered',
+    },
+    _groupDisabled: {
+      color: 'text.disabled',
+    },
+  },
+  separator: {
+    color: 'text.placeholder',
+    userSelect: 'none',
+    display: 'inline-flex',
+    alignItems: 'center',
+  },
+  popover: {
+    display: 'flex',
+    flexDirection: 'column',
+    bg: 'surface.overlay',
+    borderWidth: '1',
+    borderStyle: 'solid',
+    borderColor: 'border',
+    borderRadius: '8',
+    boxShadow: 'overlay',
+    zIndex: '1000',
+    width: '280',
+    overflow: 'hidden',
+    outline: 'none',
+  },
+  calendarHeader: {
+    fontFamily: 'mono',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    px: '8',
+    py: '8',
+    borderBottom: 'default',
+    gap: '4',
+  },
+  calendarGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(7, 1fr)',
+    gap: '2',
+    px: '8',
+    py: '4',
+    pb: '8',
+  },
+  weekdayLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    userSelect: 'none',
+  },
+  day: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontFamily: 'mono',
+    width: '32',
+    height: '32',
+    _today: {
+      fontWeight: 'bold',
+      color: 'text.selected',
+      bg: 'bg.selected',
+    },
+    _selected: {
+      bg: 'bg.selected.bold',
+      color: 'text.inverse',
+      _hover: {
+        bg: 'bg.selected.bold.hovered',
+      },
+      _today: {
+        bg: 'bg.selected.bold',
+        color: 'text.inverse',
+      },
+    },
+    _unavailable: {
+      color: 'text.disabled',
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+      _hover: {
+        bg: 'transparent',
+      },
+    },
+  },
+};
+
+const datePickerVariants = {
+  size: {
+    sm: {
+      input: {
+        py: '0',
+        px: '8',
+        fontSize: '14',
+      },
+    },
+    md: {
+      input: {
+        py: '3',
+        px: '10',
+        fontSize: '16',
+      },
+    },
+    lg: {
+      input: {
+        py: '7',
+        px: '12',
+        fontSize: '16',
+      },
+    },
+  },
+};
+
+export const datePickerRecipe = defineSlotRecipe({
+  className: 'datePicker',
+  jsx: ['DatePicker', 'DateRangePicker'],
+  slots: [
+    'root',
+    'input',
+    'segment',
+    'separator',
+    'popover',
+    'calendarHeader',
+    'navButton',
+    'calendarGrid',
+    'weekdayLabel',
+    'day',
+  ],
+  base: datePickerBase,
+  variants: datePickerVariants,
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/recipes/divider.ts

@@ -1,40 +1,46 @@
 import { defineRecipe } from '@pandacss/dev';
 
-const dividerBase = {
-  '--divider-weight': 'sizes.1',
-  borderStyle: 'solid',
-  color: 'border.default',
-  borderColor: 'current',
-  minWidth: '1',
-  minHeight: '1',
-};
-
-const dividerVariants = {
-  direction: {
-    horizontal: {
-      width: 'stretch',
-      borderTopStyle: 'solid',
-      borderTopWidth: 'var(--divider-weight)',
-    },
-    vertical: {
-      height: 'stretch',
-      borderLeftStyle: 'solid',
-      borderLeftWidth: 'var(--divider-weight)',
-    },
-  },
-  weight: {
-    thin: { '--divider-weight': 'sizes.1' },
-    medium: { '--divider-weight': 'sizes.2' },
-    thick: { '--divider-weight': 'sizes.4' },
-    thicker: { '--divider-weight': 'sizes.6' },
-  },
-};
-
 export const dividerRecipe = defineRecipe({
   className: 'divider',
   jsx: ['Divider'],
-  base: dividerBase,
-  variants: dividerVariants,
+  base: {
+    borderStyle: 'solid',
+    color: 'border',
+    borderColor: 'current',
+    borderWidth: '0',
+    minWidth: '1',
+    minHeight: '1',
+  },
+  variants: {
+    direction: {
+      horizontal: {
+        width: 'stretch',
+        borderTopWidth: '{sizes.1}',
+      },
+      vertical: {
+        height: 'stretch',
+        borderLeftWidth: '{sizes.1}',
+      },
+    },
+    weight: {
+      thin: {
+        borderTopWidth: '{sizes.1}',
+        borderLeftWidth: '{sizes.1}',
+      },
+      medium: {
+        borderTopWidth: '{sizes.2}',
+        borderLeftWidth: '{sizes.2}',
+      },
+      thick: {
+        borderTopWidth: '{sizes.4}',
+        borderLeftWidth: '{sizes.4}',
+      },
+      thicker: {
+        borderTopWidth: '{sizes.6}',
+        borderLeftWidth: '{sizes.6}',
+      },
+    },
+  },
   defaultVariants: {
     direction: 'horizontal',
     weight: 'thin',

package/src/recipes/formField.ts

@@ -1,60 +1,78 @@
 import { defineSlotRecipe } from '@pandacss/dev';
 
 const formFieldBase = {
-  formFieldContainer: {
+  container: {
     _disabled: {
-      // opacity: '0.4',
+      opacity: '0.4',
       pointerEvents: 'none',
-      labelWrapper: {
-        '& p': {
-          color: 'text.disabled',
-        },
-      },
     },
   },
-  contentWrapper: {
+  inputs: {
     display: 'flex',
     flexDirection: 'column',
-    gap: '6',
+    gap: '2',
   },
   labelWrapper: {
-    '& p': {
-      color: 'text',
-    },
-  },
-  headLabel: {
-    display: 'flex',
-    gap: '4',
+    alignItems: 'center',
+    gap: '2',
   },
 };
 
 const formFieldVariants = {
   layout: {
     default: {
-      formFieldContainer: {
+      container: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '6',
+        gap: '2',
       },
     },
     inline: {
-      formFieldContainer: {
+      container: {
         display: 'grid',
-        gap: '12',
+        columnGap: '12',
+        rowGap: '2',
         gridTemplateColumns: 'auto 1fr',
+        gridTemplateRows: 'auto auto',
         alignItems: 'start',
       },
     },
   },
+  size: {
+    sm: {
+      labelWrapper: {
+        '& [class=*-label]': {
+          fontSize: '14',
+          lineHeight: 'tight',
+        },
+      },
+    },
+    md: {
+      labelWrapper: {
+        pt: '6',
+      },
+    },
+    lg: {
+      labelWrapper: {
+        pt: '10',
+      },
+    },
+    xl: {
+      labelWrapper: {
+        pt: '12',
+      },
+    },
+  },
 };
 
 export const formFieldRecipe = defineSlotRecipe({
-  className: 'formfield',
-  jsx: ['Formfield'],
-  slots: ['formFieldContainer', 'contentWrapper', 'labelWrapper', 'headLabel'],
+  className: 'formField',
+  jsx: ['FormField'],
+  slots: ['container', 'inputs', 'labelWrapper'],
   base: formFieldBase,
   variants: formFieldVariants,
   defaultVariants: {
     layout: 'default',
+    size: 'md',
   },
 });

package/src/recipes/highlightText.ts

@@ -0,0 +1,14 @@
+import { defineRecipe } from '@pandacss/dev';
+
+export const highlightTextRecipe = defineRecipe({
+  className: 'highlightText',
+  jsx: ['HighlightText'],
+  base: {
+    bg: { base: 'orange.40/40', _dark: 'orange.60/40' },
+    color: 'text',
+    borderRadius: '2',
+    lineHeight: 'inherit',
+    mixBlendMode: { base: 'multiply', _dark: 'lighten' },
+  },
+  variants: {},
+});

package/src/recipes/icon.ts

@@ -0,0 +1,13 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const iconBase = {
+  w: '24',
+  aspectRatio: 'square',
+  fill: 'icon.decorative',
+};
+
+export const iconRecipe = defineRecipe({
+  className: 'icon',
+  jsx: ['Icon'],
+  base: iconBase,
+});

package/src/recipes/list.ts

@@ -0,0 +1,14 @@
+import { defineRecipe } from '@pandacss/dev';
+
+export const listRecipe = defineRecipe({
+  className: 'list',
+  jsx: ['List'],
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'start',
+    justifyContent: 'start',
+    gap: '0',
+  },
+  variants: {},
+});