@wheelhouse/ui 0.1.6 → 0.2.1

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 { AlertCircle } from 'lucide-react';
+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(AlertCircle, { "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';

package/dist/components/badge/badge.d.ts

@@ -19,23 +19,24 @@ declare const badgeVariantStyles: {
     readonly 'destructive-outline': "border-border bg-background text-destructive-foreground dark:bg-input/30";
 };
 declare const badgeSizeStyles: {
-    readonly default: "h-5.5 min-w-5.5 px-[calc(--spacing(1)-1px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs";
+    readonly default: "h-5.5 min-w-5.5 px-[calc(--spacing(1)-0px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs";
     readonly lg: "h-6.5 min-w-6.5 px-[calc(--spacing(1.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm";
     readonly sm: "h-5 min-w-5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]";
 };
 export declare const badgeVariantKeys: (keyof typeof badgeVariantStyles)[];
 export declare const badgeSizeKeys: (keyof typeof badgeSizeStyles)[];
 declare const badgeVariants: (props?: ({
-    size?: "default" | "lg" | "sm" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
     variant?: "default" | "outline" | "secondary" | "info" | "success" | "warning" | "destructive" | "warning-light" | "success-light" | "info-light" | "destructive-light" | "primary-outline" | "warning-outline" | "success-outline" | "info-outline" | "destructive-outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type BadgeVariantProps = VariantProps<typeof badgeVariants>;
 type BadgeVariant = BadgeVariantProps['variant'];
 type BadgeSize = BadgeVariantProps['size'];
-interface BadgeProps extends useRender.ComponentProps<'span'> {
+/** Props for `Badge`. */
+export interface BadgeProps extends useRender.ComponentProps<'span'> {
     variant?: BadgeVariant;
     size?: BadgeSize;
 }
 declare function Badge({ className, variant, size, render, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export { Badge, badgeVariants, type BadgeProps };
+export { Badge, badgeVariants };
 //# sourceMappingURL=badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;CAiBd,CAAC;AAEX,QAAA,MAAM,eAAe;;;;CAIX,CAAC;AAEX,eAAO,MAAM,gBAAgB,EAAsC,CAAC,MAAM,OAAO,kBAAkB,CAAC,EAAE,CAAC;AACvG,eAAO,MAAM,aAAa,EAAmC,CAAC,MAAM,OAAO,eAAe,CAAC,EAAE,CAAC;AAE9F,QAAA,MAAM,aAAa;;;8EAYlB,CAAC;AAEF,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC5D,KAAK,YAAY,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AACjD,KAAK,SAAS,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;AAE3C,UAAU,UAAW,SAAQ,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC;IACzD,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,8FAWxE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;CAiBd,CAAC;AAEX,QAAA,MAAM,eAAe;;;;CAIX,CAAC;AAEX,eAAO,MAAM,gBAAgB,EAAsC,CAAC,MAAM,OAAO,kBAAkB,CAAC,EAAE,CAAC;AACvG,eAAO,MAAM,aAAa,EAAmC,CAAC,MAAM,OAAO,eAAe,CAAC,EAAE,CAAC;AAE9F,QAAA,MAAM,aAAa;;;8EAYlB,CAAC;AAEF,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC5D,KAAK,YAAY,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AACjD,KAAK,SAAS,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;AAE3C,yBAAyB;AACzB,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC;IAChE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,IAAgB,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,8FAWhG;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/badge/badge.js

@@ -21,13 +21,13 @@ const badgeVariantStyles = {
     'destructive-outline': 'border-border bg-background text-destructive-foreground dark:bg-input/30',
 };
 const badgeSizeStyles = {
-    default: 'h-5.5 min-w-5.5 px-[calc(--spacing(1)-1px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs',
+    default: 'h-5.5 min-w-5.5 px-[calc(--spacing(1)-0px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs',
     lg: 'h-6.5 min-w-6.5 px-[calc(--spacing(1.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm',
     sm: 'h-5 min-w-5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]',
 };
 export const badgeVariantKeys = Object.keys(badgeVariantStyles);
 export const badgeSizeKeys = Object.keys(badgeSizeStyles);
-const badgeVariants = cva('relative inline-flex w-fit shrink-0 items-center justify-center rounded-sm border border-transparent font-medium whitespace-nowrap transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3', {
+const badgeVariants = cva('relative inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-sm border border-transparent font-medium whitespace-nowrap transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-2.5', {
     variants: {
         size: badgeSizeStyles,
         variant: badgeVariantStyles,
@@ -37,7 +37,7 @@ const badgeVariants = cva('relative inline-flex w-fit shrink-0 items-center just
         size: 'default',
     },
 });
-function Badge({ className, variant, size, render, ...props }) {
+function Badge({ className, variant = 'default', size = 'default', render, ...props }) {
     const defaultProps = {
         'data-slot': 'badge',
         className: cn(badgeVariants({ variant, size, className })),

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+/** Props for `Breadcrumb`. */
+export type BreadcrumbProps = React.ComponentProps<'nav'>;
+/** Props for `BreadcrumbList`. */
+export type BreadcrumbListProps = React.ComponentProps<'ol'>;
+/** Props for `BreadcrumbItem`. */
+export type BreadcrumbItemProps = React.ComponentProps<'li'>;
+/** Props for `BreadcrumbLink`. */
+export type BreadcrumbLinkProps = useRender.ComponentProps<'a'>;
+/** Props for `BreadcrumbPage`. */
+export type BreadcrumbPageProps = React.ComponentProps<'span'>;
+/** Props for `BreadcrumbSeparator`. */
+export type BreadcrumbSeparatorProps = React.ComponentProps<'li'>;
+/** Props for `BreadcrumbEllipsis`. */
+export type BreadcrumbEllipsisProps = React.ComponentProps<'span'>;
+declare function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };
+//# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAKtD,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAC7D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAC7D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAChE,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC/D,uCAAuC;AACvC,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAClE,sCAAsC;AACtC,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAEnE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAEvE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAE1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,0EAcrF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW5E;AAED,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAMzF;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAahF;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cn } from '../../lib/utils';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+function Breadcrumb({ className, ...props }) {
+    return _jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn(className), ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn('flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground', className), ...props }));
+}
+function BreadcrumbItem({ className, ...props }) {
+    return _jsx("li", { "data-slot": "breadcrumb-item", className: cn('inline-flex items-center gap-1', className), ...props });
+}
+function BreadcrumbLink({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'a',
+        props: mergeProps({
+            className: cn('transition-colors hover:text-foreground', className),
+        }, props),
+        render,
+        state: {
+            slot: 'breadcrumb-link',
+        },
+    });
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn('font-normal text-foreground', className), ...props }));
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn('[&>svg]:size-3.5', className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn('flex size-5 items-center justify-center [&>svg]:size-4', className), ...props, children: [_jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More" })] }));
+}
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.stories.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,UAAU,EAA2G,MAAM,GAAG,CAAC;AAExI,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAkErB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsB1B,CAAC"}

package/dist/components/breadcrumb/breadcrumb.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '.';
+const meta = {
+    title: 'UI/Breadcrumb',
+    component: Breadcrumb,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "/", children: "Home" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "/components", children: "Components" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Breadcrumb" }) })] }) })),
+};
+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: "Default" }), _jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "/", children: "Home" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "/components", children: "Components" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Breadcrumb" }) })] }) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With ellipsis" }), _jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "/", children: "Home" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbEllipsis, {}) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "/components", children: "Components" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Breadcrumb" }) })] }) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Custom separator" }), _jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "/", children: "Home" }) }), _jsx(BreadcrumbSeparator, { children: "/" }), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "/components", children: "Components" }) }), _jsx(BreadcrumbSeparator, { children: "/" }), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Breadcrumb" }) })] }) })] })] })),
+};
+export const WithEllipsis = {
+    render: () => (_jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "/", children: "Home" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbEllipsis, {}) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "/components", children: "Components" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Breadcrumb" }) })] }) })),
+};

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

