@ploykit/ui 0.1.0 → 0.2.0

package/dist/components/CronInput.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { api } from '@ploykit/client';
 import { apiErrorMessage } from '../lib/api-error';
-import { Button } from './ui/Button';
-import { Input } from './ui/Input';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
 export const FALLBACK_TIMEZONES = [
     'UTC',
     'Asia/Shanghai',

package/dist/components/DataTable.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { cn } from '../lib/utils';
 import { PageEmpty } from './Page';
 import { Skeleton } from './ui/skeleton';
-import { Button } from './ui/Button';
+import { Button } from './ui/button';
 export function DataTable({ columns, rows, rowKey, loading = false, empty, pagination }) {
     const stalePage = !!pagination && !loading && rows.length === 0 && (pagination.total > 0 || pagination.page > 1);
     if (!loading && rows.length === 0 && !stalePage) {

package/dist/components/ImpersonationBanner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TriangleAlert } from 'lucide-react';
-import { useAuth } from '../hooks/useAuth';
+import { useAuth } from '@ploykit/hooks';
 import { cn } from '../lib/utils';
 export function ImpersonationBanner({ className }) {
     const { user } = useAuth();

package/dist/components/NotificationBell.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { api } from '@ploykit/client';
-import { queryKeys } from '../provider/PloykitProvider';
+import { queryKeys } from '@ploykit/hooks';
 import { cn, formatDateTime } from '../lib/utils';
 export function NotificationBell({ onNavigate }) {
     const [open, setOpen] = useState(false);
@@ -40,8 +40,8 @@ export function NotificationBell({ onNavigate }) {
         document.addEventListener('mousedown', onClickOutside);
         return () => document.removeEventListener('mousedown', onClickOutside);
     }, []);
-    return (_jsxs("div", { ref: ref, className: "relative", children: [_jsxs("button", { onClick: () => setOpen(!open), className: "relative p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-md\r\n          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", "aria-label": "\u901A\u77E5", "aria-haspopup": "true", "aria-expanded": open, children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), unread > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px]\r\n            px-1 text-xs font-bold text-white bg-red-500 rounded-full", children: unread > 99 ? '99+' : unread }))] }), open && (_jsxs("div", { className: "absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border z-50", role: "dialog", "aria-label": "\u901A\u77E5\u5217\u8868", onKeyDown: (e) => { if (e.key === 'Escape')
-                    setOpen(false); }, children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [_jsx("span", { className: "text-sm font-semibold", children: "\u901A\u77E5" }), unread > 0 && (_jsx("button", { onClick: () => markAllReadM.mutate(), disabled: markAllReadM.isPending, className: "text-xs text-blue-600 hover:underline disabled:opacity-50\r\n                  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded", children: "\u5168\u90E8\u5DF2\u8BFB" }))] }), _jsx("ul", { className: "max-h-80 overflow-y-auto list-none p-0 m-0", "data-slot": "notification-list", children: listQ.isPending ? (_jsx("li", { className: "py-8 text-center text-sm text-gray-400", "aria-live": "polite", children: "\u52A0\u8F7D\u4E2D\u2026" })) : notifications.length === 0 ? (_jsx("li", { className: "py-8 text-center text-sm text-gray-400", children: "\u6682\u65E0\u901A\u77E5" })) : notifications.map((n) => (_jsx("li", { className: "border-b last:border-0", children: _jsxs("button", { type: "button", onClick: () => { if (n.link)
+    return (_jsxs("div", { ref: ref, className: "relative", children: [_jsxs("button", { onClick: () => setOpen(!open), className: "relative p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-md\n          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", "aria-label": "\u901A\u77E5", "aria-haspopup": "true", "aria-expanded": open, children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), unread > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px]\n            px-1 text-xs font-bold text-white bg-red-500 rounded-full", children: unread > 99 ? '99+' : unread }))] }), open && (_jsxs("div", { className: "absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border z-50", role: "dialog", "aria-label": "\u901A\u77E5\u5217\u8868", onKeyDown: (e) => { if (e.key === 'Escape')
+                    setOpen(false); }, children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [_jsx("span", { className: "text-sm font-semibold", children: "\u901A\u77E5" }), unread > 0 && (_jsx("button", { onClick: () => markAllReadM.mutate(), disabled: markAllReadM.isPending, className: "text-xs text-blue-600 hover:underline disabled:opacity-50\n                  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded", children: "\u5168\u90E8\u5DF2\u8BFB" }))] }), _jsx("ul", { className: "max-h-80 overflow-y-auto list-none p-0 m-0", "data-slot": "notification-list", children: listQ.isPending ? (_jsx("li", { className: "py-8 text-center text-sm text-gray-400", "aria-live": "polite", children: "\u52A0\u8F7D\u4E2D\u2026" })) : notifications.length === 0 ? (_jsx("li", { className: "py-8 text-center text-sm text-gray-400", children: "\u6682\u65E0\u901A\u77E5" })) : notifications.map((n) => (_jsx("li", { className: "border-b last:border-0", children: _jsxs("button", { type: "button", onClick: () => { if (n.link)
                                     onNavigate?.(n.link); markReadM.mutate(n.id); setOpen(false); }, className: cn('w-full text-left px-4 py-3 cursor-pointer hover:bg-gray-50 ' +
                                     'focus-visible:outline-none focus-visible:bg-gray-50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring', !n.read_at && 'bg-blue-50/50'), children: [_jsxs("span", { className: "flex items-start justify-between gap-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-900", children: n.title }), n.count > 1 && (_jsxs("span", { className: "text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded-full shrink-0", children: ["\u00D7", n.count] }))] }), n.body && _jsx("span", { className: "block mt-0.5 text-xs text-gray-500 line-clamp-2", children: n.body }), _jsx("span", { className: "block mt-1 text-[10px] text-gray-400", children: formatDateTime(n.created_at) })] }) }, n.id))) })] }))] }));
 }

package/dist/components/OnboardingChecklist.js

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 import { X } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { Progress, ProgressLabel, ProgressValue } from './ui/progress';
-import { Button } from './ui/Button';
-import { useAuth } from '../hooks/useAuth';
+import { Button } from './ui/button';
+import { useAuth } from '@ploykit/hooks';
 const DISMISS_KEY = 'pk_onboarding_dismissed';
 function defaultItems(hasWorkspaces) {
     return [
@@ -37,7 +37,7 @@ export function OnboardingChecklist({ items, storageKey = DISMISS_KEY, title = '
         }
         setDismissed(true);
     };
-    return (_jsxs("section", { className: "w-full rounded-xl border bg-card p-4 shadow-xs", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: title }), _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: allDone ? '全部完成，开始你的旅程吧！' : `已完成 ${doneCount}/${list.length} 项` })] }), _jsx(Button, { variant: "ghost", size: "iconSm", "aria-label": "\u5173\u95ED\u5F15\u5BFC\u6E05\u5355", onClick: dismiss, children: _jsx(X, {}) })] }), _jsxs(Progress, { value: pct, className: "mt-3", children: [_jsx(ProgressLabel, { children: allDone ? '完成' : '进度' }), _jsx(ProgressValue, {})] }), _jsx("ul", { className: "mt-4 space-y-2", children: list.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: item.done ? undefined : item.onClick, disabled: item.done, className: cn('flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left text-sm transition-colors', item.done
+    return (_jsxs("section", { className: "w-full rounded-xl border bg-card p-4 shadow-xs", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: title }), _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: allDone ? '全部完成，开始你的旅程吧！' : `已完成 ${doneCount}/${list.length} 项` })] }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "\u5173\u95ED\u5F15\u5BFC\u6E05\u5355", onClick: dismiss, children: _jsx(X, {}) })] }), _jsxs(Progress, { value: pct, className: "mt-3", children: [_jsx(ProgressLabel, { children: allDone ? '完成' : '进度' }), _jsx(ProgressValue, {})] }), _jsx("ul", { className: "mt-4 space-y-2", children: list.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: item.done ? undefined : item.onClick, disabled: item.done, className: cn('flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left text-sm transition-colors', item.done
                             ? 'border-transparent bg-muted/50 text-muted-foreground'
                             : 'border-border hover:bg-accent hover:text-accent-foreground', !item.done && !item.onClick && 'cursor-default'), children: [_jsx("span", { "aria-hidden": "true", className: cn('flex size-5 shrink-0 items-center justify-center rounded-full border text-xs', item.done ? 'border-primary bg-primary text-primary-foreground' : 'border-input'), children: item.done ? '✓' : '' }), _jsx("span", { className: cn(item.done && 'line-through'), children: item.label })] }) }, item.key))) })] }));
 }

