@burtson-labs/ui 0.14.0 → 0.15.0

package/dist/components/radio-group.js

@@ -1,29 +1,70 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses, noOutlineClasses, touchTargetClasses } from "../lib/utils.js";
 import { Indicator as RadioGroupIndicator, Item as RadioGroupItem$1, RadioGroup as RadioGroup$1 } from "../primitives/vendor/radix/react-radio-group/radio-group.js";
-import "react";
-import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/radio-group.tsx
-function RadioGroup({ className, ...props }) {
+var RadioGroup = React.forwardRef(function RadioGroup({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		ref,
 		"data-slot": "radio-group",
 		className: cn("grid gap-3", className),
 		...props
 	});
-}
-function RadioGroupItem({ className, ...props }) {
+});
+/**
+* A 16px dot with a 44px hit area on touch screens; focus is the shared 2px
+* outline. Chosen, it is primary in light mode and brand in dark mode (see
+* Checkbox).
+*/
+var RadioGroupItem = React.forwardRef(function RadioGroupItem({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(RadioGroupItem$1, {
+		ref,
 		"data-slot": "radio-group-item",
-		className: cn("aspect-square size-4 shrink-0 rounded-full border border-border-strong bg-surface text-primary shadow-xs transition-[border-color,box-shadow] outline-none hover:border-brand/50 focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary", className),
+		className: cn("aspect-square size-4 shrink-0 rounded-full border border-input bg-surface text-primary shadow-xs transition-[border-color,box-shadow] hover:border-brand/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary dark:text-brand dark:data-[state=checked]:border-brand", focusRingClasses, touchTargetClasses, className),
 		...props,
 		children: /* @__PURE__ */ jsx(RadioGroupIndicator, {
 			"data-slot": "radio-group-indicator",
 			className: "relative flex items-center justify-center",
-			children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-primary" })
+			children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-current" })
 		})
 	});
-}
+});
+/**
+* One option of a RadioGroup as a bordered card: the dot, a title and a line
+* of help, the whole card the target (44px or taller). The chosen card takes
+* the brand border; focus shows once, on the card. Pairs with CheckboxCard.
+*/
+var RadioCard = React.forwardRef(function RadioCard({ title, description, id: idProp, disabled, className, cardClassName, ...props }, ref) {
+	const auto = React.useId();
+	const id = idProp ?? auto;
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		"data-slot": "radio-card",
+		className: cn("flex min-h-11 cursor-pointer items-start gap-3 rounded-md border border-border bg-surface px-3 py-2.5 transition-colors hover:border-border-strong", "has-[[data-state=checked]]:border-brand/40 has-[[data-state=checked]]:bg-brand-soft/50", "has-[:focus-visible]:border-ring has-[:focus-visible]:inset-ring-1 has-[:focus-visible]:inset-ring-ring", "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60 has-[:disabled]:hover:border-border", cardClassName),
+		children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+			ref,
+			id,
+			disabled,
+			"aria-labelledby": `${id}-title`,
+			"aria-describedby": description ? `${id}-description` : void 0,
+			className: cn("mt-0.5 focus-visible:outline-none", noOutlineClasses, className),
+			...props
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "grid min-w-0 gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				id: `${id}-title`,
+				className: "text-sm leading-5 font-medium",
+				children: title
+			}), description && /* @__PURE__ */ jsx("span", {
+				id: `${id}-description`,
+				className: "text-[13px] leading-5 text-muted-foreground",
+				children: description
+			})]
+		})]
+	});
+});
 //#endregion
-export { RadioGroup, RadioGroupItem };
+export { RadioCard, RadioGroup, RadioGroupItem };
 
 //# sourceMappingURL=radio-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":["RadioGroupPrimitive.Root","RadioGroupPrimitive.Item","RadioGroupPrimitive.Indicator"],"sources":["../../src/components/radio-group.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as RadioGroupPrimitive from '../primitives/vendor/radix/react-radio-group';\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn('grid gap-3', className)}\n      {...props}\n    />\n  );\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        'aspect-square size-4 shrink-0 rounded-full border border-border-strong bg-surface text-primary shadow-xs transition-[border-color,box-shadow] outline-none hover:border-brand/50 focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary',\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <span className=\"size-2 rounded-full bg-primary\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":";;;;;;AAKA,SAAS,WAAW,EAClB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,cAAD;EACE,aAAU;EACV,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;CACxD,OACE,oBAACC,kBAAD;EACE,aAAU;EACV,WAAW,GACT,4VACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACC,qBAAD;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,QAAD,EAAM,WAAU,iCAAkC,CAAA;EACrB,CAAA;CACP,CAAA;AAE9B"}
