@okshaun/components 1.0.2 → 2.0.1

package/src/recipes/listItem.ts

@@ -0,0 +1,310 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const listItemRecipe = defineSlotRecipe({
+  className: 'listItem',
+  jsx: ['ListItem'],
+  slots: [
+    'wrapper',
+    'icon',
+    'itemMain',
+    'itemLabel',
+    'itemDescription',
+    'divider',
+  ],
+  base: {
+    wrapper: {
+      display: 'flex',
+      alignItems: 'start',
+      justifyContent: 'start',
+      gap: '4',
+      width: 'full',
+      textAlign: 'left',
+      borderWidth: '1',
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+      color: 'text',
+      cursor: 'pointer',
+      outline: '[2px solid transparent]',
+      outlineOffset: '-2',
+      bg: 'transparent',
+      scrollSnapAlign: 'start',
+      transitionDuration: 'fast',
+      transitionProperty: 'background, color',
+      transitionTimingFunction: 'default',
+      _hover: {
+        bg: 'bg.neutral.hovered',
+      },
+      '&:is(:active)': {
+        bg: 'bg.neutral.hovered',
+      },
+      _focus: {
+        bg: 'bg.neutral.hovered',
+      },
+      '&[data-active="true"]': {
+        bg: 'bg.neutral.hovered',
+      },
+      _disabled: {
+        opacity: '0.4',
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+      },
+    },
+    divider: {
+      width: 'full',
+    },
+    icon: {
+      aspectRatio: 'square',
+      transitionDuration: 'fast',
+      transitionProperty: 'fill',
+      transitionTimingFunction: 'default',
+      flexShrink: '0',
+    },
+    itemMain: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0',
+      minWidth: '0',
+    },
+    itemLabel: {
+      color: 'text',
+    },
+    itemDescription: {
+      color: 'text.subtlest',
+      lineHeight: 'tight',
+    },
+  },
+  variants: {
+    variant: {
+      default: {},
+      checkbox: {
+        wrapper: {
+          _hover: {
+            bg: 'bg.neutral.hovered',
+          },
+          _focus: {
+            bg: 'bg.neutral.hovered',
+          },
+          '&:is(:active), &:is([data-active="true"]):hover': {
+            bg: 'bg.neutral.hovered',
+          },
+          _selected: {
+            bg: 'surface',
+            _hover: {
+              bg: 'surface',
+            },
+            _focus: {
+              bg: 'bg.neutral.hovered',
+            },
+          },
+        },
+      },
+      toggle: {
+        wrapper: {
+          _hover: {
+            bg: 'bg.neutral.hovered',
+          },
+          _focus: {
+            bg: 'bg.neutral.hovered',
+          },
+          '&:is(:active), &:is([data-active="true"]):hover': {
+            bg: 'bg.neutral.hovered',
+          },
+          _selected: {
+            bg: 'surface',
+            _hover: {
+              bg: 'surface',
+            },
+            _focus: {
+              bg: 'bg.neutral.hovered',
+            },
+          },
+        },
+      },
+      divider: {},
+    },
+    density: {
+      compact: {
+        wrapper: {
+          py: '3',
+          px: '10',
+        },
+        itemLabel: {
+          textStyle: 'sans.md',
+          color: 'text',
+        },
+        itemDescription: {
+          textStyle: 'sans.xs',
+          lineHeight: 'tight',
+        },
+        icon: {
+          w: '24',
+          h: '24',
+        },
+        divider: {
+          py: '3',
+          px: '10',
+        },
+      },
+      comfortable: {
+        wrapper: {
+          py: '7',
+          px: '12',
+        },
+        itemLabel: {
+          textStyle: 'sans.md',
+          color: 'text',
+        },
+        itemDescription: {
+          textStyle: 'sans.xs',
+          lineHeight: 'tight',
+        },
+        icon: {
+          w: '24',
+          h: '24',
+        },
+        divider: {
+          py: '7',
+          px: '12',
+        },
+      },
+      spacious: {
+        wrapper: {
+          py: '9',
+          px: '16',
+        },
+        itemLabel: {
+          textStyle: 'sans.lg',
+          color: 'text',
+        },
+        itemDescription: {
+          textStyle: 'sans.sm',
+          lineHeight: 'tight',
+        },
+        icon: {
+          w: '28',
+          h: '28',
+        },
+        divider: {
+          py: '9',
+          px: '16',
+        },
+      },
+    },
+    selected: {
+      true: {
+        wrapper: {
+          bg: 'surface.selected',
+          '&[data-active="true"]': {
+            bg: 'surface.selected.hovered',
+          },
+          _hover: {
+            bg: 'surface.selected.hovered',
+          },
+          '&:is(:active)': {
+            bg: 'surface.selected.pressed',
+          },
+          _focusVisible: {
+            bg: 'surface.selected.hovered',
+          },
+        },
+      },
+      false: {},
+    },
+    iconBefore: {
+      true: {},
+      false: {},
+    },
+    iconAfter: {
+      true: {},
+      false: {},
+    },
+  },
+  compoundVariants: [
+    {
+      density: 'compact',
+      iconBefore: true,
+      css: {
+        wrapper: {
+          ps: '5',
+        },
+      },
+    },
+    {
+      density: 'compact',
+      iconAfter: true,
+      css: {
+        wrapper: {
+          pe: '5',
+        },
+      },
+    },
+    {
+      density: 'compact',
+      variant: 'checkbox',
+      css: {
+        wrapper: {
+          ps: '5',
+        },
+      },
+    },
+    {
+      density: 'comfortable',
+      iconBefore: true,
+      css: {
+        wrapper: {
+          ps: '7',
+        },
+      },
+    },
+    {
+      density: 'comfortable',
+      iconAfter: true,
+      css: {
+        wrapper: {
+          pe: '7',
+        },
+      },
+    },
+    {
+      density: 'comfortable',
+      variant: 'checkbox',
+      css: {
+        wrapper: {
+          ps: '7',
+        },
+      },
+    },
+    {
+      density: 'spacious',
+      iconBefore: true,
+      css: {
+        wrapper: {
+          ps: '9',
+        },
+      },
+    },
+    {
+      density: 'spacious',
+      iconAfter: true,
+      css: {
+        wrapper: {
+          pe: '9',
+        },
+      },
+    },
+    {
+      density: 'spacious',
+      variant: 'checkbox',
+      css: {
+        wrapper: {
+          ps: '9',
+        },
+      },
+    },
+  ],
+  defaultVariants: {
+    variant: 'default',
+    density: 'compact',
+    selected: false,
+  },
+});

