@franco_roura/module-01 0.0.0-stage → 1.0.1

package/dist/components/combobox.js

@@ -0,0 +1,100 @@
+"use client";
+import { focusNextField } from "../lib/form-flow.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useRef, useState } from "react";
+// src/components/combobox.tsx
+/**
+* Searchable single-choice picker. Part of the form flow: typing on the focused trigger opens it
+* with that text as the search, and picking an option moves focus to the next field.
+*/
+function Combobox({ id, value, onChange, options, groups, getKey, getSearchText, renderOption, renderValue, placeholder = "Choose…", searchPlaceholder = "Search…", emptyText = "Nothing found.", footer, invalid, disabled, className, contentClassName }) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const trigger = useRef(null);
+	const committed = useRef(false);
+	const sections = groups ?? [{ options: options ?? [] }];
+	const current = sections.flatMap((g) => g.options).find((o) => getKey(o) === value);
+	const search = getSearchText ?? getKey;
+	function openWith(text) {
+		setQuery(text);
+		setOpen(true);
+	}
+	function pick(option) {
+		committed.current = true;
+		onChange(getKey(option));
+		setOpen(false);
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (next) => {
+			if (next) setQuery("");
+			setOpen(next);
+		},
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				ref: trigger,
+				id,
+				type: "button",
+				variant: "outline",
+				role: "combobox",
+				"data-flow-autoopen": value ? void 0 : "",
+				"aria-expanded": open,
+				"aria-invalid": invalid || void 0,
+				disabled,
+				className: cn("w-full justify-between px-3", className),
+				onKeyDown: (e) => {
+					if (!open && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && e.key !== " ") {
+						e.preventDefault();
+						openWith(e.key);
+					}
+				},
+				children: [current ? /* @__PURE__ */ jsx("span", {
+					className: "flex min-w-0 items-center gap-2",
+					children: (renderValue ?? renderOption)(current)
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "text-ink-soft",
+					children: placeholder
+				}), /* @__PURE__ */ jsx(ChevronsUpDown, {
+					className: "size-4 shrink-0 text-ink-soft",
+					strokeWidth: 1.25
+				})]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "start",
+			className: cn("w-(--radix-popover-trigger-width) min-w-64 p-0", contentClassName),
+			onCloseAutoFocus: (e) => {
+				if (!committed.current) return;
+				committed.current = false;
+				e.preventDefault();
+				focusNextField(trigger.current);
+			},
+			children: [/* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, {
+				placeholder: searchPlaceholder,
+				value: query,
+				onValueChange: setQuery
+			}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }), sections.map((g, i) => /* @__PURE__ */ jsx(CommandGroup, {
+				heading: g.heading,
+				children: g.options.map((o) => /* @__PURE__ */ jsxs(CommandItem, {
+					value: `${search(o)} ${getKey(o)}`,
+					onSelect: () => pick(o),
+					children: [renderOption(o), getKey(o) === value && /* @__PURE__ */ jsx(Check, {
+						className: "ml-auto size-4",
+						strokeWidth: 1.25
+					})]
+				}, getKey(o)))
+			}, g.heading ?? i))] })] }), footer && /* @__PURE__ */ jsx("div", {
+				className: "border-t border-seam p-2",
+				children: footer
+			})]
+		})]
+	});
+}
+export { Combobox };
+
+//# sourceMappingURL=combobox.js.map

