@kanzo-tech/ui 0.14.0 → 0.15.1

package/dist/simples/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/simples/menu.tsx"],"sourcesContent":["import { Portal } from \"@ark-ui/react\";\nimport { ark } from \"@ark-ui/react/factory\";\nimport {\n  Menu as ArkMenu,\n  type MenuContentProps,\n  useMenuContext,\n} from \"@ark-ui/react/menu\";\nimport { CheckIcon, ChevronRight } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\nexport { useMenuContext as useMenu };\n\nexport const Menu = (props: React.ComponentProps<typeof ArkMenu.Root>) => {\n  const {\n    lazyMount = true,\n    positioning = { placement: \"bottom-end\" },\n    unmountOnExit = true,\n    ...rest\n  } = props;\n\n  return (\n    <ArkMenu.Root\n      lazyMount={lazyMount}\n      positioning={positioning}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    />\n  );\n};\n\nexport const MenuTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkMenu.Trigger>\n) => <ArkMenu.Trigger {...rest} data-slot={slot ?? \"menu-trigger\"} />;\n\n/**\n * The second way into the same menu: opens on right-click at the pointer instead of anchoring to\n * a control. `cursor-default` because the region is not a link or a button and must not look like\n * one — the affordance is the right-click, not the cursor.\n */\nexport const MenuContextTrigger = (\n  props: React.ComponentProps<typeof ArkMenu.ContextTrigger>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.ContextTrigger\n      className={cn(\"cursor-default\", className)}\n      {...rest}\n      data-slot={slot ?? \"menu-context-trigger\"}\n    />\n  );\n};\n\nexport const MenuPositioner = (\n  props: React.ComponentProps<typeof ArkMenu.Positioner>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.Positioner\n      className={cn(\"outline-none\", className)}\n      {...rest}\n      data-slot={slot ?? \"menu-positioner\"}\n    />\n  );\n};\n\nexport const menuContentVariants = tv({\n  base: [\n    \"z-[calc(50+var(--nested-layer-count,0))]\",\n    // A FIXED max-height, not `max-h-(--available-height)`: clamping the content to the\n    // floating-ui `size` var feeds the element's own resize back into autoUpdate — content\n    // shrinks → scrollbar toggles → available space changes → recompute → loop, which hard-\n    // freezes the tab. A fixed cap is decoupled from the measurement.\n    \"max-h-96 overflow-y-auto not-[class*='w-']:min-w-32\",\n    \"p-1\",\n    \"bg-popover\",\n    \"text-popover-foreground\",\n    \"rounded-box border shadow-lg/5\",\n    \"origin-(--transform-origin)\",\n    \"outline-none\",\n    \"overflow-y-auto\",\n    \"duration-100\",\n    \"data-[state=open]:animate-in\",\n    \"data-[state=open]:fade-in-0\",\n    \"data-[state=open]:zoom-in-[98%]\",\n    \"data-[placement=bottom]:slide-in-from-top-2\",\n    \"data-[placement=left]:slide-in-from-end-2\",\n    \"data-[placement=right]:slide-in-from-start-2\",\n    \"data-[placement=top]:slide-in-from-bottom-2\",\n    \"motion-reduce:animate-none!\",\n  ],\n});\n\nexport const MenuContent = (props: MenuContentProps) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <MenuPositioner>\n        <ArkMenu.Content\n          className={cn(menuContentVariants(), className)}\n          {...rest}\n          data-slot={slot ?? \"menu-content\"}\n        >\n          {children}\n        </ArkMenu.Content>\n      </MenuPositioner>\n    </Portal>\n  );\n};\n\ninterface MenuGroupProps\n  extends React.ComponentProps<typeof ArkMenu.ItemGroup> {\n  /**\n   * The heading of the menu item group.\n   */\n  heading?: string;\n}\n\nexport const MenuGroup = (props: MenuGroupProps) => {\n  const { heading, children, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.ItemGroup {...rest} data-slot={slot ?? \"menu-group\"}>\n      {!!heading && <MenuGroupLabel>{heading}</MenuGroupLabel>}\n\n      {children}\n    </ArkMenu.ItemGroup>\n  );\n};\n\nexport const MenuSeparator = (\n  props: React.ComponentProps<typeof ArkMenu.Separator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.Separator\n      className={cn(\"my-1 h-px bg-border\", className)}\n      {...rest}\n      data-slot={slot ?? \"menu-separator\"}\n    />\n  );\n};\n\nconst menuItemVariants = tv({\n  base: [\n    \"group/menu-item\",\n    \"relative\",\n    \"w-full\",\n    \"px-2.5 py-1.5\",\n    \"flex items-center gap-2\",\n    \"select-none text-sm\",\n    \"rounded-lg\",\n    \"outline-hidden\",\n    \"group-data-[date=open]/trigger-item:bg-accent group-data-[date=open]/trigger-item:text-accent-foreground\",\n    \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n    \"[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ],\n  variants: {\n    variant: {\n      default: [\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n      ],\n      destructive: [\n        \"text-destructive-foreground\",\n        \"data-highlighted:bg-destructive/14\",\n        \"**:[svg]:text-destructive! dark:**:[svg]:text-destructive-foreground!\",\n      ],\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\ninterface MenuItemProps\n  extends React.ComponentProps<typeof ArkMenu.Item>,\n    VariantProps<typeof menuItemVariants> {}\n\nexport const MenuItem = (props: MenuItemProps) => {\n  const { variant = \"default\", className, ...rest } = props;\n\n  return (\n    <ArkMenu.Item\n      className={cn(menuItemVariants({ variant }), className)}\n      data-variant={variant}\n      {...rest}\n    />\n  );\n};\n\nexport const MenuQuickItem = (props: MenuItemProps) => {\n  const { variant = \"default\", className, ...rest } = props;\n\n  return (\n    <ArkMenu.Item\n      className={cn(\n        menuItemVariants({ variant }),\n        \"flex-col gap-1\",\n        \"[&_svg:not([class*='size-'])]:size-4.5\",\n        className\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport const MenuCheckboxItem = (\n  props: React.ComponentProps<typeof ArkMenu.CheckboxItem>\n) => {\n  const { className, children, ...rest } = props;\n\n  return (\n    <ArkMenu.CheckboxItem\n      className={cn(\n        menuItemVariants({ variant: \"default\" }),\n        \"ps-8\",\n        className\n      )}\n      {...rest}\n    >\n      <ArkMenu.ItemIndicator\n        className={cn(\n          \"absolute inset-s-2\",\n          \"size-3.5\",\n          \"flex items-center justify-center\",\n          \"pointer-events-none\"\n        )}\n      >\n        <CheckIcon />\n      </ArkMenu.ItemIndicator>\n\n      <ArkMenu.ItemText>{children}</ArkMenu.ItemText>\n    </ArkMenu.CheckboxItem>\n  );\n};\n\ninterface MenuRadioGroupProps\n  extends React.ComponentProps<typeof ArkMenu.RadioItemGroup> {\n  /**\n   * The heading of the menu radio item group.\n   */\n  heading?: string;\n}\n\nexport const MenuRadioGroup = (props: MenuRadioGroupProps) => {\n  const { heading, children, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.RadioItemGroup {...rest} data-slot={slot ?? \"menu-radio-group\"}>\n      {!!heading && <MenuGroupLabel>{heading}</MenuGroupLabel>}\n\n      {children}\n    </ArkMenu.RadioItemGroup>\n  );\n};\n\nexport const MenuGroupLabel = (\n  props: React.ComponentProps<typeof ArkMenu.ItemGroupLabel>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.ItemGroupLabel\n      className={cn(\n        \"px-2 py-1.5\",\n        \"font-medium text-muted-foreground text-sm\",\n        \"pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"menu-group-label\"}\n    />\n  );\n};\n\nexport const MenuRadioItem = (\n  props: React.ComponentProps<typeof ArkMenu.RadioItem>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.RadioItem\n      className={cn(\n        menuItemVariants({ variant: \"default\" }),\n        \"ps-8\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"menu-radio-item\"}\n    >\n      <ArkMenu.ItemIndicator className=\"pointer-events-none absolute inset-s-2 flex size-3.5 items-center justify-center\">\n        <CheckIcon />\n      </ArkMenu.ItemIndicator>\n\n      <ArkMenu.ItemText data-slot=\"menu-radio-item-text\">\n        {children}\n      </ArkMenu.ItemText>\n    </ArkMenu.RadioItem>\n  );\n};\n\nexport const MenuSub = (props: React.ComponentProps<typeof Menu>) => (\n  <Menu {...props} />\n);\n\nexport const MenuSubContent = (\n  props: React.ComponentProps<typeof ArkMenu.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <MenuPositioner slot=\"menu-sub-positioner\">\n        <ArkMenu.Content\n          className={cn(menuContentVariants(), className)}\n          {...rest}\n          data-slot={slot ?? \"menu-sub-content\"}\n        />\n      </MenuPositioner>\n    </Portal>\n  );\n};\n\nexport const MenuSubTrigger = (\n  props: React.ComponentProps<typeof ArkMenu.TriggerItem>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.TriggerItem\n      className={cn(menuItemVariants({ variant: \"default\" }), className)}\n      {...rest}\n      data-slot={slot ?? \"menu-sub-trigger\"}\n    >\n      {children}\n\n      <MenuShortcut>\n        <ChevronRight />\n      </MenuShortcut>\n    </ArkMenu.TriggerItem>\n  );\n};\n\nexport const MenuShortcut = (props: React.ComponentProps<typeof ark.span>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\n        \"ms-auto rtl:me-auto\",\n        \"text-muted-foreground text-xs tracking-widest\",\n        \"group-data-highlighted/menu-item:group-data-[variant=destructive]/menu-item:text-destructive dark:group-data-highlighted/menu-item:group-data-[variant=destructive]/menu-item:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"menu-shortcut\"}\n    />\n  );\n};\n\n// Shark's version pins `left: \"20px\"` *after* the caller's `style`, throwing away the offset\n// the positioner computes. Dropped: this is `PopoverArrow` / `TooltipArrow` / `HoverCardArrow`\n// under a fourth machine, and the three of them are what a reader compares it against.\nexport const MenuArrow = (\n  props: React.ComponentProps<typeof ArkMenu.Arrow>\n) => {\n  const { style, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.Arrow\n      style={\n        {\n          \"--arrow-background\": \"var(--popover)\",\n          \"--arrow-size\": \"calc(1.5 * var(--spacing))\",\n          ...style,\n        } as React.CSSProperties\n      }\n      {...rest}\n      data-slot={slot ?? \"menu-arrow\"}\n    >\n      <ArkMenu.ArrowTip className=\"border-s border-t\" />\n    </ArkMenu.Arrow>\n  );\n};\n"],"names":["Menu","props","lazyMount","positioning","unmountOnExit","rest","jsx","ArkMenu","MenuTrigger","slot","MenuContextTrigger","className","cn","MenuPositioner","menuContentVariants","tv","MenuContent","children","Portal","MenuGroup","heading","jsxs","MenuGroupLabel","MenuSeparator","menuItemVariants","MenuItem","variant","MenuQuickItem","MenuCheckboxItem","CheckIcon","MenuRadioGroup","MenuRadioItem","MenuSub","MenuSubContent","MenuSubTrigger","MenuShortcut","ChevronRight","ark","MenuArrow","style"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../src/simples/menu.tsx"],"sourcesContent":["import { Portal } from \"@ark-ui/react\";\nimport { ark } from \"@ark-ui/react/factory\";\nimport {\n  Menu as ArkMenu,\n  type MenuContentProps,\n  useMenuContext,\n} from \"@ark-ui/react/menu\";\nimport { CheckIcon, ChevronRight } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\nexport { useMenuContext as useMenu };\n\nexport const Menu = (props: React.ComponentProps<typeof ArkMenu.Root>) => {\n  const {\n    lazyMount = true,\n    positioning = { placement: \"bottom-end\" },\n    unmountOnExit = true,\n    ...rest\n  } = props;\n\n  return (\n    <ArkMenu.Root\n      lazyMount={lazyMount}\n      positioning={positioning}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    />\n  );\n};\n\nexport const MenuTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkMenu.Trigger>\n) => <ArkMenu.Trigger {...rest} data-slot={slot ?? \"menu-trigger\"} />;\n\n/**\n * The second way into the same menu: opens on right-click at the pointer instead of anchoring to\n * a control. `cursor-default` because the region is not a link or a button and must not look like\n * one — the affordance is the right-click, not the cursor.\n */\nexport const MenuContextTrigger = (\n  props: React.ComponentProps<typeof ArkMenu.ContextTrigger>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.ContextTrigger\n      className={cn(\"cursor-default\", className)}\n      {...rest}\n      data-slot={slot ?? \"menu-context-trigger\"}\n    />\n  );\n};\n\nexport const MenuPositioner = (\n  props: React.ComponentProps<typeof ArkMenu.Positioner>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.Positioner\n      className={cn(\"outline-none\", className)}\n      {...rest}\n      data-slot={slot ?? \"menu-positioner\"}\n    />\n  );\n};\n\nexport const menuContentVariants = tv({\n  base: [\n    \"z-[calc(50+var(--nested-layer-count,0))]\",\n    // A FIXED max-height, not `max-h-(--available-height)`: clamping the content to the\n    // floating-ui `size` var feeds the element's own resize back into autoUpdate — content\n    // shrinks → scrollbar toggles → available space changes → recompute → loop, which hard-\n    // freezes the tab. A fixed cap is decoupled from the measurement.\n    \"max-h-96 overflow-y-auto not-[class*='w-']:min-w-32\",\n    \"p-1\",\n    \"bg-popover\",\n    \"text-popover-foreground\",\n    \"rounded-box border shadow-lg/5\",\n    \"origin-(--transform-origin)\",\n    \"outline-none\",\n    \"overflow-y-auto\",\n    \"duration-100\",\n    \"data-[state=open]:animate-in\",\n    \"data-[state=open]:fade-in-0\",\n    \"data-[state=open]:zoom-in-[98%]\",\n    \"data-[placement=bottom]:slide-in-from-top-2\",\n    \"data-[placement=left]:slide-in-from-end-2\",\n    \"data-[placement=right]:slide-in-from-start-2\",\n    \"data-[placement=top]:slide-in-from-bottom-2\",\n    \"motion-reduce:animate-none!\",\n  ],\n});\n\nexport const MenuContent = (props: MenuContentProps) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <MenuPositioner>\n        <ArkMenu.Content\n          className={cn(menuContentVariants(), className)}\n          {...rest}\n          data-slot={slot ?? \"menu-content\"}\n        >\n          {children}\n        </ArkMenu.Content>\n      </MenuPositioner>\n    </Portal>\n  );\n};\n\ninterface MenuGroupProps\n  extends React.ComponentProps<typeof ArkMenu.ItemGroup> {\n  /**\n   * The heading of the menu item group.\n   */\n  heading?: string;\n}\n\nexport const MenuGroup = (props: MenuGroupProps) => {\n  const { heading, children, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.ItemGroup {...rest} data-slot={slot ?? \"menu-group\"}>\n      {!!heading && <MenuGroupLabel>{heading}</MenuGroupLabel>}\n\n      {children}\n    </ArkMenu.ItemGroup>\n  );\n};\n\nexport const MenuSeparator = (\n  props: React.ComponentProps<typeof ArkMenu.Separator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.Separator\n      className={cn(\"my-1 h-px bg-border\", className)}\n      {...rest}\n      data-slot={slot ?? \"menu-separator\"}\n    />\n  );\n};\n\nconst menuItemVariants = tv({\n  base: [\n    \"group/menu-item\",\n    \"relative\",\n    \"w-full\",\n    \"px-2.5 py-1.5\",\n    \"flex items-center gap-2\",\n    \"select-none text-sm\",\n    \"rounded-lg\",\n    \"outline-hidden\",\n    \"group-data-[date=open]/trigger-item:bg-accent group-data-[date=open]/trigger-item:text-accent-foreground\",\n    \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n    \"[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ],\n  variants: {\n    variant: {\n      default: [\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n      ],\n      destructive: [\n        \"text-destructive-foreground\",\n        \"data-highlighted:bg-destructive/14\",\n        \"**:[svg]:text-destructive! dark:**:[svg]:text-destructive-foreground!\",\n      ],\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\ninterface MenuItemProps\n  extends React.ComponentProps<typeof ArkMenu.Item>,\n    VariantProps<typeof menuItemVariants> {}\n\nexport const MenuItem = (props: MenuItemProps) => {\n  const { variant = \"default\", className, ...rest } = props;\n\n  return (\n    <ArkMenu.Item\n      className={cn(menuItemVariants({ variant }), className)}\n      data-variant={variant}\n      {...rest}\n    />\n  );\n};\n\nexport const MenuQuickItem = (props: MenuItemProps) => {\n  const { variant = \"default\", className, ...rest } = props;\n\n  return (\n    <ArkMenu.Item\n      className={cn(\n        menuItemVariants({ variant }),\n        \"flex-col gap-1\",\n        \"[&_svg:not([class*='size-'])]:size-4.5\",\n        className\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport const MenuCheckboxItem = (\n  props: React.ComponentProps<typeof ArkMenu.CheckboxItem>\n) => {\n  const { className, children, ...rest } = props;\n\n  return (\n    <ArkMenu.CheckboxItem\n      className={cn(\n        menuItemVariants({ variant: \"default\" }),\n        \"ps-8\",\n        className\n      )}\n      {...rest}\n    >\n      <ArkMenu.ItemIndicator\n        className={cn(\n          \"absolute inset-s-2\",\n          \"size-3.5\",\n          \"flex items-center justify-center\",\n          \"pointer-events-none\"\n        )}\n      >\n        <CheckIcon />\n      </ArkMenu.ItemIndicator>\n\n      <ArkMenu.ItemText>{children}</ArkMenu.ItemText>\n    </ArkMenu.CheckboxItem>\n  );\n};\n\ninterface MenuRadioGroupProps\n  extends React.ComponentProps<typeof ArkMenu.RadioItemGroup> {\n  /**\n   * The heading of the menu radio item group.\n   */\n  heading?: string;\n}\n\nexport const MenuRadioGroup = (props: MenuRadioGroupProps) => {\n  const { heading, children, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.RadioItemGroup {...rest} data-slot={slot ?? \"menu-radio-group\"}>\n      {!!heading && <MenuGroupLabel>{heading}</MenuGroupLabel>}\n\n      {children}\n    </ArkMenu.RadioItemGroup>\n  );\n};\n\nexport const MenuGroupLabel = (\n  props: React.ComponentProps<typeof ArkMenu.ItemGroupLabel>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.ItemGroupLabel\n      className={cn(\n        \"px-2 py-1.5\",\n        \"font-medium text-muted-foreground text-sm\",\n        \"pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"menu-group-label\"}\n    />\n  );\n};\n\nexport const MenuRadioItem = (\n  props: React.ComponentProps<typeof ArkMenu.RadioItem>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.RadioItem\n      className={cn(\n        menuItemVariants({ variant: \"default\" }),\n        \"ps-8\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"menu-radio-item\"}\n    >\n      <ArkMenu.ItemIndicator className=\"pointer-events-none absolute inset-s-2 flex size-3.5 items-center justify-center\">\n        <CheckIcon />\n      </ArkMenu.ItemIndicator>\n\n      <ArkMenu.ItemText data-slot=\"menu-radio-item-text\">\n        {children}\n      </ArkMenu.ItemText>\n    </ArkMenu.RadioItem>\n  );\n};\n\nexport const MenuSub = (props: React.ComponentProps<typeof Menu>) => (\n  <Menu {...props} />\n);\n\nexport const MenuSubContent = (\n  props: React.ComponentProps<typeof ArkMenu.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <MenuPositioner slot=\"menu-sub-positioner\">\n        <ArkMenu.Content\n          className={cn(menuContentVariants(), className)}\n          {...rest}\n          data-slot={slot ?? \"menu-sub-content\"}\n        />\n      </MenuPositioner>\n    </Portal>\n  );\n};\n\nexport const MenuSubTrigger = (\n  props: React.ComponentProps<typeof ArkMenu.TriggerItem>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.TriggerItem\n      className={cn(menuItemVariants({ variant: \"default\" }), className)}\n      {...rest}\n      data-slot={slot ?? \"menu-sub-trigger\"}\n    >\n      {children}\n\n      <MenuShortcut>\n        <ChevronRight />\n      </MenuShortcut>\n    </ArkMenu.TriggerItem>\n  );\n};\n\nexport const MenuShortcut = (props: React.ComponentProps<typeof ark.span>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\n        \"ms-auto rtl:me-auto\",\n        \"text-muted-foreground text-xs tracking-widest\",\n        \"group-data-highlighted/menu-item:group-data-[variant=destructive]/menu-item:text-destructive dark:group-data-highlighted/menu-item:group-data-[variant=destructive]/menu-item:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"menu-shortcut\"}\n    />\n  );\n};\n\n// Shark's version pins `left: \"20px\"` *after* the caller's `style`, throwing away the offset\n// the positioner computes. Dropped: this is `PopoverArrow` / `TooltipArrow` / `HoverCardArrow`\n// under a fourth machine, and the three of them are what a reader compares it against.\nexport const MenuArrow = (\n  props: React.ComponentProps<typeof ArkMenu.Arrow>\n) => {\n  const { style, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.Arrow\n      style={\n        {\n          \"--arrow-background\": \"var(--popover, var(--card))\",\n          \"--arrow-size\": \"calc(1.5 * var(--spacing))\",\n          ...style,\n        } as React.CSSProperties\n      }\n      {...rest}\n      data-slot={slot ?? \"menu-arrow\"}\n    >\n      <ArkMenu.ArrowTip className=\"border-s border-t\" />\n    </ArkMenu.Arrow>\n  );\n};\n"],"names":["Menu","props","lazyMount","positioning","unmountOnExit","rest","jsx","ArkMenu","MenuTrigger","slot","MenuContextTrigger","className","cn","MenuPositioner","menuContentVariants","tv","MenuContent","children","Portal","MenuGroup","heading","jsxs","MenuGroupLabel","MenuSeparator","menuItemVariants","MenuItem","variant","MenuQuickItem","MenuCheckboxItem","CheckIcon","MenuRadioGroup","MenuRadioItem","MenuSub","MenuSubContent","MenuSubTrigger","MenuShortcut","ChevronRight","ark","MenuArrow","style"],"mappings":"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"}

