@burtson-labs/ui 0.14.0 → 0.15.0

package/dist/components/chat-layout.d.ts

@@ -38,5 +38,5 @@ export interface ChatLayoutProps extends Omit<React.ComponentProps<'div'>, 'titl
  * details column, and a Full screen mode. Put a Conversation and a Composer
  * in `children`; the layout stacks them and keeps the composer at the bottom.
  */
-declare function ChatLayout({ sidebar, sidebarLabel, details, detailsLabel, title, actions, sidebarOpen: controlledOpen, defaultSidebarOpen, onSidebarOpenChange, allowFullscreen, onFullscreenChange, sidebarSize, children, className, ...props }: ChatLayoutProps): React.JSX.Element;
+declare const ChatLayout: React.ForwardRefExoticComponent<Omit<ChatLayoutProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ChatLayout };

package/dist/components/chat-layout.js

@@ -89,7 +89,7 @@ function useDesktop(query = "(min-width: 768px)") {
 * details column, and a Full screen mode. Put a Conversation and a Composer
 * in `children`; the layout stacks them and keeps the composer at the bottom.
 */
-function ChatLayout({ sidebar, sidebarLabel = "Chats", details, detailsLabel = "Details", title, actions, sidebarOpen: controlledOpen, defaultSidebarOpen = true, onSidebarOpenChange, allowFullscreen = true, onFullscreenChange, sidebarSize = "24%", children, className, ...props }) {
+var ChatLayout = React.forwardRef(function ChatLayout({ sidebar, sidebarLabel = "Chats", details, detailsLabel = "Details", title, actions, sidebarOpen: controlledOpen, defaultSidebarOpen = true, onSidebarOpenChange, allowFullscreen = true, onFullscreenChange, sidebarSize = "24%", children, className, ...props }, ref) {
 	const root = React.useRef(null);
 	const desktop = useDesktop();
 	const [ownOpen, setOwnOpen] = React.useState(defaultSidebarOpen);
@@ -122,7 +122,11 @@ function ChatLayout({ sidebar, sidebarLabel = "Chats", details, detailsLabel = "
 		children
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		ref: root,
+		ref: (node) => {
+			root.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
 		"data-slot": "chat-layout",
 		"data-fullscreen": fullscreen || void 0,
 		className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground", "data-[fullscreen]:fixed data-[fullscreen]:inset-0 data-[fullscreen]:z-50 data-[fullscreen]:h-dvh data-[fullscreen]:w-screen", className),
@@ -211,7 +215,7 @@ function ChatLayout({ sidebar, sidebarLabel = "Chats", details, detailsLabel = "
 			})
 		]
 	});
-}
+});
 //#endregion
 export { ChatLayout, useFullscreen };
 

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

@@ -1 +1 @@
-{"version":3,"file":"chat-layout.js","names":["_Fragment"],"sources":["../../src/components/chat-layout.tsx"],"sourcesContent":["import Maximize from '@burtson-labs/icons/react/maximize';\nimport Minimize from '@burtson-labs/icons/react/minimize';\nimport PanelLeft from '@burtson-labs/icons/react/panel-left';\nimport PanelLeftClose from '@burtson-labs/icons/react/panel-left-close';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { IconButton } from './icon-button';\nimport { ResizablePanel, ResizablePanelGroup, ResizeHandle } from './resizable';\nimport { Sheet, SheetContent, SheetDescription, SheetTitle } from './sheet';\n\n/**\n * Full screen for one element: the Fullscreen API where the browser allows\n * it, otherwise the element is pinned over the page with CSS. Escape leaves\n * either way. Nothing remounts, so focus and scroll stay where they were.\n */\nexport function useFullscreen(\n  ref: React.RefObject<HTMLElement | null>,\n  onChange?: (fullscreen: boolean) => void,\n) {\n  const [native, setNative] = React.useState(false);\n  const [fallback, setFallback] = React.useState(false);\n  const active = native || fallback;\n  const changed = React.useRef(onChange);\n  React.useEffect(() => {\n    changed.current = onChange;\n  }, [onChange]);\n\n  React.useEffect(() => {\n    const sync = () =>\n      setNative(Boolean(ref.current && document.fullscreenElement === ref.current));\n    document.addEventListener('fullscreenchange', sync);\n    return () => document.removeEventListener('fullscreenchange', sync);\n  }, [ref]);\n\n  React.useEffect(() => {\n    if (!fallback) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && !e.defaultPrevented) setFallback(false);\n    };\n    const root = document.documentElement;\n    const previous = root.style.overflow;\n    root.style.overflow = 'hidden';\n    document.addEventListener('keydown', onKey);\n    return () => {\n      root.style.overflow = previous;\n      document.removeEventListener('keydown', onKey);\n    };\n  }, [fallback]);\n\n  const first = React.useRef(true);\n  React.useEffect(() => {\n    if (first.current) {\n      first.current = false;\n      return;\n    }\n    changed.current?.(active);\n  }, [active]);\n\n  const enter = React.useCallback(async () => {\n    const el = ref.current;\n    if (!el) return;\n    const canNative = document.fullscreenEnabled && typeof el.requestFullscreen === 'function';\n    // Denied (iframe without allowfullscreen, iOS) resolves false: use the CSS fallback.\n    const ok = canNative\n      ? await el.requestFullscreen().then(\n          () => true,\n          () => false,\n        )\n      : false;\n    if (!ok) setFallback(true);\n  }, [ref]);\n\n  const exit = React.useCallback(async () => {\n    setFallback(false);\n    if (document.fullscreenElement && typeof document.exitFullscreen === 'function') {\n      await document.exitFullscreen().catch(() => undefined);\n    }\n  }, []);\n\n  const toggle = React.useCallback(() => (active ? exit() : enter()), [active, enter, exit]);\n  return { fullscreen: active, native, enter, exit, toggle };\n}\n\nfunction useDesktop(query = '(min-width: 768px)') {\n  const get = () => (typeof matchMedia === 'function' ? matchMedia(query).matches : true);\n  const [desktop, setDesktop] = React.useState(get);\n  React.useEffect(() => {\n    if (typeof matchMedia !== 'function') return;\n    const mq = matchMedia(query);\n    const on = () => setDesktop(mq.matches);\n    mq.addEventListener?.('change', on);\n    return () => mq.removeEventListener?.('change', on);\n  }, [query]);\n  return desktop;\n}\n\nexport interface ChatLayoutProps extends Omit<React.ComponentProps<'div'>, 'title'> {\n  /** The history column, usually a ChatHistory. A sheet from the left on phones. */\n  sidebar?: React.ReactNode;\n  sidebarLabel?: string;\n  /** An optional right column: sources, files, run details. Hidden on phones. */\n  details?: React.ReactNode;\n  detailsLabel?: string;\n  /** Shown in the header: the conversation title. */\n  title?: React.ReactNode;\n  /** Header controls right of the title (model picker, share). */\n  actions?: React.ReactNode;\n  /** Controlled sidebar state; leave out to let the layout keep its own. */\n  sidebarOpen?: boolean;\n  defaultSidebarOpen?: boolean;\n  onSidebarOpenChange?: (open: boolean) => void;\n  /** Show the Full screen button. Default true. */\n  allowFullscreen?: boolean;\n  onFullscreenChange?: (fullscreen: boolean) => void;\n  /** Sidebar width, e.g. \"22%\" or 280 (px), as ResizablePanel sizes. */\n  sidebarSize?: number | string;\n}\n\n/**\n * The frame for a chat app: header, a resizable history sidebar (a sheet on\n * phones that closes when a chat is picked), the conversation, an optional\n * details column, and a Full screen mode. Put a Conversation and a Composer\n * in `children`; the layout stacks them and keeps the composer at the bottom.\n */\nfunction ChatLayout({\n  sidebar,\n  sidebarLabel = 'Chats',\n  details,\n  detailsLabel = 'Details',\n  title,\n  actions,\n  sidebarOpen: controlledOpen,\n  defaultSidebarOpen = true,\n  onSidebarOpenChange,\n  allowFullscreen = true,\n  onFullscreenChange,\n  sidebarSize = '24%',\n  children,\n  className,\n  ...props\n}: ChatLayoutProps) {\n  const root = React.useRef<HTMLDivElement>(null);\n  const desktop = useDesktop();\n  const [ownOpen, setOwnOpen] = React.useState(defaultSidebarOpen);\n  const [sheetOpen, setSheetOpen] = React.useState(false);\n  const open = controlledOpen ?? ownOpen;\n  const setOpen = (v: boolean) => {\n    if (controlledOpen === undefined) setOwnOpen(v);\n    onSidebarOpenChange?.(v);\n  };\n  const { fullscreen, toggle } = useFullscreen(root, onFullscreenChange);\n\n  const sidebarToggle = sidebar ? (\n    desktop ? (\n      <IconButton\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        label={open ? `Hide ${sidebarLabel.toLowerCase()}` : `Show ${sidebarLabel.toLowerCase()}`}\n        aria-expanded={open}\n        onClick={() => setOpen(!open)}\n      >\n        {open ? <PanelLeftClose /> : <PanelLeft />}\n      </IconButton>\n    ) : (\n      <IconButton\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        className=\"pointer-coarse:size-11\"\n        label={`Open ${sidebarLabel.toLowerCase()}`}\n        aria-expanded={sheetOpen}\n        onClick={() => setSheetOpen(true)}\n      >\n        <PanelLeft />\n      </IconButton>\n    )\n  ) : null;\n\n  const main = (\n    <div data-slot=\"chat-layout-main\" className=\"flex h-full min-h-0 min-w-0 flex-col\">\n      {children}\n    </div>\n  );\n\n  return (\n    <div\n      ref={root}\n      data-slot=\"chat-layout\"\n      data-fullscreen={fullscreen || undefined}\n      className={cn(\n        'flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground',\n        'data-[fullscreen]:fixed data-[fullscreen]:inset-0 data-[fullscreen]:z-50 data-[fullscreen]:h-dvh data-[fullscreen]:w-screen',\n        className,\n      )}\n      {...props}\n    >\n      <header className=\"flex h-12 shrink-0 items-center gap-1 border-b px-2\">\n        {sidebarToggle}\n        <div className=\"min-w-0 flex-1 truncate px-1 text-sm font-medium\">{title}</div>\n        {actions}\n        {allowFullscreen && (\n          <IconButton\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            className=\"pointer-coarse:size-11\"\n            label={fullscreen ? 'Exit full screen' : 'Full screen'}\n            aria-pressed={fullscreen}\n            onClick={() => void toggle()}\n          >\n            {fullscreen ? <Minimize /> : <Maximize />}\n          </IconButton>\n        )}\n      </header>\n      <div className=\"min-h-0 flex-1\">\n        {desktop && (sidebar || details) ? (\n          <ResizablePanelGroup orientation=\"horizontal\">\n            {sidebar && open && (\n              <>\n                <ResizablePanel\n                  id=\"chat-sidebar\"\n                  defaultSize={sidebarSize}\n                  minSize={180}\n                  maxSize=\"45%\"\n                  className=\"bg-surface-muted/50\"\n                >\n                  <aside aria-label={sidebarLabel} className=\"h-full\">\n                    {sidebar}\n                  </aside>\n                </ResizablePanel>\n                <ResizeHandle aria-label={`Resize ${sidebarLabel.toLowerCase()}`} />\n              </>\n            )}\n            <ResizablePanel id=\"chat-main\" minSize=\"30%\">\n              {main}\n            </ResizablePanel>\n            {details && (\n              <>\n                <ResizeHandle aria-label={`Resize ${detailsLabel.toLowerCase()}`} />\n                <ResizablePanel id=\"chat-details\" defaultSize=\"26%\" minSize={200} maxSize=\"45%\">\n                  <aside aria-label={detailsLabel} className=\"h-full overflow-y-auto\">\n                    {details}\n                  </aside>\n                </ResizablePanel>\n              </>\n            )}\n          </ResizablePanelGroup>\n        ) : (\n          main\n        )}\n      </div>\n      {sidebar && !desktop && (\n        <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>\n          <SheetContent side=\"left\" className=\"w-[min(20rem,88vw)] gap-0 p-0\">\n            <SheetTitle className=\"border-b px-4 py-3.5 text-sm\">{sidebarLabel}</SheetTitle>\n            <SheetDescription className=\"sr-only\">Pick a conversation.</SheetDescription>\n            <div\n              className=\"min-h-0 flex-1\"\n              // Picking a chat (or New chat) closes the sheet, as on a phone it should.\n              onClickCapture={(e) => {\n                const t = e.target as HTMLElement;\n                if (t.closest('[data-slot=\"chat-history-row\"], [data-close-sheet]'))\n                  setSheetOpen(false);\n              }}\n            >\n              {sidebar}\n            </div>\n          </SheetContent>\n        </Sheet>\n      )}\n    </div>\n  );\n}\n\nexport { ChatLayout };\n"],"mappings":"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"}
+{"version":3,"file":"chat-layout.js","names":["_Fragment"],"sources":["../../src/components/chat-layout.tsx"],"sourcesContent":["import Maximize from '@burtson-labs/icons/react/maximize';\nimport Minimize from '@burtson-labs/icons/react/minimize';\nimport PanelLeft from '@burtson-labs/icons/react/panel-left';\nimport PanelLeftClose from '@burtson-labs/icons/react/panel-left-close';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { IconButton } from './icon-button';\nimport { ResizablePanel, ResizablePanelGroup, ResizeHandle } from './resizable';\nimport { Sheet, SheetContent, SheetDescription, SheetTitle } from './sheet';\n\n/**\n * Full screen for one element: the Fullscreen API where the browser allows\n * it, otherwise the element is pinned over the page with CSS. Escape leaves\n * either way. Nothing remounts, so focus and scroll stay where they were.\n */\nexport function useFullscreen(\n  ref: React.RefObject<HTMLElement | null>,\n  onChange?: (fullscreen: boolean) => void,\n) {\n  const [native, setNative] = React.useState(false);\n  const [fallback, setFallback] = React.useState(false);\n  const active = native || fallback;\n  const changed = React.useRef(onChange);\n  React.useEffect(() => {\n    changed.current = onChange;\n  }, [onChange]);\n\n  React.useEffect(() => {\n    const sync = () =>\n      setNative(Boolean(ref.current && document.fullscreenElement === ref.current));\n    document.addEventListener('fullscreenchange', sync);\n    return () => document.removeEventListener('fullscreenchange', sync);\n  }, [ref]);\n\n  React.useEffect(() => {\n    if (!fallback) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && !e.defaultPrevented) setFallback(false);\n    };\n    const root = document.documentElement;\n    const previous = root.style.overflow;\n    root.style.overflow = 'hidden';\n    document.addEventListener('keydown', onKey);\n    return () => {\n      root.style.overflow = previous;\n      document.removeEventListener('keydown', onKey);\n    };\n  }, [fallback]);\n\n  const first = React.useRef(true);\n  React.useEffect(() => {\n    if (first.current) {\n      first.current = false;\n      return;\n    }\n    changed.current?.(active);\n  }, [active]);\n\n  const enter = React.useCallback(async () => {\n    const el = ref.current;\n    if (!el) return;\n    const canNative = document.fullscreenEnabled && typeof el.requestFullscreen === 'function';\n    // Denied (iframe without allowfullscreen, iOS) resolves false: use the CSS fallback.\n    const ok = canNative\n      ? await el.requestFullscreen().then(\n          () => true,\n          () => false,\n        )\n      : false;\n    if (!ok) setFallback(true);\n  }, [ref]);\n\n  const exit = React.useCallback(async () => {\n    setFallback(false);\n    if (document.fullscreenElement && typeof document.exitFullscreen === 'function') {\n      await document.exitFullscreen().catch(() => undefined);\n    }\n  }, []);\n\n  const toggle = React.useCallback(() => (active ? exit() : enter()), [active, enter, exit]);\n  return { fullscreen: active, native, enter, exit, toggle };\n}\n\nfunction useDesktop(query = '(min-width: 768px)') {\n  const get = () => (typeof matchMedia === 'function' ? matchMedia(query).matches : true);\n  const [desktop, setDesktop] = React.useState(get);\n  React.useEffect(() => {\n    if (typeof matchMedia !== 'function') return;\n    const mq = matchMedia(query);\n    const on = () => setDesktop(mq.matches);\n    mq.addEventListener?.('change', on);\n    return () => mq.removeEventListener?.('change', on);\n  }, [query]);\n  return desktop;\n}\n\nexport interface ChatLayoutProps extends Omit<React.ComponentProps<'div'>, 'title'> {\n  /** The history column, usually a ChatHistory. A sheet from the left on phones. */\n  sidebar?: React.ReactNode;\n  sidebarLabel?: string;\n  /** An optional right column: sources, files, run details. Hidden on phones. */\n  details?: React.ReactNode;\n  detailsLabel?: string;\n  /** Shown in the header: the conversation title. */\n  title?: React.ReactNode;\n  /** Header controls right of the title (model picker, share). */\n  actions?: React.ReactNode;\n  /** Controlled sidebar state; leave out to let the layout keep its own. */\n  sidebarOpen?: boolean;\n  defaultSidebarOpen?: boolean;\n  onSidebarOpenChange?: (open: boolean) => void;\n  /** Show the Full screen button. Default true. */\n  allowFullscreen?: boolean;\n  onFullscreenChange?: (fullscreen: boolean) => void;\n  /** Sidebar width, e.g. \"22%\" or 280 (px), as ResizablePanel sizes. */\n  sidebarSize?: number | string;\n}\n\n/**\n * The frame for a chat app: header, a resizable history sidebar (a sheet on\n * phones that closes when a chat is picked), the conversation, an optional\n * details column, and a Full screen mode. Put a Conversation and a Composer\n * in `children`; the layout stacks them and keeps the composer at the bottom.\n */\nconst ChatLayout = React.forwardRef<HTMLDivElement, ChatLayoutProps>(function ChatLayout(\n  {\n    sidebar,\n    sidebarLabel = 'Chats',\n    details,\n    detailsLabel = 'Details',\n    title,\n    actions,\n    sidebarOpen: controlledOpen,\n    defaultSidebarOpen = true,\n    onSidebarOpenChange,\n    allowFullscreen = true,\n    onFullscreenChange,\n    sidebarSize = '24%',\n    children,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const root = React.useRef<HTMLDivElement>(null);\n  const desktop = useDesktop();\n  const [ownOpen, setOwnOpen] = React.useState(defaultSidebarOpen);\n  const [sheetOpen, setSheetOpen] = React.useState(false);\n  const open = controlledOpen ?? ownOpen;\n  const setOpen = (v: boolean) => {\n    if (controlledOpen === undefined) setOwnOpen(v);\n    onSidebarOpenChange?.(v);\n  };\n  const { fullscreen, toggle } = useFullscreen(root, onFullscreenChange);\n\n  const sidebarToggle = sidebar ? (\n    desktop ? (\n      <IconButton\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        label={open ? `Hide ${sidebarLabel.toLowerCase()}` : `Show ${sidebarLabel.toLowerCase()}`}\n        aria-expanded={open}\n        onClick={() => setOpen(!open)}\n      >\n        {open ? <PanelLeftClose /> : <PanelLeft />}\n      </IconButton>\n    ) : (\n      <IconButton\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        className=\"pointer-coarse:size-11\"\n        label={`Open ${sidebarLabel.toLowerCase()}`}\n        aria-expanded={sheetOpen}\n        onClick={() => setSheetOpen(true)}\n      >\n        <PanelLeft />\n      </IconButton>\n    )\n  ) : null;\n\n  const main = (\n    <div data-slot=\"chat-layout-main\" className=\"flex h-full min-h-0 min-w-0 flex-col\">\n      {children}\n    </div>\n  );\n\n  return (\n    <div\n      ref={(node) => {\n        root.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      }}\n      data-slot=\"chat-layout\"\n      data-fullscreen={fullscreen || undefined}\n      className={cn(\n        'flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground',\n        'data-[fullscreen]:fixed data-[fullscreen]:inset-0 data-[fullscreen]:z-50 data-[fullscreen]:h-dvh data-[fullscreen]:w-screen',\n        className,\n      )}\n      {...props}\n    >\n      <header className=\"flex h-12 shrink-0 items-center gap-1 border-b px-2\">\n        {sidebarToggle}\n        <div className=\"min-w-0 flex-1 truncate px-1 text-sm font-medium\">{title}</div>\n        {actions}\n        {allowFullscreen && (\n          <IconButton\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            className=\"pointer-coarse:size-11\"\n            label={fullscreen ? 'Exit full screen' : 'Full screen'}\n            aria-pressed={fullscreen}\n            onClick={() => void toggle()}\n          >\n            {fullscreen ? <Minimize /> : <Maximize />}\n          </IconButton>\n        )}\n      </header>\n      <div className=\"min-h-0 flex-1\">\n        {desktop && (sidebar || details) ? (\n          <ResizablePanelGroup orientation=\"horizontal\">\n            {sidebar && open && (\n              <>\n                <ResizablePanel\n                  id=\"chat-sidebar\"\n                  defaultSize={sidebarSize}\n                  minSize={180}\n                  maxSize=\"45%\"\n                  className=\"bg-surface-muted/50\"\n                >\n                  <aside aria-label={sidebarLabel} className=\"h-full\">\n                    {sidebar}\n                  </aside>\n                </ResizablePanel>\n                <ResizeHandle aria-label={`Resize ${sidebarLabel.toLowerCase()}`} />\n              </>\n            )}\n            <ResizablePanel id=\"chat-main\" minSize=\"30%\">\n              {main}\n            </ResizablePanel>\n            {details && (\n              <>\n                <ResizeHandle aria-label={`Resize ${detailsLabel.toLowerCase()}`} />\n                <ResizablePanel id=\"chat-details\" defaultSize=\"26%\" minSize={200} maxSize=\"45%\">\n                  <aside aria-label={detailsLabel} className=\"h-full overflow-y-auto\">\n                    {details}\n                  </aside>\n                </ResizablePanel>\n              </>\n            )}\n          </ResizablePanelGroup>\n        ) : (\n          main\n        )}\n      </div>\n      {sidebar && !desktop && (\n        <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>\n          <SheetContent side=\"left\" className=\"w-[min(20rem,88vw)] gap-0 p-0\">\n            <SheetTitle className=\"border-b px-4 py-3.5 text-sm\">{sidebarLabel}</SheetTitle>\n            <SheetDescription className=\"sr-only\">Pick a conversation.</SheetDescription>\n            <div\n              className=\"min-h-0 flex-1\"\n              // Picking a chat (or New chat) closes the sheet, as on a phone it should.\n              onClickCapture={(e) => {\n                const t = e.target as HTMLElement;\n                if (t.closest('[data-slot=\"chat-history-row\"], [data-close-sheet]'))\n                  setSheetOpen(false);\n              }}\n            >\n              {sidebar}\n            </div>\n          </SheetContent>\n        </Sheet>\n      )}\n    </div>\n  );\n});\n\nexport { ChatLayout };\n"],"mappings":"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"}

package/dist/components/checkbox-card.d.ts

@@ -13,7 +13,7 @@ export interface CheckboxCardProps extends Omit<React.ComponentProps<typeof Chec
  * area (44px or taller). For choices that need explaining: roles,
  * permissions, notification types. One focus ring, on the card.
  */
-declare function CheckboxCard({ title, description, id: idProp, disabled, className, cardClassName, ...props }: CheckboxCardProps): React.JSX.Element;
+declare const CheckboxCard: React.ForwardRefExoticComponent<Omit<CheckboxCardProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface CheckboxCardGroupProps extends React.ComponentProps<'fieldset'> {
     /** The group's name, shown as its legend. */
     label: React.ReactNode;
@@ -21,5 +21,5 @@ export interface CheckboxCardGroupProps extends React.ComponentProps<'fieldset'>
     description?: React.ReactNode;
 }
 /** A fieldset of CheckboxCards with a visible legend. `disabled` disables every card. */
-declare function CheckboxCardGroup({ label, description, className, children, ...props }: CheckboxCardGroupProps): React.JSX.Element;
+declare const CheckboxCardGroup: React.ForwardRefExoticComponent<Omit<CheckboxCardGroupProps, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
 export { CheckboxCard, CheckboxCardGroup };

package/dist/components/checkbox-card.js

@@ -1,5 +1,5 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, noOutlineClasses } from "../lib/utils.js";
 import { Checkbox } from "./checkbox.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * area (44px or taller). For choices that need explaining: roles,
 * permissions, notification types. One focus ring, on the card.
 */