package/dist/components/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":[],"sources":["../../src/components/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { focusNextField } from \"../lib/form-flow\";\nimport { cn } from \"../lib/utils\";\nimport { Check, ChevronsUpDown } from \"lucide-react\";\nimport { useRef, useState } from \"react\";\nimport { Button } from \"./button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"./command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport type ComboboxGroup<T> = { heading?: string; options: T[] };\n\n/**\n * Searchable single-choice picker. Part of the form flow: typing on the focused trigger opens it\n * with that text as the search, and picking an option moves focus to the next field.\n */\nexport function Combobox<T>({\n  id,\n  value,\n  onChange,\n  options,\n  groups,\n  getKey,\n  getSearchText,\n  renderOption,\n  renderValue,\n  placeholder = \"Choose…\",\n  searchPlaceholder = \"Search…\",\n  emptyText = \"Nothing found.\",\n  footer,\n  invalid,\n  disabled,\n  className,\n  contentClassName,\n}: {\n  id?: string;\n  value: string;\n  onChange: (key: string) => void;\n  /** Flat options; or pass `groups` for headed sections. */\n  options?: T[];\n  groups?: ComboboxGroup<T>[];\n  getKey: (option: T) => string;\n  /** Text the search matches against (defaults to the key). */\n  getSearchText?: (option: T) => string;\n  renderOption: (option: T) => React.ReactNode;\n  /** The selected option on the trigger (defaults to renderOption). */\n  renderValue?: (option: T) => React.ReactNode;\n  placeholder?: React.ReactNode;\n  searchPlaceholder?: string;\n  emptyText?: React.ReactNode;\n  /** Shown under the list, e.g. a link to manage the options. */\n  footer?: React.ReactNode;\n  invalid?: boolean;\n  disabled?: boolean;\n  className?: string;\n  contentClassName?: string;\n}) {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const trigger = useRef<HTMLButtonElement>(null);\n  const committed = useRef(false);\n\n  const sections: ComboboxGroup<T>[] = groups ?? [{ options: options ?? [] }];\n  const current = sections.flatMap((g) => g.options).find((o) => getKey(o) === value);\n  const search = getSearchText ?? getKey;\n\n  function openWith(text: string) {\n    setQuery(text);\n    setOpen(true);\n  }\n\n  function pick(option: T) {\n    committed.current = true;\n    onChange(getKey(option));\n    setOpen(false);\n  }\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(next) => {\n        if (next) setQuery(\"\");\n        setOpen(next);\n      }}\n    >\n      <PopoverTrigger asChild>\n        <Button\n          ref={trigger}\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          role=\"combobox\"\n          data-flow-autoopen={value ? undefined : \"\"}\n          aria-expanded={open}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          className={cn(\"w-full justify-between px-3\", className)}\n          onKeyDown={(e) => {\n            // Type to search: a printable key on the closed trigger opens it with that letter.\n            if (\n              !open &&\n              e.key.length === 1 &&\n              !e.ctrlKey &&\n              !e.metaKey &&\n              !e.altKey &&\n              e.key !== \" \"\n            ) {\n              e.preventDefault();\n              openWith(e.key);\n            }\n          }}\n        >\n          {current ? (\n            <span className=\"flex min-w-0 items-center gap-2\">\n              {(renderValue ?? renderOption)(current)}\n            </span>\n          ) : (\n            <span className=\"text-ink-soft\">{placeholder}</span>\n          )}\n          <ChevronsUpDown className=\"size-4 shrink-0 text-ink-soft\" strokeWidth={1.25} />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className={cn(\"w-(--radix-popover-trigger-width) min-w-64 p-0\", contentClassName)}\n        onCloseAutoFocus={(e) => {\n          // Form flow: after a pick, move on to the next field (Escape returns to the trigger).\n          if (!committed.current) return;\n          committed.current = false;\n          e.preventDefault();\n          focusNextField(trigger.current);\n        }}\n      >\n        <Command>\n          <CommandInput placeholder={searchPlaceholder} value={query} onValueChange={setQuery} />\n          <CommandList>\n            <CommandEmpty>{emptyText}</CommandEmpty>\n            {sections.map((g, i) => (\n              <CommandGroup key={g.heading ?? i} heading={g.heading}>\n                {g.options.map((o) => (\n                  <CommandItem\n                    key={getKey(o)}\n                    value={`${search(o)} ${getKey(o)}`}\n                    onSelect={() => pick(o)}\n                  >\n                    {renderOption(o)}\n                    {getKey(o) === value && <Check className=\"ml-auto size-4\" strokeWidth={1.25} />}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n        {footer && <div className=\"border-t border-seam p-2\">{footer}</div>}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAuBA,SAAgB,SAAY,EAC1B,IACA,OACA,UACA,SACA,QACA,QACA,eACA,cACA,aACA,cAAc,WACd,oBAAoB,WACpB,YAAY,kBACZ,QACA,SACA,UACA,WACA,oBAuBC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CACrC,MAAM,UAAU,OAA0B,IAAI;CAC9C,MAAM,YAAY,OAAO,KAAK;CAE9B,MAAM,WAA+B,UAAU,CAAC,EAAE,SAAS,WAAW,CAAC,EAAE,CAAC;CAC1E,MAAM,UAAU,SAAS,SAAS,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,MAAM,OAAO,CAAC,MAAM,KAAK;CAClF,MAAM,SAAS,iBAAiB;CAEhC,SAAS,SAAS,MAAc;EAC9B,SAAS,IAAI;EACb,QAAQ,IAAI;CACd;CAEA,SAAS,KAAK,QAAW;EACvB,UAAU,UAAU;EACpB,SAAS,OAAO,MAAM,CAAC;EACvB,QAAQ,KAAK;CACf;CAEA,OACE,qBAAC,SAAD;EACQ;EACN,eAAe,SAAS;GACtB,IAAI,MAAM,SAAS,EAAE;GACrB,QAAQ,IAAI;EACd;EALF,UAAA,CAOE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,qBAAC,QAAD;IACE,KAAK;IACD;IACJ,MAAK;IACL,SAAQ;IACR,MAAK;IACL,sBAAoB,QAAQ,KAAA,IAAY;IACxC,iBAAe;IACf,gBAAc,WAAW,KAAA;IACf;IACV,WAAW,GAAG,+BAA+B,SAAS;IACtD,YAAY,MAAM;KAEhB,IACE,CAAC,QACD,EAAE,IAAI,WAAW,KACjB,CAAC,EAAE,WACH,CAAC,EAAE,WACH,CAAC,EAAE,UACH,EAAE,QAAQ,KACV;MACA,EAAE,eAAe;MACjB,SAAS,EAAE,GAAG;KAChB;IACF;IAxBF,UAAA,CA0BG,UACC,oBAAC,QAAD;KAAM,WAAU;KACZ,WAAA,eAAe,aAAA,CAAc,OAAO;IAClC,CAAA,IAEN,oBAAC,QAAD;KAAM,WAAU;KAAiB,UAAA;IAAkB,CAAA,GAErD,oBAAC,gBAAD;KAAgB,WAAU;KAAgC,aAAa;IAAO,CAAA,CACxE;;EACM,CAAA,GAChB,qBAAC,gBAAD;GACE,OAAM;GACN,WAAW,GAAG,kDAAkD,gBAAgB;GAChF,mBAAmB,MAAM;IAEvB,IAAI,CAAC,UAAU,SAAS;IACxB,UAAU,UAAU;IACpB,EAAE,eAAe;IACjB,eAAe,QAAQ,OAAO;GAChC;GATF,UAAA,CAWE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,cAAD;IAAc,aAAa;IAAmB,OAAO;IAAO,eAAe;GAAW,CAAA,GACtF,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAA,UAAe,UAAwB,CAAA,GACtC,SAAS,KAAK,GAAG,MAChB,oBAAC,cAAD;IAAmC,SAAS,EAAE;IAC3C,UAAA,EAAE,QAAQ,KAAK,MACd,qBAAC,aAAD;KAEE,OAAO,GAAG,OAAO,CAAC,EAAE,GAAG,OAAO,CAAC;KAC/B,gBAAgB,KAAK,CAAC;KAHxB,UAAA,CAKG,aAAa,CAAC,GACd,OAAO,CAAC,MAAM,SAAS,oBAAC,OAAD;MAAO,WAAU;MAAiB,aAAa;KAAO,CAAA,CACnE;IANN,GAAA,OAAO,CAAC,CAMF,CACd;GACW,GAXK,EAAE,WAAW,CAWlB,CACf,CACU,EAAA,CAAA,CACN,EAAA,CAAA,GACR,UAAU,oBAAC,OAAD;IAAK,WAAU;IAA4B,UAAA;GAAY,CAAA,CACpD;EACT,CAAA,CAAA;;AAEb"}

package/dist/components/command.d.ts

@@ -0,0 +1,19 @@
+import { Dialog } from "./dialog.js";
+import * as React from "react";
+import { Command } from "cmdk";
+declare function Command$1({ className, ...props }: React.ComponentProps<typeof Command>): React.JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof Command.Input>): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof Command.List>): React.JSX.Element;
+declare function CommandEmpty({ ...props }: React.ComponentProps<typeof Command.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof Command.Group>): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof Command.Separator>): React.JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof Command.Item>): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Command$1 as Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+//# sourceMappingURL=command.d.ts.map

