@badnpm/ui 0.0.0-stage → 0.0.1

package/dist/esm/components/chart.js

@@ -0,0 +1,133 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from 'cn';
+import * as RechartsPrimitive from 'recharts';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" };
+const INITIAL_DIMENSION = { width: 320, height: 200 };
+const ChartContext = React.createContext(null);
+function useChart() {
+    const context = React.useContext(ChartContext);
+    if (!context) {
+        throw new Error("useChart must be used within a <ChartContainer />");
+    }
+    return context;
+}
+function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+    return (jsx(ChartContext.Provider, { value: { config }, children: jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [jsx(ChartStyle, { id: chartId, config: config }), jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
+}
+const ChartStyle = ({ id, config }) => {
+    const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (jsx("style", { dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES)
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+                .map(([key, itemConfig]) => {
+                const color = itemConfig.theme?.[theme] ??
+                    itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+            })
+                .join("\n")}
+}
+`)
+                .join("\n"),
+        } }));
+};
+const ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
+    const { config } = useChart();
+    const tooltipLabel = React.useMemo(() => {
+        if (hideLabel || !payload?.length) {
+            return null;
+        }
+        const [item] = payload;
+        const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = !labelKey && typeof label === "string"
+            ? (config[label]?.label ?? label)
+            : itemConfig?.label;
+        if (labelFormatter) {
+            return (jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) }));
+        }
+        if (!value) {
+            return null;
+        }
+        return jsx("div", { className: cn("font-medium", labelClassName), children: value });
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey,
+    ]);
+    if (!active || !payload?.length) {
+        return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return (jsxs("div", { className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className), children: [!nestLabel ? tooltipLabel : null, jsx("div", { className: "grid gap-1.5", children: payload
+                    .filter((item) => item.type !== "none")
+                    .map((item, index) => {
+                    const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = color ?? item.payload?.fill ?? item.color;
+                    return (jsx("div", { className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxs(Fragment, { children: [itemConfig?.icon ? (jsx(itemConfig.icon, {})) : (!hideIndicator && (jsx("div", { className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+                                        "h-2.5 w-2.5": indicator === "dot",
+                                        "w-1": indicator === "line",
+                                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                                        "my-0.5": nestLabel && indicator === "dashed",
+                                    }), style: {
+                                        "--color-bg": indicatorColor,
+                                        "--color-border": indicatorColor,
+                                    } }))), jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number"
+                                                ? item.value.toLocaleString()
+                                                : String(item.value) }))] })] })) }, index));
+                }) })] }));
+}
+const ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, }) {
+    const { config } = useChart();
+    if (!payload?.length) {
+        return null;
+    }
+    return (jsx("div", { className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className), children: payload
+            .filter((item) => item.type !== "none")
+            .map((item, index) => {
+            const key = `${nameKey ?? item.dataKey ?? "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return (jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (jsx(itemConfig.icon, {})) : (jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                            backgroundColor: item.color,
+                        } })), itemConfig?.label] }, index));
+        }) }));
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = "payload" in payload &&
+        typeof payload.payload === "object" &&
+        payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (key in payload &&
+        typeof payload[key] === "string") {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === "string") {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };

package/dist/esm/components/checkbox.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { cn } from 'cn';
+import { CheckIcon } from 'lucide-react';
+
+function Checkbox({ className, ...props }) {
+    return (jsx(Checkbox$1.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 disabled:cursor-not-allowed 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), ...props, children: jsx(Checkbox$1.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: jsx(CheckIcon, {}) }) }));
+}
+
+export { Checkbox };