-function CheckboxCard({ title, description, id: idProp, disabled, className, cardClassName, ...props }) {
+var CheckboxCard = React.forwardRef(function CheckboxCard({ title, description, id: idProp, disabled, className, cardClassName, ...props }, ref) {
 	const auto = React.useId();
 	const id = idProp ?? auto;
 	return /* @__PURE__ */ jsxs("label", {
@@ -17,11 +17,12 @@ function CheckboxCard({ title, description, id: idProp, disabled, className, car
 		"data-slot": "checkbox-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(Checkbox, {
+			ref,
 			id,
 			disabled,
 			"aria-labelledby": `${id}-title`,
 			"aria-describedby": description ? `${id}-description` : void 0,
-			className: cn("mt-0.5 outline-hidden! focus-visible:ring-0 focus-visible:outline-none", className),
+			className: cn("mt-0.5 focus-visible:outline-none", noOutlineClasses, className),
 			...props
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "grid min-w-0 gap-0.5",
@@ -36,18 +37,19 @@ function CheckboxCard({ title, description, id: idProp, disabled, className, car
 			})]
 		})]
 	});
-}
+});
 /** A fieldset of CheckboxCards with a visible legend. `disabled` disables every card. */
-function CheckboxCardGroup({ label, description, className, children, ...props }) {
+var CheckboxCardGroup = React.forwardRef(function CheckboxCardGroup({ label, description, className, children, ...props }, ref) {
 	const id = React.useId();
 	return /* @__PURE__ */ jsxs("fieldset", {
+		ref,
 		"data-slot": "checkbox-card-group",
 		"aria-describedby": description ? `${id}-description` : void 0,
 		className: cn("grid min-w-0 gap-2", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("legend", {
-				className: "mb-1.5 text-sm font-medium",
+				className: "mb-1.5 text-sm font-semibold",
 				children: label
 			}),
 			description && /* @__PURE__ */ jsx("p", {
@@ -58,7 +60,7 @@ function CheckboxCardGroup({ label, description, className, children, ...props }
 			children
 		]
 	});
-}
+});
 //#endregion
 export { CheckboxCard, CheckboxCardGroup };
 

package/dist/components/checkbox-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-card.js","names":[],"sources":["../../src/components/checkbox-card.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as CheckboxPrimitive from '../primitives/vendor/radix/react-checkbox';\n\nimport { Checkbox } from './checkbox';\n\nexport interface CheckboxCardProps extends Omit<\n  React.ComponentProps<typeof CheckboxPrimitive.Root>,\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 checkbox. */\n  cardClassName?: string;\n}\n\n/**\n * A checkbox with a title and a sentence, where the whole card is the hit\n * area (44px or taller). For choices that need explaining: roles,\n * permissions, notification types. One focus ring, on the card.\n */\nfunction CheckboxCard({\n  title,\n  description,\n  id: idProp,\n  disabled,\n  className,\n  cardClassName,\n  ...props\n}: CheckboxCardProps) {\n  const auto = React.useId();\n  const id = idProp ?? auto;\n  return (\n    <label\n      htmlFor={id}\n      data-slot=\"checkbox-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        // :disabled also catches a disabled fieldset around the card.\n        'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60 has-[:disabled]:hover:border-border',\n        cardClassName,\n      )}\n    >\n      <Checkbox\n        id={id}\n        disabled={disabled}\n        aria-labelledby={`${id}-title`}\n        aria-describedby={description ? `${id}-description` : undefined}\n        className={cn(\n          'mt-0.5 outline-hidden! focus-visible:ring-0 focus-visible:outline-none',\n          className,\n        )}\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 interface CheckboxCardGroupProps extends React.ComponentProps<'fieldset'> {\n  /** The group's name, shown as its legend. */\n  label: React.ReactNode;\n  /** Help under the legend. */\n  description?: React.ReactNode;\n}\n\n/** A fieldset of CheckboxCards with a visible legend. `disabled` disables every card. */\nfunction CheckboxCardGroup({\n  label,\n  description,\n  className,\n  children,\n  ...props\n}: CheckboxCardGroupProps) {\n  const id = React.useId();\n  return (\n    <fieldset\n      data-slot=\"checkbox-card-group\"\n      aria-describedby={description ? `${id}-description` : undefined}\n      className={cn('grid min-w-0 gap-2', className)}\n      {...props}\n    >\n      <legend className=\"mb-1.5 text-sm font-medium\">{label}</legend>\n      {description && (\n        <p id={`${id}-description`} className=\"-mt-1.5 text-[13px] text-muted-foreground\">\n          {description}\n        </p>\n      )}\n      {children}\n    </fieldset>\n  );\n}\n\nexport { CheckboxCard, CheckboxCardGroup };\n"],"mappings":";;;;;;;;;;;AAwBA,SAAS,aAAa,EACpB,OACA,aACA,IAAI,QACJ,UACA,WACA,eACA,GAAG,SACiB;CACpB,MAAM,OAAO,MAAM,MAAM;CACzB,MAAM,KAAK,UAAU;CACrB,OACE,qBAAC,SAAD;EACE,SAAS;EACT,aAAU;EACV,WAAW,GACT,sJACA,0FACA,2GAEA,qGACA,aACF;EAVF,UAAA,CAYE,oBAAC,UAAD;GACM;GACM;GACV,mBAAiB,GAAG,GAAG;GACvB,oBAAkB,cAAc,GAAG,GAAG,gBAAgB,KAAA;GACtD,WAAW,GACT,0EACA,SACF;GACA,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;;AAUA,SAAS,kBAAkB,EACzB,OACA,aACA,WACA,UACA,GAAG,SACsB;CACzB,MAAM,KAAK,MAAM,MAAM;CACvB,OACE,qBAAC,YAAD;EACE,aAAU;EACV,oBAAkB,cAAc,GAAG,GAAG,gBAAgB,KAAA;EACtD,WAAW,GAAG,sBAAsB,SAAS;EAC7C,GAAI;EAJN,UAAA;GAME,oBAAC,UAAD;IAAQ,WAAU;IAA8B,UAAA;GAAc,CAAA;GAC7D,eACC,oBAAC,KAAD;IAAG,IAAI,GAAG,GAAG;IAAe,WAAU;IACnC,UAAA;GACA,CAAA;GAEJ;EACO;;AAEd"}
+{"version":3,"file":"checkbox-card.js","names":[],"sources":["../../src/components/checkbox-card.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn, noOutlineClasses } from '../lib/utils';\nimport * as CheckboxPrimitive from '../primitives/vendor/radix/react-checkbox';\n\nimport { Checkbox } from './checkbox';\n\nexport interface CheckboxCardProps extends Omit<\n  React.ComponentProps<typeof CheckboxPrimitive.Root>,\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 checkbox. */\n  cardClassName?: string;\n}\n\n/**\n * A checkbox with a title and a sentence, where the whole card is the hit\n * area (44px or taller). For choices that need explaining: roles,\n * permissions, notification types. One focus ring, on the card.\n */\nconst CheckboxCard = React.forwardRef<HTMLButtonElement, CheckboxCardProps>(function CheckboxCard(\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=\"checkbox-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        // :disabled also catches a disabled fieldset around the card.\n        'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60 has-[:disabled]:hover:border-border',\n        cardClassName,\n      )}\n    >\n      <Checkbox\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 box 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 interface CheckboxCardGroupProps extends React.ComponentProps<'fieldset'> {\n  /** The group's name, shown as its legend. */\n  label: React.ReactNode;\n  /** Help under the legend. */\n  description?: React.ReactNode;\n}\n\n/** A fieldset of CheckboxCards with a visible legend. `disabled` disables every card. */\nconst CheckboxCardGroup = React.forwardRef<HTMLFieldSetElement, CheckboxCardGroupProps>(\n  function CheckboxCardGroup({ label, description, className, children, ...props }, ref) {\n    const id = React.useId();\n    return (\n      <fieldset\n        ref={ref}\n        data-slot=\"checkbox-card-group\"\n        aria-describedby={description ? `${id}-description` : undefined}\n        className={cn('grid min-w-0 gap-2', className)}\n        {...props}\n      >\n        <legend className=\"mb-1.5 text-sm font-semibold\">{label}</legend>\n        {description && (\n          <p id={`${id}-description`} className=\"-mt-1.5 text-[13px] text-muted-foreground\">\n            {description}\n          </p>\n        )}\n        {children}\n      </fieldset>\n    );\n  },\n);\n\nexport { CheckboxCard, CheckboxCardGroup };\n"],"mappings":";;;;;;;;;;;AAwBA,IAAM,eAAe,MAAM,WAAiD,SAAS,aACnF,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,2GAEA,qGACA,aACF;EAVF,UAAA,CAYE,oBAAC,UAAD;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;;AAUD,IAAM,oBAAoB,MAAM,WAC9B,SAAS,kBAAkB,EAAE,OAAO,aAAa,WAAW,UAAU,GAAG,SAAS,KAAK;CACrF,MAAM,KAAK,MAAM,MAAM;CACvB,OACE,qBAAC,YAAD;EACO;EACL,aAAU;EACV,oBAAkB,cAAc,GAAG,GAAG,gBAAgB,KAAA;EACtD,WAAW,GAAG,sBAAsB,SAAS;EAC7C,GAAI;EALN,UAAA;GAOE,oBAAC,UAAD;IAAQ,WAAU;IAAgC,UAAA;GAAc,CAAA;GAC/D,eACC,oBAAC,KAAD;IAAG,IAAI,GAAG,GAAG;IAAe,WAAU;IACnC,UAAA;GACA,CAAA;GAEJ;EACO;;AAEd,CACF"}

package/dist/components/checkbox.d.ts

@@ -1,4 +1,25 @@
 import * as React from 'react';
 import * as CheckboxPrimitive from '../primitives/vendor/radix/react-checkbox';
-declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;
-export { Checkbox };
+/**
+ * A 16px box with a 44px hit area on touch screens. Its unchecked border is
+ * the field border tone (`input`, 3:1 on the page in both modes); checked it
+ * fills with primary in light mode and with brand (the ring colour, 4.5:1 on
+ * the page, where primary reaches 2.8:1) in dark mode. Focus is the shared
+ * 2px outline. Wrap it in a Label, or use CheckboxRow or CheckboxCard.
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface CheckboxRowProps extends Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'children'> {
+    /** The option's name. */
+    label: React.ReactNode;
+    /** A line under the name. */
+    description?: React.ReactNode;
+    /** Extra classes for the row (the label); className goes to the checkbox. */
+    rowClassName?: string;
+}
+/**
+ * A checkbox with its label to the right and an optional line under it, the
+ * whole row clickable. For a bordered option with a sentence of explanation
+ * use CheckboxCard.
+ */
+declare const CheckboxRow: React.ForwardRefExoticComponent<Omit<CheckboxRowProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox, CheckboxRow };