package/dist/components/Page.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Inbox, TriangleAlert } from 'lucide-react';
-import { Button } from './ui/Button';
+import { Button } from './ui/button';
 import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, } from './ui/empty';
 export function PageHeader({ title, description, actions }) {
     return (_jsxs("div", { className: "mb-6 flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-2xl font-bold text-foreground", children: title }), description && _jsx("p", { className: "mt-1 max-w-2xl text-sm text-muted-foreground", children: description })] }), actions && _jsx("div", { className: "flex shrink-0 gap-2", children: actions })] }));

package/dist/components/SecretModal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from './ui/dialog';
-import { Button } from './ui/Button';
+import { Button } from './ui/button';
 export function SecretModal({ open, onOpenChange, secretName, secretValue, title }) {
     const [copied, setCopied] = useState(false);
     const [copyFailed, setCopyFailed] = useState(false);

package/dist/components/SettingsCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../lib/utils';
-import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, } from './ui/card';
+import { Card, CardHeader, CardDescription, CardAction, CardContent, } from './ui/card';
 export function SettingsCard({ title, description, cta, danger, bodyClassName, children, }) {
-    return (_jsxs(Card, { className: "my-4 w-full max-w-4xl text-left", size: "sm", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { as: "h2", className: cn(danger && 'text-destructive'), children: title }), description && (_jsx(CardDescription, { className: cn(danger && 'text-destructive/80'), children: description })), cta && _jsx(CardAction, { children: cta })] }), _jsx(CardContent, { className: cn('text-left', bodyClassName), children: children })] }));
+    return (_jsxs(Card, { className: "my-4 w-full max-w-4xl text-left", size: "sm", children: [_jsxs(CardHeader, { children: [_jsx("h2", { "data-slot": "card-title", className: cn('flex items-center gap-2 font-semibold leading-none tracking-tight', danger && 'text-destructive'), children: title }), description && (_jsx(CardDescription, { className: cn(danger && 'text-destructive/80'), children: description })), cta && _jsx(CardAction, { children: cta })] }), _jsx(CardContent, { className: cn('text-left', bodyClassName), children: children })] }));
 }