+{"version":3,"file":"radio-group.js","names":["RadioGroupPrimitive.Root","RadioGroupPrimitive.Item","RadioGroupPrimitive.Indicator"],"sources":["../../src/components/radio-group.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn, focusRingClasses, noOutlineClasses, touchTargetClasses } from '../lib/utils';\nimport * as RadioGroupPrimitive from '../primitives/vendor/radix/react-radio-group';\n\nconst RadioGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof RadioGroupPrimitive.Root>\n>(function RadioGroup({ className, ...props }, ref) {\n  return (\n    <RadioGroupPrimitive.Root\n      ref={ref}\n      data-slot=\"radio-group\"\n      className={cn('grid gap-3', className)}\n      {...props}\n    />\n  );\n});\n\n/**\n * A 16px dot with a 44px hit area on touch screens; focus is the shared 2px\n * outline. Chosen, it is primary in light mode and brand in dark mode (see\n * Checkbox).\n */\nconst RadioGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof RadioGroupPrimitive.Item>\n>(function RadioGroupItem({ className, ...props }, ref) {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      data-slot=\"radio-group-item\"\n      className={cn(\n        'aspect-square size-4 shrink-0 rounded-full border border-input bg-surface text-primary shadow-xs transition-[border-color,box-shadow] hover:border-brand/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary dark:text-brand dark:data-[state=checked]:border-brand',\n        focusRingClasses,\n        touchTargetClasses,\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <span className=\"size-2 rounded-full bg-current\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n});\n\nexport interface RadioCardProps extends Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive.Item>,\n  'title' | 'children'\n> {\n  /** The option's name. */\n  title: React.ReactNode;\n  /** A sentence under the name: what choosing it means. */\n  description?: React.ReactNode;\n  /** Extra classes for the card (the label); className goes to the radio. */\n  cardClassName?: string;\n}\n\n/**\n * One option of a RadioGroup as a bordered card: the dot, a title and a line\n * of help, the whole card the target (44px or taller). The chosen card takes\n * the brand border; focus shows once, on the card. Pairs with CheckboxCard.\n */\nconst RadioCard = React.forwardRef<HTMLButtonElement, RadioCardProps>(function RadioCard(\n  { title, description, id: idProp, disabled, className, cardClassName, ...props },\n  ref,\n) {\n  const auto = React.useId();\n  const id = idProp ?? auto;\n  return (\n    <label\n      htmlFor={id}\n      data-slot=\"radio-card\"\n      className={cn(\n        'flex min-h-11 cursor-pointer items-start gap-3 rounded-md border border-border bg-surface px-3 py-2.5 transition-colors hover:border-border-strong',\n        'has-[[data-state=checked]]:border-brand/40 has-[[data-state=checked]]:bg-brand-soft/50',\n        'has-[:focus-visible]:border-ring has-[:focus-visible]:inset-ring-1 has-[:focus-visible]:inset-ring-ring',\n        'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60 has-[:disabled]:hover:border-border',\n        cardClassName,\n      )}\n    >\n      <RadioGroupItem\n        ref={ref}\n        id={id}\n        disabled={disabled}\n        aria-labelledby={`${id}-title`}\n        aria-describedby={description ? `${id}-description` : undefined}\n        // The card draws the focus ring; the dot keeps a system outline in forced colors.\n        className={cn('mt-0.5 focus-visible:outline-none', noOutlineClasses, className)}\n        {...props}\n      />\n      <span className=\"grid min-w-0 gap-0.5\">\n        <span id={`${id}-title`} className=\"text-sm leading-5 font-medium\">\n          {title}\n        </span>\n        {description && (\n          <span id={`${id}-description`} className=\"text-[13px] leading-5 text-muted-foreground\">\n            {description}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n});\n\nexport { RadioCard, RadioGroup, RadioGroupItem };\n"],"mappings":";;;;;;AAKA,IAAM,aAAa,MAAM,WAGvB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAClD,OACE,oBAACA,cAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;CACL,CAAA;AAEL,CAAC;;;;;;AAOD,IAAM,iBAAiB,MAAM,WAG3B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAACC,kBAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,0UACA,kBACA,oBACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACC,qBAAD;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,QAAD,EAAM,WAAU,iCAAkC,CAAA;EACrB,CAAA;CACP,CAAA;AAE9B,CAAC;;;;;;AAmBD,IAAM,YAAY,MAAM,WAA8C,SAAS,UAC7E,EAAE,OAAO,aAAa,IAAI,QAAQ,UAAU,WAAW,eAAe,GAAG,SACzE,KACA;CACA,MAAM,OAAO,MAAM,MAAM;CACzB,MAAM,KAAK,UAAU;CACrB,OACE,qBAAC,SAAD;EACE,SAAS;EACT,aAAU;EACV,WAAW,GACT,sJACA,0FACA,2GACA,qGACA,aACF;EATF,UAAA,CAWE,oBAAC,gBAAD;GACO;GACD;GACM;GACV,mBAAiB,GAAG,GAAG;GACvB,oBAAkB,cAAc,GAAG,GAAG,gBAAgB,KAAA;GAEtD,WAAW,GAAG,qCAAqC,kBAAkB,SAAS;GAC9E,GAAI;EACL,CAAA,GACD,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,QAAD;IAAM,IAAI,GAAG,GAAG;IAAS,WAAU;IAChC,UAAA;GACG,CAAA,GACL,eACC,oBAAC,QAAD;IAAM,IAAI,GAAG,GAAG;IAAe,WAAU;IACtC,UAAA;GACG,CAAA,CAEJ;EACD,CAAA,CAAA;;AAEX,CAAC"}

package/dist/components/reasoning.d.ts

@@ -6,9 +6,9 @@ export interface ReasoningProps extends React.ComponentProps<'div'> {
     defaultOpen?: boolean;
 }
 /** A model's reasoning, collapsed to one line ("Thought for 3s") unless opened. */
-declare function Reasoning({ streaming, durationMs, defaultOpen, children, className, ...props }: ReasoningProps): React.JSX.Element;
+declare const Reasoning: React.ForwardRefExoticComponent<Omit<ReasoningProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /** Three pulsing dots while a reply is on its way. Still under reduced motion. */
-declare function StreamingIndicator({ className, label, ...props }: React.ComponentProps<'span'> & {
+declare const StreamingIndicator: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & {
     label?: string;
-}): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Reasoning, StreamingIndicator };

package/dist/components/reasoning.js

@@ -1,22 +1,23 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import { Content, Root, Trigger } from "../primitives/vendor/radix/react-collapsible/collapsible.js";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import ChevronRight from "@burtson-labs/icons/react/chevron-right";
 import Lightbulb from "@burtson-labs/icons/react/lightbulb";
 //#region src/components/reasoning.tsx
 /** A model's reasoning, collapsed to one line ("Thought for 3s") unless opened. */
