@wheelhouse/ui 0.1.5 → 0.2.0

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

@@ -0,0 +1,42 @@
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariantStyles: {
+    readonly default: "bg-primary text-primary-foreground";
+    readonly outline: "border-border bg-transparent dark:bg-input/32";
+    readonly secondary: "bg-secondary text-secondary-foreground";
+    readonly info: "bg-info text-white";
+    readonly success: "bg-success text-white";
+    readonly warning: "bg-warning text-white";
+    readonly destructive: "bg-destructive-foreground text-white dark:bg-destructive-foreground dark:text-destructive";
+    readonly 'warning-light': "border-none bg-warning/10 text-warning-foreground dark:bg-warning/20";
+    readonly 'success-light': "border-none bg-success/10 text-success-foreground dark:bg-success/20";
+    readonly 'info-light': "border-none bg-info/10 text-info-foreground dark:bg-info/20";
+    readonly 'destructive-light': "border-none bg-destructive text-destructive-foreground dark:bg-destructive/70";
+    readonly 'primary-outline': "border-border bg-background text-primary dark:bg-input/30";
+    readonly 'warning-outline': "border-border bg-background text-warning-foreground dark:bg-input/30";
+    readonly 'success-outline': "border-border bg-background text-success-foreground dark:bg-input/30";
+    readonly 'info-outline': "border-border bg-background text-info-foreground dark:bg-input/30";
+    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)-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" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "destructive-outline" | "info" | "success" | "warning" | "warning-light" | "success-light" | "info-light" | "destructive-light" | "primary-outline" | "warning-outline" | "success-outline" | "info-outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type BadgeVariantProps = VariantProps<typeof badgeVariants>;
+type BadgeVariant = BadgeVariantProps['variant'];
+type BadgeSize = BadgeVariantProps['size'];
+/** 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 };
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,51 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const badgeVariantStyles = {
+    default: 'bg-primary text-primary-foreground',
+    outline: 'border-border bg-transparent dark:bg-input/32',
+    secondary: 'bg-secondary text-secondary-foreground',
+    info: 'bg-info text-white',
+    success: 'bg-success text-white',
+    warning: 'bg-warning text-white',
+    destructive: 'bg-destructive-foreground text-white dark:bg-destructive-foreground dark:text-destructive',
+    'warning-light': 'border-none bg-warning/10 text-warning-foreground dark:bg-warning/20',
+    'success-light': 'border-none bg-success/10 text-success-foreground dark:bg-success/20',
+    'info-light': 'border-none bg-info/10 text-info-foreground dark:bg-info/20',
+    'destructive-light': 'border-none bg-destructive text-destructive-foreground dark:bg-destructive/70',
+    'primary-outline': 'border-border bg-background text-primary dark:bg-input/30',
+    'warning-outline': 'border-border bg-background text-warning-foreground dark:bg-input/30',
+    'success-outline': 'border-border bg-background text-success-foreground dark:bg-input/30',
+    'info-outline': 'border-border bg-background text-info-foreground dark:bg-input/30',
+    '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)-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 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,
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function Badge({ className, variant = 'default', size = 'default', render, ...props }) {
+    const defaultProps = {
+        'data-slot': 'badge',
+        className: cn(badgeVariants({ variant, size, className })),
+    };
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
+export { Badge, badgeVariants };

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './badge';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Gallery: Story;
+export declare const Outline: Story;
+export declare const Secondary: Story;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Destructive: Story;
+export declare const InfoLight: Story;
+export declare const SuccessLight: Story;
+export declare const WarningLight: Story;
+export declare const DestructiveLight: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+//# sourceMappingURL=badge.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAmC,MAAM,SAAS,CAAC;AAEjE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA2B5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqCnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAGvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAGlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAGvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAG9B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC"}

package/dist/components/badge/badge.stories.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, badgeSizeKeys, badgeVariantKeys } from './badge';
+const meta = {
+    title: 'UI/Badge',
+    component: Badge,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            storiesFilter: (story) => story.name !== 'Default',
+        },
+    },
+    tags: ['autodocs'],
+    args: {
+        children: 'Badge',
+        size: 'default',
+        variant: 'default',
+    },
+    argTypes: {
+        children: { control: 'text' },
+        className: { control: false },
+        variant: {
+            control: 'select',
+            options: badgeVariantKeys,
+        },
+        size: {
+            control: 'select',
+            options: badgeSizeKeys,
+        },
+    },
+};
+export default meta;
+function VariantSizeMatrix() {
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-max min-w-full border-collapse text-sm", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "sticky left-0 z-10 bg-background p-2 pr-4 text-left font-normal text-muted-foreground", children: "Variant" }), badgeSizeKeys.map((size) => (_jsx("th", { className: "p-2 text-center font-normal whitespace-nowrap text-muted-foreground", children: size }, size)))] }) }), _jsx("tbody", { children: badgeVariantKeys.map((variant) => (_jsxs("tr", { children: [_jsx("td", { className: "sticky left-0 z-10 bg-background py-2 pr-4 whitespace-nowrap text-muted-foreground", children: variant }), badgeSizeKeys.map((size) => (_jsx("td", { className: "p-2 text-center align-middle", children: _jsx("div", { className: "flex justify-center", children: _jsx(Badge, { variant: variant, size: size, children: "Badge" }) }) }, size)))] }, variant))) })] }) }));
+}
+export const Default = {};
+export const Gallery = {
+    parameters: {
+        layout: 'padded',
+        controls: { disable: true },
+    },
+    render: () => (_jsx("div", { className: "flex max-w-[min(100vw-2rem,72rem)] 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: "All variants" }), _jsx(VariantSizeMatrix, {})] }) })),
+};
+export const Outline = {
+    tags: ['!autodocs'],
+    args: { variant: 'outline' },
+};
+export const Secondary = {
+    tags: ['!autodocs'],
+    args: { variant: 'secondary' },
+};
+export const Info = {
+    tags: ['!autodocs'],
+    args: { variant: 'info' },
+};
+export const Success = {
+    tags: ['!autodocs'],
+    args: { variant: 'success' },
+};
+export const Warning = {
+    tags: ['!autodocs'],
+    args: { variant: 'warning' },
+};
+export const Destructive = {
+    tags: ['!autodocs'],
+    args: { variant: 'destructive' },
+};
+export const InfoLight = {
+    tags: ['!autodocs'],
+    args: { variant: 'info-light' },
+};
+export const SuccessLight = {
+    tags: ['!autodocs'],
+    args: { variant: 'success-light' },
+};
+export const WarningLight = {
+    tags: ['!autodocs'],
+    args: { variant: 'warning-light' },
+};
+export const DestructiveLight = {
+    tags: ['!autodocs'],
+    args: { variant: 'destructive-light' },
+};
+export const Small = {
+    tags: ['!autodocs'],
+    args: { size: 'sm' },
+};
+export const Large = {
+    tags: ['!autodocs'],
+    args: { size: 'lg' },
+};

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

@@ -0,0 +1,3 @@
+export { Badge, badgeVariants } from './badge';
+export type { BadgeProps } from './badge';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export { Badge, badgeVariants } from './badge';

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;AAMtD,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,39 @@
+'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 { CaretRightIcon } from '@phosphor-icons/react/CaretRight';
+import { DotsThreeIcon } from '@phosphor-icons/react/DotsThree';
+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(CaretRightIcon, {}) }));
+}
+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(DotsThreeIcon, {}), _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,10 +10,10 @@ 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 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";
+    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";
     readonly 'icon-sm': "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg";
@@ -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" | "ghost" | "destructive" | "destructive-outline" | "link" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "destructive-outline" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "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,10 +12,10 @@ 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",
-    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: "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",
     'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
@@ -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 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"}

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

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

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

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

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

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

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

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

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

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

package/dist/components/card/card.js

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

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

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

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

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