package/dist/components/SiteBannerLayer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { SiteBanner } from './SiteBanner';
-import { useSiteConfig } from '../hooks/useSiteConfig';
+import { useSiteConfig } from '@ploykit/hooks';
 export function SiteBannerLayer({ maintenanceText, } = {}) {
     const { data } = useSiteConfig();
     if (!data)

package/dist/components/StatusBadge.d.ts

@@ -0,0 +1,4 @@
+export declare function StatusBadge({ status, className }: {
+    status: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/StatusBadge.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, statusLabel, statusTone, STATUS_TONE_CLASS } from '../lib/utils';
+// 业务语义件（shadcn 无对应物，按"有则用 stock、无则留业务层"规则留守）：
+// 按订阅/订单/投递等业务状态映射色调与文案的徽章，从 stock 镜像 badge.tsx 迁出。
+export function StatusBadge({ status, className }) {
+    return (_jsx("span", { className: cn('inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium whitespace-nowrap', STATUS_TONE_CLASS[statusTone(status)], className), children: statusLabel(status) }));
+}

package/dist/components/UserMenu.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useNavigate } from 'react-router';
 import { LogOut, Settings, ShieldCheck } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from './ui/menu';
-import { useAuth } from '../hooks/useAuth';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from './ui/dropdown-menu';
+import { useAuth } from '@ploykit/hooks';
 import { toast } from './toast';
 function initialsOf(name, email) {
     const src = name.trim() || email.trim();
@@ -26,5 +26,5 @@ export function UserMenu({ items = [], logoutRedirect = '/login' }) {
         }
         navigate(logoutRedirect);
     };
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground\r\n                   transition-colors hover:bg-accent hover:text-accent-foreground\r\n                   aria-expanded:bg-accent", "aria-label": "\u7528\u6237\u83DC\u5355", children: [_jsxs(Avatar, { size: "sm", children: [user?.avatar_url ? _jsx(AvatarImage, { src: user.avatar_url, alt: name }) : null, _jsx(AvatarFallback, { children: initialsOf(user?.display_name ?? '', email) })] }), _jsx("span", { className: "hidden max-w-40 truncate md:inline", children: name || '未登录' })] }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuGroup, { children: _jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex flex-col px-2 py-1.5", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: name || '未登录' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: email })] }) }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => navigate('/account/profile'), children: [_jsx(Settings, {}), " \u8D26\u6237\u8BBE\u7F6E"] }), user?.is_platform_admin && (_jsxs(DropdownMenuItem, { onClick: () => navigate('/admin'), children: [_jsx(ShieldCheck, {}), " \u7BA1\u7406\u63A7\u5236\u53F0"] })), items.length > 0 && _jsx(DropdownMenuSeparator, {}), items.map((item) => (_jsxs(DropdownMenuItem, { variant: item.destructive ? 'destructive' : 'default', onClick: () => (item.to ? navigate(item.to) : item.onClick?.()), children: [item.icon, item.label] }, item.label))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", onClick: handleLogout, children: [_jsx(LogOut, {}), " \u9000\u51FA\u767B\u5F55"] })] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground\n                   transition-colors hover:bg-accent hover:text-accent-foreground\n                   aria-expanded:bg-accent", "aria-label": "\u7528\u6237\u83DC\u5355", children: [_jsxs(Avatar, { size: "sm", children: [user?.avatar_url ? _jsx(AvatarImage, { src: user.avatar_url, alt: name }) : null, _jsx(AvatarFallback, { children: initialsOf(user?.display_name ?? '', email) })] }), _jsx("span", { className: "hidden max-w-40 truncate md:inline", children: name || '未登录' })] }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuGroup, { children: _jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex flex-col px-2 py-1.5", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: name || '未登录' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: email })] }) }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => navigate('/account/profile'), children: [_jsx(Settings, {}), " \u8D26\u6237\u8BBE\u7F6E"] }), user?.is_platform_admin && (_jsxs(DropdownMenuItem, { onClick: () => navigate('/admin'), children: [_jsx(ShieldCheck, {}), " \u7BA1\u7406\u63A7\u5236\u53F0"] })), items.length > 0 && _jsx(DropdownMenuSeparator, {}), items.map((item) => (_jsxs(DropdownMenuItem, { variant: item.destructive ? 'destructive' : 'default', onClick: () => (item.to ? navigate(item.to) : item.onClick?.()), children: [item.icon, item.label] }, item.label))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", onClick: handleLogout, children: [_jsx(LogOut, {}), " \u9000\u51FA\u767B\u5F55"] })] })] }));
 }