package/src/recipes/listItemGroup.ts

@@ -0,0 +1,62 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const listItemGroupRecipe = defineSlotRecipe({
+  className: 'listItemGroup',
+  jsx: ['ListItemGroup'],
+  slots: ['wrapper', 'groupLabel', 'divider'],
+  base: {
+    wrapper: {
+      width: 'full',
+    },
+    groupLabel: {
+      color: 'text.subtlest',
+      borderStyle: 'solid',
+      borderWidth: '1',
+      borderColor: 'transparent',
+    },
+    divider: {},
+  },
+  variants: {
+    density: {
+      compact: {
+        groupLabel: {
+          px: '10',
+          pt: '8',
+          pb: '2',
+          fontSize: '12',
+        },
+        divider: {
+          my: '4',
+          mx: '10',
+        },
+      },
+      comfortable: {
+        groupLabel: {
+          px: '12',
+          pt: '12',
+          pb: '4',
+          fontSize: '14',
+        },
+        divider: {
+          my: '6',
+          mx: '12',
+        },
+      },
+      spacious: {
+        groupLabel: {
+          px: '16',
+          pt: '16',
+          pb: '6',
+          fontSize: '16',
+        },
+        divider: {
+          my: '8',
+          mx: '16',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    density: 'compact',
+  },
+});

package/src/recipes/menu.ts

@@ -1,180 +1,112 @@
 import { defineSlotRecipe } from '@pandacss/dev';
 
 const menuBase = {
-  // Floating container
-  menu: {
-    display: 'flex',
-    flexDirection: 'column',
-    minWidth: '200',
-    maxWidth: '320',
-    maxHeight: '400',
-    overflowY: 'auto',
-    bg: 'surface.overlay',
-    borderRadius: '8',
-    boxShadow: 'medium',
+  wrapper: {
+    width: 'fit',
+    bg: 'surface',
+    borderRadius: '4',
+    boxShadow: 'overlay',
+    overflow: 'hidden',
+    zIndex: '100',
+    transitionProperty: 'width, height',
+    transitionDuration: 'normal',
+    transitionTimingFunction: 'default',
     outline: 'none',
-    zIndex: 1000,
   },
-
-  // Individual menu item row
-  menuItem: {
+  backHeader: {
     display: 'flex',
-    alignItems: 'flex-start',
-    gap: '8',
-    px: '12',
-    py: '8',
+    alignItems: 'center',
+    justifyContent: 'start',
+    gap: '0',
+    ps: '4',
+    borderWidth: '0',
+    borderBlockWidth: '3',
+    borderColor: 'transparent',
+    bg: { base: 'tan.5', _dark: 'tan.60' },
+    width: 'full',
+    textAlign: 'left',
     cursor: 'pointer',
-    outline: 'none',
-    transitionProperty: 'background-color, color',
-    transitionDuration: 'fast',
-    bg: 'surface.overlay',
-
+    color: 'text',
     _hover: {
-      bg: 'surface.overlay.hovered',
-    },
-    _focusVisible: {
-      bg: 'surface.overlay.hovered',
+      bg: { base: 'tan.10', _dark: 'tan.50' },
     },
     _active: {
-      bg: 'surface.overlay.hovered',
-    },
-    _disabled: {
-      opacity: 0.5,
-      cursor: 'not-allowed',
-      pointerEvents: 'none',
-    },
-    _selected: {
-      bg: 'bg.selected',
+      bg: { base: 'tan.20', _dark: 'tan.70' },
     },
   },
-
-  // Selection indicator area (checkmark or checkbox)
-  menuItemIndicator: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    w: '24',
-    h: '24',
-    color: 'icon.selected',
+  levelsViewport: {
+    overflow: 'hidden',
+    width: 'full',
+    position: 'relative',
   },
-
-  // Left icon area
-  menuItemIconLeft: {
+  levelsTrack: {
     display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    w: '24',
-    h: '24',
-    color: 'icon.decorative',
+    width: 'full',
+    transitionProperty: 'transform',
+    transitionDuration: 'normal',
+    transitionTimingFunction: 'default',
+    willChange: 'transform',
   },
-
-  // Right icon area
-  menuItemIconRight: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    w: '24',
-    h: '24',
-    ml: 'auto',
-    color: 'icon.decorative',
+  level: {
+    minWidth: '0',
+    flexShrink: '0',
   },
-
-  // Content wrapper (label + description)
-  menuItemContent: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    minWidth: 0, // Enable text truncation
+  sizeProbe: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    visibility: 'hidden',
+    top: '0',
+    left: '0',
+    width: 'fit-content',
+    height: 'fit-content',
+    overflow: 'visible',
   },
-
-  // Primary label
-  menuItemLabel: {
-    fontSize: '16',
-    color: 'text',
-    fontFamily: 'sans',
-    fontWeight: 'normal',
-
-    // Highlight match styling for autocomplete
-    '& mark': {
-      bg: 'bg.warning.hovered',
-      color: 'text.bold',
-      borderRadius: '2',
-      // px: '2',
-    },
-  },
-
-  // Secondary description
-  menuItemDescription: {
-    fontSize: '12',
-    fontFamily: 'sans',
-    color: 'text.subtlest',
-  },
-
-  // Divider between items/groups
-  menuDivider: {
-    h: '1',
-    mx: '12',
-    my: '4',
-    bg: 'border',
-  },
-
-  // Group container
-  menuGroup: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-
-  // Group label
-  menuGroupLabel: {
-    fontSize: '12',
-    color: 'text.subtlest',
-    fontFamily: 'sans',
-    // fontWeight: 'medium',
-    // textTransform: 'uppercase',
-    // letterSpacing: 'wide',
+  noResults: {
     px: '12',
-    pt: '16',
-    pb: '4',
+    py: '10',
+    color: 'text.subtlest',
   },
 };
 
 const menuVariants = {
-  // Size variants
-  packing: {
-    default: {
-      menu: { minWidth: '200' },
-      menuItem: { py: '8' },
-    },
+  density: {
     compact: {
-      menu: { minWidth: '160' },
-      menuItem: { py: '4', px: '8' },
-      menuItemIconLeft: { w: '20', h: '20' },
-      menuItemIconRight: { w: '20', h: '20' },
-      menuItemIndicator: { w: '20', h: '20' },
+      backHeader: {
+        py: '1',
+        pe: '18',
+        ps: '5',
+        textStyle: 'body.md',
+        color: 'text',
+      },
     },
     comfortable: {
-      menu: { minWidth: '240' },
-      menuItem: { py: '12', px: '16' },
-    },
-  },
-
-  // Selection indicator position
-  indicatorPosition: {
-    left: {
-      menuItem: {
-        flexDirection: 'row',
+      backHeader: {
+        py: '5',
+        pe: '20',
+        ps: '7',
+        textStyle: 'body.md',
+        color: 'text',
       },
     },
-    right: {
-      menuItem: {
-        flexDirection: 'row',
+    spacious: {
+      backHeader: {
+        py: '7',
+        pe: '24',
+        ps: '9',
+        textStyle: 'body.lg',
+        color: 'text',
       },
-      menuItemIndicator: {
-        order: 999, // Move to end
-        ml: 'auto',
+    },
+  },
+  panel: {
+    true: {
+      wrapper: {
+        width: 'full',
+        height: 'full',
+        minHeight: 'full',
+        overflowY: 'auto',
+        rounded: '0',
+        boxShadow: 'none',
       },
     },
   },
@@ -182,24 +114,19 @@ const menuVariants = {
 
 export const menuRecipe = defineSlotRecipe({
   className: 'menu',
-  jsx: ['Menu', 'MenuItem', 'MenuTrigger', 'MenuDivider', 'MenuGroup'],
+  jsx: ['Menu', 'MenuItem', 'MenuGroup', 'SubMenu'],
   slots: [
-    'menu',
-    'menuItem',
-    'menuItemIndicator',
-    'menuItemIconLeft',
-    'menuItemIconRight',
-    'menuItemContent',
-    'menuItemLabel',
-    'menuItemDescription',
-    'menuDivider',
-    'menuGroup',
-    'menuGroupLabel',
+    'wrapper',
+    'backHeader',
+    'levelsViewport',
+    'levelsTrack',
+    'level',
+    'sizeProbe',
+    'noResults',
   ],
   base: menuBase,
   variants: menuVariants,
   defaultVariants: {
-    packing: 'default',
-    indicatorPosition: 'left',
+    density: 'compact',
   },
 });