@burtson-labs/ui 0.13.1 → 0.14.1

package/dist/components/message-actions.js

@@ -1,4 +1,5 @@
-import { cn } from "../lib/utils.js";
+"use client";
+import { cn, focusRingClasses, noOutlineClasses } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { formatBytes } from "./attachment.js";
 import { VoiceMessage } from "./audio-player.js";
@@ -17,9 +18,10 @@ import ThumbsUp from "@burtson-labs/icons/react/thumbs-up";
 * small icon buttons. Pass it to Message's `actions`, which shows it on
 * hover and focus (always on touch screens).
 */
-function MessageActions({ copyText, onRegenerate, onEdit, feedback = null, onFeedback, className, ...props }) {
-	const small = "size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-10";
+var MessageActions = React.forwardRef(function MessageActions({ copyText, onRegenerate, onEdit, feedback = null, onFeedback, className, ...props }, ref) {
+	const small = "size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-11";
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		"data-slot": "message-actions",
 		role: "toolbar",
 		"aria-label": "Message actions",
@@ -66,17 +68,18 @@ function MessageActions({ copyText, onRegenerate, onEdit, feedback = null, onFee
 			})] })
 		]
 	});
-}
+});
 /**
 * Edit-and-resend in place of a sent message. Enter sends (never mid-IME
 * composition), Shift+Enter adds a line, Escape cancels.
 */
-function MessageEditor({ defaultValue, onSubmit, onCancel, submitLabel = "Send", className, ...props }) {
+var MessageEditor = React.forwardRef(function MessageEditor({ defaultValue, onSubmit, onCancel, submitLabel = "Send", className, ...props }, ref) {
 	const [value, setValue] = React.useState(defaultValue);
 	const send = () => {
 		if (value.trim()) onSubmit(value.trim());
 	};
 	return /* @__PURE__ */ jsxs("form", {
+		ref,
 		"data-slot": "message-editor",
 		onSubmit: (e) => {
 			e.preventDefault();
@@ -99,7 +102,7 @@ function MessageEditor({ defaultValue, onSubmit, onCancel, submitLabel = "Send",
 					send();
 				}
 			},
-			className: "field-sizing-content max-h-60 min-h-16 w-full resize-none rounded-lg border border-ring bg-surface px-3 py-2 text-base leading-6 inset-ring-1 inset-ring-ring outline-hidden! sm:text-sm"
+			className: cn("field-sizing-content max-h-60 min-h-16 w-full resize-none rounded-lg border border-ring bg-surface px-3 py-2 text-base leading-6 inset-ring-1 inset-ring-ring sm:text-sm", noOutlineClasses)
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-end gap-2",
 			children: [/* @__PURE__ */ jsx(Button, {
@@ -116,14 +119,15 @@ function MessageEditor({ defaultValue, onSubmit, onCancel, submitLabel = "Send",
 			})]
 		})]
 	});
-}
+});
 /**
 * Files sent with a message: voice notes play inline, images show a
 * thumbnail, anything else is a named chip that opens the file.
 */
-function MessageAttachments({ files, className, ...props }) {
+var MessageAttachments = React.forwardRef(function MessageAttachments({ files, className, ...props }, ref) {
 	if (!files.length) return null;
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "message-attachments",
 		className: cn("flex flex-wrap gap-2", className),
 		...props,
@@ -140,7 +144,7 @@ function MessageAttachments({ files, className, ...props }) {
 				href: f.href,
 				target: "_blank",
 				rel: "noreferrer",
-				className: "block overflow-hidden rounded-lg border outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20",
+				className: cn("block overflow-hidden rounded-lg border", focusRingClasses),
 				children: /* @__PURE__ */ jsx("img", {
 					src: f.href,
 					alt: f.name,
@@ -161,12 +165,12 @@ function MessageAttachments({ files, className, ...props }) {
 					children: formatBytes(f.size)
 				})
 			] });
-			const chipClass = "inline-flex max-w-64 items-center gap-2 rounded-md border bg-surface px-2.5 py-1.5 text-sm";
+			const chipClass = "inline-flex max-w-64 items-center gap-2 rounded-md border bg-surface px-2.5 py-1.5 text-sm pointer-coarse:min-h-11";
 			return f.href ? /* @__PURE__ */ jsx("a", {
 				href: f.href,
 				target: "_blank",
 				rel: "noreferrer",
-				className: cn(chipClass, "outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20"),
+				className: cn(chipClass, "hover:bg-muted", focusRingClasses),
 				children: chip
 			}, `${f.name}-${i}`) : /* @__PURE__ */ jsx("span", {
 				className: chipClass,
@@ -174,7 +178,7 @@ function MessageAttachments({ files, className, ...props }) {
 			}, `${f.name}-${i}`);
 		})
 	});
-}
+});
 //#endregion
 export { MessageActions, MessageAttachments, MessageEditor };
 

