@aereamart/design-system 0.2.0 → 0.3.0

package/dist/Accordion.d.ts

@@ -0,0 +1,10 @@
+export interface AccordionItem {
+    title: string;
+    content: React.ReactNode;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    defaultOpen?: number | null;
+    className?: string;
+}
+export declare function Accordion({ items, defaultOpen, className }: AccordionProps): import("react").JSX.Element;

package/dist/Accordion.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from './cn';
+export function Accordion({ items, defaultOpen = null, className }) {
+    const [open, setOpen] = useState(defaultOpen);
+    return (_jsx("div", { className: cn('divide-y divide-slate-200 overflow-hidden rounded-xl border border-slate-200 bg-white', className), children: items.map((item, i) => {
+            const isOpen = open === i;
+            const uid = `accordion-${i}`;
+            return (_jsxs("div", { children: [_jsxs("button", { type: "button", "aria-expanded": isOpen, "aria-controls": `${uid}-panel`, onClick: () => setOpen(isOpen ? null : i), className: "flex w-full items-center justify-between gap-4 px-5 py-4 text-left text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40", children: [item.title, _jsx(ChevronDown, { "aria-hidden": "true", className: cn('h-4 w-4 shrink-0 text-slate-400 transition-transform', isOpen && 'rotate-180') })] }), isOpen && (_jsx("div", { id: `${uid}-panel`, role: "region", className: "border-t border-slate-100 px-5 py-4 text-sm leading-relaxed text-slate-600", children: item.content }))] }, uid));
+        }) }));
+}

package/dist/AlertBanner.d.ts

@@ -0,0 +1,9 @@
+type AlertTone = 'info' | 'primary' | 'accent' | 'danger' | 'neutral';
+export interface AlertBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    tone?: AlertTone;
+    title?: string;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+export declare function AlertBanner({ tone, title, dismissible, onDismiss, className, children, ...props }: AlertBannerProps): import("react").JSX.Element | null;
+export {};

package/dist/AlertBanner.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Info, AlertTriangle, CheckCircle2, XCircle, X } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from './cn';
+const toneRecord = {
+    info: { wrap: 'border-sky-300 bg-sky-50 text-sky-900', icon: _jsx(Info, { className: "h-4 w-4" }), label: 'Info' },
+    primary: { wrap: 'border-lime-300 bg-lime-50 text-lime-900', icon: _jsx(CheckCircle2, { className: "h-4 w-4" }), label: 'Success' },
+    accent: { wrap: 'border-purple-300 bg-purple-50 text-purple-900', icon: _jsx(AlertTriangle, { className: "h-4 w-4" }), label: 'Warning' },
+    danger: { wrap: 'border-red-300 bg-red-50 text-red-900', icon: _jsx(XCircle, { className: "h-4 w-4" }), label: 'Error' },
+    neutral: { wrap: 'border-slate-300 bg-slate-50 text-slate-800', icon: _jsx(Info, { className: "h-4 w-4" }), label: 'Notice' },
+};
+export function AlertBanner({ tone = 'primary', title, dismissible = false, onDismiss, className, children, ...props }) {
+    const [hidden, setHidden] = useState(false);
+    if (hidden)
+        return null;
+    const t = toneRecord[tone];
+    return (_jsxs("div", { role: "alert", className: cn('flex items-start gap-3 rounded-lg border px-4 py-3 text-sm', t.wrap, className), ...props, children: [_jsx("span", { className: "mt-0.5 shrink-0", "aria-label": t.label, children: t.icon }), _jsxs("div", { className: "min-w-0 flex-1", children: [title && _jsx("p", { className: "font-bold", children: title }), _jsx("div", { className: cn(title && 'mt-0.5 text-sm opacity-90'), children: children })] }), dismissible && (_jsx("button", { type: "button", "aria-label": "Dismiss", onClick: () => {
+                    setHidden(true);
+                    onDismiss?.();
+                }, className: "-mr-1 -mt-1 shrink-0 rounded-full p-1 hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current", children: _jsx(X, { "aria-hidden": "true", className: "h-4 w-4" }) }))] }));
+}