package/dist/components/WorkspaceSwitcher.js

@@ -5,12 +5,12 @@ import { Check, ChevronsUpDown, Plus } from 'lucide-react';
 import { isApiError } from '@ploykit/client';
 import { cn } from '../lib/utils';
 import { apiErrorMessage } from '../lib/api-error';
-import { useWorkspaceSwitch } from '../hooks/useWorkspace';
+import { useWorkspaceSwitch } from '@ploykit/hooks';
 import { toast } from './toast';
-import { Button } from './ui/Button';
-import { Input } from './ui/Input';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from './ui/sidebar';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from './ui/menu';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from './ui/dropdown-menu';
 const slugSuffix = (n = 4) => {
     const alphabet = 'abcdefghijklmnopqrstuvwxyz0123456789';
     let out = '';

package/dist/components/ui/Badge.d.ts

@@ -1,13 +1,7 @@
-import * as React from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
-}
-declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;
-export declare function StatusBadge({ status, className }: {
-    status: string;
-    className?: string;
-}): React.JSX.Element;
+declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { Badge, badgeVariants };

package/dist/components/ui/Badge.js

@@ -1,21 +1,33 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
-import { cn, statusTone, statusLabel, STATUS_TONE_CLASS } from '../../lib/utils';
-const badgeVariants = cva('inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors whitespace-nowrap', {
+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 badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
     variants: {
         variant: {
-            default: 'border-transparent bg-primary text-primary-foreground',
-            secondary: 'border-transparent bg-secondary text-secondary-foreground',
-            destructive: 'border-transparent bg-destructive text-destructive-foreground',
-            outline: 'text-foreground',
+            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+            secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+            destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+            outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+            ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+            link: "text-primary underline-offset-4 hover:underline",
         },
     },
-    defaultVariants: { variant: 'default' },
+    defaultVariants: {
+        variant: "default",
+    },
 });