package/dist/components/message-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-actions.js","names":["_Fragment"],"sources":["../../src/components/message-actions.tsx"],"sourcesContent":["import Edit from '@burtson-labs/icons/react/edit';\nimport FileText from '@burtson-labs/icons/react/file-text';\nimport RotateCcw from '@burtson-labs/icons/react/rotate-ccw';\nimport ThumbsDown from '@burtson-labs/icons/react/thumbs-down';\nimport ThumbsUp from '@burtson-labs/icons/react/thumbs-up';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { formatBytes } from './attachment';\nimport { VoiceMessage } from './audio-player';\nimport { Button } from './button';\nimport { CopyButton } from './copy-button';\nimport { IconButton } from './icon-button';\n\nexport type MessageFeedback = 'up' | 'down' | null;\n\nexport interface MessageActionsProps extends React.ComponentProps<'div'> {\n  /** Text for the copy button; leave out to hide it. */\n  copyText?: string;\n  onRegenerate?: () => void;\n  /** Edit a sent message (user turns). Pair with MessageEditor. */\n  onEdit?: () => void;\n  /** The current rating; controlled. */\n  feedback?: MessageFeedback;\n  /** Adds thumbs up and down. Clicking the chosen one again clears it (null). */\n  onFeedback?: (value: MessageFeedback) => void;\n}\n\n/**\n * The row under a message: copy, regenerate, edit and a thumbs rating, as\n * small icon buttons. Pass it to Message's `actions`, which shows it on\n * hover and focus (always on touch screens).\n */\nfunction MessageActions({\n  copyText,\n  onRegenerate,\n  onEdit,\n  feedback = null,\n  onFeedback,\n  className,\n  ...props\n}: MessageActionsProps) {\n  const small = 'size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-10';\n  return (\n    <div\n      data-slot=\"message-actions\"\n      role=\"toolbar\"\n      aria-label=\"Message actions\"\n      className={cn('flex items-center gap-0.5', className)}\n      {...props}\n    >\n      {copyText !== undefined && (\n        <CopyButton value={copyText} label=\"Copy message\" className={small} />\n      )}\n      {onEdit && (\n        <IconButton\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          label=\"Edit message\"\n          onClick={onEdit}\n          className={small}\n        >\n          <Edit />\n        </IconButton>\n      )}\n      {onRegenerate && (\n        <IconButton\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          label=\"Regenerate response\"\n          onClick={onRegenerate}\n          className={small}\n        >\n          <RotateCcw />\n        </IconButton>\n      )}\n      {onFeedback && (\n        <>\n          <IconButton\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            label=\"Good response\"\n            aria-pressed={feedback === 'up'}\n            onClick={() => onFeedback(feedback === 'up' ? null : 'up')}\n            className={cn(small, feedback === 'up' && 'text-brand hover:text-brand')}\n          >\n            <ThumbsUp className={cn(feedback === 'up' && 'fill-current')} />\n          </IconButton>\n          <IconButton\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            label=\"Bad response\"\n            aria-pressed={feedback === 'down'}\n            onClick={() => onFeedback(feedback === 'down' ? null : 'down')}\n            className={cn(small, feedback === 'down' && 'text-foreground')}\n          >\n            <ThumbsDown className={cn(feedback === 'down' && 'fill-current')} />\n          </IconButton>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport interface MessageEditorProps extends Omit<React.ComponentProps<'form'>, 'onSubmit'> {\n  /** The text being edited. */\n  defaultValue: string;\n  /** Save and send the edited message again. */\n  onSubmit: (text: string) => void;\n  onCancel: () => void;\n  submitLabel?: string;\n}\n\n/**\n * Edit-and-resend in place of a sent message. Enter sends (never mid-IME\n * composition), Shift+Enter adds a line, Escape cancels.\n */\nfunction MessageEditor({\n  defaultValue,\n  onSubmit,\n  onCancel,\n  submitLabel = 'Send',\n  className,\n  ...props\n}: MessageEditorProps) {\n  const [value, setValue] = React.useState(defaultValue);\n  const send = () => {\n    if (value.trim()) onSubmit(value.trim());\n  };\n  return (\n    <form\n      data-slot=\"message-editor\"\n      onSubmit={(e) => {\n        e.preventDefault();\n        send();\n      }}\n      className={cn('grid w-full max-w-[85%] gap-2 justify-self-end', className)}\n      {...props}\n    >\n      <textarea\n        aria-label=\"Edit message\"\n        value={value}\n        // eslint-disable-next-line jsx-a11y/no-autofocus -- editing was just asked for\n        autoFocus\n        onChange={(e) => setValue(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return;\n          if (e.key === 'Escape') {\n            e.preventDefault();\n            onCancel();\n          } else if (e.key === 'Enter' && !e.shiftKey) {\n            e.preventDefault();\n            send();\n          }\n        }}\n        className=\"field-sizing-content max-h-60 min-h-16 w-full resize-none rounded-lg border border-ring bg-surface px-3 py-2 text-base leading-6 inset-ring-1 inset-ring-ring outline-hidden! sm:text-sm\"\n      />\n      <div className=\"flex justify-end gap-2\">\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button type=\"submit\" size=\"sm\" disabled={!value.trim()}>\n          {submitLabel}\n        </Button>\n      </div>\n    </form>\n  );\n}\n\nexport interface MessageFile {\n  name: string;\n  /** Bytes. */\n  size?: number;\n  /** MIME type; audio renders a player, images a thumbnail. */\n  type?: string;\n  /** Where to open or play it. */\n  href?: string;\n  /** Waveform peaks for audio (see computePeaks). */\n  peaks?: number[];\n  /** Seconds, for audio. */\n  duration?: number;\n  /** Transcript for audio. */\n  transcript?: React.ReactNode;\n}\n\nexport interface MessageAttachmentsProps extends React.ComponentProps<'div'> {\n  files: MessageFile[];\n}\n\n/**\n * Files sent with a message: voice notes play inline, images show a\n * thumbnail, anything else is a named chip that opens the file.\n */\nfunction MessageAttachments({ files, className, ...props }: MessageAttachmentsProps) {\n  if (!files.length) return null;\n  return (\n    <div\n      data-slot=\"message-attachments\"\n      className={cn('flex flex-wrap gap-2', className)}\n      {...props}\n    >\n      {files.map((f, i) => {\n        const type = f.type ?? '';\n        if (type.startsWith('audio/') && f.href) {\n          return (\n            <VoiceMessage\n              key={`${f.name}-${i}`}\n              src={f.href}\n              peaks={f.peaks}\n              duration={f.duration}\n              transcript={f.transcript}\n              title={f.name}\n            />\n          );\n        }\n        if (type.startsWith('image/') && f.href) {\n          return (\n            <a\n              key={`${f.name}-${i}`}\n              href={f.href}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              className=\"block overflow-hidden rounded-lg border outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n            >\n              <img src={f.href} alt={f.name} className=\"h-28 w-auto max-w-56 object-cover\" />\n            </a>\n          );\n        }\n        const chip = (\n          <>\n            <FileText aria-hidden className=\"size-4 shrink-0 text-muted-foreground\" />\n            <span className=\"min-w-0 truncate\">{f.name}</span>\n            {f.size !== undefined && (\n              <span className=\"shrink-0 text-xs text-muted-foreground\">{formatBytes(f.size)}</span>\n            )}\n          </>\n        );\n        const chipClass =\n          'inline-flex max-w-64 items-center gap-2 rounded-md border bg-surface px-2.5 py-1.5 text-sm';\n        return f.href ? (\n          <a\n            key={`${f.name}-${i}`}\n            href={f.href}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className={cn(\n              chipClass,\n              'outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20',\n            )}\n          >\n            {chip}\n          </a>\n        ) : (\n          <span key={`${f.name}-${i}`} className={chipClass}>\n            {chip}\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n\nexport { MessageActions, MessageAttachments, MessageEditor };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkCA,SAAS,eAAe,EACtB,UACA,cACA,QACA,WAAW,MACX,YACA,WACA,GAAG,SACmB;CACtB,MAAM,QAAQ;CACd,OACE,qBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAW;EACX,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;EALN,UAAA;GAOG,aAAa,KAAA,KACZ,oBAAC,YAAD;IAAY,OAAO;IAAU,OAAM;IAAe,WAAW;GAAQ,CAAA;GAEtE,UACC,oBAAC,YAAD;IACE,SAAQ;IACR,MAAK;IACL,OAAM;IACN,SAAS;IACT,WAAW;IAEX,UAAA,oBAAC,MAAD,CAAO,CAAA;GACG,CAAA;GAEb,gBACC,oBAAC,YAAD;IACE,SAAQ;IACR,MAAK;IACL,OAAM;IACN,SAAS;IACT,WAAW;IAEX,UAAA,oBAAC,WAAD,CAAY,CAAA;GACF,CAAA;GAEb,cACC,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,YAAD;IACE,SAAQ;IACR,MAAK;IACL,OAAM;IACN,gBAAc,aAAa;IAC3B,eAAe,WAAW,aAAa,OAAO,OAAO,IAAI;IACzD,WAAW,GAAG,OAAO,aAAa,QAAQ,6BAA6B;IAEvE,UAAA,oBAAC,UAAD,EAAU,WAAW,GAAG,aAAa,QAAQ,cAAc,EAAI,CAAA;GACrD,CAAA,GACZ,oBAAC,YAAD;IACE,SAAQ;IACR,MAAK;IACL,OAAM;IACN,gBAAc,aAAa;IAC3B,eAAe,WAAW,aAAa,SAAS,OAAO,MAAM;IAC7D,WAAW,GAAG,OAAO,aAAa,UAAU,iBAAiB;IAE7D,UAAA,oBAAC,YAAD,EAAY,WAAW,GAAG,aAAa,UAAU,cAAc,EAAI,CAAA;GACzD,CAAA,CACZ,EAAA,CAAA;EAED;;AAET;;;;;AAeA,SAAS,cAAc,EACrB,cACA,UACA,UACA,cAAc,QACd,WACA,GAAG,SACkB;CACrB,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,YAAY;CACrD,MAAM,aAAa;EACjB,IAAI,MAAM,KAAK,GAAG,SAAS,MAAM,KAAK,CAAC;CACzC;CACA,OACE,qBAAC,QAAD;EACE,aAAU;EACV,WAAW,MAAM;GACf,EAAE,eAAe;GACjB,KAAK;EACP;EACA,WAAW,GAAG,kDAAkD,SAAS;EACzE,GAAI;EAPN,UAAA,CASE,oBAAC,YAAD;GACE,cAAW;GACJ;GAEP,WAAA;GACA,WAAW,MAAM,SAAS,EAAE,OAAO,KAAK;GACxC,YAAY,MAAM;IAChB,IAAI,EAAE,YAAY,eAAe,EAAE,YAAY,YAAY,KAAK;IAChE,IAAI,EAAE,QAAQ,UAAU;KACtB,EAAE,eAAe;KACjB,SAAS;IACX,OAAO,IAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,UAAU;KAC3C,EAAE,eAAe;KACjB,KAAK;IACP;GACF;GACA,WAAU;EACX,CAAA,GACD,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IAAQ,MAAK;IAAS,SAAQ;IAAQ,MAAK;IAAK,SAAS;IAAU,UAAA;GAE3D,CAAA,GACR,oBAAC,QAAD;IAAQ,MAAK;IAAS,MAAK;IAAK,UAAU,CAAC,MAAM,KAAK;IACnD,UAAA;GACK,CAAA,CACL;EACD,CAAA,CAAA;;AAEV;;;;;AA0BA,SAAS,mBAAmB,EAAE,OAAO,WAAW,GAAG,SAAkC;CACnF,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;EAEH,UAAA,MAAM,KAAK,GAAG,MAAM;GACnB,MAAM,OAAO,EAAE,QAAQ;GACvB,IAAI,KAAK,WAAW,QAAQ,KAAK,EAAE,MACjC,OACE,oBAAC,cAAD;IAEE,KAAK,EAAE;IACP,OAAO,EAAE;IACT,UAAU,EAAE;IACZ,YAAY,EAAE;IACd,OAAO,EAAE;GACV,GANM,GAAG,EAAE,KAAK,GAAG,GAMnB;GAGL,IAAI,KAAK,WAAW,QAAQ,KAAK,EAAE,MACjC,OACE,oBAAC,KAAD;IAEE,MAAM,EAAE;IACR,QAAO;IACP,KAAI;IACJ,WAAU;IAEV,UAAA,oBAAC,OAAD;KAAK,KAAK,EAAE;KAAM,KAAK,EAAE;KAAM,WAAU;IAAqC,CAAA;GAC7E,GAPI,GAAG,EAAE,KAAK,GAAG,GAOjB;GAGP,MAAM,OACJ,qBAAAA,UAAA,EAAA,UAAA;IACE,oBAAC,UAAD;KAAU,eAAA;KAAY,WAAU;IAAyC,CAAA;IACzE,oBAAC,QAAD;KAAM,WAAU;KAAoB,UAAA,EAAE;IAAW,CAAA;IAChD,EAAE,SAAS,KAAA,KACV,oBAAC,QAAD;KAAM,WAAU;KAA0C,UAAA,YAAY,EAAE,IAAI;IAAQ,CAAA;GAEtF,EAAA,CAAA;GAEJ,MAAM,YACJ;GACF,OAAO,EAAE,OACP,oBAAC,KAAD;IAEE,MAAM,EAAE;IACR,QAAO;IACP,KAAI;IACJ,WAAW,GACT,WACA,iFACF;IAEC,UAAA;GACA,GAVI,GAAG,EAAE,KAAK,GAAG,GAUjB,IAEH,oBAAC,QAAD;IAA6B,WAAW;IACrC,UAAA;GACG,GAFK,GAAG,EAAE,KAAK,GAAG,GAElB;EAEV,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"message-actions.js","names":["_Fragment"],"sources":["../../src/components/message-actions.tsx"],"sourcesContent":["import Edit from '@burtson-labs/icons/react/edit';\nimport FileText from '@burtson-labs/icons/react/file-text';\nimport RotateCcw from '@burtson-labs/icons/react/rotate-ccw';\nimport ThumbsDown from '@burtson-labs/icons/react/thumbs-down';\nimport ThumbsUp from '@burtson-labs/icons/react/thumbs-up';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses, noOutlineClasses } from '../lib/utils';\n\nimport { formatBytes } from './attachment';\nimport { VoiceMessage } from './audio-player';\nimport { Button } from './button';\nimport { CopyButton } from './copy-button';\nimport { IconButton } from './icon-button';\n\nexport type MessageFeedback = 'up' | 'down' | null;\n\nexport interface MessageActionsProps extends React.ComponentProps<'div'> {\n  /** Text for the copy button; leave out to hide it. */\n  copyText?: string;\n  onRegenerate?: () => void;\n  /** Edit a sent message (user turns). Pair with MessageEditor. */\n  onEdit?: () => void;\n  /** The current rating; controlled. */\n  feedback?: MessageFeedback;\n  /** Adds thumbs up and down. Clicking the chosen one again clears it (null). */\n  onFeedback?: (value: MessageFeedback) => void;\n}\n\n/**\n * The row under a message: copy, regenerate, edit and a thumbs rating, as\n * small icon buttons. Pass it to Message's `actions`, which shows it on\n * hover and focus (always on touch screens).\n */\nconst MessageActions = React.forwardRef<HTMLDivElement, MessageActionsProps>(\n  function MessageActions(\n    { copyText, onRegenerate, onEdit, feedback = null, onFeedback, className, ...props },\n    ref,\n  ) {\n    const small = 'size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-11';\n    return (\n      <div\n        ref={ref}\n        data-slot=\"message-actions\"\n        role=\"toolbar\"\n        aria-label=\"Message actions\"\n        className={cn('flex items-center gap-0.5', className)}\n        {...props}\n      >\n        {copyText !== undefined && (\n          <CopyButton value={copyText} label=\"Copy message\" className={small} />\n        )}\n        {onEdit && (\n          <IconButton\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            label=\"Edit message\"\n            onClick={onEdit}\n            className={small}\n          >\n            <Edit />\n          </IconButton>\n        )}\n        {onRegenerate && (\n          <IconButton\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            label=\"Regenerate response\"\n            onClick={onRegenerate}\n            className={small}\n          >\n            <RotateCcw />\n          </IconButton>\n        )}\n        {onFeedback && (\n          <>\n            <IconButton\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              label=\"Good response\"\n              aria-pressed={feedback === 'up'}\n              onClick={() => onFeedback(feedback === 'up' ? null : 'up')}\n              className={cn(small, feedback === 'up' && 'text-brand hover:text-brand')}\n            >\n              <ThumbsUp className={cn(feedback === 'up' && 'fill-current')} />\n            </IconButton>\n            <IconButton\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              label=\"Bad response\"\n              aria-pressed={feedback === 'down'}\n              onClick={() => onFeedback(feedback === 'down' ? null : 'down')}\n              className={cn(small, feedback === 'down' && 'text-foreground')}\n            >\n              <ThumbsDown className={cn(feedback === 'down' && 'fill-current')} />\n            </IconButton>\n          </>\n        )}\n      </div>\n    );\n  },\n);\n\nexport interface MessageEditorProps extends Omit<React.ComponentProps<'form'>, 'onSubmit'> {\n  /** The text being edited. */\n  defaultValue: string;\n  /** Save and send the edited message again. */\n  onSubmit: (text: string) => void;\n  onCancel: () => void;\n  submitLabel?: string;\n}\n\n/**\n * Edit-and-resend in place of a sent message. Enter sends (never mid-IME\n * composition), Shift+Enter adds a line, Escape cancels.\n */\nconst MessageEditor = React.forwardRef<HTMLFormElement, MessageEditorProps>(function MessageEditor(\n  { defaultValue, onSubmit, onCancel, submitLabel = 'Send', className, ...props },\n  ref,\n) {\n  const [value, setValue] = React.useState(defaultValue);\n  const send = () => {\n    if (value.trim()) onSubmit(value.trim());\n  };\n  return (\n    <form\n      ref={ref}\n      data-slot=\"message-editor\"\n      onSubmit={(e) => {\n        e.preventDefault();\n        send();\n      }}\n      className={cn('grid w-full max-w-[85%] gap-2 justify-self-end', className)}\n      {...props}\n    >\n      <textarea\n        aria-label=\"Edit message\"\n        value={value}\n        // eslint-disable-next-line jsx-a11y/no-autofocus -- editing was just asked for\n        autoFocus\n        onChange={(e) => setValue(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return;\n          if (e.key === 'Escape') {\n            e.preventDefault();\n            onCancel();\n          } else if (e.key === 'Enter' && !e.shiftKey) {\n            e.preventDefault();\n            send();\n          }\n        }}\n        className={cn(\n          'field-sizing-content max-h-60 min-h-16 w-full resize-none rounded-lg border border-ring bg-surface px-3 py-2 text-base leading-6 inset-ring-1 inset-ring-ring sm:text-sm',\n          noOutlineClasses,\n        )}\n      />\n      <div className=\"flex justify-end gap-2\">\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button type=\"submit\" size=\"sm\" disabled={!value.trim()}>\n          {submitLabel}\n        </Button>\n      </div>\n    </form>\n  );\n});\n\nexport interface MessageFile {\n  name: string;\n  /** Bytes. */\n  size?: number;\n  /** MIME type; audio renders a player, images a thumbnail. */\n  type?: string;\n  /** Where to open or play it. */\n  href?: string;\n  /** Waveform peaks for audio (see computePeaks). */\n  peaks?: number[];\n  /** Seconds, for audio. */\n  duration?: number;\n  /** Transcript for audio. */\n  transcript?: React.ReactNode;\n}\n\nexport interface MessageAttachmentsProps extends React.ComponentProps<'div'> {\n  files: MessageFile[];\n}\n\n/**\n * Files sent with a message: voice notes play inline, images show a\n * thumbnail, anything else is a named chip that opens the file.\n */\nconst MessageAttachments = React.forwardRef<HTMLDivElement, MessageAttachmentsProps>(\n  function MessageAttachments({ files, className, ...props }, ref) {\n    if (!files.length) return null;\n    return (\n      <div\n        ref={ref}\n        data-slot=\"message-attachments\"\n        className={cn('flex flex-wrap gap-2', className)}\n        {...props}\n      >\n        {files.map((f, i) => {\n          const type = f.type ?? '';\n          if (type.startsWith('audio/') && f.href) {\n            return (\n              <VoiceMessage\n                key={`${f.name}-${i}`}\n                src={f.href}\n                peaks={f.peaks}\n                duration={f.duration}\n                transcript={f.transcript}\n                title={f.name}\n              />\n            );\n          }\n          if (type.startsWith('image/') && f.href) {\n            return (\n              <a\n                key={`${f.name}-${i}`}\n                href={f.href}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                className={cn('block overflow-hidden rounded-lg border', focusRingClasses)}\n              >\n                <img src={f.href} alt={f.name} className=\"h-28 w-auto max-w-56 object-cover\" />\n              </a>\n            );\n          }\n          const chip = (\n            <>\n              <FileText aria-hidden className=\"size-4 shrink-0 text-muted-foreground\" />\n              <span className=\"min-w-0 truncate\">{f.name}</span>\n              {f.size !== undefined && (\n                <span className=\"shrink-0 text-xs text-muted-foreground\">\n                  {formatBytes(f.size)}\n                </span>\n              )}\n            </>\n          );\n          const chipClass =\n            'inline-flex max-w-64 items-center gap-2 rounded-md border bg-surface px-2.5 py-1.5 text-sm pointer-coarse:min-h-11';\n          return f.href ? (\n            <a\n              key={`${f.name}-${i}`}\n              href={f.href}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              className={cn(chipClass, 'hover:bg-muted', focusRingClasses)}\n            >\n              {chip}\n            </a>\n          ) : (\n            <span key={`${f.name}-${i}`} className={chipClass}>\n              {chip}\n            </span>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nexport { MessageActions, MessageAttachments, MessageEditor };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA,IAAM,iBAAiB,MAAM,WAC3B,SAAS,eACP,EAAE,UAAU,cAAc,QAAQ,WAAW,MAAM,YAAY,WAAW,GAAG,SAC7E,KACA;CACA,MAAM,QAAQ;CACd,OACE,qBAAC,OAAD;EACO;EACL,aAAU;EACV,MAAK;EACL,cAAW;EACX,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;EANN,UAAA;GAQG,aAAa,KAAA,KACZ,oBAAC,YAAD;IAAY,OAAO;IAAU,OAAM;IAAe,WAAW;GAAQ,CAAA;GAEtE,UACC,oBAAC,YAAD;IACE,SAAQ;IACR,MAAK;IACL,OAAM;IACN,SAAS;IACT,WAAW;IAEX,UAAA,oBAAC,MAAD,CAAO,CAAA;GACG,CAAA;GAEb,gBACC,oBAAC,YAAD;IACE,SAAQ;IACR,MAAK;IACL,OAAM;IACN,SAAS;IACT,WAAW;IAEX,UAAA,oBAAC,WAAD,CAAY,CAAA;GACF,CAAA;GAEb,cACC,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,YAAD;IACE,SAAQ;IACR,MAAK;IACL,OAAM;IACN,gBAAc,aAAa;IAC3B,eAAe,WAAW,aAAa,OAAO,OAAO,IAAI;IACzD,WAAW,GAAG,OAAO,aAAa,QAAQ,6BAA6B;IAEvE,UAAA,oBAAC,UAAD,EAAU,WAAW,GAAG,aAAa,QAAQ,cAAc,EAAI,CAAA;GACrD,CAAA,GACZ,oBAAC,YAAD;IACE,SAAQ;IACR,MAAK;IACL,OAAM;IACN,gBAAc,aAAa;IAC3B,eAAe,WAAW,aAAa,SAAS,OAAO,MAAM;IAC7D,WAAW,GAAG,OAAO,aAAa,UAAU,iBAAiB;IAE7D,UAAA,oBAAC,YAAD,EAAY,WAAW,GAAG,aAAa,UAAU,cAAc,EAAI,CAAA;GACzD,CAAA,CACZ,EAAA,CAAA;EAED;;AAET,CACF;;;;;AAeA,IAAM,gBAAgB,MAAM,WAAgD,SAAS,cACnF,EAAE,cAAc,UAAU,UAAU,cAAc,QAAQ,WAAW,GAAG,SACxE,KACA;CACA,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,YAAY;CACrD,MAAM,aAAa;EACjB,IAAI,MAAM,KAAK,GAAG,SAAS,MAAM,KAAK,CAAC;CACzC;CACA,OACE,qBAAC,QAAD;EACO;EACL,aAAU;EACV,WAAW,MAAM;GACf,EAAE,eAAe;GACjB,KAAK;EACP;EACA,WAAW,GAAG,kDAAkD,SAAS;EACzE,GAAI;EARN,UAAA,CAUE,oBAAC,YAAD;GACE,cAAW;GACJ;GAEP,WAAA;GACA,WAAW,MAAM,SAAS,EAAE,OAAO,KAAK;GACxC,YAAY,MAAM;IAChB,IAAI,EAAE,YAAY,eAAe,EAAE,YAAY,YAAY,KAAK;IAChE,IAAI,EAAE,QAAQ,UAAU;KACtB,EAAE,eAAe;KACjB,SAAS;IACX,OAAO,IAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,UAAU;KAC3C,EAAE,eAAe;KACjB,KAAK;IACP;GACF;GACA,WAAW,GACT,4KACA,gBACF;EACD,CAAA,GACD,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IAAQ,MAAK;IAAS,SAAQ;IAAQ,MAAK;IAAK,SAAS;IAAU,UAAA;GAE3D,CAAA,GACR,oBAAC,QAAD;IAAQ,MAAK;IAAS,MAAK;IAAK,UAAU,CAAC,MAAM,KAAK;IACnD,UAAA;GACK,CAAA,CACL;EACD,CAAA,CAAA;;AAEV,CAAC;;;;;AA0BD,IAAM,qBAAqB,MAAM,WAC/B,SAAS,mBAAmB,EAAE,OAAO,WAAW,GAAG,SAAS,KAAK;CAC/D,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;EAEH,UAAA,MAAM,KAAK,GAAG,MAAM;GACnB,MAAM,OAAO,EAAE,QAAQ;GACvB,IAAI,KAAK,WAAW,QAAQ,KAAK,EAAE,MACjC,OACE,oBAAC,cAAD;IAEE,KAAK,EAAE;IACP,OAAO,EAAE;IACT,UAAU,EAAE;IACZ,YAAY,EAAE;IACd,OAAO,EAAE;GACV,GANM,GAAG,EAAE,KAAK,GAAG,GAMnB;GAGL,IAAI,KAAK,WAAW,QAAQ,KAAK,EAAE,MACjC,OACE,oBAAC,KAAD;IAEE,MAAM,EAAE;IACR,QAAO;IACP,KAAI;IACJ,WAAW,GAAG,2CAA2C,gBAAgB;IAEzE,UAAA,oBAAC,OAAD;KAAK,KAAK,EAAE;KAAM,KAAK,EAAE;KAAM,WAAU;IAAqC,CAAA;GAC7E,GAPI,GAAG,EAAE,KAAK,GAAG,GAOjB;GAGP,MAAM,OACJ,qBAAAA,UAAA,EAAA,UAAA;IACE,oBAAC,UAAD;KAAU,eAAA;KAAY,WAAU;IAAyC,CAAA;IACzE,oBAAC,QAAD;KAAM,WAAU;KAAoB,UAAA,EAAE;IAAW,CAAA;IAChD,EAAE,SAAS,KAAA,KACV,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA,YAAY,EAAE,IAAI;IACf,CAAA;GAER,EAAA,CAAA;GAEJ,MAAM,YACJ;GACF,OAAO,EAAE,OACP,oBAAC,KAAD;IAEE,MAAM,EAAE;IACR,QAAO;IACP,KAAI;IACJ,WAAW,GAAG,WAAW,kBAAkB,gBAAgB;IAE1D,UAAA;GACA,GAPI,GAAG,EAAE,KAAK,GAAG,GAOjB,IAEH,oBAAC,QAAD;IAA6B,WAAW;IACrC,UAAA;GACG,GAFK,GAAG,EAAE,KAAK,GAAG,GAElB;EAEV,CAAC;CACE,CAAA;AAET,CACF"}

package/dist/components/message.d.ts

@@ -17,5 +17,5 @@ export interface MessageProps extends React.ComponentProps<'div'> {
  * assistant turns read full width with an optional avatar, and system notes
  * are centred and small.
  */
-declare function Message({ from, avatar, name, meta, actions, children, className, ...props }: MessageProps): React.JSX.Element;
+declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Message };

package/dist/components/message.js

@@ -1,5 +1,6 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/message.tsx
 /**
@@ -7,8 +8,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * assistant turns read full width with an optional avatar, and system notes
 * are centred and small.
 */
-function Message({ from, avatar, name, meta, actions, children, className, ...props }) {
+var Message = React.forwardRef(function Message({ from, avatar, name, meta, actions, children, className, ...props }, ref) {
 	if (from === "system") return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "message",
 		"data-role": "system",
 		className: cn("mx-auto max-w-prose text-center text-xs text-muted-foreground", className),
@@ -17,6 +19,7 @@ function Message({ from, avatar, name, meta, actions, children, className, ...pr
 	});
 	const user = from === "user";
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		"data-slot": "message",
 		"data-role": from,
 		className: cn("group/message flex animate-in gap-3", user ? "justify-end" : "justify-start", className),
@@ -49,7 +52,7 @@ function Message({ from, avatar, name, meta, actions, children, className, ...pr
 			]
 		})]
 	});
-}
+});
 //#endregion
 export { Message };
 

