@wheelhouse/ui 0.1.6 → 0.2.0

package/dist/components/select/select.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from './select';
+const meta = {
+    title: 'UI/Select',
+    component: Select,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Select, { defaultValue: "apple", children: [_jsx(SelectTrigger, { className: "min-w-44", children: _jsx(SelectValue, { placeholder: "Pick a fruit" }) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Fruits" }), _jsx(SelectItem, { value: "apple", children: "Apple" }), _jsx(SelectItem, { value: "banana", children: "Banana" }), _jsx(SelectItem, { value: "orange", children: "Orange" })] }) })] })),
+};
+export const SmallTrigger = {
+    render: () => (_jsxs(Select, { defaultValue: "us", children: [_jsx(SelectTrigger, { size: "sm", className: "min-w-36", children: _jsx(SelectValue, { placeholder: "Region" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "us", children: "United States" }), _jsx(SelectItem, { value: "eu", children: "Europe" }), _jsx(SelectItem, { value: "apac", children: "Asia Pacific" })] })] })),
+};
+export const WithSeparator = {
+    render: () => (_jsxs(Select, { defaultValue: "new", children: [_jsx(SelectTrigger, { className: "min-w-48", children: _jsx(SelectValue, { placeholder: "Action" }) }), _jsxs(SelectContent, { children: [_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "File" }), _jsx(SelectItem, { value: "new", children: "New file" }), _jsx(SelectItem, { value: "open", children: "Open\u2026" })] }), _jsx(SelectSeparator, {}), _jsx(SelectGroup, { children: _jsx(SelectItem, { value: "quit", children: "Quit" }) })] })] })),
+};

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

@@ -1,2 +1,3 @@
 export { Separator } from './separator';
+export type { SeparatorProps } from './separator';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/separator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/separator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/separator/separator.d.ts

@@ -1,4 +1,6 @@
 import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
-declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react/jsx-runtime").JSX.Element;
+/** Props for `Separator` (extends Base UI Separator). */
+export type SeparatorProps = SeparatorPrimitive.Props;
+declare function Separator({ className, orientation, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
 export { Separator };
 //# sourceMappingURL=separator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI3E,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,KAAK,2CAS/F;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI3E,yDAAyD;AACzD,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAEtD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CASrF;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

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

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

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

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

package/dist/components/sheet/index.js

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

package/dist/components/sheet/sheet.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
+/** Props for the sheet root. See [Base UI Dialog](https://base-ui.com/react/components/dialog) (sheet uses the same primitive). */
+export type SheetProps = SheetPrimitive.Root.Props;
+declare function Sheet({ ...props }: SheetProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the element that opens the sheet (typically a button). */
+export type SheetTriggerProps = SheetPrimitive.Trigger.Props;
+declare function SheetTrigger({ ...props }: SheetTriggerProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the close control (button or custom `render`). */
+export type SheetCloseProps = SheetPrimitive.Close.Props;
+declare function SheetClose({ ...props }: SheetCloseProps): import("react/jsx-runtime").JSX.Element;
+export type SheetPortalProps = SheetPrimitive.Portal.Props;
+declare function SheetPortal({ ...props }: SheetPortalProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the dimmed backdrop behind the sheet. */
+export type SheetOverlayProps = SheetPrimitive.Backdrop.Props;
+declare function SheetOverlay({ className, ...props }: SheetOverlayProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the sliding surface; extends the Base UI popup with `side` and `showCloseButton`. */
+export type SheetContentProps = SheetPrimitive.Popup.Props & {
+    /** Which edge of the viewport the sheet slides from. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** When `true` (default), renders a ghost icon button in the corner that closes the sheet. */
+    showCloseButton?: boolean;
+};
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetContentProps): import("react/jsx-runtime").JSX.Element;
+export type SheetHeaderProps = React.ComponentProps<'div'>;
+declare function SheetHeader({ className, ...props }: SheetHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type SheetFooterProps = React.ComponentProps<'div'>;
+declare function SheetFooter({ className, ...props }: SheetFooterProps): import("react/jsx-runtime").JSX.Element;
+export type SheetTitleProps = SheetPrimitive.Title.Props;
+declare function SheetTitle({ className, ...props }: SheetTitleProps): import("react/jsx-runtime").JSX.Element;
+export type SheetDescriptionProps = SheetPrimitive.Description.Props;
+declare function SheetDescription({ className, ...props }: SheetDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetPortal, SheetOverlay, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
+//# sourceMappingURL=sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/sheet/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAMjE,mIAAmI;AACnI,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;AAEnD,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAEtC;AAED,uEAAuE;AACvE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC;AAE7D,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAEpD;AAED,+DAA+D;AAC/D,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAEhD;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC;AAE3D,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAElD;AAED,sDAAsD;AACtD,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;AAE9D,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAW/D;AAED,kGAAkG;AAClG,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,GAAG;IACzD,wDAAwD;IACxD,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,8FAA8F;IAC9F,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAc,EAAE,eAAsB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAuBjH;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE3D,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAE7D;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE3D,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAE7D;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAE3D;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,KAAK,CAAC;AAErE,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAEvE;AAED,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/sheet/sheet.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
+import { XIcon } from '@phosphor-icons/react/X';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+function Sheet({ ...props }) {
+    return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+    return _jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+    return _jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+    return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn('fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs', className), ...props }));
+}
+function SheetContent({ className, children, side = 'right', showCloseButton = true, ...props }) {
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn('fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm', className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-3 right-3", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function SheetHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "sheet-header", className: cn('flex flex-col gap-0.5 p-4', className), ...props });
+}
+function SheetFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "sheet-footer", className: cn('mt-auto flex flex-col gap-2 p-4', className), ...props });
+}
+function SheetTitle({ className, ...props }) {
+    return _jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn('font-heading text-base font-medium text-foreground', className), ...props });
+}
+function SheetDescription({ className, ...props }) {
+    return _jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn('text-sm text-muted-foreground', className), ...props });
+}
+export { Sheet, SheetTrigger, SheetClose, SheetPortal, SheetOverlay, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Sheet } from './sheet';
+declare const meta: Meta<typeof Sheet>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FromLeft: Story;
+export declare const WithoutBuiltInClose: Story;
+//# sourceMappingURL=sheet.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.stories.d.ts","sourceRoot":"","sources":["../../../src/components/sheet/sheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,KAAK,EAAyE,MAAM,SAAS,CAAC;AAEvG,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAO5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAYjC,CAAC"}

