@okshaun/components 0.3.4 → 0.4.0

package/dist/panda.buildinfo.json

@@ -40,6 +40,14 @@
       "color]___[value:text.bold",
       "textStyle]___[value:mono.sm",
       "marginLeft]___[value:8",
+      "paddingInlineStart]___[value:3",
+      "paddingInlineEnd]___[value:3",
+      "paddingInlineStart]___[value:2",
+      "paddingInlineEnd]___[value:2",
+      "paddingInlineStart]___[value:5",
+      "paddingInlineEnd]___[value:5",
+      "paddingInlineStart]___[value:7",
+      "paddingInlineEnd]___[value:7",
       "flexDirection]___[value:column",
       "padding]___[value:16",
       "gap]___[value:4",
@@ -57,17 +65,8 @@
       "paddingInline]___[value:20]___[cond:md",
       "paddingInline]___[value:16]___[cond:sm",
       "color]___[value:gold.40",
-      "paddingInlineStart]___[value:3",
-      "paddingInlineEnd]___[value:3",
-      "paddingInlineStart]___[value:2",
-      "paddingInlineEnd]___[value:2",
-      "paddingInlineStart]___[value:5",
-      "paddingInlineEnd]___[value:5",
-      "paddingInlineStart]___[value:7",
-      "paddingInlineEnd]___[value:7",
       "gridColumn]___[value:1 / -1",
       "marginTop]___[value:32",
-      "maxWidth]___[value:280",
       "color]___[value:text.subtle",
       "background]___[value:bg.neutral",
       "color]___[value:text.inverse",
@@ -166,6 +165,17 @@
       "marginRight]___[value:12",
       "marginRight]___[value:8",
       "marginLeft]___[value:12",
+      "width]___[value:280",
+      "width]___[value:320",
+      "padding]___[value:12",
+      "background]___[value:surface.sunken",
+      "borderRadius]___[value:8",
+      "color]___[value:text.subtlest",
+      "color]___[value:text.brand",
+      "cursor]___[value:pointer",
+      "fontWeight]___[value:medium",
+      "width]___[value:24",
+      "height]___[value:24",
       "opacity]___[value:0",
       "opacity]___[value:1",
       "position]___[value:absolute",
@@ -176,28 +186,23 @@
       "gap]___[value:12",
       "marginLeft]___[value:24",
       "background]___[value:transparent",
-      "width]___[value:24",
-      "height]___[value:24",
-      "fill]___[value:current",
-      "gap]___[value:2",
+      "flexWrap]___[value:wrap",
+      "padding]___[value:80",
+      "transition]___[value:transform 0.2s ease",
+      "transform]___[value:rotate(180deg)]___[cond:&[data-open=\"true\"]",
+      "offset]___[value:4",
       "width]___[value:20",
       "height]___[value:20",
-      "color]___[value:gray.100",
-      "color]___[value:gray.90]___[cond:_dark",
-      "color]___[value:gray.90",
-      "color]___[value:gray.10]___[cond:_dark",
-      "textStyle]___[value:body-lg",
-      "textStyle]___[value:body-md]___[cond:md",
-      "textStyle]___[value:body-xs",
-      "color]___[value:gray.60]___[cond:_dark",
+      "fill]___[value:current",
+      "gap]___[value:2",
       "font]___[value:mono",
+      "color]___[value:gray.90",
       "color]___[value:gold.50",
       "color]___[value:blue.50",
       "borderWidth]___[value:2",
       "color]___[value:transparent",
       "margin]___[value:8",
       "borderRadius]___[value:100",
-      "cursor]___[value:pointer",
       "lineHeight]___[value:none",
       "width]___[value:14",
       "height]___[value:14",
@@ -220,7 +225,9 @@
       "background]___[value:darkNeutral.0]___[cond:_hover<___>&:before",
       "background]___[value:neutral.0]___[cond:_hover<___>&:before<___>_dark",
       "opacity]___[value:0.25]___[cond:_hover<___>&:before",
+      "color]___[value:gray.10]___[cond:_dark",
       "textStyle]___[value:body-md",
+      "color]___[value:gray.90]___[cond:_dark",
       "textStyle]___[value:body-sm"
     ],
     "recipes": {
@@ -231,23 +238,31 @@
         "bold]___[value:true]___[recipe:text",
         "underline]___[value:true]___[recipe:text"
       ],
