@wheelhouse/ui 0.1.6 → 0.2.0

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,15 @@
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+/** Props for `Accordion` root. See [Base UI Accordion](https://base-ui.com/react/components/accordion). */
+export type AccordionProps = AccordionPrimitive.Root.Props;
+/** Props for `AccordionItem`. */
+export type AccordionItemProps = AccordionPrimitive.Item.Props;
+/** Props for `AccordionTrigger`. */
+export type AccordionTriggerProps = AccordionPrimitive.Trigger.Props;
+/** Props for `AccordionContent` (collapsible panel). */
+export type AccordionContentProps = AccordionPrimitive.Panel.Props;
+declare function Accordion({ className, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAK3E,2GAA2G;AAC3G,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;AAE3D,iCAAiC;AACjC,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;AAE/D,oCAAoC;AACpC,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC;AAErE,wDAAwD;AACxD,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC;AAEnE,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAEzD;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEjE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAiBjF;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAiBjF;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/accordion/accordion.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+import { cn } from '../../lib/utils';
+import { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react/dist/ssr';
+function Accordion({ className, ...props }) {
+    return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", className: cn('flex w-full flex-col', className), ...props });
+}
+function AccordionItem({ className, ...props }) {
+    return _jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn('not-last:border-b', className), ...props });
+}
+function AccordionTrigger({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground', className), ...props, children: [children, _jsx(CaretDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }), _jsx(CaretUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })] }) }));
+}
+function AccordionContent({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Panel, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up", ...props, children: _jsx("div", { className: cn('h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4', className), children: children }) }));
+}
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.stories.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAqD,MAAM,aAAa,CAAC;AAE3F,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAcC,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC"}

package/dist/components/accordion/accordion.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
+const meta = {
+    title: 'UI/Accordion',
+    component: Accordion,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-full max-w-md p-4", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Accordion, { defaultValue: ['item-1'], children: [_jsxs(AccordionItem, { value: "item-1", children: [_jsx(AccordionTrigger, { children: "Is it accessible?" }), _jsx(AccordionContent, { children: "Yes. It uses semantic markup and supports keyboard navigation." })] }), _jsxs(AccordionItem, { value: "item-2", children: [_jsx(AccordionTrigger, { children: "Is it styled?" }), _jsx(AccordionContent, { children: "Yes. It matches Wheelhouse tokens and motion presets." })] })] })),
+};

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

@@ -0,0 +1,3 @@
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion';
+export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps } from './accordion';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion';

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertAction({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertTitle, AlertDescription, AlertAction };
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAEF,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,2CAEhH;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAExE;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/alert/alert.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: 'bg-card text-card-foreground',
+            destructive: 'border-destructive-foreground/30 bg-card text-destructive-foreground *:data-[slot=alert-description]:text-destructive-foreground/90 *:[svg]:text-current',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function Alert({ className, variant, ...props }) {
+    return _jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props });
+}
+function AlertTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-title", className: cn('font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground', className), ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-description", className: cn('text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4', className), ...props }));
+}
+function AlertAction({ className, ...props }) {
+    return _jsx("div", { "data-slot": "alert-action", className: cn('absolute top-2 right-2', className), ...props });
+}
+export { Alert, AlertTitle, AlertDescription, AlertAction };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.stories.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,KAAK,EAA6C,MAAM,SAAS,CAAC;AAI3E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAcC,CAAC;AAE/B,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,KA+DrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAC"}