package/dist/AppBar.d.ts

@@ -0,0 +1,7 @@
+export interface AppBarProps extends React.HTMLAttributes<HTMLElement> {
+    title: string;
+    subtitle?: string;
+    leading?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+export declare function AppBar({ title, subtitle, leading, actions, className, ...props }: AppBarProps): import("react").JSX.Element;

package/dist/AppBar.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './cn';
+export function AppBar({ title, subtitle, leading, actions, className, ...props }) {
+    return (_jsxs("header", { className: cn('flex items-center justify-between gap-4 border-b border-slate-200 bg-white px-6 py-4', className), ...props, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [leading, _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "truncate text-lg font-bold text-slate-900", children: title }), subtitle && _jsx("p", { className: "truncate text-sm text-slate-500", children: subtitle })] })] }), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] }));
+}

package/dist/Avatar.d.ts

@@ -0,0 +1,6 @@
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    name?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function Avatar({ src, name, size, className, ...props }: AvatarProps): import("react").JSX.Element;

package/dist/Avatar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from './cn';
+const sizeClasses = {
+    sm: 'h-8 w-8 text-xs',
+    md: 'h-10 w-10 text-sm',
+    lg: 'h-14 w-14 text-lg',
+};
+function initials(name) {
+    if (!name)
+        return '?';
+    return name
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map(w => w[0]?.toUpperCase() ?? '')
+        .join('') || '?';
+}
+export function Avatar({ src, name, size = 'md', className, ...props }) {
+    return (_jsx("div", { className: cn('inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-lime-100 font-semibold text-lime-800', sizeClasses[size], className), ...props, children: src ? (_jsx("img", { src: src, alt: name ?? '', className: "h-full w-full object-cover" })) : (_jsx("span", { "aria-hidden": "true", children: initials(name) })) }));
+}