package/dist/components/command.js

@@ -0,0 +1,86 @@
+"use client";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+import { Command } from "cmdk";
+// src/components/command.tsx
+function Command$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command, {
+		"data-slot": "command",
+		className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
+		...props
+	});
+}
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...props,
+		children: [/* @__PURE__ */ jsxs(DialogHeader, {
+			className: "sr-only",
+			children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
+		}), /* @__PURE__ */ jsx(DialogContent, {
+			className: cn("overflow-hidden p-0", className),
+			showCloseButton,
+			children: /* @__PURE__ */ jsx(Command$1, {
+				className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+				children
+			})
+		})]
+	});
+}
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "command-input-wrapper",
+		className: "flex h-9 items-center gap-2 border-b px-3",
+		children: [/* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command.Input, {
+			"data-slot": "command-input",
+			className: cn("flex h-10 w-full rounded-md bg-transparent py-3 text-body-md outline-hidden sm:text-body-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
+			...props
+		})]
+	});
+}
+function CommandList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command.List, {
+		"data-slot": "command-list",
+		className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+		...props
+	});
+}
+function CommandEmpty({ ...props }) {
+	return /* @__PURE__ */ jsx(Command.Empty, {
+		"data-slot": "command-empty",
+		className: "py-6 text-center text-sm",
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command.Group, {
+		"data-slot": "command-group",
+		className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className),
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command.Separator, {
+		"data-slot": "command-separator",
+		className: cn("-mx-1 h-px bg-border", className),
+		...props
+	});
+}
+function CommandItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command.Item, {
+		"data-slot": "command-item",
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		...props
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		...props
+	});
+}
+export { Command$1 as Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+
+//# sourceMappingURL=command.js.map

package/dist/components/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","names":["Command","CommandPrimitive"],"sources":["../../src/components/command.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"./dialog\";\nimport { cn } from \"../lib/utils\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string;\n  description?: string;\n  className?: string;\n  showCloseButton?: boolean;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"flex h-9 items-center gap-2 border-b px-3\">\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-body-md outline-hidden sm:text-body-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n"],"mappings":";;;;;;;AAQA,SAASA,UAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,oBAACC,SAAD;EACE,aAAU;EACV,WAAW,GACT,6FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,kBAAkB,MAClB,GAAG,SAMF;CACD,OACE,qBAAC,QAAD;EAAQ,GAAI;EAAZ,UAAA,CACE,qBAAC,cAAD;GAAc,WAAU;GAAxB,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;EACd,CAAA,GAAA,oBAAC,eAAD;GACE,WAAW,GAAG,uBAAuB,SAAS;GAC7B;GAEjB,UAAA,oBAACD,WAAD;IAAS,WAAU;IAChB;GACM,CAAA;EACI,CAAA,CACT;;AAEZ;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAAjD,UAAA,CACE,oBAAC,YAAD,EAAY,WAAU,6BAA8B,CAAA,GACpD,oBAACC,QAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,iLACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GAAG,+DAA+D,SAAS;EACtF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OACE,oBAACA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAACA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,0NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,QAAiB,WAAlB;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GACT,uYACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL"}