package/dist/components/alert/alert.stories.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from './alert';
+import { Button } from '../button';
+import { InfoIcon, WarningIcon } from '@phosphor-icons/react/dist/ssr';
+const meta = {
+    title: 'UI/Alert',
+    component: Alert,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-96", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs(Alert, { ...args, children: [_jsx(AlertTitle, { children: "Heads up!" }), _jsx(AlertDescription, { children: "You can add components to your app using the CLI." })] })),
+};
+export const Gallery = {
+    parameters: {
+        layout: 'padded',
+        controls: { disable: true },
+    },
+    render: () => (_jsxs("div", { className: "flex max-w-[min(100vw-2rem,42rem)] flex-col gap-10", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Default" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { children: [_jsx(AlertTitle, { children: "Heads up!" }), _jsx(AlertDescription, { children: "You can add components to your app using the CLI." })] }), _jsxs(Alert, { children: [_jsx(InfoIcon, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Information" }), _jsx(AlertDescription, { children: "Your subscription renews on the 1st of next month." })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Destructive" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: "Your session has expired. Please sign in again to continue." })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(WarningIcon, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: "Your session has expired. Please sign in again to continue." })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With Action" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { children: [_jsx(AlertTitle, { children: "Update available" }), _jsx(AlertDescription, { children: "A new version of the application is ready to install." }), _jsx(AlertAction, { children: _jsx(Button, { size: "xs", variant: "outline", children: "Update" }) })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(WarningIcon, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Payment failed" }), _jsx(AlertDescription, { children: "We could not process your payment. Please update your billing details." }), _jsx(AlertAction, { children: _jsx(Button, { size: "xs", variant: "outline", children: "Fix now" }) })] })] })] })] })),
+};
+export const WithIcon = {
+    render: (args) => (_jsxs(Alert, { ...args, children: [_jsx(InfoIcon, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Information" }), _jsx(AlertDescription, { children: "Your subscription renews on the 1st of next month." })] })),
+};
+export const Destructive = {
+    render: (args) => (_jsxs(Alert, { ...args, variant: "destructive", children: [_jsx(WarningIcon, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: "Your session has expired. Please sign in again to continue." })] })),
+};
+export const WithAction = {
+    render: (args) => (_jsxs(Alert, { ...args, children: [_jsx(AlertTitle, { children: "Update available" }), _jsx(AlertDescription, { children: "A new version of the application is ready to install." }), _jsx(AlertAction, { children: _jsx(Button, { size: "xs", variant: "outline", children: "Update" }) })] })),
+};

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

@@ -0,0 +1,2 @@
+export { Alert, AlertAction, AlertDescription, AlertTitle } from './alert';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/alert/index.js

@@ -0,0 +1 @@
+export { Alert, AlertAction, AlertDescription, AlertTitle } from './alert';

package/dist/components/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { Button } from '../button';
+/** Props for the alert dialog root. See [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog). */
+export type AlertDialogProps = AlertDialogPrimitive.Root.Props;
+declare function AlertDialog({ ...props }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the element that opens the alert (typically a button). */
+export type AlertDialogTriggerProps = AlertDialogPrimitive.Trigger.Props;
+declare function AlertDialogTrigger({ ...props }: AlertDialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the portal that renders the overlay and popup into `document.body` (or a custom container). */
+export type AlertDialogPortalProps = AlertDialogPrimitive.Portal.Props;
+declare function AlertDialogPortal({ ...props }: AlertDialogPortalProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the dimmed backdrop behind the popup. */
+export type AlertDialogOverlayProps = AlertDialogPrimitive.Backdrop.Props;
+declare function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the alert surface; extends the Base UI popup with `size` layout presets. */
+export type AlertDialogContentProps = AlertDialogPrimitive.Popup.Props & {
+    /** Layout width preset: `default` grows on larger screens; `sm` stays compact with a two-column footer on small screens. */
+    size?: 'default' | 'sm';
+};
+declare function AlertDialogContent({ className, size, ...props }: AlertDialogContentProps): import("react/jsx-runtime").JSX.Element;
+/** Layout wrapper for optional media, title, and description. */
+export type AlertDialogHeaderProps = React.ComponentProps<'div'>;
+declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+/** Footer row for cancel and primary actions. */
+export type AlertDialogFooterProps = React.ComponentProps<'div'>;
+declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): import("react/jsx-runtime").JSX.Element;
+/** Optional icon or illustration slot above the title (default size layout). */
+export type AlertDialogMediaProps = React.ComponentProps<'div'>;
+declare function AlertDialogMedia({ className, ...props }: AlertDialogMediaProps): import("react/jsx-runtime").JSX.Element;
+/** Accessible title; renders a heading. */
+export type AlertDialogTitleProps = AlertDialogPrimitive.Title.Props;
+declare function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps): import("react/jsx-runtime").JSX.Element;
+/** Supporting text below the title. */
+export type AlertDialogDescriptionProps = AlertDialogPrimitive.Description.Props;
+declare function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+/** Primary action; renders a `Button` (does not dismiss the alert — use `AlertDialogCancel` or close via the dialog API). */
+export type AlertDialogActionProps = React.ComponentProps<typeof Button>;
+declare function AlertDialogAction({ className, ...props }: AlertDialogActionProps): import("react/jsx-runtime").JSX.Element;
+/** Dismiss action; wraps Base UI `Close` with outline `Button` styling by default. */
+export type AlertDialogCancelProps = AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>;
+declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialogCancelProps): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/components/alert-dialog/alert-dialog.d.ts.map

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

package/dist/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+function AlertDialog({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn('fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0', className), ...props }));
+}
+function AlertDialogContent({ className, size = 'default', ...props }) {
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn('group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props })] }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn('grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]', className), ...props }));
+}
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn('-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end', className), ...props }));
+}
+function AlertDialogMedia({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-media", className: cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn('font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2', className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn('text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground', className), ...props }));
+}
+function AlertDialogAction({ className, ...props }) {
+    return _jsx(Button, { "data-slot": "alert-dialog-action", className: cn(className), ...props });
+}
+function AlertDialogCancel({ className, variant = 'outline', size = 'default', ...props }) {
+    return (_jsx(AlertDialogPrimitive.Close, { "data-slot": "alert-dialog-cancel", className: cn(className), render: _jsx(Button, { variant: variant, size: size }), ...props }));
+}
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/alert-dialog/alert-dialog.stories.d.ts

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

package/dist/components/alert-dialog/alert-dialog.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/alert-dialog/alert-dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EACH,WAAW,EAUd,MAAM,gBAAgB,CAAC;AAExB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAOlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAmBvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAC"}

package/dist/components/alert-dialog/alert-dialog.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WarningCircleIcon } from '@phosphor-icons/react/WarningCircle';
+import { Button } from '../button';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger, } from './alert-dialog';
+const meta = {
+    title: 'UI/Alert Dialog',
+    component: AlertDialog,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Delete item" }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete this item?" }), _jsx(AlertDialogDescription, { children: "This action cannot be undone. The item will be removed permanently." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Delete" })] })] })] })),
+};
+export const WithMedia = {
+    render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Unsaved changes" }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogMedia, { children: _jsx(WarningCircleIcon, { "aria-hidden": true }) }), _jsx(AlertDialogTitle, { children: "Discard changes?" }), _jsx(AlertDialogDescription, { children: "You have unsaved edits. If you leave now, they will be lost." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep editing" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Discard" })] })] })] })),
+};
+export const SizeSm = {
+    render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Compact layout" }), _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Sign out?" }), _jsx(AlertDialogDescription, { children: "You will need to sign in again to access your account." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { children: "Sign out" })] })] })] })),
+};

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1,3 @@
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } from './alert-dialog';
+export type { AlertDialogActionProps, AlertDialogCancelProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogFooterProps, AlertDialogHeaderProps, AlertDialogMediaProps, AlertDialogOverlayProps, AlertDialogPortalProps, AlertDialogProps, AlertDialogTitleProps, AlertDialogTriggerProps, } from './alert-dialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/alert-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/alert-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACrB,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACR,sBAAsB,EACtB,sBAAsB,EACtB,uBAAuB,EACvB,2BAA2B,EAC3B,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,EACvB,sBAAsB,EACtB,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,GAC1B,MAAM,gBAAgB,CAAC"}

