@aereamart/design-system 0.3.6 → 0.4.2

package/dist/Sidebar.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { cn } from './cn';
-export function Sidebar({ items, value, defaultValue, onChange, header, footer, className, ...props }) {
-    const controlled = value !== undefined;
-    const [active, setActive] = useState(defaultValue);
-    return (_jsxs("nav", { className: cn('flex w-64 flex-col gap-2 rounded-xl border border-slate-200 bg-white p-3', className), ...props, children: [header && _jsx("div", { className: "border-b border-slate-100 pb-2", children: header }), _jsx("ul", { className: "flex-1 space-y-0.5", children: items.map(item => {
-                    const isActive = controlled ? value === item.value : active === item.value;
-                    return (_jsx("li", { children: _jsxs("button", { type: "button", disabled: item.disabled, onClick: () => {
-                                if (!controlled)
-                                    setActive(item.value);
-                                onChange?.(item.value);
-                            }, className: cn('flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40 disabled:cursor-not-allowed', item.disabled
-                                ? 'cursor-not-allowed text-slate-300'
-                                : isActive
-                                    ? 'bg-lime-600 text-white'
-                                    : 'text-slate-700 hover:bg-lime-50 hover:text-lime-800'), children: [item.icon, _jsx("span", { className: "flex-1 truncate", children: item.label }), item.badge] }) }, item.value));
-                }) }), footer && _jsx("div", { className: "border-t border-slate-100 pt-2", children: footer })] }));
-}

package/dist/Slider.d.ts

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

package/dist/Slider.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from './cn';
-export function Slider({ label, valueLabel, id, className, ...props }) {
-    return (_jsxs("div", { className: cn('w-full max-w-md', className), children: [(label || valueLabel) && (_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [label && (_jsx("label", { htmlFor: id, className: "text-sm font-medium text-slate-700", children: label })), valueLabel && (_jsx("span", { className: "text-sm font-semibold tabular-nums text-slate-600", children: valueLabel }))] })), _jsx("input", { id: id, type: "range", className: "h-2 w-full cursor-pointer appearance-none rounded-full bg-slate-200 accent-lime-600 focus:outline-none focus:ring-2 focus:ring-lime-500/40", ...props })] }));
-}

package/dist/Snackbar.d.ts

@@ -1,12 +0,0 @@
-type SnackbarTone = 'success' | 'error' | 'warning' | 'info';
-export interface SnackbarProps {
-    open?: boolean;
-    tone?: SnackbarTone;
-    message: string;
-    actionLabel?: string;
-    onAction?: () => void;
-    onClose?: () => void;
-    className?: string;
-}
-export declare function Snackbar({ open, tone, message, actionLabel, onAction, onClose, className, }: SnackbarProps): import("react").JSX.Element | null;
-export {};

package/dist/Snackbar.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckCircle2, XCircle, AlertTriangle, Info, X } from 'lucide-react';
-import { cn } from './cn';
-const toneIcon = {
-    success: _jsx(CheckCircle2, { className: "h-5 w-5 shrink-0" }),
-    error: _jsx(XCircle, { className: "h-5 w-5 shrink-0" }),
-    warning: _jsx(AlertTriangle, { className: "h-5 w-5 shrink-0" }),
-    info: _jsx(Info, { className: "h-5 w-5 shrink-0" }),
-};
-const toneText = {
-    success: 'text-lime-600',
-    error: 'text-red-600',
-    warning: 'text-purple-600',
-    info: 'text-sky-600',
-};
-export function Snackbar({ open = true, tone = 'info', message, actionLabel, onAction, onClose, className, }) {
-    if (!open)
-        return null;
-    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cn('pointer-events-auto flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-lg', className), children: [_jsx("span", { className: toneText[tone], children: toneIcon[tone] }), _jsx("p", { className: "min-w-0 flex-1 text-sm font-medium text-slate-800", children: message }), actionLabel && (_jsx("button", { type: "button", onClick: onAction, className: "shrink-0 text-sm font-semibold text-lime-700 hover:text-lime-800 hover:underline", children: actionLabel })), onClose && (_jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, className: "shrink-0 rounded-full p-1 text-slate-400 hover:bg-slate-100", children: _jsx(X, { className: "h-4 w-4" }) }))] }));
-}