package/dist/components/message.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.js","names":[],"sources":["../../src/components/message.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport type MessageRole = 'user' | 'assistant' | 'system';\n\nexport interface MessageProps extends React.ComponentProps<'div'> {\n  /** Who wrote it. (Not `role`, which is the ARIA attribute.) */\n  from: MessageRole;\n  /** Avatar or agent mark beside assistant messages. */\n  avatar?: React.ReactNode;\n  /** Sender name shown above the message, e.g. the agent's name. */\n  name?: React.ReactNode;\n  /** Timestamp or status text. */\n  meta?: React.ReactNode;\n  /** Actions such as copy and retry, shown on hover and focus. */\n  actions?: React.ReactNode;\n}\n\n/**\n * One turn in a conversation. User turns sit on the right in a quiet bubble,\n * assistant turns read full width with an optional avatar, and system notes\n * are centred and small.\n */\nfunction Message({\n  from,\n  avatar,\n  name,\n  meta,\n  actions,\n  children,\n  className,\n  ...props\n}: MessageProps) {\n  if (from === 'system') {\n    return (\n      <div\n        data-slot=\"message\"\n        data-role=\"system\"\n        className={cn('mx-auto max-w-prose text-center text-xs text-muted-foreground', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n  const user = from === 'user';\n  return (\n    <div\n      data-slot=\"message\"\n      data-role={from}\n      className={cn(\n        'group/message flex animate-in gap-3',\n        user ? 'justify-end' : 'justify-start',\n        className,\n      )}\n      {...props}\n    >\n      {!user && avatar && (\n        <div className=\"mt-0.5 grid size-7 shrink-0 place-items-center overflow-hidden rounded-md border border-brand/15 bg-brand-soft text-brand [&_svg]:size-4\">\n          {avatar}\n        </div>\n      )}\n      <div\n        className={cn('grid min-w-0 gap-1.5', user ? 'max-w-[85%] justify-items-end' : 'flex-1')}\n      >\n        {(name || meta) && (\n          <div className=\"flex items-baseline gap-2 text-xs\">\n            {name && <span className=\"font-semibold text-foreground\">{name}</span>}\n            {meta && <span className=\"text-muted-foreground\">{meta}</span>}\n          </div>\n        )}\n        <div\n          data-slot=\"message-body\"\n          className={cn(\n            'min-w-0 break-words text-sm leading-6',\n            user && 'rounded-lg rounded-tr-xs bg-secondary px-3.5 py-2 text-secondary-foreground',\n          )}\n        >\n          {children}\n        </div>\n        {actions && (\n          <div className=\"flex gap-1 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100 max-md:opacity-100\">\n            {actions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport { Message };\n"],"mappings":";;;;;;;;;AAwBA,SAAS,QAAQ,EACf,MACA,QACA,MACA,MACA,SACA,UACA,WACA,GAAG,SACY;CACf,IAAI,SAAS,UACX,OACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;EAEH;CACE,CAAA;CAGT,MAAM,OAAO,SAAS;CACtB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,uCACA,OAAO,gBAAgB,iBACvB,SACF;EACA,GAAI;EARN,UAAA,CAUG,CAAC,QAAQ,UACR,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA;EACE,CAAA,GAEP,qBAAC,OAAD;GACE,WAAW,GAAG,wBAAwB,OAAO,kCAAkC,QAAQ;GADzF,UAAA;KAGI,QAAQ,SACR,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,QAAQ,oBAAC,QAAD;MAAM,WAAU;MAAiC,UAAA;KAAW,CAAA,GACpE,QAAQ,oBAAC,QAAD;MAAM,WAAU;MAAyB,UAAA;KAAW,CAAA,CAC1D;;IAEP,oBAAC,OAAD;KACE,aAAU;KACV,WAAW,GACT,yCACA,QAAQ,6EACV;KAEC;IACE,CAAA;IACJ,WACC,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA;GAEJ;EACF,CAAA,CAAA;;AAET"}
+{"version":3,"file":"message.js","names":[],"sources":["../../src/components/message.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport type MessageRole = 'user' | 'assistant' | 'system';\n\nexport interface MessageProps extends React.ComponentProps<'div'> {\n  /** Who wrote it. (Not `role`, which is the ARIA attribute.) */\n  from: MessageRole;\n  /** Avatar or agent mark beside assistant messages. */\n  avatar?: React.ReactNode;\n  /** Sender name shown above the message, e.g. the agent's name. */\n  name?: React.ReactNode;\n  /** Timestamp or status text. */\n  meta?: React.ReactNode;\n  /** Actions such as copy and retry, shown on hover and focus. */\n  actions?: React.ReactNode;\n}\n\n/**\n * One turn in a conversation. User turns sit on the right in a quiet bubble,\n * assistant turns read full width with an optional avatar, and system notes\n * are centred and small.\n */\nconst Message = React.forwardRef<HTMLDivElement, MessageProps>(function Message(\n  { from, avatar, name, meta, actions, children, className, ...props },\n  ref,\n) {\n  if (from === 'system') {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"message\"\n        data-role=\"system\"\n        className={cn('mx-auto max-w-prose text-center text-xs text-muted-foreground', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n  const user = from === 'user';\n  return (\n    <div\n      ref={ref}\n      data-slot=\"message\"\n      data-role={from}\n      className={cn(\n        'group/message flex animate-in gap-3',\n        user ? 'justify-end' : 'justify-start',\n        className,\n      )}\n      {...props}\n    >\n      {!user && avatar && (\n        <div className=\"mt-0.5 grid size-7 shrink-0 place-items-center overflow-hidden rounded-md border border-brand/15 bg-brand-soft text-brand [&_svg]:size-4\">\n          {avatar}\n        </div>\n      )}\n      <div\n        className={cn('grid min-w-0 gap-1.5', user ? 'max-w-[85%] justify-items-end' : 'flex-1')}\n      >\n        {(name || meta) && (\n          <div className=\"flex items-baseline gap-2 text-xs\">\n            {name && <span className=\"font-semibold text-foreground\">{name}</span>}\n            {meta && <span className=\"text-muted-foreground\">{meta}</span>}\n          </div>\n        )}\n        <div\n          data-slot=\"message-body\"\n          className={cn(\n            'min-w-0 break-words text-sm leading-6',\n            user && 'rounded-lg rounded-tr-xs bg-secondary px-3.5 py-2 text-secondary-foreground',\n          )}\n        >\n          {children}\n        </div>\n        {actions && (\n          <div className=\"flex gap-1 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100 max-md:opacity-100\">\n            {actions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n});\n\nexport { Message };\n"],"mappings":";;;;;;;;;;AAwBA,IAAM,UAAU,MAAM,WAAyC,SAAS,QACtE,EAAE,MAAM,QAAQ,MAAM,MAAM,SAAS,UAAU,WAAW,GAAG,SAC7D,KACA;CACA,IAAI,SAAS,UACX,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;EAEH;CACE,CAAA;CAGT,MAAM,OAAO,SAAS;CACtB,OACE,qBAAC,OAAD;EACO;EACL,aAAU;EACV,aAAW;EACX,WAAW,GACT,uCACA,OAAO,gBAAgB,iBACvB,SACF;EACA,GAAI;EATN,UAAA,CAWG,CAAC,QAAQ,UACR,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA;EACE,CAAA,GAEP,qBAAC,OAAD;GACE,WAAW,GAAG,wBAAwB,OAAO,kCAAkC,QAAQ;GADzF,UAAA;KAGI,QAAQ,SACR,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,QAAQ,oBAAC,QAAD;MAAM,WAAU;MAAiC,UAAA;KAAW,CAAA,GACpE,QAAQ,oBAAC,QAAD;MAAM,WAAU;MAAyB,UAAA;KAAW,CAAA,CAC1D;;IAEP,oBAAC,OAAD;KACE,aAAU;KACV,WAAW,GACT,yCACA,QAAQ,6EACV;KAEC;IACE,CAAA;IACJ,WACC,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA;GAEJ;EACF,CAAA,CAAA;;AAET,CAAC"}

package/dist/components/mobile-nav.d.ts

@@ -28,5 +28,5 @@ export interface MobileNavProps extends Omit<React.ComponentProps<'nav'>, 'onCha
  * room for the home indicator (safe-area insets). Destinations come from the
  * app; don't pad it with empty sections.
  */
-declare function MobileNav({ items, value, onValueChange, position, className, 'aria-label': ariaLabel, ...props }: MobileNavProps): React.JSX.Element;
+declare const MobileNav: React.ForwardRefExoticComponent<Omit<MobileNavProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { MobileNav };

package/dist/components/mobile-nav.js

@@ -1,5 +1,6 @@
-import { cn } from "../lib/utils.js";
-import "react";
+"use client";
+import { cn, focusRingClasses } from "../lib/utils.js";
+import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/mobile-nav.tsx
 /**
@@ -7,8 +8,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * room for the home indicator (safe-area insets). Destinations come from the
 * app; don't pad it with empty sections.
 */
-function MobileNav({ items, value, onValueChange, position = "static", className, "aria-label": ariaLabel = "Primary", ...props }) {
+var MobileNav = React.forwardRef(function MobileNav({ items, value, onValueChange, position = "static", className, "aria-label": ariaLabel = "Primary", ...props }, ref) {
 	return /* @__PURE__ */ jsx("nav", {
+		ref,
 		"data-slot": "mobile-nav",
 		"aria-label": ariaLabel,
 		className: cn("border-t bg-surface/95 pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] backdrop-blur supports-[backdrop-filter]:bg-surface/80", position === "fixed" && "fixed inset-x-0 bottom-0 z-40", className),
@@ -45,7 +47,7 @@ function MobileNav({ items, value, onValueChange, position = "static", className
 						children: ", new"
 					})
 				] });
-				const classes = cn("flex min-h-14 w-full min-w-11 flex-col items-center justify-center gap-1 px-1 py-1.5 text-[11px] font-medium text-muted-foreground outline-none transition-colors select-none [-webkit-tap-highlight-color:transparent] hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/25 focus-visible:ring-inset", active && "text-brand hover:text-brand");
+				const classes = cn("flex min-h-14 w-full min-w-11 flex-col items-center justify-center gap-1 px-1 py-1.5 text-[11px] font-medium text-muted-foreground transition-colors select-none [-webkit-tap-highlight-color:transparent] hover:text-foreground", focusRingClasses, "focus-visible:outline-offset-[-2px]", active && "text-brand hover:text-brand");
 				return /* @__PURE__ */ jsx("li", {
 					className: "min-w-0 flex-1",
 					children: item.href ? /* @__PURE__ */ jsx("a", {
@@ -65,7 +67,7 @@ function MobileNav({ items, value, onValueChange, position = "static", className
 			})
 		})
 	});
-}
+});
 //#endregion
 export { MobileNav };
 