-function Badge({ className, variant, ...props }) {
-    return _jsx("span", { className: cn(badgeVariants({ variant }), className), ...props });
-}
-export function StatusBadge({ status, className }) {
-    return (_jsx("span", { className: cn('inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium whitespace-nowrap', STATUS_TONE_CLASS[statusTone(status)], className), children: statusLabel(status) }));
+function Badge({ className, variant = "default", render, ...props }) {
+    return useRender({
+        defaultTagName: "span",
+        props: mergeProps({
+            className: cn(badgeVariants({ variant }), className),
+        }, props),
+        render,
+        state: {
+            slot: "badge",
+            variant,
+        },
+    });
 }
 export { Badge, badgeVariants };

package/dist/components/ui/Button.d.ts

@@ -1,10 +1,8 @@
-import * as React from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "iconSm" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface ButtonProps extends React.ComponentPropsWithRef<'button'>, VariantProps<typeof buttonVariants> {
-}
-declare function Button({ className, variant, size, ref, ...props }: ButtonProps): React.JSX.Element;
+declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
 export { Button, buttonVariants };

package/dist/components/ui/Button.js

@@ -1,33 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
-import { cn } from '../../lib/utils';
-const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors ' +
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' +
-    'disabled:pointer-events-none disabled:opacity-50 ' +
-    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
-            default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-            destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-            outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-            secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-            ghost: 'hover:bg-accent hover:text-accent-foreground',
-            link: 'text-primary underline-offset-4 hover:underline',
+            default: "bg-primary text-primary-foreground hover:bg-primary/80",
+            outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+            ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+            link: "text-primary underline-offset-4 hover:underline",
         },
         size: {
-            default: 'h-9 px-4 py-2',
-            sm: 'h-8 rounded-md px-3 text-xs',
-            lg: 'h-10 rounded-md px-8',
-            icon: 'h-9 w-9',
-            iconSm: 'size-8 rounded-md',
+            default: "h-8 gap-1.5 px-2.5 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-2.5 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-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            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",
+            "icon-lg": "size-9",
         },
     },
     defaultVariants: {
-        variant: 'default',
-        size: 'default',
+        variant: "default",
+        size: "default",
     },
 });
