cortena-ui 1.3.0 → 1.4.0

package/dist/components/combobox.js

@@ -0,0 +1,201 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { inputClassName } from "./input.js";
+import { Check, ChevronDown, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+import { createContext, useContext } from "react";
+//#region src/components/combobox.tsx
+/**
+* Combobox: a filterable text input with a listbox popup, on Base UI.
+*
+* Give the Root `items` (an array, or `[{ value, label }]`) and render the
+* list with `<ComboboxList>{(item) => <ComboboxItem value={item} />}</ComboboxList>`;
+* Base UI filters `items` against the input as the user types. Without
+* `items` nothing is filtered and `ComboboxEmpty` never shows.
+*
+* - `ComboboxInput` is our `Input` with a trailing open/close trigger and,
+*   with `clearable`, an X button that clears the value.
+* - `ComboboxContent` composes Portal + Positioner + Popup + List so
+*   consumers write one element; positioning props go to the Positioner.
+* - Multiple selection: set `multiple` on the Root and wrap `ComboboxValue`
+*   (rendering a `ComboboxChip` per value) plus `ComboboxInput` in
+*   `ComboboxChips`. Inside `ComboboxChips` the input drops its own frame;
+*   the chips container carries the field look and anchors the popup.
+* - `useComboboxFilter` is Base UI's `useFilter` for external filtering via
+*   `filteredItems`.
+*
+* `onValueChange` receives `(value, eventDetails)`; `onInputValueChange`
+* reports the typed text.
+*/
+function Combobox$1(props) {
+	return /* @__PURE__ */ jsx(Combobox.Root, { ...props });
+}
+const InsideChipsContext = /* @__PURE__ */ createContext(false);
+const controlButtonClassName = /* @__PURE__ */ cn("flex size-6 shrink-0 items-center justify-center rounded-[var(--ds-radius-sm)]", "text-[color:var(--ds-muted-foreground)] outline-none", "transition-[background-color,color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]", "focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0");
+function ComboboxTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Trigger, {
+		"data-slot": "combobox-trigger",
+		"aria-label": "Open",
+		className: cn(controlButtonClassName, className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Combobox.Icon, {
+			"data-slot": "combobox-icon",
+			className: "flex transition-transform duration-[var(--ds-duration-fast)] data-[popup-open]:rotate-180",
+			children: /* @__PURE__ */ jsx(ChevronDown, {})
+		})
+	});
+}
+function ComboboxClear({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Clear, {
+		"data-slot": "combobox-clear",
+		"aria-label": "Clear",
+		className: cn(controlButtonClassName, className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, {})
+	});
+}
+function ComboboxInput({ className, clearable = false, wrapperClassName, ...props }) {
+	if (useContext(InsideChipsContext)) return /* @__PURE__ */ jsx(Combobox.Input, {
+		"data-slot": "combobox-input",
+		className: cn("h-7 min-w-16 flex-1 bg-transparent outline-none", "text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-foreground)]", "placeholder:text-[color:var(--ds-text-tertiary)]", "disabled:cursor-not-allowed", className),
+		...props
+	});
+	return /* @__PURE__ */ jsxs(Combobox.InputGroup, {
+		"data-slot": "combobox-input-group",
+		className: cn("relative flex w-full items-center", wrapperClassName),
+		children: [/* @__PURE__ */ jsx(Combobox.Input, {
+			"data-slot": "combobox-input",
+			className: cn(inputClassName, clearable ? "pr-16" : "pr-9", className),
+			...props
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "absolute inset-y-0 right-1.5 flex items-center gap-0.5",
+			children: [clearable ? /* @__PURE__ */ jsx(ComboboxClear, {}) : null, /* @__PURE__ */ jsx(ComboboxTrigger, {})]
+		})]
+	});
+}
+function ComboboxValue(props) {
+	return /* @__PURE__ */ jsx(Combobox.Value, { ...props });
+}
+function ComboboxChips({ className, chipsClassName, children, ...props }) {
+	return /* @__PURE__ */ jsx(InsideChipsContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsxs(Combobox.InputGroup, {
+			"data-slot": "combobox-input-group",
+			className: cn("relative flex w-full min-w-0 items-start gap-1 rounded-[var(--ds-radius-md)] border border-[var(--ds-border)] bg-[var(--ds-muted)] py-1 pl-1.5 pr-1.5", "transition-[border-color,box-shadow] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "hover:border-[var(--ds-border-strong)]", "focus-within:border-[var(--ds-ring)] focus-within:ring-[3px] focus-within:ring-[var(--ds-ring)]/40", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", "data-[invalid]:border-[var(--ds-destructive)] data-[invalid]:ring-[3px] data-[invalid]:ring-[var(--ds-destructive)]/20", className),
+			children: [/* @__PURE__ */ jsx(Combobox.Chips, {
+				"data-slot": "combobox-chips",
+				className: cn("flex min-h-7 min-w-0 flex-1 flex-wrap items-center gap-1 px-1", chipsClassName),
+				...props,
+				children
+			}), /* @__PURE__ */ jsx(ComboboxTrigger, { className: "mt-0.5" })]
+		})
+	});
+}
+function ComboboxChip({ className, children, removable = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		"data-slot": "combobox-chip",
+		className: cn("inline-flex h-6 max-w-full cursor-default items-center gap-1 whitespace-nowrap border pl-2.5 outline-none", removable ? "pr-1" : "pr-2.5", "rounded-[var(--ds-radius-full)] border-[var(--ds-border-subtle)] bg-[var(--ds-hover)]", "text-[length:var(--ds-text-caption)] font-medium text-[color:var(--ds-muted-foreground)]", "focus-visible:border-[var(--ds-ring)] focus-visible:bg-[var(--ds-primary-soft)] focus-visible:text-[color:var(--ds-primary)]", "data-[disabled]:opacity-50", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children
+		}), removable ? /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+			"data-slot": "combobox-chip-remove",
+			"aria-label": "Remove",
+			className: cn("flex size-4 shrink-0 items-center justify-center rounded-[var(--ds-radius-full)] outline-none", "transition-[background-color,color] duration-[var(--ds-duration-fast)]", "hover:bg-[var(--ds-border)] hover:text-[color:var(--ds-foreground)]", "[&_svg]:size-3"),
+			children: /* @__PURE__ */ jsx(X, {})
+		}) : null]
+	});
+}
+function ComboboxContent({ className, children, empty, listClassName, side = "bottom", align = "start", sideOffset = 4, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, keepMounted, container, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Portal, {
+		keepMounted,
+		container,
+		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			"data-slot": "combobox-positioner",
+			side,
+			align,
+			sideOffset,
+			alignOffset,
+			anchor,
+			collisionBoundary,
+			collisionPadding,
+			collisionAvoidance,
+			sticky,
+			positionMethod,
+			className: "isolate z-50 outline-none",
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				"data-slot": "combobox-content",
+				className: cn("flex max-h-[min(var(--available-height,none),24rem)] w-[var(--anchor-width,auto)] min-w-[var(--anchor-width,auto)] flex-col overflow-hidden", "rounded-[var(--ds-radius-lg)] border border-[var(--ds-border)]", "bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]", "outline-none", "open:animate-in open:fade-in-0 open:zoom-in-95", "closed:animate-out closed:fade-out-0 closed:zoom-out-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", "duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", className),
+				...props,
+				children: [empty !== void 0 ? /* @__PURE__ */ jsx(ComboboxEmpty, { children: empty }) : null, /* @__PURE__ */ jsx(Combobox.List, {
+					"data-slot": "combobox-list",
+					className: cn("flex flex-col overflow-y-auto overflow-x-hidden p-1 outline-none", listClassName),
+					children
+				})]
+			})
+		})
+	});
+}
+function ComboboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		"data-slot": "combobox-item",
+		className: cn("relative flex w-full cursor-default select-none items-center gap-2 py-1.5 pr-8 pl-2", "rounded-[var(--ds-radius-sm)] text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)] outline-none", "data-[highlighted]:bg-[var(--ds-hover)] data-[highlighted]:text-[color:var(--ds-foreground)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "combobox-item-text",
+			className: "flex-1 truncate",
+			children
+		}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			"data-slot": "combobox-item-indicator",
+			className: "absolute right-2 flex size-4 items-center justify-center text-[color:var(--ds-primary)]",
+			children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
+		})]
+	});
+}
+/** Renders per filtered item; use inside a `ComboboxGroup` given `items`, or for a flat list pass a function as `ComboboxContent` children instead. */
+function ComboboxCollection(props) {
+	return /* @__PURE__ */ jsx(Combobox.Collection, { ...props });
+}
+function ComboboxEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("px-2 py-1.5 text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)] empty:m-0 empty:p-0", className),
+		...props
+	});
+}
+function ComboboxStatus({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Status, {
+		"data-slot": "combobox-status",
+		className: cn("px-2 py-1.5 text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)] empty:m-0 empty:p-0", className),
+		...props
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Group, {
+		"data-slot": "combobox-group",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function ComboboxGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+		"data-slot": "combobox-group-label",
+		className: cn("px-2 py-1.5 text-[length:var(--ds-text-caption)] font-medium text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Separator, {
+		"data-slot": "combobox-separator",
+		className: cn("-mx-1 my-1 h-px bg-[var(--ds-border)]", className),
+		...props
+	});
+}
+const useComboboxFilter = Combobox.useFilter;
+//#endregion
+export { Combobox$1 as Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter };
+
+//# sourceMappingURL=combobox.js.map

package/dist/components/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":["Combobox","ComboboxPrimitive"],"sources":["../../src/components/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { Check, ChevronDown, X } from \"lucide-react\";\nimport { createContext, useContext, type ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { inputClassName } from \"@/components/input\";\n\n/**\n * Combobox: a filterable text input with a listbox popup, on Base UI.\n *\n * Give the Root `items` (an array, or `[{ value, label }]`) and render the\n * list with `<ComboboxList>{(item) => <ComboboxItem value={item} />}</ComboboxList>`;\n * Base UI filters `items` against the input as the user types. Without\n * `items` nothing is filtered and `ComboboxEmpty` never shows.\n *\n * - `ComboboxInput` is our `Input` with a trailing open/close trigger and,\n *   with `clearable`, an X button that clears the value.\n * - `ComboboxContent` composes Portal + Positioner + Popup + List so\n *   consumers write one element; positioning props go to the Positioner.\n * - Multiple selection: set `multiple` on the Root and wrap `ComboboxValue`\n *   (rendering a `ComboboxChip` per value) plus `ComboboxInput` in\n *   `ComboboxChips`. Inside `ComboboxChips` the input drops its own frame;\n *   the chips container carries the field look and anchors the popup.\n * - `useComboboxFilter` is Base UI's `useFilter` for external filtering via\n *   `filteredItems`.\n *\n * `onValueChange` receives `(value, eventDetails)`; `onInputValueChange`\n * reports the typed text.\n */\nfunction Combobox<Value, Multiple extends boolean | undefined = false, Item = Value>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple, Item>,\n) {\n  return <ComboboxPrimitive.Root {...props} />;\n}\n\nconst InsideChipsContext = /* @__PURE__ */ createContext(false);\n\nconst controlButtonClassName = /* @__PURE__ */ cn(\n  \"flex size-6 shrink-0 items-center justify-center rounded-[var(--ds-radius-sm)]\",\n  \"text-[color:var(--ds-muted-foreground)] outline-none\",\n  \"transition-[background-color,color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n  \"hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]\",\n  \"focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n  \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n  \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n);\n\nfunction ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      aria-label=\"Open\"\n      className={cn(controlButtonClassName, className)}\n      {...props}\n    >\n      {children ?? (\n        <ComboboxPrimitive.Icon\n          data-slot=\"combobox-icon\"\n          className=\"flex transition-transform duration-[var(--ds-duration-fast)] data-[popup-open]:rotate-180\"\n        >\n          <ChevronDown />\n        </ComboboxPrimitive.Icon>\n      )}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nfunction ComboboxClear({ className, children, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      aria-label=\"Clear\"\n      className={cn(controlButtonClassName, className)}\n      {...props}\n    >\n      {children ?? <X />}\n    </ComboboxPrimitive.Clear>\n  );\n}\n\nexport interface ComboboxInputProps extends ComboboxPrimitive.Input.Props {\n  /** Show an X button that clears the selection while there is one. */\n  clearable?: boolean;\n  /** Class for the wrapper that holds the input and its buttons. */\n  wrapperClassName?: string;\n}\n\nfunction ComboboxInput({ className, clearable = false, wrapperClassName, ...props }: ComboboxInputProps) {\n  const insideChips = useContext(InsideChipsContext);\n  if (insideChips) {\n    return (\n      <ComboboxPrimitive.Input\n        data-slot=\"combobox-input\"\n        className={cn(\n          \"h-7 min-w-16 flex-1 bg-transparent outline-none\",\n          \"text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-foreground)]\",\n          \"placeholder:text-[color:var(--ds-text-tertiary)]\",\n          \"disabled:cursor-not-allowed\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  }\n  return (\n    <ComboboxPrimitive.InputGroup\n      data-slot=\"combobox-input-group\"\n      className={cn(\"relative flex w-full items-center\", wrapperClassName)}\n    >\n      <ComboboxPrimitive.Input\n        data-slot=\"combobox-input\"\n        className={cn(inputClassName, clearable ? \"pr-16\" : \"pr-9\", className)}\n        {...props}\n      />\n      <div className=\"absolute inset-y-0 right-1.5 flex items-center gap-0.5\">\n        {clearable ? <ComboboxClear /> : null}\n        <ComboboxTrigger />\n      </div>\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nfunction ComboboxValue(props: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value {...props} />;\n}\n\nexport interface ComboboxChipsProps extends ComboboxPrimitive.Chips.Props {\n  /** Class for the inner chip row; `className` styles the field frame. */\n  chipsClassName?: string;\n}\n\nfunction ComboboxChips({ className, chipsClassName, children, ...props }: ComboboxChipsProps) {\n  return (\n    <InsideChipsContext.Provider value>\n      <ComboboxPrimitive.InputGroup\n        data-slot=\"combobox-input-group\"\n        className={cn(\n          \"relative flex w-full min-w-0 items-start gap-1 rounded-[var(--ds-radius-md)] border border-[var(--ds-border)] bg-[var(--ds-muted)] py-1 pl-1.5 pr-1.5\",\n          \"transition-[border-color,box-shadow] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n          \"hover:border-[var(--ds-border-strong)]\",\n          \"focus-within:border-[var(--ds-ring)] focus-within:ring-[3px] focus-within:ring-[var(--ds-ring)]/40\",\n          \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n          \"data-[invalid]:border-[var(--ds-destructive)] data-[invalid]:ring-[3px] data-[invalid]:ring-[var(--ds-destructive)]/20\",\n          className,\n        )}\n      >\n        <ComboboxPrimitive.Chips\n          data-slot=\"combobox-chips\"\n          className={cn(\"flex min-h-7 min-w-0 flex-1 flex-wrap items-center gap-1 px-1\", chipsClassName)}\n          {...props}\n        >\n          {children}\n        </ComboboxPrimitive.Chips>\n        <ComboboxTrigger className=\"mt-0.5\" />\n      </ComboboxPrimitive.InputGroup>\n    </InsideChipsContext.Provider>\n  );\n}\n\nexport interface ComboboxChipProps extends ComboboxPrimitive.Chip.Props {\n  /** Hide the remove button. */\n  removable?: boolean;\n}\n\nfunction ComboboxChip({ className, children, removable = true, ...props }: ComboboxChipProps) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"inline-flex h-6 max-w-full cursor-default items-center gap-1 whitespace-nowrap border pl-2.5 outline-none\",\n        removable ? \"pr-1\" : \"pr-2.5\",\n        \"rounded-[var(--ds-radius-full)] border-[var(--ds-border-subtle)] bg-[var(--ds-hover)]\",\n        \"text-[length:var(--ds-text-caption)] font-medium text-[color:var(--ds-muted-foreground)]\",\n        \"focus-visible:border-[var(--ds-ring)] focus-visible:bg-[var(--ds-primary-soft)] focus-visible:text-[color:var(--ds-primary)]\",\n        \"data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"truncate\">{children}</span>\n      {removable ? (\n        <ComboboxPrimitive.ChipRemove\n          data-slot=\"combobox-chip-remove\"\n          aria-label=\"Remove\"\n          className={cn(\n            \"flex size-4 shrink-0 items-center justify-center rounded-[var(--ds-radius-full)] outline-none\",\n            \"transition-[background-color,color] duration-[var(--ds-duration-fast)]\",\n            \"hover:bg-[var(--ds-border)] hover:text-[color:var(--ds-foreground)]\",\n            \"[&_svg]:size-3\",\n          )}\n        >\n          <X />\n        </ComboboxPrimitive.ChipRemove>\n      ) : null}\n    </ComboboxPrimitive.Chip>\n  );\n}\n\ntype PositionerProps = Pick<\n  ComboboxPrimitive.Positioner.Props,\n  | \"side\"\n  | \"align\"\n  | \"sideOffset\"\n  | \"alignOffset\"\n  | \"anchor\"\n  | \"collisionBoundary\"\n  | \"collisionPadding\"\n  | \"collisionAvoidance\"\n  | \"sticky\"\n  | \"positionMethod\"\n>;\n\nexport interface ComboboxContentProps\n  extends Omit<ComboboxPrimitive.Popup.Props, \"children\">,\n    PositionerProps {\n  /** Items, or a render function called per filtered item (needs `items` on the Root). */\n  children?: ComboboxPrimitive.List.Props[\"children\"];\n  /**\n   * Shown (via `ComboboxEmpty`, above the list) when nothing matches the query.\n   * Needs `items` on the Root.\n   */\n  empty?: ReactNode;\n  /** Class for the inner List element. */\n  listClassName?: string;\n  /** Keep the popup mounted in the DOM while hidden. */\n  keepMounted?: boolean;\n  /** Where to portal the popup; defaults to `<body>`. */\n  container?: ComboboxPrimitive.Portal.Props[\"container\"];\n}\n\nfunction ComboboxContent({\n  className,\n  children,\n  empty,\n  listClassName,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset,\n  anchor,\n  collisionBoundary,\n  collisionPadding,\n  collisionAvoidance,\n  sticky,\n  positionMethod,\n  keepMounted,\n  container,\n  ...props\n}: ComboboxContentProps) {\n  return (\n    <ComboboxPrimitive.Portal keepMounted={keepMounted} container={container}>\n      <ComboboxPrimitive.Positioner\n        data-slot=\"combobox-positioner\"\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        collisionBoundary={collisionBoundary}\n        collisionPadding={collisionPadding}\n        collisionAvoidance={collisionAvoidance}\n        sticky={sticky}\n        positionMethod={positionMethod}\n        className=\"isolate z-50 outline-none\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          className={cn(\n            \"flex max-h-[min(var(--available-height,none),24rem)] w-[var(--anchor-width,auto)] min-w-[var(--anchor-width,auto)] flex-col overflow-hidden\",\n            \"rounded-[var(--ds-radius-lg)] border border-[var(--ds-border)]\",\n            \"bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]\",\n            \"outline-none\",\n            \"open:animate-in open:fade-in-0 open:zoom-in-95\",\n            \"closed:animate-out closed:fade-out-0 closed:zoom-out-95\",\n            \"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            \"duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n            className,\n          )}\n          {...props}\n        >\n          {empty !== undefined ? <ComboboxEmpty>{empty}</ComboboxEmpty> : null}\n          <ComboboxPrimitive.List\n            data-slot=\"combobox-list\"\n            className={cn(\"flex flex-col overflow-y-auto overflow-x-hidden p-1 outline-none\", listClassName)}\n          >\n            {children}\n          </ComboboxPrimitive.List>\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nfunction ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default select-none items-center gap-2 py-1.5 pr-8 pl-2\",\n        \"rounded-[var(--ds-radius-sm)] text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)] outline-none\",\n        \"data-[highlighted]:bg-[var(--ds-hover)] data-[highlighted]:text-[color:var(--ds-foreground)]\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span data-slot=\"combobox-item-text\" className=\"flex-1 truncate\">\n        {children}\n      </span>\n      <ComboboxPrimitive.ItemIndicator\n        data-slot=\"combobox-item-indicator\"\n        className=\"absolute right-2 flex size-4 items-center justify-center text-[color:var(--ds-primary)]\"\n      >\n        <Check className=\"size-4\" />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  );\n}\n\n/** Renders per filtered item; use inside a `ComboboxGroup` given `items`, or for a flat list pass a function as `ComboboxContent` children instead. */\nfunction ComboboxCollection(props: ComboboxPrimitive.Collection.Props) {\n  return <ComboboxPrimitive.Collection {...props} />;\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"px-2 py-1.5 text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)] empty:m-0 empty:p-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxStatus({ className, ...props }: ComboboxPrimitive.Status.Props) {\n  return (\n    <ComboboxPrimitive.Status\n      data-slot=\"combobox-status\"\n      className={cn(\n        \"px-2 py-1.5 text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)] empty:m-0 empty:p-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(\"flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxGroupLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-group-label\"\n      className={cn(\n        \"px-2 py-1.5 text-[length:var(--ds-text-caption)] font-medium text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-[var(--ds-border)]\", className)}\n      {...props}\n    />\n  );\n}\n\nconst useComboboxFilter = ComboboxPrimitive.useFilter;\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxTrigger,\n  ComboboxClear,\n  ComboboxValue,\n  ComboboxContent,\n  ComboboxItem,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxStatus,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  useComboboxFilter,\n};\n"],"mappings":"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"}

