@wheelhouse/ui 0.1.6 → 0.2.1

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

@@ -22,6 +22,10 @@ export default meta;
 export const Default = {
     render: (args) => (_jsxs(ButtonGroup, { ...args, children: [_jsx(Button, { variant: "outline", size: "sm", children: "Left" }), _jsx(Button, { variant: "outline", size: "sm", children: "Middle" }), _jsx(Button, { variant: "outline", size: "sm", children: "Right" })] })),
 };
+export const Gallery = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Orientation" }), _jsxs("div", { className: "flex flex-wrap items-start gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Horizontal" }), _jsxs(ButtonGroup, { orientation: "horizontal", children: [_jsx(Button, { variant: "outline", size: "sm", children: "Left" }), _jsx(Button, { variant: "outline", size: "sm", children: "Middle" }), _jsx(Button, { variant: "outline", size: "sm", children: "Right" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Vertical" }), _jsxs(ButtonGroup, { orientation: "vertical", children: [_jsx(Button, { variant: "outline", size: "sm", children: "Top" }), _jsx(Button, { variant: "outline", size: "sm", children: "Middle" }), _jsx(Button, { variant: "outline", size: "sm", children: "Bottom" })] })] })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With separator" }), _jsxs(ButtonGroup, { orientation: "horizontal", children: [_jsx(Button, { variant: "outline", size: "sm", children: "Action" }), _jsx(ButtonGroupSeparator, {}), _jsx(Button, { variant: "outline", size: "sm", children: "More" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With text" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(ButtonGroup, { orientation: "horizontal", children: [_jsx(ButtonGroupText, { children: "Prefix" }), _jsx(Button, { variant: "outline", size: "sm", children: "Action" })] }), _jsxs(ButtonGroup, { orientation: "horizontal", children: [_jsx(Button, { variant: "outline", size: "sm", children: "Action" }), _jsx(ButtonGroupText, { children: "Suffix" })] })] })] })] })),
+};
 export const Vertical = {
     args: { orientation: 'vertical' },
     render: (args) => (_jsxs(ButtonGroup, { ...args, children: [_jsx(Button, { variant: "outline", size: "sm", children: "Top" }), _jsx(Button, { variant: "outline", size: "sm", children: "Bottom" })] })),

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

@@ -1,2 +1,3 @@
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './button-group';
+export type { ButtonGroupProps } from './button-group';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACzG,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { type DayButton, DayPicker, type Locale } from 'react-day-picker';
+import { Button } from '../button';
+/**
+ * Props for {@link Calendar}. Includes all [react-day-picker `DayPicker` props](https://daypicker.dev/api/interfaces/DayPickerProps)
+ * plus Wheelhouse styling options.
+ */
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+    /**
+     * Visual variant for the previous/next month controls; matches {@link Button} `variant` values.
+     * @default "ghost"
+     */
+    buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+};
+/**
+ * Month grid for picking dates, ranges, or multiple days. Wraps [react-day-picker](https://react-day-picker.js.org/) `DayPicker`
+ * with design-token class names, Lucide chevrons, and {@link Button}-based day cells (`data-slot="calendar"` on the root).
+ */
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for {@link CalendarDayButton}. Mirrors the `DayButton` component from react-day-picker with an optional `locale`
+ * for `data-day` formatting.
+ */
+export type CalendarDayButtonProps = React.ComponentProps<typeof DayButton> & {
+    /** Passed from the parent `DayPicker` for locale-aware day labels. */
+    locale?: Partial<Locale>;
+};
+/**
+ * Individual day cell button used inside {@link Calendar}. Focus management for keyboard navigation is handled here.
+ * Override via `components.DayButton` on {@link Calendar} only when you need custom day rendering.
+ */
+declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: CalendarDayButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };
+//# sourceMappingURL=calendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAE,SAAS,EAAwB,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAGhG,OAAO,EAAE,MAAM,EAAkB,MAAM,WAAW,CAAC;AAGnD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IACjE;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAClE,CAAC;AAEF;;;GAGG;AACH,iBAAS,QAAQ,CAAC,EACd,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,MAAM,EACN,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACX,EAAE,aAAa,2CAqGf;AAED;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1E,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAyBjG;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/calendar/calendar.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { DayPicker, getDefaultClassNames } from 'react-day-picker';
+import { cn } from '../../lib/utils';
+import { Button, buttonVariants } from '../button';
+import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+/**
+ * Month grid for picking dates, ranges, or multiple days. Wraps [react-day-picker](https://react-day-picker.js.org/) `DayPicker`
+ * with design-token class names, Lucide chevrons, and {@link Button}-based day cells (`data-slot="calendar"` on the root).
+ */
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', locale, formatters, components, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent', String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),
+            ...formatters,
+        }, classNames: {
+            root: cn('w-fit', defaultClassNames.root),
+            months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
+            month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
+            nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) p-0 select-none aria-disabled:opacity-50', defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) p-0 select-none aria-disabled:opacity-50', defaultClassNames.button_next),
+            month_caption: cn('flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)', defaultClassNames.month_caption),
+            dropdowns: cn('flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium', defaultClassNames.dropdowns),
+            dropdown_root: cn('relative rounded-(--cell-radius)', defaultClassNames.dropdown_root),
+            dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),
+            caption_label: cn('font-medium select-none', captionLayout === 'label'
+                ? 'text-sm'
+                : 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground', defaultClassNames.caption_label),
+            /** RDP v9: the day grid `<table>` uses the `month_grid` class key (not `table`). */
+            month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),
+            weekdays: cn('flex', defaultClassNames.weekdays),
+            weekday: cn('flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none', defaultClassNames.weekday),
+            week: cn('mt-2 flex w-full', defaultClassNames.week),
+            week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
+            week_number: cn('text-[0.8rem] text-muted-foreground select-none', defaultClassNames.week_number),
+            day: cn('group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)', props.showWeekNumber
+                ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
+                : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)', defaultClassNames.day),
+            range_start: cn('relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted', defaultClassNames.range_start),
+            range_middle: cn('rounded-none', defaultClassNames.range_middle),
+            range_end: cn('relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted', defaultClassNames.range_end),
+            today: cn('rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none', defaultClassNames.today),
+            outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
+            disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+            hidden: cn('invisible', defaultClassNames.hidden),
+            ...classNames,
+        }, components: {
+            Root: ({ className, rootRef, ...props }) => {
+                return _jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props });
+            },
+            Chevron: ({ className, orientation, ...props }) => {
+                if (orientation === 'left') {
+                    return _jsx(ChevronLeft, { className: cn('size-4', className), ...props });
+                }
+                if (orientation === 'right') {
+                    return _jsx(ChevronRight, { className: cn('size-4', className), ...props });
+                }
+                return _jsx(ChevronDown, { className: cn('size-4', className), ...props });
+            },
+            DayButton: ({ ...props }) => _jsx(CalendarDayButton, { locale: locale, ...props }),
+            WeekNumber: ({ children, ...props }) => {
+                return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
+            },
+            ...components,
+        }, ...props }));
+}
+/**
+ * Individual day cell button used inside {@link Calendar}. Focus management for keyboard navigation is handled here.
+ * Override via `components.DayButton` on {@link Calendar} only when you need custom day rendering.
+ */
+function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return (_jsx(Button, { variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
+}
+export { Calendar, CalendarDayButton };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/calendar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAE7B,QAAA,MAAM,IAAI;;;;;;;CAOuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC"}

package/dist/components/calendar/calendar.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Calendar } from '.';
+const meta = {
+    title: 'UI/Calendar',
+    component: Calendar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Single = {
+    render: function SingleCalendar() {
+        const [selected, setSelected] = useState(new Date(2026, 3, 13));
+        return _jsx(Calendar, { mode: "single", selected: selected, onSelect: setSelected, defaultMonth: selected, className: "rounded-md border" });
+    },
+};
+export const Range = {
+    render: function RangeCalendar() {
+        const [range, setRange] = useState({
+            from: new Date(2026, 3, 10),
+            to: new Date(2026, 3, 18),
+        });
+        return _jsx(Calendar, { mode: "range", selected: range, onSelect: setRange, defaultMonth: range?.from, numberOfMonths: 2, className: "rounded-md border" });
+    },
+};
+export const DropdownCaption = {
+    render: function DropdownCaptionCalendar() {
+        const [selected, setSelected] = useState(new Date(2026, 3, 13));
+        return (_jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: selected, onSelect: setSelected, defaultMonth: selected, fromYear: 2020, toYear: 2030, className: "rounded-md border" }));
+    },
+};

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

