@evinvest/uikit 0.32.0 → 0.33.0

package/dist/components/atomic/pagination.js

@@ -2,14 +2,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/cn.js";
 import { buttonVariants } from "./button.js";
+import * as copy from "../../generated/copy.js";
+import { PAGINATION_CONTENT, PAGINATION_ELLIPSIS, PAGINATION_LINK_LABEL, PAGINATION_NEXT_LINK, PAGINATION_PREVIOUS_LINK, PAGINATION_ROOT } from "../../generated/pagination.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
 function Pagination({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "nav",
     {
       role: "navigation",
-      "aria-label": "pagination",
+      "aria-label": copy.PAGINATION,
       "data-slot": "pagination",
-      className: cn("mx-auto flex w-full justify-center", className),
+      className: cn(PAGINATION_ROOT, className),
       ...props
     }
   );
@@ -22,7 +25,7 @@ function PaginationContent({
     "ul",
     {
       "data-slot": "pagination-content",
-      className: cn("flex flex-row items-center gap-1", className),
+      className: cn(PAGINATION_CONTENT, className),
       ...props
     }
   );
@@ -55,9 +58,9 @@ function PaginationLink({
     }
   );
 }
-const ChevronLeft = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) });
-const ChevronRight = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
-const MoreHorizontal = () => /* @__PURE__ */ jsxs(
+const ChevronLeft = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: iconShapes("chevron-left") });
+const ChevronRight = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: iconShapes("chevron-right") });
+const MoreHorizontal = () => /* @__PURE__ */ jsx(
   "svg",
   {
     className: "size-4",
@@ -65,11 +68,7 @@ const MoreHorizontal = () => /* @__PURE__ */ jsxs(
     fill: "none",
     stroke: "currentColor",
     strokeWidth: 2,
-    children: [
-      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
-      /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
-      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
-    ]
+    children: iconShapes("ellipsis")
   }
 );
 function PaginationPrevious({
@@ -79,13 +78,13 @@ function PaginationPrevious({
   return /* @__PURE__ */ jsxs(
     PaginationLink,
     {
-      "aria-label": "Go to previous page",
+      "aria-label": copy.PAGINATION_PREVIOUS_PAGE,
       size: "md",
-      className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+      className: cn(PAGINATION_PREVIOUS_LINK, className),
       ...props,
       children: [
         /* @__PURE__ */ jsx(ChevronLeft, {}),
-        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Previous" })
+        /* @__PURE__ */ jsx("span", { className: PAGINATION_LINK_LABEL, children: copy.PAGINATION_PREVIOUS })
       ]
     }
   );
@@ -97,12 +96,12 @@ function PaginationNext({
   return /* @__PURE__ */ jsxs(
     PaginationLink,
     {
-      "aria-label": "Go to next page",
+      "aria-label": copy.PAGINATION_NEXT_PAGE,
       size: "md",
-      className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+      className: cn(PAGINATION_NEXT_LINK, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ jsx("span", { className: PAGINATION_LINK_LABEL, children: copy.PAGINATION_NEXT }),
         /* @__PURE__ */ jsx(ChevronRight, {})
       ]
     }
@@ -117,11 +116,11 @@ function PaginationEllipsis({
     {
       "aria-hidden": true,
       "data-slot": "pagination-ellipsis",
-      className: cn("flex size-9 items-center justify-center", className),
+      className: cn(PAGINATION_ELLIPSIS, className),
       ...props,
       children: [
         /* @__PURE__ */ jsx(MoreHorizontal, {}),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: copy.PAGINATION_MORE })
       ]
     }
   );

package/dist/components/atomic/pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atomic/pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { buttonVariants, type ButtonSize } from \"./button\";\n\nexport function Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function PaginationItem(props: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\nexport type PaginationLinkProps = {\n  isActive?: boolean;\n  size?: ButtonSize;\n  /** Page numbers are square glyphs; a \"Previous\"/\"Next\" label is not. */\n  icon?: boolean;\n} & React.ComponentProps<\"a\">;\n\nexport function PaginationLink({\n  className,\n  isActive,\n  size = \"md\",\n  icon = true,\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n          icon,\n        }),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst ChevronLeft = () => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <path d=\"m15 18-6-6 6-6\" />\n  </svg>\n);\n\nconst ChevronRight = () => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <path d=\"m9 18 6-6-6-6\" />\n  </svg>\n);\n\nconst MoreHorizontal = () => (\n  <svg\n    className=\"size-4\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n    <circle cx=\"19\" cy=\"12\" r=\"1\" />\n    <circle cx=\"5\" cy=\"12\" r=\"1\" />\n  </svg>\n);\n\nexport function PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"md\"\n      className={cn(\"gap-1 px-2.5 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <ChevronLeft />\n      <span className=\"hidden sm:block\">Previous</span>\n    </PaginationLink>\n  );\n}\n\nexport function PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"md\"\n      className={cn(\"gap-1 px-2.5 sm:pr-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <ChevronRight />\n    </PaginationLink>\n  );\n}\n\nexport function PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontal />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/atomic/pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { buttonVariants, type ButtonSize } from \"./button\";\nimport * as copy from \"../../generated/copy\";\nimport { PAGINATION_CONTENT, PAGINATION_ELLIPSIS, PAGINATION_LINK_LABEL, PAGINATION_NEXT_LINK, PAGINATION_PREVIOUS_LINK, PAGINATION_ROOT } from \"../../generated/pagination\";\nimport { iconShapes } from \"../../icons/icon-shapes\";\n\nexport function Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label={copy.PAGINATION}\n      data-slot=\"pagination\"\n      className={cn(PAGINATION_ROOT, className)}\n      {...props}\n    />\n  );\n}\n\nexport function PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(PAGINATION_CONTENT, className)}\n      {...props}\n    />\n  );\n}\n\nexport function PaginationItem(props: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\nexport type PaginationLinkProps = {\n  isActive?: boolean;\n  size?: ButtonSize;\n  /** Page numbers are square glyphs; a \"Previous\"/\"Next\" label is not. */\n  icon?: boolean;\n} & React.ComponentProps<\"a\">;\n\nexport function PaginationLink({\n  className,\n  isActive,\n  size = \"md\",\n  icon = true,\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n          icon,\n        }),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst ChevronLeft = () => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    {iconShapes(\"chevron-left\")}\n  </svg>\n);\n\nconst ChevronRight = () => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    {iconShapes(\"chevron-right\")}\n  </svg>\n);\n\nconst MoreHorizontal = () => (\n  <svg\n    className=\"size-4\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n  >\n    {iconShapes(\"ellipsis\")}\n  </svg>\n);\n\nexport function PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label={copy.PAGINATION_PREVIOUS_PAGE}\n      size=\"md\"\n      className={cn(PAGINATION_PREVIOUS_LINK, className)}\n      {...props}\n    >\n      <ChevronLeft />\n      <span className={PAGINATION_LINK_LABEL}>{copy.PAGINATION_PREVIOUS}</span>\n    </PaginationLink>\n  );\n}\n\nexport function PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label={copy.PAGINATION_NEXT_PAGE}\n      size=\"md\"\n      className={cn(PAGINATION_NEXT_LINK, className)}\n      {...props}\n    >\n      <span className={PAGINATION_LINK_LABEL}>{copy.PAGINATION_NEXT}</span>\n      <ChevronRight />\n    </PaginationLink>\n  );\n}\n\nexport function PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(PAGINATION_ELLIPSIS, className)}\n      {...props}\n    >\n      <MoreHorizontal />\n      <span className=\"sr-only\">{copy.PAGINATION_MORE}</span>\n    </span>\n  );\n}\n"],"mappings":"AASI,cAwFA,YAxFA;AATJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,sBAAuC;AAChD,YAAY,UAAU;AACtB,SAAS,oBAAoB,qBAAqB,uBAAuB,sBAAsB,0BAA0B,uBAAuB;AAChJ,SAAS,kBAAkB;AAEpB,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,KAAK;AAAA,MACjB,aAAU;AAAA,MACV,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oBAAoB,SAAS;AAAA,MAC1C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,eAAe,OAAmC;AAChE,SAAO,oBAAC,QAAG,aAAU,mBAAmB,GAAG,OAAO;AACpD;AASO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,GAAG;AACL,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc,WAAW,SAAS;AAAA,MAClC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT,eAAe;AAAA,UACb,SAAS,WAAW,YAAY;AAAA,UAChC;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc,MAClB,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAa,GACrE,qBAAW,cAAc,GAC5B;AAGF,MAAM,eAAe,MACnB,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAa,GACrE,qBAAW,eAAe,GAC7B;AAGF,MAAM,iBAAiB,MACrB;AAAA,EAAC;AAAA;AAAA,IACC,WAAU;AAAA,IACV,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAa;AAAA,IAEZ,qBAAW,UAAU;AAAA;AACxB;AAGK,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAgD;AAC9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,KAAK;AAAA,MACjB,MAAK;AAAA,MACL,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA,4BAAC,eAAY;AAAA,QACb,oBAAC,UAAK,WAAW,uBAAwB,eAAK,qBAAoB;AAAA;AAAA;AAAA,EACpE;AAEJ;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,GAAG;AACL,GAAgD;AAC9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,KAAK;AAAA,MACjB,MAAK;AAAA,MACL,WAAW,GAAG,sBAAsB,SAAS;AAAA,MAC5C,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAW,uBAAwB,eAAK,iBAAgB;AAAA,QAC9D,oBAAC,gBAAa;AAAA;AAAA;AAAA,EAChB;AAEJ;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,qBAAqB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEJ;AAAA,4BAAC,kBAAe;AAAA,QAChB,oBAAC,UAAK,WAAU,WAAW,eAAK,iBAAgB;AAAA;AAAA;AAAA,EAClD;AAEJ;","names":[]}

package/dist/components/atomic/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atomic/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { useFloating } from \"../../primitives/use-floating\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../../primitives/dismissable-layer\";\nimport { type InitialFocus, useFocusScope } from \"../../primitives/focus-scope\";\nimport { usePresence } from \"../../primitives/presence\";\nimport { mergeRefs } from \"../../primitives/merge-refs\";\nimport { Portal } from \"../../primitives/portal\";\nimport { Slot } from \"../../primitives/slot\";\nimport { POPOVER_CONTENT } from \"../../generated/popover\";\n\ninterface PopoverContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\nconst PopoverContext = React.createContext<PopoverContextValue | null>(null);\n\nfunction usePopover(): PopoverContextValue {\n  const ctx = React.useContext(PopoverContext);\n  if (!ctx) throw new Error(\"Popover parts must be used within <Popover>\");\n  return ctx;\n}\n\nexport interface PopoverProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function Popover({ open, defaultOpen = false, onOpenChange, children }: PopoverProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const anchorRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <PopoverContext.Provider value={{ open: isOpen, setOpen, anchorRef }}>\n      {children}\n    </PopoverContext.Provider>\n  );\n}\n\nexport interface PopoverTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function PopoverTrigger({ asChild = false, onClick, ...props }: PopoverTriggerProps) {\n  const { open, setOpen, anchorRef } = usePopover();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"popover-trigger\"\n      aria-expanded={open}\n      ref={anchorRef as React.Ref<never>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(!open);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface PopoverAnchorProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\nexport function PopoverAnchor({ asChild = false, ...props }: PopoverAnchorProps) {\n  const { anchorRef } = usePopover();\n  const Comp = asChild ? Slot : \"div\";\n  return (\n    <Comp\n      data-slot=\"popover-anchor\"\n      ref={anchorRef as React.Ref<never>}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface PopoverContentProps extends React.ComponentProps<\"div\"> {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  align?: \"start\" | \"center\" | \"end\";\n  sideOffset?: number;\n  /** Where focus lands on open. Default `first` (e.g. a `Command` search input). */\n  initialFocus?: InitialFocus;\n}\n\nexport function PopoverContent({\n  className,\n  side: sideProp = \"bottom\",\n  align = \"center\",\n  sideOffset = 4,\n  initialFocus = \"first\",\n  children,\n  ...props\n}: PopoverContentProps) {\n  const { open, setOpen, anchorRef } = usePopover();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const { floatingRef, style, side } = useFloating({\n    anchorRef,\n    open,\n    side: sideProp,\n    align,\n    offset: sideOffset,\n  });\n  const focusRef = useFocusScope(open, { initialFocus, returnFocusTo: anchorRef });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [anchorRef],\n  });\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <div\n        data-slot=\"popover-content\"\n        data-state={open ? \"open\" : \"closed\"}\n        data-side={side}\n        data-align={align}\n        ref={mergeRefs(floatingRef, focusRef, dismissRef, presRef)}\n        style={style}\n        className={cn(\n          POPOVER_CONTENT,\n          className,\n        )}\n        {...(props as Record<string, unknown>)}\n      >\n        <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n      </div>\n    </Portal>\n  );\n}\n"],"mappings":";AA2CI;AAzCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB,2BAA2B;AAC3D,SAA4B,qBAAqB;AACjD,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAQhC,MAAM,iBAAiB,MAAM,cAA0C,IAAI;AAE3E,SAAS,aAAkC;AACzC,QAAM,MAAM,MAAM,WAAW,cAAc;AAC3C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,6CAA6C;AACvE,SAAO;AACT;AASO,SAAS,QAAQ,EAAE,MAAM,cAAc,OAAO,cAAc,SAAS,GAAiB;AAC3F,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,QAAM,YAAY,MAAM,OAA2B,IAAI;AACvD,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,EAAE,MAAM,QAAQ,SAAS,UAAU,GAChE,UACH;AAEJ;AAMO,SAAS,eAAe,EAAE,UAAU,OAAO,SAAS,GAAG,MAAM,GAAwB;AAC1F,QAAM,EAAE,MAAM,SAAS,UAAU,IAAI,WAAW;AAChD,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAe;AAAA,MACf,KAAK;AAAA,MACL,SAAS,CAAC,MAA2C;AACnD,kBAAU,CAAC;AACX,gBAAQ,CAAC,IAAI;AAAA,MACf;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ;AAMO,SAAS,cAAc,EAAE,UAAU,OAAO,GAAG,MAAM,GAAuB;AAC/E,QAAM,EAAE,UAAU,IAAI,WAAW;AACjC,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,KAAK;AAAA,MACJ,GAAI;AAAA;AAAA,EACP;AAEJ;AAUO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,MAAM,WAAW;AAAA,EACjB,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,EAAE,MAAM,SAAS,UAAU,IAAI,WAAW;AAChD,QAAM,EAAE,WAAW,KAAK,QAAQ,IAAI,YAAY,IAAI;AACpD,QAAM,EAAE,aAAa,OAAO,KAAK,IAAI,YAAY;AAAA,IAC/C;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,EACV,CAAC;AACD,QAAM,WAAW,cAAc,MAAM,EAAE,cAAc,eAAe,UAAU,CAAC;AAC/E,QAAM,aAAa,oBAAoB;AAAA,IACrC,SAAS;AAAA,IACT,WAAW,MAAM,QAAQ,KAAK;AAAA,IAC9B,SAAS,CAAC,SAAS;AAAA,EACrB,CAAC;AACD,MAAI,CAAC,UAAW,QAAO;AACvB,SACE,oBAAC,UACC;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,OAAO,SAAS;AAAA,MAC5B,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,KAAK,UAAU,aAAa,UAAU,YAAY,OAAO;AAAA,MACzD;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAI;AAAA,MAEL,8BAAC,yBAAsB,OAAO,YAAa,UAAS;AAAA;AAAA,EACtD,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/atomic/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { useFloating } from \"../../primitives/use-floating\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../../primitives/dismissable-layer\";\nimport { type InitialFocus, useFocusScope } from \"../../primitives/focus-scope\";\nimport { usePresence } from \"../../primitives/presence\";\nimport { mergeRefs } from \"../../primitives/merge-refs\";\nimport { Portal } from \"../../primitives/portal\";\nimport { Slot } from \"../../primitives/slot\";\nimport { POPOVER_CONTENT } from \"../../generated/popover\";\nimport type { Side } from \"../../generated/primitives\";\n\ninterface PopoverContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\nconst PopoverContext = React.createContext<PopoverContextValue | null>(null);\n\nfunction usePopover(): PopoverContextValue {\n  const ctx = React.useContext(PopoverContext);\n  if (!ctx) throw new Error(\"Popover parts must be used within <Popover>\");\n  return ctx;\n}\n\nexport interface PopoverProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function Popover({ open, defaultOpen = false, onOpenChange, children }: PopoverProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const anchorRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <PopoverContext.Provider value={{ open: isOpen, setOpen, anchorRef }}>\n      {children}\n    </PopoverContext.Provider>\n  );\n}\n\nexport interface PopoverTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function PopoverTrigger({ asChild = false, onClick, ...props }: PopoverTriggerProps) {\n  const { open, setOpen, anchorRef } = usePopover();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"popover-trigger\"\n      aria-expanded={open}\n      ref={anchorRef as React.Ref<never>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(!open);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface PopoverAnchorProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\nexport function PopoverAnchor({ asChild = false, ...props }: PopoverAnchorProps) {\n  const { anchorRef } = usePopover();\n  const Comp = asChild ? Slot : \"div\";\n  return (\n    <Comp\n      data-slot=\"popover-anchor\"\n      ref={anchorRef as React.Ref<never>}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface PopoverContentProps extends React.ComponentProps<\"div\"> {\n  side?: Side;\n  align?: \"start\" | \"center\" | \"end\";\n  sideOffset?: number;\n  /** Where focus lands on open. Default `first` (e.g. a `Command` search input). */\n  initialFocus?: InitialFocus;\n}\n\nexport function PopoverContent({\n  className,\n  side: sideProp = \"bottom\",\n  align = \"center\",\n  sideOffset = 4,\n  initialFocus = \"first\",\n  children,\n  ...props\n}: PopoverContentProps) {\n  const { open, setOpen, anchorRef } = usePopover();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const { floatingRef, style, side } = useFloating({\n    anchorRef,\n    open,\n    side: sideProp,\n    align,\n    offset: sideOffset,\n  });\n  const focusRef = useFocusScope(open, { initialFocus, returnFocusTo: anchorRef });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [anchorRef],\n  });\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <div\n        data-slot=\"popover-content\"\n        data-state={open ? \"open\" : \"closed\"}\n        data-side={side}\n        data-align={align}\n        ref={mergeRefs(floatingRef, focusRef, dismissRef, presRef)}\n        style={style}\n        className={cn(\n          POPOVER_CONTENT,\n          className,\n        )}\n        {...(props as Record<string, unknown>)}\n      >\n        <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n      </div>\n    </Portal>\n  );\n}\n"],"mappings":";AA4CI;AA1CJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB,2BAA2B;AAC3D,SAA4B,qBAAqB;AACjD,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAShC,MAAM,iBAAiB,MAAM,cAA0C,IAAI;AAE3E,SAAS,aAAkC;AACzC,QAAM,MAAM,MAAM,WAAW,cAAc;AAC3C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,6CAA6C;AACvE,SAAO;AACT;AASO,SAAS,QAAQ,EAAE,MAAM,cAAc,OAAO,cAAc,SAAS,GAAiB;AAC3F,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,QAAM,YAAY,MAAM,OAA2B,IAAI;AACvD,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,EAAE,MAAM,QAAQ,SAAS,UAAU,GAChE,UACH;AAEJ;AAMO,SAAS,eAAe,EAAE,UAAU,OAAO,SAAS,GAAG,MAAM,GAAwB;AAC1F,QAAM,EAAE,MAAM,SAAS,UAAU,IAAI,WAAW;AAChD,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAe;AAAA,MACf,KAAK;AAAA,MACL,SAAS,CAAC,MAA2C;AACnD,kBAAU,CAAC;AACX,gBAAQ,CAAC,IAAI;AAAA,MACf;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ;AAMO,SAAS,cAAc,EAAE,UAAU,OAAO,GAAG,MAAM,GAAuB;AAC/E,QAAM,EAAE,UAAU,IAAI,WAAW;AACjC,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,KAAK;AAAA,MACJ,GAAI;AAAA;AAAA,EACP;AAEJ;AAUO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,MAAM,WAAW;AAAA,EACjB,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,EAAE,MAAM,SAAS,UAAU,IAAI,WAAW;AAChD,QAAM,EAAE,WAAW,KAAK,QAAQ,IAAI,YAAY,IAAI;AACpD,QAAM,EAAE,aAAa,OAAO,KAAK,IAAI,YAAY;AAAA,IAC/C;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,EACV,CAAC;AACD,QAAM,WAAW,cAAc,MAAM,EAAE,cAAc,eAAe,UAAU,CAAC;AAC/E,QAAM,aAAa,oBAAoB;AAAA,IACrC,SAAS;AAAA,IACT,WAAW,MAAM,QAAQ,KAAK;AAAA,IAC9B,SAAS,CAAC,SAAS;AAAA,EACrB,CAAC;AACD,MAAI,CAAC,UAAW,QAAO;AACvB,SACE,oBAAC,UACC;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,OAAO,SAAS;AAAA,MAC5B,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,KAAK,UAAU,aAAa,UAAU,YAAY,OAAO;AAAA,MACzD;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAI;AAAA,MAEL,8BAAC,yBAAsB,OAAO,YAAa,UAAS;AAAA;AAAA,EACtD,GACF;AAEJ;","names":[]}

package/dist/components/atomic/radio-group.js

@@ -4,7 +4,8 @@ import * as React from "react";
 import { cn } from "../../lib/cn.js";
 import { useControllableState } from "../../primitives/use-controllable-state.js";
 import { useRovingFocus } from "../../primitives/use-roving-focus.js";
-import { RADIO_GROUP_ITEM, RADIO_GROUP_ROOT } from "../../generated/radio-group.js";
+import { RADIO_GROUP_DOT, RADIO_GROUP_INDICATOR, RADIO_GROUP_ITEM, RADIO_GROUP_ROOT } from "../../generated/radio-group.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
 const RadioGroupContext = React.createContext(
   null
 );
@@ -91,14 +92,14 @@ function RadioGroupItem({
         "span",
         {
           "data-slot": "radio-group-indicator",
-          className: "relative flex items-center justify-center",
+          className: RADIO_GROUP_INDICATOR,
           children: /* @__PURE__ */ jsx(
             "svg",
             {
-              className: "fill-primary-ink absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2",
+              className: RADIO_GROUP_DOT,
               viewBox: "0 0 24 24",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" })
+              children: iconShapes("dot")
             }
           )
         }

package/dist/components/atomic/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atomic/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { useRovingFocus } from \"../../primitives/use-roving-focus\";\nimport { RADIO_GROUP_ITEM, RADIO_GROUP_ROOT } from \"../../generated/radio-group\";\n\ninterface RadioGroupContextValue {\n  value: string;\n  setValue: (next: string) => void;\n  register: (el: HTMLButtonElement | null) => number;\n  activeIndex: number;\n  setActiveIndex: (i: number) => void;\n}\n\nconst RadioGroupContext = React.createContext<RadioGroupContextValue | null>(\n  null,\n);\n\nexport interface RadioGroupProps\n  extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n}\n\nexport function RadioGroup({\n  className,\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  children,\n  onKeyDown,\n  ...props\n}: RadioGroupProps) {\n  const [current, setCurrent] = useControllableState<string>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n\n  const itemsRef = React.useRef<(HTMLButtonElement | null)[]>([]);\n  const [count, setCount] = React.useState(0);\n\n  const { activeIndex, setActiveIndex, onKeyDown: rovingKeyDown } =\n    useRovingFocus({ count, orientation: \"vertical\", loop: true });\n\n  const register = React.useCallback((el: HTMLButtonElement | null): number => {\n    const list = itemsRef.current;\n    let index = list.indexOf(el);\n    if (index === -1) {\n      index = list.length;\n      list[index] = el;\n      setCount(list.filter(Boolean).length);\n    }\n    return index;\n  }, []);\n\n  const ctx = React.useMemo<RadioGroupContextValue>(\n    () => ({ value: current, setValue: setCurrent, register, activeIndex, setActiveIndex }),\n    [current, setCurrent, register, activeIndex, setActiveIndex],\n  );\n\n  return (\n    <RadioGroupContext.Provider value={ctx}>\n      <div\n        data-slot=\"radio-group\"\n        role=\"radiogroup\"\n        className={cn(RADIO_GROUP_ROOT, className)}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          rovingKeyDown(e);\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n}\n\nexport interface RadioGroupItemProps\n  extends Omit<React.ComponentProps<\"button\">, \"value\"> {\n  value: string;\n}\n\nexport function RadioGroupItem({\n  className,\n  value,\n  disabled,\n  onClick,\n  ...props\n}: RadioGroupItemProps) {\n  const ctx = React.useContext(RadioGroupContext);\n  if (!ctx) throw new Error(\"RadioGroupItem must be used within a RadioGroup\");\n  const indexRef = React.useRef(-1);\n  const checked = ctx.value === value;\n\n  React.useEffect(() => {\n    if (checked) ctx.setActiveIndex(indexRef.current);\n  }, [checked]);\n\n  return (\n    <button\n      ref={(el) => {\n        indexRef.current = ctx.register(el);\n      }}\n      type=\"button\"\n      data-slot=\"radio-group-item\"\n      data-state={checked ? \"checked\" : \"unchecked\"}\n      role=\"radio\"\n      aria-checked={checked}\n      disabled={disabled}\n      tabIndex={indexRef.current === ctx.activeIndex ? 0 : -1}\n      className={cn(RADIO_GROUP_ITEM, className)}\n      onClick={(e) => {\n        onClick?.(e);\n        ctx.setValue(value);\n      }}\n      {...props}\n    >\n      {checked ? (\n        <span\n          data-slot=\"radio-group-indicator\"\n          className=\"relative flex items-center justify-center\"\n        >\n          <svg\n            className=\"fill-primary-ink absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2\"\n            viewBox=\"0 0 24 24\"\n            aria-hidden=\"true\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          </svg>\n        </span>\n      ) : null}\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/atomic/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { useRovingFocus } from \"../../primitives/use-roving-focus\";\nimport { RADIO_GROUP_DOT, RADIO_GROUP_INDICATOR, RADIO_GROUP_ITEM, RADIO_GROUP_ROOT } from \"../../generated/radio-group\";\nimport { iconShapes } from \"../../icons/icon-shapes\";\n\ninterface RadioGroupContextValue {\n  value: string;\n  setValue: (next: string) => void;\n  register: (el: HTMLButtonElement | null) => number;\n  activeIndex: number;\n  setActiveIndex: (i: number) => void;\n}\n\nconst RadioGroupContext = React.createContext<RadioGroupContextValue | null>(\n  null,\n);\n\nexport interface RadioGroupProps\n  extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n}\n\nexport function RadioGroup({\n  className,\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  children,\n  onKeyDown,\n  ...props\n}: RadioGroupProps) {\n  const [current, setCurrent] = useControllableState<string>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n\n  const itemsRef = React.useRef<(HTMLButtonElement | null)[]>([]);\n  const [count, setCount] = React.useState(0);\n\n  const { activeIndex, setActiveIndex, onKeyDown: rovingKeyDown } =\n    useRovingFocus({ count, orientation: \"vertical\", loop: true });\n\n  const register = React.useCallback((el: HTMLButtonElement | null): number => {\n    const list = itemsRef.current;\n    let index = list.indexOf(el);\n    if (index === -1) {\n      index = list.length;\n      list[index] = el;\n      setCount(list.filter(Boolean).length);\n    }\n    return index;\n  }, []);\n\n  const ctx = React.useMemo<RadioGroupContextValue>(\n    () => ({ value: current, setValue: setCurrent, register, activeIndex, setActiveIndex }),\n    [current, setCurrent, register, activeIndex, setActiveIndex],\n  );\n\n  return (\n    <RadioGroupContext.Provider value={ctx}>\n      <div\n        data-slot=\"radio-group\"\n        role=\"radiogroup\"\n        className={cn(RADIO_GROUP_ROOT, className)}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          rovingKeyDown(e);\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n}\n\nexport interface RadioGroupItemProps\n  extends Omit<React.ComponentProps<\"button\">, \"value\"> {\n  value: string;\n}\n\nexport function RadioGroupItem({\n  className,\n  value,\n  disabled,\n  onClick,\n  ...props\n}: RadioGroupItemProps) {\n  const ctx = React.useContext(RadioGroupContext);\n  if (!ctx) throw new Error(\"RadioGroupItem must be used within a RadioGroup\");\n  const indexRef = React.useRef(-1);\n  const checked = ctx.value === value;\n\n  React.useEffect(() => {\n    if (checked) ctx.setActiveIndex(indexRef.current);\n  }, [checked]);\n\n  return (\n    <button\n      ref={(el) => {\n        indexRef.current = ctx.register(el);\n      }}\n      type=\"button\"\n      data-slot=\"radio-group-item\"\n      data-state={checked ? \"checked\" : \"unchecked\"}\n      role=\"radio\"\n      aria-checked={checked}\n      disabled={disabled}\n      tabIndex={indexRef.current === ctx.activeIndex ? 0 : -1}\n      className={cn(RADIO_GROUP_ITEM, className)}\n      onClick={(e) => {\n        onClick?.(e);\n        ctx.setValue(value);\n      }}\n      {...props}\n    >\n      {checked ? (\n        <span\n          data-slot=\"radio-group-indicator\"\n          className={RADIO_GROUP_INDICATOR}\n        >\n          <svg\n            className={RADIO_GROUP_DOT}\n            viewBox=\"0 0 24 24\"\n            aria-hidden=\"true\"\n          >\n            {iconShapes(\"dot\")}\n          </svg>\n        </span>\n      ) : null}\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/atomic/section-descriptor.js

@@ -2,9 +2,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/cn.js";
 import { FIELD_TITLE, FIELD_DESCRIPTION } from "../../generated/field.js";
-const SECTION_DESCRIPTOR = "flex flex-col gap-2 rounded-lg border border-border bg-hover p-4 text-left";
+import { SECTION_DESCRIPTOR, SECTION_DESCRIPTOR_SUMMARY } from "../../generated/section-descriptor.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
 function InfoGlyph({ className }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -15,11 +16,7 @@ function InfoGlyph({ className }) {
       strokeLinejoin: "round",
       "aria-hidden": true,
       className: cn("size-4 shrink-0", className),
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
-        /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
-      ]
+      children: iconShapes("info")
     }
   );
 }
@@ -52,7 +49,7 @@ function SectionDescriptor({
               "data-slot": "section-descriptor-title",
               className: cn(
                 FIELD_TITLE,
-                "cursor-pointer list-none [&::-webkit-details-marker]:hidden"
+                SECTION_DESCRIPTOR_SUMMARY
               ),
               children: titleContent
             }

package/dist/components/atomic/section-descriptor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atomic/section-descriptor.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { FIELD_TITLE, FIELD_DESCRIPTION } from \"../../generated/field\";\n\n/**\n * `SectionDescriptor` — a static, always-visible block that explains a whole\n * feature (withdrawals, fund shares, an operator action). It reads as neutral body\n * copy, NOT a coloured alert: the title reuses `FIELD_TITLE`, the body reuses\n * `FIELD_DESCRIPTION`, inside a subtle bordered container. Content-agnostic — the\n * strings are injected by the caller.\n *\n * With `collapsible`, it renders as a native `<details>`/`<summary>` disclosure,\n * which carries keyboard support and find-in-page auto-expand for free.\n */\nconst SECTION_DESCRIPTOR =\n  \"flex flex-col gap-2 rounded-lg border border-border bg-hover p-4 text-left\";\n\n// lucide `info`, inlined per the kit's no-lucide-dep icon convention.\nfunction InfoGlyph({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      className={cn(\"size-4 shrink-0\", className)}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M12 16v-4\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n}\n\nexport interface SectionDescriptorProps extends Omit<\n  React.ComponentProps<\"section\">,\n  \"title\"\n> {\n  title: React.ReactNode;\n  /** Show the leading ⓘ mark. Defaults to true. */\n  icon?: boolean;\n  /** Render as a collapsible `<details>` disclosure. */\n  collapsible?: boolean;\n  /** Initial open state when `collapsible`. */\n  defaultOpen?: boolean;\n}\n\nexport function SectionDescriptor({\n  title,\n  icon = true,\n  collapsible = false,\n  defaultOpen = false,\n  className,\n  children,\n  ...props\n}: SectionDescriptorProps) {\n  const titleContent = (\n    <>\n      {icon && <InfoGlyph className=\"text-accent-debug\" />}\n      <span>{title}</span>\n    </>\n  );\n\n  if (collapsible) {\n    return (\n      <details\n        data-slot=\"section-descriptor\"\n        data-collapsible=\"\"\n        open={defaultOpen}\n        className={cn(SECTION_DESCRIPTOR, className)}\n        {...(props as Record<string, unknown>)}\n      >\n        <summary\n          data-slot=\"section-descriptor-title\"\n          className={cn(\n            FIELD_TITLE,\n            \"cursor-pointer list-none [&::-webkit-details-marker]:hidden\",\n          )}\n        >\n          {titleContent}\n        </summary>\n        <p\n          data-slot=\"section-descriptor-body\"\n          className={cn(FIELD_DESCRIPTION, \"mt-2\")}\n        >\n          {children}\n        </p>\n      </details>\n    );\n  }\n\n  return (\n    <section\n      data-slot=\"section-descriptor\"\n      className={cn(SECTION_DESCRIPTOR, className)}\n      {...props}\n    >\n      <div data-slot=\"section-descriptor-title\" className={FIELD_TITLE}>\n        {titleContent}\n      </div>\n      <p data-slot=\"section-descriptor-body\" className={FIELD_DESCRIPTION}>\n        {children}\n      </p>\n    </section>\n  );\n}\n"],"mappings":"AAoBI,SAwCA,UA9BE,KAVF;AApBJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,aAAa,yBAAyB;AAY/C,MAAM,qBACJ;AAGF,SAAS,UAAU,EAAE,UAAU,GAA2B;AACxD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MACX,WAAW,GAAG,mBAAmB,SAAS;AAAA,MAE1C;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,QAC/B,oBAAC,UAAK,GAAE,aAAY;AAAA,QACpB,oBAAC,UAAK,GAAE,aAAY;AAAA;AAAA;AAAA,EACtB;AAEJ;AAeO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,eACJ,iCACG;AAAA,YAAQ,oBAAC,aAAU,WAAU,qBAAoB;AAAA,IAClD,oBAAC,UAAM,iBAAM;AAAA,KACf;AAGF,MAAI,aAAa;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,oBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,WAAW,GAAG,oBAAoB,SAAS;AAAA,QAC1C,GAAI;AAAA,QAEL;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAW,GAAG,mBAAmB,MAAM;AAAA,cAEtC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oBAAoB,SAAS;AAAA,MAC1C,GAAG;AAAA,MAEJ;AAAA,4BAAC,SAAI,aAAU,4BAA2B,WAAW,aAClD,wBACH;AAAA,QACA,oBAAC,OAAE,aAAU,2BAA0B,WAAW,mBAC/C,UACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/atomic/section-descriptor.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { FIELD_TITLE, FIELD_DESCRIPTION } from \"../../generated/field\";\nimport { SECTION_DESCRIPTOR, SECTION_DESCRIPTOR_SUMMARY } from \"../../generated/section-descriptor\";\nimport { iconShapes } from \"../../icons/icon-shapes\";\n\n/**\n * `SectionDescriptor` — a static, always-visible block that explains a whole\n * feature (withdrawals, fund shares, an operator action). It reads as neutral body\n * copy, NOT a coloured alert: the title reuses `FIELD_TITLE`, the body reuses\n * `FIELD_DESCRIPTION`, inside a subtle bordered container. Content-agnostic — the\n * strings are injected by the caller.\n *\n * With `collapsible`, it renders as a native `<details>`/`<summary>` disclosure,\n * which carries keyboard support and find-in-page auto-expand for free.\n */\nfunction InfoGlyph({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      className={cn(\"size-4 shrink-0\", className)}\n    >\n      {iconShapes(\"info\")}\n    </svg>\n  );\n}\n\nexport interface SectionDescriptorProps extends Omit<\n  React.ComponentProps<\"section\">,\n  \"title\"\n> {\n  title: React.ReactNode;\n  /** Show the leading ⓘ mark. Defaults to true. */\n  icon?: boolean;\n  /** Render as a collapsible `<details>` disclosure. */\n  collapsible?: boolean;\n  /** Initial open state when `collapsible`. */\n  defaultOpen?: boolean;\n}\n\nexport function SectionDescriptor({\n  title,\n  icon = true,\n  collapsible = false,\n  defaultOpen = false,\n  className,\n  children,\n  ...props\n}: SectionDescriptorProps) {\n  const titleContent = (\n    <>\n      {icon && <InfoGlyph className=\"text-accent-debug\" />}\n      <span>{title}</span>\n    </>\n  );\n\n  if (collapsible) {\n    return (\n      <details\n        data-slot=\"section-descriptor\"\n        data-collapsible=\"\"\n        open={defaultOpen}\n        className={cn(SECTION_DESCRIPTOR, className)}\n        {...(props as Record<string, unknown>)}\n      >\n        <summary\n          data-slot=\"section-descriptor-title\"\n          className={cn(\n            FIELD_TITLE,\n            SECTION_DESCRIPTOR_SUMMARY,\n          )}\n        >\n          {titleContent}\n        </summary>\n        <p\n          data-slot=\"section-descriptor-body\"\n          className={cn(FIELD_DESCRIPTION, \"mt-2\")}\n        >\n          {children}\n        </p>\n      </details>\n    );\n  }\n\n  return (\n    <section\n      data-slot=\"section-descriptor\"\n      className={cn(SECTION_DESCRIPTOR, className)}\n      {...props}\n    >\n      <div data-slot=\"section-descriptor-title\" className={FIELD_TITLE}>\n        {titleContent}\n      </div>\n      <p data-slot=\"section-descriptor-body\" className={FIELD_DESCRIPTION}>\n        {children}\n      </p>\n    </section>\n  );\n}\n"],"mappings":"AAkBI,SAsCA,UAtCA,KAsCA,YAtCA;AAlBJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,aAAa,yBAAyB;AAC/C,SAAS,oBAAoB,kCAAkC;AAC/D,SAAS,kBAAkB;AAY3B,SAAS,UAAU,EAAE,UAAU,GAA2B;AACxD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MACX,WAAW,GAAG,mBAAmB,SAAS;AAAA,MAEzC,qBAAW,MAAM;AAAA;AAAA,EACpB;AAEJ;AAeO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,eACJ,iCACG;AAAA,YAAQ,oBAAC,aAAU,WAAU,qBAAoB;AAAA,IAClD,oBAAC,UAAM,iBAAM;AAAA,KACf;AAGF,MAAI,aAAa;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,oBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,WAAW,GAAG,oBAAoB,SAAS;AAAA,QAC1C,GAAI;AAAA,QAEL;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAW,GAAG,mBAAmB,MAAM;AAAA,cAEtC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oBAAoB,SAAS;AAAA,MAC1C,GAAG;AAAA,MAEJ;AAAA,4BAAC,SAAI,aAAU,4BAA2B,WAAW,aAClD,wBACH;AAAA,QACA,oBAAC,OAAE,aAAU,2BAA0B,WAAW,mBAC/C,UACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/atomic/select-listbox.js

@@ -1,7 +1,7 @@
 "use client";
 import * as React from "react";
 import { focusCandidates } from "../../primitives/focus-scope.js";
-const TYPEAHEAD_MS = 500;
+import { SELECT_TYPEAHEAD_MS } from "../../generated/select.js";
 function listOptions(list) {
   return Array.from(list?.querySelectorAll("[role='option']:not([data-disabled])") ?? []);
 }
@@ -37,7 +37,7 @@ function useListboxKeys(listRef) {
       if (event.key.length !== 1 || event.key === " " || event.ctrlKey || event.metaKey || event.altKey) return false;
       const now = Date.now();
       const t = typed.current;
-      t.text = now - t.at > TYPEAHEAD_MS ? event.key.toLowerCase() : t.text + event.key.toLowerCase();
+      t.text = now - t.at > SELECT_TYPEAHEAD_MS ? event.key.toLowerCase() : t.text + event.key.toLowerCase();
       t.at = now;
       const repeated = t.text.split("").every((c) => c === t.text[0]);
       const query = repeated ? t.text[0] : t.text;

package/dist/components/atomic/select-listbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atomic/select-listbox.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { focusCandidates } from \"../../primitives/focus-scope\";\n\n// Keyboard and focus for `SelectContent`, kept out of the component itself.\n// The options are read from the DOM, never counted from `children`: a\n// `SelectGroup`, a `SelectLabel` or an item behind a component of the\n// caller's is invisible to `Children`, and an index counted there points at\n// the wrong row.\n\nconst TYPEAHEAD_MS = 500;\n\nexport function listOptions(list: HTMLElement | null): HTMLElement[] {\n  return Array.from(list?.querySelectorAll<HTMLElement>(\"[role='option']:not([data-disabled])\") ?? []);\n}\n\n/**\n * Opening lands on the chosen option (else the first), as a native select\n * does. Focus without scrolling — the page must not jump on the frame the\n * list is placed — then the list alone brings that option into view.\n */\nexport function landOnChosen(list: HTMLElement | null): void {\n  const options = listOptions(list);\n  const target = options.find((o) => o.getAttribute(\"aria-selected\") === \"true\") ?? options[0];\n  if (!target) return;\n  target.focus({ preventScroll: true });\n  target.scrollIntoView?.({ block: \"nearest\" });\n}\n\n/** Arrows, Home, End and type-ahead over the options; `true` when the key was one of them. */\nexport function useListboxKeys(listRef: React.RefObject<HTMLElement | null>) {\n  const typed = React.useRef({ text: \"\", at: 0 });\n  return React.useCallback(\n    (event: React.KeyboardEvent): boolean => {\n      const options = listOptions(listRef.current);\n      if (options.length === 0) return false;\n      const current = options.indexOf(document.activeElement as HTMLElement);\n      const move = (index: number) => {\n        event.preventDefault();\n        // A plain focus: the browser scrolls the list to follow the arrows.\n        options[(index + options.length) % options.length]?.focus();\n        return true;\n      };\n      switch (event.key) {\n        case \"ArrowDown\":\n          return move(current + 1);\n        case \"ArrowUp\":\n          return move(current < 0 ? -1 : current - 1);\n        case \"Home\":\n          return move(0);\n        case \"End\":\n          return move(options.length - 1);\n      }\n      // Space chooses (the option's own handler), as Enter does: it is not type-ahead.\n      if (event.key.length !== 1 || event.key === \" \" || event.ctrlKey || event.metaKey || event.altKey) return false;\n      const now = Date.now();\n      const t = typed.current;\n      t.text = now - t.at > TYPEAHEAD_MS ? event.key.toLowerCase() : t.text + event.key.toLowerCase();\n      t.at = now;\n      // One letter repeated cycles through the options that start with it.\n      const repeated = t.text.split(\"\").every((c) => c === t.text[0]);\n      const query = repeated ? t.text[0]! : t.text;\n      const from = repeated ? current + 1 : Math.max(current, 0);\n      for (let i = 0; i < options.length; i++) {\n        const index = (from + i) % options.length;\n        if ((options[index]!.textContent ?? \"\").trim().toLowerCase().startsWith(query)) return move(index);\n      }\n      event.preventDefault();\n      return true;\n    },\n    [listRef],\n  );\n}\n\n/**\n * Tab from the open list goes on from the trigger. The list is portaled to the\n * end of the document, so the browser's own Tab would leave from there: focus\n * goes back to the trigger first and the browser's Tab carries on from it.\n * Inside a modal (a Dialog, a Drawer) that is not enough — the trap listens on\n * the modal, never sees a key from the portal, and would let a Tab from its\n * last field out — so there the next field is found here, wrapping as the\n * trap would.\n */\nexport function tabFromTrigger(event: React.KeyboardEvent, trigger: HTMLElement | null): void {\n  if (!trigger) return;\n  const modal = trigger.closest<HTMLElement>(\"[aria-modal='true']\");\n  if (!modal) {\n    trigger.focus();\n    return;\n  }\n  event.preventDefault();\n  const stops = focusCandidates(modal).filter((el) => el === trigger || el.offsetWidth > 0 || el.offsetHeight > 0);\n  const at = stops.indexOf(trigger);\n  const next = stops[(at + (event.shiftKey ? -1 : 1) + stops.length) % stops.length];\n  (at < 0 || !next ? trigger : next).focus();\n}\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAQhC,MAAM,eAAe;AAEd,SAAS,YAAY,MAAyC;AACnE,SAAO,MAAM,KAAK,MAAM,iBAA8B,sCAAsC,KAAK,CAAC,CAAC;AACrG;AAOO,SAAS,aAAa,MAAgC;AAC3D,QAAM,UAAU,YAAY,IAAI;AAChC,QAAM,SAAS,QAAQ,KAAK,CAAC,MAAM,EAAE,aAAa,eAAe,MAAM,MAAM,KAAK,QAAQ,CAAC;AAC3F,MAAI,CAAC,OAAQ;AACb,SAAO,MAAM,EAAE,eAAe,KAAK,CAAC;AACpC,SAAO,iBAAiB,EAAE,OAAO,UAAU,CAAC;AAC9C;AAGO,SAAS,eAAe,SAA8C;AAC3E,QAAM,QAAQ,MAAM,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,CAAC;AAC9C,SAAO,MAAM;AAAA,IACX,CAAC,UAAwC;AACvC,YAAM,UAAU,YAAY,QAAQ,OAAO;AAC3C,UAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,YAAM,UAAU,QAAQ,QAAQ,SAAS,aAA4B;AACrE,YAAM,OAAO,CAAC,UAAkB;AAC9B,cAAM,eAAe;AAErB,iBAAS,QAAQ,QAAQ,UAAU,QAAQ,MAAM,GAAG,MAAM;AAC1D,eAAO;AAAA,MACT;AACA,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AACH,iBAAO,KAAK,UAAU,CAAC;AAAA,QACzB,KAAK;AACH,iBAAO,KAAK,UAAU,IAAI,KAAK,UAAU,CAAC;AAAA,QAC5C,KAAK;AACH,iBAAO,KAAK,CAAC;AAAA,QACf,KAAK;AACH,iBAAO,KAAK,QAAQ,SAAS,CAAC;AAAA,MAClC;AAEA,UAAI,MAAM,IAAI,WAAW,KAAK,MAAM,QAAQ,OAAO,MAAM,WAAW,MAAM,WAAW,MAAM,OAAQ,QAAO;AAC1G,YAAM,MAAM,KAAK,IAAI;AACrB,YAAM,IAAI,MAAM;AAChB,QAAE,OAAO,MAAM,EAAE,KAAK,eAAe,MAAM,IAAI,YAAY,IAAI,EAAE,OAAO,MAAM,IAAI,YAAY;AAC9F,QAAE,KAAK;AAEP,YAAM,WAAW,EAAE,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,MAAM,MAAM,EAAE,KAAK,CAAC,CAAC;AAC9D,YAAM,QAAQ,WAAW,EAAE,KAAK,CAAC,IAAK,EAAE;AACxC,YAAM,OAAO,WAAW,UAAU,IAAI,KAAK,IAAI,SAAS,CAAC;AACzD,eAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,cAAM,SAAS,OAAO,KAAK,QAAQ;AACnC,aAAK,QAAQ,KAAK,EAAG,eAAe,IAAI,KAAK,EAAE,YAAY,EAAE,WAAW,KAAK,EAAG,QAAO,KAAK,KAAK;AAAA,MACnG;AACA,YAAM,eAAe;AACrB,aAAO;AAAA,IACT;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AACF;AAWO,SAAS,eAAe,OAA4B,SAAmC;AAC5F,MAAI,CAAC,QAAS;AACd,QAAM,QAAQ,QAAQ,QAAqB,qBAAqB;AAChE,MAAI,CAAC,OAAO;AACV,YAAQ,MAAM;AACd;AAAA,EACF;AACA,QAAM,eAAe;AACrB,QAAM,QAAQ,gBAAgB,KAAK,EAAE,OAAO,CAAC,OAAO,OAAO,WAAW,GAAG,cAAc,KAAK,GAAG,eAAe,CAAC;AAC/G,QAAM,KAAK,MAAM,QAAQ,OAAO;AAChC,QAAM,OAAO,OAAO,MAAM,MAAM,WAAW,KAAK,KAAK,MAAM,UAAU,MAAM,MAAM;AACjF,GAAC,KAAK,KAAK,CAAC,OAAO,UAAU,MAAM,MAAM;AAC3C;","names":[]}
+{"version":3,"sources":["../../../src/components/atomic/select-listbox.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { focusCandidates } from \"../../primitives/focus-scope\";\nimport { SELECT_TYPEAHEAD_MS } from \"../../generated/select\";\n\n// Keyboard and focus for `SelectContent`, kept out of the component itself.\n// The options are read from the DOM, never counted from `children`: a\n// `SelectGroup`, a `SelectLabel` or an item behind a component of the\n// caller's is invisible to `Children`, and an index counted there points at\n// the wrong row.\n\n\nexport function listOptions(list: HTMLElement | null): HTMLElement[] {\n  return Array.from(list?.querySelectorAll<HTMLElement>(\"[role='option']:not([data-disabled])\") ?? []);\n}\n\n/**\n * Opening lands on the chosen option (else the first), as a native select\n * does. Focus without scrolling — the page must not jump on the frame the\n * list is placed — then the list alone brings that option into view.\n */\nexport function landOnChosen(list: HTMLElement | null): void {\n  const options = listOptions(list);\n  const target = options.find((o) => o.getAttribute(\"aria-selected\") === \"true\") ?? options[0];\n  if (!target) return;\n  target.focus({ preventScroll: true });\n  target.scrollIntoView?.({ block: \"nearest\" });\n}\n\n/** Arrows, Home, End and type-ahead over the options; `true` when the key was one of them. */\nexport function useListboxKeys(listRef: React.RefObject<HTMLElement | null>) {\n  const typed = React.useRef({ text: \"\", at: 0 });\n  return React.useCallback(\n    (event: React.KeyboardEvent): boolean => {\n      const options = listOptions(listRef.current);\n      if (options.length === 0) return false;\n      const current = options.indexOf(document.activeElement as HTMLElement);\n      const move = (index: number) => {\n        event.preventDefault();\n        // A plain focus: the browser scrolls the list to follow the arrows.\n        options[(index + options.length) % options.length]?.focus();\n        return true;\n      };\n      switch (event.key) {\n        case \"ArrowDown\":\n          return move(current + 1);\n        case \"ArrowUp\":\n          return move(current < 0 ? -1 : current - 1);\n        case \"Home\":\n          return move(0);\n        case \"End\":\n          return move(options.length - 1);\n      }\n      // Space chooses (the option's own handler), as Enter does: it is not type-ahead.\n      if (event.key.length !== 1 || event.key === \" \" || event.ctrlKey || event.metaKey || event.altKey) return false;\n      const now = Date.now();\n      const t = typed.current;\n      t.text = now - t.at > SELECT_TYPEAHEAD_MS ? event.key.toLowerCase() : t.text + event.key.toLowerCase();\n      t.at = now;\n      // One letter repeated cycles through the options that start with it.\n      const repeated = t.text.split(\"\").every((c) => c === t.text[0]);\n      const query = repeated ? t.text[0]! : t.text;\n      const from = repeated ? current + 1 : Math.max(current, 0);\n      for (let i = 0; i < options.length; i++) {\n        const index = (from + i) % options.length;\n        if ((options[index]!.textContent ?? \"\").trim().toLowerCase().startsWith(query)) return move(index);\n      }\n      event.preventDefault();\n      return true;\n    },\n    [listRef],\n  );\n}\n\n/**\n * Tab from the open list goes on from the trigger. The list is portaled to the\n * end of the document, so the browser's own Tab would leave from there: focus\n * goes back to the trigger first and the browser's Tab carries on from it.\n * Inside a modal (a Dialog, a Drawer) that is not enough — the trap listens on\n * the modal, never sees a key from the portal, and would let a Tab from its\n * last field out — so there the next field is found here, wrapping as the\n * trap would.\n */\nexport function tabFromTrigger(event: React.KeyboardEvent, trigger: HTMLElement | null): void {\n  if (!trigger) return;\n  const modal = trigger.closest<HTMLElement>(\"[aria-modal='true']\");\n  if (!modal) {\n    trigger.focus();\n    return;\n  }\n  event.preventDefault();\n  const stops = focusCandidates(modal).filter((el) => el === trigger || el.offsetWidth > 0 || el.offsetHeight > 0);\n  const at = stops.indexOf(trigger);\n  const next = stops[(at + (event.shiftKey ? -1 : 1) + stops.length) % stops.length];\n  (at < 0 || !next ? trigger : next).focus();\n}\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AAS7B,SAAS,YAAY,MAAyC;AACnE,SAAO,MAAM,KAAK,MAAM,iBAA8B,sCAAsC,KAAK,CAAC,CAAC;AACrG;AAOO,SAAS,aAAa,MAAgC;AAC3D,QAAM,UAAU,YAAY,IAAI;AAChC,QAAM,SAAS,QAAQ,KAAK,CAAC,MAAM,EAAE,aAAa,eAAe,MAAM,MAAM,KAAK,QAAQ,CAAC;AAC3F,MAAI,CAAC,OAAQ;AACb,SAAO,MAAM,EAAE,eAAe,KAAK,CAAC;AACpC,SAAO,iBAAiB,EAAE,OAAO,UAAU,CAAC;AAC9C;AAGO,SAAS,eAAe,SAA8C;AAC3E,QAAM,QAAQ,MAAM,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,CAAC;AAC9C,SAAO,MAAM;AAAA,IACX,CAAC,UAAwC;AACvC,YAAM,UAAU,YAAY,QAAQ,OAAO;AAC3C,UAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,YAAM,UAAU,QAAQ,QAAQ,SAAS,aAA4B;AACrE,YAAM,OAAO,CAAC,UAAkB;AAC9B,cAAM,eAAe;AAErB,iBAAS,QAAQ,QAAQ,UAAU,QAAQ,MAAM,GAAG,MAAM;AAC1D,eAAO;AAAA,MACT;AACA,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AACH,iBAAO,KAAK,UAAU,CAAC;AAAA,QACzB,KAAK;AACH,iBAAO,KAAK,UAAU,IAAI,KAAK,UAAU,CAAC;AAAA,QAC5C,KAAK;AACH,iBAAO,KAAK,CAAC;AAAA,QACf,KAAK;AACH,iBAAO,KAAK,QAAQ,SAAS,CAAC;AAAA,MAClC;AAEA,UAAI,MAAM,IAAI,WAAW,KAAK,MAAM,QAAQ,OAAO,MAAM,WAAW,MAAM,WAAW,MAAM,OAAQ,QAAO;AAC1G,YAAM,MAAM,KAAK,IAAI;AACrB,YAAM,IAAI,MAAM;AAChB,QAAE,OAAO,MAAM,EAAE,KAAK,sBAAsB,MAAM,IAAI,YAAY,IAAI,EAAE,OAAO,MAAM,IAAI,YAAY;AACrG,QAAE,KAAK;AAEP,YAAM,WAAW,EAAE,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,MAAM,MAAM,EAAE,KAAK,CAAC,CAAC;AAC9D,YAAM,QAAQ,WAAW,EAAE,KAAK,CAAC,IAAK,EAAE;AACxC,YAAM,OAAO,WAAW,UAAU,IAAI,KAAK,IAAI,SAAS,CAAC;AACzD,eAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,cAAM,SAAS,OAAO,KAAK,QAAQ;AACnC,aAAK,QAAQ,KAAK,EAAG,eAAe,IAAI,KAAK,EAAE,YAAY,EAAE,WAAW,KAAK,EAAG,QAAO,KAAK,KAAK;AAAA,MACnG;AACA,YAAM,eAAe;AACrB,aAAO;AAAA,IACT;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AACF;AAWO,SAAS,eAAe,OAA4B,SAAmC;AAC5F,MAAI,CAAC,QAAS;AACd,QAAM,QAAQ,QAAQ,QAAqB,qBAAqB;AAChE,MAAI,CAAC,OAAO;AACV,YAAQ,MAAM;AACd;AAAA,EACF;AACA,QAAM,eAAe;AACrB,QAAM,QAAQ,gBAAgB,KAAK,EAAE,OAAO,CAAC,OAAO,OAAO,WAAW,GAAG,cAAc,KAAK,GAAG,eAAe,CAAC;AAC/G,QAAM,KAAK,MAAM,QAAQ,OAAO;AAChC,QAAM,OAAO,OAAO,MAAM,MAAM,WAAW,KAAK,KAAK,MAAM,UAAU,MAAM,MAAM;AACjF,GAAC,KAAK,KAAK,CAAC,OAAO,UAAU,MAAM,MAAM;AAC3C;","names":[]}

package/dist/components/atomic/select.js

@@ -2,16 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/cn.js";
-import {
-  SELECT_CONTENT_BOUNDS,
-  SELECT_CONTENT_SURFACE,
-  SELECT_ITEM,
-  SELECT_LABEL,
-  SELECT_LIST,
-  SELECT_SEPARATOR,
-  SELECT_TRIGGER_BASE,
-  selectTriggerSizeClasses
-} from "../../generated/select.js";
+import { SELECT_CHEVRON, SELECT_CONTENT_BOUNDS, SELECT_CONTENT_SURFACE, SELECT_ITEM, SELECT_ITEM_INDICATOR, SELECT_LABEL, SELECT_LIST, SELECT_SEPARATOR, SELECT_TRIGGER_BASE, selectTriggerSizeClasses } from "../../generated/select.js";
 import { useControllableState } from "../../primitives/use-controllable-state.js";
 import { useFloating } from "../../primitives/use-floating.js";
 import { DismissableLayerScope, useDismissableLayer } from "../../primitives/dismissable-layer.js";
@@ -23,6 +14,7 @@ import { markLabelable } from "../../primitives/labelable.js";
 import { useFieldControlId } from "./field-context.js";
 import { SelectChevron } from "../../icons/select-chevron.js";
 import { landOnChosen, tabFromTrigger, useListboxKeys } from "./select-listbox.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
 const SelectContext = React.createContext(null);
 function useSelect() {
   const ctx = React.useContext(SelectContext);
@@ -154,7 +146,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(SelectChevron, { className: "size-4 opacity-50" })
+        /* @__PURE__ */ jsx(SelectChevron, { className: SELECT_CHEVRON })
       ]
     }
   );