package/dist/components/mobile-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-nav.js","names":["_Fragment"],"sources":["../../src/components/mobile-nav.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface MobileNavItem {\n  id: string;\n  label: string;\n  /** An icon element, e.g. <MessageSquare />; sized to 20px. */\n  icon: React.ReactNode;\n  /** Renders a link; leave out for a button that only calls onValueChange. */\n  href?: string;\n  /** A count, or true for a dot. */\n  badge?: number | boolean;\n}\n\nexport interface MobileNavProps extends Omit<React.ComponentProps<'nav'>, 'onChange'> {\n  /** Three to five destinations the app defines. */\n  items: MobileNavItem[];\n  /** The current destination's id. */\n  value: string;\n  /**\n   * Called on every press. For a link, call `event.preventDefault()` and\n   * route yourself to keep a single-page app from reloading.\n   */\n  onValueChange?: (id: string, event: React.MouseEvent<HTMLElement>) => void;\n  /** `fixed` pins it to the bottom of the viewport. */\n  position?: 'fixed' | 'static';\n  'aria-label'?: string;\n}\n\n/**\n * The phone's bottom tab bar: icon over a visible label, 44px+ targets, and\n * room for the home indicator (safe-area insets). Destinations come from the\n * app; don't pad it with empty sections.\n */\nfunction MobileNav({\n  items,\n  value,\n  onValueChange,\n  position = 'static',\n  className,\n  'aria-label': ariaLabel = 'Primary',\n  ...props\n}: MobileNavProps) {\n  return (\n    <nav\n      data-slot=\"mobile-nav\"\n      aria-label={ariaLabel}\n      className={cn(\n        'border-t bg-surface/95 pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] backdrop-blur supports-[backdrop-filter]:bg-surface/80',\n        position === 'fixed' && 'fixed inset-x-0 bottom-0 z-40',\n        className,\n      )}\n      {...props}\n    >\n      <ul className=\"mx-auto flex max-w-lg\">\n        {items.map((item) => {\n          const active = item.id === value;\n          const count = typeof item.badge === 'number' && item.badge > 0 ? item.badge : undefined;\n          const dot = item.badge === true;\n          const content = (\n            <>\n              <span className=\"relative [&_svg]:size-5\" aria-hidden>\n                {item.icon}\n                {(count !== undefined || dot) && (\n                  <span\n                    className={cn(\n                      'absolute -top-1 left-3 grid place-items-center rounded-full bg-destructive text-[10px] leading-none font-semibold text-destructive-foreground ring-2 ring-surface tabular-nums',\n                      count !== undefined ? 'h-4 min-w-4 px-1' : 'size-2',\n                    )}\n                  >\n                    {count !== undefined ? (count > 99 ? '99+' : count) : null}\n                  </span>\n                )}\n              </span>\n              <span className=\"max-w-full truncate\">{item.label}</span>\n              {count !== undefined && <span className=\"sr-only\">, {count} new</span>}\n              {dot && <span className=\"sr-only\">, new</span>}\n            </>\n          );\n          const classes = cn(\n            'flex min-h-14 w-full min-w-11 flex-col items-center justify-center gap-1 px-1 py-1.5 text-[11px] font-medium text-muted-foreground outline-none transition-colors select-none [-webkit-tap-highlight-color:transparent] hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/25 focus-visible:ring-inset',\n            active && 'text-brand hover:text-brand',\n          );\n          return (\n            <li key={item.id} className=\"min-w-0 flex-1\">\n              {item.href ? (\n                <a\n                  href={item.href}\n                  aria-current={active ? 'page' : undefined}\n                  onClick={(e) => onValueChange?.(item.id, e)}\n                  className={classes}\n                >\n                  {content}\n                </a>\n              ) : (\n                <button\n                  type=\"button\"\n                  aria-current={active ? 'page' : undefined}\n                  onClick={(e) => onValueChange?.(item.id, e)}\n                  className={classes}\n                >\n                  {content}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n}\n\nexport { MobileNav };\n"],"mappings":";;;;;;;;;AAmCA,SAAS,UAAU,EACjB,OACA,OACA,eACA,WAAW,UACX,WACA,cAAc,YAAY,WAC1B,GAAG,SACc;CACjB,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,iLACA,aAAa,WAAW,iCACxB,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,OAAO;IAC3B,MAAM,QAAQ,OAAO,KAAK,UAAU,YAAY,KAAK,QAAQ,IAAI,KAAK,QAAQ,KAAA;IAC9E,MAAM,MAAM,KAAK,UAAU;IAC3B,MAAM,UACJ,qBAAAA,UAAA,EAAA,UAAA;KACE,qBAAC,QAAD;MAAM,WAAU;MAA0B,eAAA;MAA1C,UAAA,CACG,KAAK,OACJ,UAAU,KAAA,KAAa,QACvB,oBAAC,QAAD;OACE,WAAW,GACT,kLACA,UAAU,KAAA,IAAY,qBAAqB,QAC7C;OAEC,UAAA,UAAU,KAAA,IAAa,QAAQ,KAAK,QAAQ,QAAS;MAClD,CAAA,CAEJ;;KACN,oBAAC,QAAD;MAAM,WAAU;MAAuB,UAAA,KAAK;KAAY,CAAA;KACvD,UAAU,KAAA,KAAa,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OAA0B;OAAG;OAAM;MAAU;;KACpE,OAAO,oBAAC,QAAD;MAAM,WAAU;MAAU,UAAA;KAAW,CAAA;IAC7C,EAAA,CAAA;IAEJ,MAAM,UAAU,GACd,8TACA,UAAU,6BACZ;IACA,OACE,oBAAC,MAAD;KAAkB,WAAU;KACzB,UAAA,KAAK,OACJ,oBAAC,KAAD;MACE,MAAM,KAAK;MACX,gBAAc,SAAS,SAAS,KAAA;MAChC,UAAU,MAAM,gBAAgB,KAAK,IAAI,CAAC;MAC1C,WAAW;MAEV,UAAA;KACA,CAAA,IAEH,oBAAC,UAAD;MACE,MAAK;MACL,gBAAc,SAAS,SAAS,KAAA;MAChC,UAAU,MAAM,gBAAgB,KAAK,IAAI,CAAC;MAC1C,WAAW;MAEV,UAAA;KACK,CAAA;IAER,GApBK,KAAK,EAoBV;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET"}
+{"version":3,"file":"mobile-nav.js","names":["_Fragment"],"sources":["../../src/components/mobile-nav.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\n\nexport interface MobileNavItem {\n  id: string;\n  label: string;\n  /** An icon element, e.g. <MessageSquare />; sized to 20px. */\n  icon: React.ReactNode;\n  /** Renders a link; leave out for a button that only calls onValueChange. */\n  href?: string;\n  /** A count, or true for a dot. */\n  badge?: number | boolean;\n}\n\nexport interface MobileNavProps extends Omit<React.ComponentProps<'nav'>, 'onChange'> {\n  /** Three to five destinations the app defines. */\n  items: MobileNavItem[];\n  /** The current destination's id. */\n  value: string;\n  /**\n   * Called on every press. For a link, call `event.preventDefault()` and\n   * route yourself to keep a single-page app from reloading.\n   */\n  onValueChange?: (id: string, event: React.MouseEvent<HTMLElement>) => void;\n  /** `fixed` pins it to the bottom of the viewport. */\n  position?: 'fixed' | 'static';\n  'aria-label'?: string;\n}\n\n/**\n * The phone's bottom tab bar: icon over a visible label, 44px+ targets, and\n * room for the home indicator (safe-area insets). Destinations come from the\n * app; don't pad it with empty sections.\n */\nconst MobileNav = React.forwardRef<HTMLElement, MobileNavProps>(function MobileNav(\n  {\n    items,\n    value,\n    onValueChange,\n    position = 'static',\n    className,\n    'aria-label': ariaLabel = 'Primary',\n    ...props\n  },\n  ref,\n) {\n  return (\n    <nav\n      ref={ref}\n      data-slot=\"mobile-nav\"\n      aria-label={ariaLabel}\n      className={cn(\n        'border-t bg-surface/95 pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] backdrop-blur supports-[backdrop-filter]:bg-surface/80',\n        position === 'fixed' && 'fixed inset-x-0 bottom-0 z-40',\n        className,\n      )}\n      {...props}\n    >\n      <ul className=\"mx-auto flex max-w-lg\">\n        {items.map((item) => {\n          const active = item.id === value;\n          const count = typeof item.badge === 'number' && item.badge > 0 ? item.badge : undefined;\n          const dot = item.badge === true;\n          const content = (\n            <>\n              <span className=\"relative [&_svg]:size-5\" aria-hidden>\n                {item.icon}\n                {(count !== undefined || dot) && (\n                  <span\n                    className={cn(\n                      'absolute -top-1 left-3 grid place-items-center rounded-full bg-destructive text-[10px] leading-none font-semibold text-destructive-foreground ring-2 ring-surface tabular-nums',\n                      count !== undefined ? 'h-4 min-w-4 px-1' : 'size-2',\n                    )}\n                  >\n                    {count !== undefined ? (count > 99 ? '99+' : count) : null}\n                  </span>\n                )}\n              </span>\n              <span className=\"max-w-full truncate\">{item.label}</span>\n              {count !== undefined && <span className=\"sr-only\">, {count} new</span>}\n              {dot && <span className=\"sr-only\">, new</span>}\n            </>\n          );\n          const classes = cn(\n            'flex min-h-14 w-full min-w-11 flex-col items-center justify-center gap-1 px-1 py-1.5 text-[11px] font-medium text-muted-foreground transition-colors select-none [-webkit-tap-highlight-color:transparent] hover:text-foreground',\n            focusRingClasses,\n            'focus-visible:outline-offset-[-2px]',\n            active && 'text-brand hover:text-brand',\n          );\n          return (\n            <li key={item.id} className=\"min-w-0 flex-1\">\n              {item.href ? (\n                <a\n                  href={item.href}\n                  aria-current={active ? 'page' : undefined}\n                  onClick={(e) => onValueChange?.(item.id, e)}\n                  className={classes}\n                >\n                  {content}\n                </a>\n              ) : (\n                <button\n                  type=\"button\"\n                  aria-current={active ? 'page' : undefined}\n                  onClick={(e) => onValueChange?.(item.id, e)}\n                  className={classes}\n                >\n                  {content}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n});\n\nexport { MobileNav };\n"],"mappings":";;;;;;;;;;AAmCA,IAAM,YAAY,MAAM,WAAwC,SAAS,UACvE,EACE,OACA,OACA,eACA,WAAW,UACX,WACA,cAAc,YAAY,WAC1B,GAAG,SAEL,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GACT,iLACA,aAAa,WAAW,iCACxB,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,OAAO;IAC3B,MAAM,QAAQ,OAAO,KAAK,UAAU,YAAY,KAAK,QAAQ,IAAI,KAAK,QAAQ,KAAA;IAC9E,MAAM,MAAM,KAAK,UAAU;IAC3B,MAAM,UACJ,qBAAAA,UAAA,EAAA,UAAA;KACE,qBAAC,QAAD;MAAM,WAAU;MAA0B,eAAA;MAA1C,UAAA,CACG,KAAK,OACJ,UAAU,KAAA,KAAa,QACvB,oBAAC,QAAD;OACE,WAAW,GACT,kLACA,UAAU,KAAA,IAAY,qBAAqB,QAC7C;OAEC,UAAA,UAAU,KAAA,IAAa,QAAQ,KAAK,QAAQ,QAAS;MAClD,CAAA,CAEJ;;KACN,oBAAC,QAAD;MAAM,WAAU;MAAuB,UAAA,KAAK;KAAY,CAAA;KACvD,UAAU,KAAA,KAAa,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OAA0B;OAAG;OAAM;MAAU;;KACpE,OAAO,oBAAC,QAAD;MAAM,WAAU;MAAU,UAAA;KAAW,CAAA;IAC7C,EAAA,CAAA;IAEJ,MAAM,UAAU,GACd,oOACA,kBACA,uCACA,UAAU,6BACZ;IACA,OACE,oBAAC,MAAD;KAAkB,WAAU;KACzB,UAAA,KAAK,OACJ,oBAAC,KAAD;MACE,MAAM,KAAK;MACX,gBAAc,SAAS,SAAS,KAAA;MAChC,UAAU,MAAM,gBAAgB,KAAK,IAAI,CAAC;MAC1C,WAAW;MAEV,UAAA;KACA,CAAA,IAEH,oBAAC,UAAD;MACE,MAAK;MACL,gBAAc,SAAS,SAAS,KAAA;MAChC,UAAU,MAAM,gBAAgB,KAAK,IAAI,CAAC;MAC1C,WAAW;MAEV,UAAA;KACK,CAAA;IAER,GApBK,KAAK,EAoBV;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET,CAAC"}

