@nsaa/core 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/calendar/calendar.d.ts

@@ -0,0 +1,11 @@
+
+import { Button } from "../button/button.js";
+import * as React from "react";
+import { DayButton, DayPicker, Locale } from "react-day-picker";
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, locale, onClick, "aria-label": label, ...props }: React.ComponentProps<typeof DayButton> & {
+  locale?: Partial<Locale>;
+}): React.JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/calendar/calendar.js

@@ -0,0 +1,131 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { useCue } from "../sound/sound-map.js";
+import { Button, buttonVariants } from "../button/button.js";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+// src/calendar/calendar.tsx
+/** Lucide's chevrons, in place of shadcn's icon placeholder. */
+function ChevronIcon({ className, orientation }) {
+	return /* @__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",
+		"aria-hidden": "true",
+		className,
+		children: /* @__PURE__ */ jsx("path", { d: orientation === "left" ? "m15 18-6-6 6-6" : orientation === "right" ? "m9 18 6-6-6-6" : "m6 9 6 6 6-6" })
+	});
+}
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		className: cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
+		captionLayout,
+		locale,
+		formatters: {
+			formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+			...formatters
+		},
+		classNames: {
+			root: cn("w-fit", defaultClassNames.root),
+			months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+			month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+			nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+			button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
+			button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
+			month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+			dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+			dropdown_root: cn("cn-calendar-dropdown-root relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+			dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+			caption_label: cn("font-medium select-none", captionLayout === "label" ? "cn-calendar-caption text-sm" : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+			month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+			weekdays: cn("flex", defaultClassNames.weekdays),
+			weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+			week: cn("mt-2 flex w-full", defaultClassNames.week),
+			week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+			week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+			day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
+			range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
+			range_middle: cn("rounded-none", defaultClassNames.range_middle),
+			range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
+			today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+			outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+			disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+			hidden: cn("invisible", defaultClassNames.hidden),
+			...classNames
+		},
+		components: {
+			Root: ({ className, rootRef, ...props }) => {
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": "calendar",
+					ref: rootRef,
+					className: cn(className),
+					...props
+				});
+			},
+			Chevron: ({ className, orientation }) => {
+				if (orientation === "left") return /* @__PURE__ */ jsx(ChevronIcon, {
+					orientation: "left",
+					className: cn("cn-rtl-flip size-4", className)
+				});
+				if (orientation === "right") return /* @__PURE__ */ jsx(ChevronIcon, {
+					orientation: "right",
+					className: cn("cn-rtl-flip size-4", className)
+				});
+				return /* @__PURE__ */ jsx(ChevronIcon, {
+					orientation: "down",
+					className: cn("size-4", className)
+				});
+			},
+			DayButton: ({ ...props }) => /* @__PURE__ */ jsx(CalendarDayButton, {
+				locale,
+				...props
+			}),
+			WeekNumber: ({ children, ...props }) => {
+				return /* @__PURE__ */ jsx("td", {
+					...props,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex size-(--cell-size) items-center justify-center text-center",
+						children
+					})
+				});
+			},
+			...components
+		},
+		...props
+	});
+}
+function CalendarDayButton({ className, day, modifiers, locale, onClick, "aria-label": label, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	const cue = useCue("calendar");
+	const ref = React.useRef(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		"data-day": day.date.toLocaleDateString(locale?.code),
+		"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+		"data-range-start": modifiers.range_start,
+		"data-range-end": modifiers.range_end,
+		"data-range-middle": modifiers.range_middle,
+		ref,
+		"aria-label": label?.replace(/\b(\d{1,2})(?:st|nd|rd|th)\b/, "$1"),
+		"aria-current": modifiers.today ? "date" : void 0,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!modifiers.disabled) cue("select");
+		},
+		className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+		...props
+	});
+}
+export { Calendar, CalendarDayButton };

package/dist/calendar/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Calendar, CalendarDayButton } from "./calendar.js";
+export { Calendar, CalendarDayButton };

package/dist/card/card.d.ts

@@ -0,0 +1,12 @@
+
+import * as React from "react";
+declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
+  size?: "default" | "sm";
+}): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/card/card.js