package/dist/simples/popover.js

@@ -160,7 +160,7 @@ const B = v, k = (e) => {
     s.Arrow,
     {
       style: {
-        "--arrow-background": "var(--popover)",
+        "--arrow-background": "var(--popover, var(--card))",
         "--arrow-size": "calc(1.5 * var(--spacing))",
         ...o
       },

package/dist/simples/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../src/simples/popover.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport {\n  Popover as ArkPopover,\n  usePopoverContext,\n} from \"@ark-ui/react/popover\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { XIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { ScrollArea } from \"./scroll-area\";\n\nexport const usePopover = usePopoverContext;\n\nexport const Popover = (\n  props: React.ComponentProps<typeof ArkPopover.Root>\n) => {\n  const {\n    lazyMount = true,\n    unmountOnExit = true,\n    modal = true,\n    ...rest\n  } = props;\n\n  return (\n    <ArkPopover.Root\n      lazyMount={lazyMount}\n      modal={modal}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    />\n  );\n};\n\nexport const PopoverTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkPopover.Trigger>\n) => <ArkPopover.Trigger {...rest} data-slot={slot ?? \"popover-trigger\"} />;\n\nexport const PopoverAnchor = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkPopover.Anchor>\n) => <ArkPopover.Anchor {...rest} data-slot={slot ?? \"popover-anchor\"} />;\n\nexport const PopoverPositioner = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkPopover.Positioner>) => (\n  <ArkPopover.Positioner {...rest} data-slot={slot ?? \"popover-positioner\"} />\n);\n\ninterface PopoverContentProps\n  extends React.ComponentProps<typeof ArkPopover.Content> {\n  /**\n   * Show close button at the top right corner.\n   *\n   * Off by default, unlike Dialog / Sheet / Tour: a popover dismisses on outside click and on\n   * Escape, so the button is usually redundant chrome. Turn it on for a popover that holds a\n   * form the reader might otherwise lose.\n   *\n   * (Upstream Shark documents `@default true` here while destructuring `= false` — the\n   * behaviour is the same in both, only its JSDoc was wrong. Corrected, not changed.)\n   *\n   * @default false\n   */\n  showCloseButton?: boolean;\n}\n\nexport const PopoverContent = (props: PopoverContentProps) => {\n  const { showCloseButton = false, className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <PopoverPositioner>\n        <ArkPopover.Content\n          className={cn(\n            \"relative\",\n            \"z-[calc(50+var(--layer-index,0))]\",\n            \"[--space:--spacing(4)]\",\n            \"w-auto min-w-32\",\n            \"flex flex-col\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"rounded-box border shadow-lg/5\",\n            \"outline-hidden\",\n            \"origin-(--transform-origin)\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[placement=bottom]:slide-in-from-top-2\",\n            \"data-[placement=left]:slide-in-from-end-2\",\n            \"data-[placement=right]:slide-in-from-start-2\",\n            \"data-[placement=top]:slide-in-from-bottom-2\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"popover-content\"}\n        >\n          {children}\n\n          {!!showCloseButton && (\n            <PopoverClose asChild>\n              <Button\n                aria-label=\"Close\"\n                // Aligned to the content padding: the button sits at 10px so the 16px icon\n                // (6px inset inside the 28px icon-sm button) lands its corner on the 16px\n                // `--space` grid — mirroring the header title on the opposite side.\n                className=\"absolute inset-e-2.5 top-2.5 opacity-64 hover:opacity-100\"\n                size=\"icon-sm\"\n                variant=\"ghost\"\n              >\n                <XIcon />\n              </Button>\n            </PopoverClose>\n          )}\n        </ArkPopover.Content>\n      </PopoverPositioner>\n    </Portal>\n  );\n};\n\ninterface PopoverHeaderProps extends React.ComponentProps<typeof ark.div> {\n  /**\n   * The description of the popover header\n   */\n  description?: string;\n  /**\n   * The title of the popover header\n   */\n  title?: string;\n}\n\nexport const PopoverHeader = (props: PopoverHeaderProps) => {\n  const { title, description, children, className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex flex-col gap-2 p-(--space)\",\n        \"in-[[data-slot=popover-content]:has([data-slot=popover-body])]:pb-3\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"popover-header\"}\n    >\n      {!!title && <PopoverTitle>{title}</PopoverTitle>}\n      {!!description && <PopoverDescription>{description}</PopoverDescription>}\n      {!title && typeof children === \"string\" ? (\n        <PopoverTitle>{children}</PopoverTitle>\n      ) : (\n        children\n      )}\n    </ark.div>\n  );\n};\n\nexport const PopoverTitle = (\n  props: React.ComponentProps<typeof ArkPopover.Title>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkPopover.Title\n      className={cn(\n        \"font-semibold text-base leading-none\",\n        // Reserve inline-end room so the absolutely-positioned close X never overlaps the title.\n        \"in-[[data-slot=popover-content]:has([data-slot=popover-close-trigger])]:pe-8\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"popover-title\"}\n    />\n  );\n};\n\nexport const PopoverDescription = (\n  props: React.ComponentProps<typeof ArkPopover.Description>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkPopover.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"popover-description\"}\n    />\n  );\n};\n\nexport const PopoverBody = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ScrollArea>\n      <ark.div\n        className={cn(\n          \"flex-1\",\n          \"p-(--space)\",\n          \"overflow-auto\",\n          \"in-[[data-slot=popover-content]:has([data-slot=popover-header])]:pt-1\",\n          \"in-[[data-slot=popover-content]:has([data-slot=popover-footer]:not(.border-t))]:pb-1\",\n          className\n        )}\n        {...rest}\n        data-slot={slot ?? \"popover-body\"}\n      />\n    </ScrollArea>\n  );\n};\n\nexport const PopoverFooter = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        \"sm:rounded-b-[calc(var(--radius-lg)-1px)]\",\n        \"px-(--space) py-4\",\n        \"border-t\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"popover-footer\"}\n    />\n  );\n};\n\nexport const PopoverClose = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkPopover.CloseTrigger>) => (\n  <ArkPopover.CloseTrigger\n    {...rest}\n    data-slot={slot ?? \"popover-close-trigger\"}\n  />\n);\n\nexport const PopoverArrow = (\n  props: React.ComponentProps<typeof ArkPopover.Arrow>\n) => {\n  const { style, slot, ...rest } = props;\n\n  return (\n    <ArkPopover.Arrow\n      style={\n        {\n          \"--arrow-background\": \"var(--popover)\",\n          \"--arrow-size\": \"calc(1.5 * var(--spacing))\",\n          ...style,\n        } as React.CSSProperties\n      }\n      {...rest}\n      data-slot={slot ?? \"popover-arrow\"}\n    >\n      <ArkPopover.ArrowTip className=\"border-s border-t\" />\n    </ArkPopover.Arrow>\n  );\n};\n"],"names":["usePopover","usePopoverContext","Popover","props","lazyMount","unmountOnExit","modal","rest","jsx","ArkPopover","PopoverTrigger","slot","PopoverAnchor","PopoverPositioner","PopoverContent","showCloseButton","className","children","Portal","jsxs","cn","PopoverClose","Button","XIcon","PopoverHeader","title","description","ark","PopoverTitle","PopoverDescription","PopoverBody","ScrollArea","PopoverFooter","PopoverArrow","style"],"mappings":"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"}
+{"version":3,"file":"popover.js","sources":["../../src/simples/popover.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport {\n  Popover as ArkPopover,\n  usePopoverContext,\n} from \"@ark-ui/react/popover\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { XIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { ScrollArea } from \"./scroll-area\";\n\nexport const usePopover = usePopoverContext;\n\nexport const Popover = (\n  props: React.ComponentProps<typeof ArkPopover.Root>\n) => {\n  const {\n    lazyMount = true,\n    unmountOnExit = true,\n    modal = true,\n    ...rest\n  } = props;\n\n  return (\n    <ArkPopover.Root\n      lazyMount={lazyMount}\n      modal={modal}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    />\n  );\n};\n\nexport const PopoverTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkPopover.Trigger>\n) => <ArkPopover.Trigger {...rest} data-slot={slot ?? \"popover-trigger\"} />;\n\nexport const PopoverAnchor = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkPopover.Anchor>\n) => <ArkPopover.Anchor {...rest} data-slot={slot ?? \"popover-anchor\"} />;\n\nexport const PopoverPositioner = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkPopover.Positioner>) => (\n  <ArkPopover.Positioner {...rest} data-slot={slot ?? \"popover-positioner\"} />\n);\n\ninterface PopoverContentProps\n  extends React.ComponentProps<typeof ArkPopover.Content> {\n  /**\n   * Show close button at the top right corner.\n   *\n   * Off by default, unlike Dialog / Sheet / Tour: a popover dismisses on outside click and on\n   * Escape, so the button is usually redundant chrome. Turn it on for a popover that holds a\n   * form the reader might otherwise lose.\n   *\n   * (Upstream Shark documents `@default true` here while destructuring `= false` — the\n   * behaviour is the same in both, only its JSDoc was wrong. Corrected, not changed.)\n   *\n   * @default false\n   */\n  showCloseButton?: boolean;\n}\n\nexport const PopoverContent = (props: PopoverContentProps) => {\n  const { showCloseButton = false, className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <PopoverPositioner>\n        <ArkPopover.Content\n          className={cn(\n            \"relative\",\n            \"z-[calc(50+var(--layer-index,0))]\",\n            \"[--space:--spacing(4)]\",\n            \"w-auto min-w-32\",\n            \"flex flex-col\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"rounded-box border shadow-lg/5\",\n            \"outline-hidden\",\n            \"origin-(--transform-origin)\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[placement=bottom]:slide-in-from-top-2\",\n            \"data-[placement=left]:slide-in-from-end-2\",\n            \"data-[placement=right]:slide-in-from-start-2\",\n            \"data-[placement=top]:slide-in-from-bottom-2\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"popover-content\"}\n        >\n          {children}\n\n          {!!showCloseButton && (\n            <PopoverClose asChild>\n              <Button\n                aria-label=\"Close\"\n                // Aligned to the content padding: the button sits at 10px so the 16px icon\n                // (6px inset inside the 28px icon-sm button) lands its corner on the 16px\n                // `--space` grid — mirroring the header title on the opposite side.\n                className=\"absolute inset-e-2.5 top-2.5 opacity-64 hover:opacity-100\"\n                size=\"icon-sm\"\n                variant=\"ghost\"\n              >\n                <XIcon />\n              </Button>\n            </PopoverClose>\n          )}\n        </ArkPopover.Content>\n      </PopoverPositioner>\n    </Portal>\n  );\n};\n\ninterface PopoverHeaderProps extends React.ComponentProps<typeof ark.div> {\n  /**\n   * The description of the popover header\n   */\n  description?: string;\n  /**\n   * The title of the popover header\n   */\n  title?: string;\n}\n\nexport const PopoverHeader = (props: PopoverHeaderProps) => {\n  const { title, description, children, className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex flex-col gap-2 p-(--space)\",\n        \"in-[[data-slot=popover-content]:has([data-slot=popover-body])]:pb-3\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"popover-header\"}\n    >\n      {!!title && <PopoverTitle>{title}</PopoverTitle>}\n      {!!description && <PopoverDescription>{description}</PopoverDescription>}\n      {!title && typeof children === \"string\" ? (\n        <PopoverTitle>{children}</PopoverTitle>\n      ) : (\n        children\n      )}\n    </ark.div>\n  );\n};\n\nexport const PopoverTitle = (\n  props: React.ComponentProps<typeof ArkPopover.Title>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkPopover.Title\n      className={cn(\n        \"font-semibold text-base leading-none\",\n        // Reserve inline-end room so the absolutely-positioned close X never overlaps the title.\n        \"in-[[data-slot=popover-content]:has([data-slot=popover-close-trigger])]:pe-8\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"popover-title\"}\n    />\n  );\n};\n\nexport const PopoverDescription = (\n  props: React.ComponentProps<typeof ArkPopover.Description>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkPopover.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"popover-description\"}\n    />\n  );\n};\n\nexport const PopoverBody = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ScrollArea>\n      <ark.div\n        className={cn(\n          \"flex-1\",\n          \"p-(--space)\",\n          \"overflow-auto\",\n          \"in-[[data-slot=popover-content]:has([data-slot=popover-header])]:pt-1\",\n          \"in-[[data-slot=popover-content]:has([data-slot=popover-footer]:not(.border-t))]:pb-1\",\n          className\n        )}\n        {...rest}\n        data-slot={slot ?? \"popover-body\"}\n      />\n    </ScrollArea>\n  );\n};\n\nexport const PopoverFooter = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        \"sm:rounded-b-[calc(var(--radius-lg)-1px)]\",\n        \"px-(--space) py-4\",\n        \"border-t\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"popover-footer\"}\n    />\n  );\n};\n\nexport const PopoverClose = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkPopover.CloseTrigger>) => (\n  <ArkPopover.CloseTrigger\n    {...rest}\n    data-slot={slot ?? \"popover-close-trigger\"}\n  />\n);\n\nexport const PopoverArrow = (\n  props: React.ComponentProps<typeof ArkPopover.Arrow>\n) => {\n  const { style, slot, ...rest } = props;\n\n  return (\n    <ArkPopover.Arrow\n      style={\n        {\n          \"--arrow-background\": \"var(--popover, var(--card))\",\n          \"--arrow-size\": \"calc(1.5 * var(--spacing))\",\n          ...style,\n        } as React.CSSProperties\n      }\n      {...rest}\n      data-slot={slot ?? \"popover-arrow\"}\n    >\n      <ArkPopover.ArrowTip className=\"border-s border-t\" />\n    </ArkPopover.Arrow>\n  );\n};\n"],"names":["usePopover","usePopoverContext","Popover","props","lazyMount","unmountOnExit","modal","rest","jsx","ArkPopover","PopoverTrigger","slot","PopoverAnchor","PopoverPositioner","PopoverContent","showCloseButton","className","children","Portal","jsxs","cn","PopoverClose","Button","XIcon","PopoverHeader","title","description","ark","PopoverTitle","PopoverDescription","PopoverBody","ScrollArea","PopoverFooter","PopoverArrow","style"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanzo-tech/ui",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "description": "Kanzo shared UI — domain-free components over Ark UI and tailwind-variants, themed by tokens.",
   "type": "module",
   "license": "MIT",
@@ -95,8 +95,8 @@
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2",
     "tw-animate-css": "^1.4.0",
-    "@kanzo-tech/mosaic": "0.14.0",
-    "@kanzo-tech/theme": "0.14.0"
+    "@kanzo-tech/mosaic": "0.15.1",
+    "@kanzo-tech/theme": "0.15.1"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.18.6",

package/src/tailwind.css

@@ -82,7 +82,7 @@
    inherited value. Pointing the variable at `--popover` is also why this is CSS and not JS — the
    token already flips with the theme, so nothing has to re-resolve anything. */
 [data-slot="chart"] [class*="plot-"] {
-  --plot-background: var(--popover);
+  --plot-background: var(--popover, var(--card));
 }
 
 /* Prose, re-tokenised. The typography plugin ships its own grey palette, which would make