package/dist/components/native-select.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { type FieldWidth } from './input';
+export interface NativeSelectProps extends React.ComponentProps<'select'> {
+    /** How wide the field is from 640px up; full width on phones. */
+    width?: FieldWidth;
+    /** Classes for the wrapper that positions the chevron; `className` goes to the select. */
+    containerClassName?: string;
+}
+/**
+ * The browser's own `<select>`, drawn like the kit's fields. Use it for short
+ * lists in forms on phones, where the platform picker beats a popover, and
+ * anywhere a portal is unwelcome. For search, descriptions or long lists use
+ * Select or Combobox.
+ */
+declare const NativeSelect: React.ForwardRefExoticComponent<Omit<NativeSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export { NativeSelect };

package/dist/components/native-select.js

@@ -0,0 +1,33 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { fieldClasses, fieldWidthClasses } from "./input.js";
+import * as React from "react";
+import ChevronDown from "@burtson-labs/icons/react/chevron-down";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/native-select.tsx
+/**
+* The browser's own `<select>`, drawn like the kit's fields. Use it for short
+* lists in forms on phones, where the platform picker beats a popover, and
+* anywhere a portal is unwelcome. For search, descriptions or long lists use
+* Select or Combobox.
+*/
+var NativeSelect = React.forwardRef(function NativeSelect({ className, containerClassName, width, children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "native-select-container",
+		className: cn("relative flex min-w-0", width ? fieldWidthClasses[width] : "w-full", containerClassName),
+		children: [/* @__PURE__ */ jsx("select", {
+			ref,
+			"data-slot": "native-select",
+			className: cn(fieldClasses, "h-9 w-full cursor-pointer appearance-none py-1.5 pr-9", className),
+			...props,
+			children
+		}), /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": true,
+			className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground"
+		})]
+	});
+});
+//#endregion
+export { NativeSelect };
+
+//# sourceMappingURL=native-select.js.map