@@ -282,7 +274,7 @@ function SelectItem({ className, value, textValue, children, ...props }) {
       className: cn(SELECT_ITEM, className),
       ...props,
       children: [
-        selected ? /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(
+        selected ? /* @__PURE__ */ jsx("span", { className: SELECT_ITEM_INDICATOR, children: /* @__PURE__ */ jsx(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -296,7 +288,7 @@ function SelectItem({ className, value, textValue, children, ...props }) {
             strokeLinejoin: "round",
             className: "size-4",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+            children: iconShapes("check")
           }
         ) }) : null,
         /* @__PURE__ */ jsx("span", { children })

package/dist/components/atomic/select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atomic/select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  SELECT_CONTENT_BOUNDS,\n  SELECT_CONTENT_SURFACE,\n  SELECT_ITEM,\n  SELECT_LABEL,\n  SELECT_LIST,\n  SELECT_SEPARATOR,\n  SELECT_TRIGGER_BASE,\n  selectTriggerSizeClasses,\n  type SelectTriggerSize,\n} from \"../../generated/select\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { useFloating } from \"../../primitives/use-floating\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../../primitives/dismissable-layer\";\nimport { usePresence } from \"../../primitives/presence\";\nimport { mergeRefs } from \"../../primitives/merge-refs\";\nimport { Portal } from \"../../primitives/portal\";\nimport { walkElements } from \"../../primitives/walk-elements\";\nimport { markLabelable } from \"../../primitives/labelable\";\nimport { useFieldControlId } from \"./field-context\";\nimport { SelectChevron } from \"../../icons/select-chevron\";\nimport { landOnChosen, tabFromTrigger, useListboxKeys } from \"./select-listbox\";\n\nexport type { SelectTriggerSize };\n\ninterface SelectContextValue {\n  value: string;\n  resetValue: string | undefined;\n  setValue: (next: string) => void;\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  /**\n   * Closes the list. `restoreFocus`: hand focus back to the trigger — after a\n   * key or a choice, never after a click elsewhere, where it would land on the\n   * trigger for a moment and fire its blur (a field's validation) on the way out.\n   */\n  close: (restoreFocus: boolean) => void;\n  /** Set by `close(true)`, read once the list is gone. */\n  restoreFocusRef: React.RefObject<boolean>;\n  anchorRef: React.RefObject<HTMLElement | null>;\n  /** The listbox's id, for the trigger's `aria-controls`. */\n  contentId: string;\n  /** What `SelectValue` shows for a value: the matching `SelectItem`'s children. */\n  labelOf: (value: string) => string;\n  registerLabel: (value: string, label: string) => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue | null>(null);\n\nfunction useSelect(): SelectContextValue {\n  const ctx = React.useContext(SelectContext);\n  if (!ctx) throw new Error(\"Select parts must be used within <Select>\");\n  return ctx;\n}\n\nexport interface SelectProps {\n  value?: string;\n  defaultValue?: string;\n  /** What a reset would put back: its option is marked, beneath the chosen one's mark. */\n  resetValue?: string;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function Select({\n  value,\n  defaultValue = \"\",\n  resetValue,\n  onValueChange,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: SelectProps) {\n  const [currentValue, setValue] = useControllableState<string>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const anchorRef = React.useRef<HTMLElement | null>(null);\n  const contentId = React.useId();\n  const restoreFocusRef = React.useRef(false);\n  const close = React.useCallback(\n    (restoreFocus: boolean) => {\n      restoreFocusRef.current = restoreFocus;\n      setOpen(false);\n    },\n    [setOpen],\n  );\n  // The items live in a closed popover, so they are not mounted when the\n  // trigger first renders — on the server least of all. Their labels are read\n  // off the element tree instead; items hidden behind a component of the\n  // caller's register once they have mounted (i.e. after the first open), and\n  // a label learnt that way re-renders the trigger once.\n  const declared = React.useMemo(() => collectItemLabels(children), [children]);\n  const mounted = React.useRef(new Map<string, string>());\n  const [, bump] = React.useReducer((n: number) => n + 1, 0);\n  const labelOf = (v: string) => declared.get(v) ?? mounted.current.get(v) ?? v;\n  const registerLabel = React.useCallback(\n    (v: string, label: string) => {\n      if (mounted.current.get(v) === label) return;\n      mounted.current.set(v, label);\n      if (!declared.has(v)) bump();\n    },\n    [declared],\n  );\n  return (\n    <SelectContext.Provider\n      value={{\n        value: currentValue,\n        resetValue,\n        setValue,\n        open: isOpen,\n        setOpen,\n        close,\n        restoreFocusRef,\n        anchorRef,\n        contentId,\n        labelOf,\n        registerLabel,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n}\n\nfunction collectItemLabels(node: React.ReactNode): Map<string, string> {\n  const labels = new Map<string, string>();\n  walkElements(node, (element) => {\n    if (element.type !== SelectItem) return true;\n    const { value, textValue, children } = element.props as Partial<SelectItemProps>;\n    if (typeof value === \"string\") labels.set(value, itemLabel(value, textValue, children));\n    return false;\n  });\n  return labels;\n}\n\n/**\n * What the trigger shows for an item: its `textValue`, else the text of its\n * children. Text, not the children themselves — an item's markup rendered a\n * second time in the trigger would duplicate any id inside it.\n */\nfunction itemLabel(value: string, textValue: string | undefined, children: unknown): string {\n  return textValue ?? (textOf(children).trim() || value);\n}\n\nfunction textOf(node: unknown): string {\n  if (typeof node === \"string\" || typeof node === \"number\") return String(node);\n  if (Array.isArray(node)) return node.map(textOf).join(\"\");\n  if (React.isValidElement<{ children?: unknown }>(node)) return textOf(node.props.children);\n  return \"\";\n}\n\nexport interface SelectTriggerProps extends React.ComponentProps<\"button\"> {\n  size?: SelectTriggerSize;\n}\n\nexport function SelectTrigger({\n  className,\n  size = \"md\",\n  onClick,\n  onKeyDown,\n  children,\n  id,\n  ...props\n}: SelectTriggerProps) {\n  const { open, setOpen, close, anchorRef, contentId } = useSelect();\n  return (\n    <button\n      type=\"button\"\n      role=\"combobox\"\n      id={useFieldControlId(id)}\n      data-slot=\"select-trigger\"\n      data-size={size}\n      data-state={open ? \"open\" : \"closed\"}\n      aria-haspopup=\"listbox\"\n      aria-expanded={open}\n      aria-controls={open ? contentId : undefined}\n      ref={anchorRef as React.Ref<HTMLButtonElement>}\n      onClick={(e) => {\n        onClick?.(e);\n        if (open) close(true);\n        else setOpen(true);\n      }}\n      onKeyDown={(e) => {\n        onKeyDown?.(e);\n        // A native select opens on the arrows too; Enter and Space already click the button.\n        if (!e.defaultPrevented && !open && (e.key === \"ArrowDown\" || e.key === \"ArrowUp\")) {\n          e.preventDefault();\n          setOpen(true);\n        }\n      }}\n      className={cn(\n        // The placeholder mark is on `SelectValue`'s span, not on this button.\n        SELECT_TRIGGER_BASE,\n        selectTriggerSizeClasses[size],\n        className,\n      )}\n      {...(props as Record<string, unknown>)}\n    >\n      {children}\n      <SelectChevron className=\"size-4 opacity-50\" />\n    </button>\n  );\n}\n\nmarkLabelable(SelectTrigger);\n\nexport interface SelectValueProps extends React.ComponentProps<\"span\"> {\n  placeholder?: string;\n}\n\n/**\n * The chosen option's label — the `textValue` of the `SelectItem` whose `value`\n * matches, else the text of its children — or `placeholder` while nothing is\n * chosen. `children`, when given,\n * replace the label outright.\n */\nexport function SelectValue({ className, placeholder, children, ...props }: SelectValueProps) {\n  const { value, labelOf } = useSelect();\n  const isEmpty = value === \"\";\n  return (\n    <span\n      data-slot=\"select-value\"\n      {...(isEmpty ? { \"data-placeholder\": \"true\" } : {})}\n      className={className}\n      {...(props as Record<string, unknown>)}\n    >\n      {isEmpty ? placeholder : (children ?? labelOf(value))}\n    </span>\n  );\n}\n\nexport interface SelectContentProps extends React.ComponentProps<\"div\"> {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  align?: \"start\" | \"center\" | \"end\";\n  sideOffset?: number;\n}\n\nexport function SelectContent({\n  className,\n  side: sideProp = \"bottom\",\n  align = \"start\",\n  sideOffset = 4,\n  children,\n  ...props\n}: SelectContentProps) {\n  const { open, setOpen, close, restoreFocusRef, anchorRef, contentId } = useSelect();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const listRef = React.useRef<HTMLDivElement | null>(null);\n  const [name, setName] = React.useState<{ \"aria-labelledby\"?: string; \"aria-label\"?: string }>({});\n  // Before placement measures the list: the trigger's width as\n  // `--select-trigger-width` (the floor of `SELECT_CONTENT_BOUNDS`), written to\n  // the element like the floating offset, and the list's name — the trigger's\n  // label, as the combobox is named.\n  React.useLayoutEffect(() => {\n    const anchor = anchorRef.current;\n    if (!open || !(anchor instanceof HTMLElement)) return;\n    listRef.current?.style.setProperty(\"--select-trigger-width\", `${anchor.offsetWidth}px`);\n    setName(listName(anchor));\n  }, [open, anchorRef]);\n  const { floatingRef, style, side } = useFloating({\n    anchorRef,\n    open,\n    side: sideProp,\n    align,\n    offset: sideOffset,\n  });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: (event) => close(event.type === \"keydown\"),\n    exclude: [anchorRef],\n  });\n  const onListKey = useListboxKeys(listRef);\n  React.useEffect(() => {\n    if (open) landOnChosen(listRef.current);\n  }, [open]);\n  React.useEffect(() => {\n    if (open || !restoreFocusRef.current) return;\n    restoreFocusRef.current = false;\n    anchorRef.current?.focus();\n  }, [open, anchorRef, restoreFocusRef]);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <div\n        role=\"listbox\"\n        id={contentId}\n        {...name}\n        data-slot=\"select-content\"\n        data-state={open ? \"open\" : \"closed\"}\n        data-side={side}\n        ref={mergeRefs(floatingRef, dismissRef, presRef, listRef)}\n        style={style}\n        tabIndex={-1}\n        onKeyDown={(e) => {\n          if (onListKey(e)) return;\n          if (e.key === \"Escape\") {\n            // The list's Escape is the list's: a consumer's `onKeyDown` around\n            // it hears the key through React's tree, portal or not.\n            e.stopPropagation();\n            close(true);\n          } else if (e.key === \"Tab\") {\n            tabFromTrigger(e, anchorRef.current);\n            setOpen(false);\n          }\n        }}\n        className={cn(\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 origin-(--radix-select-content-transform-origin)\",\n          SELECT_CONTENT_SURFACE,\n          SELECT_CONTENT_BOUNDS,\n          className,\n        )}\n        {...(props as Record<string, unknown>)}\n      >\n        <div className={SELECT_LIST}><DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope></div>\n      </div>\n    </Portal>\n  );\n}\n\n/** The trigger's own name for the list: its `aria-labelledby`, else its `<label>`. */\nfunction listName(trigger: HTMLElement): { \"aria-labelledby\"?: string; \"aria-label\"?: string } {\n  const by = trigger.getAttribute(\"aria-labelledby\");\n  if (by) return { \"aria-labelledby\": by };\n  const label = (trigger as HTMLButtonElement).labels?.[0];\n  if (label?.id) return { \"aria-labelledby\": label.id };\n  const text = label?.textContent?.trim() || trigger.getAttribute(\"aria-label\");\n  return text ? { \"aria-label\": text } : {};\n}\n\nexport interface SelectItemProps extends React.ComponentProps<\"div\"> {\n  value: string;\n  /** What the trigger shows once this item is chosen; defaults to the text of `children`. */\n  textValue?: string;\n}\n\nexport function SelectItem({ className, value, textValue, children, ...props }: SelectItemProps) {\n  const { value: selectedValue, resetValue, setValue, close, registerLabel } = useSelect();\n  const selected = selectedValue === value;\n  const label = itemLabel(value, textValue, children);\n  React.useEffect(() => registerLabel(value, label), [registerLabel, value, label]);\n  const choose = () => {\n    setValue(value);\n    close(true);\n  };\n  return (\n    <div\n      role=\"option\"\n      data-slot=\"select-item\"\n      aria-selected={selected}\n      {...(resetValue === value ? { \"data-reset\": \"\" } : {})}\n      tabIndex={-1}\n      onClick={choose}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          choose();\n        }\n      }}\n      className={cn(SELECT_ITEM, className)}\n      {...(props as Record<string, unknown>)}\n    >\n      {selected ? (\n        <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"size-4\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M20 6 9 17l-5-5\" />\n          </svg>\n        </span>\n      ) : null}\n      <span>{children}</span>\n    </div>\n  );\n}\n\nexport function SelectGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div role=\"group\" data-slot=\"select-group\" className={className} {...props} />;\n}\n\nexport function SelectLabel({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"select-label\"\n      className={cn(SELECT_LABEL, className)}\n      {...props}\n    />\n  );\n}\n\nexport function SelectSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"select-separator\"\n      className={cn(SELECT_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/atomic/select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { SELECT_CHEVRON, SELECT_CONTENT_BOUNDS, SELECT_CONTENT_SURFACE, SELECT_ITEM, SELECT_ITEM_INDICATOR, SELECT_LABEL, SELECT_LIST, SELECT_SEPARATOR, SELECT_TRIGGER_BASE, selectTriggerSizeClasses, type SelectTriggerSize } from \"../../generated/select\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { useFloating } from \"../../primitives/use-floating\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../../primitives/dismissable-layer\";\nimport { usePresence } from \"../../primitives/presence\";\nimport { mergeRefs } from \"../../primitives/merge-refs\";\nimport { Portal } from \"../../primitives/portal\";\nimport { walkElements } from \"../../primitives/walk-elements\";\nimport { markLabelable } from \"../../primitives/labelable\";\nimport { useFieldControlId } from \"./field-context\";\nimport { SelectChevron } from \"../../icons/select-chevron\";\nimport { landOnChosen, tabFromTrigger, useListboxKeys } from \"./select-listbox\";\nimport type { Side } from \"../../generated/primitives\";\nimport { iconShapes } from \"../../icons/icon-shapes\";\n\nexport type { SelectTriggerSize };\n\ninterface SelectContextValue {\n  value: string;\n  resetValue: string | undefined;\n  setValue: (next: string) => void;\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  /**\n   * Closes the list. `restoreFocus`: hand focus back to the trigger — after a\n   * key or a choice, never after a click elsewhere, where it would land on the\n   * trigger for a moment and fire its blur (a field's validation) on the way out.\n   */\n  close: (restoreFocus: boolean) => void;\n  /** Set by `close(true)`, read once the list is gone. */\n  restoreFocusRef: React.RefObject<boolean>;\n  anchorRef: React.RefObject<HTMLElement | null>;\n  /** The listbox's id, for the trigger's `aria-controls`. */\n  contentId: string;\n  /** What `SelectValue` shows for a value: the matching `SelectItem`'s children. */\n  labelOf: (value: string) => string;\n  registerLabel: (value: string, label: string) => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue | null>(null);\n\nfunction useSelect(): SelectContextValue {\n  const ctx = React.useContext(SelectContext);\n  if (!ctx) throw new Error(\"Select parts must be used within <Select>\");\n  return ctx;\n}\n\nexport interface SelectProps {\n  value?: string;\n  defaultValue?: string;\n  /** What a reset would put back: its option is marked, beneath the chosen one's mark. */\n  resetValue?: string;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function Select({\n  value,\n  defaultValue = \"\",\n  resetValue,\n  onValueChange,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: SelectProps) {\n  const [currentValue, setValue] = useControllableState<string>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const anchorRef = React.useRef<HTMLElement | null>(null);\n  const contentId = React.useId();\n  const restoreFocusRef = React.useRef(false);\n  const close = React.useCallback(\n    (restoreFocus: boolean) => {\n      restoreFocusRef.current = restoreFocus;\n      setOpen(false);\n    },\n    [setOpen],\n  );\n  // The items live in a closed popover, so they are not mounted when the\n  // trigger first renders — on the server least of all. Their labels are read\n  // off the element tree instead; items hidden behind a component of the\n  // caller's register once they have mounted (i.e. after the first open), and\n  // a label learnt that way re-renders the trigger once.\n  const declared = React.useMemo(() => collectItemLabels(children), [children]);\n  const mounted = React.useRef(new Map<string, string>());\n  const [, bump] = React.useReducer((n: number) => n + 1, 0);\n  const labelOf = (v: string) => declared.get(v) ?? mounted.current.get(v) ?? v;\n  const registerLabel = React.useCallback(\n    (v: string, label: string) => {\n      if (mounted.current.get(v) === label) return;\n      mounted.current.set(v, label);\n      if (!declared.has(v)) bump();\n    },\n    [declared],\n  );\n  return (\n    <SelectContext.Provider\n      value={{\n        value: currentValue,\n        resetValue,\n        setValue,\n        open: isOpen,\n        setOpen,\n        close,\n        restoreFocusRef,\n        anchorRef,\n        contentId,\n        labelOf,\n        registerLabel,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n}\n\nfunction collectItemLabels(node: React.ReactNode): Map<string, string> {\n  const labels = new Map<string, string>();\n  walkElements(node, (element) => {\n    if (element.type !== SelectItem) return true;\n    const { value, textValue, children } = element.props as Partial<SelectItemProps>;\n    if (typeof value === \"string\") labels.set(value, itemLabel(value, textValue, children));\n    return false;\n  });\n  return labels;\n}\n\n/**\n * What the trigger shows for an item: its `textValue`, else the text of its\n * children. Text, not the children themselves — an item's markup rendered a\n * second time in the trigger would duplicate any id inside it.\n */\nfunction itemLabel(value: string, textValue: string | undefined, children: unknown): string {\n  return textValue ?? (textOf(children).trim() || value);\n}\n\nfunction textOf(node: unknown): string {\n  if (typeof node === \"string\" || typeof node === \"number\") return String(node);\n  if (Array.isArray(node)) return node.map(textOf).join(\"\");\n  if (React.isValidElement<{ children?: unknown }>(node)) return textOf(node.props.children);\n  return \"\";\n}\n\nexport interface SelectTriggerProps extends React.ComponentProps<\"button\"> {\n  size?: SelectTriggerSize;\n}\n\nexport function SelectTrigger({\n  className,\n  size = \"md\",\n  onClick,\n  onKeyDown,\n  children,\n  id,\n  ...props\n}: SelectTriggerProps) {\n  const { open, setOpen, close, anchorRef, contentId } = useSelect();\n  return (\n    <button\n      type=\"button\"\n      role=\"combobox\"\n      id={useFieldControlId(id)}\n      data-slot=\"select-trigger\"\n      data-size={size}\n      data-state={open ? \"open\" : \"closed\"}\n      aria-haspopup=\"listbox\"\n      aria-expanded={open}\n      aria-controls={open ? contentId : undefined}\n      ref={anchorRef as React.Ref<HTMLButtonElement>}\n      onClick={(e) => {\n        onClick?.(e);\n        if (open) close(true);\n        else setOpen(true);\n      }}\n      onKeyDown={(e) => {\n        onKeyDown?.(e);\n        // A native select opens on the arrows too; Enter and Space already click the button.\n        if (!e.defaultPrevented && !open && (e.key === \"ArrowDown\" || e.key === \"ArrowUp\")) {\n          e.preventDefault();\n          setOpen(true);\n        }\n      }}\n      className={cn(\n        // The placeholder mark is on `SelectValue`'s span, not on this button.\n        SELECT_TRIGGER_BASE,\n        selectTriggerSizeClasses[size],\n        className,\n      )}\n      {...(props as Record<string, unknown>)}\n    >\n      {children}\n      <SelectChevron className={SELECT_CHEVRON} />\n    </button>\n  );\n}\n\nmarkLabelable(SelectTrigger);\n\nexport interface SelectValueProps extends React.ComponentProps<\"span\"> {\n  placeholder?: string;\n}\n\n/**\n * The chosen option's label — the `textValue` of the `SelectItem` whose `value`\n * matches, else the text of its children — or `placeholder` while nothing is\n * chosen. `children`, when given,\n * replace the label outright.\n */\nexport function SelectValue({ className, placeholder, children, ...props }: SelectValueProps) {\n  const { value, labelOf } = useSelect();\n  const isEmpty = value === \"\";\n  return (\n    <span\n      data-slot=\"select-value\"\n      {...(isEmpty ? { \"data-placeholder\": \"true\" } : {})}\n      className={className}\n      {...(props as Record<string, unknown>)}\n    >\n      {isEmpty ? placeholder : (children ?? labelOf(value))}\n    </span>\n  );\n}\n\nexport interface SelectContentProps extends React.ComponentProps<\"div\"> {\n  side?: Side;\n  align?: \"start\" | \"center\" | \"end\";\n  sideOffset?: number;\n}\n\nexport function SelectContent({\n  className,\n  side: sideProp = \"bottom\",\n  align = \"start\",\n  sideOffset = 4,\n  children,\n  ...props\n}: SelectContentProps) {\n  const { open, setOpen, close, restoreFocusRef, anchorRef, contentId } = useSelect();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const listRef = React.useRef<HTMLDivElement | null>(null);\n  const [name, setName] = React.useState<{ \"aria-labelledby\"?: string; \"aria-label\"?: string }>({});\n  // Before placement measures the list: the trigger's width as\n  // `--select-trigger-width` (the floor of `SELECT_CONTENT_BOUNDS`), written to\n  // the element like the floating offset, and the list's name — the trigger's\n  // label, as the combobox is named.\n  React.useLayoutEffect(() => {\n    const anchor = anchorRef.current;\n    if (!open || !(anchor instanceof HTMLElement)) return;\n    listRef.current?.style.setProperty(\"--select-trigger-width\", `${anchor.offsetWidth}px`);\n    setName(listName(anchor));\n  }, [open, anchorRef]);\n  const { floatingRef, style, side } = useFloating({\n    anchorRef,\n    open,\n    side: sideProp,\n    align,\n    offset: sideOffset,\n  });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: (event) => close(event.type === \"keydown\"),\n    exclude: [anchorRef],\n  });\n  const onListKey = useListboxKeys(listRef);\n  React.useEffect(() => {\n    if (open) landOnChosen(listRef.current);\n  }, [open]);\n  React.useEffect(() => {\n    if (open || !restoreFocusRef.current) return;\n    restoreFocusRef.current = false;\n    anchorRef.current?.focus();\n  }, [open, anchorRef, restoreFocusRef]);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <div\n        role=\"listbox\"\n        id={contentId}\n        {...name}\n        data-slot=\"select-content\"\n        data-state={open ? \"open\" : \"closed\"}\n        data-side={side}\n        ref={mergeRefs(floatingRef, dismissRef, presRef, listRef)}\n        style={style}\n        tabIndex={-1}\n        onKeyDown={(e) => {\n          if (onListKey(e)) return;\n          if (e.key === \"Escape\") {\n            // The list's Escape is the list's: a consumer's `onKeyDown` around\n            // it hears the key through React's tree, portal or not.\n            e.stopPropagation();\n            close(true);\n          } else if (e.key === \"Tab\") {\n            tabFromTrigger(e, anchorRef.current);\n            setOpen(false);\n          }\n        }}\n        className={cn(\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 origin-(--radix-select-content-transform-origin)\",\n          SELECT_CONTENT_SURFACE,\n          SELECT_CONTENT_BOUNDS,\n          className,\n        )}\n        {...(props as Record<string, unknown>)}\n      >\n        <div className={SELECT_LIST}><DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope></div>\n      </div>\n    </Portal>\n  );\n}\n\n/** The trigger's own name for the list: its `aria-labelledby`, else its `<label>`. */\nfunction listName(trigger: HTMLElement): { \"aria-labelledby\"?: string; \"aria-label\"?: string } {\n  const by = trigger.getAttribute(\"aria-labelledby\");\n  if (by) return { \"aria-labelledby\": by };\n  const label = (trigger as HTMLButtonElement).labels?.[0];\n  if (label?.id) return { \"aria-labelledby\": label.id };\n  const text = label?.textContent?.trim() || trigger.getAttribute(\"aria-label\");\n  return text ? { \"aria-label\": text } : {};\n}\n\nexport interface SelectItemProps extends React.ComponentProps<\"div\"> {\n  value: string;\n  /** What the trigger shows once this item is chosen; defaults to the text of `children`. */\n  textValue?: string;\n}\n\nexport function SelectItem({ className, value, textValue, children, ...props }: SelectItemProps) {\n  const { value: selectedValue, resetValue, setValue, close, registerLabel } = useSelect();\n  const selected = selectedValue === value;\n  const label = itemLabel(value, textValue, children);\n  React.useEffect(() => registerLabel(value, label), [registerLabel, value, label]);\n  const choose = () => {\n    setValue(value);\n    close(true);\n  };\n  return (\n    <div\n      role=\"option\"\n      data-slot=\"select-item\"\n      aria-selected={selected}\n      {...(resetValue === value ? { \"data-reset\": \"\" } : {})}\n      tabIndex={-1}\n      onClick={choose}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          choose();\n        }\n      }}\n      className={cn(SELECT_ITEM, className)}\n      {...(props as Record<string, unknown>)}\n    >\n      {selected ? (\n        <span className={SELECT_ITEM_INDICATOR}>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"size-4\"\n            aria-hidden=\"true\"\n          >\n            {iconShapes(\"check\")}\n          </svg>\n        </span>\n      ) : null}\n      <span>{children}</span>\n    </div>\n  );\n}\n\nexport function SelectGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div role=\"group\" data-slot=\"select-group\" className={className} {...props} />;\n}\n\nexport function SelectLabel({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"select-label\"\n      className={cn(SELECT_LABEL, className)}\n      {...props}\n    />\n  );\n}\n\nexport function SelectSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"select-separator\"\n      className={cn(SELECT_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/atomic/sheet.js

@@ -22,6 +22,8 @@ import {
   SHEET_SIDE_TOP,
   SHEET_TITLE
 } from "../../generated/sheet.js";
+import * as copy from "../../generated/copy.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
 const SheetContext = React.createContext(null);
 function useSheet() {
   const ctx = React.useContext(SheetContext);
@@ -85,7 +87,7 @@ const XIcon = (props) => /* @__PURE__ */ jsx(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     ...props,
-    children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+    children: iconShapes("x")
   }
 );
 function SheetContent({
@@ -129,7 +131,7 @@ function SheetContent({
               className: SHEET_CLOSE,
               children: [
                 /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: copy.CLOSE })
               ]
             }
           )

package/dist/components/atomic/sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atomic/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from \"../../primitives/dismissable-layer\";\nimport { type InitialFocus, useFocusScope } from \"../../primitives/focus-scope\";\nimport { usePresence } from \"../../primitives/presence\";\nimport { mergeRefs } from \"../../primitives/merge-refs\";\nimport { Portal } from \"../../primitives/portal\";\nimport { Slot } from \"../../primitives/slot\";\nimport {\n  SHEET_CLOSE,\n  SHEET_CONTENT,\n  SHEET_DESCRIPTION,\n  SHEET_FOOTER,\n  SHEET_HEADER,\n  SHEET_OVERLAY,\n  SHEET_SIDE_BOTTOM,\n  SHEET_SIDE_LEFT,\n  SHEET_SIDE_RIGHT,\n  SHEET_SIDE_TOP,\n  SHEET_TITLE,\n} from \"../../generated/sheet\";\n\ninterface SheetContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}\n\nconst SheetContext = React.createContext<SheetContextValue | null>(null);\n\nfunction useSheet(): SheetContextValue {\n  const ctx = React.useContext(SheetContext);\n  if (!ctx) throw new Error(\"Sheet parts must be used within <Sheet>\");\n  return ctx;\n}\n\nexport interface SheetProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function Sheet({ open, defaultOpen = false, onOpenChange, children }: SheetProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <SheetContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n      {children}\n    </SheetContext.Provider>\n  );\n}\n\nexport interface SheetTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function SheetTrigger({ asChild = false, onClick, ...props }: SheetTriggerProps) {\n  const { open, setOpen, triggerRef } = useSheet();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"sheet-trigger\"\n      aria-expanded={open}\n      ref={triggerRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface SheetOverlayProps extends React.ComponentProps<\"div\"> {}\n\nexport function SheetOverlay({ className, ...props }: SheetOverlayProps) {\n  const { open } = useSheet();\n  // No onClick: the content's dismissable layer already closes on the\n  // pointer-down that lands here, and a second path called onOpenChange(false)\n  // twice for one press whenever the overlay was still hit by the click\n  // (a host that closes later, CSS without the closed-state pointer-events).\n  return (\n    <div\n      data-slot=\"sheet-overlay\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(SHEET_OVERLAY, className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nconst sheetSideClasses = {\n  right: SHEET_SIDE_RIGHT,\n  left: SHEET_SIDE_LEFT,\n  top: SHEET_SIDE_TOP,\n  bottom: SHEET_SIDE_BOTTOM,\n} as const;\n\nconst XIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </svg>\n);\n\nexport interface SheetContentProps extends React.ComponentProps<\"div\"> {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * Where focus lands on open. Default `container`: a sheet is a panel of\n   * content, and its first Tab stop is as likely an action as a field — the\n   * panel itself takes focus and the first Tab reaches the first control.\n   */\n  initialFocus?: InitialFocus;\n}\n\nexport function SheetContent({\n  className,\n  children,\n  side = \"right\",\n  initialFocus = \"container\",\n  ...props\n}: SheetContentProps) {\n  const { open, setOpen, triggerRef } = useSheet();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const focusRef = useFocusScope(open, { initialFocus, returnFocusTo: triggerRef });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n    modal: true,\n  });\n  const scrimStyle = useModalScrimStyle(dismissRef);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <SheetOverlay style={scrimStyle} />\n      <div\n        data-slot=\"sheet-content\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        data-state={open ? \"open\" : \"closed\"}\n        ref={mergeRefs(focusRef, dismissRef, presRef as React.Ref<HTMLDivElement>)}\n        className={cn(SHEET_CONTENT, sheetSideClasses[side], className)}\n        {...(props as Record<string, unknown>)}\n      >\n        <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n        <button\n          type=\"button\"\n          data-slot=\"sheet-close\"\n          onClick={() => setOpen(false)}\n          className={SHEET_CLOSE}\n        >\n          <XIcon className=\"size-4\" />\n          <span className=\"sr-only\">Close</span>\n        </button>\n      </div>\n    </Portal>\n  );\n}\n\nexport interface SheetCloseProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function SheetClose({ asChild = false, onClick, ...props }: SheetCloseProps) {\n  const { setOpen } = useSheet();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"sheet-close\"\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport function SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(SHEET_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(SHEET_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function SheetTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"sheet-title\"\n      className={cn(SHEET_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function SheetDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"sheet-description\"\n      className={cn(SHEET_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/atomic/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from \"../../primitives/dismissable-layer\";\nimport { type InitialFocus, useFocusScope } from \"../../primitives/focus-scope\";\nimport { usePresence } from \"../../primitives/presence\";\nimport { mergeRefs } from \"../../primitives/merge-refs\";\nimport { Portal } from \"../../primitives/portal\";\nimport { Slot } from \"../../primitives/slot\";\nimport {\n  SHEET_CLOSE,\n  SHEET_CONTENT,\n  SHEET_DESCRIPTION,\n  SHEET_FOOTER,\n  SHEET_HEADER,\n  SHEET_OVERLAY,\n  SHEET_SIDE_BOTTOM,\n  SHEET_SIDE_LEFT,\n  SHEET_SIDE_RIGHT,\n  SHEET_SIDE_TOP,\n  SHEET_TITLE,\n} from \"../../generated/sheet\";\nimport type { Side } from \"../../generated/primitives\";\nimport * as copy from \"../../generated/copy\";\nimport { iconShapes } from \"../../icons/icon-shapes\";\n\ninterface SheetContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}\n\nconst SheetContext = React.createContext<SheetContextValue | null>(null);\n\nfunction useSheet(): SheetContextValue {\n  const ctx = React.useContext(SheetContext);\n  if (!ctx) throw new Error(\"Sheet parts must be used within <Sheet>\");\n  return ctx;\n}\n\nexport interface SheetProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function Sheet({ open, defaultOpen = false, onOpenChange, children }: SheetProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <SheetContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n      {children}\n    </SheetContext.Provider>\n  );\n}\n\nexport interface SheetTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function SheetTrigger({ asChild = false, onClick, ...props }: SheetTriggerProps) {\n  const { open, setOpen, triggerRef } = useSheet();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"sheet-trigger\"\n      aria-expanded={open}\n      ref={triggerRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface SheetOverlayProps extends React.ComponentProps<\"div\"> {}\n\nexport function SheetOverlay({ className, ...props }: SheetOverlayProps) {\n  const { open } = useSheet();\n  // No onClick: the content's dismissable layer already closes on the\n  // pointer-down that lands here, and a second path called onOpenChange(false)\n  // twice for one press whenever the overlay was still hit by the click\n  // (a host that closes later, CSS without the closed-state pointer-events).\n  return (\n    <div\n      data-slot=\"sheet-overlay\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(SHEET_OVERLAY, className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nconst sheetSideClasses = {\n  right: SHEET_SIDE_RIGHT,\n  left: SHEET_SIDE_LEFT,\n  top: SHEET_SIDE_TOP,\n  bottom: SHEET_SIDE_BOTTOM,\n} as const;\n\nconst XIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    {iconShapes(\"x\")}\n  </svg>\n);\n\nexport interface SheetContentProps extends React.ComponentProps<\"div\"> {\n  side?: Side;\n  /**\n   * Where focus lands on open. Default `container`: a sheet is a panel of\n   * content, and its first Tab stop is as likely an action as a field — the\n   * panel itself takes focus and the first Tab reaches the first control.\n   */\n  initialFocus?: InitialFocus;\n}\n\nexport function SheetContent({\n  className,\n  children,\n  side = \"right\",\n  initialFocus = \"container\",\n  ...props\n}: SheetContentProps) {\n  const { open, setOpen, triggerRef } = useSheet();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const focusRef = useFocusScope(open, { initialFocus, returnFocusTo: triggerRef });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n    modal: true,\n  });\n  const scrimStyle = useModalScrimStyle(dismissRef);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <SheetOverlay style={scrimStyle} />\n      <div\n        data-slot=\"sheet-content\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        data-state={open ? \"open\" : \"closed\"}\n        ref={mergeRefs(focusRef, dismissRef, presRef as React.Ref<HTMLDivElement>)}\n        className={cn(SHEET_CONTENT, sheetSideClasses[side], className)}\n        {...(props as Record<string, unknown>)}\n      >\n        <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n        <button\n          type=\"button\"\n          data-slot=\"sheet-close\"\n          onClick={() => setOpen(false)}\n          className={SHEET_CLOSE}\n        >\n          <XIcon className=\"size-4\" />\n          <span className=\"sr-only\">{copy.CLOSE}</span>\n        </button>\n      </div>\n    </Portal>\n  );\n}\n\nexport interface SheetCloseProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function SheetClose({ asChild = false, onClick, ...props }: SheetCloseProps) {\n  const { setOpen } = useSheet();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"sheet-close\"\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport function SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(SHEET_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(SHEET_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function SheetTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"sheet-title\"\n      className={cn(SHEET_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function SheetDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"sheet-description\"\n      className={cn(SHEET_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}