-      "heading": [
-        "level]___[value:h2]___[recipe:heading",
-        "level]___[value:h3]___[recipe:heading",
-        "level]___[value:h1]___[recipe:heading",
-        "level]___[value:h4]___[recipe:heading"
+      "menu": [
+        "size]___[value:default]___[recipe:menu",
+        "indicatorPosition]___[value:left]___[recipe:menu",
+        "size]___[value:compact]___[recipe:menu",
+        "size]___[value:comfortable]___[recipe:menu",
+        "indicatorPosition]___[value:right]___[recipe:menu"
       ],
       "button": [
-        "appearance]___[value:primary]___[recipe:button",
-        "size]___[value:default]___[recipe:button",
         "appearance]___[value:default]___[recipe:button",
+        "size]___[value:default]___[recipe:button",
+        "appearance]___[value:primary]___[recipe:button",
         "appearance]___[value:subtle]___[recipe:button",
         "appearance]___[value:hollow]___[recipe:button",
         "iconBefore]___[value:user]___[recipe:button",
         "iconAfter]___[value:caret-down]___[recipe:button",
         "iconAfter]___[value:plus]___[recipe:button",
         "iconBefore]___[value:aa-placeholder]___[recipe:button",
-        "size]___[value:small]___[recipe:button"
+        "size]___[value:small]___[recipe:button",
+        "size]___[value:large]___[recipe:button"
+      ],
+      "heading": [
+        "level]___[value:h2]___[recipe:heading",
+        "level]___[value:h3]___[recipe:heading",
+        "level]___[value:h1]___[recipe:heading",
+        "level]___[value:h4]___[recipe:heading"
       ],
       "iconButton": [
         "appearance]___[value:subtle]___[recipe:iconButton",
@@ -326,10 +341,6 @@
         "position]___[value:right]___[recipe:tooltip",
         "caret]___[value:true]___[recipe:tooltip"
       ],
-      "menu": [
-        "iconPlacement]___[value:left]___[recipe:menu",
-        "multiSelectType]___[value:checkbox]___[recipe:menu"
-      ],
       "code": [],
       "radioInput": [],
       "toggle": [],

package/dist/preset.js

@@ -187,6 +187,9 @@ const shadows = {
   },
   inset: {
     value: "inset 0px 2px 1px {colors.utility.shadowColor}, inset 0px 3px 2px {colors.utility.shadowColor}"
+  },
+  none: {
+    value: "0 0 0 {colors.transparent}"
   }
 };
 const aspectRatios = {
@@ -4386,12 +4389,12 @@ const textStyles = defineTextStyles({
   }
 });
 const conditions = {
-  hover: "&:is(:hover, [data-hover])",
-  focus: "&:is(:focus, [data-focus])",
+  hover: "&:is(:hover, [data-hover=true])",
+  focus: "&:is(:focus, [data-focus=true])",
   focusWithin: "&:focus-within",
-  focusVisible: "&:is(:focus-visible, [data-focus-visible])",
+  focusVisible: "&:is(:focus-visible, [data-focus-visible]=true)",
   disabled: "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
-  active: "&:is(:active, [data-active])",
+  active: "&:is(:active, [data-active=true])",
   visited: "&:visited",
   target: "&:target",
   readOnly: "&:is(:read-only, [data-read-only], [aria-readonly=true])",
@@ -4450,7 +4453,7 @@ const conditions = {
   placeholder: "&::placeholder, &[data-placeholder]",
   placeholderShown: "&:is(:placeholder-shown, [data-placeholder-shown])",
   pressed: "&:is([aria-pressed=true], [data-pressed])",
-  selected: "&:is([aria-selected=true], [data-selected])",
+  selected: "&:is([aria-selected=true], [data-selected=true])",
   grabbed: "&:is([aria-grabbed=true], [data-grabbed])",
   underValue: "&[data-state=under-value]",
   overValue: "&[data-state=over-value]",
@@ -6400,135 +6403,193 @@ const tooltipRecipe$1 = defineSlotRecipe({
   ]
 });
 const menuBase = {
-  wrapper: {
-    position: { base: "fixed", md: "relative" },
-    left: "0",
-    bottom: "0",
-    width: { base: "full", md: "260" },
-    bg: { base: "gray.10", _dark: "gray.80" },
-    py: { base: "12", md: "4" },
-    boxShadow: "medium",
-    borderRadius: {
-      base: "8",
-      md: "4"
-    },
-    borderBottomLeftRadius: { base: "0", md: "4" },
-    borderBottomRightRadius: { base: "0", md: "4" },
-    "& ~ svg": {
-      fill: { base: "gray.90", _dark: "gray.10" },
-      mr: "auto"
-    },
-    overflow: "hidden",
-    zIndex: 1
-  },
-  wrapperInner: {
+  // Floating container
+  menu: {
     display: "flex",
     flexDirection: "column",
-    "&[data-anim=slide-left]": { animation: "slideLeft" },
-    "&[data-anim=slide-right]": { animation: "slideRight" }
+    minWidth: "200",
+    maxWidth: "320",
+    maxHeight: "400",
+    overflowY: "auto",
+    bg: "surface.overlay",
+    borderRadius: "8",
+    boxShadow: "medium",
+    outline: "none",
+    zIndex: 1e3
   },
+  // Individual menu item row
   menuItem: {
     display: "flex",
-    gap: "4",
-    px: { base: "20", md: "12" },
-    outline: "2px solid transparent",
-    outlineOffset: "0",
-    "& a": {
-      display: "flex",
-      justifyContent: "space-between",
-      w: "full"
-    },
+    alignItems: "flex-start",
+    gap: "8",
+    px: "12",
+    py: "8",
+    cursor: "pointer",
+    outline: "none",
+    transitionProperty: "background-color, color",
+    transitionDuration: "fast",
+    bg: "surface.overlay",
     _hover: {
-      bg: { base: "gray.2", _dark: "gray.100" },
-      cursor: "pointer"
-    },
-    _active: {
-      bg: { base: "gray.10", _dark: "gray.100" }
+      bg: "surface.overlay.hovered"
     },
     _focusVisible: {
-      outlineColor: { base: "gray.90", _dark: "gray.10" },
-      outlineOffset: "-2"
+      bg: "surface.overlay.hovered"
+    },
+    _active: {
+      bg: "surface.overlay.hovered"
     },
     _disabled: {
-      opacity: 0.4,
-      _hover: {
-        bg: "transparent",
-        pointerEvents: "none",
-        cursor: "not-allowed"
-      },
-      _active: { bg: "transparent" },
-      _focusVisible: { outlineColor: "transparent" }
+      opacity: 0.5,
+      cursor: "not-allowed",
+      pointerEvents: "none"
     },
-    "&[data-selected='true']": {
-      bg: { base: "gray.10", _dark: "gray.100" }
+    _selected: {
+      bg: "bg.selected"
     }
   },
-  sectionTitle: {
-    px: { base: "20", md: "12" },
-    pt: { base: "20", md: "12" },
-    pb: { base: "12", md: "4" }
+  // Selection indicator area (checkmark or checkbox)
+  menuItemIndicator: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    w: "24",
+    h: "24",
+    color: "icon.selected"
   },
-  menuLabel: { fontWeight: "normal" },
-  parentLabel: {
+  // Left icon area
+  menuItemIconLeft: {
     display: "flex",
-    py: "4",
-    pr: "12",
-    pl: "4",
-    bg: { base: "gray.10", _dark: "gray.60" },
-    cursor: "pointer"
-  },
-  multiLevelIcon: { ml: "auto" },
-  dividerSection: {
-    py: { base: "8", md: "12" },
-    px: { base: "20", md: "12" }
-  },
-  spacerSection: { h: { base: "24", md: "16" } },
-  iconSection: { w: "24" },
-  toggleMenu: { py: "6" }
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    w: "24",
+    h: "24",
+    color: "icon.decorative"
+  },
+  // Right icon area
+  menuItemIconRight: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    w: "24",
+    h: "24",
+    ml: "auto",
+    color: "icon.subtlest"
+  },
+  // Content wrapper (label + description)
+  menuItemContent: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minWidth: 0
+    // Enable text truncation
+  },
+  // Primary label
+  menuItemLabel: {
+    fontSize: "md",
+    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: "xs",
+    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: "xs",
+    color: "text.subtlest",
+    fontFamily: "sans",
+    fontWeight: "medium",
+    textTransform: "uppercase",
+    letterSpacing: "wide",
+    px: "12",
+    pt: "16",
+    pb: "4"
+  }
 };
 const menuVariants = {
-  iconPlacement: {
+  // Size variants
+  size: {
+    default: {
+      menu: { minWidth: "200" },
+      menuItem: { py: "8" }
+    },
+    compact: {
+      menu: { minWidth: "160" },
+      menuItem: { py: "4", px: "8" },
+      menuItemIconLeft: { w: "20", h: "20" },
+      menuItemIconRight: { w: "20", h: "20" },
+      menuItemIndicator: { w: "20", h: "20" }
+    },
+    comfortable: {
+      menu: { minWidth: "240" },
+      menuItem: { py: "12", px: "16" }
+    }
+  },
+  // Selection indicator position
+  indicatorPosition: {
     left: {
-      menuItem: { flexDirection: "row" }
+      menuItem: {
+        flexDirection: "row"
+      }
     },
     right: {
       menuItem: {
-        flexDirection: "row-reverse",
-        justifyContent: "space-between"
+        flexDirection: "row"
+      },
+      menuItemIndicator: {
+        order: 999,
+        // Move to end
+        ml: "auto"
       }
     }
-  },
-  multiSelectType: {
-    toggle: {
-      menuItem: { py: { base: "16", md: "6" }, gap: "12" }
-    },
-    checkbox: {
-      menuItem: { py: { base: "12", md: "4" } }
-    }
   }
 };
 const menuRecipe$1 = defineSlotRecipe({
   className: "menu",
-  jsx: ["Menu"],
+  jsx: ["Menu", "MenuItem", "MenuTrigger", "MenuDivider", "MenuGroup"],
   slots: [
-    "wrapper",
-    "sectionTitle",
+    "menu",
     "menuItem",
-    "menuLabel",
-    "menuDescription",
-    "parentLabel",
-    "multiLevelIcon",
-    "dividerSection",
-    "spacerSection",
-    "wrapperInner",
-    "iconSection",
-    "toggleMenu"
+    "menuItemIndicator",
+    "menuItemIconLeft",
+    "menuItemIconRight",
+    "menuItemContent",
+    "menuItemLabel",
+    "menuItemDescription",
+    "menuDivider",
+    "menuGroup",
+    "menuGroupLabel"
   ],
   base: menuBase,
   variants: menuVariants,
   defaultVariants: {
-    iconPlacement: "left",
-    multiSelectType: "checkbox"
+    size: "default",
+    indicatorPosition: "left"
   }
 });
 const componentRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({