package/dist/components/cta-banner.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export type CtaBannerProps = {
+  title: React.ReactNode;
+  id?: string;
+  text?: React.ReactNode;
+  /** Microprint above the title, e.g. "S-05 · START". */
+  code?: string;
+  /** The call to action, usually a secondary Button (shell on signal). */
+  action?: React.ReactNode;
+  className?: string;
+};
+/** The whole-signal call to action that closes a page. Text on it is ink, never white. */
+export declare function CtaBanner({ title, id, text, code, action, className }: CtaBannerProps): React.JSX.Element;
+//# sourceMappingURL=cta-banner.d.ts.map

package/dist/components/cta-banner.js

@@ -0,0 +1,39 @@
+import { cn } from "../lib/utils.js";
+import { Grill } from "./hud.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/cta-banner.tsx
+/** The whole-signal call to action that closes a page. Text on it is ink, never white. */
+function CtaBanner({ title, id, text, code, action, className }) {
+	return /* @__PURE__ */ jsx("section", {
+		id,
+		className: cn("relative drop-float", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "grid items-end gap-8 rounded-xl bg-signal notch-lg p-8 md:grid-cols-[1fr_auto] md:p-12",
+			children: [/* @__PURE__ */ jsxs("div", { children: [
+				code && /* @__PURE__ */ jsx("div", {
+					className: "hud-sm mb-4 text-ink",
+					children: code
+				}),
+				/* @__PURE__ */ jsx("h2", {
+					className: "font-display text-display-md text-ink",
+					children: title
+				}),
+				text && /* @__PURE__ */ jsx("p", {
+					className: "mt-3 max-w-[32em] text-body-md text-ink",
+					children: text
+				})
+			] }), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-start gap-6 md:items-end",
+				children: [/* @__PURE__ */ jsx(Grill, {
+					count: 6,
+					tone: "on-signal",
+					slotWidth: 30,
+					gap: "8px"
+				}), action]
+			})]
+		})
+	});
+}
+export { CtaBanner };
+
+//# sourceMappingURL=cta-banner.js.map