-function Button({ className, variant, size, ref, ...props }) {
-    return (_jsx("button", { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
+function Button({ className, variant = "default", size = "default", ...props }) {
+    return (_jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
 }
 export { Button, buttonVariants };

package/dist/components/ui/Input.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
-declare function Input({ className, type, ref, ...props }: React.ComponentPropsWithRef<'input'>): React.JSX.Element;
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
 export { Input };

package/dist/components/ui/Input.js

@@ -1,10 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
-function Input({ className, type, ref, ...props }) {
-    return (_jsx("input", { type: type, "data-slot": "input", className: cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors ' +
-            'file:border-0 file:bg-transparent file:text-sm file:font-medium ' +
-            'placeholder:text-muted-foreground ' +
-            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ' +
-            'disabled:cursor-not-allowed disabled:opacity-50', className), ref: ref, ...props }));
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { cn } from "../../lib/utils";
+function Input({ className, type, ...props }) {
+    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
 }
 export { Input };

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
-import { Button } from "./Button";
+import { Button } from "./button";
 declare function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props): React.JSX.Element;
 declare function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props): React.JSX.Element;
 declare function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props): React.JSX.Element;
@@ -13,6 +13,6 @@ declare function AlertDialogFooter({ className, ...props }: React.ComponentProps
 declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
 declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
-declare function AlertDialogAction({ className, variant, size, ...props }: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
 declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

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

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

package/dist/components/ui/avatar.js

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

package/dist/components/ui/breadcrumb.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../../lib/utils";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 function Breadcrumb({ className, ...props }) {
-    return (_jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn("flex min-w-0 items-center", 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 min-w-0 flex-nowrap items-center gap-1.5 text-sm text-muted-foreground sm:gap-2.5", 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 min-w-0 items-center gap-1.5", 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({
@@ -25,12 +25,12 @@ function BreadcrumbLink({ className, render, ...props }) {
     });
 }
 function BreadcrumbPage({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "breadcrumb-page", "aria-current": "page", className: cn("truncate font-normal text-foreground", 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("shrink-0 [&>svg]:size-3.5", className), ...props, children: children ?? _jsx(ChevronRight, { className: "rtl:-scale-x-100" }) }));
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? (_jsx(ChevronRightIcon, {})) }));
 }
 function BreadcrumbEllipsis({ className, ...props }) {
-    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className), ...props, children: [_jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More" })] }));
+    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(MoreHorizontalIcon, {}), _jsx("span", { className: "sr-only", children: "More" })] }));
 }
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

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

@@ -3,11 +3,9 @@ declare function Card({ className, size, ...props }: React.ComponentProps<"div">
     size?: "default" | "sm";
 }): React.JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CardTitle({ as: Tag, className, ...props }: React.ComponentProps<"div"> & {
-    as?: "div" | "h2" | "h3";
-}): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/ui/card.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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-6 overflow-hidden rounded-xl bg-card py-6 text-card-foreground text-sm shadow-xs ring-1 ring-foreground/10 data-[size=sm]:gap-4 data-[size=sm]:py-4", className), ...props }));
+    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(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("grid auto-rows-min items-start gap-1 rounded-t-xl px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6", 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-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
 }
-function CardTitle({ as: Tag = "div", className, ...props }) {
-    return (_jsx(Tag, { "data-slot": "card-title", className: cn("text-base leading-normal font-medium group-data-[size=sm]/card:text-sm", 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 }));
@@ -16,9 +16,9 @@ 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-6", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-spacing)", className), ...props }));
 }
 function CardFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-xl px-6 [.border-t]:pt-6", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className), ...props }));
 }
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/ui/checkbox.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
-import { CheckIcon } from "lucide-react";
 import { cn } from "../../lib/utils";
+import { CheckIcon } from "lucide-react";
 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 bg-transparent shadow-xs outline-none transition-shadow after:absolute after:-inset-x-3 after:-inset-y-2 group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input group-has-[:focus-visible]/field-label:data-checked:border-primary disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:aria-checked:border-primary aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 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, {}) }) }));
+    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 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input 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: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 group-has-[:focus-visible]/field-label:data-checked:border-primary 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 };