package/dist/components/sheet/sheet.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from './sheet';
+const meta = {
+    title: 'UI/Sheet',
+    component: Sheet,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Open sheet" }), _jsx(SheetContent, { children: _jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Sheet title" }), _jsx(SheetDescription, { children: "Supporting copy for this slide-over panel." })] }) })] })),
+};
+export const FromLeft = {
+    render: () => (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "From left" }), _jsx(SheetContent, { side: "left", children: _jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Navigation" }), _jsx(SheetDescription, { children: "Common pattern for narrow viewports." })] }) })] })),
+};
+export const WithoutBuiltInClose = {
+    render: () => (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Open" }), _jsx(SheetContent, { showCloseButton: false, children: _jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "No corner close" }), _jsx(SheetDescription, { children: "Use Escape or a footer action to dismiss." })] }) })] })),
+};

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

@@ -0,0 +1,3 @@
+export { Slider } from './slider';
+export type { SliderProps } from './slider';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/slider/index.js

@@ -0,0 +1 @@
+export { Slider } from './slider';

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,15 @@
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+/**
+ * Props for `Slider`. Inherits additional behavior from
+ * [Base UI Slider](https://base-ui.com/react/components/slider).
+ */
+export type SliderProps = SliderPrimitive.Root.Props & {
+    className?: string;
+};
+/**
+ * Range input for choosing a numeric value or a pair of values. Renders track, range indicator, and thumb(s)
+ * with horizontal or vertical orientation. For range selection, pass `value` or `defaultValue` as a two-element array.
+ */
+declare function Slider({ className, defaultValue, value, min, max, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export { Slider };
+//# sourceMappingURL=slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAUlE;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9E;;;GAGG;AACH,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,GAAO,EAAE,GAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAkC5F;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/slider/slider.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+import { cn } from '../../lib/utils';
+function thumbCountFromProps(value, defaultValue) {
+    if (Array.isArray(value))
+        return value.length;
+    if (Array.isArray(defaultValue))
+        return defaultValue.length;
+    return 1;
+}
+/**
+ * Range input for choosing a numeric value or a pair of values. Renders track, range indicator, and thumb(s)
+ * with horizontal or vertical orientation. For range selection, pass `value` or `defaultValue` as a two-element array.
+ */
+function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
+    const thumbCount = thumbCountFromProps(value, defaultValue);
+    return (_jsx(SliderPrimitive.Root, { className: cn('data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full', className), "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, thumbAlignment: "edge", ...props, children: _jsxs(SliderPrimitive.Control, { className: "relative flex w-full touch-none items-center select-none data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-disabled:opacity-50", children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative grow overflow-hidden rounded-full bg-muted select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1", children: _jsx(SliderPrimitive.Indicator, { "data-slot": "slider-range", className: "bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" }) }), Array.from({ length: thumbCount }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50" }, index)))] }) }));
+}
+export { Slider };

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Slider } from './slider';
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Range: Story;
+export declare const Vertical: Story;
+export declare const Disabled: Story;
+export declare const Gallery: Story;
+//# sourceMappingURL=slider.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.stories.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAc7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC"}

package/dist/components/slider/slider.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from '../label';
+import { Slider } from './slider';
+const meta = {
+    title: 'UI/Slider',
+    component: Slider,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "flex w-64 min-w-[16rem] flex-col gap-3", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { id: "story-slider-default", children: "Volume" }), _jsx(Slider, { ...args, defaultValue: 40, "aria-labelledby": "story-slider-default" })] })),
+};
+export const Range = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { id: "story-slider-range-label", children: "Price range" }), _jsx(Slider, { ...args, defaultValue: [20, 80], "aria-labelledby": "story-slider-range-label" })] })),
+};
+export const Vertical = {
+    parameters: { layout: 'padded' },
+    decorators: [
+        (Story) => (_jsx("div", { className: "flex h-48 items-stretch justify-center py-4", children: _jsx(Story, {}) })),
+    ],
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { id: "story-slider-v", className: "sr-only", children: "Level" }), _jsx(Slider, { ...args, orientation: "vertical", defaultValue: 55, "aria-labelledby": "story-slider-v" })] })),
+};
+export const Disabled = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { id: "story-slider-dis", children: "Disabled" }), _jsx(Slider, { ...args, defaultValue: 30, disabled: true, "aria-labelledby": "story-slider-dis" })] })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded', controls: { disable: true } },
+    decorators: [(Story) => _jsx(Story, {})],
+    render: () => (_jsxs("div", { className: "mx-auto flex w-full max-w-md flex-col gap-10", children: [_jsxs("section", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Default" }), _jsx(Label, { id: "gal-1", children: "Brightness" }), _jsx(Slider, { defaultValue: 65, "aria-labelledby": "gal-1" })] }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Range" }), _jsx(Label, { id: "gal-2-label", children: "Select range" }), _jsx(Slider, { defaultValue: [25, 75], "aria-labelledby": "gal-2-label" })] }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Step" }), _jsx(Label, { id: "gal-3", children: "Snap by 10" }), _jsx(Slider, { min: 0, max: 100, step: 10, defaultValue: 50, "aria-labelledby": "gal-3" })] })] })),
+};

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

@@ -0,0 +1,4 @@
+export { Toaster } from './sonner';
+export { toast } from './toast';
+export type { ToasterProps } from 'sonner';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/sonner/index.js

@@ -0,0 +1,2 @@
+export { Toaster } from './sonner';
+export { toast } from './toast';

package/dist/components/sonner/sonner.d.ts