@@ -0,0 +1,2 @@
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from './breadcrumb';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/breadcrumb/index.js

@@ -0,0 +1 @@
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from './breadcrumb';

package/dist/components/button/button.d.ts

@@ -10,9 +10,9 @@ declare const buttonVariantStyles: {
     readonly link: "text-primary underline-offset-4 hover:underline";
 };
 declare const buttonSizeStyles: {
-    readonly default: "h-8 gap-1.5 px-[calc(--spacing(3)-1px)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+    readonly default: "h-8 gap-2 px-[calc(--spacing(3)-1px)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
     readonly xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3";
-    readonly sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
+    readonly sm: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
     readonly lg: "h-9 gap-1.5 px-[calc(--spacing(3.5)-1px)] has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 sm:text-base";
     readonly icon: "size-8";
     readonly 'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3";
@@ -22,13 +22,16 @@ declare const buttonSizeStyles: {
 export declare const buttonVariantKeys: (keyof typeof buttonVariantStyles)[];
 export declare const buttonSizeKeys: (keyof typeof buttonSizeStyles)[];
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "outline" | "secondary" | "destructive" | "destructive-outline" | "link" | "ghost" | null | undefined;
-    size?: "default" | "lg" | "sm" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "default" | "link" | "outline" | "secondary" | "destructive" | "destructive-outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & {
+/**
+ * Props for `Button`. Inherits additional behavior from
+ * [Base UI Button](https://base-ui.com/react/components/button).
+ */
+export type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & {
     className?: string;
 };
 declare function Button({ className, variant, size, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export { Button, buttonVariants };
-export type { ButtonProps };
 //# sourceMappingURL=button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,mBAAmB;;;;;;;;CAaf,CAAC;AAEX,QAAA,MAAM,gBAAgB;;;;;;;;;CASZ,CAAC;AAEX,eAAO,MAAM,iBAAiB,EAAuC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAAE,CAAC;AAE1G,eAAO,MAAM,cAAc,EAAoC,CAAC,MAAM,OAAO,gBAAgB,CAAC,EAAE,CAAC;AAEjG,QAAA,MAAM,cAAc;;;8EAYnB,CAAC;AAEF,KAAK,WAAW,GAAG,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAExG,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAE1F;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,mBAAmB;;;;;;;;CAaf,CAAC;AAEX,QAAA,MAAM,gBAAgB;;;;;;;;;CASZ,CAAC;AAEX,eAAO,MAAM,iBAAiB,EAAuC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAAE,CAAC;AAE1G,eAAO,MAAM,cAAc,EAAoC,CAAC,MAAM,OAAO,gBAAgB,CAAC,EAAE,CAAC;AAEjG,QAAA,MAAM,cAAc;;;8EAYnB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/G,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAE1F;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/button/button.js

@@ -12,9 +12,9 @@ const buttonVariantStyles = {
     link: 'text-primary underline-offset-4 hover:underline',
 };
 const buttonSizeStyles = {
-    default: 'h-8 gap-1.5 px-[calc(--spacing(3)-1px)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+    default: 'h-8 gap-2 px-[calc(--spacing(3)-1px)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
     xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-    sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+    sm: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
     lg: 'h-9 gap-1.5 px-[calc(--spacing(3.5)-1px)] has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 sm:text-base',
     icon: 'size-8',
     'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
@@ -23,7 +23,7 @@ const buttonSizeStyles = {
 };
 export const buttonVariantKeys = Object.keys(buttonVariantStyles);
 export const buttonSizeKeys = Object.keys(buttonSizeStyles);
-const buttonVariants = cva("group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md border border-transparent text-base font-medium whitespace-nowrap transition-shadow outline-none [text-box-edge:cap_alphabetic] [text-box-trim:trim-both] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md border border-transparent text-base font-medium whitespace-nowrap transition-shadow outline-none [text-box-edge:cap_alphabetic] [text-box-trim:trim-both] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none disabled:inset-shadow-none disabled:before:shadow-none in-data-[slot=button-group]:before:rounded-none sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:shadow-none data-disabled:inset-shadow-none data-disabled:before:shadow-none [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: buttonVariantStyles,
         size: buttonSizeStyles,

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

@@ -4,7 +4,9 @@ import { Separator } from '../separator';
 declare const buttonGroupVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
+/** Props for `ButtonGroup`. */
+export type ButtonGroupProps = React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>;
+declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
 declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,QAAA,MAAM,mBAAmB;;8EAexB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,2CAIhI;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,8FAiBxF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,WAAwB,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAStH;AAED,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,QAAA,MAAM,mBAAmB;;8EAexB,CAAC;AAEF,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEtG,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAIzF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,8FAiBxF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,WAAwB,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAStH;AAED,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAE,CAAC"}

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

@@ -15,7 +15,7 @@ const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relati
         orientation: 'horizontal',
     },
 });
-function ButtonGroup({ className, orientation, ...props }) {
+function ButtonGroup({ className, orientation = 'horizontal', ...props }) {
     return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
 }
 function ButtonGroupText({ className, render, ...props }) {

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

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof ButtonGroup>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Gallery: Story;
 export declare const Vertical: Story;
 export declare const WithSeparator: Story;
 export declare const WithText: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,WAAW,EAAyC,MAAM,gBAAgB,CAAC;AAEpF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAgBlC,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,KAYtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC"}
+{"version":3,"file":"button-group.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,WAAW,EAAyC,MAAM,gBAAgB,CAAC;AAEpF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAgBlC,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,OAAO,EAAE,KAsErB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC"}