package/dist/Badge.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from './cn';
 const variantClasses = {
-    danger: 'bg-red-500 text-white',
-    primary: 'bg-primary-600 text-white',
-    accent: 'bg-accent-500 text-white',
-    neutral: 'bg-neutral-200 text-neutral-700',
+    danger: 'bg-red-100 text-red-800',
+    primary: 'bg-lime-100 text-lime-800',
+    accent: 'bg-purple-100 text-purple-900',
+    neutral: 'bg-slate-200 text-slate-700',
 };
 export function Badge({ variant = 'danger', className, ...props }) {
     return (_jsx("span", { className: cn('inline-flex items-center justify-center rounded-full text-[10px] font-bold leading-none', variantClasses[variant], className), ...props }));

package/dist/BottomSheet.d.ts

@@ -0,0 +1,8 @@
+export interface BottomSheetProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare function BottomSheet({ open, onClose, title, children, className }: BottomSheetProps): import("react").ReactPortal | null;

package/dist/BottomSheet.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { cn } from './cn';
+export function BottomSheet({ open, onClose, title, children, className }) {
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.body.style.overflow = 'hidden';
+        document.addEventListener('keydown', onKey);
+        return () => {
+            document.body.style.overflow = '';
+            document.removeEventListener('keydown', onKey);
+        };
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    return createPortal(_jsxs("div", { className: "fixed inset-0 z-50 flex items-end justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/50", onClick: onClose, "aria-hidden": "true" }), _jsxs("section", { role: "dialog", "aria-modal": "true", "aria-label": title, className: cn('relative w-full max-w-lg rounded-t-2xl bg-white p-6 shadow-xl', className), children: [_jsx("div", { "aria-hidden": "true", className: "mx-auto mb-4 h-1 w-10 rounded-full bg-slate-200" }), title && (_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-bold text-slate-900", children: title }), _jsx("button", { onClick: onClose, className: "rounded-lg p-1 text-slate-400 hover:bg-slate-100", "aria-label": "Close", children: _jsx(X, { className: "h-5 w-5" }) })] })), children] })] }), document.body);
+}

package/dist/Breadcrumb.d.ts

@@ -0,0 +1,8 @@
+export interface Crumb {
+    label: string;
+    href?: string;
+}
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    items: Crumb[];
+}
+export declare function Breadcrumb({ items, className, ...props }: BreadcrumbProps): import("react").JSX.Element;

package/dist/Breadcrumb.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from 'lucide-react';
+import { cn } from './cn';
+export function Breadcrumb({ items, className, ...props }) {
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: className, ...props, children: _jsx("ol", { className: "flex flex-wrap items-center gap-1.5 text-sm", children: items.map((item, i) => {
+                const last = i === items.length - 1;
+                return (_jsxs("li", { className: "flex items-center gap-1.5", children: [i > 0 && (_jsx(ChevronRight, { "aria-hidden": "true", className: "h-3.5 w-3.5 text-slate-400" })), last || !item.href ? (_jsx("span", { "aria-current": last ? 'page' : undefined, className: cn('font-medium', last ? 'text-slate-900' : 'text-slate-500'), children: item.label })) : (_jsx("a", { href: item.href, className: "font-medium text-lime-700 hover:text-lime-800 hover:underline", children: item.label }))] }, `${item.label}-${i}`));
+            }) }) }));
+}

package/dist/Button.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from './cn';
 import { Spinner } from './Spinner';
 const variantClasses = {
-    primary: 'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500/40',
-    secondary: 'border border-neutral-300 bg-white text-neutral-700 hover:bg-neutral-50 focus-visible:ring-neutral-400/40',
+    primary: 'bg-lime-600 text-white hover:bg-lime-700 focus-visible:ring-lime-500/40',
+    secondary: 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 focus-visible:ring-slate-400/40',
     danger: 'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500/40',
-    ghost: 'bg-transparent text-neutral-600 hover:bg-neutral-100 focus-visible:ring-neutral-400/40',
+    ghost: 'bg-transparent text-slate-600 hover:bg-slate-100 focus-visible:ring-slate-400/40',
 };
 const sizeClasses = {
     sm: 'px-3 py-1.5 text-xs',

package/dist/Card.d.ts

@@ -0,0 +1,7 @@
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    description?: string;
+    footer?: React.ReactNode;
+    hoverable?: boolean;
+}
+export declare function Card({ title, description, footer, hoverable, className, children, ...props }: CardProps): import("react").JSX.Element;

package/dist/Card.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './cn';
+export function Card({ title, description, footer, hoverable = false, className, children, ...props }) {
+    return (_jsxs("div", { className: cn('rounded-xl border border-slate-200 bg-white', hoverable &&
+            'transition-all hover:-translate-y-0.5 hover:border-lime-300 hover:shadow-md', className), ...props, children: [(title || description) && (_jsxs("div", { className: "border-b border-slate-100 px-5 py-4", children: [title && _jsx("h3", { className: "text-base font-bold text-slate-900", children: title }), description && _jsx("p", { className: "mt-0.5 text-sm text-slate-500", children: description })] })), _jsx("div", { className: "px-5 py-4", children: children }), footer && _jsx("div", { className: "border-t border-slate-100 px-5 py-3", children: footer })] }));
+}

package/dist/Checkbox.d.ts

@@ -0,0 +1,5 @@
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+    error?: string;
+}
+export declare function Checkbox({ label, error, id, className, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/Checkbox.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './cn';
+export function Checkbox({ label, error, id, className, ...props }) {
+    return (_jsxs("div", { className: "grid gap-1.5", children: [_jsxs("label", { htmlFor: id, className: cn('inline-flex cursor-pointer items-start gap-2.5 text-sm', className), children: [_jsx("input", { id: id, type: "checkbox", className: "mt-0.5 h-4 w-4 shrink-0 cursor-pointer rounded border-slate-500 text-lime-600 accent-lime-600 focus:outline-none focus:ring-2 focus:ring-lime-500/40", ...props }), label && (_jsx("span", { className: cn('font-medium', error ? 'text-red-700' : 'text-slate-700'), children: label }))] }), error && _jsx("p", { className: "pl-6.5 text-xs text-red-600", children: error })] }));
+}

package/dist/Chip.d.ts

@@ -0,0 +1,7 @@
+type ChipVariant = 'primary' | 'accent' | 'neutral' | 'danger';
+export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: ChipVariant;
+    onRemove?: () => void;
+}
+export declare function Chip({ variant, onRemove, className, children, ...props }: ChipProps): import("react").JSX.Element;
+export {};

package/dist/Chip.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { cn } from './cn';
+const variantClasses = {
+    primary: 'border-lime-300 bg-lime-50 text-lime-800',
+    accent: 'border-purple-300 bg-purple-50 text-purple-900',
+    neutral: 'border-slate-300 bg-slate-50 text-slate-700',
+    danger: 'border-red-300 bg-red-50 text-red-800',
+};
+export function Chip({ variant = 'neutral', onRemove, className, children, ...props }) {
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-sm font-medium', variantClasses[variant], className), ...props, children: [children, onRemove && (_jsx("button", { type: "button", onClick: e => {
+                    e.stopPropagation();
+                    onRemove();
+                }, "aria-label": `Remove ${typeof children === 'string' ? children : 'chip'}`, className: "-mr-1 rounded-full p-0.5 hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current", children: _jsx(X, { "aria-hidden": "true", className: "h-3 w-3" }) }))] }));
+}

