@kanzo-tech/ui 0.14.0 → 0.15.0

package/dist/simples/hover-card.js

@@ -1,5 +1,5 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { Portal as c } from "@ark-ui/react";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { Portal as l } from "@ark-ui/react";
 import { useHoverCardContext as m, HoverCard as e } from "@ark-ui/react/hover-card";
 import { cn as p } from "../lib/cn.js";
 const C = m, b = (o) => {
@@ -27,7 +27,7 @@ const C = m, b = (o) => {
   ...t
 }) => /* @__PURE__ */ r(e.Trigger, { ...t, "data-slot": o ?? "hover-card-trigger" }), H = (o) => {
   const { className: t, children: a, slot: n, ...s } = o;
-  return /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(e.Positioner, { "data-slot": "hover-card-positioner", children: /* @__PURE__ */ l(
+  return /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(e.Positioner, { "data-slot": "hover-card-positioner", children: /* @__PURE__ */ c(
     e.Content,
     {
       className: p(
@@ -63,7 +63,7 @@ const C = m, b = (o) => {
     e.Arrow,
     {
       style: {
-        "--arrow-background": "var(--popover)",
+        "--arrow-background": "var(--popover, var(--card))",
         "--arrow-size": "calc(1.5 * var(--spacing))",
         ...t
       },

package/dist/simples/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","sources":["../../src/simples/hover-card.tsx"],"sourcesContent":["import { Portal } from \"@ark-ui/react\";\nimport {\n  HoverCard as ArkHoverCard,\n  useHoverCardContext,\n} from \"@ark-ui/react/hover-card\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useHoverCard = useHoverCardContext;\n\ninterface HoverCardProps\n  extends React.ComponentProps<typeof ArkHoverCard.Root> {}\n\nexport const HoverCard = (props: HoverCardProps) => {\n  const {\n    lazyMount = true,\n    unmountOnExit = true,\n    closeDelay = 100,\n    openDelay = 10,\n    positioning = { placement: \"top\" },\n    ...rest\n  } = props;\n\n  return (\n    <ArkHoverCard.Root\n      closeDelay={closeDelay}\n      lazyMount={lazyMount}\n      openDelay={openDelay}\n      positioning={positioning}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    />\n  );\n};\n\nexport const HoverCardTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkHoverCard.Trigger>) => (\n  <ArkHoverCard.Trigger {...rest} data-slot={slot ?? \"hover-card-trigger\"} />\n);\n\nexport const HoverCardContent = (\n  props: React.ComponentProps<typeof ArkHoverCard.Content>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ArkHoverCard.Positioner data-slot=\"hover-card-positioner\">\n        <ArkHoverCard.Content\n          className={cn(\n            \"z-50\",\n            \"w-64\",\n            \"p-4\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"origin-(--transform-origin)\",\n            \"rounded-box border shadow-lg/5\",\n            \"outline-hidden\",\n            \"data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]\",\n            \"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0\",\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 ?? \"hover-card-content\"}\n        >\n          {children}\n\n          <HoverCardArrow />\n        </ArkHoverCard.Content>\n      </ArkHoverCard.Positioner>\n    </Portal>\n  );\n};\n\nexport const HoverCardArrow = (\n  props: React.ComponentProps<typeof ArkHoverCard.Arrow>\n) => {\n  const { style, slot, ...rest } = props;\n\n  return (\n    <ArkHoverCard.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 ?? \"hover-card-arrow\"}\n    >\n      <ArkHoverCard.ArrowTip className=\"border-s border-t\" />\n    </ArkHoverCard.Arrow>\n  );\n};\n"],"names":["useHoverCard","useHoverCardContext","HoverCard","props","lazyMount","unmountOnExit","closeDelay","openDelay","positioning","rest","jsx","ArkHoverCard","HoverCardTrigger","slot","HoverCardContent","className","children","Portal","jsxs","cn","HoverCardArrow","style"],"mappings":";;;;AAQO,MAAMA,IAAeC,GAKfC,IAAY,CAACC,MAA0B;AAClD,QAAM;AAAA,IACJ,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgB;AAAA,IAChB,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc,EAAE,WAAW,MAAA;AAAA,IAC3B,GAAGC;AAAA,EAAA,IACDN;AAEJ,SACE,gBAAAO;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,YAAAL;AAAA,MACA,WAAAF;AAAA,MACA,WAAAG;AAAA,MACA,aAAAC;AAAA,MACA,eAAAH;AAAA,MACC,GAAGI;AAAA,IAAA;AAAA,EAAA;AAGV,GAEaG,IAAmB,CAAC;AAAA,EAC/B,MAAAC;AAAA,EACA,GAAGJ;AACL,MACE,gBAAAC,EAACC,EAAa,SAAb,EAAsB,GAAGF,GAAM,aAAWI,KAAQ,qBAAA,CAAsB,GAG9DC,IAAmB,CAC9BX,MACG;AACH,QAAM,EAAE,WAAAY,GAAW,UAAAC,GAAU,MAAAH,GAAM,GAAGJ,MAASN;AAE/C,2BACGc,GAAA,EACC,UAAA,gBAAAP,EAACC,EAAa,YAAb,EAAwB,aAAU,yBACjC,UAAA,gBAAAO;AAAA,IAACP,EAAa;AAAA,IAAb;AAAA,MACC,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,MAElB,UAAA;AAAA,QAAAG;AAAA,0BAEAI,GAAA,CAAA,CAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEpB,EAAA,CACF;AAEJ,GAEaA,IAAiB,CAC5BjB,MACG;AACH,QAAM,EAAE,OAAAkB,GAAO,MAAAR,GAAM,GAAGJ,MAASN;AAEjC,SACE,gBAAAO;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,OACE;AAAA,QACE,sBAAsB;AAAA,QACtB,gBAAgB;AAAA,QAChB,GAAGU;AAAA,MAAA;AAAA,MAGN,GAAGZ;AAAA,MACJ,aAAWI,KAAQ;AAAA,MAEnB,UAAA,gBAAAH,EAACC,EAAa,UAAb,EAAsB,WAAU,oBAAA,CAAoB;AAAA,IAAA;AAAA,EAAA;AAG3D;"}
+{"version":3,"file":"hover-card.js","sources":["../../src/simples/hover-card.tsx"],"sourcesContent":["import { Portal } from \"@ark-ui/react\";\nimport {\n  HoverCard as ArkHoverCard,\n  useHoverCardContext,\n} from \"@ark-ui/react/hover-card\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useHoverCard = useHoverCardContext;\n\ninterface HoverCardProps\n  extends React.ComponentProps<typeof ArkHoverCard.Root> {}\n\nexport const HoverCard = (props: HoverCardProps) => {\n  const {\n    lazyMount = true,\n    unmountOnExit = true,\n    closeDelay = 100,\n    openDelay = 10,\n    positioning = { placement: \"top\" },\n    ...rest\n  } = props;\n\n  return (\n    <ArkHoverCard.Root\n      closeDelay={closeDelay}\n      lazyMount={lazyMount}\n      openDelay={openDelay}\n      positioning={positioning}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    />\n  );\n};\n\nexport const HoverCardTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkHoverCard.Trigger>) => (\n  <ArkHoverCard.Trigger {...rest} data-slot={slot ?? \"hover-card-trigger\"} />\n);\n\nexport const HoverCardContent = (\n  props: React.ComponentProps<typeof ArkHoverCard.Content>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ArkHoverCard.Positioner data-slot=\"hover-card-positioner\">\n        <ArkHoverCard.Content\n          className={cn(\n            \"z-50\",\n            \"w-64\",\n            \"p-4\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"origin-(--transform-origin)\",\n            \"rounded-box border shadow-lg/5\",\n            \"outline-hidden\",\n            \"data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]\",\n            \"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0\",\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 ?? \"hover-card-content\"}\n        >\n          {children}\n\n          <HoverCardArrow />\n        </ArkHoverCard.Content>\n      </ArkHoverCard.Positioner>\n    </Portal>\n  );\n};\n\nexport const HoverCardArrow = (\n  props: React.ComponentProps<typeof ArkHoverCard.Arrow>\n) => {\n  const { style, slot, ...rest } = props;\n\n  return (\n    <ArkHoverCard.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 ?? \"hover-card-arrow\"}\n    >\n      <ArkHoverCard.ArrowTip className=\"border-s border-t\" />\n    </ArkHoverCard.Arrow>\n  );\n};\n"],"names":["useHoverCard","useHoverCardContext","HoverCard","props","lazyMount","unmountOnExit","closeDelay","openDelay","positioning","rest","jsx","ArkHoverCard","HoverCardTrigger","slot","HoverCardContent","className","children","Portal","jsxs","cn","HoverCardArrow","style"],"mappings":";;;;AAQO,MAAMA,IAAeC,GAKfC,IAAY,CAACC,MAA0B;AAClD,QAAM;AAAA,IACJ,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgB;AAAA,IAChB,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc,EAAE,WAAW,MAAA;AAAA,IAC3B,GAAGC;AAAA,EAAA,IACDN;AAEJ,SACE,gBAAAO;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,YAAAL;AAAA,MACA,WAAAF;AAAA,MACA,WAAAG;AAAA,MACA,aAAAC;AAAA,MACA,eAAAH;AAAA,MACC,GAAGI;AAAA,IAAA;AAAA,EAAA;AAGV,GAEaG,IAAmB,CAAC;AAAA,EAC/B,MAAAC;AAAA,EACA,GAAGJ;AACL,MACE,gBAAAC,EAACC,EAAa,SAAb,EAAsB,GAAGF,GAAM,aAAWI,KAAQ,qBAAA,CAAsB,GAG9DC,IAAmB,CAC9BX,MACG;AACH,QAAM,EAAE,WAAAY,GAAW,UAAAC,GAAU,MAAAH,GAAM,GAAGJ,MAASN;AAE/C,2BACGc,GAAA,EACC,UAAA,gBAAAP,EAACC,EAAa,YAAb,EAAwB,aAAU,yBACjC,UAAA,gBAAAO;AAAA,IAACP,EAAa;AAAA,IAAb;AAAA,MACC,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,MAElB,UAAA;AAAA,QAAAG;AAAA,0BAEAI,GAAA,CAAA,CAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEpB,EAAA,CACF;AAEJ,GAEaA,IAAiB,CAC5BjB,MACG;AACH,QAAM,EAAE,OAAAkB,GAAO,MAAAR,GAAM,GAAGJ,MAASN;AAEjC,SACE,gBAAAO;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,OACE;AAAA,QACE,sBAAsB;AAAA,QACtB,gBAAgB;AAAA,QAChB,GAAGU;AAAA,MAAA;AAAA,MAGN,GAAGZ;AAAA,MACJ,aAAWI,KAAQ;AAAA,MAEnB,UAAA,gBAAAH,EAACC,EAAa,UAAb,EAAsB,WAAU,oBAAA,CAAoB;AAAA,IAAA;AAAA,EAAA;AAG3D;"}

package/dist/simples/input-group.js

@@ -62,7 +62,7 @@ const h = p({
     "select-none font-medium text-muted-foreground text-sm",
     "cursor-text",
     "group-data-[disabled=true]/input-group:opacity-64",
-    "[&>kbd]:rounded-[calc(var(--radius)-5px)]",
+    "[&>kbd]:rounded-[calc(var(--radius-lg)-5px)]",
     "[&_svg:not([class*='size-'])]:size-4"
   ],
   variants: {

package/dist/simples/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","sources":["../../src/simples/input-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { controlMinHeight, controlSizes } from \"../lib/control-size\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Textarea } from \"./textarea\";\n\nconst inpuGroupVariants = tv({\n  base: [\n    \"group/input-group\",\n    \"relative\",\n    \"w-full min-w-0\",\n    \"flex items-center\",\n    \"bg-background bg-field\",\n    \"rounded-lg border border-input shadow-xs/5\",\n    \"transition-[color,box-shadow]\",\n    // **One height, the shared one — see `lib/control-size.ts`.** A group is `min-h-(--size)`\n    // rather than `h-(--size)` because it also holds a `Textarea` and the two block addons, and\n    // those grow it; what it may never do is come out TALLER than an `Input` beside it because of\n    // what it holds. It did, by 14px: the `<input>` inside carried its own `h-8` and the group added\n    // `p-1.5` around it, so a group at `md` measured 46px against an input's 32 — measured\n    // 2026-09-30 on `/docs/forms/controls`, along with every control built on a group (combobox,\n    // date picker, password input, language picker).\n    //\n    // So the `<input>` inside does not carry a height of its own: it stretches to the group's\n    // content box (`InputGroupInput`), and the controls beside it are 24px (`InputGroupButton`),\n    // which leaves a 32px group 4px of inset around them, and there is no padding to add to it: at\n    // `sm` and compact density the group is 24.5px, and a 24px control plus the border already\n    // asks 26. That one case is the exception the pressable floor buys (see `InputGroupButton`).\n    controlMinHeight,\n    \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n    \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n    \"outline-none focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring\",\n    \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/24\",\n    \"dark:has-[[data-slot][aria-invalid=true]]:border-destructive-foreground dark:has-[[data-slot][aria-invalid=true]]:ring-destructive-foreground/40\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: controlSizes,\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface InputGroupProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof inpuGroupVariants> {}\n\nexport const InputGroup = (props: InputGroupProps) => {\n  const { size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(inpuGroupVariants({ size }), className)}\n      data-size={size}\n      role=\"group\"\n      {...rest}\n      data-slot={slot ?? \"input-group\"}\n    />\n  );\n};\n\nconst inputGroupAddonVariants = tv({\n  base: [\n    \"h-auto\",\n    \"flex items-center justify-center gap-2\",\n    \"select-none font-medium text-muted-foreground text-sm\",\n    \"cursor-text\",\n    \"group-data-[disabled=true]/input-group:opacity-64\",\n    \"[&>kbd]:rounded-[calc(var(--radius)-5px)]\",\n    \"[&_svg:not([class*='size-'])]:size-4\",\n  ],\n  variants: {\n    align: {\n      // **A smaller padding, not a negative margin**, and this is a measured divergence from the\n      // reference rather than a taste one. Shark tucks the button in with `pe-3` plus\n      // `me-[-0.45rem]`; a negative margin on the last flex item lets its border box run past the\n      // container's content edge, so measured live on `docs/ai/fields` the addon sat **6.2px\n      // outside the group's inline border and 6px outside its block border** — in a box with\n      // `overflow: visible`, which is why it also showed up as 6px of scroll width on the parent.\n      // The inner gap is what was wanted and it is unchanged: 12px of padding minus 7.2px of\n      // margin is the 6px this sets directly.\n      // **A button needs no padding beside it — the group's own `p-1.5` is the inset**, and this\n      // is what puts the ✨ the same distance from the border here as inside a `TagsInputControl`.\n      // Text and a `kbd` still take theirs, because neither carries a box of its own.\n      \"inline-start\": [\"order-first ps-3\", \"has-[>button]:ps-0.75\", \"has-[>kbd]:ps-2\"],\n      \"inline-end\": [\"order-last pe-3\", \"has-[>button]:pe-0.75\", \"has-[>kbd]:pe-2\"],\n      // The block padding lives on the two block aligns and nowhere else. It was `py-1.5` in the\n      // base, which is right for a band across the field and wrong for a control tucked into its\n      // end: measured on `docs/ai/fields`, an `inline-end` addon was **44px tall inside a 32px\n      // group** — 6px of transparent padding past the border on each side, in a box with\n      // `overflow: visible`. The mark inside it is `size-8` and looked fine; what was wrong was the\n      // group's own box.\n      \"block-start\": [\n        \"order-first w-full justify-start px-3 pt-3 pb-1.5\",\n        \"group-has-[>input]/input-group:pt-2.5\",\n        \"[.border-b]:pb-3\",\n      ],\n      \"block-end\": [\n        \"order-last w-full justify-start px-3 pt-1.5 pb-3\",\n        \"group-has-[>input]/input-group:pb-2.5\",\n        \"[.border-t]:pt-3\",\n      ],\n    },\n  },\n  defaultVariants: {\n    align: \"inline-start\",\n  },\n});\n\ninterface InputGroupAddonProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof inputGroupAddonVariants> {}\n\nexport const InputGroupAddon = (props: InputGroupAddonProps) => {\n  const { className, align = \"inline-start\", slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      role=\"group\"\n      {...rest}\n      data-slot={slot ?? \"input-group-addon\"}\n    />\n  );\n};\n\nconst inputGroupButtonVariants = tv({\n  base: [\n    \"relative\",\n    \"flex items-center gap-2\",\n    \"text-sm\",\n    \"shadow-none\",\n    \"pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11\",\n  ],\n  variants: {\n    size: {\n      /**\n       * The floor, and the default, because there is nothing legal below it.\n       *\n       * `xs` and `icon-xs` were `1.5rem`, which is 24px at the default root and **21px at compact** —\n       * every size here is a `rem` against a root the density axis sets. That is under the 24×24\n       * WCAG 2.5.8 states in CSS pixels, and it was this component's DEFAULT, so an input group\n       * that said nothing got the failing size.\n       *\n       * The `pointer-coarse` hit area below does not save it. 44px is the touch answer and 2.5.8\n       * asks about pointers generally: with a mouse the target was 21px and the `::after` is not in\n       * the hit path. This is the one thing `Button` does not carry, and it is why the two were\n       * decided separately rather than in one sweep.\n       */\n      // 24 CSS pixels, not `h-6`: a `rem` is 21px at compact, under the bar above, and this is the\n      // one size in a recipe that must not scale. Inside a group the bar and the group's own 28px\n      // at `sm` (24.5px at compact) are the same number, which is why 24 fits at every size.\n      sm: [\"h-[24px]\", \"gap-1.5\", \"px-2.5\", \"rounded-md\", \"has-[>svg]:px-2.5\"],\n      \"icon-sm\": [\"size-[24px]\", \"p-0\", \"has-[>svg]:p-0\"],\n    },\n  },\n  defaultVariants: {\n    size: \"sm\",\n  },\n});\n\ninterface InputGroupButtonProps\n  extends Omit<React.ComponentProps<typeof Button>, \"size\">,\n    VariantProps<typeof inputGroupButtonVariants> {}\n\nexport const InputGroupButton = (props: InputGroupButtonProps) => {\n  const {\n    className,\n    type = \"button\",\n    variant = \"ghost\",\n    size = \"sm\",\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <Button\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      data-size={size}\n      type={type}\n      variant={variant}\n      {...rest}\n      slot={slot ?? \"input-group-button\"}\n    />\n  );\n};\n\nexport const InputGroupText = (\n  props: React.ComponentProps<typeof ark.span>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\n        \"flex items-center gap-2\",\n        \"text-muted-foreground text-sm\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"input-group-text\"}\n    />\n  );\n};\n\nexport const InputGroupInput = (props: React.ComponentProps<typeof Input>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Input\n      className={cn(\n        // `h-auto self-stretch`: the group's height, not the input's own. An `Input` is\n        // `h-(--size)` and its size is its own, so inside a group of another size it would be a\n        // different height from the box around it.\n        \"h-auto flex-1 self-stretch\",\n        \"bg-transparent\",\n        \"rounded-none border-0 shadow-none\",\n        \"focus-visible:ring-0\",\n        \"disabled:bg-transparent aria-invalid:ring-0 data-invalid:ring-0\",\n                className\n      )}\n      {...rest}\n      slot={slot ?? \"input-group-control\"}\n    />\n  );\n};\n\nexport const InputGroupTextarea = (\n  props: React.ComponentProps<typeof Textarea>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Textarea\n      className={cn(\n        \"flex-1\",\n        \"py-3\",\n        \"bg-transparent\",\n        \"resize-none rounded-none border-0 shadow-none\",\n        \"focus-visible:ring-0\",\n        \"disabled:bg-transparent aria-invalid:ring-0 data-invalid:ring-0\",\n                className\n      )}\n      {...rest}\n      slot={slot ?? \"input-group-control\"}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA;AAA6B;AACrB;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACF;AAAA;AAES;AACT;AAEV;AAOE;AAEA;AACE;AAAK;AAAJ;AACqD;AACzC;AACN;AACD;AACe;AAAA;AAGzB;AAEmC;AAC3B;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY0E;AACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO7D;AACb;AACA;AACA;AAAA;AAEW;AACX;AACA;AACA;AAAA;AACF;AACF;AAEe;AACR;AAEX;AAOE;AAEA;AACE;AAAK;AAAJ;AAC4D;AAC/C;;AAEV;AAGuD;AACzD;AACK;AACD;AACe;AAAA;AAGzB;AAEoC;AAC5B;AACJ;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBmE;AACrB;AAAA;AACpD;AAEe;AACT;AAEV;AAOE;AAAM;AACJ;AACO;AACG;AACH;AACP;AACG;AAGL;AACE;AAAC;AAAA;AAC4D;AAChD;AACX;AACA;AACI;AACU;AAAA;AAGpB;AAKE;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAGE;AAEA;AACE;AAAC;AAAA;AACY;AAAA;AAAA;AAAA;AAIT;AACA;AACA;AACA;AACA;AACQ;AAAA;AAEN;AACU;AAAA;AAGpB;AAKE;AAEA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACQ;AAAA;AAEN;AACU;AAAA;AAGpB;;;;;;;;;"}
+{"version":3,"file":"input-group.js","sources":["../../src/simples/input-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { controlMinHeight, controlSizes } from \"../lib/control-size\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Textarea } from \"./textarea\";\n\nconst inpuGroupVariants = tv({\n  base: [\n    \"group/input-group\",\n    \"relative\",\n    \"w-full min-w-0\",\n    \"flex items-center\",\n    \"bg-background bg-field\",\n    \"rounded-lg border border-input shadow-xs/5\",\n    \"transition-[color,box-shadow]\",\n    // **One height, the shared one — see `lib/control-size.ts`.** A group is `min-h-(--size)`\n    // rather than `h-(--size)` because it also holds a `Textarea` and the two block addons, and\n    // those grow it; what it may never do is come out TALLER than an `Input` beside it because of\n    // what it holds. It did, by 14px: the `<input>` inside carried its own `h-8` and the group added\n    // `p-1.5` around it, so a group at `md` measured 46px against an input's 32 — measured\n    // 2026-09-30 on `/docs/forms/controls`, along with every control built on a group (combobox,\n    // date picker, password input, language picker).\n    //\n    // So the `<input>` inside does not carry a height of its own: it stretches to the group's\n    // content box (`InputGroupInput`), and the controls beside it are 24px (`InputGroupButton`),\n    // which leaves a 32px group 4px of inset around them, and there is no padding to add to it: at\n    // `sm` and compact density the group is 24.5px, and a 24px control plus the border already\n    // asks 26. That one case is the exception the pressable floor buys (see `InputGroupButton`).\n    controlMinHeight,\n    \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n    \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n    \"outline-none focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring\",\n    \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/24\",\n    \"dark:has-[[data-slot][aria-invalid=true]]:border-destructive-foreground dark:has-[[data-slot][aria-invalid=true]]:ring-destructive-foreground/40\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: controlSizes,\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface InputGroupProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof inpuGroupVariants> {}\n\nexport const InputGroup = (props: InputGroupProps) => {\n  const { size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(inpuGroupVariants({ size }), className)}\n      data-size={size}\n      role=\"group\"\n      {...rest}\n      data-slot={slot ?? \"input-group\"}\n    />\n  );\n};\n\nconst inputGroupAddonVariants = tv({\n  base: [\n    \"h-auto\",\n    \"flex items-center justify-center gap-2\",\n    \"select-none font-medium text-muted-foreground text-sm\",\n    \"cursor-text\",\n    \"group-data-[disabled=true]/input-group:opacity-64\",\n    \"[&>kbd]:rounded-[calc(var(--radius-lg)-5px)]\",\n    \"[&_svg:not([class*='size-'])]:size-4\",\n  ],\n  variants: {\n    align: {\n      // **A smaller padding, not a negative margin**, and this is a measured divergence from the\n      // reference rather than a taste one. Shark tucks the button in with `pe-3` plus\n      // `me-[-0.45rem]`; a negative margin on the last flex item lets its border box run past the\n      // container's content edge, so measured live on `docs/ai/fields` the addon sat **6.2px\n      // outside the group's inline border and 6px outside its block border** — in a box with\n      // `overflow: visible`, which is why it also showed up as 6px of scroll width on the parent.\n      // The inner gap is what was wanted and it is unchanged: 12px of padding minus 7.2px of\n      // margin is the 6px this sets directly.\n      // **A button needs no padding beside it — the group's own `p-1.5` is the inset**, and this\n      // is what puts the ✨ the same distance from the border here as inside a `TagsInputControl`.\n      // Text and a `kbd` still take theirs, because neither carries a box of its own.\n      \"inline-start\": [\"order-first ps-3\", \"has-[>button]:ps-0.75\", \"has-[>kbd]:ps-2\"],\n      \"inline-end\": [\"order-last pe-3\", \"has-[>button]:pe-0.75\", \"has-[>kbd]:pe-2\"],\n      // The block padding lives on the two block aligns and nowhere else. It was `py-1.5` in the\n      // base, which is right for a band across the field and wrong for a control tucked into its\n      // end: measured on `docs/ai/fields`, an `inline-end` addon was **44px tall inside a 32px\n      // group** — 6px of transparent padding past the border on each side, in a box with\n      // `overflow: visible`. The mark inside it is `size-8` and looked fine; what was wrong was the\n      // group's own box.\n      \"block-start\": [\n        \"order-first w-full justify-start px-3 pt-3 pb-1.5\",\n        \"group-has-[>input]/input-group:pt-2.5\",\n        \"[.border-b]:pb-3\",\n      ],\n      \"block-end\": [\n        \"order-last w-full justify-start px-3 pt-1.5 pb-3\",\n        \"group-has-[>input]/input-group:pb-2.5\",\n        \"[.border-t]:pt-3\",\n      ],\n    },\n  },\n  defaultVariants: {\n    align: \"inline-start\",\n  },\n});\n\ninterface InputGroupAddonProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof inputGroupAddonVariants> {}\n\nexport const InputGroupAddon = (props: InputGroupAddonProps) => {\n  const { className, align = \"inline-start\", slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      role=\"group\"\n      {...rest}\n      data-slot={slot ?? \"input-group-addon\"}\n    />\n  );\n};\n\nconst inputGroupButtonVariants = tv({\n  base: [\n    \"relative\",\n    \"flex items-center gap-2\",\n    \"text-sm\",\n    \"shadow-none\",\n    \"pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11\",\n  ],\n  variants: {\n    size: {\n      /**\n       * The floor, and the default, because there is nothing legal below it.\n       *\n       * `xs` and `icon-xs` were `1.5rem`, which is 24px at the default root and **21px at compact** —\n       * every size here is a `rem` against a root the density axis sets. That is under the 24×24\n       * WCAG 2.5.8 states in CSS pixels, and it was this component's DEFAULT, so an input group\n       * that said nothing got the failing size.\n       *\n       * The `pointer-coarse` hit area below does not save it. 44px is the touch answer and 2.5.8\n       * asks about pointers generally: with a mouse the target was 21px and the `::after` is not in\n       * the hit path. This is the one thing `Button` does not carry, and it is why the two were\n       * decided separately rather than in one sweep.\n       */\n      // 24 CSS pixels, not `h-6`: a `rem` is 21px at compact, under the bar above, and this is the\n      // one size in a recipe that must not scale. Inside a group the bar and the group's own 28px\n      // at `sm` (24.5px at compact) are the same number, which is why 24 fits at every size.\n      sm: [\"h-[24px]\", \"gap-1.5\", \"px-2.5\", \"rounded-md\", \"has-[>svg]:px-2.5\"],\n      \"icon-sm\": [\"size-[24px]\", \"p-0\", \"has-[>svg]:p-0\"],\n    },\n  },\n  defaultVariants: {\n    size: \"sm\",\n  },\n});\n\ninterface InputGroupButtonProps\n  extends Omit<React.ComponentProps<typeof Button>, \"size\">,\n    VariantProps<typeof inputGroupButtonVariants> {}\n\nexport const InputGroupButton = (props: InputGroupButtonProps) => {\n  const {\n    className,\n    type = \"button\",\n    variant = \"ghost\",\n    size = \"sm\",\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <Button\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      data-size={size}\n      type={type}\n      variant={variant}\n      {...rest}\n      slot={slot ?? \"input-group-button\"}\n    />\n  );\n};\n\nexport const InputGroupText = (\n  props: React.ComponentProps<typeof ark.span>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\n        \"flex items-center gap-2\",\n        \"text-muted-foreground text-sm\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"input-group-text\"}\n    />\n  );\n};\n\nexport const InputGroupInput = (props: React.ComponentProps<typeof Input>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Input\n      className={cn(\n        // `h-auto self-stretch`: the group's height, not the input's own. An `Input` is\n        // `h-(--size)` and its size is its own, so inside a group of another size it would be a\n        // different height from the box around it.\n        \"h-auto flex-1 self-stretch\",\n        \"bg-transparent\",\n        \"rounded-none border-0 shadow-none\",\n        \"focus-visible:ring-0\",\n        \"disabled:bg-transparent aria-invalid:ring-0 data-invalid:ring-0\",\n                className\n      )}\n      {...rest}\n      slot={slot ?? \"input-group-control\"}\n    />\n  );\n};\n\nexport const InputGroupTextarea = (\n  props: React.ComponentProps<typeof Textarea>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Textarea\n      className={cn(\n        \"flex-1\",\n        \"py-3\",\n        \"bg-transparent\",\n        \"resize-none rounded-none border-0 shadow-none\",\n        \"focus-visible:ring-0\",\n        \"disabled:bg-transparent aria-invalid:ring-0 data-invalid:ring-0\",\n                className\n      )}\n      {...rest}\n      slot={slot ?? \"input-group-control\"}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA;AAA6B;AACrB;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACF;AAAA;AAES;AACT;AAEV;AAOE;AAEA;AACE;AAAK;AAAJ;AACqD;AACzC;AACN;AACD;AACe;AAAA;AAGzB;AAEmC;AAC3B;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY0E;AACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO7D;AACb;AACA;AACA;AAAA;AAEW;AACX;AACA;AACA;AAAA;AACF;AACF;AAEe;AACR;AAEX;AAOE;AAEA;AACE;AAAK;AAAJ;AAC4D;AAC/C;;AAEV;AAGuD;AACzD;AACK;AACD;AACe;AAAA;AAGzB;AAEoC;AAC5B;AACJ;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBmE;AACrB;AAAA;AACpD;AAEe;AACT;AAEV;AAOE;AAAM;AACJ;AACO;AACG;AACH;AACP;AACG;AAGL;AACE;AAAC;AAAA;AAC4D;AAChD;AACX;AACA;AACI;AACU;AAAA;AAGpB;AAKE;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAGE;AAEA;AACE;AAAC;AAAA;AACY;AAAA;AAAA;AAAA;AAIT;AACA;AACA;AACA;AACA;AACQ;AAAA;AAEN;AACU;AAAA;AAGpB;AAKE;AAEA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACQ;AAAA;AAEN;AACU;AAAA;AAGpB;;;;;;;;;"}

package/dist/simples/menu.js

@@ -1,9 +1,9 @@
 import { jsx as a, jsxs as c } from "react/jsx-runtime";
 import { Portal as l } from "@ark-ui/react";
-import { ark as f } from "@ark-ui/react/factory";
+import { ark as v } from "@ark-ui/react/factory";
 import { Menu as o } from "@ark-ui/react/menu";
 import { useMenuContext as B } from "@ark-ui/react/menu";
-import { CheckIcon as d, ChevronRight as v } from "lucide-react";
+import { CheckIcon as d, ChevronRight as f } from "lucide-react";
 import { tv as m } from "tailwind-variants";
 import { cn as s } from "../lib/cn.js";
 const x = (t) => {
@@ -234,14 +234,14 @@ const x = (t) => {
       "data-slot": r ?? "menu-sub-trigger",
       children: [
         n,
-        /* @__PURE__ */ a(b, { children: /* @__PURE__ */ a(v, {}) })
+        /* @__PURE__ */ a(b, { children: /* @__PURE__ */ a(f, {}) })
       ]
     }
   );
 }, b = (t) => {
   const { className: e, slot: n, ...r } = t;
   return /* @__PURE__ */ a(
-    f.span,
+    v.span,
     {
       className: s(
         "ms-auto rtl:me-auto",
@@ -259,7 +259,7 @@ const x = (t) => {
     o.Arrow,
     {
       style: {
-        "--arrow-background": "var(--popover)",
+        "--arrow-background": "var(--popover, var(--card))",
         "--arrow-size": "calc(1.5 * var(--spacing))",
         ...e
       },

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.0",
   "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.0",
+    "@kanzo-tech/theme": "0.15.0"
   },
   "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