-function Reasoning({ streaming = false, durationMs, defaultOpen = false, children, className, ...props }) {
+var Reasoning = React.forwardRef(function Reasoning({ streaming = false, durationMs, defaultOpen = false, children, className, ...props }, ref) {
 	const label = streaming ? "Thinking…" : durationMs !== void 0 ? `Thought for ${Math.max(1, Math.round(durationMs / 1e3))}s` : "Reasoning";
 	return /* @__PURE__ */ jsx(Root, {
 		defaultOpen,
 		children: /* @__PURE__ */ jsxs("div", {
+			ref,
 			"data-slot": "reasoning",
 			className: cn("grid gap-1.5", className),
 			...props,
 			children: [/* @__PURE__ */ jsxs(Trigger, {
-				className: "group/reasoning inline-flex w-fit items-center gap-1.5 rounded-sm text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20",
+				className: cn("group/reasoning inline-flex w-fit items-center gap-1.5 rounded-sm text-xs text-muted-foreground hover:text-foreground pointer-coarse:min-h-11", focusRingClasses),
 				children: [
 					/* @__PURE__ */ jsx(Lightbulb, {
 						className: cn("size-3.5", streaming && "animate-pulse"),
@@ -37,10 +38,11 @@ function Reasoning({ streaming = false, durationMs, defaultOpen = false, childre
 			})]
 		})
 	});
-}
+});
 /** Three pulsing dots while a reply is on its way. Still under reduced motion. */
-function StreamingIndicator({ className, label = "Assistant is typing", ...props }) {
+var StreamingIndicator = React.forwardRef(function StreamingIndicator({ className, label = "Assistant is typing", ...props }, ref) {
 	return /* @__PURE__ */ jsx("span", {
+		ref,
 		"data-slot": "streaming-indicator",
 		role: "status",
 		"aria-label": label,
@@ -55,7 +57,7 @@ function StreamingIndicator({ className, label = "Assistant is typing", ...props
 			style: { animationDelay: `${delay}ms` }
 		}, delay))
 	});
-}
+});
 //#endregion
 export { Reasoning, StreamingIndicator };
 

package/dist/components/reasoning.js.map

@@ -1 +1 @@
-{"version":3,"file":"reasoning.js","names":["CollapsiblePrimitive.Root","CollapsiblePrimitive.Trigger","CollapsiblePrimitive.Content"],"sources":["../../src/components/reasoning.tsx"],"sourcesContent":["import ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport Lightbulb from '@burtson-labs/icons/react/lightbulb';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as CollapsiblePrimitive from '../primitives/vendor/radix/react-collapsible';\n\nexport interface ReasoningProps extends React.ComponentProps<'div'> {\n  /** True while the model is still thinking. */\n  streaming?: boolean;\n  durationMs?: number;\n  defaultOpen?: boolean;\n}\n\n/** A model's reasoning, collapsed to one line (\"Thought for 3s\") unless opened. */\nfunction Reasoning({\n  streaming = false,\n  durationMs,\n  defaultOpen = false,\n  children,\n  className,\n  ...props\n}: ReasoningProps) {\n  const label = streaming\n    ? 'Thinking…'\n    : durationMs !== undefined\n      ? `Thought for ${Math.max(1, Math.round(durationMs / 1000))}s`\n      : 'Reasoning';\n  return (\n    <CollapsiblePrimitive.Root defaultOpen={defaultOpen}>\n      <div data-slot=\"reasoning\" className={cn('grid gap-1.5', className)} {...props}>\n        <CollapsiblePrimitive.Trigger className=\"group/reasoning inline-flex w-fit items-center gap-1.5 rounded-sm text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20\">\n          <Lightbulb className={cn('size-3.5', streaming && 'animate-pulse')} aria-hidden />\n          {label}\n          <ChevronRight\n            aria-hidden\n            className=\"size-3.5 transition-transform group-data-[state=open]/reasoning:rotate-90\"\n          />\n        </CollapsiblePrimitive.Trigger>\n        <CollapsiblePrimitive.Content className=\"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n          <div className=\"border-l-2 border-border-strong pl-3 text-[13px] leading-6 text-muted-foreground\">\n            {children}\n          </div>\n        </CollapsiblePrimitive.Content>\n      </div>\n    </CollapsiblePrimitive.Root>\n  );\n}\n\n/** Three pulsing dots while a reply is on its way. Still under reduced motion. */\nfunction StreamingIndicator({\n  className,\n  label = 'Assistant is typing',\n  ...props\n}: React.ComponentProps<'span'> & { label?: string }) {\n  return (\n    <span\n      data-slot=\"streaming-indicator\"\n      role=\"status\"\n      aria-label={label}\n      className={cn('inline-flex h-5 items-center gap-1', className)}\n      {...props}\n    >\n      {[0, 150, 300].map((delay) => (\n        <span\n          key={delay}\n          className=\"size-1.5 animate-bounce rounded-full bg-muted-foreground motion-reduce:animate-none\"\n          style={{ animationDelay: `${delay}ms` }}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport { Reasoning, StreamingIndicator };\n"],"mappings":";;;;;;;;;AAeA,SAAS,UAAU,EACjB,YAAY,OACZ,YACA,cAAc,OACd,UACA,WACA,GAAG,SACc;CACjB,MAAM,QAAQ,YACV,cACA,eAAe,KAAA,IACb,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,aAAa,GAAI,CAAC,EAAE,KAC1D;CACN,OACE,oBAACA,MAAD;EAAwC;EACtC,UAAA,qBAAC,OAAD;GAAK,aAAU;GAAY,WAAW,GAAG,gBAAgB,SAAS;GAAG,GAAI;GAAzE,UAAA,CACE,qBAACC,SAAD;IAA8B,WAAU;IAAxC,UAAA;KACE,oBAAC,WAAD;MAAW,WAAW,GAAG,YAAY,aAAa,eAAe;MAAG,eAAA;KAAa,CAAA;KAChF;KACD,oBAAC,cAAD;MACE,eAAA;MACA,WAAU;KACX,CAAA;IAC2B;GAC9B,CAAA,GAAA,oBAACC,SAAD;IAA8B,WAAU;IACtC,UAAA,oBAAC,OAAD;KAAK,WAAU;KACZ;IACE,CAAA;GACuB,CAAA,CAC3B;;CACoB,CAAA;AAE/B;;AAGA,SAAS,mBAAmB,EAC1B,WACA,QAAQ,uBACR,GAAG,SACiD;CACpD,OACE,oBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;EAEH,UAAA;GAAC;GAAG;GAAK;EAAG,CAAC,CAAC,KAAK,UAClB,oBAAC,QAAD;GAEE,WAAU;GACV,OAAO,EAAE,gBAAgB,GAAG,MAAM,IAAI;EACvC,GAHM,KAGN,CACF;CACG,CAAA;AAEV"}
+{"version":3,"file":"reasoning.js","names":["CollapsiblePrimitive.Root","CollapsiblePrimitive.Trigger","CollapsiblePrimitive.Content"],"sources":["../../src/components/reasoning.tsx"],"sourcesContent":["import ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport Lightbulb from '@burtson-labs/icons/react/lightbulb';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\nimport * as CollapsiblePrimitive from '../primitives/vendor/radix/react-collapsible';\n\nexport interface ReasoningProps extends React.ComponentProps<'div'> {\n  /** True while the model is still thinking. */\n  streaming?: boolean;\n  durationMs?: number;\n  defaultOpen?: boolean;\n}\n\n/** A model's reasoning, collapsed to one line (\"Thought for 3s\") unless opened. */\nconst Reasoning = React.forwardRef<HTMLDivElement, ReasoningProps>(function Reasoning(\n  { streaming = false, durationMs, defaultOpen = false, children, className, ...props },\n  ref,\n) {\n  const label = streaming\n    ? 'Thinking…'\n    : durationMs !== undefined\n      ? `Thought for ${Math.max(1, Math.round(durationMs / 1000))}s`\n      : 'Reasoning';\n  return (\n    <CollapsiblePrimitive.Root defaultOpen={defaultOpen}>\n      <div ref={ref} data-slot=\"reasoning\" className={cn('grid gap-1.5', className)} {...props}>\n        <CollapsiblePrimitive.Trigger\n          className={cn(\n            'group/reasoning inline-flex w-fit items-center gap-1.5 rounded-sm text-xs text-muted-foreground hover:text-foreground pointer-coarse:min-h-11',\n            focusRingClasses,\n          )}\n        >\n          <Lightbulb className={cn('size-3.5', streaming && 'animate-pulse')} aria-hidden />\n          {label}\n          <ChevronRight\n            aria-hidden\n            className=\"size-3.5 transition-transform group-data-[state=open]/reasoning:rotate-90\"\n          />\n        </CollapsiblePrimitive.Trigger>\n        <CollapsiblePrimitive.Content className=\"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n          <div className=\"border-l-2 border-border-strong pl-3 text-[13px] leading-6 text-muted-foreground\">\n            {children}\n          </div>\n        </CollapsiblePrimitive.Content>\n      </div>\n    </CollapsiblePrimitive.Root>\n  );\n});\n\n/** Three pulsing dots while a reply is on its way. Still under reduced motion. */\nconst StreamingIndicator = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentProps<'span'> & { label?: string }\n>(function StreamingIndicator({ className, label = 'Assistant is typing', ...props }, ref) {\n  return (\n    <span\n      ref={ref}\n      data-slot=\"streaming-indicator\"\n      role=\"status\"\n      aria-label={label}\n      className={cn('inline-flex h-5 items-center gap-1', className)}\n      {...props}\n    >\n      {[0, 150, 300].map((delay) => (\n        <span\n          key={delay}\n          className=\"size-1.5 animate-bounce rounded-full bg-muted-foreground motion-reduce:animate-none\"\n          style={{ animationDelay: `${delay}ms` }}\n        />\n      ))}\n    </span>\n  );\n});\n\nexport { Reasoning, StreamingIndicator };\n"],"mappings":";;;;;;;;;AAeA,IAAM,YAAY,MAAM,WAA2C,SAAS,UAC1E,EAAE,YAAY,OAAO,YAAY,cAAc,OAAO,UAAU,WAAW,GAAG,SAC9E,KACA;CACA,MAAM,QAAQ,YACV,cACA,eAAe,KAAA,IACb,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,aAAa,GAAI,CAAC,EAAE,KAC1D;CACN,OACE,oBAACA,MAAD;EAAwC;EACtC,UAAA,qBAAC,OAAD;GAAU;GAAK,aAAU;GAAY,WAAW,GAAG,gBAAgB,SAAS;GAAG,GAAI;GAAnF,UAAA,CACE,qBAACC,SAAD;IACE,WAAW,GACT,iJACA,gBACF;IAJF,UAAA;KAME,oBAAC,WAAD;MAAW,WAAW,GAAG,YAAY,aAAa,eAAe;MAAG,eAAA;KAAa,CAAA;KAChF;KACD,oBAAC,cAAD;MACE,eAAA;MACA,WAAU;KACX,CAAA;IAC2B;GAC9B,CAAA,GAAA,oBAACC,SAAD;IAA8B,WAAU;IACtC,UAAA,oBAAC,OAAD;KAAK,WAAU;KACZ;IACE,CAAA;GACuB,CAAA,CAC3B;;CACoB,CAAA;AAE/B,CAAC;;AAGD,IAAM,qBAAqB,MAAM,WAG/B,SAAS,mBAAmB,EAAE,WAAW,QAAQ,uBAAuB,GAAG,SAAS,KAAK;CACzF,OACE,oBAAC,QAAD;EACO;EACL,aAAU;EACV,MAAK;EACL,cAAY;EACZ,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;EAEH,UAAA;GAAC;GAAG;GAAK;EAAG,CAAC,CAAC,KAAK,UAClB,oBAAC,QAAD;GAEE,WAAU;GACV,OAAO,EAAE,gBAAgB,GAAG,MAAM,IAAI;EACvC,GAHM,KAGN,CACF;CACG,CAAA;AAEV,CAAC"}

package/dist/components/scroll-area.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as ScrollAreaPrimitive from '../primitives/vendor/radix/react-scroll-area';
-declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): React.JSX.Element;
-declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): React.JSX.Element;
+/** The viewport joins the tab order; its focus outline is drawn inside the box, so nothing clips it. */
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ScrollArea, ScrollBar };

package/dist/components/scroll-area.js

@@ -1,27 +1,30 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import { Corner, Root, ScrollAreaScrollbar, ScrollAreaThumb, Viewport } from "../primitives/vendor/radix/react-scroll-area/scroll-area.js";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/scroll-area.tsx
-function ScrollArea({ className, children, ...props }) {
+/** The viewport joins the tab order; its focus outline is drawn inside the box, so nothing clips it. */
+var ScrollArea = React.forwardRef(function ScrollArea({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(Root, {
+		ref,
 		"data-slot": "scroll-area",
 		className: cn("relative", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(Viewport, {
 				"data-slot": "scroll-area-viewport",
-				className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+				className: cn("size-full rounded-[inherit] transition-[color,box-shadow]", focusRingClasses, "focus-visible:outline-offset-[-2px]"),
 				children
 			}),
 			/* @__PURE__ */ jsx(ScrollBar, {}),
 			/* @__PURE__ */ jsx(Corner, {})
 		]
 	});
-}
-function ScrollBar({ className, orientation = "vertical", ...props }) {
+});
+var ScrollBar = React.forwardRef(function ScrollBar({ className, orientation = "vertical", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
+		ref,
 		"data-slot": "scroll-area-scrollbar",
 		orientation,
 		className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
@@ -31,7 +34,7 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 			className: "relative flex-1 rounded-full bg-border-strong"
 		})
 	});
-}
+});
 //#endregion
 export { ScrollArea, ScrollBar };
 

