@aereamart/design-system 0.2.0 → 0.3.1

package/dist/Radio.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './cn';
+export function Radio({ label, id, className, ...props }) {
+    return (_jsxs("label", { htmlFor: id, className: cn('inline-flex cursor-pointer items-center gap-2.5 text-sm', className), children: [_jsx("input", { id: id, type: "radio", className: "h-4 w-4 shrink-0 cursor-pointer accent-lime-600 focus:outline-none focus:ring-2 focus:ring-lime-500/40", ...props }), label && _jsx("span", { className: "font-medium text-slate-700", children: label })] }));
+}
+export function RadioGroup({ name, value, onChange, options, className, ...props }) {
+    return (_jsx("div", { className: cn('flex flex-wrap gap-x-5 gap-y-2.5', className), ...props, children: options.map(opt => (_jsx(Radio, { id: `${name}-${opt.value}`, name: name, value: opt.value, label: opt.label, checked: value === opt.value, disabled: opt.disabled, onChange: e => onChange?.(e.target.value) }, opt.value))) }));
+}

package/dist/SegmentedControl.d.ts

@@ -0,0 +1,13 @@
+export interface SegmentedOption<T extends string | number> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps<T extends string | number> {
+    options: SegmentedOption<T>[];
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    className?: string;
+}
+export declare function SegmentedControl<T extends string | number>({ options, value, defaultValue, onChange, className, }: SegmentedControlProps<T>): import("react").JSX.Element;