package/dist/DataTable.d.ts

@@ -0,0 +1,15 @@
+export interface Column<T> {
+    key: string;
+    label: string;
+    render?: (row: T) => React.ReactNode;
+    className?: string;
+}
+export interface DataTableProps<T> {
+    columns: Column<T>[];
+    rows: T[];
+    rowKey: (row: T) => string;
+    caption?: string;
+    emptyText?: string;
+    className?: string;
+}
+export declare function DataTable<T>({ columns, rows, rowKey, caption, emptyText, className, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/DataTable.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cn } from './cn';
+export function DataTable({ columns, rows, rowKey, caption, emptyText = 'No rows to show.', className, }) {
+    const captionId = useId();
+    return (_jsx("div", { className: cn('overflow-x-auto rounded-xl border border-slate-200 bg-white', className), children: _jsxs("table", { className: "w-full min-w-[480px] border-collapse text-left text-sm", children: [caption && _jsx("caption", { className: "sr-only", id: captionId, children: caption }), _jsx("thead", { children: _jsx("tr", { className: "border-b border-slate-200 bg-slate-50 text-xs uppercase tracking-wider text-slate-500", children: columns.map(col => (_jsx("th", { scope: "col", className: "px-4 py-3 font-semibold", children: col.label }, col.key))) }) }), _jsxs("tbody", { className: "divide-y divide-slate-100", children: [rows.map(row => (_jsx("tr", { className: "transition-colors hover:bg-slate-50", children: columns.map(col => (_jsx("td", { className: cn('px-4 py-3 align-middle text-slate-700', col.className), children: col.render ? col.render(row) : String(row[col.key] ?? '') }, col.key))) }, rowKey(row)))), rows.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: columns.length, className: "px-4 py-10 text-center text-sm text-slate-400", children: emptyText }) }))] })] }) }));
+}

package/dist/DatePicker.d.ts

@@ -0,0 +1,5 @@
+export interface DatePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+    error?: string;
+}
+export declare function DatePicker({ label, error, id, className, ...props }: DatePickerProps): import("react").JSX.Element;