package/dist/components/cta-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cta-banner.js","names":[],"sources":["../../src/components/cta-banner.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Grill } from \"./hud\";\n\nexport type CtaBannerProps = {\n  title: React.ReactNode;\n  id?: string;\n  text?: React.ReactNode;\n  /** Microprint above the title, e.g. \"S-05 · START\". */\n  code?: string;\n  /** The call to action, usually a secondary Button (shell on signal). */\n  action?: React.ReactNode;\n  className?: string;\n};\n\n/** The whole-signal call to action that closes a page. Text on it is ink, never white. */\nexport function CtaBanner({ title, id, text, code, action, className }: CtaBannerProps) {\n  return (\n    <section id={id} className={cn(\"relative drop-float\", className)}>\n      <div className=\"grid items-end gap-8 rounded-xl bg-signal notch-lg p-8 md:grid-cols-[1fr_auto] md:p-12\">\n        <div>\n          {code && <div className=\"hud-sm mb-4 text-ink\">{code}</div>}\n          <h2 className=\"font-display text-display-md text-ink\">{title}</h2>\n          {text && <p className=\"mt-3 max-w-[32em] text-body-md text-ink\">{text}</p>}\n        </div>\n        <div className=\"flex flex-col items-start gap-6 md:items-end\">\n          <Grill count={6} tone=\"on-signal\" slotWidth={30} gap=\"8px\" />\n          {action}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;AAgBA,SAAgB,UAAU,EAAE,OAAO,IAAI,MAAM,MAAM,QAAQ,aAA6B;CACtF,OACE,oBAAC,WAAD;EAAa;EAAI,WAAW,GAAG,uBAAuB,SAAS;EAC7D,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD,EAAA,UAAA;IACG,QAAQ,oBAAC,OAAD;KAAK,WAAU;KAAwB,UAAA;IAAU,CAAA;IAC1D,oBAAC,MAAD;KAAI,WAAU;KAAyC,UAAA;IAAU,CAAA;IAChE,QAAQ,oBAAC,KAAD;KAAG,WAAU;KAA2C,UAAA;IAAQ,CAAA;GACtE,EAAA,CAAA,GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,OAAD;KAAO,OAAO;KAAG,MAAK;KAAY,WAAW;KAAI,KAAI;IAAO,CAAA,GAC3D,MACE;GACF,CAAA,CAAA;;CACE,CAAA;AAEb"}

package/dist/components/date-picker.d.ts

@@ -0,0 +1,19 @@
+/** "YYYY-MM-DD" -> local Date (no time-zone shift). */
+export declare function parseISODate(value: string): Date | undefined;
+/** Local Date -> "YYYY-MM-DD". */
+export declare function toISODate(date: Date): string;
+/** Short field label: "Today, Oct 29", "Yesterday, Oct 28", "Tue, Oct 20", "Mon, Dec 1, 2025". */
+export declare function dateLabel(date: Date, today: Date): string;
+/**
+ * A calendar date in a sunken well, opening a Module/01 Calendar with Today and Yesterday
+ * shortcuts. Value and onChange use "YYYY-MM-DD" strings.
+ */
+export declare function DatePicker({ id, value, onChange, placeholder, disabled, className }: {
+  id?: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/date-picker.js

@@ -0,0 +1,107 @@
+"use client";
+import { focusNextField } from "../lib/form-flow.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Calendar } from "./calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarDays } from "lucide-react";
+import { useRef, useState } from "react";
+import { addDays, format, isSameDay } from "date-fns";
+// src/components/date-picker.tsx
+/** "YYYY-MM-DD" -> local Date (no time-zone shift). */
+function parseISODate(value) {
+	const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+	if (!m) return void 0;
+	return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+}
+/** Local Date -> "YYYY-MM-DD". */
+function toISODate(date) {
+	return format(date, "yyyy-MM-dd");
+}
+/** Short field label: "Today, Oct 29", "Yesterday, Oct 28", "Tue, Oct 20", "Mon, Dec 1, 2025". */
+function dateLabel(date, today) {
+	if (isSameDay(date, today)) return `Today, ${format(date, "MMM d")}`;
+	if (isSameDay(date, addDays(today, -1))) return `Yesterday, ${format(date, "MMM d")}`;
+	return format(date, date.getFullYear() === today.getFullYear() ? "EEE, MMM d" : "EEE, MMM d, yyyy");
+}
+/**
+* A calendar date in a sunken well, opening a Module/01 Calendar with Today and Yesterday
+* shortcuts. Value and onChange use "YYYY-MM-DD" strings.
+*/
+function DatePicker({ id, value, onChange, placeholder = "Pick a date", disabled, className }) {
+	const [open, setOpen] = useState(false);
+	const selected = parseISODate(value);
+	const [month, setMonth] = useState(selected ?? /* @__PURE__ */ new Date());
+	const today = /* @__PURE__ */ new Date();
+	const trigger = useRef(null);
+	const committed = useRef(false);
+	function openChange(next) {
+		if (next) setMonth(selected ?? /* @__PURE__ */ new Date());
+		setOpen(next);
+	}
+	function pick(date) {
+		onChange(toISODate(date));
+		committed.current = true;
+		setOpen(false);
+	}
+	const label = selected ? dateLabel(selected, today) : placeholder;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: openChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("button", {
+				ref: trigger,
+				"data-flow-field": true,
+				id,
+				type: "button",
+				disabled,
+				className: cn("flex h-control-height w-full min-w-0 cursor-pointer items-center gap-3 rounded-md border border-transparent bg-shell-recess px-4 text-left text-body-md text-ink shadow-press outline-none transition-[box-shadow,border-color] disabled:pointer-events-none disabled:opacity-50", "focus-visible:border-signal-ink focus-visible:ring-[3px] focus-visible:ring-ring/30 data-[state=open]:border-signal-ink", className),
+				children: [/* @__PURE__ */ jsx(CalendarDays, {
+					className: "size-4 shrink-0 text-ink-soft",
+					strokeWidth: 1.25
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("truncate", !selected && "text-ink-soft"),
+					children: label
+				})]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "start",
+			className: "w-auto rounded-lg p-3",
+			onCloseAutoFocus: (e) => {
+				if (!committed.current) return;
+				committed.current = false;
+				e.preventDefault();
+				focusNextField(trigger.current);
+			},
+			children: [/* @__PURE__ */ jsx(Calendar, {
+				mode: "single",
+				required: true,
+				selected,
+				onSelect: pick,
+				month,
+				onMonthChange: setMonth,
+				autoFocus: true
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex gap-2 border-t border-seam pt-3",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "xs",
+					variant: "secondary",
+					onClick: () => pick(today),
+					children: "Today"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "xs",
+					variant: "secondary",
+					onClick: () => pick(addDays(today, -1)),
+					children: "Yesterday"
+				})]
+			})]
+		})]
+	});
+}
+export { DatePicker, dateLabel, parseISODate, toISODate };
+
+//# sourceMappingURL=date-picker.js.map

