@hex-core/components 1.3.1 → 1.5.0

package/dist/combobox.d.ts

@@ -0,0 +1,3 @@
+export { Combobox_alias_1 as Combobox } from './_tsup-dts-rollup.js';
+export { ComboboxOption_alias_1 as ComboboxOption } from './_tsup-dts-rollup.js';
+export { ComboboxProps_alias_1 as ComboboxProps } from './_tsup-dts-rollup.js';

package/dist/combobox.js

@@ -0,0 +1,226 @@
+"use client";
+import * as React from 'react';
+import { Command as Command$1 } from 'cmdk';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = "Command";
+var CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-b-foreground/[0.08] px-[var(--space-3,0.75rem)]", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "mr-[var(--space-2,0.5rem)] h-4 w-4 shrink-0 opacity-50",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Command$1.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-[var(--control-height-lg,2.75rem)] w-full rounded-md bg-transparent py-[var(--space-3,0.75rem)] text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = "CommandInput";
+var CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = "CommandList";
+var CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, { ref, className: "py-[var(--space-6,1.5rem)] text-center text-sm", ...props }));
+CommandEmpty.displayName = "CommandEmpty";
+var CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-[var(--space-1,0.25rem)] text-foreground [&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = "CommandGroup";
+var CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "none",
+    "data-cmdk-separator": "",
+    className: cn("-mx-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = "CommandSeparator";
+var CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "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]:size-4 [&_svg]:shrink-0",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = "CommandItem";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = "PopoverContent";
+function Combobox({
+  options,
+  value,
+  onChange,
+  placeholder = "Select\u2026",
+  searchPlaceholder = "Search\u2026",
+  emptyText = "No results found.",
+  disabled,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  const [open, setOpen] = React.useState(false);
+  const listboxId = React.useId();
+  const selected = options.find((o) => o.value === value);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": open ? listboxId : void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        disabled,
+        className: cn(
+          "inline-flex h-[var(--control-height-md,2.5rem)] w-[240px] items-center justify-between gap-[var(--gap-sm,0.5rem)] rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:pointer-events-none disabled:opacity-50",
+          !selected && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: selected ? selected.label : placeholder }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "h-4 w-4 shrink-0 opacity-50",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[240px] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
+      /* @__PURE__ */ jsxs(CommandList, { id: listboxId, children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            value: option.label,
+            disabled: option.disabled,
+            onSelect: () => {
+              onChange?.(option.value);
+              setOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: cn(
+                    "mr-[var(--space-2,0.5rem)] h-4 w-4",
+                    value === option.value ? "opacity-100" : "opacity-0"
+                  ),
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+                }
+              ),
+              option.label
+            ]
+          },
+          option.value
+        )) })
+      ] })
+    ] }) })
+  ] });
+}
+Combobox.displayName = "Combobox";
+
+export { Combobox };
+//# sourceMappingURL=combobox.js.map
+//# sourceMappingURL=combobox.js.map