package/dist/DatePicker.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { CalendarDays } from 'lucide-react';
+import { cn } from './cn';
+export function DatePicker({ label, error, id, className, ...props }) {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    return (_jsxs("div", { children: [label && (_jsx("label", { htmlFor: inputId, className: "mb-1 block text-sm font-medium text-slate-700", children: label })), _jsxs("div", { className: "relative", children: [_jsx(CalendarDays, { "aria-hidden": "true", className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" }), _jsx("input", { id: inputId, type: "date", className: cn('w-full rounded-lg border bg-white py-2.5 pl-9 pr-4 text-sm text-slate-700 shadow-xs', 'focus:outline-none focus:ring-2 focus:ring-lime-500/40 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400', error
+                            ? 'border-red-400 focus:border-red-500'
+                            : 'border-slate-300 hover:border-slate-400', className), ...props })] }), error && _jsx("p", { className: "mt-1 text-xs text-red-600", children: error })] }));
+}

package/dist/Divider.d.ts

@@ -0,0 +1,5 @@
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: 'horizontal' | 'vertical';
+    label?: string;
+}
+export declare function Divider({ orientation, label, className, ...props }: DividerProps): import("react").JSX.Element;

package/dist/Divider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './cn';
+export function Divider({ orientation = 'horizontal', label, className, ...props }) {
+    if (orientation === 'vertical') {
+        return (_jsx("div", { role: "separator", "aria-orientation": "vertical", className: cn('mx-3 my-0 h-auto w-px shrink-0 self-stretch bg-slate-200', className), ...props }));
+    }
+    if (label) {
+        return (_jsxs("div", { className: cn('flex items-center gap-3', className), ...props, children: [_jsx("div", { className: "h-px flex-1 bg-slate-200" }), _jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-slate-400", children: label }), _jsx("div", { className: "h-px flex-1 bg-slate-200" })] }));
+    }
+    return (_jsx("div", { role: "separator", className: cn('h-px w-full bg-slate-200', className), ...props }));
+}

package/dist/Drawer.d.ts

@@ -0,0 +1,10 @@
+export interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    side?: 'right' | 'left';
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+}
+export declare function Drawer({ open, onClose, title, side, children, footer, className, }: DrawerProps): import("react").ReactPortal | null;

package/dist/Drawer.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { cn } from './cn';
+export function Drawer({ open, onClose, title, side = 'right', children, footer, className, }) {
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.body.style.overflow = 'hidden';
+        document.addEventListener('keydown', onKey);
+        return () => {
+            document.body.style.overflow = '';
+            document.removeEventListener('keydown', onKey);
+        };
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    return createPortal(_jsxs("div", { className: "fixed inset-0 z-50", children: [_jsx("div", { className: "absolute inset-0 bg-black/50", onClick: onClose, "aria-hidden": "true" }), _jsxs("section", { role: "dialog", "aria-modal": "true", "aria-label": title, className: cn('absolute inset-y-0 flex w-full max-w-sm flex-col bg-white shadow-xl', side === 'right' ? 'right-0' : 'left-0', className), children: [title && (_jsxs("div", { className: "flex items-center justify-between border-b border-slate-100 px-6 py-4", children: [_jsx("h2", { className: "text-lg font-bold text-slate-900", children: title }), _jsx("button", { onClick: onClose, className: "rounded-lg p-1 text-slate-400 hover:bg-slate-100", "aria-label": "Close", children: _jsx(X, { className: "h-5 w-5" }) })] })), _jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: children }), footer && _jsx("div", { className: "border-t border-slate-100 px-6 py-4", children: footer })] })] }), document.body);
+}

package/dist/EmptyState.d.ts

@@ -0,0 +1,7 @@
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description?: string;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+}
+export declare function EmptyState({ title, description, icon, action, className, ...props }: EmptyStateProps): import("react").JSX.Element;