package/dist/components/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","names":[],"sources":["../../src/components/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { focusNextField } from \"../lib/form-flow\";\nimport { cn } from \"../lib/utils\";\nimport { addDays, format, isSameDay } from \"date-fns\";\nimport { CalendarDays } from \"lucide-react\";\nimport { useRef, useState } from \"react\";\nimport { Button } from \"./button\";\nimport { Calendar } from \"./calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\n/** \"YYYY-MM-DD\" -> local Date (no time-zone shift). */\nexport function parseISODate(value: string): Date | undefined {\n  const m = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(value);\n  if (!m) return undefined;\n  return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));\n}\n\n/** Local Date -> \"YYYY-MM-DD\". */\nexport function toISODate(date: Date): string {\n  return format(date, \"yyyy-MM-dd\");\n}\n\n/** Short field label: \"Today, Oct 29\", \"Yesterday, Oct 28\", \"Tue, Oct 20\", \"Mon, Dec 1, 2025\". */\nexport function dateLabel(date: Date, today: Date): string {\n  if (isSameDay(date, today)) return `Today, ${format(date, \"MMM d\")}`;\n  if (isSameDay(date, addDays(today, -1))) return `Yesterday, ${format(date, \"MMM d\")}`;\n  return format(\n    date,\n    date.getFullYear() === today.getFullYear() ? \"EEE, MMM d\" : \"EEE, MMM d, yyyy\",\n  );\n}\n\n/**\n * A calendar date in a sunken well, opening a Module/01 Calendar with Today and Yesterday\n * shortcuts. Value and onChange use \"YYYY-MM-DD\" strings.\n */\nexport function DatePicker({\n  id,\n  value,\n  onChange,\n  placeholder = \"Pick a date\",\n  disabled,\n  className,\n}: {\n  id?: string;\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n}) {\n  const [open, setOpen] = useState(false);\n  const selected = parseISODate(value);\n  const [month, setMonth] = useState<Date>(selected ?? new Date());\n  const today = new Date();\n  const trigger = useRef<HTMLButtonElement>(null);\n  const committed = useRef(false);\n\n  function openChange(next: boolean) {\n    if (next) setMonth(selected ?? new Date());\n    setOpen(next);\n  }\n\n  function pick(date: Date) {\n    onChange(toISODate(date));\n    committed.current = true;\n    setOpen(false);\n  }\n\n  const label = selected ? dateLabel(selected, today) : placeholder;\n\n  return (\n    <Popover open={open} onOpenChange={openChange}>\n      <PopoverTrigger asChild>\n        <button\n          ref={trigger}\n          data-flow-field\n          id={id}\n          type=\"button\"\n          disabled={disabled}\n          className={cn(\n            \"flex h-control-height w-full min-w-0 cursor-pointer items-center gap-3 rounded-md border border-transparent bg-shell-recess px-4 text-left text-body-md text-ink shadow-press outline-none transition-[box-shadow,border-color] disabled:pointer-events-none disabled:opacity-50\",\n            \"focus-visible:border-signal-ink focus-visible:ring-[3px] focus-visible:ring-ring/30 data-[state=open]:border-signal-ink\",\n            className,\n          )}\n        >\n          <CalendarDays className=\"size-4 shrink-0 text-ink-soft\" strokeWidth={1.25} />\n          <span className={cn(\"truncate\", !selected && \"text-ink-soft\")}>{label}</span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"w-auto rounded-lg p-3\"\n        onCloseAutoFocus={(e) => {\n          // Form flow: after picking a date, move on to the next field.\n          if (!committed.current) return;\n          committed.current = false;\n          e.preventDefault();\n          focusNextField(trigger.current);\n        }}\n      >\n        <Calendar\n          mode=\"single\"\n          required\n          selected={selected}\n          onSelect={pick}\n          month={month}\n          onMonthChange={setMonth}\n          autoFocus\n        />\n        <div className=\"mt-3 flex gap-2 border-t border-seam pt-3\">\n          <Button type=\"button\" size=\"xs\" variant=\"secondary\" onClick={() => pick(today)}>\n            Today\n          </Button>\n          <Button\n            type=\"button\"\n            size=\"xs\"\n            variant=\"secondary\"\n            onClick={() => pick(addDays(today, -1))}\n          >\n            Yesterday\n          </Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,aAAa,OAAiC;CAC5D,MAAM,IAAI,4BAA4B,KAAK,KAAK;CAChD,IAAI,CAAC,GAAG,OAAO,KAAA;CACf,OAAO,IAAI,KAAK,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,EAAE,IAAI,GAAG,OAAO,EAAE,EAAE,CAAC;AAC9D;;AAGA,SAAgB,UAAU,MAAoB;CAC5C,OAAO,OAAO,MAAM,YAAY;AAClC;;AAGA,SAAgB,UAAU,MAAY,OAAqB;CACzD,IAAI,UAAU,MAAM,KAAK,GAAG,OAAO,UAAU,OAAO,MAAM,OAAO;CACjE,IAAI,UAAU,MAAM,QAAQ,OAAO,EAAE,CAAC,GAAG,OAAO,cAAc,OAAO,MAAM,OAAO;CAClF,OAAO,OACL,MACA,KAAK,YAAY,MAAM,MAAM,YAAY,IAAI,eAAe,kBAC9D;AACF;;;;;AAMA,SAAgB,WAAW,EACzB,IACA,OACA,UACA,cAAc,eACd,UACA,aAQC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,CAAC,OAAO,YAAY,SAAe,4BAAY,IAAI,KAAK,CAAC;CAC/D,MAAM,wBAAQ,IAAI,KAAK;CACvB,MAAM,UAAU,OAA0B,IAAI;CAC9C,MAAM,YAAY,OAAO,KAAK;CAE9B,SAAS,WAAW,MAAe;EACjC,IAAI,MAAM,SAAS,4BAAY,IAAI,KAAK,CAAC;EACzC,QAAQ,IAAI;CACd;CAEA,SAAS,KAAK,MAAY;EACxB,SAAS,UAAU,IAAI,CAAC;EACxB,UAAU,UAAU;EACpB,QAAQ,KAAK;CACf;CAEA,MAAM,QAAQ,WAAW,UAAU,UAAU,KAAK,IAAI;CAEtD,OACE,qBAAC,SAAD;EAAe;EAAM,cAAc;EAAnC,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,qBAAC,UAAD;IACE,KAAK;IACL,mBAAA;IACI;IACJ,MAAK;IACK;IACV,WAAW,GACT,oRACA,2HACA,SACF;IAVF,UAAA,CAYE,oBAAC,cAAD;KAAc,WAAU;KAAgC,aAAa;IAAO,CAAA,GAC5E,oBAAC,QAAD;KAAM,WAAW,GAAG,YAAY,CAAC,YAAY,eAAe;KAAI,UAAA;IAAY,CAAA,CACtE;;EACM,CAAA,GAChB,qBAAC,gBAAD;GACE,OAAM;GACN,WAAU;GACV,mBAAmB,MAAM;IAEvB,IAAI,CAAC,UAAU,SAAS;IACxB,UAAU,UAAU;IACpB,EAAE,eAAe;IACjB,eAAe,QAAQ,OAAO;GAChC;GATF,UAAA,CAWE,oBAAC,UAAD;IACE,MAAK;IACL,UAAA;IACU;IACV,UAAU;IACH;IACP,eAAe;IACf,WAAA;GACD,CAAA,GACD,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAQ,MAAK;KAAS,MAAK;KAAK,SAAQ;KAAY,eAAe,KAAK,KAAK;KAAG,UAAA;IAExE,CAAA,GACR,oBAAC,QAAD;KACE,MAAK;KACL,MAAK;KACL,SAAQ;KACR,eAAe,KAAK,QAAQ,OAAO,EAAE,CAAC;KACvC,UAAA;IAEO,CAAA,CACL;GACS,CAAA,CAAA;EACT,CAAA,CAAA;;AAEb"}

