@burtson-labs/ui 0.13.1 → 0.14.1

package/dist/components/progress.js

@@ -1,25 +1,27 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import { Progress } from "radix-ui";
-import "react";
+import { Indicator, Root } from "../primitives/vendor/radix/react-progress/progress.js";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/progress.tsx
-function Progress$1({ className, value, max = 100, ...props }) {
+var Progress = React.forwardRef(function Progress({ className, value, max = 100, ...props }, ref) {
 	const maximum = Number.isFinite(max) && max > 0 ? max : 100;
 	const progress = typeof value === "number" && Number.isFinite(value) ? Math.min(maximum, Math.max(0, value)) : null;
-	return /* @__PURE__ */ jsx(Progress.Root, {
+	return /* @__PURE__ */ jsx(Root, {
+		ref,
 		"data-slot": "progress",
 		value: progress,
 		max: maximum,
-		className: cn("relative h-1.5 w-full overflow-hidden rounded-full bg-muted", className),
+		className: cn("relative h-1.5 w-full overflow-hidden rounded-full bg-border", className),
 		...props,
-		children: /* @__PURE__ */ jsx(Progress.Indicator, {
+		children: /* @__PURE__ */ jsx(Indicator, {
 			"data-slot": "progress-indicator",
-			className: cn("h-full bg-brand transition-transform", progress === null ? "w-1/3 animate-pulse" : "w-full"),
+			className: cn("h-full bg-brand transition-transform duration-(--duration-standard)", progress === null ? "w-1/3 animate-pulse" : "w-full"),
 			style: progress === null ? void 0 : { transform: `translateX(-${100 - progress / maximum * 100}%)` }
 		})
 	});
-}
+});
 //#endregion
-export { Progress$1 as Progress };
+export { Progress };
 
 //# sourceMappingURL=progress.js.map

package/dist/components/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":["Progress","ProgressPrimitive"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import { Progress as ProgressPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Progress({\n  className,\n  value,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  const maximum = Number.isFinite(max) && max > 0 ? max : 100;\n  const progress =\n    typeof value === 'number' && Number.isFinite(value)\n      ? Math.min(maximum, Math.max(0, value))\n      : null;\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      value={progress}\n      max={maximum}\n      className={cn('relative h-1.5 w-full overflow-hidden rounded-full bg-muted', className)}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className={cn(\n          'h-full bg-brand transition-transform',\n          progress === null ? 'w-1/3 animate-pulse' : 'w-full',\n        )}\n        style={\n          progress === null\n            ? undefined\n            : { transform: `translateX(-${100 - (progress / maximum) * 100}%)` }\n        }\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress };\n"],"mappings":";;;;;AAKA,SAASA,WAAS,EAChB,WACA,OACA,MAAM,KACN,GAAG,SACmD;CACtD,MAAM,UAAU,OAAO,SAAS,GAAG,KAAK,MAAM,IAAI,MAAM;CACxD,MAAM,WACJ,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK,IAC9C,KAAK,IAAI,SAAS,KAAK,IAAI,GAAG,KAAK,CAAC,IACpC;CACN,OACE,oBAACC,SAAkB,MAAnB;EACE,aAAU;EACV,OAAO;EACP,KAAK;EACL,WAAW,GAAG,+DAA+D,SAAS;EACtF,GAAI;EAEJ,UAAA,oBAACA,SAAkB,WAAnB;GACE,aAAU;GACV,WAAW,GACT,wCACA,aAAa,OAAO,wBAAwB,QAC9C;GACA,OACE,aAAa,OACT,KAAA,IACA,EAAE,WAAW,eAAe,MAAO,WAAW,UAAW,IAAI,IAAI;EAExE,CAAA;CACqB,CAAA;AAE5B"}
+{"version":3,"file":"progress.js","names":["ProgressPrimitive.Root","ProgressPrimitive.Indicator"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as ProgressPrimitive from '../primitives/vendor/radix/react-progress';\n\nconst Progress = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof ProgressPrimitive.Root>\n>(function Progress({ className, value, max = 100, ...props }, ref) {\n  const maximum = Number.isFinite(max) && max > 0 ? max : 100;\n  const progress =\n    typeof value === 'number' && Number.isFinite(value)\n      ? Math.min(maximum, Math.max(0, value))\n      : null;\n  return (\n    <ProgressPrimitive.Root\n      ref={ref}\n      data-slot=\"progress\"\n      value={progress}\n      max={maximum}\n      className={cn('relative h-1.5 w-full overflow-hidden rounded-full bg-border', className)}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className={cn(\n          'h-full bg-brand transition-transform duration-(--duration-standard)',\n          progress === null ? 'w-1/3 animate-pulse' : 'w-full',\n        )}\n        style={\n          progress === null\n            ? undefined\n            : { transform: `translateX(-${100 - (progress / maximum) * 100}%)` }\n        }\n      />\n    </ProgressPrimitive.Root>\n  );\n});\n\nexport { Progress };\n"],"mappings":";;;;;;AAKA,IAAM,WAAW,MAAM,WAGrB,SAAS,SAAS,EAAE,WAAW,OAAO,MAAM,KAAK,GAAG,SAAS,KAAK;CAClE,MAAM,UAAU,OAAO,SAAS,GAAG,KAAK,MAAM,IAAI,MAAM;CACxD,MAAM,WACJ,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK,IAC9C,KAAK,IAAI,SAAS,KAAK,IAAI,GAAG,KAAK,CAAC,IACpC;CACN,OACE,oBAACA,MAAD;EACO;EACL,aAAU;EACV,OAAO;EACP,KAAK;EACL,WAAW,GAAG,gEAAgE,SAAS;EACvF,GAAI;EAEJ,UAAA,oBAACC,WAAD;GACE,aAAU;GACV,WAAW,GACT,uEACA,aAAa,OAAO,wBAAwB,QAC9C;GACA,OACE,aAAa,OACT,KAAA,IACA,EAAE,WAAW,eAAe,MAAO,WAAW,UAAW,IAAI,IAAI;EAExE,CAAA;CACqB,CAAA;AAE5B,CAAC"}

package/dist/components/radio-group.d.ts

@@ -1,5 +1,24 @@
-import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 import * as React from 'react';
-declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): React.JSX.Element;
-declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): React.JSX.Element;
-export { RadioGroup, RadioGroupItem };
+import * as RadioGroupPrimitive from '../primitives/vendor/radix/react-radio-group';
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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).
+ */
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface RadioCardProps extends Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, 'title' | 'children'> {
+    /** The option's name. */
+    title: React.ReactNode;
+    /** A sentence under the name: what choosing it means. */
+    description?: React.ReactNode;
+    /** Extra classes for the card (the label); className goes to the radio. */
+    cardClassName?: string;
+}
+/**
+ * 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.
+ */
+declare const RadioCard: React.ForwardRefExoticComponent<Omit<RadioCardProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { RadioCard, RadioGroup, RadioGroupItem };

package/dist/components/radio-group.js

@@ -1,28 +1,70 @@
-import { cn } from "../lib/utils.js";
-import { RadioGroup } from "radix-ui";
-import "react";
-import { jsx } from "react/jsx-runtime";
+"use client";
+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 * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/radio-group.tsx
-function RadioGroup$1({ className, ...props }) {
-	return /* @__PURE__ */ jsx(RadioGroup.Root, {
+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 }) {
-	return /* @__PURE__ */ jsx(RadioGroup.Item, {
+});
+/**
+* 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(RadioGroup.Indicator, {
+		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$1 as 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":["RadioGroup","RadioGroupPrimitive"],"sources":["../../src/components/radio-group.tsx"],"sourcesContent":["import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\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,SAASA,aAAW,EAClB,WACA,GAAG,SACqD;CACxD,OACE,oBAACC,WAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,WAAoB,MAArB;EACE,aAAU;EACV,WAAW,GACT,4VACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,WAAoB,WAArB;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,21 +1,23 @@
-import { cn } from "../lib/utils.js";
-import { Collapsible } from "radix-ui";
-import "react";
+"use client";
+import { cn, focusRingClasses } from "../lib/utils.js";
+import { Content, Root, Trigger } from "../primitives/vendor/radix/react-collapsible/collapsible.js";
+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(Collapsible.Root, {
+	return /* @__PURE__ */ jsx(Root, {
 		defaultOpen,
 		children: /* @__PURE__ */ jsxs("div", {
+			ref,
 			"data-slot": "reasoning",
 			className: cn("grid gap-1.5", className),
 			...props,
-			children: [/* @__PURE__ */ jsxs(Collapsible.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",
+			children: [/* @__PURE__ */ jsxs(Trigger, {
+				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"),
@@ -27,7 +29,7 @@ function Reasoning({ streaming = false, durationMs, defaultOpen = false, childre
 						className: "size-3.5 transition-transform group-data-[state=open]/reasoning:rotate-90"
 					})
 				]
-			}), /* @__PURE__ */ jsx(Collapsible.Content, {
+			}), /* @__PURE__ */ jsx(Content, {
 				className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "border-l-2 border-border-strong pl-3 text-[13px] leading-6 text-muted-foreground",
@@ -36,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,
@@ -54,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"],"sources":["../../src/components/reasoning.tsx"],"sourcesContent":["import ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport Lightbulb from '@burtson-labs/icons/react/lightbulb';\nimport { Collapsible as CollapsiblePrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\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,YAAqB,MAAtB;EAAwC;EACtC,UAAA,qBAAC,OAAD;GAAK,aAAU;GAAY,WAAW,GAAG,gBAAgB,SAAS;GAAG,GAAI;GAAzE,UAAA,CACE,qBAACA,YAAqB,SAAtB;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,oBAACA,YAAqB,SAAtB;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/resizable.js

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from "../lib/utils.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/resizable.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.js","names":[],"sources":["../../src/components/resizable.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Group,\n  Panel,\n  Separator,\n  type GroupImperativeHandle,\n  type Layout,\n  type LayoutChangedMeta,\n} from 'react-resizable-panels';\n\nimport { cn } from '../lib/utils';\n\n// Resizing is react-resizable-panels: it implements the WAI-ARIA window\n// splitter (arrow keys, Home/End, Enter to collapse), captures the pointer so\n// a drag over an iframe or terminal keeps tracking, and enforces min/max and\n// collapse. This file adds the Burtson look and a controlled `layout` prop.\n\nexport type ResizableLayout = Layout;\n\nexport interface ResizablePanelGroupProps extends Omit<\n  React.ComponentProps<typeof Group>,\n  'defaultLayout' | 'onLayoutChange' | 'onLayoutChanged'\n> {\n  /**\n   * Controlled sizes: panel id → percentage (0..100). Pass it with\n   * onLayoutChange, or onLayoutChanged if you only need the settled value.\n   * The group re-applies it whenever it differs from what is on screen.\n   */\n  layout?: ResizableLayout;\n  /** Initial sizes when uncontrolled, e.g. restored from storage. */\n  defaultLayout?: ResizableLayout;\n  /** Every change, including each pointer move while dragging. */\n  onLayoutChange?: (layout: ResizableLayout) => void;\n  /** After a drag ends or a key resizes; the one to persist. */\n  onLayoutChanged?: (layout: ResizableLayout, meta: LayoutChangedMeta) => void;\n}\n\nconst sameLayout = (a: ResizableLayout, b: ResizableLayout) => {\n  const keys = Object.keys(a);\n  return (\n    keys.length === Object.keys(b).length &&\n    keys.every((k) => b[k] !== undefined && Math.abs((a[k] ?? 0) - (b[k] ?? 0)) < 0.01)\n  );\n};\n\nfunction ResizablePanelGroup({\n  className,\n  layout,\n  defaultLayout,\n  groupRef: groupRefProp,\n  orientation = 'horizontal',\n  ...props\n}: ResizablePanelGroupProps) {\n  const groupRef = React.useRef<GroupImperativeHandle | null>(null);\n  React.useImperativeHandle(groupRefProp, () => groupRef.current as GroupImperativeHandle, []);\n\n  React.useEffect(() => {\n    const group = groupRef.current;\n    if (!layout || !group) return;\n    if (!sameLayout(group.getLayout(), layout)) group.setLayout(layout);\n  }, [layout]);\n\n  return (\n    <Group\n      data-slot=\"resizable-panel-group\"\n      data-orientation={orientation}\n      orientation={orientation}\n      groupRef={groupRef}\n      defaultLayout={layout ?? defaultLayout}\n      className={cn('flex h-full w-full data-[orientation=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ResizablePanel({ className, ...props }: React.ComponentProps<typeof Panel>) {\n  return (\n    <Panel data-slot=\"resizable-panel\" className={cn('min-h-0 min-w-0', className)} {...props} />\n  );\n}\n\nexport interface ResizeHandleProps extends React.ComponentProps<typeof Separator> {\n  /** Show a small grip in the middle of the line. */\n  withHandle?: boolean;\n  /** What the handle resizes, e.g. \"Resize explorer\". Required for screen readers. */\n  'aria-label': string;\n}\n\n/**\n * The separator between two panels. It is a 1px line with an 8px hit area;\n * hover and drag tint it, keyboard focus draws it in the brand colour.\n */\nfunction ResizeHandle({ className, withHandle, ...props }: ResizeHandleProps) {\n  return (\n    <Separator\n      data-slot=\"resize-handle\"\n      className={cn(\n        'group/handle relative flex shrink-0 items-center justify-center bg-border outline-none',\n        // Hit area wider than the line, on the axis being dragged.\n        'after:absolute after:content-[\"\"]',\n        // The library sets aria-orientation on the line itself: a horizontal\n        // group has vertical separators. Nested groups stay independent.\n        'aria-[orientation=vertical]:w-px aria-[orientation=vertical]:after:inset-y-0 aria-[orientation=vertical]:after:-inset-x-1',\n        'aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:-inset-y-1',\n        'transition-colors data-[separator=hover]:bg-border-strong data-[separator=active]:bg-brand',\n        'focus-visible:outline-none data-[separator=focus]:bg-ring data-[separator=focus]:shadow-[0_0_0_1px_var(--ring)]',\n        'data-[separator=disabled]:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <span\n          aria-hidden\n          className=\"z-10 flex items-center justify-center rounded-xs border bg-surface group-aria-[orientation=vertical]/handle:h-6 group-aria-[orientation=vertical]/handle:w-2 group-aria-[orientation=horizontal]/handle:h-2 group-aria-[orientation=horizontal]/handle:w-6\"\n        >\n          <span className=\"rounded-full bg-muted-foreground/60 group-aria-[orientation=vertical]/handle:h-3 group-aria-[orientation=vertical]/handle:w-px group-aria-[orientation=horizontal]/handle:h-px group-aria-[orientation=horizontal]/handle:w-3\" />\n        </span>\n      )}\n    </Separator>\n  );\n}\n\nexport { usePanelRef, useGroupRef } from 'react-resizable-panels';\nexport type {\n  GroupImperativeHandle as ResizablePanelGroupHandle,\n  PanelImperativeHandle as ResizablePanelHandle,\n} from 'react-resizable-panels';\nexport { ResizablePanelGroup, ResizablePanel, ResizeHandle };\n"],"mappings":";;;;;AAqCA,IAAM,cAAc,GAAoB,MAAuB;CAC7D,MAAM,OAAO,OAAO,KAAK,CAAC;CAC1B,OACE,KAAK,WAAW,OAAO,KAAK,CAAC,CAAC,CAAC,UAC/B,KAAK,OAAO,MAAM,EAAE,OAAO,KAAA,KAAa,KAAK,KAAK,EAAE,MAAM,MAAM,EAAE,MAAM,EAAE,IAAI,GAAI;AAEtF;AAEA,SAAS,oBAAoB,EAC3B,WACA,QACA,eACA,UAAU,cACV,cAAc,cACd,GAAG,SACwB;CAC3B,MAAM,WAAW,MAAM,OAAqC,IAAI;CAChE,MAAM,oBAAoB,oBAAoB,SAAS,SAAkC,CAAC,CAAC;CAE3F,MAAM,gBAAgB;EACpB,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,UAAU,CAAC,OAAO;EACvB,IAAI,CAAC,WAAW,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,UAAU,MAAM;CACpE,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,oBAAC,OAAD;EACE,aAAU;EACV,oBAAkB;EACL;EACH;EACV,eAAe,UAAU;EACzB,WAAW,GAAG,2DAA2D,SAAS;EAClF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAA6C;CACnF,OACE,oBAAC,OAAD;EAAO,aAAU;EAAkB,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEhG;;;;;AAaA,SAAS,aAAa,EAAE,WAAW,YAAY,GAAG,SAA4B;CAC5E,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,0FAEA,uCAGA,6HACA,mIACA,8FACA,mHACA,wCACA,SACF;EACA,GAAI;EAEH,UAAA,cACC,oBAAC,QAAD;GACE,eAAA;GACA,WAAU;GAEV,UAAA,oBAAC,QAAD,EAAM,WAAU,gOAAiO,CAAA;EAC7O,CAAA;CAEC,CAAA;AAEf"}
+{"version":3,"file":"resizable.js","names":[],"sources":["../../src/components/resizable.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Group,\n  Panel,\n  Separator,\n  type GroupImperativeHandle,\n  type Layout,\n  type LayoutChangedMeta,\n} from 'react-resizable-panels';\n\nimport { cn } from '../lib/utils';\n\n// Resizing is react-resizable-panels: it implements the WAI-ARIA window\n// splitter (arrow keys, Home/End, Enter to collapse), captures the pointer so\n// a drag over an iframe or terminal keeps tracking, and enforces min/max and\n// collapse. This file adds the Burtson look and a controlled `layout` prop.\n\nexport type ResizableLayout = Layout;\n\nexport interface ResizablePanelGroupProps extends Omit<\n  React.ComponentProps<typeof Group>,\n  'defaultLayout' | 'onLayoutChange' | 'onLayoutChanged'\n> {\n  /**\n   * Controlled sizes: panel id → percentage (0..100). Pass it with\n   * onLayoutChange, or onLayoutChanged if you only need the settled value.\n   * The group re-applies it whenever it differs from what is on screen.\n   */\n  layout?: ResizableLayout;\n  /** Initial sizes when uncontrolled, e.g. restored from storage. */\n  defaultLayout?: ResizableLayout;\n  /** Every change, including each pointer move while dragging. */\n  onLayoutChange?: (layout: ResizableLayout) => void;\n  /** After a drag ends or a key resizes; the one to persist. */\n  onLayoutChanged?: (layout: ResizableLayout, meta: LayoutChangedMeta) => void;\n}\n\nconst sameLayout = (a: ResizableLayout, b: ResizableLayout) => {\n  const keys = Object.keys(a);\n  return (\n    keys.length === Object.keys(b).length &&\n    keys.every((k) => b[k] !== undefined && Math.abs((a[k] ?? 0) - (b[k] ?? 0)) < 0.01)\n  );\n};\n\nfunction ResizablePanelGroup({\n  className,\n  layout,\n  defaultLayout,\n  groupRef: groupRefProp,\n  orientation = 'horizontal',\n  ...props\n}: ResizablePanelGroupProps) {\n  const groupRef = React.useRef<GroupImperativeHandle | null>(null);\n  React.useImperativeHandle(groupRefProp, () => groupRef.current as GroupImperativeHandle, []);\n\n  React.useEffect(() => {\n    const group = groupRef.current;\n    if (!layout || !group) return;\n    if (!sameLayout(group.getLayout(), layout)) group.setLayout(layout);\n  }, [layout]);\n\n  return (\n    <Group\n      data-slot=\"resizable-panel-group\"\n      data-orientation={orientation}\n      orientation={orientation}\n      groupRef={groupRef}\n      defaultLayout={layout ?? defaultLayout}\n      className={cn('flex h-full w-full data-[orientation=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ResizablePanel({ className, ...props }: React.ComponentProps<typeof Panel>) {\n  return (\n    <Panel data-slot=\"resizable-panel\" className={cn('min-h-0 min-w-0', className)} {...props} />\n  );\n}\n\nexport interface ResizeHandleProps extends React.ComponentProps<typeof Separator> {\n  /** Show a small grip in the middle of the line. */\n  withHandle?: boolean;\n  /** What the handle resizes, e.g. \"Resize explorer\". Required for screen readers. */\n  'aria-label': string;\n}\n\n/**\n * The separator between two panels. It is a 1px line with an 8px hit area;\n * hover and drag tint it, keyboard focus draws it in the brand colour.\n */\nfunction ResizeHandle({ className, withHandle, ...props }: ResizeHandleProps) {\n  return (\n    <Separator\n      data-slot=\"resize-handle\"\n      className={cn(\n        'group/handle relative flex shrink-0 items-center justify-center bg-border outline-none',\n        // Hit area wider than the line, on the axis being dragged.\n        'after:absolute after:content-[\"\"]',\n        // The library sets aria-orientation on the line itself: a horizontal\n        // group has vertical separators. Nested groups stay independent.\n        'aria-[orientation=vertical]:w-px aria-[orientation=vertical]:after:inset-y-0 aria-[orientation=vertical]:after:-inset-x-1',\n        'aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:-inset-y-1',\n        'transition-colors data-[separator=hover]:bg-border-strong data-[separator=active]:bg-brand',\n        'focus-visible:outline-none data-[separator=focus]:bg-ring data-[separator=focus]:shadow-[0_0_0_1px_var(--ring)]',\n        'data-[separator=disabled]:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <span\n          aria-hidden\n          className=\"z-10 flex items-center justify-center rounded-xs border bg-surface group-aria-[orientation=vertical]/handle:h-6 group-aria-[orientation=vertical]/handle:w-2 group-aria-[orientation=horizontal]/handle:h-2 group-aria-[orientation=horizontal]/handle:w-6\"\n        >\n          <span className=\"rounded-full bg-muted-foreground/60 group-aria-[orientation=vertical]/handle:h-3 group-aria-[orientation=vertical]/handle:w-px group-aria-[orientation=horizontal]/handle:h-px group-aria-[orientation=horizontal]/handle:w-3\" />\n        </span>\n      )}\n    </Separator>\n  );\n}\n\nexport { usePanelRef, useGroupRef } from 'react-resizable-panels';\nexport type {\n  GroupImperativeHandle as ResizablePanelGroupHandle,\n  PanelImperativeHandle as ResizablePanelHandle,\n} from 'react-resizable-panels';\nexport { ResizablePanelGroup, ResizablePanel, ResizeHandle };\n"],"mappings":";;;;;;AAqCA,IAAM,cAAc,GAAoB,MAAuB;CAC7D,MAAM,OAAO,OAAO,KAAK,CAAC;CAC1B,OACE,KAAK,WAAW,OAAO,KAAK,CAAC,CAAC,CAAC,UAC/B,KAAK,OAAO,MAAM,EAAE,OAAO,KAAA,KAAa,KAAK,KAAK,EAAE,MAAM,MAAM,EAAE,MAAM,EAAE,IAAI,GAAI;AAEtF;AAEA,SAAS,oBAAoB,EAC3B,WACA,QACA,eACA,UAAU,cACV,cAAc,cACd,GAAG,SACwB;CAC3B,MAAM,WAAW,MAAM,OAAqC,IAAI;CAChE,MAAM,oBAAoB,oBAAoB,SAAS,SAAkC,CAAC,CAAC;CAE3F,MAAM,gBAAgB;EACpB,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,UAAU,CAAC,OAAO;EACvB,IAAI,CAAC,WAAW,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,UAAU,MAAM;CACpE,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,oBAAC,OAAD;EACE,aAAU;EACV,oBAAkB;EACL;EACH;EACV,eAAe,UAAU;EACzB,WAAW,GAAG,2DAA2D,SAAS;EAClF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAA6C;CACnF,OACE,oBAAC,OAAD;EAAO,aAAU;EAAkB,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEhG;;;;;AAaA,SAAS,aAAa,EAAE,WAAW,YAAY,GAAG,SAA4B;CAC5E,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,0FAEA,uCAGA,6HACA,mIACA,8FACA,mHACA,wCACA,SACF;EACA,GAAI;EAEH,UAAA,cACC,oBAAC,QAAD;GACE,eAAA;GACA,WAAU;GAEV,UAAA,oBAAC,QAAD,EAAM,WAAU,gOAAiO,CAAA;EAC7O,CAAA;CAEC,CAAA;AAEf"}

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

@@ -1,5 +1,6 @@
-import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
 import * as React from 'react';
-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;
+import * as ScrollAreaPrimitive from '../primitives/vendor/radix/react-scroll-area';
+/** 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,37 +1,41 @@
-import { cn } from "../lib/utils.js";
-import { ScrollArea } from "radix-ui";
-import "react";
+"use client";
+import { cn, focusRingClasses } from "../lib/utils.js";
+import { Corner, Root, ScrollAreaScrollbar, ScrollAreaThumb, Viewport } from "../primitives/vendor/radix/react-scroll-area/scroll-area.js";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/scroll-area.tsx
-function ScrollArea$1({ className, children, ...props }) {
-	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+/** 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(ScrollArea.Viewport, {
+			/* @__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(ScrollArea.Corner, {})
+			/* @__PURE__ */ jsx(Corner, {})
 		]
 	});
-}
-function ScrollBar({ className, orientation = "vertical", ...props }) {
-	return /* @__PURE__ */ jsx(ScrollArea.ScrollAreaScrollbar, {
+});
+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),
 		...props,
-		children: /* @__PURE__ */ jsx(ScrollArea.ScrollAreaThumb, {
+		children: /* @__PURE__ */ jsx(ScrollAreaThumb, {
 			"data-slot": "scroll-area-thumb",
 			className: "relative flex-1 rounded-full bg-border-strong"
 		})
 	});
-}
+});
 //#endregion
-export { ScrollArea$1 as ScrollArea, ScrollBar };
+export { ScrollArea, ScrollBar };
 
 //# sourceMappingURL=scroll-area.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":["ScrollArea","ScrollAreaPrimitive"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\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,SAASA,aAAW,EAClB,WACA,UACA,GAAG,SACqD;CACxD,OACE,qBAACC,WAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;EAHN,UAAA;GAKE,oBAACA,WAAoB,UAArB;IACE,aAAU;IACV,WAAU;IAET;GAC2B,CAAA;GAC9B,oBAAC,WAAD,CAAY,CAAA;GACZ,oBAACA,WAAoB,QAArB,CAA6B,CAAA;EACL;;AAE9B;AAEA,SAAS,UAAU,EACjB,WACA,cAAc,YACd,GAAG,SACoE;CACvE,OACE,oBAACA,WAAoB,qBAArB;EACE,aAAU;EACG;EACb,WAAW,GACT,sDACA,gBAAgB,cAAc,8CAC9B,gBAAgB,gBAAgB,gDAChC,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,WAAoB,iBAArB;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

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from "../lib/utils.js";
 import { Input } from "./input.js";
 import { IconButton } from "./icon-button.js";
@@ -10,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, {
@@ -28,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 { Select as SelectPrimitive } from 'radix-ui';
 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, };