@@ -0,0 +1,55 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/card/card.tsx
+function Card({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		"data-size": size,
+		className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
+		...props
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className),
+		...props
+	});
+}
+function CardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-title",
+		className: cn("cn-font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className),
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+}
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-action",
+		className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: cn("px-(--card-spacing)", className),
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className),
+		...props
+	});
+}
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/card/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,4 @@
+
+import { Checkbox } from "@base-ui/react/checkbox";
+declare function Checkbox$1({ className, onCheckedChange, ...props }: Checkbox.Root.Props): import("react").JSX.Element;
+export { Checkbox$1 as Checkbox };

package/dist/checkbox/checkbox.js

@@ -0,0 +1,35 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { useCue } from "../sound/sound-map.js";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+// src/checkbox/checkbox.tsx
+function Checkbox$1({ className, onCheckedChange, ...props }) {
+	const cue = useCue("checkbox");
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary", className),
+		onCheckedChange: (checked, details) => {
+			onCheckedChange?.(checked, details);
+			if (!details.isCanceled) cue(checked ? "on" : "off");
+		},
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			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",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+			})
+		})
+	});
+}
+export { Checkbox$1 as Checkbox };

package/dist/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Checkbox } from "./checkbox.js";
+export { Checkbox };

package/dist/collapsible/collapsible.d.ts

@@ -0,0 +1,6 @@
+
+import { Collapsible } from "@base-ui/react/collapsible";
+declare function Collapsible$1({ ...props }: Collapsible.Root.Props): import("react").JSX.Element;
+declare function CollapsibleTrigger({ ...props }: Collapsible.Trigger.Props): import("react").JSX.Element;
+declare function CollapsibleContent({ ...props }: Collapsible.Panel.Props): import("react").JSX.Element;
+export { Collapsible$1 as Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/collapsible/collapsible.js

@@ -0,0 +1,24 @@
+"use client";
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+// src/collapsible/collapsible.tsx
+function Collapsible$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "collapsible",
+		...props
+	});
+}
+function CollapsibleTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		"data-slot": "collapsible-trigger",
+		...props
+	});
+}
+function CollapsibleContent({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		"data-slot": "collapsible-content",
+		...props
+	});
+}
+export { Collapsible$1 as Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/collapsible/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/combobox/combobox.d.ts

@@ -0,0 +1,27 @@
+
+import * as React from "react";
+import { Combobox } from "@base-ui/react/combobox";
+declare function Combobox$1<Value, Multiple extends boolean | undefined = false, Item = Value>({ onValueChange, ...props }: Combobox.Root.Props<Value, Multiple, Item>): React.JSX.Element;
+declare function ComboboxValue({ ...props }: Combobox.Value.Props): React.JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: Combobox.Trigger.Props): React.JSX.Element;
+declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: Combobox.Input.Props & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+}): React.JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: Combobox.Popup.Props & Pick<Combobox.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): React.JSX.Element;
+declare function ComboboxList({ className, ...props }: Combobox.List.Props): React.JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: Combobox.Item.Props): React.JSX.Element;
+declare function ComboboxGroup({ className, ...props }: Combobox.Group.Props): React.JSX.Element;
+declare function ComboboxLabel({ className, ...props }: Combobox.GroupLabel.Props): React.JSX.Element;
+declare function ComboboxCollection({ ...props }: Combobox.Collection.Props): React.JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: Combobox.Empty.Props): React.JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: Combobox.Separator.Props): React.JSX.Element;
+declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof Combobox.Chips> & Combobox.Chips.Props): React.JSX.Element;
+declare function ComboboxChip({ className, children, showRemove, removeLabel, ...props }: Combobox.Chip.Props & {
+  showRemove?: boolean;
+  /** Nsaa (#92, Proposed): the remove button's accessible name. */
+  removeLabel?: string;
+}): React.JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: Combobox.Input.Props): React.JSX.Element;
+declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
+export { Combobox$1 as Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };

package/dist/combobox/combobox.js