package/dist/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/command/command.tsx","../src/components/popover/popover.tsx","../src/components/combobox/combobox.tsx"],"names":["CommandPrimitive","React2","jsx","React3","jsxs"],"mappings":"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","file":"combobox.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport * as React from \"react\";\nimport {\n\tDialog,\n\tDialogContent,\n\tDialogDescription,\n\tDialogHeader,\n\tDialogTitle,\n} from \"../dialog/dialog.js\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root Command container — drives search, filtering, and keyboard navigation over items. */\nconst Command = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommand.displayName = \"Command\";\n\ninterface CommandDialogProps extends React.ComponentPropsWithoutRef<typeof Dialog> {\n\t/** Command children (CommandInput + CommandList + CommandItem, etc.) */\n\tchildren: React.ReactNode;\n\t/** Accessible title for the dialog (screen-reader only by default). */\n\ttitle?: string;\n\t/** Accessible description for the dialog (screen-reader only by default). */\n\tdescription?: string;\n}\n\n/**\n * Command menu rendered inside a Dialog — a ⌘K-style launcher.\n * @param props - Forwarded to the underlying Dialog (open, onOpenChange, etc.)\n * @returns A Dialog containing a Command menu.\n */\nfunction CommandDialog({\n\ttitle = \"Command Palette\",\n\tdescription = \"Search for a command to run.\",\n\tchildren,\n\t...props\n}: CommandDialogProps) {\n\treturn (\n\t\t<Dialog {...props}>\n\t\t\t<DialogHeader className=\"sr-only\">\n\t\t\t\t<DialogTitle>{title}</DialogTitle>\n\t\t\t\t<DialogDescription>{description}</DialogDescription>\n\t\t\t</DialogHeader>\n\t\t\t<DialogContent className=\"overflow-hidden p-0\" scrollable={false}>\n\t\t\t\t<Command className=\"[&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-[var(--space-2,0.5rem)] [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-[var(--space-2,0.5rem)] [&_[cmdk-item]]:py-[var(--space-3,0.75rem)] [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n\t\t\t\t\t{children}\n\t\t\t\t</Command>\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n\n/** Search input for the Command menu. Fires onValueChange as the user types. */\nconst CommandInput = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.Input>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n\t<div className=\"flex items-center border-b border-b-foreground/[0.08] px-[var(--space-3,0.75rem)]\" cmdk-input-wrapper=\"\">\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"2\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\tclassName=\"mr-[var(--space-2,0.5rem)] h-4 w-4 shrink-0 opacity-50\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<circle cx=\"11\" cy=\"11\" r=\"8\" />\n\t\t\t<line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n\t\t</svg>\n\t\t<CommandPrimitive.Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-[var(--control-height-lg,2.75rem)] w-full rounded-md bg-transparent py-[var(--space-3,0.75rem)] text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = \"CommandInput\";\n\n/** Scrollable list that contains CommandGroup / CommandItem / CommandEmpty. */\nconst CommandList = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.List>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tclassName={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = \"CommandList\";\n\n/** Rendered when no items match the current search. */\nconst CommandEmpty = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.Empty>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n\t<CommandPrimitive.Empty ref={ref} className=\"py-[var(--space-6,1.5rem)] text-center text-sm\" {...props} />\n));\nCommandEmpty.displayName = \"CommandEmpty\";\n\n/** Logical group of items — renders a heading and filters as a unit. */\nconst CommandGroup = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.Group>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"overflow-hidden p-[var(--space-1,0.25rem)] text-foreground [&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = \"CommandGroup\";\n\n/**\n * Horizontal rule between groups. Renders as a presentational `<div>` (no role)\n * so it can sit inside CommandList (role=listbox) without violating ARIA's\n * required-children rule for listbox. The line is purely decorative — cmdk's\n * built-in Separator hardcodes `role=\"separator\"`, which axe rejects in this\n * context, so we render the divider directly.\n *\n * The `data-cmdk-separator` attribute is preserved so existing CSS / test\n * selectors that target cmdk's separator continue to match.\n */\nconst CommandSeparator = React.forwardRef<\n\tHTMLDivElement,\n\tReact.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\trole=\"none\"\n\t\tdata-cmdk-separator=\"\"\n\t\tclassName={cn(\"-mx-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]\", className)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = \"CommandSeparator\";\n\n/** Selectable item. onSelect fires on Enter or click. */\nconst CommandItem = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.Item>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\",\n\t\t\t\"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\",\n\t\t\t\"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = \"CommandItem\";\n\n/**\n * Keyboard shortcut hint (e.g. '⌘K') aligned to the right of an item.\n * @returns A muted inline span rendered at the end of a CommandItem.\n */\nfunction CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"ml-auto text-xs tracking-widest text-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCommandShortcut.displayName = \"CommandShortcut\";\n\nexport {\n\tCommand,\n\tCommandDialog,\n\tCommandInput,\n\tCommandList,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandItem,\n\tCommandShortcut,\n\tCommandSeparator,\n};\n","\"use client\";\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root container for a popover. */\nconst Popover = PopoverPrimitive.Root;\n\n/** The element that anchors and opens the popover. */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\n/** Helper to explicitly anchor the popover to a different element. */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\n/** The floating popover content panel. */\nconst PopoverContent = React.forwardRef<\n\tReact.ComponentRef<typeof PopoverPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<PopoverPrimitive.Portal>\n\t\t<PopoverPrimitive.Content\n\t\t\tref={ref}\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\t\"z-50 w-72 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none\",\n\t\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n\t\t\t\t\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</PopoverPrimitive.Portal>\n));\nPopoverContent.displayName = \"PopoverContent\";\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\n","\"use client\";\n\nimport * as React from \"react\";\nimport {\n\tCommand,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandInput,\n\tCommandItem,\n\tCommandList,\n} from \"../command/command.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/popover.js\";\nimport { cn } from \"../../lib/utils.js\";\n\ninterface ComboboxOption {\n\t/** The value returned from onChange (stable, unique). */\n\tvalue: string;\n\t/** The display label shown in the list and the trigger. */\n\tlabel: string;\n\t/** Mark as non-selectable. */\n\tdisabled?: boolean;\n}\n\ninterface ComboboxProps {\n\t/** The list of selectable options. */\n\toptions: ComboboxOption[];\n\t/** Controlled selected value. */\n\tvalue?: string;\n\t/** Fired when the user picks an option: (value: string) => void */\n\tonChange?: (value: string) => void;\n\t/** Text shown on the trigger when nothing is selected. */\n\tplaceholder?: string;\n\t/** Input placeholder inside the popover list. */\n\tsearchPlaceholder?: string;\n\t/** Text shown when no options match the search. */\n\temptyText?: string;\n\t/** Disable the trigger. */\n\tdisabled?: boolean;\n\t/** Extra class names on the trigger button. */\n\tclassName?: string;\n\t/** Accessible label for the trigger (required when no adjacent visible label). */\n\t\"aria-label\"?: string;\n\t/** Id of an external visible label that names this combobox. */\n\t\"aria-labelledby\"?: string;\n}\n\n/**\n * Searchable select input built on Command + Popover.\n *\n * Pass `options` with `{ value, label }` shape. The selected label is shown on\n * the trigger; the popover contains a CommandInput and filtered CommandList.\n * @returns A trigger button that opens a filtered option list.\n */\nfunction Combobox({\n\toptions,\n\tvalue,\n\tonChange,\n\tplaceholder = \"Select…\",\n\tsearchPlaceholder = \"Search…\",\n\temptyText = \"No results found.\",\n\tdisabled,\n\tclassName,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledBy,\n}: ComboboxProps) {\n\tconst [open, setOpen] = React.useState(false);\n\tconst listboxId = React.useId();\n\tconst selected = options.find((o) => o.value === value);\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={setOpen}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-expanded={open}\n\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t/*\n\t\t\t\t\t * Only reference the listbox id when the popover is open.\n\t\t\t\t\t * The CommandList is portal-mounted by Radix Popover and\n\t\t\t\t\t * does not exist in the DOM while closed; pointing at a\n\t\t\t\t\t * missing id confuses some screen readers.\n\t\t\t\t\t */\n\t\t\t\t\taria-controls={open ? listboxId : undefined}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"inline-flex h-[var(--control-height-md,2.5rem)] w-[240px] items-center justify-between gap-[var(--gap-sm,0.5rem)] rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\t\t\"shadow-sm inset-ring-1 inset-ring-foreground/[0.06]\",\n\t\t\t\t\t\t\"hover:bg-accent hover:text-accent-foreground\",\n\t\t\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\t\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\t\t!selected && \"text-muted-foreground\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"truncate\">{selected ? selected.label : placeholder}</span>\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\tclassName=\"h-4 w-4 shrink-0 opacity-50\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<polyline points=\"6 9 12 15 18 9\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent className=\"w-[240px] p-0\" align=\"start\">\n\t\t\t\t<Command>\n\t\t\t\t\t<CommandInput placeholder={searchPlaceholder} />\n\t\t\t\t\t<CommandList id={listboxId}>\n\t\t\t\t\t\t<CommandEmpty>{emptyText}</CommandEmpty>\n\t\t\t\t\t\t<CommandGroup>\n\t\t\t\t\t\t\t{options.map((option) => (\n\t\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\t\t\tvalue={option.label}\n\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\t\t\t\tonChange?.(option.value);\n\t\t\t\t\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\"mr-[var(--space-2,0.5rem)] h-4 w-4\",\n\t\t\t\t\t\t\t\t\t\t\tvalue === option.value ? \"opacity-100\" : \"opacity-0\",\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\" />\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</CommandGroup>\n\t\t\t\t\t</CommandList>\n\t\t\t\t</Command>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\nCombobox.displayName = \"Combobox\";\n\nexport { Combobox };\nexport type { ComboboxOption, ComboboxProps };\n"]}