package/dist/components/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":["ScrollAreaPrimitive.Root","ScrollAreaPrimitive.Viewport","ScrollAreaPrimitive.Corner","ScrollAreaPrimitive.ScrollAreaScrollbar","ScrollAreaPrimitive.ScrollAreaThumb"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as ScrollAreaPrimitive from '../primitives/vendor/radix/react-scroll-area';\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn('relative', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        'flex touch-none p-px transition-colors select-none',\n        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',\n        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border-strong\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":";;;;;;AAKA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACqD;CACxD,OACE,qBAACA,MAAD;EACE,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;EAHN,UAAA;GAKE,oBAACC,UAAD;IACE,aAAU;IACV,WAAU;IAET;GAC2B,CAAA;GAC9B,oBAAC,WAAD,CAAY,CAAA;GACZ,oBAACC,QAAD,CAA6B,CAAA;EACL;;AAE9B;AAEA,SAAS,UAAU,EACjB,WACA,cAAc,YACd,GAAG,SACoE;CACvE,OACE,oBAACC,qBAAD;EACE,aAAU;EACG;EACb,WAAW,GACT,sDACA,gBAAgB,cAAc,8CAC9B,gBAAgB,gBAAgB,gDAChC,SACF;EACA,GAAI;EAEJ,UAAA,oBAACC,iBAAD;GACE,aAAU;GACV,WAAU;EACX,CAAA;CACsC,CAAA;AAE7C"}
+{"version":3,"file":"scroll-area.js","names":["ScrollAreaPrimitive.Root","ScrollAreaPrimitive.Viewport","ScrollAreaPrimitive.Corner","ScrollAreaPrimitive.ScrollAreaScrollbar","ScrollAreaPrimitive.ScrollAreaThumb"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\nimport * as ScrollAreaPrimitive from '../primitives/vendor/radix/react-scroll-area';\n\n/** The viewport joins the tab order; its focus outline is drawn inside the box, so nothing clips it. */\nconst ScrollArea = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof ScrollAreaPrimitive.Root>\n>(function ScrollArea({ className, children, ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      data-slot=\"scroll-area\"\n      className={cn('relative', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className={cn(\n          'size-full rounded-[inherit] transition-[color,box-shadow]',\n          focusRingClasses,\n          'focus-visible:outline-offset-[-2px]',\n        )}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n});\n\nconst ScrollBar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(function ScrollBar({ className, orientation = 'vertical', ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      ref={ref}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        'flex touch-none p-px transition-colors select-none',\n        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',\n        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border-strong\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n});\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":";;;;;;;AAMA,IAAM,aAAa,MAAM,WAGvB,SAAS,WAAW,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CAC5D,OACE,qBAACA,MAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;EAJN,UAAA;GAME,oBAACC,UAAD;IACE,aAAU;IACV,WAAW,GACT,6DACA,kBACA,qCACF;IAEC;GAC2B,CAAA;GAC9B,oBAAC,WAAD,CAAY,CAAA;GACZ,oBAACC,QAAD,CAA6B,CAAA;EACL;;AAE9B,CAAC;AAED,IAAM,YAAY,MAAM,WAGtB,SAAS,UAAU,EAAE,WAAW,cAAc,YAAY,GAAG,SAAS,KAAK;CAC3E,OACE,oBAACC,qBAAD;EACO;EACL,aAAU;EACG;EACb,WAAW,GACT,sDACA,gBAAgB,cAAc,8CAC9B,gBAAgB,gBAAgB,gDAChC,SACF;EACA,GAAI;EAEJ,UAAA,oBAACC,iBAAD;GACE,aAAU;GACV,WAAU;EACX,CAAA;CACsC,CAAA;AAE7C,CAAC"}

package/dist/components/secret-input.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface SecretInputProps extends Omit<React.ComponentProps<'input'>, 'type'> {
+import { type InputProps } from './input';
+export interface SecretInputProps extends Omit<InputProps, 'type'> {
     /** What is hidden, for the toggle's name ("Show API key"). */
     revealLabel?: string;
 }
@@ -7,5 +8,5 @@ export interface SecretInputProps extends Omit<React.ComponentProps<'input'>, 't
  * Password-style input with a show/hide toggle, in monospace so keys and
  * tokens read cleanly. The toggle is hidden while the field is disabled.
  */
-declare function SecretInput({ className, revealLabel, disabled, ...props }: SecretInputProps): React.JSX.Element;
+declare const SecretInput: React.ForwardRefExoticComponent<Omit<SecretInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { SecretInput };

package/dist/components/secret-input.js

@@ -11,16 +11,18 @@ import EyeOff from "@burtson-labs/icons/react/eye-off";
 * Password-style input with a show/hide toggle, in monospace so keys and
 * tokens read cleanly. The toggle is hidden while the field is disabled.
 */
-function SecretInput({ className, revealLabel = "value", disabled, ...props }) {
+var SecretInput = React.forwardRef(function SecretInput({ className, revealLabel = "value", disabled, width, ...props }, ref) {
 	const [revealed, setRevealed] = React.useState(false);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "secret-input",
-		className: "relative",
+		className: cn("relative", width ? void 0 : "w-full"),
 		children: [/* @__PURE__ */ jsx(Input, {
+			ref,
 			type: revealed && !disabled ? "text" : "password",
 			autoComplete: "off",
 			spellCheck: false,
 			disabled,
+			width,
 			className: cn("pr-10 font-mono", className),
 			...props
 		}), !disabled && /* @__PURE__ */ jsx(IconButton, {
@@ -29,12 +31,12 @@ function SecretInput({ className, revealLabel = "value", disabled, ...props }) {
 			size: "icon-sm",
 			label: revealed ? `Hide ${revealLabel}` : `Show ${revealLabel}`,
 			"aria-pressed": revealed,
-			className: "absolute top-1/2 right-1 -translate-y-1/2",
+			className: "absolute top-1/2 right-1 -translate-y-1/2 pointer-coarse:min-h-8 pointer-coarse:min-w-8",
 			onClick: () => setRevealed((r) => !r),
 			children: revealed ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": true }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": true })
 		})]
 	});
-}
+});
 //#endregion
 export { SecretInput };
 

package/dist/components/secret-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"secret-input.js","names":[],"sources":["../../src/components/secret-input.tsx"],"sourcesContent":["import Eye from '@burtson-labs/icons/react/eye';\nimport EyeOff from '@burtson-labs/icons/react/eye-off';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { IconButton } from './icon-button';\nimport { Input } from './input';\n\nexport interface SecretInputProps extends Omit<React.ComponentProps<'input'>, 'type'> {\n  /** What is hidden, for the toggle's name (\"Show API key\"). */\n  revealLabel?: string;\n}\n\n/**\n * Password-style input with a show/hide toggle, in monospace so keys and\n * tokens read cleanly. The toggle is hidden while the field is disabled.\n */\nfunction SecretInput({ className, revealLabel = 'value', disabled, ...props }: SecretInputProps) {\n  const [revealed, setRevealed] = React.useState(false);\n  return (\n    <div data-slot=\"secret-input\" className=\"relative\">\n      <Input\n        type={revealed && !disabled ? 'text' : 'password'}\n        autoComplete=\"off\"\n        spellCheck={false}\n        disabled={disabled}\n        className={cn('pr-10 font-mono', className)}\n        {...props}\n      />\n      {!disabled && (\n        <IconButton\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          label={revealed ? `Hide ${revealLabel}` : `Show ${revealLabel}`}\n          aria-pressed={revealed}\n          className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n          onClick={() => setRevealed((r) => !r)}\n        >\n          {revealed ? <EyeOff aria-hidden /> : <Eye aria-hidden />}\n        </IconButton>\n      )}\n    </div>\n  );\n}\n\nexport { SecretInput };\n"],"mappings":";;;;;;;;;;;;;AAkBA,SAAS,YAAY,EAAE,WAAW,cAAc,SAAS,UAAU,GAAG,SAA2B;CAC/F,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,KAAK;CACpD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAe,WAAU;EAAxC,UAAA,CACE,oBAAC,OAAD;GACE,MAAM,YAAY,CAAC,WAAW,SAAS;GACvC,cAAa;GACb,YAAY;GACF;GACV,WAAW,GAAG,mBAAmB,SAAS;GAC1C,GAAI;EACL,CAAA,GACA,CAAC,YACA,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,OAAO,WAAW,QAAQ,gBAAgB,QAAQ;GAClD,gBAAc;GACd,WAAU;GACV,eAAe,aAAa,MAAM,CAAC,CAAC;GAEnC,UAAA,WAAW,oBAAC,QAAD,EAAQ,eAAA,KAAa,CAAA,IAAI,oBAAC,KAAD,EAAK,eAAA,KAAa,CAAA;EAC7C,CAAA,CAEX;;AAET"}
+{"version":3,"file":"secret-input.js","names":[],"sources":["../../src/components/secret-input.tsx"],"sourcesContent":["import Eye from '@burtson-labs/icons/react/eye';\nimport EyeOff from '@burtson-labs/icons/react/eye-off';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { IconButton } from './icon-button';\nimport { Input, type InputProps } from './input';\n\nexport interface SecretInputProps extends Omit<InputProps, 'type'> {\n  /** What is hidden, for the toggle's name (\"Show API key\"). */\n  revealLabel?: string;\n}\n\n/**\n * Password-style input with a show/hide toggle, in monospace so keys and\n * tokens read cleanly. The toggle is hidden while the field is disabled.\n */\nconst SecretInput = React.forwardRef<HTMLInputElement, SecretInputProps>(function SecretInput(\n  { className, revealLabel = 'value', disabled, width, ...props },\n  ref,\n) {\n  const [revealed, setRevealed] = React.useState(false);\n  return (\n    <div data-slot=\"secret-input\" className={cn('relative', width ? undefined : 'w-full')}>\n      <Input\n        ref={ref}\n        type={revealed && !disabled ? 'text' : 'password'}\n        autoComplete=\"off\"\n        spellCheck={false}\n        disabled={disabled}\n        width={width}\n        className={cn('pr-10 font-mono', className)}\n        {...props}\n      />\n      {!disabled && (\n        <IconButton\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          label={revealed ? `Hide ${revealLabel}` : `Show ${revealLabel}`}\n          aria-pressed={revealed}\n          // Inside the field, so it never grows past it on touch screens.\n          className=\"absolute top-1/2 right-1 -translate-y-1/2 pointer-coarse:min-h-8 pointer-coarse:min-w-8\"\n          onClick={() => setRevealed((r) => !r)}\n        >\n          {revealed ? <EyeOff aria-hidden /> : <Eye aria-hidden />}\n        </IconButton>\n      )}\n    </div>\n  );\n});\n\nexport { SecretInput };\n"],"mappings":";;;;;;;;;;;;;AAkBA,IAAM,cAAc,MAAM,WAA+C,SAAS,YAChF,EAAE,WAAW,cAAc,SAAS,UAAU,OAAO,GAAG,SACxD,KACA;CACA,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,KAAK;CACpD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,YAAY,QAAQ,KAAA,IAAY,QAAQ;EAApF,UAAA,CACE,oBAAC,OAAD;GACO;GACL,MAAM,YAAY,CAAC,WAAW,SAAS;GACvC,cAAa;GACb,YAAY;GACF;GACH;GACP,WAAW,GAAG,mBAAmB,SAAS;GAC1C,GAAI;EACL,CAAA,GACA,CAAC,YACA,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,OAAO,WAAW,QAAQ,gBAAgB,QAAQ;GAClD,gBAAc;GAEd,WAAU;GACV,eAAe,aAAa,MAAM,CAAC,CAAC;GAEnC,UAAA,WAAW,oBAAC,QAAD,EAAQ,eAAA,KAAa,CAAA,IAAI,oBAAC,KAAD,EAAK,eAAA,KAAa,CAAA;EAC7C,CAAA,CAEX;;AAET,CAAC"}

package/dist/components/select.d.ts

@@ -1,13 +1,18 @@
 import * as React from 'react';
 import * as SelectPrimitive from '../primitives/vendor/radix/react-select';
+import { type FieldWidth } from './input';
 declare function Select(props: React.ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element;
 declare function SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
 declare function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
-declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+export interface SelectTriggerProps extends React.ComponentProps<typeof SelectPrimitive.Trigger> {
     size?: 'sm' | 'default';
-}): React.JSX.Element;
-declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
-declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): React.JSX.Element;
-declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): React.JSX.Element;
-declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): React.JSX.Element;
+    /** How wide the trigger is from 640px up; full width on phones. Fits its content by default. */
+    width?: FieldWidth;
+}
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A row: 32px (44px on touch screens), 8px radius, a fill when active, a check when chosen. */
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/select.js

