@wheelhouse/ui 0.1.5 → 0.2.0

package/dist/components/card/card.stories.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '.';
+import { Button } from '../button';
+const meta = {
+    title: 'UI/Card',
+    component: Card,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-80", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs(Card, { ...args, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Card title" }), _jsx(CardDescription, { children: "A short description of this card." })] }), _jsx(CardContent, { children: _jsx("p", { className: "text-sm text-muted-foreground", children: "This is the main content area of the card." }) }), _jsxs(CardFooter, { children: [_jsx(Button, { variant: "outline", size: "sm", children: "Cancel" }), _jsx(Button, { size: "sm", className: "ml-auto", children: "Save" })] })] })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded' },
+    decorators: [],
+    render: () => (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Sizes" }), _jsxs("div", { className: "flex flex-wrap items-start gap-4", children: [_jsx("div", { className: "w-72", children: _jsxs(Card, { size: "default", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Default" }), _jsx(CardDescription, { children: "Standard spacing variant." })] }), _jsx(CardContent, { children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Content area." }) })] }) }), _jsx("div", { className: "w-72", children: _jsxs(Card, { size: "sm", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Small" }), _jsx(CardDescription, { children: "Compact spacing variant." })] }), _jsx(CardContent, { children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Content area." }) })] }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With footer" }), _jsx("div", { className: "w-72", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Card title" }), _jsx(CardDescription, { children: "A short description of this card." })] }), _jsx(CardContent, { children: _jsx("p", { className: "text-sm text-muted-foreground", children: "This is the main content area." }) }), _jsxs(CardFooter, { children: [_jsx(Button, { variant: "outline", size: "sm", children: "Cancel" }), _jsx(Button, { size: "sm", className: "ml-auto", children: "Save" })] })] }) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With action" }), _jsx("div", { className: "w-72", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Notifications" }), _jsx(CardDescription, { children: "Manage your notification preferences." }), _jsx(CardAction, { children: _jsx(Button, { variant: "ghost", size: "xs", children: "Edit" }) })] }), _jsx(CardContent, { children: _jsx("p", { className: "text-sm text-muted-foreground", children: "You have 3 unread notifications." }) })] }) })] })] })),
+};
+export const Small = {
+    render: (args) => (_jsxs(Card, { size: "sm", ...args, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Small card" }), _jsx(CardDescription, { children: "Compact spacing variant." })] }), _jsx(CardContent, { children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Content area." }) })] })),
+    argTypes: { size: { control: false } },
+};
+export const WithAction = {
+    render: (args) => (_jsxs(Card, { ...args, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Notifications" }), _jsx(CardDescription, { children: "Manage your notification preferences." }), _jsx(CardAction, { children: _jsx(Button, { variant: "ghost", size: "xs", children: "Edit" }) })] }), _jsx(CardContent, { children: _jsx("p", { className: "text-sm text-muted-foreground", children: "You have 3 unread notifications." }) })] })),
+};

package/dist/components/card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from './card';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/card/index.js

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

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,9 @@
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+/**
+ * Props for `Checkbox`. Inherits additional behavior from
+ * [Base UI Checkbox](https://base-ui.com/react/components/checkbox).
+ */
+export type CheckboxProps = CheckboxPrimitive.Root.Props;
+declare function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAKxE;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;AAEzD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,2CAetE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { cn } from '../../lib/utils';
+import { CheckIcon } from '@phosphor-icons/react/Check';
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.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 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:bg-muted 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 dark:data-checked:bg-primary', className), ...props, children: _jsx(CheckboxPrimitive.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/components/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react';
+import { Checkbox } from '.';
+declare const meta: {
+    title: string;
+    component: typeof Checkbox;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Gallery: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Invalid: Story;
+//# sourceMappingURL=checkbox.stories.d.ts.map

package/dist/components/checkbox/checkbox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAG7B,QAAA,MAAM,IAAI;;;;;;;CAOuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAmCrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC"}

package/dist/components/checkbox/checkbox.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from '.';
+import { Label } from '../label/index';
+const meta = {
+    title: 'UI/Checkbox',
+    component: Checkbox,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "default", ...args }), _jsx(Label, { htmlFor: "default", children: "Accept terms and conditions" })] })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsx("div", { className: "flex flex-col gap-8", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "States" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "g-default" }), _jsx(Label, { htmlFor: "g-default", children: "Unchecked" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "g-checked", defaultChecked: true }), _jsx(Label, { htmlFor: "g-checked", children: "Checked" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "g-disabled", disabled: true }), _jsx(Label, { htmlFor: "g-disabled", children: "Disabled" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "g-disabled-checked", disabled: true, defaultChecked: true }), _jsx(Label, { htmlFor: "g-disabled-checked", children: "Disabled checked" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "g-invalid", "aria-invalid": true }), _jsx(Label, { htmlFor: "g-invalid", children: "Invalid" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "g-invalid-checked", "aria-invalid": true, defaultChecked: true }), _jsx(Label, { htmlFor: "g-invalid-checked", children: "Invalid checked" })] })] })] }) })),
+};
+export const Checked = {
+    render: (args) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "checked", defaultChecked: true, ...args }), _jsx(Label, { htmlFor: "checked", children: "Subscribe to newsletter" })] })),
+};
+export const Disabled = {
+    render: (args) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "disabled", disabled: true, ...args }), _jsx(Label, { htmlFor: "disabled", children: "Unavailable option" })] })),
+};
+export const DisabledChecked = {
+    render: (args) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "disabled-checked", disabled: true, defaultChecked: true, ...args }), _jsx(Label, { htmlFor: "disabled-checked", children: "Locked setting" })] })),
+};
+export const Invalid = {
+    render: (args) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "invalid", "aria-invalid": true, ...args }), _jsx(Label, { htmlFor: "invalid", children: "You must accept the terms" })] })),
+};

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './checkbox';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from './checkbox';

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,17 @@
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+/** Props for `Collapsible` (extends Base UI Collapsible root). */
+export type CollapsibleProps = CollapsiblePrimitive.Root.Props;
+/** Props for `CollapsibleTrigger`. */
+export type CollapsibleTriggerProps = CollapsiblePrimitive.Trigger.Props;
+/** Props for `CollapsibleContent` (Base UI panel). */
+export type CollapsibleContentProps = CollapsiblePrimitive.Panel.Props;
+/**
+ * Root for an expand/collapse region. Compose with `CollapsibleTrigger` and `CollapsibleContent`.
+ */
+declare function Collapsible({ ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+/** Button that toggles the associated panel open or closed. */
+declare function CollapsibleTrigger({ ...props }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+/** Panel shown or hidden according to the root open state. */
+declare function CollapsibleContent({ ...props }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+//# sourceMappingURL=collapsible.d.ts.map

package/dist/components/collapsible/collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAEjF,kEAAkE;AAClE,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC;AAE/D,sCAAsC;AACtC,MAAM,MAAM,uBAAuB,GAAG,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC;AAEzE,sDAAsD;AACtD,MAAM,MAAM,uBAAuB,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC;AAEvE;;GAEG;AACH,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAElD;AAED,+DAA+D;AAC/D,iBAAS,kBAAkB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAEhE;AAED,8DAA8D;AAC9D,iBAAS,kBAAkB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAEhE;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+/**
+ * Root for an expand/collapse region. Compose with `CollapsibleTrigger` and `CollapsibleContent`.
+ */
+function Collapsible({ ...props }) {
+    return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+/** Button that toggles the associated panel open or closed. */
+function CollapsibleTrigger({ ...props }) {
+    return _jsx(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-trigger", ...props });
+}
+/** Panel shown or hidden according to the root open state. */
+function CollapsibleContent({ ...props }) {
+    return _jsx(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", ...props });
+}
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/components/collapsible/collapsible.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { Collapsible } from '.';
+declare const meta: {
+    title: string;
+    component: typeof Collapsible;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const OpenByDefault: Story;
+export declare const Gallery: Story;
+//# sourceMappingURL=collapsible.stories.d.ts.map

package/dist/components/collapsible/collapsible.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.stories.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/collapsible.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,WAAW,EAA0C,MAAM,GAAG,CAAC;AAExE,QAAA,MAAM,IAAI;;;;;;;CAO0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC"}

package/dist/components/collapsible/collapsible.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretDownIcon } from '@phosphor-icons/react/CaretDown';
+import { Button } from '../button';
+import { Text } from '../text';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '.';
+const meta = {
+    title: 'UI/Collapsible',
+    component: Collapsible,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Collapsible, { className: "flex w-72 flex-col gap-2", children: [_jsx(CollapsibleTrigger, { render: _jsxs(Button, { variant: "outline", className: "group flex w-full items-center justify-between gap-2", children: [_jsx("span", { children: "Advanced options" }), _jsx(CaretDownIcon, { className: "size-4 shrink-0 transition-transform group-data-[panel-open]:rotate-180" })] }) }), _jsx(CollapsibleContent, { className: "flex flex-col gap-2 rounded-md border bg-card p-3 text-card-foreground shadow-xs", children: _jsx(Text, { size: "sm", tone: "muted", children: "Extra settings and details appear here when expanded." }) })] })),
+};
+export const OpenByDefault = {
+    render: () => (_jsxs(Collapsible, { defaultOpen: true, className: "flex w-72 flex-col gap-2", children: [_jsx(CollapsibleTrigger, { render: _jsxs(Button, { variant: "ghost", className: "group w-full justify-between px-2", children: [_jsx("span", { children: "Details" }), _jsx(CaretDownIcon, { className: "size-4 transition-transform group-data-[panel-open]:rotate-180" })] }) }), _jsx(CollapsibleContent, { className: "rounded-md border border-dashed p-3", children: _jsx(Text, { size: "sm", children: "This block starts expanded." }) })] })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsx("div", { className: "flex max-w-md flex-col gap-6", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Bordered card" }), _jsxs(Collapsible, { defaultOpen: true, className: "rounded-lg border bg-card text-card-foreground shadow-xs", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b px-3 py-2", children: [_jsx(Text, { weight: "medium", children: "Shipping address" }), _jsx(CollapsibleTrigger, { className: "group inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "Toggle shipping section", children: _jsx(CaretDownIcon, { className: "size-4 transition-transform group-data-[panel-open]:rotate-180" }) })] }), _jsx(CollapsibleContent, { className: "px-3 py-3", children: _jsx(Text, { size: "sm", tone: "muted", children: "742 Evergreen Terrace, Springfield." }) })] })] }) })),
+};

package/dist/components/collapsible/index.d.ts

@@ -0,0 +1,3 @@
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible';
+export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps } from './collapsible';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/collapsible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpF,YAAY,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/collapsible/index.js

@@ -0,0 +1 @@
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible';

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+/** Props for `Combobox` root (generic over item value type and `multiple`). */
+export type ComboboxProps<Value = unknown, Multiple extends boolean | undefined = false> = ComboboxPrimitive.Root.Props<Value, Multiple>;
+/** Props for `ComboboxInput` (includes `showTrigger` and `showClear`). */
+export type ComboboxInputProps = ComboboxPrimitive.Input.Props & {
+    showTrigger?: boolean;
+    showClear?: boolean;
+};
+/** Props for `ComboboxContent` (popup + positioner). */
+export type ComboboxContentProps = ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'>;
+/** Props for `ComboboxItem`. */
+export type ComboboxItemProps = ComboboxPrimitive.Item.Props;
+/** Props for `ComboboxChip` (includes `showRemove`). */
+export type ComboboxChipProps = ComboboxPrimitive.Chip.Props & {
+    showRemove?: boolean;
+};
+/**
+ * Root for a combobox. Provide `items` and compose with input, popup, list, and items.
+ */
+declare function Combobox<Value, Multiple extends boolean | undefined = false>(props: ComboboxPrimitive.Root.Props<Value, Multiple>): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxInputProps): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'>): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxChipProps): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
+declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
+export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
+//# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/combobox.tsx"],"names":[],"mappings":"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"}

package/dist/components/combobox/combobox.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '../input-group';
+import { CaretDownIcon } from '@phosphor-icons/react/CaretDown';
+import { CheckIcon } from '@phosphor-icons/react/Check';
+import { XIcon } from '@phosphor-icons/react/X';
+/**
+ * Root for a combobox. Provide `items` and compose with input, popup, list, and items.
+ */
+function Combobox(props) {
+    return _jsx(ComboboxPrimitive.Root, { ...props });
+}
+function ComboboxValue({ ...props }) {
+    return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
+}
+function ComboboxTrigger({ className, children, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", className: cn("[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(CaretDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })] }));
+}
+function ComboboxClear({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", 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(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "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(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.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(ComboboxPrimitive.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(ComboboxPrimitive.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(ComboboxPrimitive.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(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props });
+}
+function ComboboxLabel({ className, ...props }) {
+    return _jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn('px-2 py-1.5 text-xs text-muted-foreground', className), ...props });
+}
+function ComboboxCollection({ ...props }) {
+    return _jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });
+}
+function ComboboxEmpty({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.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 _jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn('-mx-1 my-1 h-px bg-border', className), ...props });
+}
+function ComboboxChips({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.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(ComboboxPrimitive.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(ComboboxPrimitive.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(ComboboxPrimitive.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, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };

package/dist/components/combobox/combobox.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+import { Combobox } from '.';
+declare const meta: {
+    title: string;
+    component: typeof Combobox;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithClear: Story;
+export declare const Multiple: Story;
+export declare const WithoutTriggerButton: Story;
+export declare const Gallery: Story;
+//# sourceMappingURL=combobox.stories.d.ts.map

package/dist/components/combobox/combobox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/combobox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EACH,QAAQ,EAWX,MAAM,GAAG,CAAC;AAoBX,QAAA,MAAM,IAAI;;;;;;;CAOuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAuCF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAgBlC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAwCrB,CAAC"}

package/dist/components/combobox/combobox.stories.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxValue, } from '.';
+const frameworks = ['Next.js', 'SvelteKit', 'Nuxt', 'Remix', 'Astro', 'TanStack Start'];
+const programmingLanguages = [
+    { id: 'js', value: 'JavaScript' },
+    { id: 'ts', value: 'TypeScript' },
+    { id: 'py', value: 'Python' },
+    { id: 'java', value: 'Java' },
+    { id: 'cpp', value: 'C++' },
+    { id: 'cs', value: 'C#' },
+    { id: 'php', value: 'PHP' },
+    { id: 'ruby', value: 'Ruby' },
+    { id: 'go', value: 'Go' },
+    { id: 'rust', value: 'Rust' },
+    { id: 'swift', value: 'Swift' },
+];
+const meta = {
+    title: 'UI/Combobox',
+    component: Combobox,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Combobox, { items: [...frameworks], defaultOpen: true, children: [_jsx(ComboboxInput, { placeholder: "Search framework\u2026", className: "min-w-64" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: "No matches." }), _jsx(ComboboxList, { children: (item) => (_jsx(ComboboxItem, { value: item, children: item }, item)) })] })] })),
+};
+export const WithClear = {
+    render: () => (_jsxs(Combobox, { items: [...frameworks], children: [_jsx(ComboboxInput, { placeholder: "Pick a stack", showClear: true, className: "min-w-64" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: "No matches." }), _jsx(ComboboxList, { children: (item) => (_jsx(ComboboxItem, { value: item, children: item }, item)) })] })] })),
+};
+function MultipleSelectStory() {
+    const id = useId();
+    return (_jsxs(Combobox, { items: programmingLanguages, multiple: true, itemToStringLabel: (lang) => lang.value, defaultValue: [programmingLanguages[1]], children: [_jsxs("div", { className: "flex w-full max-w-md flex-col gap-1.5", children: [_jsx("span", { className: "text-sm font-medium", id: `${id}-label`, children: "Programming languages" }), _jsx(ComboboxChips, { className: "w-full", children: _jsx(ComboboxValue, { children: (value) => (_jsxs(_Fragment, { children: [value.map((language) => (_jsx(ComboboxChip, { "aria-label": language.value, children: language.value }, language.id))), _jsx(ComboboxChipsInput, { id: id, placeholder: value.length > 0 ? '' : 'e.g. TypeScript', "aria-label": "Filter languages" })] })) }) })] }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: "No languages found." }), _jsx(ComboboxList, { children: (language) => (_jsx(ComboboxItem, { value: language, children: language.value }, language.id)) })] })] }));
+}
+export const Multiple = {
+    render: () => _jsx(MultipleSelectStory, {}),
+};
+export const WithoutTriggerButton = {
+    render: () => (_jsxs(Combobox, { items: [...frameworks], children: [_jsx(ComboboxInput, { placeholder: "Type to filter", showTrigger: false, className: "min-w-64" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: "No matches." }), _jsx(ComboboxList, { children: (item) => (_jsx(ComboboxItem, { value: item, children: item }, item)) })] })] })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs("div", { className: "flex flex-col gap-10", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Basic" }), _jsxs(Combobox, { items: [...frameworks], children: [_jsx(ComboboxInput, { placeholder: "Framework", className: "min-w-64" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: "No results." }), _jsx(ComboboxList, { children: (item) => (_jsx(ComboboxItem, { value: item, children: item }, item)) })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Footer slot" }), _jsxs(Combobox, { items: ['Design', 'Engineering', 'Marketing', 'Sales'], children: [_jsx(ComboboxInput, { placeholder: "Team", className: "min-w-64" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: "No results." }), _jsx(ComboboxList, { children: (item) => (_jsx(ComboboxItem, { value: item, children: item }, item)) }), _jsx(ComboboxSeparator, {}), _jsx("div", { className: "p-2 text-center text-xs text-muted-foreground", children: "End of list" })] })] })] })] })),
+};

package/dist/components/combobox/index.d.ts

@@ -0,0 +1,3 @@
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, } from './combobox';
+export type { ComboboxChipProps, ComboboxContentProps, ComboboxInputProps, ComboboxItemProps, ComboboxProps } from './combobox';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,aAAa,EACb,aAAa,EACb,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,aAAa,EACb,iBAAiB,GACpB,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/combobox/index.js

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

package/dist/components/command/command.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Dialog } from '../dialog';
+/** Props for the cmdk root. See [cmdk](https://github.com/pacocoursey/cmdk). */
+export type CommandProps = React.ComponentProps<typeof CommandPrimitive>;
+declare function Command({ className, ...props }: CommandProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the modal command palette wrapper (uses `Dialog` + `DialogContent`). */
+export type CommandDialogProps = Omit<React.ComponentProps<typeof Dialog>, 'children'> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+    children: React.ReactNode;
+};
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: CommandDialogProps): import("react/jsx-runtime").JSX.Element;
+export type CommandInputProps = React.ComponentProps<typeof CommandPrimitive.Input>;
+declare function CommandInput({ className, ...props }: CommandInputProps): import("react/jsx-runtime").JSX.Element;
+export type CommandListProps = React.ComponentProps<typeof CommandPrimitive.List>;
+declare function CommandList({ className, ...props }: CommandListProps): import("react/jsx-runtime").JSX.Element;
+export type CommandEmptyProps = React.ComponentProps<typeof CommandPrimitive.Empty>;
+declare function CommandEmpty({ className, ...props }: CommandEmptyProps): import("react/jsx-runtime").JSX.Element;
+export type CommandGroupProps = React.ComponentProps<typeof CommandPrimitive.Group>;
+declare function CommandGroup({ className, ...props }: CommandGroupProps): import("react/jsx-runtime").JSX.Element;
+export type CommandSeparatorProps = React.ComponentProps<typeof CommandPrimitive.Separator>;
+declare function CommandSeparator({ className, ...props }: CommandSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export type CommandItemProps = React.ComponentProps<typeof CommandPrimitive.Item>;
+declare function CommandItem({ className, children, ...props }: CommandItemProps): import("react/jsx-runtime").JSX.Element;
+export type CommandShortcutProps = React.ComponentProps<'span'>;
+declare function CommandShortcut({ className, ...props }: CommandShortcutProps): import("react/jsx-runtime").JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator };
+//# sourceMappingURL=command.d.ts.map

package/dist/components/command/command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../src/components/command/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAKnD,OAAO,EAAE,MAAM,EAA+D,MAAM,WAAW,CAAC;AAGhG,gFAAgF;AAChF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEzE,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAQrD;AAED,qFAAqF;AACrF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,iBAAS,aAAa,CAAC,EACnB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACX,EAAE,kBAAkB,2CAYpB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAEpF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAe/D;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAElF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ7D;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAEpF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAE/D;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAEpF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAW/D;AAED,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAC;AAE5F,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAEvE;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAElF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAcvE;AAED,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAEhE,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAQrE;AAED,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/command/command.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { CheckIcon } from '@phosphor-icons/react/Check';
+import { MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass';
+import { cn } from '../../lib/utils';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../dialog';
+import { InputGroup, InputGroupAddon } from '../input-group';
+function Command({ className, ...props }) {
+    return (_jsx(CommandPrimitive, { "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(CommandPrimitive.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(MagnifyingGlassIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
+}
+function CommandList({ className, ...props }) {
+    return (_jsx(CommandPrimitive.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(CommandPrimitive.Empty, { "data-slot": "command-empty", className: cn('py-6 text-center text-sm', className), ...props });
+}
+function CommandGroup({ className, ...props }) {
+    return (_jsx(CommandPrimitive.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(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn('-mx-1 h-px bg-border', className), ...props });
+}
+function CommandItem({ className, children, ...props }) {
+    return (_jsxs(CommandPrimitive.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, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator };

package/dist/components/command/command.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { Command } from '.';
+declare const meta: {
+    title: string;
+    component: typeof Command;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithShortcuts: Story;
+export declare const DialogPalette: Story;
+//# sourceMappingURL=command.stories.d.ts.map

package/dist/components/command/command.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.stories.d.ts","sourceRoot":"","sources":["../../../src/components/command/command.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,OAAO,EAAwH,MAAM,GAAG,CAAC;AAElJ,QAAA,MAAM,IAAI;;;;;;;CAOsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC;AA8BF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

package/dist/components/command/command.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../button';
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '.';
+const meta = {
+    title: 'UI/Command',
+    component: Command,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Command, { className: "w-80 rounded-xl border border-border shadow-xs", children: [_jsx(CommandInput, { placeholder: "Search\u2026" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No matches." }), _jsxs(CommandGroup, { heading: "Actions", children: [_jsx(CommandItem, { value: "calendar", children: "Calendar" }), _jsx(CommandItem, { value: "search-emoji", children: "Search emoji" }), _jsx(CommandItem, { value: "calculator", children: "Calculator" })] }), _jsx(CommandSeparator, {}), _jsxs(CommandGroup, { heading: "Theme", children: [_jsx(CommandItem, { value: "light", children: "Light" }), _jsx(CommandItem, { value: "dark", children: "Dark" })] })] })] })),
+};
+export const WithShortcuts = {
+    render: () => (_jsxs(Command, { className: "w-80 rounded-xl border border-border shadow-xs", children: [_jsx(CommandInput, { placeholder: "Type a command\u2026" }), _jsx(CommandList, { children: _jsxs(CommandGroup, { heading: "File", children: [_jsxs(CommandItem, { value: "new-tab", children: ["New tab", _jsx(CommandShortcut, { children: "\u2318T" })] }), _jsxs(CommandItem, { value: "close-tab", children: ["Close tab", _jsx(CommandShortcut, { children: "\u2318W" })] })] }) })] })),
+};
+function CommandDialogDemo() {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", type: "button", onClick: () => setOpen(true), children: "Open palette" }), _jsx(CommandDialog, { open: open, onOpenChange: setOpen, showCloseButton: true, children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search commands\u2026" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results." }), _jsxs(CommandGroup, { heading: "General", children: [_jsx(CommandItem, { value: "home", onSelect: () => setOpen(false), children: "Home" }), _jsx(CommandItem, { value: "settings", onSelect: () => setOpen(false), children: "Settings" })] })] })] }) })] }));
+}
+export const DialogPalette = {
+    render: () => _jsx(CommandDialogDemo, {}),
+};

package/dist/components/command/index.d.ts

@@ -0,0 +1,2 @@
+export * from './command';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/command/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/command/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}