@nocoo/basalt 2.1.0 → 2.1.7

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\nconst buttonVariants = cva(\n\t`${BASALT_UI_CLASS} inline-flex items-center justify-center gap-2 rounded-basalt-md text-sm font-medium transition-colors ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary/90\",\n\t\t\t\tsecondary: \"bg-basalt-control text-basalt-foreground hover:bg-basalt-accent\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"bg-basalt-destructive text-basalt-destructive-foreground hover:bg-basalt-destructive/90\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-basalt-border bg-basalt-control hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tghost: \"hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tlink: \"text-basalt-primary underline-offset-4 hover:underline\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-9 px-4 py-2\",\n\t\t\t\tsm: \"h-8 rounded-basalt-md px-3 text-xs\",\n\t\t\t\tlg: \"h-10 rounded-basalt-md px-6\",\n\t\t\t\ticon: \"h-9 w-9\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t},\n);\n\nexport interface ButtonProps\n\textends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\">,\n\t\tOmit<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof buttonVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof buttonVariants>[\"size\"];\n\t/**\n\t * Pass control to child element slot.\n\t *\n\t * Note: Child element must forward props and ref in all states. When disabled or loading,\n\t * asChild suppresses click, keyboard activation (Enter/Space), and pointer handlers on both\n\t * child and parent while retaining browser default Tab navigation without trapping focus.\n\t * To preserve single DOM node layout and avoid unexpected child layout shifts, no internal\n\t * spinner is inserted in asChild loading mode; visual disabled state is expressed via aria-disabled.\n\t *\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Button type attribute.\n\t * @default \"button\"\n\t */\n\ttype?: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t/**\n\t * Display loading spinner and disable interactions.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: React.ReactNode;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant,\n\t\t\tsize,\n\t\t\tasChild = false,\n\t\t\ttype = \"button\",\n\t\t\tloading = false,\n\t\t\ticon,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isDisabled = Boolean(disabled || loading);\n\n\t\tif (asChild) {\n\t\t\tif (isDisabled && React.isValidElement(children)) {\n\t\t\t\tconst childElement = children as React.ReactElement<Record<string, unknown>>;\n\t\t\t\tconst isNativeButton =\n\t\t\t\t\ttypeof childElement.type === \"string\" && childElement.type.toLowerCase() === \"button\";\n\n\t\t\t\tconst blockActivationEvent = (event: React.SyntheticEvent | Event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tif (\n\t\t\t\t\t\t\"stopImmediatePropagation\" in event &&\n\t\t\t\t\t\ttypeof event.stopImmediatePropagation === \"function\"\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst handleKeyEvent = (event: React.KeyboardEvent) => {\n\t\t\t\t\tif (event.key === \"Enter\" || event.key === \" \" || event.key === \"Spacebar\") {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tif (typeof event.nativeEvent?.stopImmediatePropagation === \"function\") {\n\t\t\t\t\t\t\tevent.nativeEvent.stopImmediatePropagation();\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// For non-activation keys like Tab, suppress user handlers from running while preserving browser default navigation\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tif (typeof event.nativeEvent?.stopImmediatePropagation === \"function\") {\n\t\t\t\t\t\t\tevent.nativeEvent.stopImmediatePropagation();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst blockedHandlers = {\n\t\t\t\t\tonClick: blockActivationEvent,\n\t\t\t\t\tonClickCapture: blockActivationEvent,\n\t\t\t\t\tonKeyDown: handleKeyEvent,\n\t\t\t\t\tonKeyDownCapture: handleKeyEvent,\n\t\t\t\t\tonKeyUp: handleKeyEvent,\n\t\t\t\t\tonKeyUpCapture: handleKeyEvent,\n\t\t\t\t\tonKeyPress: handleKeyEvent,\n\t\t\t\t\tonKeyPressCapture: handleKeyEvent,\n\t\t\t\t\tonMouseDown: blockActivationEvent,\n\t\t\t\t\tonMouseDownCapture: blockActivationEvent,\n\t\t\t\t\tonMouseUp: blockActivationEvent,\n\t\t\t\t\tonMouseUpCapture: blockActivationEvent,\n\t\t\t\t\tonPointerDown: blockActivationEvent,\n\t\t\t\t\tonPointerDownCapture: blockActivationEvent,\n\t\t\t\t\tonPointerUp: blockActivationEvent,\n\t\t\t\t\tonPointerUpCapture: blockActivationEvent,\n\t\t\t\t\tonAuxClick: blockActivationEvent,\n\t\t\t\t\tonAuxClickCapture: blockActivationEvent,\n\t\t\t\t};\n\n\t\t\t\tconst { disabled: _ignoredChildDisabled, ...sanitizedProps } = childElement.props;\n\n\t\t\t\tconst sanitizedChild = React.cloneElement(childElement, {\n\t\t\t\t\t...sanitizedProps,\n\t\t\t\t\t...blockedHandlers,\n\t\t\t\t\t...(isNativeButton ? { disabled: true } : {}),\n\t\t\t\t\t\"aria-disabled\": true,\n\t\t\t\t\t\"aria-busy\": loading ? true : undefined,\n\t\t\t\t\ttabIndex: -1,\n\t\t\t\t});\n\n\t\t\t\tconst slotProps: Record<string, unknown> = {\n\t\t\t\t\t...props,\n\t\t\t\t\t...blockedHandlers,\n\t\t\t\t\t\"aria-disabled\": true,\n\t\t\t\t\t\"aria-busy\": loading ? \"true\" : undefined,\n\t\t\t\t\ttabIndex: -1,\n\t\t\t\t};\n\t\t\t\tif (isNativeButton) {\n\t\t\t\t\tslotProps.disabled = true;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Slot\n\t\t\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t{...slotProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t{sanitizedChild}\n\t\t\t\t\t</Slot>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<Slot className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\tconst iconNode = loading ? (\n\t\t\t<Loader2 className=\"animate-basalt-spin motion-reduce:animate-none\" aria-hidden=\"true\" />\n\t\t) : (\n\t\t\ticon\n\t\t);\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\tref={ref}\n\t\t\t\ttype={type}\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\taria-busy={loading || undefined}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{iconNode}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport interface LinkButtonProps\n\textends React.AnchorHTMLAttributes<HTMLAnchorElement>,\n\t\tOmit<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof buttonVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof buttonVariants>[\"size\"];\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: React.ReactNode;\n}\n\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n\t({ className, variant, size, icon, children, ...props }, ref) => (\n\t\t<a ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props}>\n\t\t\t{icon}\n\t\t\t{children}\n\t\t</a>\n\t),\n);\nLinkButton.displayName = \"LinkButton\";\n\nexport { buttonVariants };\n"],"mappings":"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"}
+{"version":3,"file":"button.js","names":[],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\nconst buttonVariants = cva(\n\t`${BASALT_UI_CLASS} inline-flex items-center justify-center gap-2 rounded-basalt-md text-sm font-medium transition-colors ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary/90\",\n\t\t\t\tsecondary: \"bg-basalt-control text-basalt-foreground hover:bg-basalt-accent\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"bg-basalt-destructive text-basalt-destructive-foreground hover:bg-basalt-destructive/90\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-basalt-border bg-basalt-control hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tghost: \"hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tlink: \"text-basalt-primary underline-offset-4 hover:underline\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-9 px-4 py-2\",\n\t\t\t\tsm: \"h-8 rounded-basalt-md px-3 text-xs\",\n\t\t\t\tlg: \"h-10 rounded-basalt-md px-6\",\n\t\t\t\ticon: \"h-9 w-9\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t},\n);\n\nexport interface ButtonProps\n\textends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\">,\n\t\tOmit<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof buttonVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof buttonVariants>[\"size\"];\n\t/**\n\t * Pass control to child element slot.\n\t *\n\t * Note: Child element must forward props and ref in all states. When disabled or loading,\n\t * asChild suppresses click, keyboard activation (Enter/Space), and pointer handlers on both\n\t * child and parent while retaining browser default Tab navigation without trapping focus.\n\t * To preserve single DOM node layout and avoid unexpected child layout shifts, no internal\n\t * spinner is inserted in asChild loading mode; visual disabled state is expressed via aria-disabled.\n\t *\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Button type attribute.\n\t * @default \"button\"\n\t */\n\ttype?: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t/**\n\t * Display loading spinner and disable interactions.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: React.ReactNode;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant,\n\t\t\tsize,\n\t\t\tasChild = false,\n\t\t\ttype = \"button\",\n\t\t\tloading = false,\n\t\t\ticon,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isDisabled = Boolean(disabled || loading);\n\n\t\tif (asChild) {\n\t\t\tif (isDisabled && React.isValidElement(children)) {\n\t\t\t\tconst childElement = children as React.ReactElement<Record<string, unknown>>;\n\t\t\t\tconst isNativeButton =\n\t\t\t\t\ttypeof childElement.type === \"string\" && childElement.type.toLowerCase() === \"button\";\n\n\t\t\t\tconst blockActivationEvent = (event: React.SyntheticEvent | Event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tif (\n\t\t\t\t\t\t\"stopImmediatePropagation\" in event &&\n\t\t\t\t\t\ttypeof event.stopImmediatePropagation === \"function\"\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst handleKeyEvent = (event: React.KeyboardEvent) => {\n\t\t\t\t\tif (event.key === \"Enter\" || event.key === \" \" || event.key === \"Spacebar\") {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tif (typeof event.nativeEvent?.stopImmediatePropagation === \"function\") {\n\t\t\t\t\t\tevent.nativeEvent.stopImmediatePropagation();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst blockedHandlers = {\n\t\t\t\t\tonClick: blockActivationEvent,\n\t\t\t\t\tonClickCapture: blockActivationEvent,\n\t\t\t\t\tonKeyDown: handleKeyEvent,\n\t\t\t\t\tonKeyDownCapture: handleKeyEvent,\n\t\t\t\t\tonKeyUp: handleKeyEvent,\n\t\t\t\t\tonKeyUpCapture: handleKeyEvent,\n\t\t\t\t\tonKeyPress: handleKeyEvent,\n\t\t\t\t\tonKeyPressCapture: handleKeyEvent,\n\t\t\t\t\tonMouseDown: blockActivationEvent,\n\t\t\t\t\tonMouseDownCapture: blockActivationEvent,\n\t\t\t\t\tonMouseUp: blockActivationEvent,\n\t\t\t\t\tonMouseUpCapture: blockActivationEvent,\n\t\t\t\t\tonPointerDown: blockActivationEvent,\n\t\t\t\t\tonPointerDownCapture: blockActivationEvent,\n\t\t\t\t\tonPointerUp: blockActivationEvent,\n\t\t\t\t\tonPointerUpCapture: blockActivationEvent,\n\t\t\t\t\tonAuxClick: blockActivationEvent,\n\t\t\t\t\tonAuxClickCapture: blockActivationEvent,\n\t\t\t\t};\n\n\t\t\t\tconst sanitizedChild = React.cloneElement(childElement, {\n\t\t\t\t\t...blockedHandlers,\n\t\t\t\t\t...(isNativeButton ? { disabled: true } : {}),\n\t\t\t\t\t\"aria-disabled\": true,\n\t\t\t\t\t\"aria-busy\": loading ? true : undefined,\n\t\t\t\t\ttabIndex: -1,\n\t\t\t\t});\n\n\t\t\t\tconst slotProps: Record<string, unknown> = {\n\t\t\t\t\t...props,\n\t\t\t\t\t...blockedHandlers,\n\t\t\t\t\t\"aria-disabled\": true,\n\t\t\t\t\t\"aria-busy\": loading ? \"true\" : undefined,\n\t\t\t\t\ttabIndex: -1,\n\t\t\t\t};\n\t\t\t\tif (isNativeButton) {\n\t\t\t\t\tslotProps.disabled = true;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Slot\n\t\t\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t{...slotProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t{sanitizedChild}\n\t\t\t\t\t</Slot>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<Slot className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\tconst iconNode = loading ? (\n\t\t\t<Loader2 className=\"animate-basalt-spin motion-reduce:animate-none\" aria-hidden=\"true\" />\n\t\t) : (\n\t\t\ticon\n\t\t);\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\tref={ref}\n\t\t\t\ttype={type}\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\taria-busy={loading || undefined}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{iconNode}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport interface LinkButtonProps\n\textends React.AnchorHTMLAttributes<HTMLAnchorElement>,\n\t\tOmit<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof buttonVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof buttonVariants>[\"size\"];\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: React.ReactNode;\n}\n\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n\t({ className, variant, size, icon, children, ...props }, ref) => (\n\t\t<a ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props}>\n\t\t\t{icon}\n\t\t\t{children}\n\t\t</a>\n\t),\n);\nLinkButton.displayName = \"LinkButton\";\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;AAQA,IAAM,IAAiB,EACtB,GAAG,EAAgB,yGAAyG,EAAW,yIACvI;CACC,UAAU;EACT,SAAS;GACR,SAAS;GACT,WAAW;GACX,aACC;GACD,SACC;GACD,OAAO;GACP,MAAM;EACP;EACA,MAAM;GACL,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;EACP;CACD;CACA,iBAAiB;EAChB,SAAS;EACT,MAAM;CACP;AACD,CACD,GA2Ca,IAAS,EAAM,YAE1B,EACC,cACA,YACA,SACA,aAAU,IACV,UAAO,UACP,aAAU,IACV,SACA,aACA,aACA,GAAG,KAEJ,MACI;CACJ,IAAM,IAAa,GAAQ,KAAY;CAEvC,IAAI,GAAS;EACZ,IAAI,KAAc,EAAM,eAAe,CAAQ,GAAG;GACjD,IAAM,IAAe,GACf,IACL,OAAO,EAAa,QAAS,YAAY,EAAa,KAAK,YAAY,MAAM,UAExE,KAAwB,MAAwC;IAGrE,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAErB,8BAA8B,KAC9B,OAAO,EAAM,4BAA6B,cAE1C,EAAM,yBAAyB;GAEjC,GAEM,KAAkB,MAA+B;IAKtD,CAJI,EAAM,QAAQ,WAAW,EAAM,QAAQ,OAAO,EAAM,QAAQ,eAC/D,EAAM,eAAe,GAEtB,EAAM,gBAAgB,GAClB,OAAO,EAAM,aAAa,4BAA6B,cAC1D,EAAM,YAAY,yBAAyB;GAE7C,GAEM,IAAkB;IACvB,SAAS;IACT,gBAAgB;IAChB,WAAW;IACX,kBAAkB;IAClB,SAAS;IACT,gBAAgB;IAChB,YAAY;IACZ,mBAAmB;IACnB,aAAa;IACb,oBAAoB;IACpB,WAAW;IACX,kBAAkB;IAClB,eAAe;IACf,sBAAsB;IACtB,aAAa;IACb,oBAAoB;IACpB,YAAY;IACZ,mBAAmB;GACpB,GAEM,IAAiB,EAAM,aAAa,GAAc;IACvD,GAAG;IACH,GAAI,IAAiB,EAAE,UAAU,GAAK,IAAI,CAAC;IAC3C,iBAAiB;IACjB,aAAa,IAAU,KAAO,KAAA;IAC9B,UAAU;GACX,CAAC,GAEK,IAAqC;IAC1C,GAAG;IACH,GAAG;IACH,iBAAiB;IACjB,aAAa,IAAU,SAAS,KAAA;IAChC,UAAU;GACX;GAKA,OAJI,MACH,EAAU,WAAW,KAIrB,kBAAC,GAAD;IACC,WAAW,EAAG,EAAe;KAAE;KAAS;IAAK,CAAC,GAAG,CAAS;IACrD;IACL,GAAI;IAEH,UAAA;GACI,CAAA;EAER;EAEA,OACC,kBAAC,GAAD;GAAM,WAAW,EAAG,EAAe;IAAE;IAAS;GAAK,CAAC,GAAG,CAAS;GAAQ;GAAK,GAAI;GAC/E;EACI,CAAA;CAER;CAEA,IAAM,IAAW,IAChB,kBAAC,GAAD;EAAS,WAAU;EAAiD,eAAY;CAAQ,CAAA,IAExF;CAED,OACC,kBAAC,UAAD;EACC,WAAW,EAAG,EAAe;GAAE;GAAS;EAAK,CAAC,GAAG,CAAS;EACrD;EACC;EACN,UAAU;EACV,aAAW,KAAW,KAAA;EACtB,GAAI;EANL,UAAA,CAQE,GACA,CACM;;AAEV,CACD;AACA,EAAO,cAAc;AAqBrB,IAAa,IAAa,EAAM,YAC9B,EAAE,cAAW,YAAS,SAAM,SAAM,aAAU,GAAG,KAAS,MACxD,kBAAC,KAAD;CAAQ;CAAK,WAAW,EAAG,EAAe;EAAE;EAAS;CAAK,CAAC,GAAG,CAAS;CAAG,GAAI;CAA9E,UAAA,CACE,GACA,CACC;AAEL,CAAA,CAAA;AACA,EAAW,cAAc"}