package/dist/command.d.ts

@@ -0,0 +1,9 @@
+export { Command_alias_1 as Command } from './_tsup-dts-rollup.js';
+export { CommandDialog_alias_1 as CommandDialog } from './_tsup-dts-rollup.js';
+export { CommandInput_alias_1 as CommandInput } from './_tsup-dts-rollup.js';
+export { CommandList_alias_1 as CommandList } from './_tsup-dts-rollup.js';
+export { CommandEmpty_alias_1 as CommandEmpty } from './_tsup-dts-rollup.js';
+export { CommandGroup_alias_1 as CommandGroup } from './_tsup-dts-rollup.js';
+export { CommandItem_alias_1 as CommandItem } from './_tsup-dts-rollup.js';
+export { CommandShortcut_alias_1 as CommandShortcut } from './_tsup-dts-rollup.js';
+export { CommandSeparator_alias_1 as CommandSeparator } from './_tsup-dts-rollup.js';

package/dist/command.js

@@ -0,0 +1,232 @@
+"use client";
+import { Command as Command$1 } from 'cmdk';
+import * as React2 from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Dialog = DialogPrimitive.Root;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = React2.forwardRef(({ className, children, scrollable = true, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
+        scrollable ? "max-h-[calc(100vh-2rem)] border border-foreground/[0.08] bg-background shadow-lg rounded-lg" : "gap-[var(--gap-md,1rem)] border border-foreground/[0.08] bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
+        "duration-[var(--duration-normal,200ms)] data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props,
+      children: [
+        scrollable ? /* @__PURE__ */ jsx("div", { className: "grid gap-[var(--gap-md,1rem)] overflow-y-auto p-[var(--space-6,1.5rem)]", children }) : children,
+        /* @__PURE__ */ jsxs(
+          DialogPrimitive.Close,
+          {
+            className: cn(
+              "absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background bg-background/80 backdrop-blur-sm",
+              "transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "disabled:pointer-events-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "h-4 w-4",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = "DialogContent";
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+var Command = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = "Command";
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run.",
+  children,
+  ...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: "overflow-hidden p-0", scrollable: false, children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-[var(--space-2,0.5rem)] [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-[var(--space-2,0.5rem)] [&_[cmdk-item]]:py-[var(--space-3,0.75rem)] [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
+  ] });
+}
+var CommandInput = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-b-foreground/[0.08] px-[var(--space-3,0.75rem)]", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "mr-[var(--space-2,0.5rem)] h-4 w-4 shrink-0 opacity-50",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Command$1.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-[var(--control-height-lg,2.75rem)] w-full rounded-md bg-transparent py-[var(--space-3,0.75rem)] text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = "CommandInput";
+var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = "CommandList";
+var CommandEmpty = React2.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, { ref, className: "py-[var(--space-6,1.5rem)] text-center text-sm", ...props }));
+CommandEmpty.displayName = "CommandEmpty";
+var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-[var(--space-1,0.25rem)] text-foreground [&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = "CommandGroup";
+var CommandSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "none",
+    "data-cmdk-separator": "",
+    className: cn("-mx-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = "CommandSeparator";
+var CommandItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "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]:size-4 [&_svg]:shrink-0",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = "CommandItem";
+function CommandShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+CommandShortcut.displayName = "CommandShortcut";
+
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+//# sourceMappingURL=command.js.map
+//# sourceMappingURL=command.js.map

package/dist/command.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/dialog/dialog.tsx","../src/components/command/command.tsx"],"names":["React","jsx","CommandPrimitive","jsxs"],"mappings":";;;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACHA,IAAM,MAAA,GAAyB,eAAA,CAAA,IAAA;AAM/B,IAAM,YAAA,GAA+B,eAAA,CAAA,MAAA;AAMrC,IAAM,aAAA,GAAsBA,kBAG1B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAiB,eAAA,CAAA,OAAA;AAAA,EAAhB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,sDAAA;AAAA,MACA,8DAAA;AAAA,MACA,4DAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA,CAAA;AACD,aAAA,CAAc,WAAA,GAAc,eAAA;AAkB5B,IAAM,aAAA,GAAsBA,MAAA,CAAA,UAAA,CAG1B,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,UAAA,GAAa,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,0BACvD,YAAA,EAAA,EACA,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,kBACf,IAAA;AAAA,IAAiB,eAAA,CAAA,OAAA;AAAA,IAAhB;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACV,4FAAA;AAAA,QACA,aACG,6FAAA,GACA,uHAAA;AAAA,QACH,sGAAA;AAAA,QACA,4DAAA;AAAA,QACA,8DAAA;AAAA,QACA;AAAA,OACD;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,mBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yEAAA,EACb,UACF,CAAA,GAEA,QAAA;AAAA,wBAED,IAAA;AAAA,UAAiB,eAAA,CAAA,KAAA;AAAA,UAAhB;AAAA,YACA,SAAA,EAAW,EAAA;AAAA,cACV,4GAAA;AAAA,cACA,mFAAA;AAAA,cACA,qGAAA;AAAA,cACA;AAAA,aACD;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,IAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACA,KAAA,EAAM,4BAAA;AAAA,kBACN,OAAA,EAAQ,WAAA;AAAA,kBACR,IAAA,EAAK,MAAA;AAAA,kBACL,MAAA,EAAO,cAAA;AAAA,kBACP,WAAA,EAAY,GAAA;AAAA,kBACZ,aAAA,EAAc,OAAA;AAAA,kBACd,cAAA,EAAe,OAAA;AAAA,kBACf,SAAA,EAAU,SAAA;AAAA,kBACV,aAAA,EAAY,MAAA;AAAA,kBAEZ,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,YAAA,EAAa,CAAA;AAAA,oCACrB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,YAAA,EAAa;AAAA;AAAA;AAAA,eACtB;AAAA,8BACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA,OAAA,EAAK;AAAA;AAAA;AAAA;AAChC;AAAA;AAAA;AACD,CAAA,EACD,CACA,CAAA;AACD,aAAA,CAAc,WAAA,GAAc,eAAA;AAQ5B,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAyC;AACpF,EAAA,uBACC,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,oDAAA,EAAsD,SAAS,CAAA;AAAA,MAC5E,GAAG;AAAA;AAAA,GACL;AAEF;AAmBA,IAAM,WAAA,GAAoBA,kBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAiB,eAAA,CAAA,KAAA;AAAA,EAAhB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA;AAAA,IAC3E,GAAG;AAAA;AACL,CACA,CAAA;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,IAAM,iBAAA,GAA0BA,kBAG9B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAiB,eAAA,CAAA,WAAA;AAAA,EAAhB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,IACvD,GAAG;AAAA;AACL,CACA,CAAA;AACD,iBAAA,CAAkB,WAAA,GAAc,mBAAA;ACrJhC,IAAM,OAAA,GAAgB,kBAGpB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3BC,GAAAA;AAAA,EAACC,SAAA;AAAA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,2FAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,OAAA,CAAQ,WAAA,GAAc,SAAA;AAgBtB,SAAS,aAAA,CAAc;AAAA,EACtB,KAAA,GAAQ,iBAAA;AAAA,EACR,WAAA,GAAc,8BAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAAuB;AACtB,EAAA,uBACCC,IAAAA,CAAC,MAAA,EAAA,EAAQ,GAAG,KAAA,EACX,QAAA,EAAA;AAAA,oBAAAA,IAAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,SAAA,EACvB,QAAA,EAAA;AAAA,sBAAAF,GAAAA,CAAC,eAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACpBA,GAAAA,CAAC,iBAAA,EAAA,EAAmB,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EACjC,CAAA;AAAA,oBACAA,GAAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAU,qBAAA,EAAsB,UAAA,EAAY,KAAA,EAC1D,QAAA,kBAAAA,GAAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,scAAA,EACjB,UACF,CAAA,EACD;AAAA,GAAA,EACD,CAAA;AAEF;AAGA,IAAM,YAAA,GAAqB,MAAA,CAAA,UAAA,CAGzB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3BE,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mFAAA,EAAoF,sBAAmB,EAAA,EACrH,QAAA,EAAA;AAAA,kBAAAA,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAM,4BAAA;AAAA,MACN,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAY,GAAA;AAAA,MACZ,aAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAe,OAAA;AAAA,MACf,SAAA,EAAU,wDAAA;AAAA,MACV,aAAA,EAAY,MAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAAF,IAAC,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,wBAC9BA,GAAAA,CAAC,MAAA,EAAA,EAAK,EAAA,EAAG,IAAA,EAAK,IAAG,IAAA,EAAK,EAAA,EAAG,OAAA,EAAQ,EAAA,EAAG,OAAA,EAAQ;AAAA;AAAA;AAAA,GAC7C;AAAA,kBACAA,GAAAA;AAAA,IAACC,SAAA,CAAiB,KAAA;AAAA,IAAjB;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACV,+MAAA;AAAA,QACA;AAAA,OACD;AAAA,MACC,GAAG;AAAA;AAAA;AACL,CAAA,EACD,CACA;AACD,YAAA,CAAa,WAAA,GAAc,cAAA;AAG3B,IAAM,WAAA,GAAoB,kBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3BD,GAAAA;AAAA,EAACC,SAAA,CAAiB,IAAA;AAAA,EAAjB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,iDAAA,EAAmD,SAAS,CAAA;AAAA,IACzE,GAAG;AAAA;AACL,CACA;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,IAAM,YAAA,GAAqB,MAAA,CAAA,UAAA,CAGzB,CAAC,KAAA,EAAO,wBACTD,GAAAA,CAACC,SAAA,CAAiB,KAAA,EAAjB,EAAuB,GAAA,EAAU,SAAA,EAAU,gDAAA,EAAkD,GAAG,OAAO,CACxG;AACD,YAAA,CAAa,WAAA,GAAc,cAAA;AAG3B,IAAM,YAAA,GAAqB,kBAGzB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3BD,GAAAA;AAAA,EAACC,SAAA,CAAiB,KAAA;AAAA,EAAjB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,qQAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,YAAA,CAAa,WAAA,GAAc,cAAA;AAY3B,IAAM,gBAAA,GAAyB,kBAG7B,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3BD,GAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA,EAAK,MAAA;AAAA,IACL,qBAAA,EAAoB,EAAA;AAAA,IACpB,SAAA,EAAW,EAAA,CAAG,wDAAA,EAA0D,SAAS,CAAA;AAAA,IAChF,GAAG;AAAA;AACL,CACA;AACD,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAG/B,IAAM,WAAA,GAAoB,kBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3BA,GAAAA;AAAA,EAACC,SAAA,CAAiB,IAAA;AAAA,EAAjB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,oNAAA;AAAA,MACA,0EAAA;AAAA,MACA,4EAAA;AAAA,MACA,6DAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAM1B,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA0C;AACxF,EAAA,uBACCD,GAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACV,uDAAA;AAAA,QACA;AAAA,OACD;AAAA,MACC,GAAG;AAAA;AAAA,GACL;AAEF;AACA,eAAA,CAAgB,WAAA,GAAc,iBAAA","file":"command.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root container controlling open state of a modal dialog. */\nconst Dialog = DialogPrimitive.Root;\n\n/** The element (usually a button) that opens the dialog when clicked. */\nconst DialogTrigger = DialogPrimitive.Trigger;\n\n/** Portals the dialog overlay and content into the body. */\nconst DialogPortal = DialogPrimitive.Portal;\n\n/** Closes the dialog when rendered inside DialogContent. */\nconst DialogClose = DialogPrimitive.Close;\n\n/** Dimmed backdrop rendered behind the dialog content. */\nconst DialogOverlay = React.forwardRef<\n\tReact.ComponentRef<typeof DialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm\",\n\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\ninterface DialogContentProps\n\textends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n\t/**\n\t * When `true` (the default), DialogContent caps its height at viewport-2rem\n\t * and renders children inside a padded inner scroll container. The Close\n\t * button stays anchored to the (non-scrolling) outer panel so it remains\n\t * visible even when the user scrolls long content.\n\t *\n\t * Pass `scrollable={false}` to opt out — useful when the consumer manages\n\t * its own scroll surface (e.g. CommandDialog defers scroll to cmdk's\n\t * internal CommandList).\n\t */\n\tscrollable?: boolean;\n}\n\n/** The dialog content panel, centered on the overlay. Includes a close button by default. */\nconst DialogContent = React.forwardRef<\n\tReact.ComponentRef<typeof DialogPrimitive.Content>,\n\tDialogContentProps\n>(({ className, children, scrollable = true, ...props }, ref) => (\n\t<DialogPortal>\n\t\t<DialogOverlay />\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]\",\n\t\t\t\tscrollable\n\t\t\t\t\t? \"max-h-[calc(100vh-2rem)] border border-foreground/[0.08] bg-background shadow-lg rounded-lg\"\n\t\t\t\t\t: \"gap-[var(--gap-md,1rem)] border border-foreground/[0.08] bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg\",\n\t\t\t\t\"duration-[var(--duration-normal,200ms)] data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{scrollable ? (\n\t\t\t\t<div className=\"grid gap-[var(--gap-md,1rem)] overflow-y-auto p-[var(--space-6,1.5rem)]\">\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t\t<DialogPrimitive.Close\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background bg-background/80 backdrop-blur-sm\",\n\t\t\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100\",\n\t\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\t\t\"disabled:pointer-events-none\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\tclassName=\"h-4 w-4\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M18 6 6 18\" />\n\t\t\t\t\t<path d=\"m6 6 12 12\" />\n\t\t\t\t</svg>\n\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t</DialogPrimitive.Close>\n\t\t</DialogPrimitive.Content>\n\t</DialogPortal>\n));\nDialogContent.displayName = \"DialogContent\";\n\nexport type { DialogContentProps };\n\n/**\n * Header container inside DialogContent; stacks title and description.\n * @returns A div wrapping title/description with vertical rhythm\n */\nfunction DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Footer container inside DialogContent; aligns action buttons.\n * @returns A div that stacks buttons on mobile and right-aligns on desktop\n */\nfunction DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/** Accessible dialog title; Radix wires it to aria-labelledby automatically. */\nconst DialogTitle = React.forwardRef<\n\tReact.ComponentRef<typeof DialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/** Accessible dialog description; Radix wires it to aria-describedby automatically. */\nconst DialogDescription = React.forwardRef<\n\tReact.ComponentRef<typeof DialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-sm text-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport {\n\tDialog,\n\tDialogPortal,\n\tDialogOverlay,\n\tDialogTrigger,\n\tDialogClose,\n\tDialogContent,\n\tDialogHeader,\n\tDialogFooter,\n\tDialogTitle,\n\tDialogDescription,\n};\n","\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport * as React from \"react\";\nimport {\n\tDialog,\n\tDialogContent,\n\tDialogDescription,\n\tDialogHeader,\n\tDialogTitle,\n} from \"../dialog/dialog.js\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root Command container — drives search, filtering, and keyboard navigation over items. */\nconst Command = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommand.displayName = \"Command\";\n\ninterface CommandDialogProps extends React.ComponentPropsWithoutRef<typeof Dialog> {\n\t/** Command children (CommandInput + CommandList + CommandItem, etc.) */\n\tchildren: React.ReactNode;\n\t/** Accessible title for the dialog (screen-reader only by default). */\n\ttitle?: string;\n\t/** Accessible description for the dialog (screen-reader only by default). */\n\tdescription?: string;\n}\n\n/**\n * Command menu rendered inside a Dialog — a ⌘K-style launcher.\n * @param props - Forwarded to the underlying Dialog (open, onOpenChange, etc.)\n * @returns A Dialog containing a Command menu.\n */\nfunction CommandDialog({\n\ttitle = \"Command Palette\",\n\tdescription = \"Search for a command to run.\",\n\tchildren,\n\t...props\n}: CommandDialogProps) {\n\treturn (\n\t\t<Dialog {...props}>\n\t\t\t<DialogHeader className=\"sr-only\">\n\t\t\t\t<DialogTitle>{title}</DialogTitle>\n\t\t\t\t<DialogDescription>{description}</DialogDescription>\n\t\t\t</DialogHeader>\n\t\t\t<DialogContent className=\"overflow-hidden p-0\" scrollable={false}>\n\t\t\t\t<Command className=\"[&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-[var(--space-2,0.5rem)] [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-[var(--space-2,0.5rem)] [&_[cmdk-item]]:py-[var(--space-3,0.75rem)] [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n\t\t\t\t\t{children}\n\t\t\t\t</Command>\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n\n/** Search input for the Command menu. Fires onValueChange as the user types. */\nconst CommandInput = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.Input>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n\t<div className=\"flex items-center border-b border-b-foreground/[0.08] px-[var(--space-3,0.75rem)]\" cmdk-input-wrapper=\"\">\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"2\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\tclassName=\"mr-[var(--space-2,0.5rem)] h-4 w-4 shrink-0 opacity-50\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<circle cx=\"11\" cy=\"11\" r=\"8\" />\n\t\t\t<line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n\t\t</svg>\n\t\t<CommandPrimitive.Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-[var(--control-height-lg,2.75rem)] w-full rounded-md bg-transparent py-[var(--space-3,0.75rem)] text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = \"CommandInput\";\n\n/** Scrollable list that contains CommandGroup / CommandItem / CommandEmpty. */\nconst CommandList = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.List>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tclassName={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = \"CommandList\";\n\n/** Rendered when no items match the current search. */\nconst CommandEmpty = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.Empty>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n\t<CommandPrimitive.Empty ref={ref} className=\"py-[var(--space-6,1.5rem)] text-center text-sm\" {...props} />\n));\nCommandEmpty.displayName = \"CommandEmpty\";\n\n/** Logical group of items — renders a heading and filters as a unit. */\nconst CommandGroup = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.Group>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"overflow-hidden p-[var(--space-1,0.25rem)] text-foreground [&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = \"CommandGroup\";\n\n/**\n * Horizontal rule between groups. Renders as a presentational `<div>` (no role)\n * so it can sit inside CommandList (role=listbox) without violating ARIA's\n * required-children rule for listbox. The line is purely decorative — cmdk's\n * built-in Separator hardcodes `role=\"separator\"`, which axe rejects in this\n * context, so we render the divider directly.\n *\n * The `data-cmdk-separator` attribute is preserved so existing CSS / test\n * selectors that target cmdk's separator continue to match.\n */\nconst CommandSeparator = React.forwardRef<\n\tHTMLDivElement,\n\tReact.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\trole=\"none\"\n\t\tdata-cmdk-separator=\"\"\n\t\tclassName={cn(\"-mx-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]\", className)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = \"CommandSeparator\";\n\n/** Selectable item. onSelect fires on Enter or click. */\nconst CommandItem = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.Item>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\",\n\t\t\t\"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\",\n\t\t\t\"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = \"CommandItem\";\n\n/**\n * Keyboard shortcut hint (e.g. '⌘K') aligned to the right of an item.\n * @returns A muted inline span rendered at the end of a CommandItem.\n */\nfunction CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"ml-auto text-xs tracking-widest text-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCommandShortcut.displayName = \"CommandShortcut\";\n\nexport {\n\tCommand,\n\tCommandDialog,\n\tCommandInput,\n\tCommandList,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandItem,\n\tCommandShortcut,\n\tCommandSeparator,\n};\n"]}

package/dist/composer.d.ts

@@ -0,0 +1,2 @@
+export { ComposerProps_alias_1 as ComposerProps } from './_tsup-dts-rollup.js';
+export { Composer_alias_1 as Composer } from './_tsup-dts-rollup.js';

package/dist/composer.js

@@ -0,0 +1,75 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Composer({
+  value,
+  onValueChange,
+  onSubmit,
+  disabled,
+  placeholder,
+  submitOnEnter = true,
+  textareaAriaLabel,
+  children,
+  className,
+  ...rest
+}) {
+  function trySubmit() {
+    const trimmed = value.trim();
+    if (!trimmed || disabled) return;
+    onSubmit(trimmed);
+  }
+  function handleKeyDown(event) {
+    if (!submitOnEnter) return;
+    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      trySubmit();
+    }
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    trySubmit();
+  }
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      ...rest,
+      onSubmit: handleSubmit,
+      className: cn(
+        "flex items-end gap-2 rounded-lg border bg-background p-2",
+        "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value,
+            onChange: (event) => onValueChange(event.target.value),
+            onKeyDown: handleKeyDown,
+            disabled,
+            placeholder,
+            "aria-label": textareaAriaLabel ?? placeholder ?? "Message",
+            rows: 1,
+            className: cn(
+              "flex-1 resize-none bg-transparent px-2 py-1.5 text-sm leading-6",
+              "placeholder:text-muted-foreground focus:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              "max-h-48 min-h-[2.25rem] overflow-y-auto"
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+export { Composer };
+//# sourceMappingURL=composer.js.map
+//# sourceMappingURL=composer.js.map