package/dist/components/checkbox.js

@@ -1,15 +1,23 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses, touchTargetClasses } from "../lib/utils.js";
 import { Checkbox as Checkbox$1, CheckboxIndicator } from "../primitives/vendor/radix/react-checkbox/checkbox.js";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Check from "@burtson-labs/icons/react/check";
 import Minus from "@burtson-labs/icons/react/minus";
 //#region src/components/checkbox.tsx
-function Checkbox({ className, ...props }) {
+/**
+* A 16px box with a 44px hit area on touch screens. Its unchecked border is
+* the field border tone (`input`, 3:1 on the page in both modes); checked it
+* fills with primary in light mode and with brand (the ring colour, 4.5:1 on
+* the page, where primary reaches 2.8:1) in dark mode. Focus is the shared
+* 2px outline. Wrap it in a Label, or use CheckboxRow or CheckboxCard.
+*/
+var Checkbox = React.forwardRef(function Checkbox({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Checkbox$1, {
+		ref,
 		"data-slot": "checkbox",
-		className: cn("peer size-4 shrink-0 rounded-xs border border-border-strong bg-surface 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className),
+		className: cn("peer size-4 shrink-0 rounded-xs border border-input bg-surface shadow-xs transition-[border-color,box-shadow,background-color] hover:border-brand/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:data-[state=checked]:border-brand dark:data-[state=checked]:bg-brand dark:data-[state=checked]:text-background dark:data-[state=indeterminate]:border-brand dark:data-[state=indeterminate]:bg-brand dark:data-[state=indeterminate]:text-background", focusRingClasses, touchTargetClasses, className),
 		...props,
 		children: /* @__PURE__ */ jsxs(CheckboxIndicator, {
 			"data-slot": "checkbox-indicator",
@@ -25,8 +33,42 @@ function Checkbox({ className, ...props }) {
 			})]
 		})
 	});
-}
+});
+/**
+* A checkbox with its label to the right and an optional line under it, the
+* whole row clickable. For a bordered option with a sentence of explanation
+* use CheckboxCard.
+*/
+var CheckboxRow = React.forwardRef(function CheckboxRow({ label, description, id: idProp, className, rowClassName, disabled, ...props }, ref) {
+	const auto = React.useId();
+	const id = idProp ?? auto;
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		"data-slot": "checkbox-row",
+		className: cn("flex min-h-5 cursor-pointer items-start gap-2.5 text-sm leading-5 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60", rowClassName),
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			ref,
+			id,
+			disabled,
+			"aria-labelledby": `${id}-label`,
+			"aria-describedby": description ? `${id}-description` : void 0,
+			className: cn("mt-0.5", className),
+			...props
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "grid min-w-0 gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				id: `${id}-label`,
+				className: "font-medium",
+				children: label
+			}), description && /* @__PURE__ */ jsx("span", {
+				id: `${id}-description`,
+				className: "text-xs leading-4 text-muted-foreground",
+				children: description
+			})]
+		})]
+	});
+});
 //#endregion