package/dist/components/dialog.d.ts

@@ -0,0 +1,18 @@
+import { Dialog } from "radix-ui";
+import * as React from "react";
+declare function Dialog$1({ ...props }: React.ComponentProps<typeof Dialog.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof Dialog.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof Dialog.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof Dialog.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dialog.Overlay>): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, onOpenAutoFocus, ...props }: React.ComponentProps<typeof Dialog.Content> & {
+  showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof Dialog.Description>): React.JSX.Element;
+export { Dialog$1 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog.js

@@ -0,0 +1,99 @@
+"use client";
+import { Button } from "./button.js";
+import { focusFirstField } from "../lib/form-flow.js";
+import { cn } from "../lib/utils.js";
+import { Dialog } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+// src/components/dialog.tsx
+function Dialog$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+}
+function DialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+function DialogClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Overlay, {
+		"data-slot": "dialog-overlay",
+		className: cn("fixed inset-0 z-50 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className),
+		...props
+	});
+}
+function DialogContent({ className, children, showCloseButton = true, onOpenAutoFocus, ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPortal, {
+		"data-slot": "dialog-portal",
+		children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
+			"data-slot": "dialog-content",
+			className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-float duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg", className),
+			...props,
+			onOpenAutoFocus: (e) => {
+				onOpenAutoFocus?.(e);
+				if (!e.defaultPrevented && focusFirstField(e.currentTarget)) e.preventDefault();
+			},
+			children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
+				"data-slot": "dialog-close",
+				className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})]
+		})]
+	});
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+		...props
+	});
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dialog-footer",
+		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				children: "Close"
+			})
+		})]
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: cn("text-lg leading-none font-semibold", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+}
+export { Dialog$1 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button } from \"./button\";\nimport { focusFirstField } from \"../lib/form-flow\";\nimport { cn } from \"../lib/utils\";\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  onOpenAutoFocus,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-float duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg\",\n          className,\n        )}\n        {...props}\n        onOpenAutoFocus={(e) => {\n          // Form flow: open on the first field rather than the close button or tabs.\n          onOpenAutoFocus?.(e);\n          if (!e.defaultPrevented && focusFirstField(e.currentTarget as HTMLElement)) {\n            e.preventDefault();\n          }\n        }}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"mappings":";;;;;;;;AASA,SAASA,SAAO,EAAE,GAAG,SAA4D;CAC/E,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,cAAc,EAAE,GAAG,SAA+D;CACzF,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OAAO,oBAACA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,YAAY,EAAE,GAAG,SAA6D;CACrF,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,yJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,MAClB,iBACA,GAAG,SAGF;CACD,OACE,qBAAC,cAAD;EAAc,aAAU;EAAxB,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,OAAgB,SAAjB;GACE,aAAU;GACV,WAAW,GACT,+XACA,SACF;GACA,GAAI;GACJ,kBAAkB,MAAM;IAEtB,kBAAkB,CAAC;IACnB,IAAI,CAAC,EAAE,oBAAoB,gBAAgB,EAAE,aAA4B,GACvE,EAAE,eAAe;GAErB;GAbF,UAAA,CAeG,UACA,mBACC,qBAACA,OAAgB,OAAjB;IACE,aAAU;IACV,WAAU;IAFZ,UAAA,CAIE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAW,CAAA,CAChB;GAEF,CAAA,CAAA;EACb,CAAA,CAAA;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAGF;CACD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;EAHN,UAAA,CAKG,UACA,mBACC,oBAACA,OAAgB,OAAjB;GAAuB,SAAA;GACrB,UAAA,oBAAC,QAAD;IAAQ,SAAQ;IAAU,UAAA;GAAa,CAAA;EAClB,CAAA,CAEtB;;AAET;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,26 @@
+import { DropdownMenu } from "radix-ui";
+import * as React from "react";
+declare function DropdownMenu$1({ ...props }: React.ComponentProps<typeof DropdownMenu.Root>): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenu.Portal>): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenu.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenu.Content>): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenu.Group>): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenu.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenu.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenu.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenu.RadioItem>): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenu.Label> & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenu.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenu.Sub>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenu.SubTrigger> & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenu.SubContent>): React.JSX.Element;
+export { DropdownMenu$1 as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+//# sourceMappingURL=dropdown-menu.d.ts.map