package/dist/components/command.d.ts

@@ -0,0 +1,50 @@
+"use client";
+import { Dialog, DialogContentProps } from "./dialog.js";
+import * as React from "react";
+import { Command } from "cmdk";
+//#region src/components/command.d.ts
+/**
+ * Command palette on cmdk, styled like DropdownMenu.
+ *
+ * cmdk filters and ranks items itself from each item's text (or `value` /
+ * `keywords`); `CommandEmpty` renders when nothing matches. The selected
+ * (keyboard-highlighted) item carries `data-selected="true"`; `onSelect` on
+ * `CommandItem` fires on click and on Enter.
+ *
+ * `CommandDialog` puts a palette inside our Dialog with no header padding;
+ * it needs a `title` (visually hidden) so the dialog is labelled. Wire
+ * `open` / `onOpenChange` to a global shortcut (⌘K) for the usual pattern.
+ */
+declare function Command$1({ className, ...props }: React.ComponentProps<typeof Command>): React.JSX.Element;
+export interface CommandDialogProps extends React.ComponentProps<typeof Dialog> {
+  /** Accessible name for the dialog; visually hidden. */
+  title?: string;
+  /** Accessible description for the dialog; visually hidden. */
+  description?: string;
+  /** Class for the dialog popup. */
+  className?: string;
+  /** Class for the inner Command root. */
+  commandClassName?: string;
+  /** Where to portal the dialog; defaults to `<body>`. */
+  container?: DialogContentProps["container"];
+  /** Keep the dialog mounted in the DOM while hidden. */
+  keepMounted?: boolean;
+  /** Props for the inner cmdk root (`filter`, `shouldFilter`, `loop`, `value`, ...). */
+  commandProps?: Omit<React.ComponentProps<typeof Command>, "children" | "className">;
+  children?: React.ReactNode;
+}
+declare function CommandDialog({ title, description, className, commandClassName, container, keepMounted, commandProps, children, ...props }: CommandDialogProps): 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({ className, ...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;
+export interface CommandItemProps extends React.ComponentProps<typeof Command.Item> {
+  variant?: "default" | "destructive";
+}
+declare function CommandItem({ className, variant, ...props }: CommandItemProps): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function CommandLoading(props: React.ComponentProps<typeof Command.Loading>): React.JSX.Element;
+//#endregion
+export { Command$1 as Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut };
+//# sourceMappingURL=command.d.ts.map

package/dist/components/command.js

@@ -0,0 +1,117 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
+import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command } from "cmdk";
+//#region src/components/command.tsx
+/**
+* Command palette on cmdk, styled like DropdownMenu.
+*
+* cmdk filters and ranks items itself from each item's text (or `value` /
+* `keywords`); `CommandEmpty` renders when nothing matches. The selected
+* (keyboard-highlighted) item carries `data-selected="true"`; `onSelect` on
+* `CommandItem` fires on click and on Enter.
+*
+* `CommandDialog` puts a palette inside our Dialog with no header padding;
+* it needs a `title` (visually hidden) so the dialog is labelled. Wire
+* `open` / `onOpenChange` to a global shortcut (⌘K) for the usual pattern.
+*/
+function Command$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command, {
+		"data-slot": "command",
+		className: cn("flex h-full w-full flex-col overflow-hidden outline-none", "rounded-[var(--ds-radius-lg)] bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)]", className),
+		...props
+	});
+}
+function CommandDialog({ title = "Command palette", description = "Search for a command to run", className, commandClassName, container, keepMounted, commandProps, children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		...props,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			"data-slot": "command-dialog",
+			container,
+			keepMounted,
+			className: cn("max-w-xl overflow-hidden p-0", className),
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: "sr-only",
+					children: title
+				}),
+				/* @__PURE__ */ jsx(DialogDescription, {
+					className: "sr-only",
+					children: description
+				}),
+				/* @__PURE__ */ jsx(Command$1, {
+					className: cn("rounded-none", "[&_[data-slot=command-input-wrapper]]:h-12 [&_[data-slot=command-input-wrapper]_svg]:size-5", "[&_[data-slot=command-input]]:h-12 [&_[data-slot=command-input]]:text-[length:var(--ds-text-body-sm)]", "[&_[data-slot=command-list]]:max-h-80", "[&_[data-slot=command-item]]:py-2 [&_[data-slot=command-item]_svg]:size-5", commandClassName),
+					...commandProps,
+					children
+				})
+			]
+		})
+	});
+}
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "command-input-wrapper",
+		className: "flex h-10 items-center gap-2 border-b border-[var(--ds-border)] px-3",
+		children: [/* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0 text-[color:var(--ds-muted-foreground)]" }), /* @__PURE__ */ jsx(Command.Input, {
+			"data-slot": "command-input",
+			className: cn("flex h-10 w-full min-w-0 bg-transparent py-2 outline-none", "text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]", "placeholder:text-[color:var(--ds-text-tertiary)]", "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-72 scroll-py-1 overflow-y-auto overflow-x-hidden p-1 outline-none", className),
+		...props
+	});
+}
+function CommandEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command.Empty, {
+		"data-slot": "command-empty",
+		className: cn("py-6 text-center text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command.Group, {
+		"data-slot": "command-group",
+		className: cn("overflow-hidden text-[color:var(--ds-foreground)]", "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5", "[&_[cmdk-group-heading]]:text-[length:var(--ds-text-caption)] [&_[cmdk-group-heading]]:font-medium", "[&_[cmdk-group-heading]]:text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command.Separator, {
+		"data-slot": "command-separator",
+		className: cn("-mx-1 my-1 h-px bg-[var(--ds-border-subtle)]", className),
+		...props
+	});
+}
+function CommandItem({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Command.Item, {
+		"data-slot": "command-item",
+		"data-variant": variant,
+		className: cn("relative flex cursor-default select-none items-center gap-2 px-2 py-1.5 outline-none", "rounded-[var(--ds-radius-sm)] text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-foreground)]", "transition-colors duration-[var(--ds-duration-fast)]", "data-[selected=true]:bg-[var(--ds-hover)] data-[selected=true]:text-[color:var(--ds-foreground)]", "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", variant === "destructive" && "text-[color:var(--ds-destructive)] data-[selected=true]:bg-[var(--ds-destructive-soft)] data-[selected=true]:text-[color:var(--ds-destructive)]", className),
+		...props
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: cn("ml-auto text-[length:var(--ds-text-caption)] tracking-widest text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+function CommandLoading(props) {
+	return /* @__PURE__ */ jsx(Command.Loading, {
+		"data-slot": "command-loading",
+		...props
+	});
+}
+//#endregion
+export { Command$1 as Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, 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 { Command as CommandPrimitive } from \"cmdk\";\nimport { Search } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport {\n  Dialog,\n  DialogContent,\n  type DialogContentProps,\n  DialogDescription,\n  DialogTitle,\n} from \"@/components/dialog\";\n\n/**\n * Command palette on cmdk, styled like DropdownMenu.\n *\n * cmdk filters and ranks items itself from each item's text (or `value` /\n * `keywords`); `CommandEmpty` renders when nothing matches. The selected\n * (keyboard-highlighted) item carries `data-selected=\"true\"`; `onSelect` on\n * `CommandItem` fires on click and on Enter.\n *\n * `CommandDialog` puts a palette inside our Dialog with no header padding;\n * it needs a `title` (visually hidden) so the dialog is labelled. Wire\n * `open` / `onOpenChange` to a global shortcut (⌘K) for the usual pattern.\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 outline-none\",\n        \"rounded-[var(--ds-radius-lg)] bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface CommandDialogProps extends React.ComponentProps<typeof Dialog> {\n  /** Accessible name for the dialog; visually hidden. */\n  title?: string;\n  /** Accessible description for the dialog; visually hidden. */\n  description?: string;\n  /** Class for the dialog popup. */\n  className?: string;\n  /** Class for the inner Command root. */\n  commandClassName?: string;\n  /** Where to portal the dialog; defaults to `<body>`. */\n  container?: DialogContentProps[\"container\"];\n  /** Keep the dialog mounted in the DOM while hidden. */\n  keepMounted?: boolean;\n  /** Props for the inner cmdk root (`filter`, `shouldFilter`, `loop`, `value`, ...). */\n  commandProps?: Omit<React.ComponentProps<typeof CommandPrimitive>, \"children\" | \"className\">;\n  children?: React.ReactNode;\n}\n\nfunction CommandDialog({\n  title = \"Command palette\",\n  description = \"Search for a command to run\",\n  className,\n  commandClassName,\n  container,\n  keepMounted,\n  commandProps,\n  children,\n  ...props\n}: CommandDialogProps) {\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        data-slot=\"command-dialog\"\n        container={container}\n        keepMounted={keepMounted}\n        className={cn(\"max-w-xl overflow-hidden p-0\", className)}\n      >\n        <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n        <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n        <Command\n          className={cn(\n            \"rounded-none\",\n            \"[&_[data-slot=command-input-wrapper]]:h-12 [&_[data-slot=command-input-wrapper]_svg]:size-5\",\n            \"[&_[data-slot=command-input]]:h-12 [&_[data-slot=command-input]]:text-[length:var(--ds-text-body-sm)]\",\n            \"[&_[data-slot=command-list]]:max-h-80\",\n            \"[&_[data-slot=command-item]]:py-2 [&_[data-slot=command-item]_svg]:size-5\",\n            commandClassName,\n          )}\n          {...commandProps}\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-10 items-center gap-2 border-b border-[var(--ds-border)] px-3\"\n    >\n      <Search className=\"size-4 shrink-0 text-[color:var(--ds-muted-foreground)]\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full min-w-0 bg-transparent py-2 outline-none\",\n          \"text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]\",\n          \"placeholder:text-[color:var(--ds-text-tertiary)]\",\n          \"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(\n        \"max-h-72 scroll-py-1 overflow-y-auto overflow-x-hidden p-1 outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\n        \"py-6 text-center text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden text-[color:var(--ds-foreground)]\",\n        \"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5\",\n        \"[&_[cmdk-group-heading]]:text-[length:var(--ds-text-caption)] [&_[cmdk-group-heading]]:font-medium\",\n        \"[&_[cmdk-group-heading]]:text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-[var(--ds-border-subtle)]\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface CommandItemProps extends React.ComponentProps<typeof CommandPrimitive.Item> {\n  variant?: \"default\" | \"destructive\";\n}\n\nfunction CommandItem({ className, variant = \"default\", ...props }: CommandItemProps) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      data-variant={variant}\n      className={cn(\n        \"relative flex cursor-default select-none items-center gap-2 px-2 py-1.5 outline-none\",\n        \"rounded-[var(--ds-radius-sm)] text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-foreground)]\",\n        \"transition-colors duration-[var(--ds-duration-fast)]\",\n        \"data-[selected=true]:bg-[var(--ds-hover)] data-[selected=true]:text-[color:var(--ds-foreground)]\",\n        \"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        variant === \"destructive\" &&\n          \"text-[color:var(--ds-destructive)] data-[selected=true]:bg-[var(--ds-destructive-soft)] data-[selected=true]:text-[color:var(--ds-destructive)]\",\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(\n        \"ml-auto text-[length:var(--ds-text-caption)] tracking-widest text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandLoading(props: React.ComponentProps<typeof CommandPrimitive.Loading>) {\n  return <CommandPrimitive.Loading data-slot=\"command-loading\" {...props} />;\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandSeparator,\n  CommandShortcut,\n  CommandLoading,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,SAASA,UAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,oBAACC,SAAD;EACE,aAAU;EACV,WAAW,GACT,4DACA,kGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAoBA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,+BACd,WACA,kBACA,WACA,aACA,cACA,UACA,GAAG,SACkB;CACrB,OACE,oBAAC,QAAD;EAAQ,GAAI;EACV,UAAA,qBAAC,eAAD;GACE,aAAU;GACC;GACE;GACb,WAAW,GAAG,gCAAgC,SAAS;GAJzD,UAAA;IAME,oBAAC,aAAD;KAAa,WAAU;KAAW,UAAA;IAAmB,CAAA;IACrD,oBAAC,mBAAD;KAAmB,WAAU;KAAW,UAAA;IAA+B,CAAA;IACvE,oBAACD,WAAD;KACE,WAAW,GACT,gBACA,+FACA,yGACA,yCACA,6EACA,gBACF;KACA,GAAI;KAEH;IACM,CAAA;GACI;;CACT,CAAA;AAEZ;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAA8D;CAClG,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAU;EAFZ,UAAA,CAIE,oBAAC,QAAD,EAAQ,WAAU,0DAA2D,CAAA,GAC7E,oBAACC,QAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,6DACA,6EACA,oDACA,mDACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GACT,2EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAA8D;CAClG,OACE,oBAACA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAA8D;CAClG,OACE,oBAACA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,qDACA,iEACA,sGACA,oEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAkE;CAC1G,OACE,oBAACA,QAAiB,WAAlB;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,YAAY,EAAE,WAAW,UAAU,WAAW,GAAG,SAA2B;CACnF,OACE,oBAACA,QAAiB,MAAlB;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GACT,wFACA,wGACA,wDACA,oGACA,4EACA,qFACA,YAAY,iBACV,mJACF,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,wGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,OAA8D;CACpF,OAAO,oBAACA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E"}

package/dist/components/data-table/data-table.d.ts

@@ -0,0 +1,65 @@
+"use client";
+import { DataTableInstance, DataTableRow, DataTableTable, UseDataTableOptions } from "./types.js";
+import * as React from "react";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/data-table/data-table.d.ts
+export interface DataTableViewProps<Row extends RowData> {
+  className?: string;
+  /** Height of the scrolling body. Required for virtualisation to mean anything; defaults to 600px when virtualised. */
+  maxHeight?: number | string;
+  /** Force virtualisation on or off; undefined virtualises above 100 rows. */
+  virtualize?: boolean;
+  /** Estimated row height in px for the virtualizer. @default 40 */
+  rowHeight?: number;
+  /** @default true */
+  stickyHeader?: boolean;
+  /** @default "default" */
+  density?: "default" | "compact";
+  /** Detail panel under an expanded row; enables the expander column. */
+  renderSubComponent?: (row: DataTableRow<Row>) => React.ReactNode;
+  /** `false` hides the toolbar; a function replaces it. */
+  toolbar?: boolean | ((ctx: {
+    instance: DataTableInstance<Row>;
+  }) => React.ReactNode);
+  /** Rendered in the toolbar while rows are selected. */
+  bulkActions?: (ctx: {
+    rows: Row[];
+    table: DataTableTable<Row>;
+  }) => React.ReactNode;
+  /** Extra toolbar controls (right side). */
+  toolbarActions?: React.ReactNode;
+  searchPlaceholder?: string;
+  emptyState?: React.ReactNode;
+  /** @default "No results" */
+  emptyMessage?: string;
+  pageSizeOptions?: number[];
+  /** @default true */
+  enableExport?: boolean;
+  /** @default "export" */
+  exportFileName?: string;
+  /** Show the loading skeleton regardless of the source's own state. */
+  loading?: boolean;
+  /** Error to show above the table, in addition to the server source's. */
+  error?: string | Error | null;
+  onRowClick?: (row: Row, event: React.MouseEvent<HTMLTableRowElement>) => void;
+  /**
+   * The row a detail pane is currently showing, matched against the row id
+   * (`getRowId`, the row index when that is not set). It gets `data-active`
+   * and the `--ds-primary-soft` tint, independent of checkbox selection — a
+   * master/detail list highlights one row without selecting it, and a table
+   * with both can show a selected set and one open row at once.
+   */
+  activeRowId?: string | null;
+  /** Extra classes per row, e.g. to dim rows the app considers stale. */
+  rowClassName?: (row: Row) => string | undefined;
+}
+export type DataTableProps<Row extends RowData> = DataTableViewProps<Row> & ({
+  instance: DataTableInstance<Row>;
+} | UseDataTableOptions<Row>);
+declare function DataTable<Row extends RowData>(props: DataTableProps<Row>): React.JSX.Element;
+declare function DataTableView<Row extends RowData>({ instance, className, maxHeight, virtualize, rowHeight, stickyHeader, density, renderSubComponent, toolbar, bulkActions, toolbarActions, searchPlaceholder, emptyState, emptyMessage, pageSizeOptions, enableExport, exportFileName, loading, error, onRowClick, activeRowId, rowClassName }: DataTableViewProps<Row> & {
+  instance: DataTableInstance<Row>;
+}): React.JSX.Element;
+//#endregion
+export { DataTable, DataTableView };
+//# sourceMappingURL=data-table.d.ts.map