@@ -0,0 +1,3 @@
+export { Calendar, CalendarDayButton } from './calendar';
+export type { CalendarProps, CalendarDayButtonProps } from './calendar';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/calendar/index.js

@@ -0,0 +1 @@
+export { Calendar, CalendarDayButton } from './calendar';

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+/** Props for `Card`. */
+export type CardProps = React.ComponentProps<'div'> & {
+    size?: 'default' | 'sm';
+};
+/** Props for `CardHeader`. */
+export type CardHeaderProps = React.ComponentProps<'div'>;
+/** Props for `CardTitle`. */
+export type CardTitleProps = React.ComponentProps<'div'>;
+/** Props for `CardDescription`. */
+export type CardDescriptionProps = React.ComponentProps<'div'>;
+/** Props for `CardAction`. */
+export type CardActionProps = React.ComponentProps<'div'>;
+/** Props for `CardContent`. */
+export type CardContentProps = React.ComponentProps<'div'>;
+/** Props for `CardFooter`. */
+export type CardFooterProps = React.ComponentProps<'div'>;
+declare function Card({ className, size, ...props }: React.ComponentProps<'div'> & {
+    size?: 'default' | 'sm';
+}): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,wBAAwB;AACxB,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;CAAE,CAAC;AAClF,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1D,6BAA6B;AAC7B,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AACzD,mCAAmC;AACnC,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC/D,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1D,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC3D,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1D,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;CAAE,2CAYjH;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAEtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAE5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAEvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAExE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/card/card.js

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

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card } from '.';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Gallery: Story;
+export declare const Small: Story;
+export declare const WithAction: Story;
+//# sourceMappingURL=card.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,IAAI,EAA+E,MAAM,GAAG,CAAC;AAGtG,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAcC,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA6ErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAanB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC"}

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

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

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

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

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

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

package/dist/components/card/index.js

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

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

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

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

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

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { cn } from '../../lib/utils';
+import { Check } from 'lucide-react';
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(Check, {}) }) }));
+}
+export { Checkbox };

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

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

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

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

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

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

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

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

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

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

package/dist/components/checkbox/index.js

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

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

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

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

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

package/dist/components/collapsible/collapsible.js

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/collapsible/index.js

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

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

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

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

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