@@ -1,10 +1,10 @@
 "use client";
-import { cn } from "../lib/utils.js";
-import { surfaceClasses } from "./popover.js";
-import { fieldClasses } from "./input.js";
+import { cn, noOutlineClasses } from "../lib/utils.js";
+import { menuLabelClasses, surfaceClasses } from "./popover.js";
+import { fieldClasses, fieldWidthClasses } from "./input.js";
 import { Content as SelectContent$1, Group as SelectGroup$1, Icon as SelectIcon, Item as SelectItem$1, ItemIndicator as SelectItemIndicator, ItemText as SelectItemText, Label as SelectLabel$1, Portal as SelectPortal, Root as Select$1, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, SelectSeparator as SelectSeparator$1, SelectTrigger as SelectTrigger$1, SelectValue as SelectValue$1, SelectViewport } from "../primitives/vendor/radix/react-select/select.js";
+import * as React from "react";
 import ChevronDown from "@burtson-labs/icons/react/chevron-down";
-import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Check from "@burtson-labs/icons/react/check";
 import ChevronUp from "@burtson-labs/icons/react/chevron-up";
@@ -31,23 +31,25 @@ var triggerHeight = {
 	default: "h-9",
 	sm: "h-8"
 };
-function SelectTrigger({ className, size = "default", children, ...props }) {
+var SelectTrigger = React.forwardRef(function SelectTrigger({ className, size = "default", width, children, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(SelectTrigger$1, {
+		ref,
 		"data-slot": "select-trigger",
 		"data-size": size,
-		className: cn(fieldClasses, "flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", triggerHeight[size], className),
+		className: cn(fieldClasses, "flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", triggerHeight[size], width && fieldWidthClasses[width], className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(SelectIcon, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(ChevronDown, {
-				className: "size-4 opacity-60",
+				className: "size-4 text-muted-foreground",
 				"aria-hidden": true
 			})
 		})]
 	});
-}
-function SelectContent({ className, children, position = "popper", ...props }) {
+});
+var SelectContent = React.forwardRef(function SelectContent({ className, children, position = "popper", ...props }, ref) {
 	return /* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsxs(SelectContent$1, {
+		ref,
 		"data-slot": "select-content",
 		className: cn(surfaceClasses, "relative max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
 		position,
@@ -73,18 +75,21 @@ function SelectContent({ className, children, position = "popper", ...props }) {
 			})
 		]
 	}) });
-}
-function SelectLabel({ className, ...props }) {
+});
+var SelectLabel = React.forwardRef(function SelectLabel({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(SelectLabel$1, {
+		ref,
 		"data-slot": "select-label",
-		className: cn("px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase", className),
+		className: cn(menuLabelClasses, className),
 		...props
 	});
-}
-function SelectItem({ className, children, ...props }) {
+});
+/** A row: 32px (44px on touch screens), 8px radius, a fill when active, a check when chosen. */
+var SelectItem = React.forwardRef(function SelectItem({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(SelectItem$1, {
+		ref,
 		"data-slot": "select-item",
-		className: cn("relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] outline-hidden! select-none focus:bg-secondary focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] select-none focus:bg-secondary focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pointer-coarse:min-h-11", noOutlineClasses, "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "absolute right-2 flex size-3.5 items-center justify-center",
@@ -94,14 +99,15 @@ function SelectItem({ className, children, ...props }) {
 			}) })
 		}), /* @__PURE__ */ jsx(SelectItemText, { children })]
 	});
-}
-function SelectSeparator({ className, ...props }) {
+});
+var SelectSeparator = React.forwardRef(function SelectSeparator({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(SelectSeparator$1, {
+		ref,
 		"data-slot": "select-separator",
 		className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };
 

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["SelectPrimitive.Root","SelectPrimitive.Group","SelectPrimitive.Value","SelectPrimitive.Trigger","SelectPrimitive.Icon","SelectPrimitive.Portal","SelectPrimitive.Content","SelectPrimitive.ScrollUpButton","SelectPrimitive.Viewport","SelectPrimitive.ScrollDownButton","SelectPrimitive.Label","SelectPrimitive.Item","SelectPrimitive.ItemIndicator","SelectPrimitive.ItemText","SelectPrimitive.Separator"],"sources":["../../src/components/select.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport ChevronUp from '@burtson-labs/icons/react/chevron-up';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as SelectPrimitive from '../primitives/vendor/radix/react-select';\n\nimport { fieldClasses } from './input';\nimport { surfaceClasses } from './popover';\n\nfunction Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\n// Plain height classes, not an attribute-selector variant on data-size: that\n// selector outranks a class, so a caller's `h-11`, `max-sm:h-11` or\n// `pointer-coarse:h-11` never won against the size. (Tailwind reads comments\n// too, so the old form is not spelled out here.)\nconst triggerHeight = { default: 'h-9', sm: 'h-8' } as const;\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & { size?: 'sm' | 'default' }) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        fieldClasses,\n        \"flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        triggerHeight[size],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"size-4 opacity-60\" aria-hidden />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = 'popper',\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          surfaceClasses,\n          'relative max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className,\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.ScrollUpButton className=\"flex cursor-default items-center justify-center py-1\">\n          <ChevronUp className=\"size-4\" aria-hidden />\n        </SelectPrimitive.ScrollUpButton>\n        <SelectPrimitive.Viewport\n          className={cn(\n            'p-1',\n            position === 'popper' &&\n              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1',\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectPrimitive.ScrollDownButton className=\"flex cursor-default items-center justify-center py-1\">\n          <ChevronDown className=\"size-4\" aria-hidden />\n        </SelectPrimitive.ScrollDownButton>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\n        'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] outline-hidden! select-none focus:bg-secondary focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-brand\" aria-hidden />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"],"mappings":";;;;;;;;;;;AAWA,SAAS,OAAO,OAA0D;CACxE,OAAO,oBAACA,UAAD;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACC,eAAD;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACC,eAAD;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAMA,IAAM,gBAAgB;CAAE,SAAS;CAAO,IAAI;AAAM;AAElD,SAAS,cAAc,EACrB,WACA,OAAO,WACP,UACA,GAAG,SACkF;CACrF,OACE,qBAACC,iBAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,cACA,oVACA,cAAc,OACd,SACF;EACA,GAAI;EATN,UAAA,CAWG,UACD,oBAACC,YAAD;GAAsB,SAAA;GACpB,UAAA,oBAAC,aAAD;IAAa,WAAU;IAAoB,eAAA;GAAa,CAAA;EACpC,CAAA,CACC;;AAE7B;AAEA,SAAS,cAAc,EACrB,WACA,UACA,WAAW,UACX,GAAG,SACoD;CACvD,OACE,oBAACC,cAAD,EAAA,UACE,qBAACC,iBAAD;EACE,aAAU;EACV,WAAW,GACT,gBACA,4JACA,aAAa,YACX,mIACF,SACF;EACU;EACV,GAAI;EAVN,UAAA;GAYE,oBAACC,sBAAD;IAAgC,WAAU;IACxC,UAAA,oBAAC,WAAD;KAAW,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;GAChC,oBAACC,gBAAD;IACE,WAAW,GACT,OACA,aAAa,YACX,2FACJ;IAEC;GACuB,CAAA;GAC1B,oBAACC,wBAAD;IAAkC,WAAU;IAC1C,UAAA,oBAAC,aAAD;KAAa,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;EACX;CACH,CAAA,EAAA,CAAA;AAE5B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACC,eAAD;EACE,aAAU;EACV,WAAW,GACT,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,OACE,qBAACC,cAAD;EACE,aAAU;EACV,WAAW,GACT,4VACA,SACF;EACA,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACC,qBAAD,EAAA,UACE,oBAAC,OAAD;IAAO,WAAU;IAAoB,eAAA;GAAa,CAAA,EACrB,CAAA;EAC3B,CAAA,GACN,oBAACC,gBAAD,EAA2B,SAAmC,CAAA,CAC1C;;AAE1B;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SACsD;CACzD,OACE,oBAACC,mBAAD;EACE,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"select.js","names":["SelectPrimitive.Root","SelectPrimitive.Group","SelectPrimitive.Value","SelectPrimitive.Trigger","SelectPrimitive.Icon","SelectPrimitive.Portal","SelectPrimitive.Content","SelectPrimitive.ScrollUpButton","SelectPrimitive.Viewport","SelectPrimitive.ScrollDownButton","SelectPrimitive.Label","SelectPrimitive.Item","SelectPrimitive.ItemIndicator","SelectPrimitive.ItemText","SelectPrimitive.Separator"],"sources":["../../src/components/select.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport ChevronUp from '@burtson-labs/icons/react/chevron-up';\nimport * as React from 'react';\n\nimport { cn, noOutlineClasses } from '../lib/utils';\nimport * as SelectPrimitive from '../primitives/vendor/radix/react-select';\n\nimport { fieldClasses, type FieldWidth, fieldWidthClasses } from './input';\nimport { menuLabelClasses, surfaceClasses } from './popover';\n\nfunction Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\n// Plain height classes, not an attribute-selector variant on data-size: that\n// selector outranks a class, so a caller's `h-11`, `max-sm:h-11` or\n// `pointer-coarse:h-11` never won against the size. (Tailwind reads comments\n// too, so the old form is not spelled out here.)\nconst triggerHeight = { default: 'h-9', sm: 'h-8' } as const;\n\nexport interface SelectTriggerProps extends React.ComponentProps<typeof SelectPrimitive.Trigger> {\n  size?: 'sm' | 'default';\n  /** How wide the trigger is from 640px up; full width on phones. Fits its content by default. */\n  width?: FieldWidth;\n}\n\nconst SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger({ className, size = 'default', width, children, ...props }, ref) {\n    return (\n      <SelectPrimitive.Trigger\n        ref={ref}\n        data-slot=\"select-trigger\"\n        data-size={size}\n        className={cn(\n          fieldClasses,\n          \"flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          triggerHeight[size],\n          width && fieldWidthClasses[width],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <SelectPrimitive.Icon asChild>\n          <ChevronDown className=\"size-4 text-muted-foreground\" aria-hidden />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n    );\n  },\n);\n\nconst SelectContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Content>\n>(function SelectContent({ className, children, position = 'popper', ...props }, ref) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        ref={ref}\n        data-slot=\"select-content\"\n        className={cn(\n          surfaceClasses,\n          'relative max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className,\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.ScrollUpButton className=\"flex cursor-default items-center justify-center py-1\">\n          <ChevronUp className=\"size-4\" aria-hidden />\n        </SelectPrimitive.ScrollUpButton>\n        <SelectPrimitive.Viewport\n          className={cn(\n            'p-1',\n            position === 'popper' &&\n              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1',\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectPrimitive.ScrollDownButton className=\"flex cursor-default items-center justify-center py-1\">\n          <ChevronDown className=\"size-4\" aria-hidden />\n        </SelectPrimitive.ScrollDownButton>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n});\n\nconst SelectLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Label>\n>(function SelectLabel({ className, ...props }, ref) {\n  return (\n    <SelectPrimitive.Label\n      ref={ref}\n      data-slot=\"select-label\"\n      className={cn(menuLabelClasses, className)}\n      {...props}\n    />\n  );\n});\n\n/** A row: 32px (44px on touch screens), 8px radius, a fill when active, a check when chosen. */\nconst SelectItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Item>\n>(function SelectItem({ className, children, ...props }, ref) {\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\n      data-slot=\"select-item\"\n      className={cn(\n        'relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] select-none focus:bg-secondary focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pointer-coarse:min-h-11',\n        noOutlineClasses,\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-brand\" aria-hidden />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n});\n\nconst SelectSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.Separator>\n>(function SelectSeparator({ className, ...props }, ref) {\n  return (\n    <SelectPrimitive.Separator\n      ref={ref}\n      data-slot=\"select-separator\"\n      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n});\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"],"mappings":";;;;;;;;;;;AAWA,SAAS,OAAO,OAA0D;CACxE,OAAO,oBAACA,UAAD;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACC,eAAD;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACC,eAAD;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAMA,IAAM,gBAAgB;CAAE,SAAS;CAAO,IAAI;AAAM;AAQlD,IAAM,gBAAgB,MAAM,WAC1B,SAAS,cAAc,EAAE,WAAW,OAAO,WAAW,OAAO,UAAU,GAAG,SAAS,KAAK;CACtF,OACE,qBAACC,iBAAD;EACO;EACL,aAAU;EACV,aAAW;EACX,WAAW,GACT,cACA,oVACA,cAAc,OACd,SAAS,kBAAkB,QAC3B,SACF;EACA,GAAI;EAXN,UAAA,CAaG,UACD,oBAACC,YAAD;GAAsB,SAAA;GACpB,UAAA,oBAAC,aAAD;IAAa,WAAU;IAA+B,eAAA;GAAa,CAAA;EAC/C,CAAA,CACC;;AAE7B,CACF;AAEA,IAAM,gBAAgB,MAAM,WAG1B,SAAS,cAAc,EAAE,WAAW,UAAU,WAAW,UAAU,GAAG,SAAS,KAAK;CACpF,OACE,oBAACC,cAAD,EAAA,UACE,qBAACC,iBAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,gBACA,4JACA,aAAa,YACX,mIACF,SACF;EACU;EACV,GAAI;EAXN,UAAA;GAaE,oBAACC,sBAAD;IAAgC,WAAU;IACxC,UAAA,oBAAC,WAAD;KAAW,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;GAChC,oBAACC,gBAAD;IACE,WAAW,GACT,OACA,aAAa,YACX,2FACJ;IAEC;GACuB,CAAA;GAC1B,oBAACC,wBAAD;IAAkC,WAAU;IAC1C,UAAA,oBAAC,aAAD;KAAa,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;EACX;CACH,CAAA,EAAA,CAAA;AAE5B,CAAC;AAED,IAAM,cAAc,MAAM,WAGxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACnD,OACE,oBAACC,eAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,kBAAkB,SAAS;EACzC,GAAI;CACL,CAAA;AAEL,CAAC;;AAGD,IAAM,aAAa,MAAM,WAGvB,SAAS,WAAW,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CAC5D,OACE,qBAACC,cAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,kRACA,kBACA,qFACA,SACF;EACA,GAAI;EATN,UAAA,CAWE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACC,qBAAD,EAAA,UACE,oBAAC,OAAD;IAAO,WAAU;IAAoB,eAAA;GAAa,CAAA,EACrB,CAAA;EAC3B,CAAA,GACN,oBAACC,gBAAD,EAA2B,SAAmC,CAAA,CAC1C;;AAE1B,CAAC;AAED,IAAM,kBAAkB,MAAM,WAG5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAACC,mBAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/separator.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import * as SeparatorPrimitive from '../primitives/vendor/radix/react-separator';
-declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.JSX.Element;
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Separator };

package/dist/components/separator.js

@@ -1,18 +1,19 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { Root } from "../primitives/vendor/radix/react-separator/separator.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/separator.tsx
-function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+var Separator = React.forwardRef(function Separator({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Root, {
+		ref,
 		"data-slot": "separator",
 		decorative,
 		orientation,
 		className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Separator };
 

package/dist/components/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":["SeparatorPrimitive.Root"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as SeparatorPrimitive from '../primitives/vendor/radix/react-separator';\n\nfunction Separator({\n  className,\n  orientation = 'horizontal',\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n"],"mappings":";;;;;;AAKA,SAAS,UAAU,EACjB,WACA,cAAc,cACd,aAAa,MACb,GAAG,SACoD;CACvD,OACE,oBAACA,MAAD;EACE,aAAU;EACE;EACC;EACb,WAAW,GACT,kKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"separator.js","names":["SeparatorPrimitive.Root"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as SeparatorPrimitive from '../primitives/vendor/radix/react-separator';\n\nconst Separator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SeparatorPrimitive.Root>\n>(function Separator({ className, orientation = 'horizontal', decorative = true, ...props }, ref) {\n  return (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport { Separator };\n"],"mappings":";;;;;;AAKA,IAAM,YAAY,MAAM,WAGtB,SAAS,UAAU,EAAE,WAAW,cAAc,cAAc,aAAa,MAAM,GAAG,SAAS,KAAK;CAChG,OACE,oBAACA,MAAD;EACO;EACL,aAAU;EACE;EACC;EACb,WAAW,GACT,kKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/sheet.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import * as SheetPrimitive from '../primitives/vendor/radix/react-dialog';
 declare function Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>): React.JSX.Element;
-declare function SheetTrigger(props: React.ComponentProps<typeof SheetPrimitive.Trigger>): React.JSX.Element;
-declare function SheetClose(props: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
+declare const SheetTrigger: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const sideClasses: {
     readonly right: "inset-y-0 right-0 h-full w-3/4 border-l [--bl-sheet-x:100%] sm:max-w-sm";
     readonly left: "inset-y-0 left-0 h-full w-3/4 border-r [--bl-sheet-x:-100%] sm:max-w-sm";
     readonly top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-xl border-b pt-[env(safe-area-inset-top)] [--bl-sheet-x:0] [--bl-sheet-y:-100%]";
     readonly bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] [--bl-sheet-x:0] [--bl-sheet-y:100%]";
 };
-declare function SheetContent({ className, children, side, handle, showCloseButton, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+export interface SheetContentProps extends React.ComponentProps<typeof SheetPrimitive.Content> {
     side?: keyof typeof sideClasses;
     /**
      * The X in the corner. Turn it off when the sheet draws its own header
@@ -22,9 +22,11 @@ declare function SheetContent({ className, children, side, handle, showCloseButt
      * default for bottom sheets.
      */
     handle?: boolean;
-}): React.JSX.Element;
-declare function SheetHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function SheetFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): React.JSX.Element;
-declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): React.JSX.Element;
+}
+/** A panel from an edge: 16px radius on the free corners, elevation 5. */
+declare const SheetContent: React.ForwardRefExoticComponent<Omit<SheetContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, };