package/dist/EmptyState.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Inbox } from 'lucide-react';
+import { cn } from './cn';
+export function EmptyState({ title, description, icon, action, className, ...props }) {
+    return (_jsxs("div", { className: cn('flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-slate-200 bg-white px-8 py-12 text-center', className), ...props, children: [_jsx("div", { className: "mb-3 rounded-full bg-lime-50 p-3 text-lime-600", children: icon ?? _jsx(Inbox, { "aria-hidden": "true", className: "h-8 w-8" }) }), _jsx("h3", { className: "text-base font-bold text-slate-900", children: title }), description && (_jsx("p", { className: "mt-1 max-w-sm text-sm text-slate-500", children: description })), action && _jsx("div", { className: "mt-5", children: action })] }));
+}

package/dist/Input.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from './cn';
 export function Input({ label, error, className, id, ...props }) {
-    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: id, className: "mb-1 block text-sm font-medium text-neutral-700", children: label })), _jsx("input", { id: id, className: cn('w-full rounded-lg border bg-white px-4 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:outline-none focus:ring-2', error
-                    ? 'border-red-500 focus:border-red-500 focus:ring-red-500/30'
-                    : 'border-neutral-300 focus:border-primary-600 focus:ring-primary-500/30', className), ...props }), error && _jsx("p", { className: "mt-1 text-xs text-red-600", children: error })] }));
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: id, className: "mb-1 block text-sm font-medium text-slate-700", children: label })), _jsx("input", { id: id, className: cn('w-full rounded-lg border bg-white px-4 py-2.5 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:ring-2', error
+                    ? 'border-red-600 focus:border-red-600 focus:ring-red-500/30'
+                    : 'border-slate-500 focus:border-lime-600 focus:ring-lime-500/30', className), ...props }), error && _jsx("p", { className: "mt-1 text-xs text-red-600", children: error })] }));
 }

package/dist/Link.d.ts

@@ -0,0 +1,4 @@
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    external?: boolean;
+}
+export declare function Link({ external, className, children, ...props }: LinkProps): import("react").JSX.Element;

package/dist/Link.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink } from 'lucide-react';
+import { cn } from './cn';
+export function Link({ external = false, className, children, ...props }) {
+    return (_jsxs("a", { className: cn('inline-flex items-center gap-1 font-medium text-lime-700 hover:text-lime-800 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40 rounded-sm', className), ...(external ? { target: '_blank', rel: 'noreferrer' } : {}), ...props, children: [children, external && _jsx(ExternalLink, { "aria-hidden": "true", className: "h-3.5 w-3.5" })] }));
+}

package/dist/Menu.d.ts

@@ -0,0 +1,14 @@
+export interface MenuItem {
+    label: string;
+    onSelect?: () => void;
+    danger?: boolean;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}
+export interface MenuProps {
+    trigger: React.ReactNode;
+    items: MenuItem[];
+    align?: 'start' | 'end';
+    className?: string;
+}
+export declare function Menu({ trigger, items, align, className }: MenuProps): import("react").JSX.Element;

package/dist/Menu.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { cn } from './cn';
+export function Menu({ trigger, items, align = 'end', className }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                setOpen(false);
+        };
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', onDown);
+        document.addEventListener('keydown', onKey);
+        return () => {
+            document.removeEventListener('mousedown', onDown);
+            document.removeEventListener('keydown', onKey);
+        };
+    }, [open]);
+    return (_jsxs("div", { ref: ref, className: cn('relative inline-flex', className), children: [_jsx("div", { onClick: () => setOpen(v => !v), children: trigger }), open && (_jsx("div", { role: "menu", className: cn('absolute z-50 mt-1.5 min-w-40 overflow-hidden rounded-lg border border-slate-200 bg-white py-1 shadow-lg', align === 'end' ? 'right-0' : 'left-0'), children: items.map((item, i) => (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, onClick: () => {
+                        setOpen(false);
+                        item.onSelect?.();
+                    }, className: cn('flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:bg-slate-100', item.danger ? 'text-red-700 hover:bg-red-50' : 'text-slate-700 hover:bg-slate-50'), children: [item.icon, _jsx("span", { className: "flex-1", children: item.label })] }, `${item.label}-${i}`))) }))] }));
+}