-export { Checkbox };
+export { Checkbox, CheckboxRow };
 
 //# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["CheckboxPrimitive.Root","CheckboxPrimitive.Indicator"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport Minus from '@burtson-labs/icons/react/minus';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as CheckboxPrimitive from '../primitives/vendor/radix/react-checkbox';\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer size-4 shrink-0 rounded-xs border border-border-strong bg-surface 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"group/indicator grid place-content-center text-current\"\n      >\n        <Check\n          className=\"size-3.5 group-data-[state=indeterminate]/indicator:hidden\"\n          strokeWidth={2.5}\n          aria-hidden\n        />\n        <Minus\n          className=\"hidden size-3.5 group-data-[state=indeterminate]/indicator:block\"\n          strokeWidth={2.5}\n          aria-hidden\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;;;AAOA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA8D;CAC9F,OACE,oBAACA,YAAD;EACE,aAAU;EACV,WAAW,GACT,iZACA,SACF;EACA,GAAI;EAEJ,UAAA,qBAACC,mBAAD;GACE,aAAU;GACV,WAAU;GAFZ,UAAA,CAIE,oBAAC,OAAD;IACE,WAAU;IACV,aAAa;IACb,eAAA;GACD,CAAA,GACD,oBAAC,OAAD;IACE,WAAU;IACV,aAAa;IACb,eAAA;GACD,CAAA,CAC0B;;CACP,CAAA;AAE5B"}