@@ -0,0 +1,12 @@
+import { type ToasterProps } from 'sonner';
+/**
+ * Opinionated [Sonner](https://sonner.emilkowal.ski/) toaster: Wheelhouse popover tokens, Phosphor icons,
+ * and `cn-toast` class for styling. Mount once near the app root.
+ *
+ * Defaults to **`theme="system"`** so light/dark follows the OS; in Next.js with `next-themes`, pass
+ * **`theme={resolvedTheme}`** (or map `resolvedTheme` to `'light' | 'dark'`) from your layout if you
+ * rely on the `.dark` class instead of system preference.
+ */
+declare function Toaster({ theme, ...props }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export { Toaster };
+//# sourceMappingURL=sonner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../../src/components/sonner/sonner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAG9D;;;;;;;GAOG;AACH,iBAAS,OAAO,CAAC,EAAE,KAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CA4B5D;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/sonner/sonner.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Toaster as Sonner } from 'sonner';
+import { CheckCircleIcon, InfoIcon, SpinnerIcon, WarningIcon, XCircleIcon } from '@phosphor-icons/react';
+/**
+ * Opinionated [Sonner](https://sonner.emilkowal.ski/) toaster: Wheelhouse popover tokens, Phosphor icons,
+ * and `cn-toast` class for styling. Mount once near the app root.
+ *
+ * Defaults to **`theme="system"`** so light/dark follows the OS; in Next.js with `next-themes`, pass
+ * **`theme={resolvedTheme}`** (or map `resolvedTheme` to `'light' | 'dark'`) from your layout if you
+ * rely on the `.dark` class instead of system preference.
+ */
+function Toaster({ theme = 'system', ...props }) {
+    return (_jsx(Sonner, { theme: theme, className: "toaster group", icons: {
+            success: _jsx(CheckCircleIcon, { className: "size-4" }),
+            info: _jsx(InfoIcon, { className: "size-4" }),
+            warning: _jsx(WarningIcon, { className: "size-4" }),
+            error: _jsx(XCircleIcon, { className: "size-4" }),
+            loading: _jsx(SpinnerIcon, { className: "size-4 animate-spin" }),
+        }, style: {
+            '--normal-bg': 'var(--popover)',
+            '--normal-text': 'var(--popover-foreground)',
+            '--normal-border': 'var(--border)',
+            '--border-radius': 'var(--radius)',
+        }, toastOptions: {
+            classNames: {
+                toast: 'cn-toast',
+            },
+        }, ...props }));
+}
+export { Toaster };

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toaster } from './index';
+declare const meta: Meta<typeof Toaster>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Variants: Story;
+//# sourceMappingURL=sonner.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sonner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/sonner/sonner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAS,OAAO,EAAE,MAAM,SAAS,CAAC;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAe9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC"}

package/dist/components/sonner/sonner.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button';
+import { toast, Toaster } from './index';
+const meta = {
+    title: 'UI/Sonner',
+    component: Toaster,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsxs(_Fragment, { children: [_jsx(Story, {}), _jsx(Toaster, {})] })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+            toast('Event has been created', {
+                description: 'Monday, January 3rd at 6:00pm',
+            });
+        }, children: "Show toast" })),
+};
+export const Variants = {
+    render: () => (_jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => toast.success('Saved'), children: "Success" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => toast.info('FYI'), children: "Info" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => toast.warning('Heads up'), children: "Warning" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => toast.error('Something went wrong'), children: "Error" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => toast.loading('Loading…'), children: "Loading" })] })),
+};

package/dist/components/sonner/toast.d.ts

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

package/dist/components/sonner/toast.d.ts.map

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

package/dist/components/sonner/toast.js

@@ -0,0 +1 @@
+export { toast } from 'sonner';

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