package/dist/components/alert-dialog/index.js

@@ -0,0 +1 @@
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } from './alert-dialog';

package/dist/components/aspect-ratio/aspect-ratio.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * Props for `AspectRatio`. Sets CSS `aspect-ratio` via `--ratio` (width ÷ height, e.g. `16/9`).
+ */
+export type AspectRatioProps = React.ComponentProps<'div'> & {
+    /** Width divided by height (e.g. `1` for square, `16/9` for video). */
+    ratio: number;
+};
+declare function AspectRatio({ ratio, className, ...props }: AspectRatioProps): import("react/jsx-runtime").JSX.Element;
+export { AspectRatio };
+//# sourceMappingURL=aspect-ratio.d.ts.map

package/dist/components/aspect-ratio/aspect-ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/aspect-ratio/aspect-ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACzD,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAapE;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+function AspectRatio({ ratio, className, ...props }) {
+    return (_jsx("div", { "data-slot": "aspect-ratio", style: {
+            '--ratio': ratio,
+        }, className: cn('relative aspect-(--ratio)', className), ...props }));
+}
+export { AspectRatio };

package/dist/components/aspect-ratio/aspect-ratio.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AspectRatio } from './aspect-ratio';
+declare const meta: Meta<typeof AspectRatio>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Video: Story;
+export declare const Square: Story;
+//# sourceMappingURL=aspect-ratio.stories.d.ts.map