package/dist/Modal.js

@@ -20,5 +20,5 @@ export function Modal({ open, onClose, title, children, className, maxWidth = 'm
     }, [open, onClose]);
     if (!open)
         return null;
-    return createPortal(_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: _jsxs("div", { className: cn('w-full rounded-2xl bg-white shadow-xl', maxWidth, className), role: "dialog", "aria-modal": "true", children: [title && (_jsxs("div", { className: "flex items-center justify-between border-b border-neutral-100 px-6 py-4", children: [_jsx("h2", { className: "text-lg font-bold text-neutral-900", children: title }), _jsx("button", { onClick: onClose, className: "rounded-lg p-1 text-neutral-400 hover:bg-neutral-100", "aria-label": "Close", children: _jsx(X, { className: "h-5 w-5" }) })] })), children] }) }), document.body);
+    return createPortal(_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: _jsxs("div", { className: cn('w-full rounded-2xl bg-white shadow-xl', maxWidth, className), role: "dialog", "aria-modal": "true", children: [title && (_jsxs("div", { className: "flex items-center justify-between border-b border-slate-100 px-6 py-4", children: [_jsx("h2", { className: "text-lg font-bold text-slate-900", children: title }), _jsx("button", { onClick: onClose, className: "rounded-lg p-1 text-slate-400 hover:bg-slate-100", "aria-label": "Close", children: _jsx(X, { className: "h-5 w-5" }) })] })), children] }) }), document.body);
 }

package/dist/NavigationBar.d.ts

@@ -0,0 +1,14 @@
+export interface NavItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface NavigationBarProps {
+    items: NavItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    variant?: 'pills' | 'links';
+    className?: string;
+}
+export declare function NavigationBar({ items, value, defaultValue, onChange, variant, className, }: NavigationBarProps): import("react").JSX.Element;