package/dist/components/native-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.js","names":[],"sources":["../../src/components/native-select.tsx"],"sourcesContent":["import ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { fieldClasses, type FieldWidth, fieldWidthClasses } from './input';\n\nexport interface NativeSelectProps extends React.ComponentProps<'select'> {\n  /** How wide the field is from 640px up; full width on phones. */\n  width?: FieldWidth;\n  /** Classes for the wrapper that positions the chevron; `className` goes to the select. */\n  containerClassName?: string;\n}\n\n/**\n * The browser's own `<select>`, drawn like the kit's fields. Use it for short\n * lists in forms on phones, where the platform picker beats a popover, and\n * anywhere a portal is unwelcome. For search, descriptions or long lists use\n * Select or Combobox.\n */\nconst NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(function NativeSelect(\n  { className, containerClassName, width, children, ...props }: NativeSelectProps,\n  ref,\n) {\n  return (\n    <span\n      data-slot=\"native-select-container\"\n      className={cn(\n        'relative flex min-w-0',\n        width ? fieldWidthClasses[width] : 'w-full',\n        containerClassName,\n      )}\n    >\n      <select\n        ref={ref}\n        data-slot=\"native-select\"\n        className={cn(\n          fieldClasses,\n          'h-9 w-full cursor-pointer appearance-none py-1.5 pr-9',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </select>\n      <ChevronDown\n        aria-hidden\n        className=\"pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground\"\n      />\n    </span>\n  );\n});\n\nexport { NativeSelect };\n"],"mappings":";;;;;;;;;;;;;AAoBA,IAAM,eAAe,MAAM,WAAiD,SAAS,aACnF,EAAE,WAAW,oBAAoB,OAAO,UAAU,GAAG,SACrD,KACA;CACA,OACE,qBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,yBACA,QAAQ,kBAAkB,SAAS,UACnC,kBACF;EANF,UAAA,CAQE,oBAAC,UAAD;GACO;GACL,aAAU;GACV,WAAW,GACT,cACA,yDACA,SACF;GACA,GAAI;GAEH;EACK,CAAA,GACR,oBAAC,aAAD;GACE,eAAA;GACA,WAAU;EACX,CAAA,CACG;;AAEV,CAAC"}

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

@@ -1,20 +1,21 @@
-import { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui';
 import * as React from 'react';
+import * as NavigationMenuPrimitive from '../primitives/vendor/radix/react-navigation-menu';
 /**
  * Site navigation with dropdown panels (a products menu, docs sections).
  * Keyboard and screen-reader behaviour come from Radix; the panel renders in
  * a shared viewport under the bar, sized to its content.
  */
-declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement> & {
     viewport?: boolean;
-}): React.JSX.Element;
-declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): React.JSX.Element;
-declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): React.JSX.Element;
-/** The look of a top-level entry, for links that sit beside triggers. */
-declare const navigationMenuTriggerStyle = "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 text-sm font-semibold text-foreground/80 outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 data-[active]:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground";
-declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): React.JSX.Element;
-declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): React.JSX.Element;
-declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): React.JSX.Element;
-declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): React.JSX.Element;
-declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const NavigationMenuItem: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+/** The look of a top-level entry, for links that sit beside triggers; 44px on touch screens. */
+declare const navigationMenuTriggerStyle: string;
+declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const NavigationMenuContent: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** The shared panel: the floating surface (12px radius, elevation 4). */
+declare const NavigationMenuViewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenuLink: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const NavigationMenuIndicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuViewport, };

