@wheelhouse/ui 0.1.6 → 0.2.0

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;
-    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;
+    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'];
-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;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,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?: "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,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"}

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"}

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

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

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

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

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

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

package/dist/components/card/index.js

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

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

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

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

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

package/dist/components/checkbox/checkbox.js

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/checkbox/index.js

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

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

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