+{"version":3,"file":"checkbox.js","names":["CheckboxPrimitive.Root","CheckboxPrimitive.Indicator"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport Minus from '@burtson-labs/icons/react/minus';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses, touchTargetClasses } from '../lib/utils';\nimport * as CheckboxPrimitive from '../primitives/vendor/radix/react-checkbox';\n\n/**\n * A 16px box with a 44px hit area on touch screens. Its unchecked border is\n * the field border tone (`input`, 3:1 on the page in both modes); checked it\n * fills with primary in light mode and with brand (the ring colour, 4.5:1 on\n * the page, where primary reaches 2.8:1) in dark mode. Focus is the shared\n * 2px outline. Wrap it in a Label, or use CheckboxRow or CheckboxCard.\n */\nconst Checkbox = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof CheckboxPrimitive.Root>\n>(function Checkbox({ className, ...props }, ref) {\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer size-4 shrink-0 rounded-xs border border-input bg-surface shadow-xs transition-[border-color,box-shadow,background-color] hover:border-brand/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:data-[state=checked]:border-brand dark:data-[state=checked]:bg-brand dark:data-[state=checked]:text-background dark:data-[state=indeterminate]:border-brand dark:data-[state=indeterminate]:bg-brand dark:data-[state=indeterminate]:text-background',\n        focusRingClasses,\n        touchTargetClasses,\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"group/indicator grid place-content-center text-current\"\n      >\n        <Check\n          className=\"size-3.5 group-data-[state=indeterminate]/indicator:hidden\"\n          strokeWidth={2.5}\n          aria-hidden\n        />\n        <Minus\n          className=\"hidden size-3.5 group-data-[state=indeterminate]/indicator:block\"\n          strokeWidth={2.5}\n          aria-hidden\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n});\n\nexport interface CheckboxRowProps extends Omit<\n  React.ComponentProps<typeof CheckboxPrimitive.Root>,\n  'children'\n> {\n  /** The option's name. */\n  label: React.ReactNode;\n  /** A line under the name. */\n  description?: React.ReactNode;\n  /** Extra classes for the row (the label); className goes to the checkbox. */\n  rowClassName?: string;\n}\n\n/**\n * A checkbox with its label to the right and an optional line under it, the\n * whole row clickable. For a bordered option with a sentence of explanation\n * use CheckboxCard.\n */\nconst CheckboxRow = React.forwardRef<HTMLButtonElement, CheckboxRowProps>(function CheckboxRow(\n  { label, description, id: idProp, className, rowClassName, disabled, ...props },\n  ref,\n) {\n  const auto = React.useId();\n  const id = idProp ?? auto;\n  return (\n    <label\n      htmlFor={id}\n      data-slot=\"checkbox-row\"\n      className={cn(\n        'flex min-h-5 cursor-pointer items-start gap-2.5 text-sm leading-5 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60',\n        rowClassName,\n      )}\n    >\n      <Checkbox\n        ref={ref}\n        id={id}\n        disabled={disabled}\n        aria-labelledby={`${id}-label`}\n        aria-describedby={description ? `${id}-description` : undefined}\n        className={cn('mt-0.5', className)}\n        {...props}\n      />\n      <span className=\"grid min-w-0 gap-0.5\">\n        <span id={`${id}-label`} className=\"font-medium\">\n          {label}\n        </span>\n        {description && (\n          <span id={`${id}-description`} className=\"text-xs leading-4 text-muted-foreground\">\n            {description}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n});\n\nexport { Checkbox, CheckboxRow };\n"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAM,WAAW,MAAM,WAGrB,SAAS,SAAS,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,oBAACA,YAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,stBACA,kBACA,oBACA,SACF;EACA,GAAI;EAEJ,UAAA,qBAACC,mBAAD;GACE,aAAU;GACV,WAAU;GAFZ,UAAA,CAIE,oBAAC,OAAD;IACE,WAAU;IACV,aAAa;IACb,eAAA;GACD,CAAA,GACD,oBAAC,OAAD;IACE,WAAU;IACV,aAAa;IACb,eAAA;GACD,CAAA,CAC0B;;CACP,CAAA;AAE5B,CAAC;;;;;;AAmBD,IAAM,cAAc,MAAM,WAAgD,SAAS,YACjF,EAAE,OAAO,aAAa,IAAI,QAAQ,WAAW,cAAc,UAAU,GAAG,SACxE,KACA;CACA,MAAM,OAAO,MAAM,MAAM;CACzB,MAAM,KAAK,UAAU;CACrB,OACE,qBAAC,SAAD;EACE,SAAS;EACT,aAAU;EACV,WAAW,GACT,mIACA,YACF;EANF,UAAA,CAQE,oBAAC,UAAD;GACO;GACD;GACM;GACV,mBAAiB,GAAG,GAAG;GACvB,oBAAkB,cAAc,GAAG,GAAG,gBAAgB,KAAA;GACtD,WAAW,GAAG,UAAU,SAAS;GACjC,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/collapsible.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as CollapsiblePrimitive from '../primitives/vendor/radix/react-collapsible';
 declare function Collapsible(props: React.ComponentProps<typeof CollapsiblePrimitive.Root>): React.JSX.Element;
-declare function CollapsibleTrigger(props: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>): React.JSX.Element;
-declare function CollapsibleContent({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Content>): React.JSX.Element;
+declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/collapsible.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { Content, Root, Trigger } from "../primitives/vendor/radix/react-collapsible/collapsible.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/collapsible.tsx
 function Collapsible(props) {
@@ -10,19 +10,21 @@ function Collapsible(props) {
 		...props
 	});
 }
-function CollapsibleTrigger(props) {
+var CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger(props, ref) {
 	return /* @__PURE__ */ jsx(Trigger, {
+		ref,
 		"data-slot": "collapsible-trigger",
 		...props
 	});
-}
-function CollapsibleContent({ className, ...props }) {
+});
+var CollapsibleContent = React.forwardRef(function CollapsibleContent({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Content, {
+		ref,
 		"data-slot": "collapsible-content",
 		className: cn("overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Collapsible, CollapsibleContent, CollapsibleTrigger };
 

package/dist/components/collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.js","names":["CollapsiblePrimitive.Root","CollapsiblePrimitive.Trigger","CollapsiblePrimitive.Content"],"sources":["../../src/components/collapsible.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as CollapsiblePrimitive from '../primitives/vendor/radix/react-collapsible';\n\nfunction Collapsible(props: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nfunction CollapsibleTrigger(props: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {\n  return <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />;\n}\n\nfunction CollapsibleContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {\n  return (\n    <CollapsiblePrimitive.Content\n      data-slot=\"collapsible-content\"\n      className={cn(\n        'overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Collapsible, CollapsibleContent, CollapsibleTrigger };\n"],"mappings":";;;;;;AAKA,SAAS,YAAY,OAA+D;CAClF,OAAO,oBAACA,MAAD;EAA2B,aAAU;EAAc,GAAI;CAAQ,CAAA;AACxE;AAEA,SAAS,mBAAmB,OAAkE;CAC5F,OAAO,oBAACC,SAAD;EAA8B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AACnF;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACC,SAAD;EACE,aAAU;EACV,WAAW,GACT,yGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"collapsible.js","names":["CollapsiblePrimitive.Root","CollapsiblePrimitive.Trigger","CollapsiblePrimitive.Content"],"sources":["../../src/components/collapsible.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as CollapsiblePrimitive from '../primitives/vendor/radix/react-collapsible';\n\nfunction Collapsible(props: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nconst CollapsibleTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof CollapsiblePrimitive.Trigger>\n>(function CollapsibleTrigger(props, ref) {\n  return <CollapsiblePrimitive.Trigger ref={ref} data-slot=\"collapsible-trigger\" {...props} />;\n});\n\nconst CollapsibleContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CollapsiblePrimitive.Content>\n>(function CollapsibleContent({ className, ...props }, ref) {\n  return (\n    <CollapsiblePrimitive.Content\n      ref={ref}\n      data-slot=\"collapsible-content\"\n      className={cn(\n        'overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport { Collapsible, CollapsibleContent, CollapsibleTrigger };\n"],"mappings":";;;;;;AAKA,SAAS,YAAY,OAA+D;CAClF,OAAO,oBAACA,MAAD;EAA2B,aAAU;EAAc,GAAI;CAAQ,CAAA;AACxE;AAEA,IAAM,qBAAqB,MAAM,WAG/B,SAAS,mBAAmB,OAAO,KAAK;CACxC,OAAO,oBAACC,SAAD;EAAmC;EAAK,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAC7F,CAAC;AAED,IAAM,qBAAqB,MAAM,WAG/B,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC1D,OACE,oBAACC,SAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,yGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/combobox.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type FieldWidth } from './input';
 export interface ComboboxOption {
     value: string;
     label: string;
@@ -8,8 +9,11 @@ export interface ComboboxOption {
 }
 export interface ComboboxProps {
     options: ComboboxOption[];
-    value: string | null;
-    onValueChange: (value: string | null) => void;
+    /** Controlled: the chosen value, or null. Leave out for an uncontrolled combobox. */
+    value?: string | null;
+    /** The starting value when uncontrolled. */
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
     placeholder?: string;
     searchPlaceholder?: string;
     emptyText?: string;
@@ -23,15 +27,21 @@ export interface ComboboxProps {
     onSearchChange?: (search: string) => void;
     /** Let the person clear the selection by picking it again. */
     clearable?: boolean;
+    /** How wide the trigger is from 640px up; full width on phones. */
+    width?: FieldWidth;
     id?: string;
     className?: string;
     'aria-invalid'?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-describedby'?: string;
+    'aria-required'?: boolean;
     name?: string;
     required?: boolean;
 }
-/** Pick one value from a long or remote list by typing. */
-declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, loading, onSearchChange, clearable, id, className, name, required, ...aria }: ComboboxProps): React.JSX.Element;
+/**
+ * Pick one value from a long or remote list by typing. The ref reaches the
+ * trigger button, so a form library or an ErrorSummary can focus it.
+ */
+declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLButtonElement>>;
 export { Combobox };

package/dist/components/combobox.js

@@ -2,16 +2,25 @@
 import { cn } from "../lib/utils.js";
 import { Spinner } from "./spinner.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
-import { fieldClasses } from "./input.js";
+import { fieldClasses, fieldWidthClasses } from "./input.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Check from "@burtson-labs/icons/react/check";
 import ChevronsUpDown from "@burtson-labs/icons/react/chevrons-up-down";
 //#region src/components/combobox.tsx
-/** Pick one value from a long or remote list by typing. */
-function Combobox({ options, value, onValueChange, placeholder = "Select…", searchPlaceholder = "Search…", emptyText = "No matches.", disabled, loading, onSearchChange, clearable = true, id, className, name, required, ...aria }) {
+/**
+* Pick one value from a long or remote list by typing. The ref reaches the
+* trigger button, so a form library or an ErrorSummary can focus it.
+*/
+var Combobox = React.forwardRef(function Combobox({ options, value: valueProp, defaultValue = null, onValueChange, placeholder = "Select…", searchPlaceholder = "Search…", emptyText = "No matches.", disabled, loading, onSearchChange, clearable = true, width, id, className, name, required, ...aria }, ref) {
 	const [open, setOpen] = React.useState(false);
+	const [own, setOwn] = React.useState(defaultValue);
+	const value = valueProp === void 0 ? own : valueProp;
+	const setValue = (next) => {
+		if (valueProp === void 0) setOwn(next);
+		onValueChange?.(next);
+	};
 	const listId = React.useId();
 	const selected = options.find((o) => o.value === value);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [name && /* @__PURE__ */ jsx("input", {
@@ -25,9 +34,10 @@ function Combobox({ options, value, onValueChange, placeholder = "Select…", se
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs("button", {
+				ref,
 				type: "button",
 				role: "combobox",
-				"aria-required": required || void 0,
+				"aria-required": aria["aria-required"] ?? (required || void 0),
 				onKeyDown: (event) => {
 					if (event.key === "ArrowDown" || event.key === "ArrowUp") {
 						event.preventDefault();
@@ -45,12 +55,12 @@ function Combobox({ options, value, onValueChange, placeholder = "Select…", se
 				"aria-invalid": aria["aria-invalid"],
 				disabled,
 				"data-slot": "combobox-trigger",
-				className: cn(fieldClasses, "flex h-9 items-center justify-between gap-2 text-left", !selected && "text-muted-foreground", className),
+				className: cn(fieldClasses, "flex h-9 items-center justify-between gap-2 text-left", !selected && "text-muted-foreground", width && fieldWidthClasses[width], className),
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "truncate",
 					children: selected?.label ?? value ?? placeholder
 				}), /* @__PURE__ */ jsx(ChevronsUpDown, {
-					className: "size-4 shrink-0 opacity-60",
+					className: "size-4 shrink-0 text-muted-foreground",
 					"aria-hidden": true
 				})]
 			})
@@ -72,7 +82,7 @@ function Combobox({ options, value, onValueChange, placeholder = "Select…", se
 					value: `${o.label} ${o.description ?? ""} ${o.value}`,
 					disabled: o.disabled,
 					onSelect: () => {
-						onValueChange(clearable && o.value === value ? null : o.value);
+						setValue(clearable && o.value === value ? null : o.value);
 						setOpen(false);
 					},
 					children: [/* @__PURE__ */ jsxs("span", {
@@ -92,7 +102,7 @@ function Combobox({ options, value, onValueChange, placeholder = "Select…", se
 			})
 		})]
 	})] });
-}
+});
 //#endregion
 export { Combobox };
 

package/dist/components/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":["_Fragment"],"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronsUpDown from '@burtson-labs/icons/react/chevrons-up-down';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from './command';\nimport { fieldClasses } from './input';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { Spinner } from './spinner';\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  /** Second line, e.g. an email under a name. Also searched. */\n  description?: string;\n  disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n  options: ComboboxOption[];\n  value: string | null;\n  onValueChange: (value: string | null) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  disabled?: boolean;\n  /** Show a spinner in the list, e.g. while `onSearchChange` fetches. */\n  loading?: boolean;\n  /**\n   * Called as the person types. Pass it to search on a server; the options\n   * you pass back are shown as-is (no client filtering).\n   */\n  onSearchChange?: (search: string) => void;\n  /** Let the person clear the selection by picking it again. */\n  clearable?: boolean;\n  id?: string;\n  className?: string;\n  'aria-invalid'?: boolean;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  name?: string;\n  required?: boolean;\n}\n\n/** Pick one value from a long or remote list by typing. */\nfunction Combobox({\n  options,\n  value,\n  onValueChange,\n  placeholder = 'Select…',\n  searchPlaceholder = 'Search…',\n  emptyText = 'No matches.',\n  disabled,\n  loading,\n  onSearchChange,\n  clearable = true,\n  id,\n  className,\n  name,\n  required,\n  ...aria\n}: ComboboxProps) {\n  const [open, setOpen] = React.useState(false);\n  const listId = React.useId();\n  const selected = options.find((o) => o.value === value);\n  return (\n    <>\n      {name && <input type=\"hidden\" name={name} value={value ?? ''} disabled={disabled} />}\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <button\n            type=\"button\"\n            role=\"combobox\"\n            aria-required={required || undefined}\n            onKeyDown={(event) => {\n              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                event.preventDefault();\n                setOpen(true);\n              }\n            }}\n            id={id}\n            aria-expanded={open}\n            aria-haspopup=\"dialog\"\n            aria-controls={open ? listId : undefined}\n            aria-label={\n              aria['aria-label'] ?? (aria['aria-labelledby'] || id ? undefined : placeholder)\n            }\n            aria-labelledby={aria['aria-labelledby']}\n            aria-describedby={aria['aria-describedby']}\n            data-required={required || undefined}\n            aria-invalid={aria['aria-invalid']}\n            disabled={disabled}\n            data-slot=\"combobox-trigger\"\n            className={cn(\n              fieldClasses,\n              'flex h-9 items-center justify-between gap-2 text-left',\n              !selected && 'text-muted-foreground',\n              className,\n            )}\n          >\n            <span className=\"truncate\">{selected?.label ?? value ?? placeholder}</span>\n            <ChevronsUpDown className=\"size-4 shrink-0 opacity-60\" aria-hidden />\n          </button>\n        </PopoverTrigger>\n        <PopoverContent\n          id={listId}\n          aria-label={aria['aria-label'] ?? placeholder}\n          className=\"w-(--radix-popover-trigger-width) min-w-64 p-0\"\n          align=\"start\"\n        >\n          <Command shouldFilter={!onSearchChange}>\n            <CommandInput\n              aria-label={searchPlaceholder}\n              placeholder={searchPlaceholder}\n              onValueChange={onSearchChange}\n            />\n            <CommandList>\n              {loading ? (\n                <div className=\"flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground\">\n                  <Spinner /> Searching…\n                </div>\n              ) : (\n                <CommandEmpty>{emptyText}</CommandEmpty>\n              )}\n              {!loading && (\n                <CommandGroup>\n                  {options.map((o) => (\n                    <CommandItem\n                      key={o.value}\n                      value={`${o.label} ${o.description ?? ''} ${o.value}`}\n                      disabled={o.disabled}\n                      onSelect={() => {\n                        onValueChange(clearable && o.value === value ? null : o.value);\n                        setOpen(false);\n                      }}\n                    >\n                      <span className=\"grid min-w-0 flex-1\">\n                        <span className=\"truncate\">{o.label}</span>\n                        {o.description && (\n                          <span className=\"truncate text-xs text-muted-foreground\">\n                            {o.description}\n                          </span>\n                        )}\n                      </span>\n                      <Check\n                        aria-hidden\n                        className={cn(\n                          'ml-auto size-4 text-brand',\n                          o.value === value ? 'opacity-100' : 'opacity-0',\n                        )}\n                      />\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </>\n  );\n}\n\nexport { Combobox };\n"],"mappings":";;;;;;;;;;;;AAsDA,SAAS,SAAS,EAChB,SACA,OACA,eACA,cAAc,WACd,oBAAoB,WACpB,YAAY,eACZ,UACA,SACA,gBACA,YAAY,MACZ,IACA,WACA,MACA,UACA,GAAG,QACa;CAChB,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,KAAK;CAC5C,MAAM,SAAS,MAAM,MAAM;CAC3B,MAAM,WAAW,QAAQ,MAAM,MAAM,EAAE,UAAU,KAAK;CACtD,OACE,qBAAAA,UAAA,EAAA,UAAA,CACG,QAAQ,oBAAC,SAAD;EAAO,MAAK;EAAe;EAAM,OAAO,SAAS;EAAc;CAAW,CAAA,GACnF,qBAAC,SAAD;EAAe;EAAM,cAAc;EAAnC,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,qBAAC,UAAD;IACE,MAAK;IACL,MAAK;IACL,iBAAe,YAAY,KAAA;IAC3B,YAAY,UAAU;KACpB,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;MACxD,MAAM,eAAe;MACrB,QAAQ,IAAI;KACd;IACF;IACI;IACJ,iBAAe;IACf,iBAAc;IACd,iBAAe,OAAO,SAAS,KAAA;IAC/B,cACE,KAAK,kBAAkB,KAAK,sBAAsB,KAAK,KAAA,IAAY;IAErE,mBAAiB,KAAK;IACtB,oBAAkB,KAAK;IACvB,iBAAe,YAAY,KAAA;IAC3B,gBAAc,KAAK;IACT;IACV,aAAU;IACV,WAAW,GACT,cACA,yDACA,CAAC,YAAY,yBACb,SACF;IA5BF,UAAA,CA8BE,oBAAC,QAAD;KAAM,WAAU;KAAY,UAAA,UAAU,SAAS,SAAS;IAAkB,CAAA,GAC1E,oBAAC,gBAAD;KAAgB,WAAU;KAA6B,eAAA;IAAa,CAAA,CAC9D;;EACM,CAAA,GAChB,oBAAC,gBAAD;GACE,IAAI;GACJ,cAAY,KAAK,iBAAiB;GAClC,WAAU;GACV,OAAM;GAEN,UAAA,qBAAC,SAAD;IAAS,cAAc,CAAC;IAAxB,UAAA,CACE,oBAAC,cAAD;KACE,cAAY;KACZ,aAAa;KACb,eAAe;IAChB,CAAA,GACD,qBAAC,aAAD,EAAA,UAAA,CACG,UACC,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,SAAD,CAAU,CAAA,GAAC,aACR;IAEL,CAAA,IAAA,oBAAC,cAAD,EAAA,UAAe,UAAwB,CAAA,GAExC,CAAC,WACA,oBAAC,cAAD,EAAA,UACG,QAAQ,KAAK,MACZ,qBAAC,aAAD;KAEE,OAAO,GAAG,EAAE,MAAM,GAAG,EAAE,eAAe,GAAG,GAAG,EAAE;KAC9C,UAAU,EAAE;KACZ,gBAAgB;MACd,cAAc,aAAa,EAAE,UAAU,QAAQ,OAAO,EAAE,KAAK;MAC7D,QAAQ,KAAK;KACf;KAPF,UAAA,CASE,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACE,oBAAC,QAAD;OAAM,WAAU;OAAY,UAAA,EAAE;MAAY,CAAA,GACzC,EAAE,eACD,oBAAC,QAAD;OAAM,WAAU;OACb,UAAA,EAAE;MACC,CAAA,CAEJ;KACN,CAAA,GAAA,oBAAC,OAAD;MACE,eAAA;MACA,WAAW,GACT,6BACA,EAAE,UAAU,QAAQ,gBAAgB,WACtC;KACD,CAAA,CACU;IAvBN,GAAA,EAAE,KAuBI,CACd,EACW,CAAA,CAEL,EAAA,CAAA,CACN;;EACK,CAAA,CACT;CACT,CAAA,CAAA,EAAA,CAAA;AAEN"}
+{"version":3,"file":"combobox.js","names":["_Fragment"],"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronsUpDown from '@burtson-labs/icons/react/chevrons-up-down';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from './command';\nimport { fieldClasses, type FieldWidth, fieldWidthClasses } from './input';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { Spinner } from './spinner';\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  /** Second line, e.g. an email under a name. Also searched. */\n  description?: string;\n  disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n  options: ComboboxOption[];\n  /** Controlled: the chosen value, or null. Leave out for an uncontrolled combobox. */\n  value?: string | null;\n  /** The starting value when uncontrolled. */\n  defaultValue?: string | null;\n  onValueChange?: (value: string | null) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  disabled?: boolean;\n  /** Show a spinner in the list, e.g. while `onSearchChange` fetches. */\n  loading?: boolean;\n  /**\n   * Called as the person types. Pass it to search on a server; the options\n   * you pass back are shown as-is (no client filtering).\n   */\n  onSearchChange?: (search: string) => void;\n  /** Let the person clear the selection by picking it again. */\n  clearable?: boolean;\n  /** How wide the trigger is from 640px up; full width on phones. */\n  width?: FieldWidth;\n  id?: string;\n  className?: string;\n  'aria-invalid'?: boolean;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  'aria-required'?: boolean;\n  name?: string;\n  required?: boolean;\n}\n\n/**\n * Pick one value from a long or remote list by typing. The ref reaches the\n * trigger button, so a form library or an ErrorSummary can focus it.\n */\nconst Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(function Combobox(\n  {\n    options,\n    value: valueProp,\n    defaultValue = null,\n    onValueChange,\n    placeholder = 'Select…',\n    searchPlaceholder = 'Search…',\n    emptyText = 'No matches.',\n    disabled,\n    loading,\n    onSearchChange,\n    clearable = true,\n    width,\n    id,\n    className,\n    name,\n    required,\n    ...aria\n  },\n  ref,\n) {\n  const [open, setOpen] = React.useState(false);\n  const [own, setOwn] = React.useState<string | null>(defaultValue);\n  const value = valueProp === undefined ? own : valueProp;\n  const setValue = (next: string | null) => {\n    if (valueProp === undefined) setOwn(next);\n    onValueChange?.(next);\n  };\n  const listId = React.useId();\n  const selected = options.find((o) => o.value === value);\n  return (\n    <>\n      {name && <input type=\"hidden\" name={name} value={value ?? ''} disabled={disabled} />}\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <button\n            ref={ref}\n            type=\"button\"\n            role=\"combobox\"\n            aria-required={aria['aria-required'] ?? (required || undefined)}\n            onKeyDown={(event) => {\n              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                event.preventDefault();\n                setOpen(true);\n              }\n            }}\n            id={id}\n            aria-expanded={open}\n            aria-haspopup=\"dialog\"\n            aria-controls={open ? listId : undefined}\n            aria-label={\n              aria['aria-label'] ?? (aria['aria-labelledby'] || id ? undefined : placeholder)\n            }\n            aria-labelledby={aria['aria-labelledby']}\n            aria-describedby={aria['aria-describedby']}\n            data-required={required || undefined}\n            aria-invalid={aria['aria-invalid']}\n            disabled={disabled}\n            data-slot=\"combobox-trigger\"\n            className={cn(\n              fieldClasses,\n              'flex h-9 items-center justify-between gap-2 text-left',\n              !selected && 'text-muted-foreground',\n              width && fieldWidthClasses[width],\n              className,\n            )}\n          >\n            <span className=\"truncate\">{selected?.label ?? value ?? placeholder}</span>\n            <ChevronsUpDown className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden />\n          </button>\n        </PopoverTrigger>\n        <PopoverContent\n          id={listId}\n          aria-label={aria['aria-label'] ?? placeholder}\n          className=\"w-(--radix-popover-trigger-width) min-w-64 p-0\"\n          align=\"start\"\n        >\n          <Command shouldFilter={!onSearchChange}>\n            <CommandInput\n              aria-label={searchPlaceholder}\n              placeholder={searchPlaceholder}\n              onValueChange={onSearchChange}\n            />\n            <CommandList>\n              {loading ? (\n                <div className=\"flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground\">\n                  <Spinner /> Searching…\n                </div>\n              ) : (\n                <CommandEmpty>{emptyText}</CommandEmpty>\n              )}\n              {!loading && (\n                <CommandGroup>\n                  {options.map((o) => (\n                    <CommandItem\n                      key={o.value}\n                      value={`${o.label} ${o.description ?? ''} ${o.value}`}\n                      disabled={o.disabled}\n                      onSelect={() => {\n                        setValue(clearable && o.value === value ? null : o.value);\n                        setOpen(false);\n                      }}\n                    >\n                      <span className=\"grid min-w-0 flex-1\">\n                        <span className=\"truncate\">{o.label}</span>\n                        {o.description && (\n                          <span className=\"truncate text-xs text-muted-foreground\">\n                            {o.description}\n                          </span>\n                        )}\n                      </span>\n                      <Check\n                        aria-hidden\n                        className={cn(\n                          'ml-auto size-4 text-brand',\n                          o.value === value ? 'opacity-100' : 'opacity-0',\n                        )}\n                      />\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </>\n  );\n});\n\nexport { Combobox };\n"],"mappings":"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"}