package/dist/esm/components/code-block.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from 'cn';
+import { Button } from './button.js';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+
+const codeBlockVariants = cva("group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 data-[size=sm]:text-xs", {
+    variants: {
+        variant: {
+            default: "border border-input text-foreground has-[>[data-slot=code-block-content]:focus-visible]:border-ring dark:bg-input/30",
+            destructive: "border border-destructive/30 text-destructive dark:border-destructive/40",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function CodeBlock({ className, variant = "default", size = "default", ...props }) {
+    return (jsx("div", { "data-slot": "code-block", "data-variant": variant, "data-size": size, className: cn(codeBlockVariants({ variant }), className), ...props }));
+}
+function CodeBlockHeader({ className, ...props }) {
+    return (jsx("div", { "data-slot": "code-block-header", className: cn("flex min-w-0 shrink-0 items-center gap-2 px-3 pt-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pt-2.5 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0", className), ...props }));
+}
+function CodeBlockTitle({ className, ...props }) {
+    return (jsx("div", { "data-slot": "code-block-title", className: cn("min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5", className), ...props }));
+}
+function CodeBlockActions({ className, ...props }) {
+    return (jsx("div", { "data-slot": "code-block-actions", className: cn("-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10", className), ...props }));
+}
+function CodeBlockCopyButton({ value, variant = "ghost", size = "icon-xs", className, onClick, ...props }) {
+    const [copied, setCopied] = React.useState(false);
+    React.useEffect(() => {
+        if (!copied) {
+            return;
+        }
+        const timeout = setTimeout(() => setCopied(false), 2000);
+        return () => clearTimeout(timeout);
+    }, [copied]);
+    return (jsxs(Fragment, { children: [jsx(Button, { "data-slot": "code-block-copy-button", "data-copied": copied || undefined, variant: variant, size: size, "aria-label": copied ? "Copied" : "Copy", className: cn(className), onClick: (event) => {
+                    onClick?.(event);
+                    navigator.clipboard
+                        .writeText(value)
+                        .then(() => setCopied(true))
+                        .catch(() => { });
+                }, ...props, children: copied ? (jsx(CheckIcon, {})) : (jsx(CopyIcon, {})) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "Copied" : "" })] }));
+}
+function CodeBlockContent({ className, children, style, wrap = false, lineNumbers = false, startLine = 1, ...props }) {
+    return (jsx("pre", { "data-slot": "code-block-content", "data-wrap": wrap || undefined, "data-numbered": lineNumbers || undefined, dir: "ltr", tabIndex: 0, style: { counterReset: `line ${startLine - 1}`, ...style }, className: cn("min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto px-3 py-3 text-start font-mono leading-relaxed outline-none group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap", className), ...props, children: jsx("code", { "data-slot": "code-block-code", className: "grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0", children: lineNumbers && typeof children === "string"
+                ? children
+                    .replace(/\n$/, "")
+                    .split("\n")
+                    .map((line, index) => (jsx(CodeBlockLine, { children: line }, index)))
+                : children }) }));
+}
+const codeBlockLineVariants = cva("relative -mx-3 block min-h-lh px-3 group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']", {
+    variants: {
+        variant: {
+            default: "",
+            added: "bg-muted after:content-['+']",
+            removed: "bg-destructive/10 after:text-destructive after:content-['−']",
+            highlighted: "bg-muted",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function CodeBlockLine({ className, variant = "default", children, ...props }) {
+    // An empty line holds a newline so copying a selection keeps blank lines.
+    const empty = children === undefined ||
+        children === null ||
+        children === "" ||
+        (Array.isArray(children) && children.length === 0);
+    return (jsx("span", { "data-slot": "code-block-line", "data-variant": variant, className: cn(codeBlockLineVariants({ variant }), className), ...props, children: jsx("span", { "data-slot": "code-block-line-content", className: "min-w-0", children: empty ? "\n" : children }) }));
+}
+function CodeBlockFooter({ className, ...props }) {
+    return (jsx("div", { "data-slot": "code-block-footer", className: cn("flex min-w-0 shrink-0 items-center gap-2 px-3 pb-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5", className), ...props }));
+}
+
+export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle };

package/dist/esm/components/collapsible.js

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

package/dist/esm/components/combobox.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Combobox as Combobox$1 } from '@base-ui/react';
+import { cn } from 'cn';
+import { Button } from './button.js';
+import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton } from './input-group.js';
+import { XIcon, CheckIcon, ChevronDownIcon } from 'lucide-react';
+
+const Combobox = Combobox$1.Root;
+function ComboboxValue({ ...props }) {
+    return jsx(Combobox$1.Value, { "data-slot": "combobox-value", ...props });
+}
+function ComboboxTrigger({ className, children, ...props }) {
+    return (jsxs(Combobox$1.Trigger, { "data-slot": "combobox-trigger", className: cn("[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })] }));
+}
+function ComboboxClear({ className, ...props }) {
+    return (jsx(Combobox$1.Clear, { "data-slot": "combobox-clear", "aria-label": "Clear selection", render: jsx(InputGroupButton, { variant: "ghost", size: "icon-xs" }), className: cn(className), ...props, children: jsx(XIcon, { className: "pointer-events-none" }) }));
+}
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+    return (jsxs(InputGroup, { className: cn("w-auto", className), children: [jsx(Combobox$1.Input, { render: jsx(InputGroupInput, { disabled: disabled }), ...props }), jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: jsx(ComboboxTrigger, {}), "aria-label": "Toggle options", "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })), showClear && jsx(ComboboxClear, { disabled: disabled })] }), children] }));
+}
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+    return (jsx(Combobox$1.Portal, { children: jsx(Combobox$1.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: jsx(Combobox$1.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("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 (jsx(Combobox$1.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 (jsxs(Combobox$1.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, jsx(Combobox$1.ItemIndicator, { render: jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
+}
+function ComboboxGroup({ className, ...props }) {
+    return (jsx(Combobox$1.Group, { "data-slot": "combobox-group", className: cn(className), ...props }));
+}
+function ComboboxLabel({ className, ...props }) {
+    return (jsx(Combobox$1.GroupLabel, { "data-slot": "combobox-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
+}
+function ComboboxCollection({ ...props }) {
+    return (jsx(Combobox$1.Collection, { "data-slot": "combobox-collection", ...props }));
+}
+function ComboboxEmpty({ className, ...props }) {
+    return (jsx(Combobox$1.Empty, { "data-slot": "combobox-empty", className: cn("w-full text-center text-sm text-muted-foreground [&:not(:empty)]:py-2", className), ...props }));
+}
+function ComboboxSeparator({ className, ...props }) {
+    return (jsx(Combobox$1.Separator, { "data-slot": "combobox-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function ComboboxChips({ className, ...props }) {
+    return (jsx(Combobox$1.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, ...props }) {
+    return (jsxs(Combobox$1.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 && (jsx(Combobox$1.ChipRemove, { render: jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: jsx(XIcon, { className: "pointer-events-none" }) }))] }));
+}
+function ComboboxChipsInput({ className, ...props }) {
+    return (jsx(Combobox$1.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, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };

package/dist/esm/components/command.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Command as Command$1 } from 'cmdk';
+import { cn } from 'cn';
+import { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent } from './dialog.js';
+import { InputGroup, InputGroupAddon } from './input-group.js';
+import { SearchIcon, CheckIcon } from 'lucide-react';
+
+function Command({ className, ...props }) {
+    return (jsx(Command$1, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", className), ...props }));
+}
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
+    return (jsxs(Dialog, { ...props, children: [jsxs(DialogHeader, { className: "sr-only", children: [jsx(DialogTitle, { children: title }), jsx(DialogDescription, { children: description })] }), jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className), showCloseButton: showCloseButton, children: children })] }));
+}
+function CommandInput({ className, ...props }) {
+    return (jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: jsxs(InputGroup, { className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [jsx(Command$1.Input, { "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), jsx(InputGroupAddon, { children: jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
+}
+function CommandList({ className, ...props }) {
+    return (jsx(Command$1.List, { "data-slot": "command-list", className: cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className), ...props }));
+}
+function CommandEmpty({ className, ...props }) {
+    return (jsx(Command$1.Empty, { "data-slot": "command-empty", className: cn("py-6 text-center text-sm", className), ...props }));
+}
+function CommandGroup({ className, ...props }) {
+    return (jsx(Command$1.Group, { "data-slot": "command-group", className: cn("overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className), ...props }));
+}
+function CommandSeparator({ className, ...props }) {
+    return (jsx(Command$1.Separator, { "data-slot": "command-separator", className: cn("-mx-1 h-px bg-border", className), ...props }));
+}
+function CommandItem({ className, children, ...props }) {
+    return (jsxs(Command$1.Item, { "data-slot": "command-item", className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground", className), ...props, children: [children, jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })] }));
+}
+function CommandShortcut({ className, ...props }) {
+    return (jsx("span", { "data-slot": "command-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className), ...props }));
+}
+
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

package/dist/esm/components/context-menu.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
+import { cn } from 'cn';
+import { CheckIcon, ChevronRightIcon } from 'lucide-react';
+
+function ContextMenu({ ...props }) {
+    return jsx(ContextMenu$1.Root, { "data-slot": "context-menu", ...props });
+}
+function ContextMenuPortal({ ...props }) {
+    return (jsx(ContextMenu$1.Portal, { "data-slot": "context-menu-portal", ...props }));
+}
+function ContextMenuTrigger({ className, ...props }) {
+    return (jsx(ContextMenu$1.Trigger, { "data-slot": "context-menu-trigger", className: cn("select-none", className), ...props }));
+}
+function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
+    return (jsx(ContextMenu$1.Portal, { children: jsx(ContextMenu$1.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: jsx(ContextMenu$1.Popup, { "data-slot": "context-menu-content", className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none 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-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 ContextMenuGroup({ ...props }) {
+    return (jsx(ContextMenu$1.Group, { "data-slot": "context-menu-group", ...props }));
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+    return (jsx(ContextMenu$1.GroupLabel, { "data-slot": "context-menu-label", "data-inset": inset, className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className), ...props }));
+}
+function ContextMenuItem({ className, inset, variant = "default", ...props }) {
+    return (jsx(ContextMenu$1.Item, { "data-slot": "context-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
+}
+function ContextMenuSub({ ...props }) {
+    return (jsx(ContextMenu$1.SubmenuRoot, { "data-slot": "context-menu-sub", ...props }));
+}
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+    return (jsxs(ContextMenu$1.SubmenuTrigger, { "data-slot": "context-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+}
+function ContextMenuSubContent({ ...props }) {
+    return (jsx(ContextMenuContent, { "data-slot": "context-menu-sub-content", className: "shadow-lg", side: "right", ...props }));
+}
+function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (jsxs(ContextMenu$1.CheckboxItem, { "data-slot": "context-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [jsx("span", { className: "pointer-events-none absolute right-2", children: jsx(ContextMenu$1.CheckboxItemIndicator, { children: jsx(CheckIcon, {}) }) }), children] }));
+}
+function ContextMenuRadioGroup({ ...props }) {
+    return (jsx(ContextMenu$1.RadioGroup, { "data-slot": "context-menu-radio-group", ...props }));
+}
+function ContextMenuRadioItem({ className, children, inset, ...props }) {
+    return (jsxs(ContextMenu$1.RadioItem, { "data-slot": "context-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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: [jsx("span", { className: "pointer-events-none absolute right-2", children: jsx(ContextMenu$1.RadioItemIndicator, { children: jsx(CheckIcon, {}) }) }), children] }));
+}
+function ContextMenuSeparator({ className, ...props }) {
+    return (jsx(ContextMenu$1.Separator, { "data-slot": "context-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function ContextMenuShortcut({ className, ...props }) {
+    return (jsx("span", { "data-slot": "context-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className), ...props }));
+}
+
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

package/dist/esm/components/dialog.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import { cn } from 'cn';
+import { Button } from './button.js';
+import { XIcon } from 'lucide-react';
+
+function Dialog({ ...props }) {
+    return jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+    return jsx(Dialog$1.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+    return jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return jsx(Dialog$1.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (jsx(Dialog$1.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+    return (jsxs(DialogPortal, { children: [jsx(DialogOverlay, {}), jsxs(Dialog$1.Popup, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm 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, children: [children, showCloseButton && (jsxs(Dialog$1.Close, { "data-slot": "dialog-close", render: jsx(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }), children: [jsx(XIcon, {}), jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+    return (jsxs("div", { "data-slot": "dialog-footer", className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (jsx(Dialog$1.Close, { render: jsx(Button, { variant: "outline" }), children: "Close" }))] }));
+}
+function DialogTitle({ className, ...props }) {
+    return (jsx(Dialog$1.Title, { "data-slot": "dialog-title", className: cn("font-heading text-base leading-none font-medium", className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (jsx(Dialog$1.Description, { "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
+}
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/esm/components/drawer.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Drawer as Drawer$1 } from '@base-ui/react/drawer';
+import { cn } from 'cn';
+
+const DrawerContext = React.createContext(null);
+function useDrawer() {
+    const context = React.useContext(DrawerContext);
+    if (!context) {
+        throw new Error("useDrawer must be used within a Drawer.");
+    }
+    return context;
+}
+function Drawer({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection = "down", ...props }) {
+    const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+    const contextValue = React.useMemo(() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }), [hasSnapPoints, modal, showSwipeHandle, swipeDirection]);
+    return (jsx(DrawerContext.Provider, { value: contextValue, children: jsx(Drawer$1.Root, { "data-slot": "drawer", modal: modal, snapPoints: snapPoints, swipeDirection: swipeDirection, ...props }) }));
+}
+function DrawerTrigger({ ...props }) {
+    return jsx(Drawer$1.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+    return jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+    return jsx(Drawer$1.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+    return (jsx(Drawer$1.Backdrop, { "data-slot": "drawer-overlay", className: cn("fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute", className), ...props }));
+}
+function DrawerSwipeHandle({ className, ...props }) {
+    return (jsx("div", { "data-slot": "drawer-swipe-handle", "aria-hidden": "true", className: cn("relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing", className), ...props }));
+}
+function DrawerContent({ className, children, ...props }) {
+    const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
+    const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+    return (jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [modal === true && (jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? "" : undefined })), jsx(Drawer$1.Viewport, { "data-slot": "drawer-viewport", "data-modal": modal, className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto", children: jsxs(Drawer$1.Popup, { "data-slot": "drawer-popup", "data-swipe-axis": swipeAxis, "data-snap-points": hasSnapPoints ? "" : undefined, className: cn(
+                    // Base.
+                    "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b", 
+                    // Nested.
+                    "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95", 
+                    // Bleed.
+                    "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full", 
+                    // Sizing.
+                    "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]", 
+                    // Stack.
+                    "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]", 
+                    // Transitions.
+                    "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]", 
+                    // Axis: y.
+                    "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)", 
+                    // Axis: x.
+                    "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row", 
+                    // Direction: down.
+                    "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]", 
+                    // Direction: up.
+                    "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]", 
+                    // Direction: left.
+                    "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]", 
+                    // Direction: right.
+                    "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]", className), ...props, children: [showSwipeHandle && jsx(DrawerSwipeHandle, {}), jsx(Drawer$1.Content, { "data-slot": "drawer-content", className: cn("flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"), children: children })] }) })] }));
+}
+function DrawerHeader({ className, ...props }) {
+    return (jsx("div", { "data-slot": "drawer-header", className: cn("flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left", className), ...props }));
+}
+function DrawerFooter({ className, ...props }) {
+    return (jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    return (jsx(Drawer$1.Title, { "data-slot": "drawer-title", className: cn("font-heading text-base font-medium text-foreground", className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (jsx(Drawer$1.Description, { "data-slot": "drawer-description", className: cn("text-sm text-balance text-muted-foreground", className), ...props }));
+}
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger };

package/dist/esm/components/dropdown-menu.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Menu } from '@base-ui/react/menu';
+import { cn } from 'cn';
+import { CheckIcon, ChevronRightIcon } from 'lucide-react';
+
+function DropdownMenu({ ...props }) {
+    return jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return jsx(Menu.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+    return jsx(Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
+    return (jsx(Menu.Portal, { children: jsx(Menu.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: jsx(Menu.Popup, { "data-slot": "dropdown-menu-content", className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none 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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return jsx(Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (jsx(Menu.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className), ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+    return (jsx(Menu.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return jsx(Menu.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (jsxs(Menu.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+}
+function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
+    return (jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 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), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (jsxs(Menu.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: jsx(Menu.CheckboxItemIndicator, { children: jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return (jsx(Menu.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+    return (jsxs(Menu.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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: [jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: jsx(Menu.RadioItemIndicator, { children: jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (jsx(Menu.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className), ...props }));
+}
+
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };