@wheelhouse/ui 0.1.6 → 0.2.1

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

@@ -0,0 +1,28 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./input").InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        placeholder: string;
+        size: "default";
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: readonly ["sm", "default"];
+        };
+        className: {
+            control: false;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Gallery: Story;
+export declare const WithField: Story;
+//# sourceMappingURL=input.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAeoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC"}

package/dist/components/input/input.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } from '../field';
+import { Label } from '../label';
+import { Input, inputSizeKeys } from './input';
+const meta = {
+    title: 'UI/Input',
+    component: Input,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        placeholder: 'Placeholder',
+        size: 'default',
+    },
+    argTypes: {
+        size: { control: 'select', options: inputSizeKeys },
+        className: { control: false },
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsx("div", { className: "w-72", children: _jsx(Input, { ...args }) })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs("div", { className: "flex max-w-md 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-col gap-2", children: [_jsx(Input, { placeholder: "Default height", size: "default" }), _jsx(Input, { placeholder: "Small", size: "sm" })] })] }), _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-2", children: [_jsx(Input, { placeholder: "Disabled", disabled: true }), _jsx(Input, { placeholder: "Invalid (aria-invalid)", "aria-invalid": true }), _jsx(Input, { placeholder: "Invalid (data-invalid)", "data-invalid": true })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With label" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "input-gallery", children: "Email" }), _jsx(Input, { id: "input-gallery", type: "email", placeholder: "you@example.com" })] })] })] })),
+};
+export const WithField = {
+    name: 'With Field (validation)',
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs("div", { className: "flex w-full max-w-sm flex-col gap-6", children: [_jsxs(Field.Root, { name: "email", invalid: true, children: [_jsx(Field.Label, { children: "Email" }), _jsx(Input, { placeholder: "you@example.com" }), _jsx(Field.Error, { children: "Enter a valid email address." })] }), _jsxs(Field.Root, { name: "name", disabled: true, children: [_jsx(Field.Label, { children: "Display name" }), _jsx(Input, { placeholder: "Disabled field" })] })] })),
+};

package/dist/components/input-group/index.d.ts

@@ -0,0 +1,3 @@
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupAddonAlignKeys, inputGroupButtonSizeKeys, } from './input-group';
+export type { InputGroupProps, InputGroupAddonProps, InputGroupButtonProps, InputGroupTextProps, InputGroupInputProps, InputGroupTextareaProps, } from './input-group';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/input-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,GAC3B,MAAM,eAAe,CAAC;AACvB,YAAY,EACR,eAAe,EACf,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,GAC1B,MAAM,eAAe,CAAC"}

package/dist/components/input-group/index.js

@@ -0,0 +1 @@
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupAddonAlignKeys, inputGroupButtonSizeKeys, } from './input-group';

package/dist/components/input-group/input-group.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { Button } from '../button';
+import type { InputProps } from '../input';
+import type { TextareaProps } from '../textarea';
+/** Props for `InputGroup`. */
+export type InputGroupProps = React.ComponentProps<'div'>;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const inputGroupAddonAlignKeys: readonly ["inline-start", "inline-end", "block-start", "block-end"];
+/** Props for `InputGroupAddon`. */
+export type InputGroupAddonProps = React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const inputGroupButtonSizeKeys: readonly ["xs", "sm", "icon-xs", "icon-sm"];
+/** Props for `InputGroupButton` (ghost button sized for use inside a group). */
+export type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> & VariantProps<typeof inputGroupButtonVariants> & {
+    type?: 'button' | 'submit' | 'reset';
+};
+/** Props for `InputGroupText`. */
+export type InputGroupTextProps = React.ComponentProps<'span'>;
+/** Props for `InputGroupInput`. Same contract as `Input`, including `size`. */
+export type InputGroupInputProps = InputProps;
+/** Props for `InputGroupTextarea`. Same contract as `Textarea`. */
+export type InputGroupTextareaProps = TextareaProps;
+/**
+ * Wraps a control and addons in a single bordered, focus-styled shell. Set `data-disabled` on the root when the field is disabled.
+ */
+declare function InputGroup({ className, ...props }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Static prefix or suffix (text, `Kbd`, icon, or `InputGroupButton`). Clicking the addon focuses the nested input unless the click target is a button.
+ */
+declare function InputGroupAddon({ className, align, ...props }: InputGroupAddonProps): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupButton({ className, type, variant, size, ...props }: InputGroupButtonProps): import("react/jsx-runtime").JSX.Element;
+/** Muted inline label text inside an addon. */
+declare function InputGroupText({ className, ...props }: InputGroupTextProps): import("react/jsx-runtime").JSX.Element;
+/** Single-line control that shares the group border and focus ring. */
+declare function InputGroupInput({ className, ...props }: InputGroupInputProps): import("react/jsx-runtime").JSX.Element;
+/** Multi-line control that shares the group border and focus ring. */
+declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): import("react/jsx-runtime").JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, };
+//# sourceMappingURL=input-group.d.ts.map

package/dist/components/input-group/input-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1D,QAAA,MAAM,uBAAuB;;8EAe5B,CAAC;AAEF,eAAO,MAAM,wBAAwB,qEAAsE,CAAC;AAE5G,mCAAmC;AACnC,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAE9G,QAAA,MAAM,wBAAwB;;8EAY5B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6CAA8C,CAAC;AAEpF,gFAAgF;AAChF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAC1F,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACxC,CAAC;AAEN,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAE/D,+EAA+E;AAC/E,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC;AAE9C,mEAAmE;AACnE,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAC;AAEpD;;GAEG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAY3D;AAED;;GAEG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,KAAsB,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAkB7F;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,OAAiB,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAExH;AAED,+CAA+C;AAC/C,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAOnE;AAED,uEAAuE;AACvE,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAWrE;AAED,sEAAsE;AACtE,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAW3E;AAED,OAAO,EACH,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,GAC3B,CAAC"}

package/dist/components/input-group/input-group.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { Input } from '../input';
+import { Textarea } from '../textarea';
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+    variants: {
+        align: {
+            'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
+            'inline-end': 'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',
+            'block-start': 'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
+            'block-end': 'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
+        },
+    },
+    defaultVariants: {
+        align: 'inline-start',
+    },
+});
+export const inputGroupAddonAlignKeys = ['inline-start', 'inline-end', 'block-start', 'block-end'];
+const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: '',
+            'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+            'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+        },
+    },
+    defaultVariants: {
+        size: 'xs',
+    },
+});
+export const inputGroupButtonSizeKeys = ['xs', 'sm', 'icon-xs', 'icon-sm'];
+/**
+ * Wraps a control and addons in a single bordered, focus-styled shell. Set `data-disabled` on the root when the field is disabled.
+ */
+function InputGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5', className), ...props }));
+}
+/**
+ * Static prefix or suffix (text, `Kbd`, icon, or `InputGroupButton`). Clicking the addon focuses the nested input unless the click target is a button.
+ */
+function InputGroupAddon({ className, align = 'inline-start', ...props }) {
+    return (
+    // Click-to-focus the control (excluding nested buttons); not a standalone interactive widget.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    _jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+            if (e.target.closest('button')) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector('input, textarea')?.focus();
+        }, ...props }));
+}
+function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }) {
+    return _jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props });
+}
+/** Muted inline label text inside an addon. */
+function InputGroupText({ className, ...props }) {
+    return (_jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+/** Single-line control that shares the group border and focus ring. */
+function InputGroupInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-control", className: cn('flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent', className), ...props }));
+}
+/** Multi-line control that shares the group border and focus ring. */
+function InputGroupTextarea({ className, ...props }) {
+    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn('flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent', className), ...props }));
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, };

package/dist/components/input-group/input-group.stories.d.ts

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

package/dist/components/input-group/input-group.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.stories.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,UAAU,EAA0F,MAAM,GAAG,CAAC;AAEvH,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAmCrB,CAAC"}

package/dist/components/input-group/input-group.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from 'lucide-react';
+import { Kbd } from '../kbd';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from '.';
+const meta = {
+    title: 'UI/InputGroup',
+    component: InputGroup,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { placeholder: "example.com" })] }) })),
+};
+export const WithTrailingButton = {
+    render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Search\u2026" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", "aria-label": "Search", children: _jsx(Search, { className: "size-4" }) }) })] }) })),
+};
+export const WithKbd = {
+    render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Command\u2026" }), _jsxs(InputGroupAddon, { align: "inline-end", children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] }) })),
+};
+export const Textarea = {
+    render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "block-start", children: _jsx(InputGroupText, { children: "Description" }) }), _jsx(InputGroupTextarea, { placeholder: "Details\u2026", rows: 3 })] }) })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs("div", { className: "flex max-w-md 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: "URL prefix" }), _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { placeholder: "yoursite.com" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Trailing action" }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Search\u2026" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", "aria-label": "Search", children: _jsx(Search, { className: "size-4" }) }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Multiline" }), _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "block-start", children: _jsx(InputGroupText, { children: "Comment" }) }), _jsx(InputGroupTextarea, { rows: 3, placeholder: "Write here\u2026" })] })] })] })),
+};

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

@@ -0,0 +1,3 @@
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, itemVariants, itemMediaVariants, itemVariantKeys, itemSizeKeys, itemMediaVariantKeys, } from './item';
+export type { ItemProps, ItemGroupProps, ItemSeparatorProps, ItemMediaProps, ItemContentProps, ItemTitleProps, ItemDescriptionProps, ItemActionsProps, ItemHeaderProps, ItemFooterProps, } from './item';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,SAAS,EACT,eAAe,EACf,UAAU,EACV,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,oBAAoB,GACvB,MAAM,QAAQ,CAAC;AAChB,YAAY,EACR,SAAS,EACT,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EACf,eAAe,GAClB,MAAM,QAAQ,CAAC"}

package/dist/components/item/index.js

@@ -0,0 +1 @@
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, itemVariants, itemMediaVariants, itemVariantKeys, itemSizeKeys, itemMediaVariantKeys, } from './item';

package/dist/components/item/item.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { Separator } from '../separator';
+/** Props for `ItemGroup`. */
+export type ItemGroupProps = React.ComponentProps<'div'>;
+/** Props for `ItemSeparator`. */
+export type ItemSeparatorProps = React.ComponentProps<typeof Separator>;
+declare const itemVariants: (props?: ({
+    variant?: "default" | "outline" | "muted" | null | undefined;
+    size?: "default" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const itemVariantKeys: readonly ["default", "outline", "muted"];
+export declare const itemSizeKeys: readonly ["default", "sm", "xs"];
+/**
+ * Props for `Item`. Supports Base UI `render` for polymorphic roots (e.g. `render={<a href="..." />}`).
+ */
+export type ItemProps = useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>;
+declare const itemMediaVariants: (props?: ({
+    variant?: "default" | "image" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const itemMediaVariantKeys: readonly ["default", "icon", "image"];
+/** Props for `ItemMedia`. */
+export type ItemMediaProps = React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>;
+/** Props for `ItemContent`. */
+export type ItemContentProps = React.ComponentProps<'div'>;
+/** Props for `ItemTitle`. */
+export type ItemTitleProps = React.ComponentProps<'div'>;
+/** Props for `ItemDescription`. */
+export type ItemDescriptionProps = React.ComponentProps<'p'>;
+/** Props for `ItemActions`. */
+export type ItemActionsProps = React.ComponentProps<'div'>;
+/** Props for `ItemHeader`. */
+export type ItemHeaderProps = React.ComponentProps<'div'>;
+/** Props for `ItemFooter`. */
+export type ItemFooterProps = React.ComponentProps<'div'>;
+/**
+ * List container with spacing tuned for nested item sizes.
+ */
+declare function ItemGroup({ className, ...props }: ItemGroupProps): import("react/jsx-runtime").JSX.Element;
+/** Horizontal rule between items in a group. */
+declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Row or block for lists, menus, and settings — icon or image, title, description, and trailing actions.
+ */
+declare function Item({ className, variant, size, render, ...props }: ItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Leading visual: plain, icon-sized SVG, or image thumbnail. */
+declare function ItemMedia({ className, variant, ...props }: ItemMediaProps): import("react/jsx-runtime").JSX.Element;
+/** Primary column for title and description. */
+declare function ItemContent({ className, ...props }: ItemContentProps): import("react/jsx-runtime").JSX.Element;
+declare function ItemTitle({ className, ...props }: ItemTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function ItemDescription({ className, ...props }: ItemDescriptionProps): import("react/jsx-runtime").JSX.Element;
+/** Trailing controls (buttons, switches, metadata). */
+declare function ItemActions({ className, ...props }: ItemActionsProps): import("react/jsx-runtime").JSX.Element;
+/** Full-width row above the main media + content row. */
+declare function ItemHeader({ className, ...props }: ItemHeaderProps): import("react/jsx-runtime").JSX.Element;
+/** Full-width row below the main row. */
+declare function ItemFooter({ className, ...props }: ItemFooterProps): import("react/jsx-runtime").JSX.Element;
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, itemVariants, itemMediaVariants, };
+//# sourceMappingURL=item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/item/item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,6BAA6B;AAC7B,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEzD,iCAAiC;AACjC,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AAExE,QAAA,MAAM,YAAY;;;8EAoBjB,CAAC;AAEF,eAAO,MAAM,eAAe,0CAA2C,CAAC;AACxE,eAAO,MAAM,YAAY,kCAAmC,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAE5F,QAAA,MAAM,iBAAiB;;8EActB,CAAC;AAEF,eAAO,MAAM,oBAAoB,uCAAwC,CAAC;AAE1E,6BAA6B;AAC7B,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElG,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE3D,6BAA6B;AAC7B,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEzD,mCAAmC;AACnC,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAE7D,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE3D,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1D,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1D;;GAEG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CASzD;AAED,gDAAgD;AAChD,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEjE;AAED;;GAEG;AACH,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,IAAgB,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,0EAgB9F;AAED,iEAAiE;AACjE,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAE9E;AAED,gDAAgD;AAChD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ7D;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAWzD;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAWrE;AAED,uDAAuD;AACvD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAE7D;AAED,yDAAyD;AACzD,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAE3D;AAED,yCAAyC;AACzC,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAE3D;AAED,OAAO,EACH,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,SAAS,EACT,eAAe,EACf,UAAU,EACV,UAAU,EACV,YAAY,EACZ,iBAAiB,GACpB,CAAC"}

package/dist/components/item/item.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { Separator } from '../separator';
+const itemVariants = cva('group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted', {
+    variants: {
+        variant: {
+            default: 'border-transparent',
+            outline: 'border-border',
+            muted: 'border-transparent bg-muted/50',
+        },
+        size: {
+            default: 'gap-2.5 px-3 py-2.5',
+            sm: 'gap-2.5 px-3 py-2.5',
+            xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+export const itemVariantKeys = ['default', 'outline', 'muted'];
+export const itemSizeKeys = ['default', 'sm', 'xs'];
+const itemMediaVariants = cva('flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none', {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            icon: "[&_svg:not([class*='size-'])]:size-4",
+            image: 'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+export const itemMediaVariantKeys = ['default', 'icon', 'image'];
+/**
+ * List container with spacing tuned for nested item sizes.
+ */
+function ItemGroup({ className, ...props }) {
+    return (_jsx("div", { role: "list", "data-slot": "item-group", className: cn('group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2', className), ...props }));
+}
+/** Horizontal rule between items in a group. */
+function ItemSeparator({ className, ...props }) {
+    return _jsx(Separator, { "data-slot": "item-separator", orientation: "horizontal", className: cn('my-2', className), ...props });
+}
+/**
+ * Row or block for lists, menus, and settings — icon or image, title, description, and trailing actions.
+ */
+function Item({ className, variant = 'default', size = 'default', render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        props: mergeProps({
+            className: cn(itemVariants({ variant, size, className })),
+        }, props),
+        render,
+        state: {
+            slot: 'item',
+            variant,
+            size,
+        },
+    });
+}
+/** Leading visual: plain, icon-sized SVG, or image thumbnail. */
+function ItemMedia({ className, variant = 'default', ...props }) {
+    return _jsx("div", { "data-slot": "item-media", "data-variant": variant, className: cn(itemMediaVariants({ variant, className })), ...props });
+}
+/** Primary column for title and description. */
+function ItemContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-content", className: cn('flex flex-1 flex-col gap-0.5 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none', className), ...props }));
+}
+function ItemTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-title", className: cn('line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4 [text-box-edge:cap_alphabetic] [text-box-trim:trim-both]', className), ...props }));
+}
+function ItemDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "item-description", className: cn('line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary', className), ...props }));
+}
+/** Trailing controls (buttons, switches, metadata). */
+function ItemActions({ className, ...props }) {
+    return _jsx("div", { "data-slot": "item-actions", className: cn('flex items-center gap-2', className), ...props });
+}
+/** Full-width row above the main media + content row. */
+function ItemHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "item-header", className: cn('flex basis-full items-center justify-between gap-2', className), ...props });
+}
+/** Full-width row below the main row. */
+function ItemFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "item-footer", className: cn('flex basis-full items-center justify-between gap-2', className), ...props });
+}
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, itemVariants, itemMediaVariants, };

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

@@ -0,0 +1,34 @@
+import type { StoryObj } from '@storybook/react';
+import { Item } from '.';
+declare const meta: {
+    title: string;
+    component: typeof Item;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        variant: "default";
+        size: "default";
+    };
+    argTypes: {
+        variant: {
+            control: "select";
+            options: readonly ["default", "outline", "muted"];
+        };
+        size: {
+            control: "select";
+            options: readonly ["default", "sm", "xs"];
+        };
+        className: {
+            control: false;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Outline: Story;
+export declare const AsLink: Story;
+export declare const Gallery: Story;
+//# sourceMappingURL=item.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.stories.d.ts","sourceRoot":"","sources":["../../../src/components/item/item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EACH,IAAI,EAaP,MAAM,GAAG,CAAC;AAEX,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAgBmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA2FrB,CAAC"}

package/dist/components/item/item.stories.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bell, User } from 'lucide-react';
+import { Button } from '../button';
+import { Switch } from '../switch';
+import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, itemMediaVariantKeys, ItemSeparator, itemSizeKeys, ItemTitle, itemVariantKeys, } from '.';
+const meta = {
+    title: 'UI/Item',
+    component: Item,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        variant: 'default',
+        size: 'default',
+    },
+    argTypes: {
+        variant: { control: 'select', options: itemVariantKeys },
+        size: { control: 'select', options: itemSizeKeys },
+        className: { control: false },
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { ...args, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(Bell, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Notifications" }), _jsx(ItemDescription, { children: "Email, push, and in-app alerts." })] }), _jsx(ItemActions, { children: _jsx(Switch, { "aria-label": "Enable notifications", defaultChecked: true }) })] }) })),
+};
+export const Outline = {
+    args: { variant: 'outline' },
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { ...args, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(User, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Profile" }), _jsx(ItemDescription, { children: "Manage your public name and avatar." })] }), _jsx(ItemActions, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Edit" }) })] }) })),
+};
+export const AsLink = {
+    render: () => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { render: 
+            // Children are merged from `Item` by useRender; ESLint cannot see them on this JSX node.
+            // eslint-disable-next-line jsx-a11y/anchor-has-content -- runtime children from Item
+            _jsx("a", { href: "https://example.org", className: "cursor-pointer", rel: "noreferrer", target: "_blank" }), children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(Bell, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Open settings" }), _jsxs(ItemDescription, { children: ["Entire row is a link when using ", _jsx("code", { className: "rounded bg-muted px-1", children: "render" }), "."] })] })] }) })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs("div", { className: "flex max-w-lg flex-col gap-10", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Variants" }), _jsx(ItemGroup, { children: itemVariantKeys.map((variant) => (_jsxs(Item, { variant: variant, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(Bell, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "capitalize", children: variant }), _jsx(ItemDescription, { children: "Variant preset for list rows." })] })] }, variant))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Sizes" }), _jsx(ItemGroup, { children: itemSizeKeys.map((size) => (_jsxs(Item, { size: size, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(User, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "capitalize", children: size }), _jsx(ItemDescription, { children: "Spacing for dense menus or roomy panels." })] })] }, size))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With header & footer" }), _jsxs(Item, { variant: "outline", children: [_jsxs(ItemHeader, { children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase", children: "Section" }), _jsx(Button, { size: "xs", variant: "ghost", children: "More" })] }), _jsx(ItemMedia, { variant: "icon", children: _jsx(Bell, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Grouped layout" }), _jsx(ItemDescription, { children: "Header and footer span the full width of the item." })] }), _jsx(ItemFooter, { children: _jsx("span", { className: "text-xs text-muted-foreground", children: "Updated today" }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Media variants" }), _jsx("div", { className: "flex flex-col gap-2", children: itemMediaVariantKeys.map((mv) => (_jsxs(Item, { children: [_jsx(ItemMedia, { variant: mv, children: mv === 'image' ? _jsx("img", { src: "https://avatars.githubusercontent.com/u/1406596?v=4", alt: "" }) : mv === 'icon' ? _jsx(Bell, {}) : null }), _jsxs(ItemContent, { children: [_jsxs(ItemTitle, { className: "capitalize", children: [mv, " media"] }), _jsx(ItemDescription, { children: "Leading visual treatment." })] })] }, mv))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Separated list" }), _jsxs(ItemGroup, { children: [_jsx(Item, { size: "sm", children: _jsx(ItemContent, { children: _jsx(ItemTitle, { children: "First" }) }) }), _jsx(ItemSeparator, {}), _jsx(Item, { size: "sm", children: _jsx(ItemContent, { children: _jsx(ItemTitle, { children: "Second" }) }) })] })] })] })),
+};

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

@@ -0,0 +1,3 @@
+export { Kbd, KbdGroup } from './kbd';
+export type { KbdProps, KbdGroupProps } from './kbd';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/kbd/index.js

@@ -0,0 +1 @@
+export { Kbd, KbdGroup } from './kbd';

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+/** Props for `Kbd`. */
+export type KbdProps = React.ComponentProps<'kbd'>;
+/** Props for `KbdGroup`. */
+export type KbdGroupProps = React.ComponentProps<'div'>;
+/**
+ * A single keyboard key or shortcut hint. Renders a semantic `<kbd>` element.
+ */
+declare function Kbd({ className, ...props }: KbdProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Wraps multiple `Kbd` elements with consistent spacing (e.g. chord shortcuts).
+ */
+declare function KbdGroup({ className, ...props }: KbdGroupProps): import("react/jsx-runtime").JSX.Element;
+export { Kbd, KbdGroup };
+//# sourceMappingURL=kbd.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../src/components/kbd/kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,uBAAuB;AACvB,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEnD,4BAA4B;AAC5B,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAExD;;GAEG;AACH,iBAAS,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAW7C;AAED;;GAEG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAEvD;AAED,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/kbd/kbd.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+/**
+ * A single keyboard key or shortcut hint. Renders a semantic `<kbd>` element.
+ */
+function Kbd({ className, ...props }) {
+    return (_jsx("kbd", { "data-slot": "kbd", className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3", className), ...props }));
+}
+/**
+ * Wraps multiple `Kbd` elements with consistent spacing (e.g. chord shortcuts).
+ */
+function KbdGroup({ className, ...props }) {
+    return _jsx("div", { "data-slot": "kbd-group", className: cn('inline-flex items-center gap-1', className), ...props });
+}
+export { Kbd, KbdGroup };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.stories.d.ts","sourceRoot":"","sources":["../../../src/components/kbd/kbd.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,GAAG,EAAY,MAAM,GAAG,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;CAOkB,CAAC;AAE7B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAkCrB,CAAC"}