@okshaun/components 1.0.1 → 2.0.0

package/src/recipes/textarea.ts

@@ -1,153 +1,80 @@
 import { defineRecipe } from '@pandacss/dev';
 
-const textareaVariants = {
-  size: {
-    md: {
-      py: '3',
-      px: '10',
-      fontSize: '16',
-      minHeight: '64',
-    },
-    sm: {
-      py: '0',
-      px: '8',
-      minHeight: '48',
-      fontSize: '14',
+export const textareaRecipe = defineRecipe({
+  className: 'textarea',
+  jsx: ['Textarea'],
+  base: {
+    fontSize: '[100%]',
+    position: 'relative',
+    width: 'full',
+    bg: 'surface',
+    color: 'text',
+    borderWidth: '1',
+    borderStyle: 'solid',
+    borderColor: 'border.input',
+    borderRadius: '4',
+    lineHeight: 'tight',
+    fontFamily: 'body',
+    outlineWidth: '1',
+    outlineStyle: 'solid',
+    outlineColor: 'transparent',
+    resize: 'both',
+    _placeholder: {
+      color: 'text.placeholder',
     },
-    lg: {
-      py: '7',
-      px: '12',
-      fontSize: '16',
-      minHeight: '80',
+    _focus: {
+      outlineColor: 'border.focused',
+      borderColor: 'border.focused',
     },
-    xl: {
-      py: '9',
-      px: '16',
-      fontSize: '20',
-      minHeight: '96',
+    _error: {
+      display: 'inline-grid',
+      borderColor: 'border.danger',
+      _focus: {
+        borderColor: 'border.danger',
+        outlineColor: 'border.danger',
+      },
     },
-  },
-  autoSize: {
-    false: {
-      width: 'full',
+    _disabled: {
+      opacity: '[0.4]',
     },
-    true: {
-      width: 'fit-content',
-      fieldSizing: 'content',
+    _groupDisabled: {
+      opacity: '[1]', // let FormField handle disabled state opacity
     },
   },
-  // stacked: {
-  //   true: {
-  //     gridTemplateRows: 'auto 1fr',
-  //     alignItems: 'stretch',
-  //     '&::after, & textarea': {
-  //       gridArea: '2 / 1',
-  //     },
-  //     '& textarea': {
-  //       background: { base: 'gray.10', _dark: 'gray.90' },
-  //       borderColor: { base: 'gray.40', _dark: 'gray.100' },
-  //       // _hover: {
-  //       //   borderColor: { base: 'gray.20', _dark: 'gray.30' },
-  //       // },
-  //       // _focus: {
-  //       //   borderColor: { base: 'gray.90', _dark: 'gray.10' },
-  //       // },
-  //     },
-  //   },
-  //   false: {
-  //     gridTemplateColumns: 'auto 1fr',
-  //     alignItems: 'center',
-  //     '& textarea': {
-  //       background: { base: 'gray.10', _dark: 'gray.90' },
-  //       borderColor: { base: 'green.40', _dark: 'green.50' },
-  //       // _hover: {
-  //       //   borderColor: { base: 'gray.20', _dark: 'gray.30' },
-  //       // },
-  //       // _focus: {
-  //       //   borderColor: { base: 'gray.90', _dark: 'gray.10' },
-  //       // },
-  //     },
-  //   },
-  // },
-  // internalLabel: {
-  //   false: {},
-  //   true: {
-  //     // _focusWithin: {
-  //     //   outlineWidth: 1,
-  //     //   outlineStyle: 'solid',
-  //     //   outlineColor: { base: 'gray.90', _dark: 'gray.10' },
-  //     //   // outlineOffset: 2,
-  //     //   ml: '-4',
-  //     // },
-  //   },
-  // },
-};
-
-const textareaBase = {
-  display: 'inline-grid',
-  position: 'relative',
-  width: 'full',
-  verticalAlign: 'top',
-  borderWidth: '1',
-  borderStyle: 'solid',
-  borderColor: 'border.input',
-  borderRadius: '4',
-  outlineWidth: '2',
-  outlineOffset: '-1',
-  outlineStyle: 'solid',
-  outlineColor: 'transparent',
-  lineHeight: 'default',
-  fontFamily: 'body',
-  bg: 'bg.input',
-  color: 'text',
-  transitionDuration: 'fast',
-  transitionProperty: 'background, border-color, color, outline-color',
-  transitionTimingFunction: 'default',
-  _placeholder: {
-    color: 'text.placeholder',
-  },
-  // _hover: {
-  //   bg: 'bg.input.hovered',
-  // },
-  _focus: {
-    bg: 'bg.input.pressed',
-    borderColor: 'border.focused',
-    outlineColor: 'border.focused',
-  },
-  _disabled: {
-    bg: 'bg.disabled',
-    borderColor: 'border.disabled',
-    color: 'text.disabled',
-  },
-  _error: {
-    display: 'inline-grid',
-    bg: 'bg.danger',
-    borderColor: 'border.danger',
-    color: 'text.danger',
-    _placeholder: {
-      color: 'text.danger/60',
+  variants: {
+    size: {
+      sm: {
+        py: '0',
+        px: '8',
+        minHeight: '48',
+        fontSize: '14',
+      },
+      md: {
+        py: '3',
+        px: '10',
+        fontSize: '16',
+        minHeight: '64',
+      },
+      lg: {
+        py: '7',
+        px: '12',
+        fontSize: '16',
+        minHeight: '80',
+      },
+      xl: {
+        py: '9',
+        px: '16',
+        fontSize: '20',
+        minHeight: '96',
+      },
     },
-    _hover: {
-      bg: 'bg.danger.hovered',
-      borderColor: 'border.danger',
-    },
-    _focus: {
-      bg: 'bg.danger',
-      borderColor: 'border.danger',
-      outlineColor: 'border.danger',
+    autoSize: {
+      true: {
+        fieldSizing: 'content',
+      },
     },
   },
-};
-
-export const textareaRecipe = defineRecipe({
-  className: 'textarea',
-  jsx: ['Textarea'],
-  base: textareaBase,
-  variants: textareaVariants,
   defaultVariants: {
     size: 'md',
-    // stacked: true,
-    // internalLabel: false,
-    // autoGrow: false,
   },
 });

package/src/recipes/themeSwitcher.ts

@@ -19,14 +19,14 @@ export const themeSwitcherRecipe = defineRecipe({
     height: '14',
     minWidth: '14',
     minHeight: '14',
-    flexShrink: 0,
+    flexShrink: '[0]',
     aspectRatio: 'square',
     transition: 'all',
     '&:before': {
       content: '""',
       position: 'absolute',
       inset: '0',
-      opacity: 0,
+      opacity: 'revert-layer',
       display: 'block',
       borderRadius: '100',
       bg: 'bg.neutral.inverse.bold',
@@ -41,7 +41,7 @@ export const themeSwitcherRecipe = defineRecipe({
       '&:before': {
         inset: '-8',
         bg: 'bg.neutral.inverse.bold',
-        opacity: 0.25,
+        opacity: '[0.25]',
       },
     },
   },

package/src/recipes/timePicker.ts

@@ -0,0 +1,199 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+const timePickerBase = {
+  root: {
+    display: 'inline-flex',
+    flexDirection: 'column',
+    position: 'relative',
+  },
+
+  // The segmented input container — visually identical to textinput
+  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: {
+      borderColor: 'border.danger',
+      _hover: {
+        borderColor: 'border.danger',
+      },
+      _focusWithin: {
+        borderColor: 'border.danger',
+        outlineColor: 'border.danger',
+      },
+      _open: {
+        borderColor: 'border.danger',
+        outlineColor: 'border.danger',
+      },
+    },
+  },
+
+  // Individual focusable segment span (HH, MM, AM/PM)
+  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',
+    },
+  },
+
+  // The ":" separator between time segments
+  separator: {
+    color: 'text.placeholder',
+    userSelect: 'none',
+    display: 'inline-flex',
+    alignItems: 'center',
+  },
+
+  // The floating time list container
+  popover: {
+    display: 'flex',
+    flexDirection: 'row',
+    bg: 'surface.overlay',
+    borderWidth: '1',
+    borderStyle: 'solid',
+    borderColor: 'border',
+    borderRadius: '8',
+    boxShadow: 'overlay',
+    zIndex: '1000',
+    overflow: 'hidden',
+    outline: 'none',
+    w: 'fit',
+  },
+
+  // A single scrollable column (hours, minutes, or AM/PM)
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    overflowY: 'auto',
+    flex: 1,
+    maxHeight: '200',
+    scrollSnapType: 'y mandatory',
+    borderRight: 'default',
+    minW: '56',
+    textAlign: 'center',
+    _last: {
+      borderRight: 'none',
+    },
+    // Hide scrollbar visually but keep functionality
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+    scrollbarWidth: 'none' as const,
+    msOverflowStyle: 'none',
+  },
+
+  // Optional column header (e.g. "Hr", "Min")
+  columnLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    py: '4',
+    px: '8',
+    fontSize: '11',
+    fontWeight: 'medium',
+    color: 'text.subtlest',
+    textTransform: 'uppercase',
+    letterSpacing: 'widest',
+    borderBottom: 'default',
+    position: 'sticky',
+    top: '0',
+    bg: 'surface.overlay',
+    zIndex: 1,
+    userSelect: 'none',
+  },
+};
+
+const timePickerVariants = {
+  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 timePickerRecipe = defineSlotRecipe({
+  className: 'timePicker',
+  jsx: ['TimePicker', 'TimeRangePicker'],
+  slots: [
+    'root',
+    'input',
+    'segment',
+    'separator',
+    'popover',
+    'column',
+    'columnLabel',
+  ],
+  base: timePickerBase,
+  variants: timePickerVariants,
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/recipes/toggle.ts

@@ -1,116 +1,89 @@
 import { defineSlotRecipe } from '@pandacss/dev';
 
-const toggleBase = {
-  container: {
-    position: 'relative',
-    w: '40',
-    h: '24',
-    cursor: 'pointer',
-    _disabled: {
-      opacity: 0.4,
-      pointerEvents: 'none',
-      cursor: 'none',
-      display: 'inline-grid',
+export const toggleRecipe = defineSlotRecipe({
+  className: 'toggle',
+  jsx: ['Toggle'],
+  slots: ['container', 'input', 'indicator'],
+  base: {
+    container: {
+      position: 'relative',
+      w: '32',
+      h: '20',
+      my: '2',
+      rounded: '20',
+      bg: 'surface',
+      cursor: 'pointer',
+      transitionProperty: 'border-color, background-color',
+      transitionDuration: 'default',
+      transitionTimingFunction: 'ease-in-out',
+      borderWidth: '2',
+      borderStyle: 'solid',
+      borderColor: 'icon.decorative.subtle',
+      '&:has(input:checked)': {
+        bg: 'bg.neutral.inverse',
+        borderColor: 'transparent',
+      },
+      _error: {
+        borderColor: 'border.danger',
+      },
+      '&:has(:focus-visible)': {
+        appearance: 'none',
+        opacity: '[1]',
+        outlineColor: 'border.focused',
+        outlineOffset: '1',
+        outlineWidth: '2',
+        outlineStyle: 'solid',
+        rounded: '20',
+        w: '32',
+        h: '20',
+      },
     },
-  },
 
-  background: {
-    position: 'absolute',
-    w: '40',
-    h: '24',
-    rounded: '24',
-    bg: 'surface',
-    transitionProperty: 'border-color, background-color',
-    transitionDuration: '200ms',
-    transitionTimingFunction: 'ease-in-out',
-    borderWidth: '2',
-    borderStyle: 'solid',
-    borderColor: 'border',
-  },
-
-  input: {
-    position: 'absolute',
-    opacity: 0,
-    w: '40',
-    h: '24',
-    rounded: '24',
-    m: 0,
-    p: 0,
-    border: 'none',
-    zIndex: 0,
-    cursor: 'inherit',
-
-    "& ~ [name='circle']": {
-      display: 'inline-grid',
+    input: {
       position: 'absolute',
-      opacity: 1,
-      transform: 'translateX(0)',
-      transitionProperty: 'transform, opacity',
-      transitionDuration: '200ms',
-      transitionTimingFunction: 'ease-in-out',
-      fill: 'icon.decorative/80',
+      opacity: '[0]',
+      w: '32',
+      h: '20',
+      m: '-2',
+      p: '0',
+      border: 'none',
+      zIndex: 'base',
+      cursor: 'inherit',
     },
 
-    "& ~ [name='circle-check']": {
-      display: 'inline-grid',
-      position: 'absolute',
-      opacity: 0,
-      transform: 'translateX(0)',
+    indicator: {
+      display: 'none',
+      w: '20',
+      h: '20',
+      m: '-2',
       transitionProperty: 'transform, opacity',
       transitionDuration: '200ms',
       transitionTimingFunction: 'ease-in-out',
-    },
 
-    _checked: {
-      "& ~ [name='circle']": {
-        opacity: 0,
-        transform: 'translateX(10px)',
+      "&:is([name='circle'])": {
+        display: 'inline-grid',
+        position: 'absolute',
+        opacity: '[1]',
+        fill: 'icon.decorative.subtle',
+        transform: '[translateX(0)]',
+        'input:checked ~ &': {
+          opacity: '[0]',
+          transform: '[translateX(8px)]',
+        },
       },
-      "& ~ [name='circle-check']": {
-        opacity: 1,
-        transform: 'translateX(16px)',
+
+      "&:is([name='circle-check'])": {
+        display: 'inline-grid',
+        position: 'absolute',
+        opacity: 'inherit',
+        transform: '[translateX(0)]',
         fill: 'icon.inverse',
+        'input:checked ~ &': {
+          opacity: '[1]',
+          transform: '[translateX(12px)]',
+          fill: 'icon.inverse',
+        },
       },
-      "& ~ [name='toggle-bg']": {
-        bg: 'bg.neutral.inverse',
-        borderColor: 'bg.neutral.inverse',
-      },
-    },
-    _error: {
-      "& ~ [name='toggle-bg']": {
-        borderColor: 'error.default',
-      },
-    },
-
-    _focusVisible: {
-      appearance: 'none',
-      opacity: 1,
-      outlineColor: { base: 'gray.80', _dark: 'gray.10' },
-      outlineOffset: 1,
-      outlineWidth: 2,
-      outlineStyle: 'solid',
-      rounded: '24',
-      w: '40',
-      h: '24',
-    },
-  },
-
-  indicator: {
-    display: 'none',
-    w: '24',
-    h: '24',
-    transitionProperty: 'border-color, background-color',
-    transitionDuration: '200ms',
-    transitionTimingFunction: 'ease-in-out',
-    "&:is([name='circle'])": {
-      fill: { base: 'gray.20', _dark: 'gray.40' },
     },
   },
-};
-
-export const toggleRecipe = defineSlotRecipe({
-  className: 'toggle',
-  jsx: ['toggle'],
-  slots: ['container', 'input', 'indicator', 'background'],
-  base: toggleBase,
 });

package/src/recipes/toggleInput.ts

@@ -0,0 +1,26 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const toggleInputBase = {
+  display: 'grid',
+  gridTemplateColumns: '{sizes.32} auto',
+  gap: '6',
+  userSelect: 'none',
+  '&.cetec-label': {
+    fontSize: '{sizes.16}',
+    lineHeight: 'default',
+  },
+  _disabled: {
+    opacity: '40%',
+    cursor: 'not-allowed',
+  },
+  _groupDisabled: {
+    opacity: 1, // let FormField handle disabled state opacity
+  },
+};
+
+export const toggleInputRecipe = defineRecipe({
+  className: 'toggleInput',
+  jsx: ['ToggleInput', 'Toggleinput'],
+  base: toggleInputBase,
+  variants: {},
+});