package/dist/components/navigation-menu.js

@@ -1,7 +1,8 @@
-import { cn } from "../lib/utils.js";
+"use client";
+import { cn, focusRingClasses } from "../lib/utils.js";
+import { Content, Indicator, Item, Link, List, Root, Trigger, Viewport } from "../primitives/vendor/radix/react-navigation-menu/navigation-menu.js";
+import * as React from "react";
 import ChevronDown from "@burtson-labs/icons/react/chevron-down";
-import { NavigationMenu } from "radix-ui";
-import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation-menu.tsx
 /**
@@ -9,75 +10,84 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Keyboard and screen-reader behaviour come from Radix; the panel renders in
 * a shared viewport under the bar, sized to its content.
 */
-function NavigationMenu$1({ className, children, viewport = true, ...props }) {
-	return /* @__PURE__ */ jsxs(NavigationMenu.Root, {
+var NavigationMenu = React.forwardRef(function NavigationMenu({ className, children, viewport = true, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Root, {
+		ref,
 		"data-slot": "navigation-menu",
 		"data-viewport": viewport,
 		className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
 		...props,
 		children: [children, viewport && /* @__PURE__ */ jsx(NavigationMenuViewport, {})]
 	});
-}
-function NavigationMenuList({ className, ...props }) {
-	return /* @__PURE__ */ jsx(NavigationMenu.List, {
+});
+var NavigationMenuList = React.forwardRef(function NavigationMenuList({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(List, {
+		ref,
 		"data-slot": "navigation-menu-list",
 		className: cn("group flex flex-1 list-none items-center justify-center gap-1", className),
 		...props
 	});
-}
-function NavigationMenuItem({ className, ...props }) {
-	return /* @__PURE__ */ jsx(NavigationMenu.Item, {
+});
+var NavigationMenuItem = React.forwardRef(function NavigationMenuItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Item, {
+		ref,
 		"data-slot": "navigation-menu-item",
 		className: cn("relative", className),
 		...props
 	});
-}
-/** The look of a top-level entry, for links that sit beside triggers. */
-var navigationMenuTriggerStyle = "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 text-sm font-semibold text-foreground/80 outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 data-[active]:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground";
-function NavigationMenuTrigger({ className, children, ...props }) {
-	return /* @__PURE__ */ jsxs(NavigationMenu.Trigger, {
+});
+/** The look of a top-level entry, for links that sit beside triggers; 44px on touch screens. */
+var navigationMenuTriggerStyle = cn("group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 text-sm font-semibold text-foreground/80 transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[active]:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground pointer-coarse:h-11", focusRingClasses);
+var NavigationMenuTrigger = React.forwardRef(function NavigationMenuTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Trigger, {
+		ref,
 		"data-slot": "navigation-menu-trigger",
 		className: cn(navigationMenuTriggerStyle, className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronDown, {
 			"aria-hidden": true,
-			className: "relative top-px size-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180"
+			className: "relative top-px size-4 transition-transform duration-(--duration-standard) group-data-[state=open]:rotate-180"
 		})]
 	});
-}
-function NavigationMenuContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx(NavigationMenu.Content, {
+});
+var NavigationMenuContent = React.forwardRef(function NavigationMenuContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Content, {
+		ref,
 		"data-slot": "navigation-menu-content",
 		className: cn("top-0 left-0 w-full p-2 md:absolute md:w-auto data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion=from-end]:[--bl-tx:24px] data-[motion=from-start]:[--bl-tx:-24px] data-[motion=to-end]:[--bl-tx:24px] data-[motion=to-start]:[--bl-tx:-24px] [--bl-scale:1]", className),
 		...props
 	});
-}
-function NavigationMenuViewport({ className, ...props }) {
+});
+/** The shared panel: the floating surface (12px radius, elevation 4). */
+var NavigationMenuViewport = React.forwardRef(function NavigationMenuViewport({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "absolute top-full left-0 z-50 flex justify-center",
-		children: /* @__PURE__ */ jsx(NavigationMenu.Viewport, {
+		children: /* @__PURE__ */ jsx(Viewport, {
+			ref,
 			"data-slot": "navigation-menu-viewport",
-			className: cn("relative mt-2 h-(--radix-navigation-menu-viewport-height) w-full origin-top overflow-hidden rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] transition-[width,height] duration-200 [--bl-ty:-6px] data-[state=closed]:animate-out data-[state=open]:animate-in md:w-(--radix-navigation-menu-viewport-width)", className),
+			className: cn("relative mt-2 h-(--radix-navigation-menu-viewport-height) w-full origin-top overflow-hidden rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-lg transition-[width,height] duration-(--duration-standard) [--bl-ty:-6px] data-[state=closed]:animate-out data-[state=open]:animate-in md:w-(--radix-navigation-menu-viewport-width)", className),
 			...props
 		})
 	});
-}
-function NavigationMenuLink({ className, ...props }) {
-	return /* @__PURE__ */ jsx(NavigationMenu.Link, {
+});
+var NavigationMenuLink = React.forwardRef(function NavigationMenuLink({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Link, {
+		ref,
 		"data-slot": "navigation-menu-link",
-		className: cn("flex flex-col gap-1 rounded-sm p-2 text-sm outline-none transition-colors hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20 data-[active=true]:bg-muted data-[active=true]:shadow-[inset_2px_0_0_var(--color-brand)] [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		className: cn("flex flex-col gap-1 rounded-sm p-2 text-sm transition-colors hover:bg-muted data-[active=true]:bg-muted data-[active=true]:shadow-[inset_2px_0_0_var(--color-brand)] [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", focusRingClasses, "focus-visible:outline-offset-[-2px]", className),
 		...props
 	});
-}
-function NavigationMenuIndicator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(NavigationMenu.Indicator, {
+});
+var NavigationMenuIndicator = React.forwardRef(function NavigationMenuIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Indicator, {
+		ref,
 		"data-slot": "navigation-menu-indicator",
 		className: cn("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in", className),
 		...props,
 		children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border-strong" })
 	});
-}
+});
 //#endregion
-export { NavigationMenu$1 as NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle };
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle };
 
 //# sourceMappingURL=navigation-menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.js","names":["NavigationMenu","NavigationMenuPrimitive"],"sources":["../../src/components/navigation-menu.tsx"],"sourcesContent":["import ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\n/**\n * Site navigation with dropdown panels (a products menu, docs sections).\n * Keyboard and screen-reader behaviour come from Radix; the panel renders in\n * a shared viewport under the bar, sized to its content.\n */\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & { viewport?: boolean }) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn('relative', className)}\n      {...props}\n    />\n  );\n}\n\n/** The look of a top-level entry, for links that sit beside triggers. */\nconst navigationMenuTriggerStyle =\n  'group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 text-sm font-semibold text-foreground/80 outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 data-[active]:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground';\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle, className)}\n      {...props}\n    >\n      {children}\n      <ChevronDown\n        aria-hidden\n        className=\"relative top-px size-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        'top-0 left-0 w-full p-2 md:absolute md:w-auto data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion=from-end]:[--bl-tx:24px] data-[motion=from-start]:[--bl-tx:-24px] data-[motion=to-end]:[--bl-tx:24px] data-[motion=to-start]:[--bl-tx:-24px] [--bl-scale:1]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div className=\"absolute top-full left-0 z-50 flex justify-center\">\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          'relative mt-2 h-(--radix-navigation-menu-viewport-height) w-full origin-top overflow-hidden rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] transition-[width,height] duration-200 [--bl-ty:-6px] data-[state=closed]:animate-out data-[state=open]:animate-in md:w-(--radix-navigation-menu-viewport-width)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex flex-col gap-1 rounded-sm p-2 text-sm outline-none transition-colors hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20 data-[active=true]:bg-muted data-[active=true]:shadow-[inset_2px_0_0_var(--color-brand)] [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border-strong\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuViewport,\n};\n"],"mappings":";;;;;;;;;;;AAWA,SAASA,iBAAe,EACtB,WACA,UACA,WAAW,MACX,GAAG,SACkF;CACrF,OACE,qBAACC,eAAwB,MAAzB;EACE,aAAU;EACV,iBAAe;EACf,WAAW,GACT,oFACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,UACA,YAAY,oBAAC,wBAAD,CAAyB,CAAA,CACV;;AAElC;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;CACL,CAAA;AAEL;;AAGA,IAAM,6BACJ;AAEF,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,qBAACA,eAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;EAHN,UAAA,CAKG,UACD,oBAAC,aAAD;GACE,eAAA;GACA,WAAU;EACX,CAAA,CAC8B;;AAErC;AAEA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,oBAACA,eAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GACT,yRACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAAC,OAAD;EAAK,WAAU;EACb,UAAA,oBAACA,eAAwB,UAAzB;GACE,aAAU;GACV,WAAW,GACT,wXACA,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GACT,kUACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,eAAwB,WAAzB;EACE,aAAU;EACV,WAAW,GACT,sIACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,OAAD,EAAK,WAAU,qEAAsE,CAAA;CACpD,CAAA;AAEvC"}
+{"version":3,"file":"navigation-menu.js","names":["NavigationMenuPrimitive.Root","NavigationMenuPrimitive.List","NavigationMenuPrimitive.Item","NavigationMenuPrimitive.Trigger","NavigationMenuPrimitive.Content","NavigationMenuPrimitive.Viewport","NavigationMenuPrimitive.Link","NavigationMenuPrimitive.Indicator"],"sources":["../../src/components/navigation-menu.tsx"],"sourcesContent":["import ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\nimport * as NavigationMenuPrimitive from '../primitives/vendor/radix/react-navigation-menu';\n\n/**\n * Site navigation with dropdown panels (a products menu, docs sections).\n * Keyboard and screen-reader behaviour come from Radix; the panel renders in\n * a shared viewport under the bar, sized to its content.\n */\nconst NavigationMenu = React.forwardRef<\n  HTMLElement,\n  React.ComponentProps<typeof NavigationMenuPrimitive.Root> & { viewport?: boolean }\n>(function NavigationMenu({ className, children, viewport = true, ...props }, ref) {\n  return (\n    <NavigationMenuPrimitive.Root\n      ref={ref}\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n});\n\nconst NavigationMenuList = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<typeof NavigationMenuPrimitive.List>\n>(function NavigationMenuList({ className, ...props }, ref) {\n  return (\n    <NavigationMenuPrimitive.List\n      ref={ref}\n      data-slot=\"navigation-menu-list\"\n      className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}\n      {...props}\n    />\n  );\n});\n\nconst NavigationMenuItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<typeof NavigationMenuPrimitive.Item>\n>(function NavigationMenuItem({ className, ...props }, ref) {\n  return (\n    <NavigationMenuPrimitive.Item\n      ref={ref}\n      data-slot=\"navigation-menu-item\"\n      className={cn('relative', className)}\n      {...props}\n    />\n  );\n});\n\n/** The look of a top-level entry, for links that sit beside triggers; 44px on touch screens. */\nconst navigationMenuTriggerStyle = cn(\n  'group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 text-sm font-semibold text-foreground/80 transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[active]:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground pointer-coarse:h-11',\n  focusRingClasses,\n);\n\nconst NavigationMenuTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>\n>(function NavigationMenuTrigger({ className, children, ...props }, ref) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      ref={ref}\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle, className)}\n      {...props}\n    >\n      {children}\n      <ChevronDown\n        aria-hidden\n        className=\"relative top-px size-4 transition-transform duration-(--duration-standard) group-data-[state=open]:rotate-180\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n});\n\nconst NavigationMenuContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof NavigationMenuPrimitive.Content>\n>(function NavigationMenuContent({ className, ...props }, ref) {\n  return (\n    <NavigationMenuPrimitive.Content\n      ref={ref}\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        'top-0 left-0 w-full p-2 md:absolute md:w-auto data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion=from-end]:[--bl-tx:24px] data-[motion=from-start]:[--bl-tx:-24px] data-[motion=to-end]:[--bl-tx:24px] data-[motion=to-start]:[--bl-tx:-24px] [--bl-scale:1]',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\n/** The shared panel: the floating surface (12px radius, elevation 4). */\nconst NavigationMenuViewport = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>\n>(function NavigationMenuViewport({ className, ...props }, ref) {\n  return (\n    <div className=\"absolute top-full left-0 z-50 flex justify-center\">\n      <NavigationMenuPrimitive.Viewport\n        ref={ref}\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          'relative mt-2 h-(--radix-navigation-menu-viewport-height) w-full origin-top overflow-hidden rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-lg transition-[width,height] duration-(--duration-standard) [--bl-ty:-6px] data-[state=closed]:animate-out data-[state=open]:animate-in md:w-(--radix-navigation-menu-viewport-width)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\n\nconst NavigationMenuLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<typeof NavigationMenuPrimitive.Link>\n>(function NavigationMenuLink({ className, ...props }, ref) {\n  return (\n    <NavigationMenuPrimitive.Link\n      ref={ref}\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex flex-col gap-1 rounded-sm p-2 text-sm transition-colors hover:bg-muted data-[active=true]:bg-muted data-[active=true]:shadow-[inset_2px_0_0_var(--color-brand)] [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        focusRingClasses,\n        'focus-visible:outline-offset-[-2px]',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst NavigationMenuIndicator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>\n>(function NavigationMenuIndicator({ className, ...props }, ref) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      ref={ref}\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border-strong\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n});\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuViewport,\n};\n"],"mappings":";;;;;;;;;;;;AAWA,IAAM,iBAAiB,MAAM,WAG3B,SAAS,eAAe,EAAE,WAAW,UAAU,WAAW,MAAM,GAAG,SAAS,KAAK;CACjF,OACE,qBAACA,MAAD;EACO;EACL,aAAU;EACV,iBAAe;EACf,WAAW,GACT,oFACA,SACF;EACA,GAAI;EARN,UAAA,CAUG,UACA,YAAY,oBAAC,wBAAD,CAAyB,CAAA,CACV;;AAElC,CAAC;AAED,IAAM,qBAAqB,MAAM,WAG/B,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC1D,OACE,oBAACC,MAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,qBAAqB,MAAM,WAG/B,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC1D,OACE,oBAACC,MAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;CACL,CAAA;AAEL,CAAC;;AAGD,IAAM,6BAA6B,GACjC,iVACA,gBACF;AAEA,IAAM,wBAAwB,MAAM,WAGlC,SAAS,sBAAsB,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CACvE,OACE,qBAACC,SAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;EAJN,UAAA,CAMG,UACD,oBAAC,aAAD;GACE,eAAA;GACA,WAAU;EACX,CAAA,CAC8B;;AAErC,CAAC;AAED,IAAM,wBAAwB,MAAM,WAGlC,SAAS,sBAAsB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC7D,OACE,oBAACC,SAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,yRACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;;AAGD,IAAM,yBAAyB,MAAM,WAGnC,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC9D,OACE,oBAAC,OAAD;EAAK,WAAU;EACb,UAAA,oBAACC,UAAD;GACO;GACL,aAAU;GACV,WAAW,GACT,6WACA,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET,CAAC;AAED,IAAM,qBAAqB,MAAM,WAG/B,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC1D,OACE,oBAACC,MAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,iQACA,kBACA,uCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,0BAA0B,MAAM,WAGpC,SAAS,wBAAwB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC/D,OACE,oBAACC,WAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,sIACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,OAAD,EAAK,WAAU,qEAAsE,CAAA;CACpD,CAAA;AAEvC,CAAC"}

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { type FieldWidth } from './input';
+export interface NumberInputProps extends Omit<React.ComponentProps<'input'>, 'prefix' | 'type'> {
+    /** Inside the field, before the number: "$". */
+    prefix?: React.ReactNode;
+    /** Inside the field, after the number: "gal", "min", "%". */
+    suffix?: React.ReactNode;
+    /** How wide the field is from 640px up; `sm` (money, a count) by default. */
+    width?: FieldWidth;
+    /** Allows a decimal point on the phone keyboard (`inputMode="decimal"`). */
+    decimal?: boolean;
+    /** Classes for the box; `className` goes to the input itself. */
+    containerClassName?: string;
+}
+/**
+ * A number with its unit inside the field, right-aligned in tabular figures
+ * so a column of them lines up, with the numeric keyboard on phones. The box
+ * is the field: it carries the border, the focus ring and the invalid and
+ * disabled states, and the input inside is borderless. The value stays a
+ * string, as with any input: parse it on change.
+ */
+declare const NumberInput: React.ForwardRefExoticComponent<Omit<NumberInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { NumberInput };