@okshaun/components 1.0.1 → 2.0.0

package/src/recipes/datePicker.ts

@@ -0,0 +1,223 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+const datePickerBase = {
+  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 (MM, DD, YYYY)
+  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 "/" or " " literal between date segments
+  separator: {
+    color: 'text.placeholder',
+    userSelect: 'none',
+    display: 'inline-flex',
+    alignItems: 'center',
+  },
+
+  // The floating calendar container
+  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',
+  },
+
+  // Month/year navigation row
+  calendarHeader: {
+    fontFamily: 'mono',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    px: '8',
+    py: '8',
+    borderBottom: 'default',
+    gap: '4',
+  },
+
+  // 7-column grid for the days
+  calendarGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(7, 1fr)',
+    gap: '2',
+    px: '8',
+    py: '4',
+    pb: '8',
+  },
+
+  // Su Mo Tu We Th Fr Sa column headers
+  weekdayLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    userSelect: 'none',
+  },
+
+  // Individual day button in the grid
+  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,39 +1,46 @@
 import { defineRecipe } from '@pandacss/dev';
 
-const dividerBase = {
-  '--divider-weight': 'sizes.1',
-  color: { base: 'gray.20', _dark: 'gray.80' },
-  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: {},
+});