package/dist/Spinner.d.ts

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

package/dist/Spinner.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from './cn';
-export function Spinner({ className }) {
-    return (_jsxs("svg", { className: cn('h-5 w-5 animate-spin text-current', 'inline-flex shrink-0', className), viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z" })] }));
-}

package/dist/Switch.d.ts

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

package/dist/Switch.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from './cn';
-export function Switch({ label, id, className, checked, onChange, ...props }) {
-    return (_jsxs("label", { htmlFor: id, className: cn('inline-flex cursor-pointer items-center gap-3', className), children: [_jsx("input", { id: id, type: "checkbox", role: "switch", checked: checked, onChange: onChange, className: "sr-only", ...props }), _jsx("span", { "aria-hidden": "true", className: cn('relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors', checked ? 'bg-lime-600' : 'bg-slate-300'), children: _jsx("span", { className: cn('inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform', checked ? 'translate-x-6' : 'translate-x-1') }) }), label && _jsx("span", { className: "text-sm font-medium text-slate-700", children: label })] }));
-}

package/dist/Tabs.d.ts

@@ -1,14 +0,0 @@
-export interface Tab<T extends string | number> {
-    value: T;
-    label: string;
-    disabled?: boolean;
-}
-export interface TabsProps<T extends string | number> {
-    tabs: Tab<T>[];
-    value?: T;
-    defaultValue?: T;
-    onChange?: (value: T) => void;
-    variant?: 'underline' | 'pill';
-    className?: string;
-}
-export declare function Tabs<T extends string | number>({ tabs, value, defaultValue, onChange, variant, className, }: TabsProps<T>): import("react").JSX.Element;

package/dist/Tabs.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { cn } from './cn';
-export function Tabs({ tabs, value, defaultValue, onChange, variant = 'underline', className, }) {
-    const isControlled = value !== undefined;
-    const [inner, setInner] = useState(defaultValue);
-    const active = isControlled ? value : inner;
-    return (_jsx("div", { role: "tablist", className: cn(variant === 'underline'
-            ? 'flex gap-1 border-b border-slate-200'
-            : 'inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-white p-1', className), children: tabs.map(tab => {
-            const selected = active === tab.value;
-            return (_jsx("button", { type: "button", role: "tab", "aria-selected": selected, disabled: tab.disabled, onClick: () => {
-                    if (!isControlled)
-                        setInner(tab.value);
-                    onChange?.(tab.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 === 'underline'
-                    ? cn('-mb-px border-b-2', selected
-                        ? 'border-lime-600 text-lime-700'
-                        : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-900')
-                    : cn('rounded-md', selected
-                        ? 'bg-lime-600 text-white'
-                        : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900')), children: tab.label }, String(tab.value)));
-        }) }));
-}

package/dist/Tag.d.ts

@@ -1,6 +0,0 @@
-type TagTone = 'primary' | 'accent' | 'neutral' | 'danger';
-export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
-    tone?: TagTone;
-}
-export declare function Tag({ tone, className, children, ...props }: TagProps): import("react").JSX.Element;
-export {};

package/dist/Tag.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from './cn';
-const toneClasses = {
-    primary: 'border-lime-300 bg-white text-lime-800',
-    accent: 'border-purple-300 bg-white text-purple-900',
-    neutral: 'border-slate-300 bg-white text-slate-700',
-    danger: 'border-red-300 bg-white text-red-800',
-};
-export function Tag({ tone = 'neutral', className, children, ...props }) {
-    return (_jsx("span", { className: cn('inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-semibold', toneClasses[tone], className), ...props, children: children }));
-}

package/dist/Textarea.d.ts

@@ -1,5 +0,0 @@
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-    label?: string;
-    error?: string;
-}
-export declare function Textarea({ label, error, className, id, ...props }: TextareaProps): import("react").JSX.Element;

package/dist/Textarea.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from './cn';
-export function Textarea({ 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-slate-700", children: label })), _jsx("textarea", { 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/Tooltip.d.ts

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

package/dist/Tooltip.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from './cn';
-export function Tooltip({ content, side = 'top', children, className }) {
-    return (_jsxs("span", { className: cn('group relative inline-flex', className), children: [children, _jsx("span", { role: "tooltip", className: cn('pointer-events-none absolute left-1/2 z-50 w-max max-w-xs -translate-x-1/2 rounded-lg bg-slate-900 px-3 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100', side === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'), children: content })] }));
-}

package/dist/TreeView.d.ts

@@ -1,12 +0,0 @@
-export interface TreeNode {
-    id: string;
-    label: string;
-    children?: TreeNode[];
-}
-export interface TreeViewProps {
-    nodes: TreeNode[];
-    defaultExpanded?: string[];
-    defaultAllExpanded?: boolean;
-    className?: string;
-}
-export declare function TreeView({ nodes, defaultExpanded, defaultAllExpanded, className }: TreeViewProps): import("react").JSX.Element;

package/dist/TreeView.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useState } from 'react';
-import { ChevronRight } from 'lucide-react';
-import { cn } from './cn';
-function Node({ node, depth, expanded, onToggle, }) {
-    const hasChildren = !!node.children?.length;
-    const isOpen = expanded.has(node.id);
-    return (_jsxs("li", { children: [_jsx("div", { className: cn('flex items-center gap-1.5 rounded-lg py-1.5 pr-2'), children: _jsxs("button", { type: "button", "aria-expanded": hasChildren ? isOpen : undefined, onClick: () => hasChildren && onToggle(node.id), className: cn('inline-flex w-full items-center gap-1.5 rounded-lg py-1.5 pr-2 text-left text-sm font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40', 'hover:bg-slate-100'), style: { paddingLeft: `${8 + depth * 24}px` }, children: [hasChildren ? (_jsx(ChevronRight, { className: cn('h-4 w-4 shrink-0 text-slate-400 transition-transform', isOpen && 'rotate-90') })) : (_jsx("span", { className: "ml-4 h-4 w-4 shrink-0", "aria-hidden": "true" })), _jsx("span", { className: cn(isOpen && 'font-semibold text-slate-900'), children: node.label })] }) }), hasChildren && isOpen && (_jsx("ul", { role: "group", children: node.children.map(child => (_jsx(Node, { node: child, depth: depth + 1, expanded: expanded, onToggle: onToggle }, child.id))) }))] }));
-}
-export function TreeView({ nodes, defaultExpanded = [], defaultAllExpanded = false, className }) {
-    const [expanded, setExpanded] = useState(() => {
-        if (defaultAllExpanded) {
-            const all = new Set();
-            const walk = (list) => list.forEach(n => {
-                all.add(n.id);
-                if (n.children)
-                    walk(n.children);
-            });
-            walk(nodes);
-            return all;
-        }
-        return new Set(defaultExpanded);
-    });
-    const labelId = useId();
-    const toggle = (id) => setExpanded(prev => {
-        const next = new Set(prev);
-        if (next.has(id))
-            next.delete(id);
-        else
-            next.add(id);
-        return next;
-    });
-    return (_jsxs("ul", { role: "tree", "aria-label": "Tree", "aria-labelledby": labelId, className: cn('space-y-0.5', className), children: [_jsx("span", { id: labelId, className: "sr-only", children: "Tree view" }), nodes.map(node => (_jsx(Node, { node: node, depth: 0, expanded: expanded, onToggle: toggle }, node.id)))] }));
-}

package/src/Accordion.tsx

@@ -1,58 +0,0 @@
-import { useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-import { cn } from './cn';
-
-export interface AccordionItem {
-  title: string;
-  content: React.ReactNode;
-}
-
-export interface AccordionProps {
-  items: AccordionItem[];
-  defaultOpen?: number | null;
-  className?: string;
-}
-
-export function Accordion({ items, defaultOpen = null, className }: AccordionProps) {
-  const [open, setOpen] = useState<number | null>(defaultOpen);
-
-  return (
-    <div
-      className={cn(
-        'divide-y divide-slate-200 overflow-hidden rounded-xl border border-slate-200 bg-white',
-        className
-      )}
-    >
-      {items.map((item, i) => {
-        const isOpen = open === i;
-        const uid = `accordion-${i}`;
-        return (
-          <div key={uid}>
-            <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"
-            >
-              {item.title}
-              <ChevronDown
-                aria-hidden="true"
-                className={cn('h-4 w-4 shrink-0 text-slate-400 transition-transform', isOpen && 'rotate-180')}
-              />
-            </button>
-            {isOpen && (
-              <div
-                id={`${uid}-panel`}
-                role="region"
-                className="border-t border-slate-100 px-5 py-4 text-sm leading-relaxed text-slate-600"
-              >
-                {item.content}
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/AlertBanner.tsx

@@ -1,62 +0,0 @@
-import { Info, AlertTriangle, CheckCircle2, XCircle, X } from 'lucide-react';
-import { useState } from 'react';
-import { cn } from './cn';
-
-type AlertTone = 'info' | 'primary' | 'accent' | 'danger' | 'neutral';
-
-export interface AlertBannerProps extends React.HTMLAttributes<HTMLDivElement> {
-  tone?: AlertTone;
-  title?: string;
-  dismissible?: boolean;
-  onDismiss?: () => void;
-}
-
-const toneRecord: Record<AlertTone, { wrap: string; icon: React.ReactNode; label: string }> = {
-  info: { wrap: 'border-sky-300 bg-sky-50 text-sky-900', icon: <Info className="h-4 w-4" />, label: 'Info' },
-  primary: { wrap: 'border-lime-300 bg-lime-50 text-lime-900', icon: <CheckCircle2 className="h-4 w-4" />, label: 'Success' },
-  accent: { wrap: 'border-purple-300 bg-purple-50 text-purple-900', icon: <AlertTriangle className="h-4 w-4" />, label: 'Warning' },
-  danger: { wrap: 'border-red-300 bg-red-50 text-red-900', icon: <XCircle className="h-4 w-4" />, label: 'Error' },
-  neutral: { wrap: 'border-slate-300 bg-slate-50 text-slate-800', icon: <Info className="h-4 w-4" />, label: 'Notice' },
-};
-
-export function AlertBanner({
-  tone = 'primary',
-  title,
-  dismissible = false,
-  onDismiss,
-  className,
-  children,
-  ...props
-}: AlertBannerProps) {
-  const [hidden, setHidden] = useState(false);
-  if (hidden) return null;
-  const t = toneRecord[tone];
-  return (
-    <div
-      role="alert"
-      className={cn('flex items-start gap-3 rounded-lg border px-4 py-3 text-sm', t.wrap, className)}
-      {...props}
-    >
-      <span className="mt-0.5 shrink-0" aria-label={t.label}>
-        {t.icon}
-      </span>
-      <div className="min-w-0 flex-1">
-        {title && <p className="font-bold">{title}</p>}
-        <div className={cn(title && 'mt-0.5 text-sm opacity-90')}>{children}</div>
-      </div>
-      {dismissible && (
-        <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"
-        >
-          <X aria-hidden="true" className="h-4 w-4" />
-        </button>
-      )}
-    </div>
-  );
-}

package/src/AppBar.tsx

@@ -1,29 +0,0 @@
-import { cn } from './cn';
-
-export interface AppBarProps extends React.HTMLAttributes<HTMLElement> {
-  title: string;
-  subtitle?: string;
-  leading?: React.ReactNode;
-  actions?: React.ReactNode;
-}
-
-export function AppBar({ title, subtitle, leading, actions, className, ...props }: AppBarProps) {
-  return (
-    <header
-      className={cn(
-        'flex items-center justify-between gap-4 border-b border-slate-200 bg-white px-6 py-4',
-        className
-      )}
-      {...props}
-    >
-      <div className="flex min-w-0 items-center gap-3">
-        {leading}
-        <div className="min-w-0">
-          <h1 className="truncate text-lg font-bold text-slate-900">{title}</h1>
-          {subtitle && <p className="truncate text-sm text-slate-500">{subtitle}</p>}
-        </div>
-      </div>
-      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
-    </header>
-  );
-}

package/src/Avatar.tsx

@@ -1,42 +0,0 @@
-import { cn } from './cn';
-
-export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
-  src?: string;
-  name?: string;
-  size?: 'sm' | 'md' | 'lg';
-}
-
-const sizeClasses: Record<NonNullable<AvatarProps['size']>, string> = {
-  sm: 'h-8 w-8 text-xs',
-  md: 'h-10 w-10 text-sm',
-  lg: 'h-14 w-14 text-lg',
-};
-
-function initials(name?: string): string {
-  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 }: AvatarProps) {
-  return (
-    <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}
-    >
-      {src ? (
-        <img src={src} alt={name ?? ''} className="h-full w-full object-cover" />
-      ) : (
-        <span aria-hidden="true">{initials(name)}</span>
-      )}
-    </div>
-  );
-}

package/src/Badge.tsx

@@ -1,27 +0,0 @@
-import { cn } from './cn';
-
-type BadgeVariant = 'danger' | 'primary' | 'accent' | 'neutral';
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  variant?: BadgeVariant;
-}
-
-const variantClasses: Record<BadgeVariant, string> = {
-  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 }: BadgeProps) {
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center justify-center rounded-full text-[10px] font-bold leading-none',
-        variantClasses[variant],
-        className
-      )}
-      {...props}
-    />
-  );
-}

package/src/BottomSheet.tsx

@@ -1,60 +0,0 @@
-import { useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { X } from 'lucide-react';
-import { cn } from './cn';
-
-export interface BottomSheetProps {
-  open: boolean;
-  onClose: () => void;
-  title?: string;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export function BottomSheet({ open, onClose, title, children, className }: BottomSheetProps) {
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      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(
-    <div className="fixed inset-0 z-50 flex items-end justify-center">
-      <div className="absolute inset-0 bg-black/50" onClick={onClose} aria-hidden="true" />
-      <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
-        )}
-      >
-        <div aria-hidden="true" className="mx-auto mb-4 h-1 w-10 rounded-full bg-slate-200" />
-        {title && (
-          <div className="mb-2 flex items-center justify-between">
-            <h2 className="text-lg font-bold text-slate-900">{title}</h2>
-            <button
-              onClick={onClose}
-              className="rounded-lg p-1 text-slate-400 hover:bg-slate-100"
-              aria-label="Close"
-            >
-              <X className="h-5 w-5" />
-            </button>
-          </div>
-        )}
-        {children}
-      </section>
-    </div>,
-    document.body
-  );
-}

package/src/Breadcrumb.tsx

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

package/src/Button.tsx

@@ -1,54 +0,0 @@
-import { cn } from './cn';
-import { Spinner } from './Spinner';
-
-type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
-type ButtonSize = 'sm' | 'md' | 'lg' | 'full';
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  loading?: boolean;
-}
-
-const variantClasses: Record<ButtonVariant, string> = {
-  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-slate-600 hover:bg-slate-100 focus-visible:ring-slate-400/40',
-};
-
-const sizeClasses: Record<ButtonSize, string> = {
-  sm: 'px-3 py-1.5 text-xs',
-  md: 'px-4 py-2.5 text-sm',
-  lg: 'px-6 py-3 text-base',
-  full: 'w-full px-4 py-2.5 text-sm',
-};
-
-export function Button({
-  variant = 'primary',
-  size = 'md',
-  loading = false,
-  className,
-  disabled,
-  children,
-  ...props
-}: ButtonProps) {
-  return (
-    <button
-      className={cn(
-        'inline-flex items-center justify-center gap-2 rounded-lg font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50',
-        variantClasses[variant],
-        sizeClasses[size],
-        className
-      )}
-      disabled={disabled || loading}
-      {...props}
-    >
-      {loading && <Spinner className="h-4 w-4" />}
-      {children}
-    </button>
-  );
-}