@@ -0,0 +1,3 @@
+export { Spinner } from './spinner';
+export type { SpinnerProps } from './spinner';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from './spinner';

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { SpinnerIcon } from '@phosphor-icons/react/dist/ssr';
+/**
+ * Props for `Spinner`. Accepts standard SVG attributes (via Phosphor’s `SpinnerIcon`).
+ */
+export type SpinnerProps = React.ComponentPropsWithoutRef<typeof SpinnerIcon>;
+/**
+ * A compact loading indicator: spinning icon with `role="status"` and default `aria-label="Loading"`.
+ * Pass `aria-label`, `aria-hidden`, or `role` through props to override (spread is applied last).
+ */
+declare function Spinner({ className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export { Spinner };
+//# sourceMappingURL=spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,CAAC;AAE9E;;;GAGG;AACH,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAErD;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/spinner/spinner.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { SpinnerIcon } from '@phosphor-icons/react/dist/ssr';
+import { cn } from '../../lib/utils';
+/**
+ * A compact loading indicator: spinning icon with `role="status"` and default `aria-label="Loading"`.
+ * Pass `aria-label`, `aria-hidden`, or `role` through props to override (spread is applied last).
+ */
+function Spinner({ className, ...props }) {
+    return _jsx(SpinnerIcon, { "data-slot": "spinner", className: cn('size-4 animate-spin', className), role: "status", "aria-label": "Loading", ...props });
+}
+export { Spinner };

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from './spinner';
+declare const meta: Meta<typeof Spinner>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Muted: Story;
+export declare const Large: Story;
+//# sourceMappingURL=spinner.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAO9B,CAAC;AAEF,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,KAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC"}

package/dist/components/spinner/spinner.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spinner } from './spinner';
+const meta = {
+    title: 'UI/Spinner',
+    component: Spinner,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(Spinner, {}),
+};
+export const Muted = {
+    render: () => _jsx(Spinner, { className: "size-5 text-muted-foreground" }),
+};
+export const Large = {
+    render: () => _jsx(Spinner, { className: "size-8" }),
+};

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

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

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

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

package/dist/components/switch/index.js

@@ -0,0 +1 @@
+export { Switch } from './switch';

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,13 @@
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+/**
+ * Props for `Switch`. Inherits additional behavior from
+ * [Base UI Switch](https://base-ui.com/react/components/switch).
+ */
+export type SwitchProps = SwitchPrimitive.Root.Props & {
+    size?: 'sm' | 'default';
+};
+declare function Switch({ className, size, ...props }: SwitchPrimitive.Root.Props & {
+    size?: 'sm' | 'default';
+}): import("react/jsx-runtime").JSX.Element;
+export { Switch };
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlE;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CAAE,CAAC;AAEnF,iBAAS,MAAM,CAAC,EACZ,SAAS,EACT,IAAW,EACX,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CAC3B,2CAiBA;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/switch/switch.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+import { cn } from '../../lib/utils';
+function Switch({ className, size = 'sm', ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn('peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground" }) }));
+}
+export { Switch };

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

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react';
+import { Switch } from '.';
+declare const meta: {
+    title: string;
+    component: typeof Switch;
+    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 Small: Story;
+export declare const SmallChecked: Story;
+//# sourceMappingURL=switch.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.stories.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC;AAG3B,QAAA,MAAM,IAAI;;;;;;;CAOqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA6CrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC"}

package/dist/components/switch/switch.stories.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from '.';
+import { Label } from '../label';
+const meta = {
+    title: 'UI/Switch',
+    component: Switch,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+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: "Sizes" }), _jsx("div", { className: "flex flex-col gap-3", children: ['sm', 'default'].map((size) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `sz-${size}-off`, size: size }), _jsxs(Label, { htmlFor: `sz-${size}-off`, children: [size === 'sm' ? 'Small' : 'Default', " off"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `sz-${size}-on`, size: size, defaultChecked: true }), _jsxs(Label, { htmlFor: `sz-${size}-on`, children: [size === 'sm' ? 'Small' : 'Default', " on"] })] })] }, size))) })] }), _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(Switch, { id: "st-off" }), _jsx(Label, { htmlFor: "st-off", children: "Off" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "st-on", defaultChecked: true }), _jsx(Label, { htmlFor: "st-on", children: "On" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "st-disabled", disabled: true }), _jsx(Label, { htmlFor: "st-disabled", children: "Disabled" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "st-disabled-on", disabled: true, defaultChecked: true }), _jsx(Label, { htmlFor: "st-disabled-on", children: "Disabled on" })] })] })] })] })),
+};
+export const Checked = {
+    args: {
+        defaultChecked: true,
+    },
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+};
+export const DisabledChecked = {
+    args: {
+        disabled: true,
+        defaultChecked: true,
+    },
+};
+export const Small = {
+    args: {
+        size: 'sm',
+    },
+};
+export const SmallChecked = {
+    args: {
+        size: 'sm',
+        defaultChecked: true,
+    },
+};