package/dist/components/chat-composer.js

@@ -13,8 +13,7 @@ function l({ disabled: l = !1, streaming: u = !1, label: d = "Message", placehol
 	}, C = () => {
 		let e = v.trim();
 		!e || l || u || (p(e), y(""), requestAnimationFrame(() => {
-			let e = b.current;
-			e && (e.style.height = "0px", e.style.height = `${Math.min(e.scrollHeight, 160)}px`, e.focus());
+			S(), b.current?.focus();
 		}));
 	};
 	return /* @__PURE__ */ s("form", {

package/dist/components/chat-composer.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-composer.js","names":[],"sources":["../../src/components/chat-composer.tsx"],"sourcesContent":["import { ArrowUp, Square } from \"lucide-react\";\nimport { type FormEvent, type KeyboardEvent, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\nimport { InputArea } from \"./input-area\";\n\nexport interface ChatComposerProps {\n\t/**\n\t * Disable the field and send.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Replace send with stop. When streaming is true, the stop button renders and triggers onCancel.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\t/**\n\t * Field accessible name.\n\t * @default \"Message\"\n\t */\n\tlabel?: string;\n\t/**\n\t * Placeholder when empty.\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Called with trimmed text on send. Operates on internal draft state and does not wait for a Promise (caller manages asynchronous errors).\n\t */\n\tonSend: (text: string) => void;\n\t/**\n\t * Called when the stop control is pressed while streaming is active.\n\t */\n\tonCancel?: () => void;\n\t/**\n\t * Send control accessible name.\n\t * @default \"Send message\"\n\t */\n\tsendLabel?: string;\n\t/**\n\t * Stop control accessible name.\n\t * @default \"Stop generating\"\n\t */\n\tcancelLabel?: string;\n\t/**\n\t * Optional class name applied to the form container.\n\t * Component manages internal draft/height state and does not forward native form rest attributes or ref.\n\t */\n\tclassName?: string;\n}\n\nexport function ChatComposer({\n\tdisabled = false,\n\tstreaming = false,\n\tlabel = \"Message\",\n\tplaceholder,\n\tonSend,\n\tonCancel,\n\tsendLabel = \"Send message\",\n\tcancelLabel = \"Stop generating\",\n\tclassName,\n}: ChatComposerProps) {\n\tconst [value, setValue] = useState(\"\");\n\tconst ref = useRef<HTMLTextAreaElement>(null);\n\tconst composingRef = useRef(false);\n\n\tconst resize = () => {\n\t\tconst el = ref.current;\n\t\tif (!el) {\n\t\t\treturn;\n\t\t}\n\t\tel.style.height = \"0px\";\n\t\tel.style.height = `${Math.min(el.scrollHeight, 160)}px`;\n\t};\n\n\tconst submit = () => {\n\t\tconst text = value.trim();\n\t\tif (!text || disabled || streaming) {\n\t\t\treturn;\n\t\t}\n\t\tonSend(text);\n\t\tsetValue(\"\");\n\t\trequestAnimationFrame(() => {\n\t\t\tconst el = ref.current;\n\t\t\tif (el) {\n\t\t\t\tel.style.height = \"0px\";\n\t\t\t\tel.style.height = `${Math.min(el.scrollHeight, 160)}px`;\n\t\t\t\tel.focus();\n\t\t\t}\n\t\t});\n\t};\n\n\tconst onSubmit = (event: FormEvent) => {\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\tconst onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n\t\tif (composingRef.current || event.nativeEvent.isComposing) {\n\t\t\treturn;\n\t\t}\n\t\tif (event.key !== \"Enter\" || event.shiftKey) {\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\treturn (\n\t\t<form\n\t\t\tclassName={cn(\"border-t border-basalt-border/50 bg-basalt-card p-3\", className)}\n\t\t\tonSubmit={onSubmit}\n\t\t>\n\t\t\t<div className=\"flex items-end gap-2 rounded-2xl bg-basalt-secondary p-2 ring-1 ring-basalt-border/50\">\n\t\t\t\t<InputArea\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\tsetValue(event.target.value);\n\t\t\t\t\t\trequestAnimationFrame(resize);\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionStart={() => {\n\t\t\t\t\t\tcomposingRef.current = true;\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionEnd={() => {\n\t\t\t\t\t\tcomposingRef.current = false;\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\trows={1}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tclassName=\"max-h-40 min-h-[40px] flex-1 resize-none border-0 bg-transparent p-2 shadow-none ring-0\"\n\t\t\t\t/>\n\t\t\t\t{streaming ? (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\tdisabled={!onCancel}\n\t\t\t\t\t\taria-label={cancelLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Square className=\"h-3.5 w-3.5 fill-current\" strokeWidth={0} />\n\t\t\t\t\t</Button>\n\t\t\t\t) : (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tdisabled={disabled || !value.trim()}\n\t\t\t\t\t\taria-label={sendLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ArrowUp className=\"h-4 w-4\" strokeWidth={2.25} />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</form>\n\t);\n}\n"],"mappings":";;;;;;;;AAmDA,SAAgB,EAAa,EAC5B,cAAW,IACX,eAAY,IACZ,WAAQ,WACR,gBACA,WACA,aACA,eAAY,gBACZ,iBAAc,mBACd,gBACqB;CACrB,IAAM,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,IAAM,EAA4B,IAAI,GACtC,IAAe,EAAO,EAAK,GAE3B,UAAe;EACpB,IAAM,IAAK,EAAI;EACV,MAGL,EAAG,MAAM,SAAS,OAClB,EAAG,MAAM,SAAS,GAAG,KAAK,IAAI,EAAG,cAAc,GAAG,EAAE;CACrD,GAEM,UAAe;EACpB,IAAM,IAAO,EAAM,KAAK;EACpB,CAAC,KAAQ,KAAY,MAGzB,EAAO,CAAI,GACX,EAAS,EAAE,GACX,4BAA4B;GAC3B,IAAM,IAAK,EAAI;GACf,AAAI,MACH,EAAG,MAAM,SAAS,OAClB,EAAG,MAAM,SAAS,GAAG,KAAK,IAAI,EAAG,cAAc,GAAG,EAAE,KACpD,EAAG,MAAM;EAEX,CAAC;CACF;CAkBA,OACC,kBAAC,QAAD;EACC,WAAW,EAAG,uDAAuD,CAAS;EACpE,WAnBM,MAAqB;GAEtC,AADA,EAAM,eAAe,GACrB,EAAO;EACR;EAkBE,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,GAAD;IACM;IACE;IACP,WAAW,MAAU;KAEpB,AADA,EAAS,EAAM,OAAO,KAAK,GAC3B,sBAAsB,CAAM;IAC7B;IACA,0BAA0B;KACzB,EAAa,UAAU;IACxB;IACA,wBAAwB;KACvB,EAAa,UAAU;IACxB;IACW,YA9BI,MAA8C;KAC5D,EAAa,WAAW,EAAM,YAAY,eAG1C,EAAM,QAAQ,WAAW,EAAM,aAGnC,EAAM,eAAe,GACrB,EAAO;IACR;IAsBI,MAAM;IACO;IACH;IACV,cAAY;IACZ,WAAU;GACV,CAAA,GACA,IACA,kBAAC,GAAD;IACC,MAAK;IACL,MAAK;IACL,SAAQ;IACR,SAAS;IACT,UAAU,CAAC;IACX,cAAY;IAEZ,UAAA,kBAAC,GAAD;KAAQ,WAAU;KAA2B,aAAa;IAAI,CAAA;GACvD,CAAA,IAER,kBAAC,GAAD;IACC,MAAK;IACL,MAAK;IACL,UAAU,KAAY,CAAC,EAAM,KAAK;IAClC,cAAY;IAEZ,UAAA,kBAAC,GAAD;KAAS,WAAU;KAAU,aAAa;IAAO,CAAA;GAC1C,CAAA,CAEL;;CACA,CAAA;AAER"}
+{"version":3,"file":"chat-composer.js","names":[],"sources":["../../src/components/chat-composer.tsx"],"sourcesContent":["import { ArrowUp, Square } from \"lucide-react\";\nimport { type FormEvent, type KeyboardEvent, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\nimport { InputArea } from \"./input-area\";\n\nexport interface ChatComposerProps {\n\t/**\n\t * Disable the field and send.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Replace send with stop. When streaming is true, the stop button renders and triggers onCancel.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\t/**\n\t * Field accessible name.\n\t * @default \"Message\"\n\t */\n\tlabel?: string;\n\t/**\n\t * Placeholder when empty.\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Called with trimmed text on send. Operates on internal draft state and does not wait for a Promise (caller manages asynchronous errors).\n\t */\n\tonSend: (text: string) => void;\n\t/**\n\t * Called when the stop control is pressed while streaming is active.\n\t */\n\tonCancel?: () => void;\n\t/**\n\t * Send control accessible name.\n\t * @default \"Send message\"\n\t */\n\tsendLabel?: string;\n\t/**\n\t * Stop control accessible name.\n\t * @default \"Stop generating\"\n\t */\n\tcancelLabel?: string;\n\t/**\n\t * Optional class name applied to the form container.\n\t * Component manages internal draft/height state and does not forward native form rest attributes or ref.\n\t */\n\tclassName?: string;\n}\n\nexport function ChatComposer({\n\tdisabled = false,\n\tstreaming = false,\n\tlabel = \"Message\",\n\tplaceholder,\n\tonSend,\n\tonCancel,\n\tsendLabel = \"Send message\",\n\tcancelLabel = \"Stop generating\",\n\tclassName,\n}: ChatComposerProps) {\n\tconst [value, setValue] = useState(\"\");\n\tconst ref = useRef<HTMLTextAreaElement>(null);\n\tconst composingRef = useRef(false);\n\n\tconst resize = () => {\n\t\tconst el = ref.current;\n\t\tif (!el) {\n\t\t\treturn;\n\t\t}\n\t\tel.style.height = \"0px\";\n\t\tel.style.height = `${Math.min(el.scrollHeight, 160)}px`;\n\t};\n\n\tconst submit = () => {\n\t\tconst text = value.trim();\n\t\tif (!text || disabled || streaming) {\n\t\t\treturn;\n\t\t}\n\t\tonSend(text);\n\t\tsetValue(\"\");\n\t\trequestAnimationFrame(() => {\n\t\t\tresize();\n\t\t\tref.current?.focus();\n\t\t});\n\t};\n\n\tconst onSubmit = (event: FormEvent) => {\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\tconst onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n\t\tif (composingRef.current || event.nativeEvent.isComposing) {\n\t\t\treturn;\n\t\t}\n\t\tif (event.key !== \"Enter\" || event.shiftKey) {\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\treturn (\n\t\t<form\n\t\t\tclassName={cn(\"border-t border-basalt-border/50 bg-basalt-card p-3\", className)}\n\t\t\tonSubmit={onSubmit}\n\t\t>\n\t\t\t<div className=\"flex items-end gap-2 rounded-2xl bg-basalt-secondary p-2 ring-1 ring-basalt-border/50\">\n\t\t\t\t<InputArea\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\tsetValue(event.target.value);\n\t\t\t\t\t\trequestAnimationFrame(resize);\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionStart={() => {\n\t\t\t\t\t\tcomposingRef.current = true;\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionEnd={() => {\n\t\t\t\t\t\tcomposingRef.current = false;\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\trows={1}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tclassName=\"max-h-40 min-h-[40px] flex-1 resize-none border-0 bg-transparent p-2 shadow-none ring-0\"\n\t\t\t\t/>\n\t\t\t\t{streaming ? (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\tdisabled={!onCancel}\n\t\t\t\t\t\taria-label={cancelLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Square className=\"h-3.5 w-3.5 fill-current\" strokeWidth={0} />\n\t\t\t\t\t</Button>\n\t\t\t\t) : (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tdisabled={disabled || !value.trim()}\n\t\t\t\t\t\taria-label={sendLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ArrowUp className=\"h-4 w-4\" strokeWidth={2.25} />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</form>\n\t);\n}\n"],"mappings":";;;;;;;;AAmDA,SAAgB,EAAa,EAC5B,cAAW,IACX,eAAY,IACZ,WAAQ,WACR,gBACA,WACA,aACA,eAAY,gBACZ,iBAAc,mBACd,gBACqB;CACrB,IAAM,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,IAAM,EAA4B,IAAI,GACtC,IAAe,EAAO,EAAK,GAE3B,UAAe;EACpB,IAAM,IAAK,EAAI;EACV,MAGL,EAAG,MAAM,SAAS,OAClB,EAAG,MAAM,SAAS,GAAG,KAAK,IAAI,EAAG,cAAc,GAAG,EAAE;CACrD,GAEM,UAAe;EACpB,IAAM,IAAO,EAAM,KAAK;EACpB,CAAC,KAAQ,KAAY,MAGzB,EAAO,CAAI,GACX,EAAS,EAAE,GACX,4BAA4B;GAE3B,AADA,EAAO,GACP,EAAI,SAAS,MAAM;EACpB,CAAC;CACF;CAkBA,OACC,kBAAC,QAAD;EACC,WAAW,EAAG,uDAAuD,CAAS;EACpE,WAnBM,MAAqB;GAEtC,AADA,EAAM,eAAe,GACrB,EAAO;EACR;EAkBE,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,GAAD;IACM;IACE;IACP,WAAW,MAAU;KAEpB,AADA,EAAS,EAAM,OAAO,KAAK,GAC3B,sBAAsB,CAAM;IAC7B;IACA,0BAA0B;KACzB,EAAa,UAAU;IACxB;IACA,wBAAwB;KACvB,EAAa,UAAU;IACxB;IACW,YA9BI,MAA8C;KAC5D,EAAa,WAAW,EAAM,YAAY,eAG1C,EAAM,QAAQ,WAAW,EAAM,aAGnC,EAAM,eAAe,GACrB,EAAO;IACR;IAsBI,MAAM;IACO;IACH;IACV,cAAY;IACZ,WAAU;GACV,CAAA,GACA,IACA,kBAAC,GAAD;IACC,MAAK;IACL,MAAK;IACL,SAAQ;IACR,SAAS;IACT,UAAU,CAAC;IACX,cAAY;IAEZ,UAAA,kBAAC,GAAD;KAAQ,WAAU;KAA2B,aAAa;IAAI,CAAA;GACvD,CAAA,IAER,kBAAC,GAAD;IACC,MAAK;IACL,MAAK;IACL,UAAU,KAAY,CAAC,EAAM,KAAK;IAClC,cAAY;IAEZ,UAAA,kBAAC,GAAD;KAAS,WAAU;KAAU,aAAa;IAAO,CAAA;GAC1C,CAAA,CAEL;;CACA,CAAA;AAER"}

package/dist/components/checkbox.js

@@ -2,137 +2,105 @@
 import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 import { FOCUS_RING as n } from "./overlay.js";
-import * as r from "react";
-import { Check as i, Minus as a } from "lucide-react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import * as c from "@radix-ui/react-checkbox";
+import { useCheckableGroup as r } from "../utils/use-checkable-group.js";
+import * as i from "react";
+import { Check as a, Minus as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-checkbox";
 //#region src/components/checkbox.tsx
-var l = {
+var u = {
 	sm: "h-3 w-3",
 	default: "h-4 w-4"
-}, u = {
+}, d = {
 	sm: "hidden h-3 w-3 group-data-[state=checked]:block",
 	default: "hidden h-4 w-4 group-data-[state=checked]:block"
-}, d = {
+}, f = {
 	sm: "hidden h-2.5 w-2.5 group-data-[state=indeterminate]:block",
 	default: "hidden h-3 w-3 group-data-[state=indeterminate]:block"
-}, f = r.createContext(null);
-function p(e, t, n) {
+}, p = i.createContext(null);
+function m(e, t, n) {
 	return n ? e.includes(t) ? e : [...e, t] : e.filter((e) => e !== t);
 }
-var m = r.forwardRef(({ className: r, size: f = "default", ...p }, m) => /* @__PURE__ */ o(c.Root, {
+var h = i.forwardRef(({ className: r, size: i = "default", ...p }, m) => /* @__PURE__ */ s(l.Root, {
 	ref: m,
-	className: e(t, "group peer shrink-0 rounded-[4px] border border-basalt-primary data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground data-[state=indeterminate]:bg-basalt-primary data-[state=indeterminate]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50", l[f], n, r),
+	className: e(t, "group peer shrink-0 rounded-[4px] border border-basalt-primary data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground data-[state=indeterminate]:bg-basalt-primary data-[state=indeterminate]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50", u[i], n, r),
 	...p,
-	children: /* @__PURE__ */ s(c.Indicator, {
+	children: /* @__PURE__ */ c(l.Indicator, {
 		className: "flex items-center justify-center text-current",
-		children: [/* @__PURE__ */ o(i, { className: u[f] }), /* @__PURE__ */ o(a, { className: d[f] })]
+		children: [/* @__PURE__ */ s(a, { className: d[i] }), /* @__PURE__ */ s(o, { className: f[i] })]
 	})
 }));
-m.displayName = c.Root.displayName;
-var h = r.forwardRef(({ className: t, value: n, defaultValue: i, onValueChange: a, error: c, disabled: l = !1, children: u, "aria-describedby": d, "aria-invalid": p, ...m }, h) => {
-	let g = r.useId(), _ = r.useRef(null), [v, y] = r.useState(i ?? []), b = n ?? v, x = !!c, S = `${g}-error`, C = [x ? S : null, d].filter(Boolean).join(" ") || void 0, w = r.useRef(null), T = r.useCallback((e) => {
-		let t = w.current;
-		t && t.eventPhase !== Event.NONE || (n === void 0 && y(e), a?.(e));
-	}, [a, n]), E = r.useCallback((e) => {
-		if (_.current = e, h) {
-			if (typeof h == "function") {
-				let t = h(e);
-				return typeof t == "function" ? () => {
-					_.current = null, t();
-				} : () => {
-					_.current = null, h(null);
-				};
-			}
-			return h.current = e, () => {
-				_.current = null, h.current = null;
-			};
-		}
-	}, [h]), D = m.form, O = r.useRef({
+h.displayName = l.Root.displayName;
+var g = i.forwardRef(({ className: t, value: n, defaultValue: i, onValueChange: a, error: o, disabled: l = !1, children: u, "aria-describedby": d, "aria-invalid": f, ...m }, h) => {
+	let g = r({
+		value: n,
 		defaultValue: i,
-		value: n
+		onValueChange: a,
+		error: o,
+		describedBy: d,
+		ariaInvalid: f,
+		form: m.form,
+		ref: h
 	});
-	return r.useEffect(() => {
-		O.current = {
-			defaultValue: i,
-			value: n
-		};
-	}), r.useEffect(() => {
-		let e = _.current?.form;
-		if (!e || D && e.id !== D) return;
-		let t = !1, n = /* @__PURE__ */ new Set(), r = (e) => {
-			w.current = e;
-			let r = setTimeout(() => {
-				if (n.delete(r), t || e.defaultPrevented) return;
-				let i = O.current;
-				i.value === void 0 && y(i.defaultValue ?? []);
-			}, 0);
-			n.add(r);
-		};
-		return e.addEventListener("reset", r, !0), () => {
-			t = !0, w.current = null;
-			for (let e of n) clearTimeout(e);
-			n.clear(), e.removeEventListener("reset", r, !0);
-		};
-	}, [D]), /* @__PURE__ */ o(f.Provider, {
+	return /* @__PURE__ */ s(p.Provider, {
 		value: {
-			value: b,
-			setValue: T,
+			value: g.current,
+			setValue: g.setValue,
 			disabled: l,
-			invalid: x
+			invalid: g.invalid
 		},
-		children: /* @__PURE__ */ s("fieldset", {
-			ref: E,
+		children: /* @__PURE__ */ c("fieldset", {
+			ref: g.setRefs,
 			...m,
 			disabled: l,
-			"aria-invalid": x ? !0 : p,
-			"aria-describedby": C,
+			"aria-invalid": g.ariaInvalid,
+			"aria-describedby": g.mergedDescribedBy,
 			className: e("flex flex-col gap-2", t),
-			children: [u, x ? /* @__PURE__ */ o("p", {
-				id: S,
+			children: [u, g.invalid ? /* @__PURE__ */ s("p", {
+				id: g.errorId,
 				className: "text-xs text-basalt-destructive",
 				role: "alert",
-				children: c
+				children: o
 			}) : null]
 		})
 	});
 });
-h.displayName = "Checkbox.Group";
-var g = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ o("legend", {
+g.displayName = "Checkbox.Group";
+var _ = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s("legend", {
 	ref: r,
 	className: e("text-sm font-medium text-basalt-foreground", t),
 	...n
 }));
-g.displayName = "Checkbox.Legend";
-var _ = r.forwardRef(({ className: e, value: t, children: n, disabled: i, size: a, id: c, ...l }, u) => {
-	let d = r.useContext(f), h = d != null, g = r.useId(), _ = c ?? g, v = h ? d.value.includes(t) : void 0, y = /* @__PURE__ */ o(m, {
+_.displayName = "Checkbox.Legend";
+var v = i.forwardRef(({ className: e, value: t, children: n, disabled: r, size: a, id: o, ...l }, u) => {
+	let d = i.useContext(p), f = d != null, g = i.useId(), _ = o ?? g, v = f ? d.value.includes(t) : void 0, y = /* @__PURE__ */ s(h, {
 		ref: u,
 		...l,
 		id: _,
 		value: t,
 		size: a,
 		checked: v,
-		defaultChecked: h ? v : void 0,
-		disabled: i || d?.disabled,
+		defaultChecked: f ? v : void 0,
+		disabled: r || d?.disabled,
 		"aria-invalid": d?.invalid || void 0,
 		className: e,
 		onCheckedChange: (e) => {
-			h && typeof e == "boolean" && d.setValue(p(d.value, t, e));
+			f && typeof e == "boolean" && d.setValue(m(d.value, t, e));
 		}
 	});
-	return n == null ? y : /* @__PURE__ */ s("label", {
+	return n == null ? y : /* @__PURE__ */ c("label", {
 		htmlFor: _,
 		className: "flex items-center gap-2 text-sm text-basalt-foreground",
 		children: [y, n]
 	});
 });
-_.displayName = "Checkbox.Item";
-var v = Object.assign(m, {
-	Group: h,
-	Legend: g,
-	Item: _
+v.displayName = "Checkbox.Item";
+var y = Object.assign(h, {
+	Group: g,
+	Legend: _,
+	Item: v
 });
 //#endregion
-export { v as Checkbox };
+export { y as Checkbox };
 
 //# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { Check, Minus } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\nexport type CheckboxSize = \"sm\" | \"default\";\n\nconst CHECKBOX_SIZE_CLASS: Record<CheckboxSize, string> = {\n\tsm: \"h-3 w-3\",\n\tdefault: \"h-4 w-4\",\n};\n\nconst CHECK_ICON_CLASS: Record<CheckboxSize, string> = {\n\tsm: \"hidden h-3 w-3 group-data-[state=checked]:block\",\n\tdefault: \"hidden h-4 w-4 group-data-[state=checked]:block\",\n};\n\nconst MINUS_ICON_CLASS: Record<CheckboxSize, string> = {\n\tsm: \"hidden h-2.5 w-2.5 group-data-[state=indeterminate]:block\",\n\tdefault: \"hidden h-3 w-3 group-data-[state=indeterminate]:block\",\n};\n\ntype CheckboxGroupContextValue = {\n\tvalue: string[];\n\tsetValue: (next: string[]) => void;\n\tdisabled: boolean;\n\tinvalid: boolean;\n};\n\nconst CheckboxGroupContext = React.createContext<CheckboxGroupContextValue | null>(null);\n\nfunction nextCheckboxGroupValue(current: string[], itemValue: string, checked: boolean): string[] {\n\tif (checked) {\n\t\treturn current.includes(itemValue) ? current : [...current, itemValue];\n\t}\n\treturn current.filter((entry) => entry !== itemValue);\n}\n\nexport type CheckboxProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n\t\"checked\"\n> & {\n\t/**\n\t * The controlled checked state of the checkbox.\n\t */\n\tchecked?: boolean | \"indeterminate\";\n\t/**\n\t * The visual size of the checkbox.\n\t * @default default\n\t */\n\tsize?: CheckboxSize;\n};\n\nexport type CheckboxGroupProps = Omit<\n\tReact.ComponentPropsWithoutRef<\"fieldset\">,\n\t\"onChange\" | \"defaultValue\" | \"disabled\"\n> & {\n\t/**\n\t * The controlled selected values.\n\t */\n\tvalue?: string[];\n\t/**\n\t * The initially selected values.\n\t */\n\tdefaultValue?: string[];\n\t/**\n\t * Called when the selected values change.\n\t */\n\tonValueChange?: (value: string[]) => void;\n\t/**\n\t * Marks the group invalid and shows alert copy.\n\t */\n\terror?: React.ReactNode;\n\t/**\n\t * Disable every item in the group.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport type CheckboxLegendProps = React.ComponentPropsWithoutRef<\"legend\">;\n\nexport type CheckboxItemProps = Omit<\n\tCheckboxProps,\n\t\"checked\" | \"defaultChecked\" | \"onCheckedChange\" | \"value\"\n> & {\n\t/**\n\t * The value stored in the group when this item is checked.\n\t */\n\tvalue: string;\n};\n\nconst CheckboxRoot = React.forwardRef<\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxProps\n>(({ className, size = \"default\", ...props }, ref) => (\n\t<CheckboxPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"group peer shrink-0 rounded-[4px] border border-basalt-primary data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground data-[state=indeterminate]:bg-basalt-primary data-[state=indeterminate]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\tCHECKBOX_SIZE_CLASS[size],\n\t\t\tFOCUS_RING,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n\t\t\t<Check className={CHECK_ICON_CLASS[size]} />\n\t\t\t<Minus className={MINUS_ICON_CLASS[size]} />\n\t\t</CheckboxPrimitive.Indicator>\n\t</CheckboxPrimitive.Root>\n));\nCheckboxRoot.displayName = CheckboxPrimitive.Root.displayName;\n\nconst CheckboxGroup = React.forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonValueChange,\n\t\t\terror,\n\t\t\tdisabled = false,\n\t\t\tchildren,\n\t\t\t\"aria-describedby\": describedBy,\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst generatedId = React.useId();\n\t\tconst nodeRef = React.useRef<HTMLFieldSetElement | null>(null);\n\t\tconst [uncontrolled, setUncontrolled] = React.useState(defaultValue ?? []);\n\t\tconst current = value ?? uncontrolled;\n\t\tconst invalid = Boolean(error);\n\t\tconst errorId = `${generatedId}-error`;\n\t\tconst mergedDescribedBy =\n\t\t\t[invalid ? errorId : null, describedBy].filter(Boolean).join(\" \") || undefined;\n\t\tconst resetEventRef = React.useRef<Event | null>(null);\n\t\tconst setValue = React.useCallback(\n\t\t\t(next: string[]) => {\n\t\t\t\tconst activeReset = resetEventRef.current;\n\t\t\t\tif (activeReset && activeReset.eventPhase !== Event.NONE) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (value === undefined) {\n\t\t\t\t\tsetUncontrolled(next);\n\t\t\t\t}\n\t\t\t\tonValueChange?.(next);\n\t\t\t},\n\t\t\t[onValueChange, value],\n\t\t);\n\t\tconst setRefs = React.useCallback(\n\t\t\t(node: HTMLFieldSetElement | null) => {\n\t\t\t\tnodeRef.current = node;\n\t\t\t\tif (!ref) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\tconst cleanup = (ref as React.RefCallback<HTMLFieldSetElement>)(node);\n\t\t\t\t\tif (typeof cleanup === \"function\") {\n\t\t\t\t\t\treturn () => {\n\t\t\t\t\t\t\tnodeRef.current = null;\n\t\t\t\t\t\t\tcleanup();\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\tnodeRef.current = null;\n\t\t\t\t\t\tref(null);\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\t(ref as React.RefObject<HTMLFieldSetElement | null>).current = node;\n\t\t\t\treturn () => {\n\t\t\t\t\tnodeRef.current = null;\n\t\t\t\t\t(ref as React.RefObject<HTMLFieldSetElement | null>).current = null;\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ref],\n\t\t);\n\t\tconst formAttr = props.form;\n\t\tconst latestConfigRef = React.useRef({\n\t\t\tdefaultValue,\n\t\t\tvalue,\n\t\t});\n\t\tReact.useEffect(() => {\n\t\t\tlatestConfigRef.current = {\n\t\t\t\tdefaultValue,\n\t\t\t\tvalue,\n\t\t\t};\n\t\t});\n\n\t\tReact.useEffect(() => {\n\t\t\tconst form = nodeRef.current?.form;\n\t\t\tif (!form || (formAttr && form.id !== formAttr)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tlet disposed = false;\n\t\t\tconst timers = new Set<ReturnType<typeof setTimeout>>();\n\t\t\tconst onReset = (event: Event) => {\n\t\t\t\tresetEventRef.current = event;\n\t\t\t\tconst timer = setTimeout(() => {\n\t\t\t\t\ttimers.delete(timer);\n\t\t\t\t\tif (disposed || event.defaultPrevented) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst cfg = latestConfigRef.current;\n\t\t\t\t\tif (cfg.value === undefined) {\n\t\t\t\t\t\tsetUncontrolled(cfg.defaultValue ?? []);\n\t\t\t\t\t}\n\t\t\t\t}, 0);\n\t\t\t\ttimers.add(timer);\n\t\t\t};\n\t\t\tform.addEventListener(\"reset\", onReset, true);\n\t\t\treturn () => {\n\t\t\t\tdisposed = true;\n\t\t\t\tresetEventRef.current = null;\n\t\t\t\tfor (const timer of timers) {\n\t\t\t\t\tclearTimeout(timer);\n\t\t\t\t}\n\t\t\t\ttimers.clear();\n\t\t\t\tform.removeEventListener(\"reset\", onReset, true);\n\t\t\t};\n\t\t}, [formAttr]);\n\t\treturn (\n\t\t\t<CheckboxGroupContext.Provider value={{ value: current, setValue, disabled, invalid }}>\n\t\t\t\t<fieldset\n\t\t\t\t\tref={setRefs}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\t\taria-describedby={mergedDescribedBy}\n\t\t\t\t\tclassName={cn(\"flex flex-col gap-2\", className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t\t{invalid ? (\n\t\t\t\t\t\t<p id={errorId} className=\"text-xs text-basalt-destructive\" role=\"alert\">\n\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</fieldset>\n\t\t\t</CheckboxGroupContext.Provider>\n\t\t);\n\t},\n);\nCheckboxGroup.displayName = \"Checkbox.Group\";\n\nconst CheckboxLegend = React.forwardRef<HTMLLegendElement, CheckboxLegendProps>(\n\t({ className, ...props }, ref) => (\n\t\t<legend\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-sm font-medium text-basalt-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCheckboxLegend.displayName = \"Checkbox.Legend\";\n\nconst CheckboxItem = React.forwardRef<\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxItemProps\n>(({ className, value, children, disabled, size, id, ...props }, ref) => {\n\tconst group = React.useContext(CheckboxGroupContext);\n\tconst grouped = group != null;\n\tconst generatedId = React.useId();\n\tconst controlId = id ?? generatedId;\n\tconst isChecked = grouped ? group.value.includes(value) : undefined;\n\tconst box = (\n\t\t<CheckboxRoot\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\tid={controlId}\n\t\t\tvalue={value}\n\t\t\tsize={size}\n\t\t\tchecked={isChecked}\n\t\t\tdefaultChecked={grouped ? isChecked : undefined}\n\t\t\tdisabled={disabled || group?.disabled}\n\t\t\taria-invalid={group?.invalid || undefined}\n\t\t\tclassName={className}\n\t\t\tonCheckedChange={(next) => {\n\t\t\t\tif (grouped && typeof next === \"boolean\") {\n\t\t\t\t\tgroup.setValue(nextCheckboxGroupValue(group.value, value, next));\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t);\n\tif (children == null) {\n\t\treturn box;\n\t}\n\treturn (\n\t\t<label htmlFor={controlId} className=\"flex items-center gap-2 text-sm text-basalt-foreground\">\n\t\t\t{box}\n\t\t\t{children}\n\t\t</label>\n\t);\n});\nCheckboxItem.displayName = \"Checkbox.Item\";\n\nexport const Checkbox = Object.assign(CheckboxRoot, {\n\tGroup: CheckboxGroup,\n\tLegend: CheckboxLegend,\n\tItem: CheckboxItem,\n});\n"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { Check, Minus } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useCheckableGroup } from \"../utils/use-checkable-group\";\nimport { FOCUS_RING } from \"./overlay\";\n\nexport type CheckboxSize = \"sm\" | \"default\";\n\nconst CHECKBOX_SIZE_CLASS: Record<CheckboxSize, string> = {\n\tsm: \"h-3 w-3\",\n\tdefault: \"h-4 w-4\",\n};\n\nconst CHECK_ICON_CLASS: Record<CheckboxSize, string> = {\n\tsm: \"hidden h-3 w-3 group-data-[state=checked]:block\",\n\tdefault: \"hidden h-4 w-4 group-data-[state=checked]:block\",\n};\n\nconst MINUS_ICON_CLASS: Record<CheckboxSize, string> = {\n\tsm: \"hidden h-2.5 w-2.5 group-data-[state=indeterminate]:block\",\n\tdefault: \"hidden h-3 w-3 group-data-[state=indeterminate]:block\",\n};\n\ntype CheckboxGroupContextValue = {\n\tvalue: string[];\n\tsetValue: (next: string[]) => void;\n\tdisabled: boolean;\n\tinvalid: boolean;\n};\n\nconst CheckboxGroupContext = React.createContext<CheckboxGroupContextValue | null>(null);\n\nfunction nextCheckboxGroupValue(current: string[], itemValue: string, checked: boolean): string[] {\n\tif (checked) {\n\t\treturn current.includes(itemValue) ? current : [...current, itemValue];\n\t}\n\treturn current.filter((entry) => entry !== itemValue);\n}\n\nexport type CheckboxProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n\t\"checked\"\n> & {\n\t/**\n\t * The controlled checked state of the checkbox.\n\t */\n\tchecked?: boolean | \"indeterminate\";\n\t/**\n\t * The visual size of the checkbox.\n\t * @default default\n\t */\n\tsize?: CheckboxSize;\n};\n\nexport type CheckboxGroupProps = Omit<\n\tReact.ComponentPropsWithoutRef<\"fieldset\">,\n\t\"onChange\" | \"defaultValue\" | \"disabled\"\n> & {\n\t/**\n\t * The controlled selected values.\n\t */\n\tvalue?: string[];\n\t/**\n\t * The initially selected values.\n\t */\n\tdefaultValue?: string[];\n\t/**\n\t * Called when the selected values change.\n\t */\n\tonValueChange?: (value: string[]) => void;\n\t/**\n\t * Marks the group invalid and shows alert copy.\n\t */\n\terror?: React.ReactNode;\n\t/**\n\t * Disable every item in the group.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport type CheckboxLegendProps = React.ComponentPropsWithoutRef<\"legend\">;\n\nexport type CheckboxItemProps = Omit<\n\tCheckboxProps,\n\t\"checked\" | \"defaultChecked\" | \"onCheckedChange\" | \"value\"\n> & {\n\t/**\n\t * The value stored in the group when this item is checked.\n\t */\n\tvalue: string;\n};\n\nconst CheckboxRoot = React.forwardRef<\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxProps\n>(({ className, size = \"default\", ...props }, ref) => (\n\t<CheckboxPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"group peer shrink-0 rounded-[4px] border border-basalt-primary data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground data-[state=indeterminate]:bg-basalt-primary data-[state=indeterminate]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\tCHECKBOX_SIZE_CLASS[size],\n\t\t\tFOCUS_RING,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n\t\t\t<Check className={CHECK_ICON_CLASS[size]} />\n\t\t\t<Minus className={MINUS_ICON_CLASS[size]} />\n\t\t</CheckboxPrimitive.Indicator>\n\t</CheckboxPrimitive.Root>\n));\nCheckboxRoot.displayName = CheckboxPrimitive.Root.displayName;\n\nconst CheckboxGroup = React.forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonValueChange,\n\t\t\terror,\n\t\t\tdisabled = false,\n\t\t\tchildren,\n\t\t\t\"aria-describedby\": describedBy,\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst group = useCheckableGroup({\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonValueChange,\n\t\t\terror,\n\t\t\tdescribedBy,\n\t\t\tariaInvalid,\n\t\t\tform: props.form,\n\t\t\tref,\n\t\t});\n\t\treturn (\n\t\t\t<CheckboxGroupContext.Provider\n\t\t\t\tvalue={{ value: group.current, setValue: group.setValue, disabled, invalid: group.invalid }}\n\t\t\t>\n\t\t\t\t<fieldset\n\t\t\t\t\tref={group.setRefs}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-invalid={group.ariaInvalid}\n\t\t\t\t\taria-describedby={group.mergedDescribedBy}\n\t\t\t\t\tclassName={cn(\"flex flex-col gap-2\", className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t\t{group.invalid ? (\n\t\t\t\t\t\t<p id={group.errorId} className=\"text-xs text-basalt-destructive\" role=\"alert\">\n\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</fieldset>\n\t\t\t</CheckboxGroupContext.Provider>\n\t\t);\n\t},\n);\nCheckboxGroup.displayName = \"Checkbox.Group\";\n\nconst CheckboxLegend = React.forwardRef<HTMLLegendElement, CheckboxLegendProps>(\n\t({ className, ...props }, ref) => (\n\t\t<legend\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-sm font-medium text-basalt-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCheckboxLegend.displayName = \"Checkbox.Legend\";\n\nconst CheckboxItem = React.forwardRef<\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxItemProps\n>(({ className, value, children, disabled, size, id, ...props }, ref) => {\n\tconst group = React.useContext(CheckboxGroupContext);\n\tconst grouped = group != null;\n\tconst generatedId = React.useId();\n\tconst controlId = id ?? generatedId;\n\tconst isChecked = grouped ? group.value.includes(value) : undefined;\n\tconst box = (\n\t\t<CheckboxRoot\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\tid={controlId}\n\t\t\tvalue={value}\n\t\t\tsize={size}\n\t\t\tchecked={isChecked}\n\t\t\tdefaultChecked={grouped ? isChecked : undefined}\n\t\t\tdisabled={disabled || group?.disabled}\n\t\t\taria-invalid={group?.invalid || undefined}\n\t\t\tclassName={className}\n\t\t\tonCheckedChange={(next) => {\n\t\t\t\tif (grouped && typeof next === \"boolean\") {\n\t\t\t\t\tgroup.setValue(nextCheckboxGroupValue(group.value, value, next));\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t);\n\tif (children == null) {\n\t\treturn box;\n\t}\n\treturn (\n\t\t<label htmlFor={controlId} className=\"flex items-center gap-2 text-sm text-basalt-foreground\">\n\t\t\t{box}\n\t\t\t{children}\n\t\t</label>\n\t);\n});\nCheckboxItem.displayName = \"Checkbox.Item\";\n\nexport const Checkbox = Object.assign(CheckboxRoot, {\n\tGroup: CheckboxGroup,\n\tLegend: CheckboxLegend,\n\tItem: CheckboxItem,\n});\n"],"mappings":";;;;;;;;;;AAUA,IAAM,IAAoD;CACzD,IAAI;CACJ,SAAS;AACV,GAEM,IAAiD;CACtD,IAAI;CACJ,SAAS;AACV,GAEM,IAAiD;CACtD,IAAI;CACJ,SAAS;AACV,GASM,IAAuB,EAAM,cAAgD,IAAI;AAEvF,SAAS,EAAuB,GAAmB,GAAmB,GAA4B;CAIjG,OAHI,IACI,EAAQ,SAAS,CAAS,IAAI,IAAU,CAAC,GAAG,GAAS,CAAS,IAE/D,EAAQ,QAAQ,MAAU,MAAU,CAAS;AACrD;AAwDA,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,UAAO,WAAW,GAAG,KAAS,MAC7C,kBAAC,EAAkB,MAAnB;CACM;CACL,WAAW,EACV,GACA,oTACA,EAAoB,IACpB,GACA,CACD;CACA,GAAI;CAEJ,UAAA,kBAAC,EAAkB,WAAnB;EAA6B,WAAU;EAAvC,UAAA,CACC,kBAAC,GAAD,EAAO,WAAW,EAAiB,GAAQ,CAAA,GAC3C,kBAAC,GAAD,EAAO,WAAW,EAAiB,GAAQ,CAAA,CACf;;AACN,CAAA,CACxB;AACD,EAAa,cAAc,EAAkB,KAAK;AAElD,IAAM,IAAgB,EAAM,YAE1B,EACC,cACA,UACA,iBACA,kBACA,UACA,cAAW,IACX,aACA,oBAAoB,GACpB,gBAAgB,GAChB,GAAG,KAEJ,MACI;CACJ,IAAM,IAAQ,EAAkB;EAC/B;EACA;EACA;EACA;EACA;EACA;EACA,MAAM,EAAM;EACZ;CACD,CAAC;CACD,OACC,kBAAC,EAAqB,UAAtB;EACC,OAAO;GAAE,OAAO,EAAM;GAAS,UAAU,EAAM;GAAU;GAAU,SAAS,EAAM;EAAQ;EAE1F,UAAA,kBAAC,YAAD;GACC,KAAK,EAAM;GACX,GAAI;GACM;GACV,gBAAc,EAAM;GACpB,oBAAkB,EAAM;GACxB,WAAW,EAAG,uBAAuB,CAAS;GAN/C,UAAA,CAQE,GACA,EAAM,UACN,kBAAC,KAAD;IAAG,IAAI,EAAM;IAAS,WAAU;IAAkC,MAAK;IACrE,UAAA;GACC,CAAA,IACA,IACK;;CACoB,CAAA;AAEjC,CACD;AACA,EAAc,cAAc;AAE5B,IAAM,IAAiB,EAAM,YAC3B,EAAE,cAAW,GAAG,KAAS,MACzB,kBAAC,UAAD;CACM;CACL,WAAW,EAAG,8CAA8C,CAAS;CACrE,GAAI;AACJ,CAAA,CAEH;AACA,EAAe,cAAc;AAE7B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,UAAO,aAAU,aAAU,SAAM,OAAI,GAAG,KAAS,MAAQ;CACxE,IAAM,IAAQ,EAAM,WAAW,CAAoB,GAC7C,IAAU,KAAS,MACnB,IAAc,EAAM,MAAM,GAC1B,IAAY,KAAM,GAClB,IAAY,IAAU,EAAM,MAAM,SAAS,CAAK,IAAI,KAAA,GACpD,IACL,kBAAC,GAAD;EACM;EACL,GAAI;EACJ,IAAI;EACG;EACD;EACN,SAAS;EACT,gBAAgB,IAAU,IAAY,KAAA;EACtC,UAAU,KAAY,GAAO;EAC7B,gBAAc,GAAO,WAAW,KAAA;EACrB;EACX,kBAAkB,MAAS;GAC1B,AAAI,KAAW,OAAO,KAAS,aAC9B,EAAM,SAAS,EAAuB,EAAM,OAAO,GAAO,CAAI,CAAC;EAEjE;CACA,CAAA;CAKF,OAHI,KAAY,OACR,IAGP,kBAAC,SAAD;EAAO,SAAS;EAAW,WAAU;EAArC,UAAA,CACE,GACA,CACK;;AAET,CAAC;AACD,EAAa,cAAc;AAE3B,IAAa,IAAW,OAAO,OAAO,GAAc;CACnD,OAAO;CACP,QAAQ;CACR,MAAM;AACP,CAAC"}

package/dist/components/code.js

@@ -9,7 +9,7 @@ function i(e) {
 	for (let o of e.matchAll(r)) {
 		let r = o.index ?? 0;
 		r > i && t.push(e.slice(i, r));
-		let s = o[1] ? "text-basalt-muted-foreground" : o[2] ? "text-basalt-chart-5" : o[3] ? "text-basalt-primary" : o[4] ? "text-basalt-chart-4" : "text-basalt-primary";
+		let s = o[1] ? "text-basalt-muted-foreground" : o[2] ? "text-basalt-chart-5" : o[4] ? "text-basalt-chart-4" : "text-basalt-primary";
 		t.push(/* @__PURE__ */ n("span", {
 			className: s,
 			children: o[0]

package/dist/components/code.js.map

@@ -1 +1 @@
-{"version":3,"file":"code.js","names":[],"sources":["../../src/components/code.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\n\nconst TOKEN =\n\t/(\\/\\/[^\\n]*)|(\"[^\"]*\"|'[^']*'|`[^`]*`)|\\b(import|from|export|default|async|await|function|return|const|let|var|type|interface|as|if|else|throw|new|typeof)\\b|(\\b\\d+\\b)|(<\\/?[A-Za-z][\\w.-]*)/g;\n\nfunction highlight(code: string): ReactNode[] {\n\tconst nodes: ReactNode[] = [];\n\tlet last = 0;\n\tlet key = 0;\n\tfor (const match of code.matchAll(TOKEN)) {\n\t\tconst index = match.index ?? 0;\n\t\tif (index > last) {\n\t\t\tnodes.push(code.slice(last, index));\n\t\t}\n\t\tconst className = match[1]\n\t\t\t? \"text-basalt-muted-foreground\"\n\t\t\t: match[2]\n\t\t\t\t? \"text-basalt-chart-5\"\n\t\t\t\t: match[3]\n\t\t\t\t\t? \"text-basalt-primary\"\n\t\t\t\t\t: match[4]\n\t\t\t\t\t\t? \"text-basalt-chart-4\"\n\t\t\t\t\t\t: \"text-basalt-primary\";\n\t\tnodes.push(\n\t\t\t<span key={key} className={className}>\n\t\t\t\t{match[0]}\n\t\t\t</span>,\n\t\t);\n\t\tkey += 1;\n\t\tlast = index + match[0].length;\n\t}\n\tif (last < code.length) {\n\t\tnodes.push(code.slice(last));\n\t}\n\treturn nodes;\n}\n\nexport type CodeProps = {\n\t/**\n\t * Additional classes for the inline code.\n\t */\n\tclassName?: string;\n};\n\nexport function Code({ className, ...props }: CodeProps & HTMLAttributes<HTMLElement>) {\n\treturn (\n\t\t<code\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-basalt-sm bg-basalt-secondary px-1.5 py-0.5 font-mono text-[13px] text-basalt-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type CodeBlockProps = {\n\t/**\n\t * Additional classes for the block.\n\t */\n\tclassName?: string;\n};\n\nexport function CodeBlock({\n\tclassName,\n\t...props\n}: CodeBlockProps & HTMLAttributes<HTMLPreElement>) {\n\treturn (\n\t\t<pre\n\t\t\tclassName={controlSurfaceClass(\n\t\t\t\tcn(\"overflow-x-auto p-4 font-mono text-basalt-foreground\", className),\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type CodeHighlightedProps = {\n\t/**\n\t * Source text to highlight.\n\t */\n\tcode: string;\n\t/**\n\t * Additional classes for the block.\n\t */\n\tclassName?: string;\n};\n\nexport function CodeHighlighted({\n\tcode,\n\tclassName,\n\t...props\n}: CodeHighlightedProps & HTMLAttributes<HTMLPreElement>) {\n\treturn (\n\t\t<pre\n\t\t\tclassName={controlSurfaceClass(cn(\"overflow-x-auto p-4 text-basalt-foreground\", className))}\n\t\t\t{...props}\n\t\t>\n\t\t\t<code className=\"font-mono leading-6\">{highlight(code)}</code>\n\t\t</pre>\n\t);\n}\n"],"mappings":";;;;;AAIA,IAAM,IACL;AAED,SAAS,EAAU,GAA2B;CAC7C,IAAM,IAAqB,CAAC,GACxB,IAAO,GACP,IAAM;CACV,KAAK,IAAM,KAAS,EAAK,SAAS,CAAK,GAAG;EACzC,IAAM,IAAQ,EAAM,SAAS;EAC7B,AAAI,IAAQ,KACX,EAAM,KAAK,EAAK,MAAM,GAAM,CAAK,CAAC;EAEnC,IAAM,IAAY,EAAM,KACrB,iCACA,EAAM,KACL,wBACA,EAAM,KACL,wBACA,EAAM,KACL,wBACA;EAON,AANA,EAAM,KACL,kBAAC,QAAD;GAA2B;GACzB,UAAA,EAAM;EACF,GAFK,CAEL,CACP,GACA,KAAO,GACP,IAAO,IAAQ,EAAM,EAAE,CAAC;CACzB;CAIA,OAHI,IAAO,EAAK,UACf,EAAM,KAAK,EAAK,MAAM,CAAI,CAAC,GAErB;AACR;AASA,SAAgB,EAAK,EAAE,cAAW,GAAG,KAAkD;CACtF,OACC,kBAAC,QAAD;EACC,WAAW,EACV,oGACA,CACD;EACA,GAAI;CACJ,CAAA;AAEH;AASA,SAAgB,EAAU,EACzB,cACA,GAAG,KACgD;CACnD,OACC,kBAAC,OAAD;EACC,WAAW,EACV,EAAG,wDAAwD,CAAS,CACrE;EACA,GAAI;CACJ,CAAA;AAEH;AAaA,SAAgB,EAAgB,EAC/B,SACA,cACA,GAAG,KACsD;CACzD,OACC,kBAAC,OAAD;EACC,WAAW,EAAoB,EAAG,8CAA8C,CAAS,CAAC;EAC1F,GAAI;EAEJ,UAAA,kBAAC,QAAD;GAAM,WAAU;GAAuB,UAAA,EAAU,CAAI;EAAQ,CAAA;CACzD,CAAA;AAEP"}
+{"version":3,"file":"code.js","names":[],"sources":["../../src/components/code.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\n\nconst TOKEN =\n\t/(\\/\\/[^\\n]*)|(\"[^\"]*\"|'[^']*'|`[^`]*`)|\\b(import|from|export|default|async|await|function|return|const|let|var|type|interface|as|if|else|throw|new|typeof)\\b|(\\b\\d+\\b)|(<\\/?[A-Za-z][\\w.-]*)/g;\n\nfunction highlight(code: string): ReactNode[] {\n\tconst nodes: ReactNode[] = [];\n\tlet last = 0;\n\tlet key = 0;\n\tfor (const match of code.matchAll(TOKEN)) {\n\t\tconst index = match.index ?? 0;\n\t\tif (index > last) {\n\t\t\tnodes.push(code.slice(last, index));\n\t\t}\n\t\tconst className = match[1]\n\t\t\t? \"text-basalt-muted-foreground\"\n\t\t\t: match[2]\n\t\t\t\t? \"text-basalt-chart-5\"\n\t\t\t\t: match[4]\n\t\t\t\t\t? \"text-basalt-chart-4\"\n\t\t\t\t\t: \"text-basalt-primary\";\n\t\tnodes.push(\n\t\t\t<span key={key} className={className}>\n\t\t\t\t{match[0]}\n\t\t\t</span>,\n\t\t);\n\t\tkey += 1;\n\t\tlast = index + match[0].length;\n\t}\n\tif (last < code.length) {\n\t\tnodes.push(code.slice(last));\n\t}\n\treturn nodes;\n}\n\nexport type CodeProps = {\n\t/**\n\t * Additional classes for the inline code.\n\t */\n\tclassName?: string;\n};\n\nexport function Code({ className, ...props }: CodeProps & HTMLAttributes<HTMLElement>) {\n\treturn (\n\t\t<code\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-basalt-sm bg-basalt-secondary px-1.5 py-0.5 font-mono text-[13px] text-basalt-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type CodeBlockProps = {\n\t/**\n\t * Additional classes for the block.\n\t */\n\tclassName?: string;\n};\n\nexport function CodeBlock({\n\tclassName,\n\t...props\n}: CodeBlockProps & HTMLAttributes<HTMLPreElement>) {\n\treturn (\n\t\t<pre\n\t\t\tclassName={controlSurfaceClass(\n\t\t\t\tcn(\"overflow-x-auto p-4 font-mono text-basalt-foreground\", className),\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type CodeHighlightedProps = {\n\t/**\n\t * Source text to highlight.\n\t */\n\tcode: string;\n\t/**\n\t * Additional classes for the block.\n\t */\n\tclassName?: string;\n};\n\nexport function CodeHighlighted({\n\tcode,\n\tclassName,\n\t...props\n}: CodeHighlightedProps & HTMLAttributes<HTMLPreElement>) {\n\treturn (\n\t\t<pre\n\t\t\tclassName={controlSurfaceClass(cn(\"overflow-x-auto p-4 text-basalt-foreground\", className))}\n\t\t\t{...props}\n\t\t>\n\t\t\t<code className=\"font-mono leading-6\">{highlight(code)}</code>\n\t\t</pre>\n\t);\n}\n"],"mappings":";;;;;AAIA,IAAM,IACL;AAED,SAAS,EAAU,GAA2B;CAC7C,IAAM,IAAqB,CAAC,GACxB,IAAO,GACP,IAAM;CACV,KAAK,IAAM,KAAS,EAAK,SAAS,CAAK,GAAG;EACzC,IAAM,IAAQ,EAAM,SAAS;EAC7B,AAAI,IAAQ,KACX,EAAM,KAAK,EAAK,MAAM,GAAM,CAAK,CAAC;EAEnC,IAAM,IAAY,EAAM,KACrB,iCACA,EAAM,KACL,wBACA,EAAM,KACL,wBACA;EAOL,AANA,EAAM,KACL,kBAAC,QAAD;GAA2B;GACzB,UAAA,EAAM;EACF,GAFK,CAEL,CACP,GACA,KAAO,GACP,IAAO,IAAQ,EAAM,EAAE,CAAC;CACzB;CAIA,OAHI,IAAO,EAAK,UACf,EAAM,KAAK,EAAK,MAAM,CAAI,CAAC,GAErB;AACR;AASA,SAAgB,EAAK,EAAE,cAAW,GAAG,KAAkD;CACtF,OACC,kBAAC,QAAD;EACC,WAAW,EACV,oGACA,CACD;EACA,GAAI;CACJ,CAAA;AAEH;AASA,SAAgB,EAAU,EACzB,cACA,GAAG,KACgD;CACnD,OACC,kBAAC,OAAD;EACC,WAAW,EACV,EAAG,wDAAwD,CAAS,CACrE;EACA,GAAI;CACJ,CAAA;AAEH;AAaA,SAAgB,EAAgB,EAC/B,SACA,cACA,GAAG,KACsD;CACzD,OACC,kBAAC,OAAD;EACC,WAAW,EAAoB,EAAG,8CAA8C,CAAS,CAAC;EAC1F,GAAI;EAEJ,UAAA,kBAAC,QAAD;GAAM,WAAU;GAAuB,UAAA,EAAU,CAAI;EAAQ,CAAA;CACzD,CAAA;AAEP"}

package/dist/components/combobox.d.ts

@@ -44,4 +44,4 @@ export type ComboboxProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "
      */
     size?: InputSize;
 };
-export declare function Combobox({ items, value, defaultValue, onValueChange, name, placeholder, disabled, loading, size, className, id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rest }: ComboboxProps): import("react").JSX.Element;
+export declare function Combobox({ placeholder, ...rest }: ComboboxProps): import("react").JSX.Element;

package/dist/components/combobox.js

@@ -2,24 +2,11 @@
 import { TypeaheadField as e } from "./typeahead-field.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/combobox.tsx
-function n({ items: n, value: r, defaultValue: i, onValueChange: a, name: o, placeholder: s = "Select…", disabled: c, loading: l, size: u, className: d, id: f, "aria-label": p, "aria-describedby": m, "aria-invalid": h, ...g }) {
+function n({ placeholder: n = "Select…", ...r }) {
 	return /* @__PURE__ */ t(e, {
-		items: n,
-		value: r,
-		defaultValue: i,
-		onValueChange: a,
-		name: o,
-		placeholder: s,
-		disabled: c,
-		loading: l,
-		size: u,
-		className: d,
-		id: f,
+		placeholder: n,
 		allowFreeform: !1,
-		"aria-label": p,
-		"aria-describedby": m,
-		"aria-invalid": h,
-		...g
+		...r
 	});
 }
 //#endregion

package/dist/components/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport type { InputSize } from \"./input\";\nimport { TypeaheadField, type TypeaheadItem } from \"./typeahead-field\";\n\nexport type ComboboxItem = TypeaheadItem;\n\nexport type ComboboxProps = Omit<\n\tComponentPropsWithoutRef<\"div\">,\n\t\"children\" | \"defaultValue\" | \"onChange\"\n> & {\n\t/**\n\t * Options shown in the list. Selection must match one of these values.\n\t */\n\titems: ComboboxItem[];\n\t/**\n\t * The controlled selected value.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected value changes.\n\t */\n\tonValueChange?: (value: string) => void;\n\t/**\n\t * Native form field name.\n\t */\n\tname?: string;\n\t/**\n\t * Placeholder shown when the field is empty.\n\t * @default Select…\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Disable the field.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Disable the field and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n};\n\nexport function Combobox({\n\titems,\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\tname,\n\tplaceholder = \"Select…\",\n\tdisabled,\n\tloading,\n\tsize,\n\tclassName,\n\tid,\n\t\"aria-label\": ariaLabel,\n\t\"aria-describedby\": ariaDescribedBy,\n\t\"aria-invalid\": ariaInvalid,\n\t...rest\n}: ComboboxProps) {\n\treturn (\n\t\t<TypeaheadField\n\t\t\titems={items}\n\t\t\tvalue={value}\n\t\t\tdefaultValue={defaultValue}\n\t\t\tonValueChange={onValueChange}\n\t\t\tname={name}\n\t\t\tplaceholder={placeholder}\n\t\t\tdisabled={disabled}\n\t\t\tloading={loading}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tid={id}\n\t\t\tallowFreeform={false}\n\t\t\taria-label={ariaLabel}\n\t\t\taria-describedby={ariaDescribedBy}\n\t\t\taria-invalid={ariaInvalid}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;AAoDA,SAAgB,EAAS,EACxB,UACA,UACA,iBACA,kBACA,SACA,iBAAc,WACd,aACA,YACA,SACA,cACA,OACA,cAAc,GACd,oBAAoB,GACpB,gBAAgB,GAChB,GAAG,KACc;CACjB,OACC,kBAAC,GAAD;EACQ;EACA;EACO;EACC;EACT;EACO;EACH;EACD;EACH;EACK;EACP;EACJ,eAAe;EACf,cAAY;EACZ,oBAAkB;EAClB,gBAAc;EACd,GAAI;CACJ,CAAA;AAEH"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport type { InputSize } from \"./input\";\nimport { TypeaheadField, type TypeaheadItem } from \"./typeahead-field\";\n\nexport type ComboboxItem = TypeaheadItem;\n\nexport type ComboboxProps = Omit<\n\tComponentPropsWithoutRef<\"div\">,\n\t\"children\" | \"defaultValue\" | \"onChange\"\n> & {\n\t/**\n\t * Options shown in the list. Selection must match one of these values.\n\t */\n\titems: ComboboxItem[];\n\t/**\n\t * The controlled selected value.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected value changes.\n\t */\n\tonValueChange?: (value: string) => void;\n\t/**\n\t * Native form field name.\n\t */\n\tname?: string;\n\t/**\n\t * Placeholder shown when the field is empty.\n\t * @default Select…\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Disable the field.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Disable the field and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n};\n\nexport function Combobox({ placeholder = \"Select…\", ...rest }: ComboboxProps) {\n\treturn <TypeaheadField placeholder={placeholder} allowFreeform={false} {...rest} />;\n}\n"],"mappings":";;;;AAoDA,SAAgB,EAAS,EAAE,iBAAc,WAAW,GAAG,KAAuB;CAC7E,OAAO,kBAAC,GAAD;EAA6B;EAAa,eAAe;EAAO,GAAI;CAAO,CAAA;AACnF"}

package/dist/components/context-menu.d.ts

@@ -136,47 +136,7 @@ export interface ContextMenuItemProps extends Omit<RadixContextMenuItemProps, "d
     asChild?: RadixContextMenuItemProps["asChild"];
 }
 export declare const ContextMenuItem: React.ForwardRefExoticComponent<ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;
-export interface ContextMenuPanelProps extends Omit<React.ComponentProps<typeof ContextMenuPrimitive.Content>, "loop" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "forceMount" | "asChild" | "onCloseAutoFocus" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> {
-    /**
-     * Whether keyboard navigation should loop around item boundaries.
-     * @default false
-     */
-    loop?: RadixContextMenuContentProps["loop"];
-    /**
-     * Offset in pixels from the start or end alignment position.
-     * @default 0
-     */
-    alignOffset?: RadixContextMenuContentProps["alignOffset"];
-    /**
-     * Whether to reposition content to avoid viewport boundary collisions.
-     * @default true
-     */
-    avoidCollisions?: RadixContextMenuContentProps["avoidCollisions"];
-    /**
-     * Element or elements bounding boundary collision calculations.
-     * @default []
-     */
-    collisionBoundary?: RadixContextMenuContentProps["collisionBoundary"];
-    /**
-     * Virtual padding from collision boundaries in pixels.
-     * @default 0
-     */
-    collisionPadding?: RadixContextMenuContentProps["collisionPadding"];
-    /**
-     * Padding in pixels between popper arrow and floating panel edge.
-     * @default 0
-     */
-    arrowPadding?: RadixContextMenuContentProps["arrowPadding"];
-    /**
-     * Sticky positioning behavior along the align axis when overflowing.
-     * @default "partial"
-     */
-    sticky?: RadixContextMenuContentProps["sticky"];
-    /**
-     * Whether to hide content completely when trigger is fully occluded.
-     * @default false
-     */
-    hideWhenDetached?: RadixContextMenuContentProps["hideWhenDetached"];
+export interface ContextMenuPanelProps extends Omit<ContextMenuContentProps, "forceMount">, Pick<React.ComponentProps<typeof ContextMenuPrimitive.Content>, "ref"> {
     /**
      * Force mounting content in DOM for external animation controls.
      * When forceMount is true, the content remains mounted even when closed.
@@ -184,32 +144,6 @@ export interface ContextMenuPanelProps extends Omit<React.ComponentProps<typeof
      * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.
      */
     forceMount?: true;
-    /**
-     * Change the default rendered div element to the child element, merging props and behavior.
-     * Content forwards ref to HTMLDivElement and inherits native div attributes.
-     * @default false
-     */
-    asChild?: RadixContextMenuContentProps["asChild"];
-    /**
-     * Callback fired when auto-focusing on close. Can be prevented.
-     */
-    onCloseAutoFocus?: RadixContextMenuContentProps["onCloseAutoFocus"];
-    /**
-     * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.
-     */
-    onEscapeKeyDown?: RadixContextMenuContentProps["onEscapeKeyDown"];
-    /**
-     * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.
-     */
-    onPointerDownOutside?: RadixContextMenuContentProps["onPointerDownOutside"];
-    /**
-     * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.
-     */
-    onFocusOutside?: RadixContextMenuContentProps["onFocusOutside"];
-    /**
-     * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.
-     */
-    onInteractOutside?: RadixContextMenuContentProps["onInteractOutside"];
 }
 export declare function ContextMenuPanel({ className, ...props }: ContextMenuPanelProps): React.JSX.Element;
 export {};

package/dist/components/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":[],"sources":["../../src/components/context-menu.tsx"],"sourcesContent":["import * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { overlayItemClass, overlayPanelClass } from \"./overlay\";\n\ntype RadixContextMenuProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>;\ntype RadixContextMenuTriggerProps = React.ComponentPropsWithoutRef<\n\ttypeof ContextMenuPrimitive.Trigger\n>;\ntype RadixContextMenuContentProps = React.ComponentPropsWithoutRef<\n\ttypeof ContextMenuPrimitive.Content\n>;\ntype RadixContextMenuItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>;\n\nexport interface ContextMenuProps\n\textends Omit<RadixContextMenuProps, \"open\" | \"onOpenChange\" | \"dir\" | \"modal\"> {\n\t/**\n\t * Controlled open state of the context menu.\n\t * When set to true before pointer trigger interaction, positions at the top-left of the viewport.\n\t */\n\topen?: RadixContextMenuProps[\"open\"];\n\t/**\n\t * Callback invoked when open state changes.\n\t */\n\tonOpenChange?: RadixContextMenuProps[\"onOpenChange\"];\n\t/**\n\t * The reading direction of the context menu.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixContextMenuProps[\"dir\"];\n\t/**\n\t * Whether the context menu is modal, preventing outside interactions.\n\t * @default true\n\t */\n\tmodal?: RadixContextMenuProps[\"modal\"];\n}\n\nexport const ContextMenu = ContextMenuPrimitive.Root;\n\nexport interface ContextMenuTriggerProps\n\textends Omit<RadixContextMenuTriggerProps, \"disabled\" | \"asChild\"> {\n\t/**\n\t * Disable the context menu trigger from opening on right-click.\n\t * @default false\n\t */\n\tdisabled?: RadixContextMenuTriggerProps[\"disabled\"];\n\t/**\n\t * Change the default rendered span element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLSpanElement and inherits native span attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuTriggerProps[\"asChild\"];\n}\n\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger;\n\nexport interface ContextMenuContentProps\n\textends Omit<\n\t\tRadixContextMenuContentProps,\n\t\t| \"loop\"\n\t\t| \"alignOffset\"\n\t\t| \"avoidCollisions\"\n\t\t| \"collisionBoundary\"\n\t\t| \"collisionPadding\"\n\t\t| \"arrowPadding\"\n\t\t| \"sticky\"\n\t\t| \"hideWhenDetached\"\n\t\t| \"forceMount\"\n\t\t| \"asChild\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"onFocusOutside\"\n\t\t| \"onInteractOutside\"\n\t> {\n\t/**\n\t * Whether keyboard navigation should loop around item boundaries.\n\t * @default false\n\t */\n\tloop?: RadixContextMenuContentProps[\"loop\"];\n\t/**\n\t * Offset in pixels from the start or end alignment position.\n\t * @default 0\n\t */\n\talignOffset?: RadixContextMenuContentProps[\"alignOffset\"];\n\t/**\n\t * Whether to reposition content to avoid viewport boundary collisions.\n\t * @default true\n\t */\n\tavoidCollisions?: RadixContextMenuContentProps[\"avoidCollisions\"];\n\t/**\n\t * Element or elements bounding boundary collision calculations.\n\t * @default []\n\t */\n\tcollisionBoundary?: RadixContextMenuContentProps[\"collisionBoundary\"];\n\t/**\n\t * Virtual padding from collision boundaries in pixels.\n\t * @default 0\n\t */\n\tcollisionPadding?: RadixContextMenuContentProps[\"collisionPadding\"];\n\t/**\n\t * Padding in pixels between popper arrow and floating panel edge.\n\t * @default 0\n\t */\n\tarrowPadding?: RadixContextMenuContentProps[\"arrowPadding\"];\n\t/**\n\t * Sticky positioning behavior along the align axis when overflowing.\n\t * @default \"partial\"\n\t */\n\tsticky?: RadixContextMenuContentProps[\"sticky\"];\n\t/**\n\t * Whether to hide content completely when trigger is fully occluded.\n\t * @default false\n\t */\n\thideWhenDetached?: RadixContextMenuContentProps[\"hideWhenDetached\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * Note: Bare ContextMenuContent mounts directly without a built-in Portal wrapper.\n\t */\n\tforceMount?: true;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuContentProps[\"asChild\"];\n\t/**\n\t * Callback fired when auto-focusing on close. Can be prevented.\n\t */\n\tonCloseAutoFocus?: RadixContextMenuContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.\n\t */\n\tonEscapeKeyDown?: RadixContextMenuContentProps[\"onEscapeKeyDown\"];\n\t/**\n\t * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonPointerDownOutside?: RadixContextMenuContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonFocusOutside?: RadixContextMenuContentProps[\"onFocusOutside\"];\n\t/**\n\t * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonInteractOutside?: RadixContextMenuContentProps[\"onInteractOutside\"];\n}\n\nexport const ContextMenuContent = ContextMenuPrimitive.Content;\n\nexport interface ContextMenuItemProps\n\textends Omit<RadixContextMenuItemProps, \"disabled\" | \"onSelect\" | \"textValue\" | \"asChild\"> {\n\t/**\n\t * Disable the context menu item.\n\t * @default false\n\t */\n\tdisabled?: RadixContextMenuItemProps[\"disabled\"];\n\t/**\n\t * Event handler called when the context menu item is selected (via click or keyboard).\n\t */\n\tonSelect?: RadixContextMenuItemProps[\"onSelect\"];\n\t/**\n\t * Optional text used for typeahead navigation. By default typeahead uses item text content.\n\t */\n\ttextValue?: RadixContextMenuItemProps[\"textValue\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Item forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuItemProps[\"asChild\"];\n}\n\nexport const ContextMenuItem = React.forwardRef<\n\tReact.ElementRef<typeof ContextMenuPrimitive.Item>,\n\tContextMenuItemProps\n>(({ className, ...props }, ref) => (\n\t<ContextMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={overlayItemClass(\n\t\t\tcn(\n\t\t\t\t\"relative outline-hidden focus:bg-basalt-accent data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t\t{...props}\n\t/>\n));\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;\n\nexport interface ContextMenuPanelProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof ContextMenuPrimitive.Content>,\n\t\t| \"loop\"\n\t\t| \"alignOffset\"\n\t\t| \"avoidCollisions\"\n\t\t| \"collisionBoundary\"\n\t\t| \"collisionPadding\"\n\t\t| \"arrowPadding\"\n\t\t| \"sticky\"\n\t\t| \"hideWhenDetached\"\n\t\t| \"forceMount\"\n\t\t| \"asChild\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"onFocusOutside\"\n\t\t| \"onInteractOutside\"\n\t> {\n\t/**\n\t * Whether keyboard navigation should loop around item boundaries.\n\t * @default false\n\t */\n\tloop?: RadixContextMenuContentProps[\"loop\"];\n\t/**\n\t * Offset in pixels from the start or end alignment position.\n\t * @default 0\n\t */\n\talignOffset?: RadixContextMenuContentProps[\"alignOffset\"];\n\t/**\n\t * Whether to reposition content to avoid viewport boundary collisions.\n\t * @default true\n\t */\n\tavoidCollisions?: RadixContextMenuContentProps[\"avoidCollisions\"];\n\t/**\n\t * Element or elements bounding boundary collision calculations.\n\t * @default []\n\t */\n\tcollisionBoundary?: RadixContextMenuContentProps[\"collisionBoundary\"];\n\t/**\n\t * Virtual padding from collision boundaries in pixels.\n\t * @default 0\n\t */\n\tcollisionPadding?: RadixContextMenuContentProps[\"collisionPadding\"];\n\t/**\n\t * Padding in pixels between popper arrow and floating panel edge.\n\t * @default 0\n\t */\n\tarrowPadding?: RadixContextMenuContentProps[\"arrowPadding\"];\n\t/**\n\t * Sticky positioning behavior along the align axis when overflowing.\n\t * @default \"partial\"\n\t */\n\tsticky?: RadixContextMenuContentProps[\"sticky\"];\n\t/**\n\t * Whether to hide content completely when trigger is fully occluded.\n\t * @default false\n\t */\n\thideWhenDetached?: RadixContextMenuContentProps[\"hideWhenDetached\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * When forceMount is true, the content remains mounted even when closed.\n\t * The caller is responsible for visibility transitions and unmounting after animation completes.\n\t * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.\n\t */\n\tforceMount?: true;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuContentProps[\"asChild\"];\n\t/**\n\t * Callback fired when auto-focusing on close. Can be prevented.\n\t */\n\tonCloseAutoFocus?: RadixContextMenuContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.\n\t */\n\tonEscapeKeyDown?: RadixContextMenuContentProps[\"onEscapeKeyDown\"];\n\t/**\n\t * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonPointerDownOutside?: RadixContextMenuContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonFocusOutside?: RadixContextMenuContentProps[\"onFocusOutside\"];\n\t/**\n\t * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonInteractOutside?: RadixContextMenuContentProps[\"onInteractOutside\"];\n}\n\nexport function ContextMenuPanel({ className, ...props }: ContextMenuPanelProps) {\n\treturn (\n\t\t<ContextMenuPrimitive.Portal forceMount={props.forceMount}>\n\t\t\t<ContextMenuPrimitive.Content\n\t\t\t\tclassName={overlayPanelClass(cn(\"min-w-40\", className))}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</ContextMenuPrimitive.Portal>\n\t);\n}\n"],"mappings":";;;;;;;AAqCA,IAAa,IAAc,EAAqB,MAiBnC,IAAqB,EAAqB,SA8F1C,IAAqB,EAAqB,SAyB1C,IAAkB,EAAM,YAGlC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,MAAtB;CACM;CACL,WAAW,EACV,EACC,6GACA,CACD,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAgB,cAAc,EAAqB,KAAK;AAgGxD,SAAgB,EAAiB,EAAE,cAAW,GAAG,KAAgC;CAChF,OACC,kBAAC,EAAqB,QAAtB;EAA6B,YAAY,EAAM;EAC9C,UAAA,kBAAC,EAAqB,SAAtB;GACC,WAAW,EAAkB,EAAG,YAAY,CAAS,CAAC;GACtD,GAAI;EACJ,CAAA;CAC2B,CAAA;AAE/B"}
+{"version":3,"file":"context-menu.js","names":[],"sources":["../../src/components/context-menu.tsx"],"sourcesContent":["import * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { overlayItemClass, overlayPanelClass } from \"./overlay\";\n\ntype RadixContextMenuProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>;\ntype RadixContextMenuTriggerProps = React.ComponentPropsWithoutRef<\n\ttypeof ContextMenuPrimitive.Trigger\n>;\ntype RadixContextMenuContentProps = React.ComponentPropsWithoutRef<\n\ttypeof ContextMenuPrimitive.Content\n>;\ntype RadixContextMenuItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>;\n\nexport interface ContextMenuProps\n\textends Omit<RadixContextMenuProps, \"open\" | \"onOpenChange\" | \"dir\" | \"modal\"> {\n\t/**\n\t * Controlled open state of the context menu.\n\t * When set to true before pointer trigger interaction, positions at the top-left of the viewport.\n\t */\n\topen?: RadixContextMenuProps[\"open\"];\n\t/**\n\t * Callback invoked when open state changes.\n\t */\n\tonOpenChange?: RadixContextMenuProps[\"onOpenChange\"];\n\t/**\n\t * The reading direction of the context menu.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixContextMenuProps[\"dir\"];\n\t/**\n\t * Whether the context menu is modal, preventing outside interactions.\n\t * @default true\n\t */\n\tmodal?: RadixContextMenuProps[\"modal\"];\n}\n\nexport const ContextMenu = ContextMenuPrimitive.Root;\n\nexport interface ContextMenuTriggerProps\n\textends Omit<RadixContextMenuTriggerProps, \"disabled\" | \"asChild\"> {\n\t/**\n\t * Disable the context menu trigger from opening on right-click.\n\t * @default false\n\t */\n\tdisabled?: RadixContextMenuTriggerProps[\"disabled\"];\n\t/**\n\t * Change the default rendered span element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLSpanElement and inherits native span attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuTriggerProps[\"asChild\"];\n}\n\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger;\n\nexport interface ContextMenuContentProps\n\textends Omit<\n\t\tRadixContextMenuContentProps,\n\t\t| \"loop\"\n\t\t| \"alignOffset\"\n\t\t| \"avoidCollisions\"\n\t\t| \"collisionBoundary\"\n\t\t| \"collisionPadding\"\n\t\t| \"arrowPadding\"\n\t\t| \"sticky\"\n\t\t| \"hideWhenDetached\"\n\t\t| \"forceMount\"\n\t\t| \"asChild\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"onFocusOutside\"\n\t\t| \"onInteractOutside\"\n\t> {\n\t/**\n\t * Whether keyboard navigation should loop around item boundaries.\n\t * @default false\n\t */\n\tloop?: RadixContextMenuContentProps[\"loop\"];\n\t/**\n\t * Offset in pixels from the start or end alignment position.\n\t * @default 0\n\t */\n\talignOffset?: RadixContextMenuContentProps[\"alignOffset\"];\n\t/**\n\t * Whether to reposition content to avoid viewport boundary collisions.\n\t * @default true\n\t */\n\tavoidCollisions?: RadixContextMenuContentProps[\"avoidCollisions\"];\n\t/**\n\t * Element or elements bounding boundary collision calculations.\n\t * @default []\n\t */\n\tcollisionBoundary?: RadixContextMenuContentProps[\"collisionBoundary\"];\n\t/**\n\t * Virtual padding from collision boundaries in pixels.\n\t * @default 0\n\t */\n\tcollisionPadding?: RadixContextMenuContentProps[\"collisionPadding\"];\n\t/**\n\t * Padding in pixels between popper arrow and floating panel edge.\n\t * @default 0\n\t */\n\tarrowPadding?: RadixContextMenuContentProps[\"arrowPadding\"];\n\t/**\n\t * Sticky positioning behavior along the align axis when overflowing.\n\t * @default \"partial\"\n\t */\n\tsticky?: RadixContextMenuContentProps[\"sticky\"];\n\t/**\n\t * Whether to hide content completely when trigger is fully occluded.\n\t * @default false\n\t */\n\thideWhenDetached?: RadixContextMenuContentProps[\"hideWhenDetached\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * Note: Bare ContextMenuContent mounts directly without a built-in Portal wrapper.\n\t */\n\tforceMount?: true;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuContentProps[\"asChild\"];\n\t/**\n\t * Callback fired when auto-focusing on close. Can be prevented.\n\t */\n\tonCloseAutoFocus?: RadixContextMenuContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.\n\t */\n\tonEscapeKeyDown?: RadixContextMenuContentProps[\"onEscapeKeyDown\"];\n\t/**\n\t * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonPointerDownOutside?: RadixContextMenuContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonFocusOutside?: RadixContextMenuContentProps[\"onFocusOutside\"];\n\t/**\n\t * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonInteractOutside?: RadixContextMenuContentProps[\"onInteractOutside\"];\n}\n\nexport const ContextMenuContent = ContextMenuPrimitive.Content;\n\nexport interface ContextMenuItemProps\n\textends Omit<RadixContextMenuItemProps, \"disabled\" | \"onSelect\" | \"textValue\" | \"asChild\"> {\n\t/**\n\t * Disable the context menu item.\n\t * @default false\n\t */\n\tdisabled?: RadixContextMenuItemProps[\"disabled\"];\n\t/**\n\t * Event handler called when the context menu item is selected (via click or keyboard).\n\t */\n\tonSelect?: RadixContextMenuItemProps[\"onSelect\"];\n\t/**\n\t * Optional text used for typeahead navigation. By default typeahead uses item text content.\n\t */\n\ttextValue?: RadixContextMenuItemProps[\"textValue\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Item forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixContextMenuItemProps[\"asChild\"];\n}\n\nexport const ContextMenuItem = React.forwardRef<\n\tReact.ElementRef<typeof ContextMenuPrimitive.Item>,\n\tContextMenuItemProps\n>(({ className, ...props }, ref) => (\n\t<ContextMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={overlayItemClass(\n\t\t\tcn(\n\t\t\t\t\"relative outline-hidden focus:bg-basalt-accent data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t\t{...props}\n\t/>\n));\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;\n\nexport interface ContextMenuPanelProps\n\textends Omit<ContextMenuContentProps, \"forceMount\">,\n\t\tPick<React.ComponentProps<typeof ContextMenuPrimitive.Content>, \"ref\"> {\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * When forceMount is true, the content remains mounted even when closed.\n\t * The caller is responsible for visibility transitions and unmounting after animation completes.\n\t * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.\n\t */\n\tforceMount?: true;\n}\n\nexport function ContextMenuPanel({ className, ...props }: ContextMenuPanelProps) {\n\treturn (\n\t\t<ContextMenuPrimitive.Portal forceMount={props.forceMount}>\n\t\t\t<ContextMenuPrimitive.Content\n\t\t\t\tclassName={overlayPanelClass(cn(\"min-w-40\", className))}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</ContextMenuPrimitive.Portal>\n\t);\n}\n"],"mappings":";;;;;;;AAqCA,IAAa,IAAc,EAAqB,MAiBnC,IAAqB,EAAqB,SA8F1C,IAAqB,EAAqB,SAyB1C,IAAkB,EAAM,YAGlC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,MAAtB;CACM;CACL,WAAW,EACV,EACC,6GACA,CACD,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAgB,cAAc,EAAqB,KAAK;AAcxD,SAAgB,EAAiB,EAAE,cAAW,GAAG,KAAgC;CAChF,OACC,kBAAC,EAAqB,QAAtB;EAA6B,YAAY,EAAM;EAC9C,UAAA,kBAAC,EAAqB,SAAtB;GACC,WAAW,EAAkB,EAAG,YAAY,CAAS,CAAC;GACtD,GAAI;EACJ,CAAA;CAC2B,CAAA;AAE/B"}