@nocoo/basalt 2.0.2 → 2.1.0

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":[],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { MENU_GAP, OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport const POPOVER_SIDES = [\"top\", \"bottom\", \"left\", \"right\"] as const;\nexport type PopoverSide = (typeof POPOVER_SIDES)[number];\n\nexport type PopoverProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>,\n\t\"open\" | \"defaultOpen\" | \"onOpenChange\"\n> & {\n\t/**\n\t * The controlled open state.\n\t */\n\topen?: boolean;\n\t/**\n\t * The uncontrolled initial open state.\n\t * @default false\n\t */\n\tdefaultOpen?: boolean;\n\t/**\n\t * Called when the open state changes.\n\t */\n\tonOpenChange?: (open: boolean) => void;\n};\nexport const Popover: React.FC<PopoverProps> = PopoverPrimitive.Root;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverClose = PopoverPrimitive.Close;\n\nexport type PopoverContentProps = React.ComponentPropsWithoutRef<\n\ttypeof PopoverPrimitive.Content\n> & {\n\t/**\n\t * Show the pointing arrow.\n\t * @default true\n\t */\n\tarrow?: boolean;\n};\n\nexport const PopoverContent = React.forwardRef<\n\tReact.ElementRef<typeof PopoverPrimitive.Content>,\n\tPopoverContentProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\talign = \"center\",\n\t\t\tside = \"bottom\",\n\t\t\tsideOffset = MENU_GAP,\n\t\t\tarrow = true,\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\talign={align}\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={cn(\n\t\t\t\t\tOVERLAY_LAYER,\n\t\t\t\t\tOVERLAY_MOTION,\n\t\t\t\t\t\"rounded-basalt-md border border-basalt-border bg-basalt-popover px-4 py-3 text-sm text-basalt-popover-foreground shadow-md outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{arrow ? (\n\t\t\t\t\t<PopoverPrimitive.Arrow asChild width={20} height={10}>\n\t\t\t\t\t\t<ArrowSvg />\n\t\t\t\t\t</PopoverPrimitive.Arrow>\n\t\t\t\t) : null}\n\t\t\t</PopoverPrimitive.Content>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nexport const PopoverTitle = React.forwardRef<\n\tHTMLHeadingElement,\n\tReact.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n\t<h2\n\t\tref={ref}\n\t\tclassName={cn(\"m-0 text-base font-medium leading-6 text-basalt-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nPopoverTitle.displayName = \"PopoverTitle\";\n\nexport const PopoverDescription = React.forwardRef<\n\tHTMLParagraphElement,\n\tReact.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n\t<p\n\t\tref={ref}\n\t\tclassName={cn(\"m-0 text-base leading-6 text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nPopoverDescription.displayName = \"PopoverDescription\";\n\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n\treturn (\n\t\t<svg width={20} height={10} aria-hidden {...props}>\n\t\t\t<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 20 10\" preserveAspectRatio=\"none\" aria-hidden>\n\t\t\t\t<path\n\t\t\t\t\td=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n\t\t\t\t\tclassName=\"fill-basalt-popover\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\td=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n\t\t\t\t\tclassName=\"fill-basalt-border\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</svg>\n\t);\n}\n"],"mappings":";;;;;;;AAKA,IAAa,IAAgB;CAAC;CAAO;CAAU;CAAQ;AAAO,GAqBjD,IAAkC,EAAiB,MACnD,IAAiB,EAAiB,SAClC,IAAe,EAAiB,OAYhC,IAAiB,EAAM,YAKlC,EACC,cACA,WAAQ,UACR,UAAO,UACP,gBAAA,GACA,WAAQ,IACR,aACA,GAAG,KAEJ,MAEA,kBAAC,EAAiB,QAAlB,EAAA,UACC,kBAAC,EAAiB,SAAlB;CACM;CACE;CACD;CACM;CACZ,WAAW,EACV,GACA,GACA,6IACA,CACD;CACA,GAAI;CAXL,UAAA,CAaE,GACA,IACA,kBAAC,EAAiB,OAAlB;EAAwB,SAAA;EAAQ,OAAO;EAAI,QAAQ;EAClD,UAAA,kBAAC,GAAD,CAAW,CAAA;CACY,CAAA,IACrB,IACqB;AACF,CAAA,EAAA,CAAA,CAE3B;AACA,EAAe,cAAc,EAAiB,QAAQ;AAEtD,IAAa,IAAe,EAAM,YAG/B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,MAAD;CACM;CACL,WAAW,EAAG,8DAA8D,CAAS;CACrF,GAAI;AACJ,CAAA,CACD;AACD,EAAa,cAAc;AAE3B,IAAa,IAAqB,EAAM,YAGrC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,KAAD;CACM;CACL,WAAW,EAAG,wDAAwD,CAAS;CAC/E,GAAI;AACJ,CAAA,CACD;AACD,EAAmB,cAAc;AAEjC,SAAS,EAAS,GAAoC;CACrD,OACC,kBAAC,OAAD;EAAK,OAAO;EAAI,QAAQ;EAAI,eAAA;EAAY,GAAI;EAC3C,UAAA,kBAAC,OAAD;GAAK,OAAM;GAAO,QAAO;GAAO,SAAQ;GAAY,qBAAoB;GAAO,eAAA;GAA/E,UAAA,CACC,kBAAC,QAAD;IACC,GAAE;IACF,WAAU;GACV,CAAA,GACD,kBAAC,QAAD;IACC,GAAE;IACF,WAAU;GACV,CAAA,CACG;;CACD,CAAA;AAEP"}
+{"version":3,"file":"popover.js","names":[],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { MENU_GAP, OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport const POPOVER_SIDES = [\"top\", \"bottom\", \"left\", \"right\"] as const;\nexport type PopoverSide = (typeof POPOVER_SIDES)[number];\n\ntype RadixPopoverProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>;\ntype RadixPopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;\ntype RadixPopoverCloseProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Close>;\ntype RadixPopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;\n\nexport interface PopoverProps\n\textends Omit<RadixPopoverProps, \"children\" | \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"modal\"> {\n\t/**\n\t * Popover structure elements, typically PopoverTrigger and PopoverContent.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Controlled open state of the popover.\n\t */\n\topen?: RadixPopoverProps[\"open\"];\n\t/**\n\t * Uncontrolled initial open state of the popover.\n\t * @default false\n\t */\n\tdefaultOpen?: RadixPopoverProps[\"defaultOpen\"];\n\t/**\n\t * Callback called when the open state changes.\n\t */\n\tonOpenChange?: RadixPopoverProps[\"onOpenChange\"];\n\t/**\n\t * Whether the popover renders modally, preventing outside interaction and hiding background content from screen readers.\n\t * @default false\n\t */\n\tmodal?: RadixPopoverProps[\"modal\"];\n}\n\nexport const Popover: React.FC<PopoverProps> = PopoverPrimitive.Root;\n\nexport interface PopoverTriggerProps extends Omit<RadixPopoverTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * PopoverTrigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixPopoverTriggerProps[\"asChild\"];\n}\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\n\nexport interface PopoverCloseProps extends Omit<RadixPopoverCloseProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * PopoverClose forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixPopoverCloseProps[\"asChild\"];\n}\n\nexport const PopoverClose = PopoverPrimitive.Close;\n\nexport interface PopoverContentProps\n\textends Omit<\n\t\tRadixPopoverContentProps,\n\t\t| \"side\"\n\t\t| \"sideOffset\"\n\t\t| \"align\"\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| \"updatePositionStrategy\"\n\t\t| \"forceMount\"\n\t\t| \"asChild\"\n\t\t| \"onOpenAutoFocus\"\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 * Preferred placement side relative to trigger.\n\t * @default \"bottom\"\n\t */\n\tside?: RadixPopoverContentProps[\"side\"];\n\t/**\n\t * Distance in pixels between trigger and floating content panel.\n\t * @default 8\n\t */\n\tsideOffset?: RadixPopoverContentProps[\"sideOffset\"];\n\t/**\n\t * Preferred alignment along the side axis.\n\t * @default \"center\"\n\t */\n\talign?: RadixPopoverContentProps[\"align\"];\n\t/**\n\t * Offset in pixels from the start or end alignment position.\n\t * @default 0\n\t */\n\talignOffset?: RadixPopoverContentProps[\"alignOffset\"];\n\t/**\n\t * Whether to reposition content to avoid viewport boundary collisions.\n\t * @default true\n\t */\n\tavoidCollisions?: RadixPopoverContentProps[\"avoidCollisions\"];\n\t/**\n\t * Element or elements bounding boundary collision calculations.\n\t * @default []\n\t */\n\tcollisionBoundary?: RadixPopoverContentProps[\"collisionBoundary\"];\n\t/**\n\t * Virtual padding from collision boundaries in pixels.\n\t * @default 0\n\t */\n\tcollisionPadding?: RadixPopoverContentProps[\"collisionPadding\"];\n\t/**\n\t * Padding in pixels between popper arrow and floating panel edge.\n\t * @default 0\n\t */\n\tarrowPadding?: RadixPopoverContentProps[\"arrowPadding\"];\n\t/**\n\t * Sticky positioning behavior along the align axis when overflowing.\n\t * @default \"partial\"\n\t */\n\tsticky?: RadixPopoverContentProps[\"sticky\"];\n\t/**\n\t * Whether to hide content completely when trigger is fully occluded.\n\t * @default false\n\t */\n\thideWhenDetached?: RadixPopoverContentProps[\"hideWhenDetached\"];\n\t/**\n\t * Strategy used to calculate and update popper position.\n\t * @default \"optimized\"\n\t */\n\tupdatePositionStrategy?: RadixPopoverContentProps[\"updatePositionStrategy\"];\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 * PopoverContent forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixPopoverContentProps[\"asChild\"];\n\t/**\n\t * Callback fired when auto-focusing on open. Can be prevented.\n\t */\n\tonOpenAutoFocus?: RadixPopoverContentProps[\"onOpenAutoFocus\"];\n\t/**\n\t * Callback fired when auto-focusing on close. Can be prevented.\n\t */\n\tonCloseAutoFocus?: RadixPopoverContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.\n\t */\n\tonEscapeKeyDown?: RadixPopoverContentProps[\"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?: RadixPopoverContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonFocusOutside?: RadixPopoverContentProps[\"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?: RadixPopoverContentProps[\"onInteractOutside\"];\n\t/**\n\t * Show the pointing arrow.\n\t * @default true\n\t */\n\tarrow?: boolean;\n}\n\nexport const PopoverContent = React.forwardRef<\n\tReact.ElementRef<typeof PopoverPrimitive.Content>,\n\tPopoverContentProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\talign = \"center\",\n\t\t\tside = \"bottom\",\n\t\t\tsideOffset = MENU_GAP,\n\t\t\tarrow = true,\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal forceMount={props.forceMount}>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\talign={align}\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={cn(\n\t\t\t\t\tOVERLAY_LAYER,\n\t\t\t\t\tOVERLAY_MOTION,\n\t\t\t\t\t\"rounded-basalt-md border border-basalt-border bg-basalt-popover px-4 py-3 text-sm text-basalt-popover-foreground shadow-md outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<Slottable>{children}</Slottable>\n\t\t\t\t{arrow ? (\n\t\t\t\t\t<PopoverPrimitive.Arrow asChild width={20} height={10}>\n\t\t\t\t\t\t<ArrowSvg />\n\t\t\t\t\t</PopoverPrimitive.Arrow>\n\t\t\t\t) : null}\n\t\t\t</PopoverPrimitive.Content>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nexport interface PopoverTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport const PopoverTitle = React.forwardRef<HTMLHeadingElement, PopoverTitleProps>(\n\t({ className, ...props }, ref) => (\n\t\t<h2\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"m-0 text-base font-medium leading-6 text-basalt-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nPopoverTitle.displayName = \"PopoverTitle\";\n\nexport interface PopoverDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport const PopoverDescription = React.forwardRef<HTMLParagraphElement, PopoverDescriptionProps>(\n\t({ className, ...props }, ref) => (\n\t\t<p\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"m-0 text-base leading-6 text-basalt-muted-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nPopoverDescription.displayName = \"PopoverDescription\";\n\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n\treturn (\n\t\t<svg width={20} height={10} aria-hidden {...props}>\n\t\t\t<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 20 10\" preserveAspectRatio=\"none\" aria-hidden>\n\t\t\t\t<path\n\t\t\t\t\td=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n\t\t\t\t\tclassName=\"fill-basalt-popover\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\td=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n\t\t\t\t\tclassName=\"fill-basalt-border\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</svg>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,IAAa,IAAgB;CAAC;CAAO;CAAU;CAAQ;AAAO,GAkCjD,IAAkC,EAAiB,MAWnD,IAAiB,EAAiB,SAWlC,IAAe,EAAiB,OA4HhC,IAAiB,EAAM,YAKlC,EACC,cACA,WAAQ,UACR,UAAO,UACP,gBAAA,GACA,WAAQ,IACR,aACA,GAAG,KAEJ,MAEA,kBAAC,EAAiB,QAAlB;CAAyB,YAAY,EAAM;CAC1C,UAAA,kBAAC,EAAiB,SAAlB;EACM;EACE;EACD;EACM;EACZ,WAAW,EACV,GACA,GACA,6IACA,CACD;EACA,GAAI;EAXL,UAAA,CAaC,kBAAC,GAAD,EAAY,YAAoB,CAAA,GAC/B,IACA,kBAAC,EAAiB,OAAlB;GAAwB,SAAA;GAAQ,OAAO;GAAI,QAAQ;GAClD,UAAA,kBAAC,GAAD,CAAW,CAAA;EACY,CAAA,IACrB,IACqB;;AACF,CAAA,CAE3B;AACA,EAAe,cAAc,EAAiB,QAAQ;AAItD,IAAa,IAAe,EAAM,YAChC,EAAE,cAAW,GAAG,KAAS,MACzB,kBAAC,MAAD;CACM;CACL,WAAW,EAAG,8DAA8D,CAAS;CACrF,GAAI;AACJ,CAAA,CAEH;AACA,EAAa,cAAc;AAI3B,IAAa,IAAqB,EAAM,YACtC,EAAE,cAAW,GAAG,KAAS,MACzB,kBAAC,KAAD;CACM;CACL,WAAW,EAAG,wDAAwD,CAAS;CAC/E,GAAI;AACJ,CAAA,CAEH;AACA,EAAmB,cAAc;AAEjC,SAAS,EAAS,GAAoC;CACrD,OACC,kBAAC,OAAD;EAAK,OAAO;EAAI,QAAQ;EAAI,eAAA;EAAY,GAAI;EAC3C,UAAA,kBAAC,OAAD;GAAK,OAAM;GAAO,QAAO;GAAO,SAAQ;GAAY,qBAAoB;GAAO,eAAA;GAA/E,UAAA,CACC,kBAAC,QAAD;IACC,GAAE;IACF,WAAU;GACV,CAAA,GACD,kBAAC,QAAD;IACC,GAAE;IACF,WAAU;GACV,CAAA,CACG;;CACD,CAAA;AAEP"}

package/dist/components/radio.js

@@ -1,47 +1,48 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { FOCUS_RING as t } from "./overlay.js";
-import * as n from "react";
-import { Circle as r } from "lucide-react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-radio-group";
+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 { Circle as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-radio-group";
 //#region src/components/radio.tsx
-var s = {
+var c = {
 	sm: "h-3 w-3",
 	default: "h-4 w-4"
-}, c = {
+}, l = {
 	sm: "h-1.5 w-1.5 fill-current text-current",
 	default: "h-2.5 w-2.5 fill-current text-current"
-}, l = n.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("legend", {
+}, u = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a("legend", {
 	ref: r,
 	className: e("text-sm font-medium text-basalt-foreground", t),
 	...n
 }));
-l.displayName = "Radio.Legend";
-var u = n.forwardRef(({ className: t, error: r, disabled: s = !1, children: c, "aria-describedby": u, "aria-invalid": d, "aria-labelledby": f, ...p }, m) => {
-	let h = n.useId(), g = !!r, _ = `${h}-error`, v = `${h}-legend`, y = [], b = [];
-	n.Children.forEach(c, (e) => {
-		if (n.isValidElement(e) && e.type === l) {
+u.displayName = "Radio.Legend";
+var d = r.forwardRef(({ className: t, error: n, disabled: i = !1, children: c, "aria-describedby": l, "aria-invalid": d, "aria-labelledby": f, ...p }, m) => {
+	let h = r.useId(), g = !!n, _ = `${h}-error`, v = `${h}-legend`, y = [], b = [];
+	r.Children.forEach(c, (e) => {
+		if (r.isValidElement(e) && e.type === u) {
 			y.push(e);
 			return;
 		}
 		b.push(e);
 	});
 	let x = y.map((e, t) => {
-		let r = e.props.id ?? (t === 0 ? v : `${v}-${t}`);
-		return n.cloneElement(e, {
-			key: r,
-			id: r
+		let n = e.props.id ?? (t === 0 ? v : `${v}-${t}`);
+		return r.cloneElement(e, {
+			key: n,
+			id: n
 		});
-	}), S = [x.map((e) => e.props.id).filter(Boolean).join(" "), f].filter(Boolean).join(" ") || void 0, C = [g ? _ : null, u].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ a("fieldset", {
-		disabled: s,
+	}), S = [x.map((e) => e.props.id).filter(Boolean).join(" "), f].filter(Boolean).join(" ") || void 0, C = [g ? _ : null, l].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ o("fieldset", {
+		disabled: i,
 		className: "flex flex-col gap-2",
 		children: [
 			x,
-			/* @__PURE__ */ i(o.Root, {
+			/* @__PURE__ */ a(s.Root, {
 				ref: m,
-				disabled: s,
+				disabled: i,
 				className: e("grid gap-2", t),
 				...p,
 				"aria-labelledby": S,
@@ -49,32 +50,32 @@ var u = n.forwardRef(({ className: t, error: r, disabled: s = !1, children: c, "
 				"aria-invalid": g ? !0 : d,
 				children: b
 			}),
-			g ? /* @__PURE__ */ i("p", {
+			g ? /* @__PURE__ */ a("p", {
 				id: _,
 				className: "text-xs text-basalt-destructive",
 				role: "alert",
-				children: r
+				children: n
 			}) : null
 		]
 	});
 });
-u.displayName = "Radio.Group";
-var d = n.forwardRef(({ className: n, size: a = "default", ...l }, u) => /* @__PURE__ */ i(o.Item, {
-	ref: u,
-	className: e("aspect-square shrink-0 rounded-full border border-basalt-primary text-basalt-primary disabled:cursor-not-allowed disabled:opacity-50", s[a], t, n),
-	...l,
-	children: /* @__PURE__ */ i(o.Indicator, {
+d.displayName = "Radio.Group";
+var f = r.forwardRef(({ className: r, size: o = "default", ...u }, d) => /* @__PURE__ */ a(s.Item, {
+	ref: d,
+	className: e(t, "aspect-square shrink-0 rounded-full border border-basalt-primary text-basalt-primary disabled:cursor-not-allowed disabled:opacity-50", c[o], n, r),
+	...u,
+	children: /* @__PURE__ */ a(s.Indicator, {
 		className: "flex items-center justify-center",
-		children: /* @__PURE__ */ i(r, { className: c[a] })
+		children: /* @__PURE__ */ a(i, { className: l[o] })
 	})
 }));
-d.displayName = o.Item.displayName;
-var f = Object.assign(d, {
-	Group: u,
-	Legend: l,
-	Item: d
+f.displayName = s.Item.displayName;
+var p = Object.assign(f, {
+	Group: d,
+	Legend: u,
+	Item: f
 });
 //#endregion
-export { f as Radio, u as RadioGroup };
+export { p as Radio, d as RadioGroup };
 
 //# sourceMappingURL=radio.js.map

package/dist/components/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { Circle } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { FOCUS_RING } from \"./overlay\";\n\nexport type RadioSize = \"sm\" | \"default\";\n\nconst RADIO_SIZE_CLASS: Record<RadioSize, string> = {\n\tsm: \"h-3 w-3\",\n\tdefault: \"h-4 w-4\",\n};\n\nconst RADIO_INDICATOR_CLASS: Record<RadioSize, string> = {\n\tsm: \"h-1.5 w-1.5 fill-current text-current\",\n\tdefault: \"h-2.5 w-2.5 fill-current text-current\",\n};\n\nexport type RadioGroupProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,\n\t\"disabled\" | \"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled selected value.\n\t */\n\tvalue?: string;\n\t/**\n\t * The initially selected 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 * 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 RadioLegendProps = React.ComponentPropsWithoutRef<\"legend\">;\n\nexport type RadioProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n\t\"value\"\n> & {\n\t/**\n\t * The value associated with the radio item.\n\t */\n\tvalue: string;\n\t/**\n\t * The visual size of the radio.\n\t * @default default\n\t */\n\tsize?: RadioSize;\n};\n\nconst RadioLegend = React.forwardRef<HTMLLegendElement, RadioLegendProps>(\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);\nRadioLegend.displayName = \"Radio.Legend\";\n\nexport const RadioGroup = React.forwardRef<\n\tReact.ElementRef<typeof RadioGroupPrimitive.Root>,\n\tRadioGroupProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\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\"aria-labelledby\": labelledBy,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst generatedId = React.useId();\n\t\tconst invalid = Boolean(error);\n\t\tconst errorId = `${generatedId}-error`;\n\t\tconst defaultLegendId = `${generatedId}-legend`;\n\t\tconst legends: React.ReactElement<RadioLegendProps>[] = [];\n\t\tconst items: React.ReactNode[] = [];\n\t\tReact.Children.forEach(children, (child) => {\n\t\t\tif (React.isValidElement(child) && child.type === RadioLegend) {\n\t\t\t\tlegends.push(child as React.ReactElement<RadioLegendProps>);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\titems.push(child);\n\t\t});\n\t\tconst labeledLegends = legends.map((legend, index) => {\n\t\t\tconst legendId =\n\t\t\t\tlegend.props.id ?? (index === 0 ? defaultLegendId : `${defaultLegendId}-${index}`);\n\t\t\treturn React.cloneElement(legend, { key: legendId, id: legendId });\n\t\t});\n\t\tconst legendIds = labeledLegends\n\t\t\t.map((legend) => legend.props.id)\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \");\n\t\tconst mergedLabelledBy = [legendIds, labelledBy].filter(Boolean).join(\" \") || undefined;\n\t\tconst mergedDescribedBy =\n\t\t\t[invalid ? errorId : null, describedBy].filter(Boolean).join(\" \") || undefined;\n\t\treturn (\n\t\t\t<fieldset disabled={disabled} className=\"flex flex-col gap-2\">\n\t\t\t\t{labeledLegends}\n\t\t\t\t<RadioGroupPrimitive.Root\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tclassName={cn(\"grid gap-2\", className)}\n\t\t\t\t\t{...props}\n\t\t\t\t\taria-labelledby={mergedLabelledBy}\n\t\t\t\t\taria-describedby={mergedDescribedBy}\n\t\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\t>\n\t\t\t\t\t{items}\n\t\t\t\t</RadioGroupPrimitive.Root>\n\t\t\t\t{invalid ? (\n\t\t\t\t\t<p id={errorId} className=\"text-xs text-basalt-destructive\" role=\"alert\">\n\t\t\t\t\t\t{error}\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t</fieldset>\n\t\t);\n\t},\n);\nRadioGroup.displayName = \"Radio.Group\";\n\nconst RadioRoot = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioProps>(\n\t({ className, size = \"default\", ...props }, ref) => (\n\t\t<RadioGroupPrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"aspect-square shrink-0 rounded-full border border-basalt-primary text-basalt-primary disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tRADIO_SIZE_CLASS[size],\n\t\t\t\tFOCUS_RING,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n\t\t\t\t<Circle className={RADIO_INDICATOR_CLASS[size]} />\n\t\t\t</RadioGroupPrimitive.Indicator>\n\t\t</RadioGroupPrimitive.Item>\n\t),\n);\nRadioRoot.displayName = RadioGroupPrimitive.Item.displayName;\n\nexport const Radio = Object.assign(RadioRoot, {\n\tGroup: RadioGroup,\n\tLegend: RadioLegend,\n\tItem: RadioRoot,\n});\n"],"mappings":";;;;;;;;AAQA,IAAM,IAA8C;CACnD,IAAI;CACJ,SAAS;AACV,GAEM,IAAmD;CACxD,IAAI;CACJ,SAAS;AACV,GA8CM,IAAc,EAAM,YACxB,EAAE,cAAW,GAAG,KAAS,MACzB,kBAAC,UAAD;CACM;CACL,WAAW,EAAG,8CAA8C,CAAS;CACrE,GAAI;AACJ,CAAA,CAEH;AACA,EAAY,cAAc;AAE1B,IAAa,IAAa,EAAM,YAK9B,EACC,cACA,UACA,cAAW,IACX,aACA,oBAAoB,GACpB,gBAAgB,GAChB,mBAAmB,GACnB,GAAG,KAEJ,MACI;CACJ,IAAM,IAAc,EAAM,MAAM,GAC1B,IAAU,EAAQ,GAClB,IAAU,GAAG,EAAY,SACzB,IAAkB,GAAG,EAAY,UACjC,IAAkD,CAAC,GACnD,IAA2B,CAAC;CAClC,EAAM,SAAS,QAAQ,IAAW,MAAU;EAC3C,IAAI,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,GAAa;GAC9D,EAAQ,KAAK,CAA6C;GAC1D;EACD;EACA,EAAM,KAAK,CAAK;CACjB,CAAC;CACD,IAAM,IAAiB,EAAQ,KAAK,GAAQ,MAAU;EACrD,IAAM,IACL,EAAO,MAAM,OAAO,MAAU,IAAI,IAAkB,GAAG,EAAgB,GAAG;EAC3E,OAAO,EAAM,aAAa,GAAQ;GAAE,KAAK;GAAU,IAAI;EAAS,CAAC;CAClE,CAAC,GAKK,IAAmB,CAJP,EAChB,KAAK,MAAW,EAAO,MAAM,EAAE,CAAC,CAChC,OAAO,OAAO,CAAC,CACf,KAAK,GACmB,GAAW,CAAU,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA,GACxE,IACL,CAAC,IAAU,IAAU,MAAM,CAAW,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CACtE,OACC,kBAAC,YAAD;EAAoB;EAAU,WAAU;EAAxC,UAAA;GACE;GACD,kBAAC,EAAoB,MAArB;IACM;IACK;IACV,WAAW,EAAG,cAAc,CAAS;IACrC,GAAI;IACJ,mBAAiB;IACjB,oBAAkB;IAClB,gBAAc,IAAU,KAAO;IAE9B,UAAA;GACwB,CAAA;GACzB,IACA,kBAAC,KAAD;IAAG,IAAI;IAAS,WAAU;IAAkC,MAAK;IAC/D,UAAA;GACC,CAAA,IACA;EACK;;AAEZ,CACD;AACA,EAAW,cAAc;AAEzB,IAAM,IAAY,EAAM,YACtB,EAAE,cAAW,UAAO,WAAW,GAAG,KAAS,MAC3C,kBAAC,EAAoB,MAArB;CACM;CACL,WAAW,EACV,wIACA,EAAiB,IACjB,GACA,CACD;CACA,GAAI;CAEJ,UAAA,kBAAC,EAAoB,WAArB;EAA+B,WAAU;EACxC,UAAA,kBAAC,GAAD,EAAQ,WAAW,EAAsB,GAAQ,CAAA;CACnB,CAAA;AACN,CAAA,CAE5B;AACA,EAAU,cAAc,EAAoB,KAAK;AAEjD,IAAa,IAAQ,OAAO,OAAO,GAAW;CAC7C,OAAO;CACP,QAAQ;CACR,MAAM;AACP,CAAC"}
+{"version":3,"file":"radio.js","names":[],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { Circle } 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 RadioSize = \"sm\" | \"default\";\n\nconst RADIO_SIZE_CLASS: Record<RadioSize, string> = {\n\tsm: \"h-3 w-3\",\n\tdefault: \"h-4 w-4\",\n};\n\nconst RADIO_INDICATOR_CLASS: Record<RadioSize, string> = {\n\tsm: \"h-1.5 w-1.5 fill-current text-current\",\n\tdefault: \"h-2.5 w-2.5 fill-current text-current\",\n};\n\nexport type RadioGroupProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,\n\t\"disabled\" | \"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled selected value.\n\t */\n\tvalue?: string;\n\t/**\n\t * The initially selected 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 * 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 RadioLegendProps = React.ComponentPropsWithoutRef<\"legend\">;\n\nexport type RadioProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n\t\"value\"\n> & {\n\t/**\n\t * The value associated with the radio item.\n\t */\n\tvalue: string;\n\t/**\n\t * The visual size of the radio.\n\t * @default default\n\t */\n\tsize?: RadioSize;\n};\n\nconst RadioLegend = React.forwardRef<HTMLLegendElement, RadioLegendProps>(\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);\nRadioLegend.displayName = \"Radio.Legend\";\n\nexport const RadioGroup = React.forwardRef<\n\tReact.ElementRef<typeof RadioGroupPrimitive.Root>,\n\tRadioGroupProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\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\"aria-labelledby\": labelledBy,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst generatedId = React.useId();\n\t\tconst invalid = Boolean(error);\n\t\tconst errorId = `${generatedId}-error`;\n\t\tconst defaultLegendId = `${generatedId}-legend`;\n\t\tconst legends: React.ReactElement<RadioLegendProps>[] = [];\n\t\tconst items: React.ReactNode[] = [];\n\t\tReact.Children.forEach(children, (child) => {\n\t\t\tif (React.isValidElement(child) && child.type === RadioLegend) {\n\t\t\t\tlegends.push(child as React.ReactElement<RadioLegendProps>);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\titems.push(child);\n\t\t});\n\t\tconst labeledLegends = legends.map((legend, index) => {\n\t\t\tconst legendId =\n\t\t\t\tlegend.props.id ?? (index === 0 ? defaultLegendId : `${defaultLegendId}-${index}`);\n\t\t\treturn React.cloneElement(legend, { key: legendId, id: legendId });\n\t\t});\n\t\tconst legendIds = labeledLegends\n\t\t\t.map((legend) => legend.props.id)\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \");\n\t\tconst mergedLabelledBy = [legendIds, labelledBy].filter(Boolean).join(\" \") || undefined;\n\t\tconst mergedDescribedBy =\n\t\t\t[invalid ? errorId : null, describedBy].filter(Boolean).join(\" \") || undefined;\n\t\treturn (\n\t\t\t<fieldset disabled={disabled} className=\"flex flex-col gap-2\">\n\t\t\t\t{labeledLegends}\n\t\t\t\t<RadioGroupPrimitive.Root\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tclassName={cn(\"grid gap-2\", className)}\n\t\t\t\t\t{...props}\n\t\t\t\t\taria-labelledby={mergedLabelledBy}\n\t\t\t\t\taria-describedby={mergedDescribedBy}\n\t\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\t>\n\t\t\t\t\t{items}\n\t\t\t\t</RadioGroupPrimitive.Root>\n\t\t\t\t{invalid ? (\n\t\t\t\t\t<p id={errorId} className=\"text-xs text-basalt-destructive\" role=\"alert\">\n\t\t\t\t\t\t{error}\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t</fieldset>\n\t\t);\n\t},\n);\nRadioGroup.displayName = \"Radio.Group\";\n\nconst RadioRoot = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioProps>(\n\t({ className, size = \"default\", ...props }, ref) => (\n\t\t<RadioGroupPrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"aspect-square shrink-0 rounded-full border border-basalt-primary text-basalt-primary disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tRADIO_SIZE_CLASS[size],\n\t\t\t\tFOCUS_RING,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n\t\t\t\t<Circle className={RADIO_INDICATOR_CLASS[size]} />\n\t\t\t</RadioGroupPrimitive.Indicator>\n\t\t</RadioGroupPrimitive.Item>\n\t),\n);\nRadioRoot.displayName = RadioGroupPrimitive.Item.displayName;\n\nexport const Radio = Object.assign(RadioRoot, {\n\tGroup: RadioGroup,\n\tLegend: RadioLegend,\n\tItem: RadioRoot,\n});\n"],"mappings":";;;;;;;;;AASA,IAAM,IAA8C;CACnD,IAAI;CACJ,SAAS;AACV,GAEM,IAAmD;CACxD,IAAI;CACJ,SAAS;AACV,GA8CM,IAAc,EAAM,YACxB,EAAE,cAAW,GAAG,KAAS,MACzB,kBAAC,UAAD;CACM;CACL,WAAW,EAAG,8CAA8C,CAAS;CACrE,GAAI;AACJ,CAAA,CAEH;AACA,EAAY,cAAc;AAE1B,IAAa,IAAa,EAAM,YAK9B,EACC,cACA,UACA,cAAW,IACX,aACA,oBAAoB,GACpB,gBAAgB,GAChB,mBAAmB,GACnB,GAAG,KAEJ,MACI;CACJ,IAAM,IAAc,EAAM,MAAM,GAC1B,IAAU,EAAQ,GAClB,IAAU,GAAG,EAAY,SACzB,IAAkB,GAAG,EAAY,UACjC,IAAkD,CAAC,GACnD,IAA2B,CAAC;CAClC,EAAM,SAAS,QAAQ,IAAW,MAAU;EAC3C,IAAI,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,GAAa;GAC9D,EAAQ,KAAK,CAA6C;GAC1D;EACD;EACA,EAAM,KAAK,CAAK;CACjB,CAAC;CACD,IAAM,IAAiB,EAAQ,KAAK,GAAQ,MAAU;EACrD,IAAM,IACL,EAAO,MAAM,OAAO,MAAU,IAAI,IAAkB,GAAG,EAAgB,GAAG;EAC3E,OAAO,EAAM,aAAa,GAAQ;GAAE,KAAK;GAAU,IAAI;EAAS,CAAC;CAClE,CAAC,GAKK,IAAmB,CAJP,EAChB,KAAK,MAAW,EAAO,MAAM,EAAE,CAAC,CAChC,OAAO,OAAO,CAAC,CACf,KAAK,GACmB,GAAW,CAAU,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA,GACxE,IACL,CAAC,IAAU,IAAU,MAAM,CAAW,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CACtE,OACC,kBAAC,YAAD;EAAoB;EAAU,WAAU;EAAxC,UAAA;GACE;GACD,kBAAC,EAAoB,MAArB;IACM;IACK;IACV,WAAW,EAAG,cAAc,CAAS;IACrC,GAAI;IACJ,mBAAiB;IACjB,oBAAkB;IAClB,gBAAc,IAAU,KAAO;IAE9B,UAAA;GACwB,CAAA;GACzB,IACA,kBAAC,KAAD;IAAG,IAAI;IAAS,WAAU;IAAkC,MAAK;IAC/D,UAAA;GACC,CAAA,IACA;EACK;;AAEZ,CACD;AACA,EAAW,cAAc;AAEzB,IAAM,IAAY,EAAM,YACtB,EAAE,cAAW,UAAO,WAAW,GAAG,KAAS,MAC3C,kBAAC,EAAoB,MAArB;CACM;CACL,WAAW,EACV,GACA,wIACA,EAAiB,IACjB,GACA,CACD;CACA,GAAI;CAEJ,UAAA,kBAAC,EAAoB,WAArB;EAA+B,WAAU;EACxC,UAAA,kBAAC,GAAD,EAAQ,WAAW,EAAsB,GAAQ,CAAA;CACnB,CAAA;AACN,CAAA,CAE5B;AACA,EAAU,cAAc,EAAoB,KAAK;AAEjD,IAAa,IAAQ,OAAO,OAAO,GAAW;CAC7C,OAAO;CACP,QAAQ;CACR,MAAM;AACP,CAAC"}

package/dist/components/resource-list.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 export type ResourceListRow = {
     name: string;
     status: string;
@@ -6,5 +7,29 @@ export type ResourceListProps = {
     title: string;
     description?: string;
     data: ResourceListRow[];
+    /** Custom heading; falls back to PageHeader. */
+    header?: ReactNode;
+    /** Search and primary actions below the heading. */
+    toolbar?: ReactNode;
+    /** Active filters and their controls. */
+    filters?: ReactNode;
+    /** Selection-dependent actions. */
+    bulkActions?: ReactNode;
+    /** State content replacing the results; undefined falls through to children/data. */
+    state?: ReactNode;
+    /** Custom results such as a typed DataTable. */
+    children?: ReactNode;
+    /** Pagination or result summary after the results. */
+    footer?: ReactNode;
+    /** Classes for the root region. */
+    className?: string;
+    /** Show the default table loading state. @default false */
+    loading?: boolean;
+    /** Content shown when default data is empty. */
+    empty?: ReactNode;
+    /** Default table error content. */
+    error?: ReactNode;
+    /** Retry callback for the default table. */
+    onRetry?: () => void;
 };
-export declare function ResourceList({ title, description, data }: ResourceListProps): import("react").JSX.Element;
+export declare function ResourceList({ title, description, data, header, toolbar, filters, bulkActions, state, children, footer, className, loading, empty, error, onRetry, }: ResourceListProps): import("react").JSX.Element;

package/dist/components/resource-list.js

@@ -1,9 +1,10 @@
 "use client";
-import { DataTable as e } from "./data-table.js";
-import { PageHeader as t } from "./page-header.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { cn as e } from "../utils/cn.js";
+import { DataTable as t } from "./data-table.js";
+import { PageHeader as n } from "./page-header.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/resource-list.tsx
-var i = [{
+var a = [{
 	id: "name",
 	header: "Name",
 	accessor: (e) => e.name
@@ -12,19 +13,31 @@ var i = [{
 	header: "Status",
 	accessor: (e) => e.status
 }];
-function a({ title: a, description: o, data: s }) {
-	return /* @__PURE__ */ r("div", {
-		className: "space-y-4",
-		children: [/* @__PURE__ */ n(t, {
-			title: a,
-			description: o
-		}), /* @__PURE__ */ n(e, {
-			data: s,
-			columns: i
-		})]
+function o({ title: o, description: s, data: c, header: l, toolbar: u, filters: d, bulkActions: f, state: p, children: m, footer: h, className: g, loading: _, empty: v, error: y, onRetry: b }) {
+	return /* @__PURE__ */ i("div", {
+		className: e("min-w-0 space-y-4", g),
+		children: [
+			l ?? /* @__PURE__ */ r(n, {
+				title: o,
+				description: s
+			}),
+			u == null ? null : /* @__PURE__ */ r("div", { children: u }),
+			d == null ? null : /* @__PURE__ */ r("div", { children: d }),
+			f == null ? null : /* @__PURE__ */ r("div", { children: f }),
+			p ?? m ?? /* @__PURE__ */ r(t, {
+				data: c,
+				columns: a,
+				loading: _,
+				empty: v,
+				error: y,
+				onRetry: b,
+				"aria-label": o
+			}),
+			h == null ? null : /* @__PURE__ */ r("div", { children: h })
+		]
 	});
 }
 //#endregion
-export { a as ResourceList };
+export { o as ResourceList };
 
 //# sourceMappingURL=resource-list.js.map

package/dist/components/resource-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"resource-list.js","names":[],"sources":["../../src/components/resource-list.tsx"],"sourcesContent":["import { DataTable, type DataTableColumn } from \"./data-table\";\nimport { PageHeader } from \"./page-header\";\n\nexport type ResourceListRow = {\n\tname: string;\n\tstatus: string;\n};\n\nexport type ResourceListProps = {\n\ttitle: string;\n\tdescription?: string;\n\tdata: ResourceListRow[];\n};\n\nconst COLUMNS: DataTableColumn<ResourceListRow>[] = [\n\t{ id: \"name\", header: \"Name\", accessor: (row) => row.name },\n\t{ id: \"status\", header: \"Status\", accessor: (row) => row.status },\n];\n\nexport function ResourceList({ title, description, data }: ResourceListProps) {\n\treturn (\n\t\t<div className=\"space-y-4\">\n\t\t\t<PageHeader title={title} description={description} />\n\t\t\t<DataTable data={data} columns={COLUMNS} />\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAcA,IAAM,IAA8C,CACnD;CAAE,IAAI;CAAQ,QAAQ;CAAQ,WAAW,MAAQ,EAAI;AAAK,GAC1D;CAAE,IAAI;CAAU,QAAQ;CAAU,WAAW,MAAQ,EAAI;AAAO,CACjE;AAEA,SAAgB,EAAa,EAAE,UAAO,gBAAa,WAA2B;CAC7E,OACC,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,kBAAC,GAAD;GAAmB;GAAoB;EAAc,CAAA,GACrD,kBAAC,GAAD;GAAiB;GAAM,SAAS;EAAU,CAAA,CACtC;;AAEP"}
+{"version":3,"file":"resource-list.js","names":[],"sources":["../../src/components/resource-list.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { DataTable, type DataTableColumn } from \"./data-table\";\nimport { PageHeader } from \"./page-header\";\n\nexport type ResourceListRow = {\n\tname: string;\n\tstatus: string;\n};\n\nexport type ResourceListProps = {\n\ttitle: string;\n\tdescription?: string;\n\tdata: ResourceListRow[];\n\t/** Custom heading; falls back to PageHeader. */\n\theader?: ReactNode;\n\t/** Search and primary actions below the heading. */\n\ttoolbar?: ReactNode;\n\t/** Active filters and their controls. */\n\tfilters?: ReactNode;\n\t/** Selection-dependent actions. */\n\tbulkActions?: ReactNode;\n\t/** State content replacing the results; undefined falls through to children/data. */\n\tstate?: ReactNode;\n\t/** Custom results such as a typed DataTable. */\n\tchildren?: ReactNode;\n\t/** Pagination or result summary after the results. */\n\tfooter?: ReactNode;\n\t/** Classes for the root region. */\n\tclassName?: string;\n\t/** Show the default table loading state. @default false */\n\tloading?: boolean;\n\t/** Content shown when default data is empty. */\n\tempty?: ReactNode;\n\t/** Default table error content. */\n\terror?: ReactNode;\n\t/** Retry callback for the default table. */\n\tonRetry?: () => void;\n};\n\nconst COLUMNS: DataTableColumn<ResourceListRow>[] = [\n\t{ id: \"name\", header: \"Name\", accessor: (row) => row.name },\n\t{ id: \"status\", header: \"Status\", accessor: (row) => row.status },\n];\n\nexport function ResourceList({\n\ttitle,\n\tdescription,\n\tdata,\n\theader,\n\ttoolbar,\n\tfilters,\n\tbulkActions,\n\tstate,\n\tchildren,\n\tfooter,\n\tclassName,\n\tloading,\n\tempty,\n\terror,\n\tonRetry,\n}: ResourceListProps) {\n\treturn (\n\t\t<div className={cn(\"min-w-0 space-y-4\", className)}>\n\t\t\t{header ?? <PageHeader title={title} description={description} />}\n\t\t\t{toolbar != null ? <div>{toolbar}</div> : null}\n\t\t\t{filters != null ? <div>{filters}</div> : null}\n\t\t\t{bulkActions != null ? <div>{bulkActions}</div> : null}\n\t\t\t{state ?? children ?? (\n\t\t\t\t<DataTable\n\t\t\t\t\tdata={data}\n\t\t\t\t\tcolumns={COLUMNS}\n\t\t\t\t\tloading={loading}\n\t\t\t\t\tempty={empty}\n\t\t\t\t\terror={error}\n\t\t\t\t\tonRetry={onRetry}\n\t\t\t\t\taria-label={title}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{footer != null ? <div>{footer}</div> : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;AAwCA,IAAM,IAA8C,CACnD;CAAE,IAAI;CAAQ,QAAQ;CAAQ,WAAW,MAAQ,EAAI;AAAK,GAC1D;CAAE,IAAI;CAAU,QAAQ;CAAU,WAAW,MAAQ,EAAI;AAAO,CACjE;AAEA,SAAgB,EAAa,EAC5B,UACA,gBACA,SACA,WACA,YACA,YACA,gBACA,UACA,aACA,WACA,cACA,YACA,UACA,UACA,cACqB;CACrB,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,qBAAqB,CAAS;EAAjD,UAAA;GACE,KAAU,kBAAC,GAAD;IAAmB;IAAoB;GAAc,CAAA;GAC/D,KAAW,OAA8B,OAAvB,kBAAC,OAAD,EAAA,UAAM,EAAa,CAAA;GACrC,KAAW,OAA8B,OAAvB,kBAAC,OAAD,EAAA,UAAM,EAAa,CAAA;GACrC,KAAe,OAAkC,OAA3B,kBAAC,OAAD,EAAA,UAAM,EAAiB,CAAA;GAC7C,KAAS,KACT,kBAAC,GAAD;IACO;IACN,SAAS;IACA;IACF;IACA;IACE;IACT,cAAY;GACZ,CAAA;GAED,KAAU,OAA6B,OAAtB,kBAAC,OAAD,EAAA,UAAM,EAAY,CAAA;EAChC;;AAEP"}

package/dist/components/responsive-master-detail.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export interface ResponsiveMasterDetailProps {
+    /** Accessible name of the composition. */
+    label: string;
+    /** Application-rendered list; selection, routing and data remain outside. */
+    list: ReactNode;
+    /** Application-rendered detail content. */
+    children: ReactNode;
+    /** Controlled detail visibility. */
+    detailOpen: boolean;
+    /** Requests opening/closing the detail; the caller accepts the change. */
+    onDetailOpenChange: (open: boolean) => void;
+    /** Current selection identity, used to focus newly selected mobile details. */
+    selectedId?: string | null;
+    /** List region name. @default "Items" */
+    listLabel?: string;
+    /** Detail region name. @default "Details" */
+    detailLabel?: string;
+    /** Mobile return action text. @default "Back to items" */
+    backLabel?: string;
+    /** Desktop detail placeholder while no item is open. */
+    empty?: ReactNode;
+    /** Additional root classes; provide application-specific height/scrolling here. */
+    className?: string;
+}
+/** Two columns at 768px and above; one visible, focusable pane below it. Not a modal. */
+export declare function ResponsiveMasterDetail({ label, list, children, detailOpen, onDetailOpenChange, selectedId, listLabel, detailLabel, backLabel, empty, className, }: ResponsiveMasterDetailProps): import("react").JSX.Element;

package/dist/components/responsive-master-detail.js

@@ -0,0 +1,85 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { Button as n } from "./button.js";
+import { useEffect as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { ArrowLeft as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/responsive-master-detail.tsx
+function u({ label: u, list: d, children: f, detailOpen: p, onDetailOpenChange: m, selectedId: h, listLabel: g = "Items", detailLabel: _ = "Details", backLabel: v = "Back to items", empty: y = /* @__PURE__ */ c("p", {
+	className: "p-6 text-sm text-basalt-muted-foreground",
+	children: "Choose an item to see its details."
+}), className: b }) {
+	let [x, S] = o(!1), C = a(null), w = a(null), T = a(null), E = a({
+		compact: !1,
+		detailOpen: !1,
+		selectedId: h
+	});
+	return r(() => {
+		let e = window.matchMedia("(max-width: 767px)"), t = () => S(e.matches);
+		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), i(() => {
+		let e = E.current;
+		if (x && p && (!e.compact || !e.detailOpen || e.selectedId !== h) && w.current?.focus(), x && !p && e.detailOpen) {
+			let e = T.current;
+			e?.isConnected && !e.closest("[hidden], [inert]") ? e.focus() : C.current?.focus();
+		}
+		E.current = {
+			compact: x,
+			detailOpen: p,
+			selectedId: h
+		};
+	}, [
+		x,
+		p,
+		h
+	]), /* @__PURE__ */ l("div", {
+		role: "group",
+		"aria-label": u,
+		className: e(t, "grid min-w-0 grid-cols-1 overflow-hidden rounded-basalt-lg border border-basalt-border md:grid-cols-[minmax(12rem,20rem)_minmax(0,1fr)]", b),
+		children: [/* @__PURE__ */ c("section", {
+			ref: C,
+			"aria-label": g,
+			tabIndex: -1,
+			hidden: x && p,
+			inert: x && p,
+			className: e("min-w-0 bg-basalt-card focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:border-r md:border-basalt-border", p && "hidden md:block"),
+			onFocusCapture: (e) => {
+				T.current = e.target;
+			},
+			onPointerDownCapture: (e) => {
+				let t = e.target.closest("button, a[href], input, [tabindex]");
+				t && (T.current = t);
+			},
+			children: d
+		}), /* @__PURE__ */ l("section", {
+			ref: w,
+			"aria-label": _,
+			tabIndex: -1,
+			hidden: x && !p,
+			inert: x && !p,
+			className: e("min-w-0 bg-basalt-background focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring", !p && "hidden md:block"),
+			children: [
+				x && p && /* @__PURE__ */ c("div", {
+					className: "border-b border-basalt-border p-2",
+					children: /* @__PURE__ */ l(n, {
+						size: "sm",
+						variant: "ghost",
+						onClick: () => m(!1),
+						children: [/* @__PURE__ */ c(s, {}), v]
+					})
+				}),
+				/* @__PURE__ */ c("div", {
+					hidden: !p,
+					inert: !p,
+					children: f
+				}),
+				!p && y
+			]
+		})]
+	});
+}
+//#endregion
+export { u as ResponsiveMasterDetail };
+
+//# sourceMappingURL=responsive-master-detail.js.map

package/dist/components/responsive-master-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-master-detail.js","names":[],"sources":["../../src/components/responsive-master-detail.tsx"],"sourcesContent":["import { ArrowLeft } from \"lucide-react\";\nimport { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\n\nexport interface ResponsiveMasterDetailProps {\n\t/** Accessible name of the composition. */\n\tlabel: string;\n\t/** Application-rendered list; selection, routing and data remain outside. */\n\tlist: ReactNode;\n\t/** Application-rendered detail content. */\n\tchildren: ReactNode;\n\t/** Controlled detail visibility. */\n\tdetailOpen: boolean;\n\t/** Requests opening/closing the detail; the caller accepts the change. */\n\tonDetailOpenChange: (open: boolean) => void;\n\t/** Current selection identity, used to focus newly selected mobile details. */\n\tselectedId?: string | null;\n\t/** List region name. @default \"Items\" */\n\tlistLabel?: string;\n\t/** Detail region name. @default \"Details\" */\n\tdetailLabel?: string;\n\t/** Mobile return action text. @default \"Back to items\" */\n\tbackLabel?: string;\n\t/** Desktop detail placeholder while no item is open. */\n\tempty?: ReactNode;\n\t/** Additional root classes; provide application-specific height/scrolling here. */\n\tclassName?: string;\n}\n/** Two columns at 768px and above; one visible, focusable pane below it. Not a modal. */\nexport function ResponsiveMasterDetail({\n\tlabel,\n\tlist,\n\tchildren,\n\tdetailOpen,\n\tonDetailOpenChange,\n\tselectedId,\n\tlistLabel = \"Items\",\n\tdetailLabel = \"Details\",\n\tbackLabel = \"Back to items\",\n\tempty = (\n\t\t<p className=\"p-6 text-sm text-basalt-muted-foreground\">Choose an item to see its details.</p>\n\t),\n\tclassName,\n}: ResponsiveMasterDetailProps) {\n\tconst [compact, setCompact] = useState(false);\n\tconst listRegion = useRef<HTMLElement>(null);\n\tconst detailRegion = useRef<HTMLElement>(null);\n\tconst opener = useRef<HTMLElement | null>(null);\n\tconst previous = useRef({ compact: false, detailOpen: false, selectedId });\n\tuseEffect(() => {\n\t\tconst query = window.matchMedia(\"(max-width: 767px)\");\n\t\tconst update = () => setCompact(query.matches);\n\t\tupdate();\n\t\tquery.addEventListener(\"change\", update);\n\t\treturn () => query.removeEventListener(\"change\", update);\n\t}, []);\n\tuseLayoutEffect(() => {\n\t\tconst before = previous.current;\n\t\tif (\n\t\t\tcompact &&\n\t\t\tdetailOpen &&\n\t\t\t(!before.compact || !before.detailOpen || before.selectedId !== selectedId)\n\t\t)\n\t\t\tdetailRegion.current?.focus();\n\t\tif (compact && !detailOpen && before.detailOpen) {\n\t\t\tconst target = opener.current;\n\t\t\tif (target?.isConnected && !target.closest(\"[hidden], [inert]\")) target.focus();\n\t\t\telse listRegion.current?.focus();\n\t\t}\n\t\tprevious.current = { compact, detailOpen, selectedId };\n\t}, [compact, detailOpen, selectedId]);\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"grid min-w-0 grid-cols-1 overflow-hidden rounded-basalt-lg border border-basalt-border md:grid-cols-[minmax(12rem,20rem)_minmax(0,1fr)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<section\n\t\t\t\tref={listRegion}\n\t\t\t\taria-label={listLabel}\n\t\t\t\ttabIndex={-1}\n\t\t\t\thidden={compact && detailOpen}\n\t\t\t\tinert={compact && detailOpen}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"min-w-0 bg-basalt-card focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:border-r md:border-basalt-border\",\n\t\t\t\t\tdetailOpen && \"hidden md:block\",\n\t\t\t\t)}\n\t\t\t\tonFocusCapture={(event) => {\n\t\t\t\t\topener.current = event.target;\n\t\t\t\t}}\n\t\t\t\tonPointerDownCapture={(event) => {\n\t\t\t\t\tconst target = (event.target as Element).closest<HTMLElement>(\n\t\t\t\t\t\t\"button, a[href], input, [tabindex]\",\n\t\t\t\t\t);\n\t\t\t\t\tif (target) opener.current = target;\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{list}\n\t\t\t</section>\n\t\t\t<section\n\t\t\t\tref={detailRegion}\n\t\t\t\taria-label={detailLabel}\n\t\t\t\ttabIndex={-1}\n\t\t\t\thidden={compact && !detailOpen}\n\t\t\t\tinert={compact && !detailOpen}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"min-w-0 bg-basalt-background focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring\",\n\t\t\t\t\t!detailOpen && \"hidden md:block\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{compact && detailOpen && (\n\t\t\t\t\t<div className=\"border-b border-basalt-border p-2\">\n\t\t\t\t\t\t<Button size=\"sm\" variant=\"ghost\" onClick={() => onDetailOpenChange(false)}>\n\t\t\t\t\t\t\t<ArrowLeft />\n\t\t\t\t\t\t\t{backLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div hidden={!detailOpen} inert={!detailOpen}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t\t{!detailOpen && empty}\n\t\t\t</section>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgB,EAAuB,EACtC,UACA,SACA,aACA,eACA,uBACA,eACA,eAAY,SACZ,iBAAc,WACd,eAAY,iBACZ,WACC,kBAAC,KAAD;CAAG,WAAU;CAA2C,UAAA;AAAqC,CAAA,GAE9F,gBAC+B;CAC/B,IAAM,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,IAAa,EAAoB,IAAI,GACrC,IAAe,EAAoB,IAAI,GACvC,IAAS,EAA2B,IAAI,GACxC,IAAW,EAAO;EAAE,SAAS;EAAO,YAAY;EAAO;CAAW,CAAC;CAuBzE,OAtBA,QAAgB;EACf,IAAM,IAAQ,OAAO,WAAW,oBAAoB,GAC9C,UAAe,EAAW,EAAM,OAAO;EAG7C,OAFA,EAAO,GACP,EAAM,iBAAiB,UAAU,CAAM,SAC1B,EAAM,oBAAoB,UAAU,CAAM;CACxD,GAAG,CAAC,CAAC,GACL,QAAsB;EACrB,IAAM,IAAS,EAAS;EAOxB,IALC,KACA,MACC,CAAC,EAAO,WAAW,CAAC,EAAO,cAAc,EAAO,eAAe,MAEhE,EAAa,SAAS,MAAM,GACzB,KAAW,CAAC,KAAc,EAAO,YAAY;GAChD,IAAM,IAAS,EAAO;GACtB,AAAI,GAAQ,eAAe,CAAC,EAAO,QAAQ,mBAAmB,IAAG,EAAO,MAAM,IACzE,EAAW,SAAS,MAAM;EAChC;EACA,EAAS,UAAU;GAAE;GAAS;GAAY;EAAW;CACtD,GAAG;EAAC;EAAS;EAAY;CAAU,CAAC,GAEnC,kBAAC,OAAD;EACC,MAAK;EACL,cAAY;EACZ,WAAW,EACV,GACA,2IACA,CACD;EAPD,UAAA,CASC,kBAAC,WAAD;GACC,KAAK;GACL,cAAY;GACZ,UAAU;GACV,QAAQ,KAAW;GACnB,OAAO,KAAW;GAClB,WAAW,EACV,wJACA,KAAc,iBACf;GACA,iBAAiB,MAAU;IAC1B,EAAO,UAAU,EAAM;GACxB;GACA,uBAAuB,MAAU;IAChC,IAAM,IAAU,EAAM,OAAmB,QACxC,oCACD;IACA,AAAI,MAAQ,EAAO,UAAU;GAC9B;GAEC,UAAA;EACO,CAAA,GACT,kBAAC,WAAD;GACC,KAAK;GACL,cAAY;GACZ,UAAU;GACV,QAAQ,KAAW,CAAC;GACpB,OAAO,KAAW,CAAC;GACnB,WAAW,EACV,0HACA,CAAC,KAAc,iBAChB;GATD,UAAA;IAWE,KAAW,KACX,kBAAC,OAAD;KAAK,WAAU;KACd,UAAA,kBAAC,GAAD;MAAQ,MAAK;MAAK,SAAQ;MAAQ,eAAe,EAAmB,EAAK;MAAzE,UAAA,CACC,kBAAC,GAAD,CAAY,CAAA,GACX,CACM;;IACJ,CAAA;IAEN,kBAAC,OAAD;KAAK,QAAQ,CAAC;KAAY,OAAO,CAAC;KAChC;IACG,CAAA;IACJ,CAAC,KAAc;GACR;EACL,CAAA,CAAA;;AAEP"}

package/dist/components/section-rule.js

@@ -1,44 +1,45 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { Tooltip as t, TooltipContent as n, TooltipProvider as r, TooltipTrigger as i } from "./tooltip.js";
-import { Info as a } from "lucide-react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { Tooltip as n, TooltipContent as r, TooltipProvider as i, TooltipTrigger as a } from "./tooltip.js";
+import { Info as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/section-rule.tsx
-function c({ title: c, hint: l, actions: u, className: d, children: f, ...p }) {
-	return /* @__PURE__ */ s("section", {
-		className: e("space-y-3", d),
-		...p,
-		children: [/* @__PURE__ */ s("div", {
-			className: "flex items-center gap-3",
+function l({ title: l, hint: u, actions: d, className: f, children: p, ...m }) {
+	return /* @__PURE__ */ c("section", {
+		className: e(t, "space-y-3", f),
+		...m,
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex flex-wrap items-center gap-3",
 			children: [
-				/* @__PURE__ */ s("div", {
+				/* @__PURE__ */ c("div", {
 					className: "flex min-w-0 items-center gap-1.5",
-					children: [/* @__PURE__ */ o("h2", {
+					children: [/* @__PURE__ */ s("h2", {
 						className: "text-xs font-medium tracking-wider text-basalt-muted-foreground uppercase",
-						children: c
-					}), l ? /* @__PURE__ */ o(r, { children: /* @__PURE__ */ s(t, { children: [/* @__PURE__ */ o(i, {
+						children: l
+					}), u ? /* @__PURE__ */ s(i, { children: /* @__PURE__ */ c(n, { children: [/* @__PURE__ */ s(a, {
 						asChild: !0,
-						children: /* @__PURE__ */ o("button", {
+						children: /* @__PURE__ */ s("button", {
 							type: "button",
 							"aria-label": "More information",
 							className: "inline-flex size-4 shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground",
-							children: /* @__PURE__ */ o(a, { className: "size-3.5" })
+							children: /* @__PURE__ */ s(o, { className: "size-3.5" })
 						})
-					}), /* @__PURE__ */ o(n, { children: l })] }) }) : null]
+					}), /* @__PURE__ */ s(r, { children: u })] }) }) : null]
 				}),
-				/* @__PURE__ */ o("div", {
+				/* @__PURE__ */ s("div", {
 					className: "h-px min-w-4 flex-1 border-t border-dashed border-basalt-border",
 					"aria-hidden": "true"
 				}),
-				u ? /* @__PURE__ */ o("div", {
-					className: "flex shrink-0 flex-wrap items-center justify-end gap-2",
-					children: u
+				d ? /* @__PURE__ */ s("div", {
+					className: "flex min-w-0 max-w-full shrink-0 flex-wrap items-center justify-end gap-2",
+					children: d
 				}) : null
 			]
-		}), f]
+		}), p]
 	});
 }
 //#endregion
-export { c as SectionRule };
+export { l as SectionRule };
 
 //# sourceMappingURL=section-rule.js.map

package/dist/components/section-rule.js.map

@@ -1 +1 @@
-{"version":3,"file":"section-rule.js","names":[],"sources":["../../src/components/section-rule.tsx"],"sourcesContent":["import { Info } from \"lucide-react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./tooltip\";\n\nexport type SectionRuleProps = Omit<HTMLAttributes<HTMLElement>, \"title\"> & {\n\t/** Section title shown before the dashed rule. */\n\ttitle: ReactNode;\n\t/** Info tooltip beside the title. */\n\thint?: ReactNode;\n\t/** Actions on the right of the dashed rule. */\n\tactions?: ReactNode;\n};\n\nexport function SectionRule({\n\ttitle,\n\thint,\n\tactions,\n\tclassName,\n\tchildren,\n\t...props\n}: SectionRuleProps) {\n\treturn (\n\t\t<section className={cn(\"space-y-3\", className)} {...props}>\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t<div className=\"flex min-w-0 items-center gap-1.5\">\n\t\t\t\t\t<h2 className=\"text-xs font-medium tracking-wider text-basalt-muted-foreground uppercase\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h2>\n\t\t\t\t\t{hint ? (\n\t\t\t\t\t\t<TooltipProvider>\n\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\taria-label=\"More information\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex size-4 shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Info className=\"size-3.5\" />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t<TooltipContent>{hint}</TooltipContent>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"h-px min-w-4 flex-1 border-t border-dashed border-basalt-border\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t/>\n\t\t\t\t{actions ? (\n\t\t\t\t\t<div className=\"flex shrink-0 flex-wrap items-center justify-end gap-2\">{actions}</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{children}\n\t\t</section>\n\t);\n}\n"],"mappings":";;;;;;AAcA,SAAgB,EAAY,EAC3B,UACA,SACA,YACA,cACA,aACA,GAAG,KACiB;CACpB,OACC,kBAAC,WAAD;EAAS,WAAW,EAAG,aAAa,CAAS;EAAG,GAAI;EAApD,UAAA,CACC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,MAAD;MAAI,WAAU;MACZ,UAAA;KACE,CAAA,GACH,IACA,kBAAC,GAAD,EAAA,UACC,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD;MAAgB,SAAA;MACf,UAAA,kBAAC,UAAD;OACC,MAAK;OACL,cAAW;OACX,WAAU;OAEV,UAAA,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;MACrB,CAAA;KACO,CAAA,GAChB,kBAAC,GAAD,EAAA,UAAiB,EAAqB,CAAA,CAC9B,EAAA,CAAA,EACO,CAAA,IACd,IACA;;IACL,kBAAC,OAAD;KACC,WAAU;KACV,eAAY;IACZ,CAAA;IACA,IACA,kBAAC,OAAD;KAAK,WAAU;KAA0D,UAAA;IAAa,CAAA,IACnF;GACA;EACJ,CAAA,GAAA,CACO;;AAEX"}
+{"version":3,"file":"section-rule.js","names":[],"sources":["../../src/components/section-rule.tsx"],"sourcesContent":["import { Info } from \"lucide-react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./tooltip\";\n\nexport type SectionRuleProps = Omit<HTMLAttributes<HTMLElement>, \"title\"> & {\n\t/** Section title shown before the dashed rule. */\n\ttitle: ReactNode;\n\t/** Info tooltip beside the title. */\n\thint?: ReactNode;\n\t/** Actions on the right of the dashed rule. */\n\tactions?: ReactNode;\n};\n\nexport function SectionRule({\n\ttitle,\n\thint,\n\tactions,\n\tclassName,\n\tchildren,\n\t...props\n}: SectionRuleProps) {\n\treturn (\n\t\t<section className={cn(BASALT_UI_CLASS, \"space-y-3\", className)} {...props}>\n\t\t\t<div className=\"flex flex-wrap items-center gap-3\">\n\t\t\t\t<div className=\"flex min-w-0 items-center gap-1.5\">\n\t\t\t\t\t<h2 className=\"text-xs font-medium tracking-wider text-basalt-muted-foreground uppercase\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h2>\n\t\t\t\t\t{hint ? (\n\t\t\t\t\t\t<TooltipProvider>\n\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\taria-label=\"More information\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex size-4 shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Info className=\"size-3.5\" />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t<TooltipContent>{hint}</TooltipContent>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"h-px min-w-4 flex-1 border-t border-dashed border-basalt-border\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t/>\n\t\t\t\t{actions ? (\n\t\t\t\t\t<div className=\"flex min-w-0 max-w-full shrink-0 flex-wrap items-center justify-end gap-2\">\n\t\t\t\t\t\t{actions}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{children}\n\t\t</section>\n\t);\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,EAAY,EAC3B,UACA,SACA,YACA,cACA,aACA,GAAG,KACiB;CACpB,OACC,kBAAC,WAAD;EAAS,WAAW,EAAG,GAAiB,aAAa,CAAS;EAAG,GAAI;EAArE,UAAA,CACC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,MAAD;MAAI,WAAU;MACZ,UAAA;KACE,CAAA,GACH,IACA,kBAAC,GAAD,EAAA,UACC,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD;MAAgB,SAAA;MACf,UAAA,kBAAC,UAAD;OACC,MAAK;OACL,cAAW;OACX,WAAU;OAEV,UAAA,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;MACrB,CAAA;KACO,CAAA,GAChB,kBAAC,GAAD,EAAA,UAAiB,EAAqB,CAAA,CAC9B,EAAA,CAAA,EACO,CAAA,IACd,IACA;;IACL,kBAAC,OAAD;KACC,WAAU;KACV,eAAY;IACZ,CAAA;IACA,IACA,kBAAC,OAAD;KAAK,WAAU;KACb,UAAA;IACG,CAAA,IACF;GACA;EACJ,CAAA,GAAA,CACO;;AAEX"}

package/dist/components/select.d.ts

@@ -22,7 +22,15 @@ export type SelectValueProps = Omit<React.ComponentPropsWithoutRef<typeof Select
     placeholder?: React.ReactNode;
 };
 export declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Value>>>;
-export type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;
+type RadixSelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;
+export type SelectGroupProps = Omit<RadixSelectGroupProps, "asChild"> & {
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * Group forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixSelectGroupProps["asChild"];
+};
 export declare const SelectGroup: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Group>>>;
 export type SelectSize = "sm" | "default" | "lg";
 export type SelectTriggerProps = Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, "disabled"> & {
@@ -59,8 +67,23 @@ export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<Omit<Se
      */
     disabled?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;
-export type SelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;
-export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type RadixSelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;
+export type SelectLabelProps = Omit<RadixSelectLabelProps, "asChild"> & {
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * Label forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixSelectLabelProps["asChild"];
+};
+export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref">, "asChild"> & {
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * Label forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixSelectLabelProps["asChild"];
+} & React.RefAttributes<HTMLDivElement>>;
 export type SelectContentProps = Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, "position" | "sideOffset"> & {
     /**
      * The positioning mode for the select content.
@@ -97,3 +120,4 @@ export declare const SelectItem: React.ForwardRefExoticComponent<Omit<Omit<Selec
      */
     value: string;
 } & React.RefAttributes<HTMLDivElement>>;
+export {};