package/dist/SegmentedControl.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from './cn';
+export function SegmentedControl({ options, value, defaultValue, onChange, className, }) {
+    const isControlled = value !== undefined;
+    const [inner, setInner] = useState(defaultValue);
+    const active = isControlled ? value : inner;
+    return (_jsx("div", { role: "tablist", className: cn('inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-white p-1', className), children: options.map(opt => {
+            const selected = active === opt.value;
+            return (_jsx("button", { type: "button", role: "tab", "aria-selected": selected, disabled: opt.disabled, onClick: () => {
+                    if (!isControlled)
+                        setInner(opt.value);
+                    onChange?.(opt.value);
+                }, className: cn('rounded-md px-4 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40 disabled:opacity-50', selected
+                    ? 'bg-lime-600 text-white'
+                    : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'), children: opt.label }, String(opt.value)));
+        }) }));
+}

package/dist/Select.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from './cn';
 export function Select({ label, error, className, id, children, ...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("select", { id: id, className: cn('w-full rounded-lg border bg-white px-3 py-2.5 text-sm text-neutral-900 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, children: children }), 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("select", { id: id, className: cn('w-full rounded-lg border bg-white px-3 py-2.5 text-sm text-slate-900 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, children: children }), error && _jsx("p", { className: "mt-1 text-xs text-red-600", children: error })] }));
 }

package/dist/Sidebar.d.ts

@@ -0,0 +1,16 @@
+export interface SidebarItem {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    items: SidebarItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+export declare function Sidebar({ items, value, defaultValue, onChange, header, footer, className, ...props }: SidebarProps): import("react").JSX.Element;

package/dist/Sidebar.js

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

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

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

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

@@ -0,0 +1,20 @@
+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/Switch.d.ts

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

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

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

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

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

@@ -0,0 +1,11 @@
+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.js

@@ -1,7 +1,7 @@
 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-neutral-700", children: label })), _jsx("textarea", { 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("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

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

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

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

@@ -0,0 +1,34 @@
+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/dist/index.d.ts

@@ -1,8 +1,38 @@
 export { cn } from './cn';
+export { Accordion, type AccordionProps, type AccordionItem } from './Accordion';
+export { AlertBanner, type AlertBannerProps } from './AlertBanner';
+export { AppBar, type AppBarProps } from './AppBar';
+export { Avatar, type AvatarProps } from './Avatar';
 export { Badge, type BadgeProps } from './Badge';
+export { BottomSheet, type BottomSheetProps } from './BottomSheet';
+export { Breadcrumb, type BreadcrumbProps, type Crumb } from './Breadcrumb';
 export { Button, type ButtonProps } from './Button';
+export { Card, type CardProps } from './Card';
+export { Checkbox, type CheckboxProps } from './Checkbox';
+export { Chip, type ChipProps } from './Chip';
+export { DataTable, type DataTableProps, type Column } from './DataTable';
+export { DatePicker, type DatePickerProps } from './DatePicker';
+export { Divider, type DividerProps } from './Divider';
+export { Drawer, type DrawerProps } from './Drawer';
+export { EmptyState, type EmptyStateProps } from './EmptyState';
 export { Input, type InputProps } from './Input';
-export { Select, type SelectProps } from './Select';
-export { Textarea, type TextareaProps } from './Textarea';
+export { Link, type LinkProps } from './Link';
+export { Menu, type MenuProps, type MenuItem } from './Menu';
 export { Modal, type ModalProps } from './Modal';
+export { NavigationBar, type NavigationBarProps, type NavItem } from './NavigationBar';
+export { Pagination, type PaginationProps } from './Pagination';
+export { Popover, type PopoverProps } from './Popover';
+export { Progress, type ProgressProps } from './Progress';
+export { Radio, RadioGroup, type RadioProps, type RadioGroupProps } from './Radio';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedOption } from './SegmentedControl';
+export { Select, type SelectProps } from './Select';
+export { Sidebar, type SidebarProps, type SidebarItem } from './Sidebar';
+export { Slider, type SliderProps } from './Slider';
+export { Snackbar, type SnackbarProps } from './Snackbar';
 export { Spinner } from './Spinner';
+export { Switch, type SwitchProps } from './Switch';
+export { Tabs, type TabsProps, type Tab } from './Tabs';
+export { Tag, type TagProps } from './Tag';
+export { Textarea, type TextareaProps } from './Textarea';
+export { Tooltip, type TooltipProps } from './Tooltip';
+export { TreeView, type TreeViewProps, type TreeNode } from './TreeView';

package/dist/index.js

@@ -1,8 +1,38 @@
 export { cn } from './cn';
+export { Accordion } from './Accordion';
+export { AlertBanner } from './AlertBanner';
+export { AppBar } from './AppBar';
+export { Avatar } from './Avatar';
 export { Badge } from './Badge';
+export { BottomSheet } from './BottomSheet';
+export { Breadcrumb } from './Breadcrumb';
 export { Button } from './Button';
+export { Card } from './Card';
+export { Checkbox } from './Checkbox';
+export { Chip } from './Chip';
+export { DataTable } from './DataTable';
+export { DatePicker } from './DatePicker';
+export { Divider } from './Divider';
+export { Drawer } from './Drawer';
+export { EmptyState } from './EmptyState';
 export { Input } from './Input';
-export { Select } from './Select';
-export { Textarea } from './Textarea';
+export { Link } from './Link';
+export { Menu } from './Menu';
 export { Modal } from './Modal';
+export { NavigationBar } from './NavigationBar';
+export { Pagination } from './Pagination';
+export { Popover } from './Popover';
+export { Progress } from './Progress';
+export { Radio, RadioGroup } from './Radio';
+export { SegmentedControl } from './SegmentedControl';
+export { Select } from './Select';
+export { Sidebar } from './Sidebar';
+export { Slider } from './Slider';
+export { Snackbar } from './Snackbar';
 export { Spinner } from './Spinner';
+export { Switch } from './Switch';
+export { Tabs } from './Tabs';
+export { Tag } from './Tag';
+export { Textarea } from './Textarea';
+export { Tooltip } from './Tooltip';
+export { TreeView } from './TreeView';

package/package.json

@@ -1,43 +1,43 @@
-{
-  "name": "@aereamart/design-system",
-  "version": "0.2.0",
-  "description": "Aereamart shared React UI primitives (Badge, Button, Input, Select, Textarea, Modal, Spinner)",
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
-    "lint": "oxlint src"
-  },
-  "peerDependencies": {
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
-  },
-  "dependencies": {
-    "lucide-react": "^1.30.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "oxlint": "^1.75.0",
-    "typescript": "~6.0.2"
-  },
-  "keywords": [
-    "ui",
-    "components",
-    "aereamart"
-  ],
-  "license": "MIT"
-}
+{
+  "name": "@aereamart/design-system",
+  "version": "0.3.1",
+  "description": "Aereamart shared React UI primitives (Badge, Button, Input, Select, Textarea, Modal, Spinner)",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "oxlint src"
+  },
+  "peerDependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "dependencies": {
+    "lucide-react": "^1.30.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "oxlint": "^1.75.0",
+    "typescript": "~6.0.2"
+  },
+  "keywords": [
+    "ui",
+    "components",
+    "aereamart"
+  ],
+  "license": "MIT"
+}

package/src/Accordion.tsx

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

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

@@ -0,0 +1,29 @@
+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>
+  );
+}