package/dist/NavigationBar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from './cn';
+export function NavigationBar({ items, value, defaultValue, onChange, variant = 'links', className, }) {
+    const isControlled = value !== undefined;
+    const [inner, setInner] = useState(defaultValue);
+    const active = isControlled ? value : inner;
+    return (_jsx("nav", { "aria-label": "Primary", className: cn('flex items-center gap-1', className), children: items.map(item => {
+            const selected = active === item.value;
+            return (_jsx("button", { type: "button", "aria-current": selected ? 'page' : undefined, disabled: item.disabled, onClick: () => {
+                    if (!isControlled)
+                        setInner(item.value);
+                    onChange?.(item.value);
+                }, className: cn('px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40 disabled:opacity-50', variant === 'pills'
+                    ? cn('rounded-lg', selected
+                        ? 'bg-lime-600 text-white'
+                        : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900')
+                    : cn('border-b-2', selected
+                        ? 'border-lime-600 text-lime-700'
+                        : 'border-transparent text-slate-500 hover:text-slate-900')), children: item.label }, item.value));
+        }) }));
+}

package/dist/Pagination.d.ts

@@ -0,0 +1,7 @@
+export interface PaginationProps {
+    page: number;
+    totalPages: number;
+    onChange: (page: number) => void;
+    className?: string;
+}
+export declare function Pagination({ page, totalPages, onChange, className }: PaginationProps): import("react").JSX.Element;

package/dist/Pagination.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from './cn';
+import { Button } from './Button';
+function pageList(page, total) {
+    if (total <= 7)
+        return Array.from({ length: total }, (_, i) => i + 1);
+    const pages = [1];
+    const start = Math.max(2, page - 1);
+    const end = Math.min(total - 1, page + 1);
+    if (start > 2)
+        pages.push('…');
+    for (let i = start; i <= end; i++)
+        pages.push(i);
+    if (end < total - 1)
+        pages.push('…');
+    pages.push(total);
+    return pages;
+}
+export function Pagination({ page, totalPages, onChange, className }) {
+    return (_jsxs("nav", { "aria-label": "Pagination", className: cn('flex items-center gap-1', className), children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: page <= 1, onClick: () => onChange(page - 1), "aria-label": "Previous page", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), pageList(page, totalPages).map((p, i) => p === '…' ? (_jsx("span", { className: "px-1.5 text-sm text-slate-400", children: "\u00E2\u20AC\u00A6" }, `e-${i}`)) : (_jsx("button", { type: "button", onClick: () => onChange(p), "aria-current": p === page ? 'page' : undefined, className: cn('h-8 min-w-8 rounded-lg px-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40', p === page
+                    ? 'bg-lime-600 text-white'
+                    : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'), children: p }, p))), _jsx(Button, { variant: "ghost", size: "sm", disabled: page >= totalPages, onClick: () => onChange(page + 1), "aria-label": "Next page", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] }));
+}

package/dist/Popover.d.ts

@@ -0,0 +1,7 @@
+export interface PopoverProps {
+    trigger: React.ReactNode;
+    content: React.ReactNode;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+}
+export declare function Popover({ trigger, content, side, className }: PopoverProps): import("react").JSX.Element;

package/dist/Popover.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './cn';
+export function Popover({ trigger, content, side = 'bottom', className }) {
+    const isTop = side === 'top';
+    const isBottom = side === 'bottom';
+    const isLeft = side === 'left';
+    const isRight = side === 'right';
+    return (_jsxs("span", { className: "group relative inline-flex", children: [trigger, _jsx("span", { role: "tooltip", className: cn('pointer-events-none absolute z-50 w-64 rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700 opacity-0 shadow-lg transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100', isBottom && 'left-1/2 top-full mt-2 -translate-x-1/2', isTop && 'bottom-full left-1/2 mb-2 -translate-x-1/2', isLeft && 'right-full top-1/2 mr-2 -translate-y-1/2', isRight && 'left-full top-1/2 ml-2 -translate-y-1/2', className), children: content })] }));
+}

package/dist/Progress.d.ts

@@ -0,0 +1,8 @@
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: number;
+    max?: number;
+    size?: 'sm' | 'md';
+    tone?: 'primary' | 'accent' | 'danger';
+    showLabel?: boolean;
+}
+export declare function Progress({ value, max, size, tone, showLabel, className, ...props }: ProgressProps): import("react").JSX.Element;

package/dist/Progress.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './cn';
+const track = {
+    sm: 'h-1.5',
+    md: 'h-2.5',
+};
+const fill = {
+    primary: 'bg-lime-600',
+    accent: 'bg-purple-600',
+    danger: 'bg-red-600',
+};
+export function Progress({ value, max = 100, size = 'md', tone = 'primary', showLabel = false, className, ...props }) {
+    const pct = max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0;
+    return (_jsxs("div", { className: cn('flex items-center gap-3', className), ...props, children: [_jsx("div", { role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, className: cn('w-full overflow-hidden rounded-full bg-slate-200', track[size]), children: _jsx("div", { className: cn('h-full rounded-full transition-all duration-300', fill[tone]), style: { width: `${pct}%` } }) }), showLabel && (_jsxs("span", { className: "w-10 shrink-0 text-right text-xs font-semibold tabular-nums text-slate-600", children: [Math.round(pct), "%"] }))] }));
+}

package/dist/Radio.d.ts

@@ -0,0 +1,15 @@
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+}
+export declare function Radio({ label, id, className, ...props }: RadioProps): import("react").JSX.Element;
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    name: string;
+    value?: string | number;
+    onChange?: (value: string) => void;
+    options: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+}
+export declare function RadioGroup({ name, value, onChange, options, className, ...props }: RadioGroupProps): import("react").JSX.Element;