@@ -0,0 +1,226 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { useCue } from "../sound/sound-map.js";
+import { Button } from "../button/button.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../input-group/input-group.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Combobox } from "@base-ui/react/combobox";
+// src/combobox/combobox.tsx
+const COMBOBOX_CUE = {
+	"item-press": "choose",
+	"clear-press": "clear",
+	"escape-key": "clear",
+	"chip-remove-press": "chip-remove"
+};
+function Combobox$1({ onValueChange, ...props }) {
+	const cue = useCue("combobox");
+	return /* @__PURE__ */ jsx(Combobox.Root, {
+		onValueChange: (value, details) => {
+			onValueChange?.(value, details);
+			const reason = details.reason === "none" && Array.isArray(value) ? "chip-remove-press" : details.reason;
+			const event = COMBOBOX_CUE[reason];
+			if (!details.isCanceled && event) cue(event);
+		},
+		...props
+	});
+}
+function ComboboxValue({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+function ComboboxTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
+		"data-slot": "combobox-trigger",
+		"aria-label": "Show options",
+		className: cn("[&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [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: "pointer-events-none size-4 text-muted-foreground",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+		})]
+	});
+}
+function ComboboxClear({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Clear, {
+		"data-slot": "combobox-clear",
+		"aria-label": "Clear",
+		render: /* @__PURE__ */ jsx(InputGroupButton, {
+			variant: "ghost",
+			size: "icon-xs"
+		}),
+		className: cn(className),
+		...props,
+		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: "pointer-events-none",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+		})
+	});
+}
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className: cn("w-auto", className),
+		children: [
+			/* @__PURE__ */ jsx(Combobox.Input, {
+				render: /* @__PURE__ */ jsx(InputGroupInput, { disabled }),
+				...props
+			}),
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-end",
+				children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
+					size: "icon-xs",
+					variant: "ghost",
+					render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
+					"data-slot": "input-group-button",
+					className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+					disabled
+				}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
+			}),
+			children
+		]
+	});
+}
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		anchor,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Combobox.Popup, {
+			"data-slot": "combobox-content",
+			"data-chips": !!anchor,
+			className: cn("cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+}
+function ComboboxList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.List, {
+		"data-slot": "combobox-list",
+		className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
+		...props
+	});
+}
+function ComboboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		"data-slot": "combobox-item",
+		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-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: [children, /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			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: "pointer-events-none",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+			})
+		})]
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Group, {
+		"data-slot": "combobox-group",
+		className: cn(className),
+		...props
+	});
+}
+function ComboboxLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+		"data-slot": "combobox-label",
+		className: cn("px-2 py-1.5 text-xs text-muted-foreground", className),
+		...props
+	});
+}
+function ComboboxCollection({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className),
+		...props
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Separator, {
+		"data-slot": "combobox-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function ComboboxChips({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Chips, {
+		"data-slot": "combobox-chips",
+		className: cn("flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className),
+		...props
+	});
+}
+function ComboboxChip({ className, children, showRemove = true, removeLabel = typeof children === "string" ? `Remove ${children}` : "Remove", ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		"data-slot": "combobox-chip",
+		className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className),
+		...props,
+		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-xs"
+			}),
+			className: "-ml-1 opacity-50 hover:opacity-100",
+			"data-slot": "combobox-chip-remove",
+			"aria-label": removeLabel,
+			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: "pointer-events-none",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+			})
+		})]
+	});
+}
+function ComboboxChipsInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Input, {
+		"data-slot": "combobox-chip-input",
+		className: cn("min-w-16 flex-1 outline-none", className),
+		...props
+	});
+}
+function useComboboxAnchor() {
+	return React.useRef(null);
+}
+export { Combobox$1 as Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };

package/dist/combobox/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./combobox.js";
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };

package/dist/command/command.d.ts

@@ -0,0 +1,20 @@
+
+import { Dialog } from "../dialog/dialog.js";
+import * as React from "react";
+import { Command } from "cmdk";
+declare function Command$1({ className, ...props }: React.ComponentProps<typeof Command>): React.JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+  children: React.ReactNode;
+}): 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, alwaysRender, ...props }: React.ComponentProps<typeof Command.Separator>): React.JSX.Element | null;
+declare function CommandItem({ className, children, ...props }: React.ComponentProps<typeof Command.Item>): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Command$1 as Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };