@wheelhouse/ui 0.1.6 → 0.2.1

package/dist/components/combobox/combobox.js

@@ -0,0 +1,63 @@
+'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 { Check, ChevronDown, X } from 'lucide-react';
+/**
+ * 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(ChevronDown, { 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(X, { 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(Check, { 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(X, { 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;AAInD,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,36 @@
+'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 { Check, Search } from 'lucide-react';
+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(Search, { 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(Check, { 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"}

package/dist/components/command/index.js

@@ -0,0 +1 @@
+export * from './command';

package/dist/components/context-menu/context-menu.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+type ContextMenuContentPositionProps = Pick<ContextMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
+/** Props for `ContextMenu`. See [Base UI Context Menu](https://base-ui.com/react/components/context-menu). */
+type ContextMenuProps = ContextMenuPrimitive.Root.Props;
+/** Props for `ContextMenuPortal`. */
+type ContextMenuPortalProps = ContextMenuPrimitive.Portal.Props;
+/** Props for `ContextMenuTrigger` (right-click / long-press target). */
+type ContextMenuTriggerProps = ContextMenuPrimitive.Trigger.Props;
+/** Props for `ContextMenuContent` (popup plus positioner). */
+type ContextMenuContentProps = ContextMenuPrimitive.Popup.Props & ContextMenuContentPositionProps;
+/** Same surface as content, tuned for nested submenus. */
+type ContextMenuSubContentProps = ContextMenuContentProps;
+/** Props for `ContextMenuGroup`. */
+type ContextMenuGroupProps = ContextMenuPrimitive.Group.Props;
+/** Props for `ContextMenuLabel`. */
+type ContextMenuLabelProps = ContextMenuPrimitive.GroupLabel.Props & {
+    inset?: boolean;
+};
+/** Props for `ContextMenuItem`. */
+type ContextMenuItemProps = ContextMenuPrimitive.Item.Props & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+};
+/** Props for `ContextMenuSub`. */
+type ContextMenuSubProps = ContextMenuPrimitive.SubmenuRoot.Props;
+/** Props for `ContextMenuSubTrigger`. */
+type ContextMenuSubTriggerProps = ContextMenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+};
+/** Props for `ContextMenuCheckboxItem`. */
+type ContextMenuCheckboxItemProps = ContextMenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+};
+/** Props for `ContextMenuRadioGroup`. */
+type ContextMenuRadioGroupProps = ContextMenuPrimitive.RadioGroup.Props;
+/** Props for `ContextMenuRadioItem`. */
+type ContextMenuRadioItemProps = ContextMenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+};
+/** Props for `ContextMenuSeparator`. */
+type ContextMenuSeparatorProps = ContextMenuPrimitive.Separator.Props;
+/** Props for `ContextMenuShortcut`. */
+type ContextMenuShortcutProps = React.ComponentProps<'span'>;
+declare function ContextMenu({ ...props }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuPortal({ ...props }: ContextMenuPortalProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuContent({ className, align, alignOffset, side, sideOffset, ...props }: ContextMenuContentProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuGroup({ ...props }: ContextMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuItem({ className, inset, variant, ...props }: ContextMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuSub({ ...props }: ContextMenuSubProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuSubContent({ ...props }: ContextMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }: ContextMenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuRadioGroup({ ...props }: ContextMenuRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenuRadioItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): import("react/jsx-runtime").JSX.Element;
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
+export type { ContextMenuProps, ContextMenuPortalProps, ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuSubContentProps, ContextMenuGroupProps, ContextMenuLabelProps, ContextMenuItemProps, ContextMenuSubProps, ContextMenuSubTriggerProps, ContextMenuCheckboxItemProps, ContextMenuRadioGroupProps, ContextMenuRadioItemProps, ContextMenuSeparatorProps, ContextMenuShortcutProps, };
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/components/context-menu/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../src/components/context-menu/context-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAKlF,KAAK,+BAA+B,GAAG,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,CAAC;AAEpI,8GAA8G;AAC9G,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC;AAExD,qCAAqC;AACrC,KAAK,sBAAsB,GAAG,oBAAoB,CAAC,MAAM,CAAC,KAAK,CAAC;AAEhE,wEAAwE;AACxE,KAAK,uBAAuB,GAAG,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC;AAElE,8DAA8D;AAC9D,KAAK,uBAAuB,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,GAAG,+BAA+B,CAAC;AAElG,0DAA0D;AAC1D,KAAK,0BAA0B,GAAG,uBAAuB,CAAC;AAE1D,oCAAoC;AACpC,KAAK,qBAAqB,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC;AAE9D,oCAAoC;AACpC,KAAK,qBAAqB,GAAG,oBAAoB,CAAC,UAAU,CAAC,KAAK,GAAG;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,mCAAmC;AACnC,KAAK,oBAAoB,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,GAAG;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACvC,CAAC;AAEF,kCAAkC;AAClC,KAAK,mBAAmB,GAAG,oBAAoB,CAAC,WAAW,CAAC,KAAK,CAAC;AAElE,yCAAyC;AACzC,KAAK,0BAA0B,GAAG,oBAAoB,CAAC,cAAc,CAAC,KAAK,GAAG;IAC1E,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,2CAA2C;AAC3C,KAAK,4BAA4B,GAAG,oBAAoB,CAAC,YAAY,CAAC,KAAK,GAAG;IAC1E,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,yCAAyC;AACzC,KAAK,0BAA0B,GAAG,oBAAoB,CAAC,UAAU,CAAC,KAAK,CAAC;AAExE,wCAAwC;AACxC,KAAK,yBAAyB,GAAG,oBAAoB,CAAC,SAAS,CAAC,KAAK,GAAG;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wCAAwC;AACxC,KAAK,yBAAyB,GAAG,oBAAoB,CAAC,SAAS,CAAC,KAAK,CAAC;AAEtE,uCAAuC;AACvC,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAE7D,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAElD;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAE9D;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAE3E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,KAAe,EAAE,WAAe,EAAE,IAAc,EAAE,UAAc,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAe7I;AAED,iBAAS,gBAAgB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAE5D;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAS9E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAajG;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAExD;AAED,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,0BAA0B,2CAelG;AAED,iBAAS,qBAAqB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,0BAA0B,2CAEtE;AAED,iBAAS,uBAAuB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,4BAA4B,2CAoB/G;AAED,iBAAS,qBAAqB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,0BAA0B,2CAEtE;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,2CAmBhG;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,2CAE/E;AAED,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,2CAQ7E;AAED,OAAO,EACH,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,GACxB,CAAC;AAEF,YAAY,EACR,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,0BAA0B,EAC1B,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,GAC3B,CAAC"}

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

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+import { cn } from '../../lib/utils';
+import { Check, ChevronRight } from 'lucide-react';
+function ContextMenu({ ...props }) {
+    return _jsx(ContextMenuPrimitive.Root, { "data-slot": "context-menu", ...props });
+}
+function ContextMenuPortal({ ...props }) {
+    return _jsx(ContextMenuPrimitive.Portal, { "data-slot": "context-menu-portal", ...props });
+}
+function ContextMenuTrigger({ className, ...props }) {
+    return _jsx(ContextMenuPrimitive.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(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(ContextMenuPrimitive.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-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/5 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(ContextMenuPrimitive.Group, { "data-slot": "context-menu-group", ...props });
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+    return (_jsx(ContextMenuPrimitive.GroupLabel, { "data-slot": "context-menu-label", "data-inset": inset, className: cn('px-1.5 py-1 text-xs text-muted-foreground data-inset:pl-7', className), ...props }));
+}
+function ContextMenuItem({ className, inset, variant = 'default', ...props }) {
+    return (_jsx(ContextMenuPrimitive.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-foreground data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground dark:data-[variant=destructive]:focus:bg-destructive/80 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-foreground", className), ...props }));
+}
+function ContextMenuSub({ ...props }) {
+    return _jsx(ContextMenuPrimitive.SubmenuRoot, { "data-slot": "context-menu-sub", ...props });
+}
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(ContextMenuPrimitive.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(ChevronRight, { 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(ContextMenuPrimitive.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(ContextMenuPrimitive.CheckboxItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
+}
+function ContextMenuRadioGroup({ ...props }) {
+    return _jsx(ContextMenuPrimitive.RadioGroup, { "data-slot": "context-menu-radio-group", ...props });
+}
+function ContextMenuRadioItem({ className, children, inset, ...props }) {
+    return (_jsxs(ContextMenuPrimitive.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(ContextMenuPrimitive.RadioItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
+}
+function ContextMenuSeparator({ className, ...props }) {
+    return _jsx(ContextMenuPrimitive.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, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };

package/dist/components/context-menu/context-menu.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+import { ContextMenu } from '.';
+declare const meta: {
+    title: string;
+    component: typeof ContextMenu;
+    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 WithCheckboxAndRadio: Story;
+export declare const WithSubmenu: Story;
+//# sourceMappingURL=context-menu.stories.d.ts.map

package/dist/components/context-menu/context-menu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/context-menu/context-menu.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EACH,WAAW,EAcd,MAAM,GAAG,CAAC;AAEX,QAAA,MAAM,IAAI;;;;;;;CAO0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAUnC,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsB3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KA2BlC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAsBzB,CAAC"}

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../text';
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from '.';
+const meta = {
+    title: 'UI/ContextMenu',
+    component: ContextMenu,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+function ContextTarget(props) {
+    return (_jsx(ContextMenuTrigger, { className: "flex min-h-24 min-w-64 cursor-context-menu items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 px-4", children: props.children }));
+}
+export const Default = {
+    render: () => (_jsxs(ContextMenu, { children: [_jsx(ContextTarget, { children: _jsx(Text, { size: "sm", tone: "muted", children: "Right-click or long-press" }) }), _jsxs(ContextMenuContent, { className: "min-w-48", children: [_jsxs(ContextMenuGroup, { children: [_jsx(ContextMenuLabel, { children: "Actions" }), _jsx(ContextMenuItem, { children: "New file" }), _jsx(ContextMenuItem, { children: "New folder" })] }), _jsx(ContextMenuSeparator, {}), _jsx(ContextMenuItem, { variant: "destructive", children: "Delete" })] })] })),
+};
+export const WithShortcuts = {
+    render: () => (_jsxs(ContextMenu, { children: [_jsx(ContextTarget, { children: _jsx(Text, { size: "sm", tone: "muted", children: "Right-click for shortcuts" }) }), _jsxs(ContextMenuContent, { className: "min-w-52", children: [_jsxs(ContextMenuItem, { children: ["Save ", _jsx(ContextMenuShortcut, { children: "\u2318S" })] }), _jsxs(ContextMenuItem, { children: ["Duplicate ", _jsx(ContextMenuShortcut, { children: "\u2318D" })] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { variant: "destructive", children: ["Delete ", _jsx(ContextMenuShortcut, { children: "\u232B" })] })] })] })),
+};
+export const WithCheckboxAndRadio = {
+    render: () => (_jsxs(ContextMenu, { children: [_jsx(ContextTarget, { children: _jsx(Text, { size: "sm", tone: "muted", children: "Right-click for view options" }) }), _jsxs(ContextMenuContent, { className: "min-w-48", children: [_jsxs(ContextMenuGroup, { children: [_jsx(ContextMenuLabel, { children: "Appearance" }), _jsx(ContextMenuCheckboxItem, { defaultChecked: true, children: "Show sidebar" }), _jsx(ContextMenuCheckboxItem, { children: "Show status bar" })] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuRadioGroup, { defaultValue: "comfortable", children: [_jsx(ContextMenuLabel, { inset: true, children: "Density" }), _jsx(ContextMenuRadioItem, { value: "compact", inset: true, children: "Compact" }), _jsx(ContextMenuRadioItem, { value: "comfortable", inset: true, children: "Comfortable" })] })] })] })),
+};
+export const WithSubmenu = {
+    render: () => (_jsxs(ContextMenu, { children: [_jsx(ContextTarget, { children: _jsx(Text, { size: "sm", tone: "muted", children: "Right-click for nested actions" }) }), _jsxs(ContextMenuContent, { className: "min-w-44", children: [_jsx(ContextMenuItem, { children: "Back" }), _jsxs(ContextMenuSub, { children: [_jsx(ContextMenuSubTrigger, { children: "Share" }), _jsxs(ContextMenuSubContent, { children: [_jsx(ContextMenuItem, { children: "Copy link" }), _jsx(ContextMenuItem, { children: "Email" })] })] }), _jsx(ContextMenuSeparator, {}), _jsx(ContextMenuItem, { variant: "destructive", children: "Remove" })] })] })),
+};

package/dist/components/context-menu/index.d.ts

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

package/dist/components/context-menu/index.d.ts.map

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

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

@@ -0,0 +1 @@
+export * from './context-menu';

package/dist/components/date-selector/date-selector-context.d.ts

@@ -0,0 +1,6 @@
+import { type DateSelectorContextValue } from './date-selector-types';
+declare const DateSelectorContext: import("react").Context<DateSelectorContextValue>;
+/** Reads {@link DateSelectorContextValue} from a parent {@link DateSelector}. */
+export declare const useDateSelectorContext: () => DateSelectorContextValue;
+export { DateSelectorContext };
+//# sourceMappingURL=date-selector-context.d.ts.map

package/dist/components/date-selector/date-selector-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-selector-context.d.ts","sourceRoot":"","sources":["../../../src/components/date-selector/date-selector-context.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,wBAAwB,EAA8B,MAAM,uBAAuB,CAAC;AAElG,QAAA,MAAM,mBAAmB,mDAIvB,CAAC;AAEH,iFAAiF;AACjF,eAAO,MAAM,sBAAsB,gCAAwC,CAAC;AAE5E,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/date-selector/date-selector-context.js

@@ -0,0 +1,11 @@
+'use client';
+import { createContext, useContext } from 'react';
+import { DEFAULT_DATE_SELECTOR_I18N } from './date-selector-types';
+const DateSelectorContext = createContext({
+    i18n: DEFAULT_DATE_SELECTOR_I18N,
+    variant: 'outline',
+    size: 'default',
+});
+/** Reads {@link DateSelectorContextValue} from a parent {@link DateSelector}. */
+export const useDateSelectorContext = () => useContext(DateSelectorContext);
+export { DateSelectorContext };

package/dist/components/date-selector/date-selector-parts.d.ts

@@ -0,0 +1,68 @@
+import type { DateSelectorFilterType, DateSelectorPeriodType } from './date-selector-types';
+interface DateSelectorFilterToggleProps {
+    value: DateSelectorFilterType;
+    onChange: (value: DateSelectorFilterType) => void;
+    showBetween?: boolean;
+    showIs?: boolean;
+    presetMode?: DateSelectorFilterType;
+    className?: string;
+}
+export declare function DateSelectorFilterToggle({ value, onChange, showBetween, showIs, presetMode, className }: DateSelectorFilterToggleProps): import("react/jsx-runtime").JSX.Element;
+interface DateSelectorPeriodTabsProps {
+    value: DateSelectorPeriodType;
+    onChange: (value: DateSelectorPeriodType) => void;
+    periodTypes?: DateSelectorPeriodType[];
+    className?: string;
+}
+export declare function DateSelectorPeriodTabs({ value, onChange, periodTypes, className }: DateSelectorPeriodTabsProps): import("react/jsx-runtime").JSX.Element;
+interface DateSelectorDayPickerProps {
+    currentMonth: Date;
+    selectedDate?: Date;
+    selectedEndDate?: Date;
+    onDayClick: (day: Date) => void;
+    isRange: boolean;
+    onDayHover?: (day: Date | undefined) => void;
+    hoverDate?: Date;
+    showTwoMonths?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    onMonthChange?: (month: Date) => void;
+    className?: string;
+}
+export declare function DateSelectorDayPicker({ currentMonth, selectedDate, selectedEndDate, onDayClick, isRange, onDayHover, hoverDate, showTwoMonths, weekStartsOn, onMonthChange, className, }: DateSelectorDayPickerProps): import("react/jsx-runtime").JSX.Element;
+interface DateSelectorPeriodGridProps {
+    years: number[];
+    items: string[];
+    selectedYear?: number;
+    selectedValue?: number;
+    rangeStart?: {
+        year: number;
+        value: number;
+    };
+    rangeEnd?: {
+        year: number;
+        value: number;
+    };
+    isInRange: (year: number, value: number) => boolean;
+    onSelect: (year: number, value: number) => void;
+    columns: number;
+    className?: string;
+}
+export declare function DateSelectorPeriodGrid({ years, items, selectedYear, selectedValue, rangeStart, rangeEnd, isInRange, onSelect, columns, className, }: DateSelectorPeriodGridProps): import("react/jsx-runtime").JSX.Element;
+interface DateSelectorYearListProps {
+    years: number[];
+    selectedYear?: number;
+    rangeStart?: {
+        year: number;
+        value: number;
+    };
+    rangeEnd?: {
+        year: number;
+        value: number;
+    };
+    isYearInRange: (year: number) => boolean;
+    onSelect: (year: number) => void;
+    className?: string;
+}
+export declare function DateSelectorYearList({ years, selectedYear, rangeStart, rangeEnd, isYearInRange, onSelect, className }: DateSelectorYearListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=date-selector-parts.d.ts.map

package/dist/components/date-selector/date-selector-parts.d.ts.map

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