package/dist/components/aspect-ratio/aspect-ratio.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/aspect-ratio/aspect-ratio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAcC,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC"}

package/dist/components/aspect-ratio/aspect-ratio.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AspectRatio } from './aspect-ratio';
+const meta = {
+    title: 'UI/AspectRatio',
+    component: AspectRatio,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-72 p-4", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Video = {
+    args: {
+        ratio: 16 / 9,
+    },
+    render: (args) => (_jsx(AspectRatio, { ...args, className: "overflow-hidden rounded-lg border bg-muted", children: _jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-muted-foreground", children: "16:9" }) })),
+};
+export const Square = {
+    args: {
+        ratio: 1,
+    },
+    render: (args) => (_jsx(AspectRatio, { ...args, className: "overflow-hidden rounded-lg border bg-muted", children: _jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-muted-foreground", children: "1:1" }) })),
+};

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1,3 @@
+export { AspectRatio } from './aspect-ratio';
+export type { AspectRatioProps } from './aspect-ratio';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/aspect-ratio/index.d.ts.map

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

package/dist/components/aspect-ratio/index.js

@@ -0,0 +1 @@
+export { AspectRatio } from './aspect-ratio';

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+/**
+ * Props for `Avatar`. Inherits additional behavior from
+ * [Base UI Avatar](https://base-ui.com/react/components/avatar).
+ */
+export type AvatarProps = AvatarPrimitive.Root.Props & {
+    size?: 'default' | 'sm' | 'lg';
+};
+/** Props for `AvatarImage`. */
+export type AvatarImageProps = AvatarPrimitive.Image.Props;
+/** Props for `AvatarFallback`. */
+export type AvatarFallbackProps = AvatarPrimitive.Fallback.Props;
+/** Props for `AvatarBadge`. */
+export type AvatarBadgeProps = React.ComponentProps<'span'>;
+/** Props for `AvatarGroup`. */
+export type AvatarGroupProps = React.ComponentProps<'div'>;
+/** Props for `AvatarGroupCount`. */
+export type AvatarGroupCountProps = React.ComponentProps<'div'>;
+declare function Avatar({ className, size, ...props }: AvatarPrimitive.Root.Props & {
+    size?: 'default' | 'sm' | 'lg';
+}): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): import("react/jsx-runtime").JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,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,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;CAAE,CAAC;AAC1F,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC;AAC3D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;AACjE,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5D,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC3D,oCAAoC;AACpC,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhE,iBAAS,MAAM,CAAC,EACZ,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC5B,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;CAClC,2CAYA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,2CAExE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,2CAW9E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAczE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7E;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/avatar/avatar.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+import { cn } from '../../lib/utils';
+function Avatar({ className, size = 'default', ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn('group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten', className), ...props }));
+}
+function AvatarImage({ className, ...props }) {
+    return _jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn('aspect-square size-full rounded-full object-cover', className), ...props });
+}
+function AvatarFallback({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('flex size-full items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground group-data-[size=sm]/avatar:text-xxs', className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn('absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none', 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden', 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2', 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2', className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", className: cn('group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background', className), ...props }));
+}
+function AvatarGroupCount({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn('relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3', className), ...props }));
+}
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAA2E,MAAM,GAAG,CAAC;AAEpG,QAAA,MAAM,IAAI;;;;;;;CAOqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAyFrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC"}

package/dist/components/avatar/avatar.stories.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from '.';
+const meta = {
+    title: 'UI/Avatar',
+    component: Avatar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+const AVATAR_SRC = 'https://avatars.githubusercontent.com/u/1406596?v=4';
+export const Default = {
+    render: (args) => (_jsxs(Avatar, { ...args, children: [_jsx(AvatarImage, { src: AVATAR_SRC, alt: "shadcn" }), _jsx(AvatarFallback, { children: "SC" })] })),
+};
+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" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs(Avatar, { size: "sm", children: [_jsx(AvatarImage, { src: AVATAR_SRC, alt: "Small" }), _jsx(AvatarFallback, { children: "SM" })] }), _jsxs(Avatar, { size: "default", children: [_jsx(AvatarImage, { src: AVATAR_SRC, alt: "Default" }), _jsx(AvatarFallback, { children: "MD" })] }), _jsxs(Avatar, { size: "lg", children: [_jsx(AvatarImage, { src: AVATAR_SRC, alt: "Large" }), _jsx(AvatarFallback, { children: "LG" })] })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Fallback" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs(Avatar, { size: "sm", children: [_jsx(AvatarImage, { src: "/broken.jpg", alt: "Small fallback" }), _jsx(AvatarFallback, { children: "SM" })] }), _jsxs(Avatar, { size: "default", children: [_jsx(AvatarImage, { src: "/broken.jpg", alt: "Default fallback" }), _jsx(AvatarFallback, { children: "MD" })] }), _jsxs(Avatar, { size: "lg", children: [_jsx(AvatarImage, { src: "/broken.jpg", alt: "Large fallback" }), _jsx(AvatarFallback, { children: "LG" })] })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With Badge" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs(Avatar, { size: "sm", children: [_jsx(AvatarImage, { src: AVATAR_SRC, alt: "Small with badge" }), _jsx(AvatarFallback, { children: "SC" }), _jsx(AvatarBadge, {})] }), _jsxs(Avatar, { size: "default", children: [_jsx(AvatarImage, { src: AVATAR_SRC, alt: "Default with badge" }), _jsx(AvatarFallback, { children: "SC" }), _jsx(AvatarBadge, {})] }), _jsxs(Avatar, { size: "lg", children: [_jsx(AvatarImage, { src: AVATAR_SRC, alt: "Large with badge" }), _jsx(AvatarFallback, { children: "SC" }), _jsx(AvatarBadge, {})] })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Group" }), _jsx("div", { className: "flex flex-col gap-3", children: ['sm', 'default', 'lg'].map((size) => (_jsxs(AvatarGroup, { children: [_jsxs(Avatar, { size: size, children: [_jsx(AvatarImage, { src: AVATAR_SRC, alt: "SC" }), _jsx(AvatarFallback, { children: "SC" })] }), _jsxs(Avatar, { size: size, children: [_jsx(AvatarImage, { src: "/broken.jpg", alt: "JD" }), _jsx(AvatarFallback, { children: "JD" })] }), _jsxs(Avatar, { size: size, children: [_jsx(AvatarImage, { src: "/broken.jpg", alt: "AB" }), _jsx(AvatarFallback, { children: "AB" })] }), _jsx(AvatarGroupCount, { children: "+4" })] }, size))) })] })] })),
+};
+export const Fallback = {
+    render: (args) => (_jsxs(Avatar, { ...args, children: [_jsx(AvatarImage, { src: "/broken-image.jpg", alt: "User" }), _jsx(AvatarFallback, { children: "JD" })] })),
+};
+export const Small = {
+    render: (args) => (_jsxs(Avatar, { size: "sm", ...args, children: [_jsx(AvatarImage, { src: AVATAR_SRC, alt: "shadcn" }), _jsx(AvatarFallback, { children: "SC" })] })),
+    argTypes: { size: { control: false } },
+};
+export const Large = {
+    render: (args) => (_jsxs(Avatar, { size: "lg", ...args, children: [_jsx(AvatarImage, { src: AVATAR_SRC, alt: "shadcn" }), _jsx(AvatarFallback, { children: "SC" })] })),
+    argTypes: { size: { control: false } },
+};
+export const WithBadge = {
+    render: (args) => (_jsxs(Avatar, { ...args, children: [_jsx(AvatarImage, { src: AVATAR_SRC, alt: "shadcn" }), _jsx(AvatarFallback, { children: "SC" }), _jsx(AvatarBadge, {})] })),
+};
+export const Group = {
+    render: () => (_jsxs(AvatarGroup, { children: [[
+                { src: AVATAR_SRC, fallback: 'SC' },
+                { src: '/broken.jpg', fallback: 'JD' },
+                { src: '/broken.jpg', fallback: 'AB' },
+            ].map(({ src, fallback }) => (_jsxs(Avatar, { children: [_jsx(AvatarImage, { src: src, alt: fallback }), _jsx(AvatarFallback, { children: fallback })] }, fallback))), _jsx(AvatarGroupCount, { children: "+4" })] })),
+};

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

@@ -0,0 +1,2 @@
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from './avatar';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from './avatar';