@aereamart/design-system 0.2.0 → 0.3.1

package/src/Select.tsx

@@ -1,32 +1,32 @@
-import { cn } from './cn';
-
-export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  label?: string;
-  error?: string;
-}
-
-export function Select({ label, error, className, id, children, ...props }: SelectProps) {
-  return (
-    <div className="w-full">
-      {label && (
-        <label htmlFor={id} className="mb-1 block text-sm font-medium text-neutral-700">
-          {label}
-        </label>
-      )}
-      <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}
-      </select>
-      {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
-    </div>
-  );
-}
+import { cn } from './cn';
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+}
+
+export function Select({ label, error, className, id, children, ...props }: SelectProps) {
+  return (
+    <div className="w-full">
+      {label && (
+        <label htmlFor={id} className="mb-1 block text-sm font-medium text-slate-700">
+          {label}
+        </label>
+      )}
+      <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}
+      </select>
+      {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+    </div>
+  );
+}

package/src/Sidebar.tsx

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { cn } from './cn';
+
+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 function Sidebar({
+  items,
+  value,
+  defaultValue,
+  onChange,
+  header,
+  footer,
+  className,
+  ...props
+}: SidebarProps) {
+  const controlled = value !== undefined;
+  const [active, setActive] = useState(defaultValue);
+
+  return (
+    <nav
+      className={cn('flex w-64 flex-col gap-2 rounded-xl border border-slate-200 bg-white p-3', className)}
+      {...props}
+    >
+      {header && <div className="border-b border-slate-100 pb-2">{header}</div>}
+      <ul className="flex-1 space-y-0.5">
+        {items.map(item => {
+          const isActive = controlled ? value === item.value : active === item.value;
+          return (
+            <li key={item.value}>
+              <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'
+                )}
+              >
+                {item.icon}
+                <span className="flex-1 truncate">{item.label}</span>
+                {item.badge}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+      {footer && <div className="border-t border-slate-100 pt-2">{footer}</div>}
+    </nav>
+  );
+}

package/src/Slider.tsx

@@ -0,0 +1,33 @@
+import { cn } from './cn';
+
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string;
+  valueLabel?: string;
+}
+
+export function Slider({ label, valueLabel, id, className, ...props }: SliderProps) {
+  return (
+    <div className={cn('w-full max-w-md', className)}>
+      {(label || valueLabel) && (
+        <div className="mb-2 flex items-center justify-between">
+          {label && (
+            <label htmlFor={id} className="text-sm font-medium text-slate-700">
+              {label}
+            </label>
+          )}
+          {valueLabel && (
+            <span className="text-sm font-semibold tabular-nums text-slate-600">
+              {valueLabel}
+            </span>
+          )}
+        </div>
+      )}
+      <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}
+      />
+    </div>
+  );
+}

package/src/Snackbar.tsx

@@ -0,0 +1,72 @@
+import { CheckCircle2, XCircle, AlertTriangle, Info, X } from 'lucide-react';
+import { cn } from './cn';
+
+type SnackbarTone = 'success' | 'error' | 'warning' | 'info';
+
+export interface SnackbarProps {
+  open?: boolean;
+  tone?: SnackbarTone;
+  message: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  onClose?: () => void;
+  className?: string;
+}
+
+const toneIcon: Record<SnackbarTone, React.ReactNode> = {
+  success: <CheckCircle2 className="h-5 w-5 shrink-0" />,
+  error: <XCircle className="h-5 w-5 shrink-0" />,
+  warning: <AlertTriangle className="h-5 w-5 shrink-0" />,
+  info: <Info className="h-5 w-5 shrink-0" />,
+};
+
+const toneText: Record<SnackbarTone, string> = {
+  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,
+}: SnackbarProps) {
+  if (!open) return null;
+  return (
+    <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
+      )}
+    >
+      <span className={toneText[tone]}>{toneIcon[tone]}</span>
+      <p className="min-w-0 flex-1 text-sm font-medium text-slate-800">{message}</p>
+      {actionLabel && (
+        <button
+          type="button"
+          onClick={onAction}
+          className="shrink-0 text-sm font-semibold text-lime-700 hover:text-lime-800 hover:underline"
+        >
+          {actionLabel}
+        </button>
+      )}
+      {onClose && (
+        <button
+          type="button"
+          aria-label="Close"
+          onClick={onClose}
+          className="shrink-0 rounded-full p-1 text-slate-400 hover:bg-slate-100"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/Spinner.tsx

@@ -1,19 +1,19 @@
-import { cn } from './cn';
-
-export function Spinner({ className }: { className?: string }) {
-  return (
-    <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"
-    >
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z" />
-    </svg>
-  );
-}
+import { cn } from './cn';
+
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <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"
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z" />
+    </svg>
+  );
+}

package/src/Switch.tsx

@@ -0,0 +1,40 @@
+import { cn } from './cn';
+
+export interface SwitchProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string;
+}
+
+export function Switch({ label, id, className, checked, onChange, ...props }: SwitchProps) {
+  return (
+    <label
+      htmlFor={id}
+      className={cn('inline-flex cursor-pointer items-center gap-3', className)}
+    >
+      <input
+        id={id}
+        type="checkbox"
+        role="switch"
+        checked={checked}
+        onChange={onChange}
+        className="sr-only"
+        {...props}
+      />
+      <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'
+        )}
+      >
+        <span
+          className={cn(
+            'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
+            checked ? 'translate-x-6' : 'translate-x-1'
+          )}
+        />
+      </span>
+      {label && <span className="text-sm font-medium text-slate-700">{label}</span>}
+    </label>
+  );
+}

package/src/Tabs.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { cn } from './cn';
+
+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 function Tabs<T extends string | number>({
+  tabs,
+  value,
+  defaultValue,
+  onChange,
+  variant = 'underline',
+  className,
+}: TabsProps<T>) {
+  const isControlled = value !== undefined;
+  const [inner, setInner] = useState<T | undefined>(defaultValue);
+  const active = isControlled ? value : inner;
+
+  return (
+    <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
+      )}
+    >
+      {tabs.map(tab => {
+        const selected = active === tab.value;
+        return (
+          <button
+            key={String(tab.value)}
+            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'
+                  )
+            )}
+          >
+            {tab.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/Tag.tsx

@@ -0,0 +1,29 @@
+import { cn } from './cn';
+
+type TagTone = 'primary' | 'accent' | 'neutral' | 'danger';
+
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+  tone?: TagTone;
+}
+
+const toneClasses: Record<TagTone, string> = {
+  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 }: TagProps) {
+  return (
+    <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}
+    </span>
+  );
+}

package/src/Textarea.tsx

@@ -1,30 +1,30 @@
-import { cn } from './cn';
-
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label?: string;
-  error?: string;
-}
-
-export function Textarea({ label, error, className, id, ...props }: TextareaProps) {
-  return (
-    <div className="w-full">
-      {label && (
-        <label htmlFor={id} className="mb-1 block text-sm font-medium text-neutral-700">
-          {label}
-        </label>
-      )}
-      <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 && <p className="mt-1 text-xs text-red-600">{error}</p>}
-    </div>
-  );
-}
+import { cn } from './cn';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+}
+
+export function Textarea({ label, error, className, id, ...props }: TextareaProps) {
+  return (
+    <div className="w-full">
+      {label && (
+        <label htmlFor={id} className="mb-1 block text-sm font-medium text-slate-700">
+          {label}
+        </label>
+      )}
+      <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 && <p className="mt-1 text-xs text-red-600">{error}</p>}
+    </div>
+  );
+}

package/src/Tooltip.tsx

@@ -0,0 +1,25 @@
+import { cn } from './cn';
+
+export interface TooltipProps {
+  content: React.ReactNode;
+  side?: 'top' | 'bottom';
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Tooltip({ content, side = 'top', children, className }: TooltipProps) {
+  return (
+    <span className={cn('group relative inline-flex', className)}>
+      {children}
+      <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'
+        )}
+      >
+        {content}
+      </span>
+    </span>
+  );
+}

package/src/TreeView.tsx

@@ -0,0 +1,105 @@
+import { useId, useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from './cn';
+
+export interface TreeNode {
+  id: string;
+  label: string;
+  children?: TreeNode[];
+}
+
+export interface TreeViewProps {
+  nodes: TreeNode[];
+  defaultExpanded?: string[];
+  defaultAllExpanded?: boolean;
+  className?: string;
+}
+
+function Node({
+  node,
+  depth,
+  expanded,
+  onToggle,
+}: {
+  node: TreeNode;
+  depth: number;
+  expanded: Set<string>;
+  onToggle: (id: string) => void;
+}) {
+  const hasChildren = !!node.children?.length;
+  const isOpen = expanded.has(node.id);
+
+  return (
+    <li>
+      <div className={cn('flex items-center gap-1.5 rounded-lg py-1.5 pr-2')}>
+        <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` }}
+        >
+          {hasChildren ? (
+            <ChevronRight
+              className={cn('h-4 w-4 shrink-0 text-slate-400 transition-transform', isOpen && 'rotate-90')}
+            />
+          ) : (
+            <span className="ml-4 h-4 w-4 shrink-0" aria-hidden="true" />
+          )}
+          <span className={cn(isOpen && 'font-semibold text-slate-900')}>{node.label}</span>
+        </button>
+      </div>
+      {hasChildren && isOpen && (
+        <ul role="group">
+          {node.children!.map(child => (
+            <Node key={child.id} node={child} depth={depth + 1} expanded={expanded} onToggle={onToggle} />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+export function TreeView({ nodes, defaultExpanded = [], defaultAllExpanded = false, className }: TreeViewProps) {
+  const [expanded, setExpanded] = useState<Set<string>>(() => {
+    if (defaultAllExpanded) {
+      const all = new Set<string>();
+      const walk = (list: TreeNode[]) => 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: string) =>
+    setExpanded(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+
+  return (
+    <ul
+      role="tree"
+      aria-label="Tree"
+      aria-labelledby={labelId}
+      className={cn('space-y-0.5', className)}
+    >
+      <span id={labelId} className="sr-only">
+        Tree view
+      </span>
+      {nodes.map(node => (
+        <Node key={node.id} node={node} depth={0} expanded={expanded} onToggle={toggle} />
+      ))}
+    </ul>
+  );
+}

package/src/cn.ts

@@ -1,3 +1,3 @@
-export function cn(...parts: Array<string | false | null | undefined>): string {
-  return parts.filter(Boolean).join(' ');
+export function cn(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ');
 }

package/src/index.ts

@@ -1,8 +1,38 @@
-export { cn } from './cn';
-export { Badge, type BadgeProps } from './Badge';
-export { Button, type ButtonProps } from './Button';
-export { Input, type InputProps } from './Input';
-export { Select, type SelectProps } from './Select';
-export { Textarea, type TextareaProps } from './Textarea';
-export { Modal, type ModalProps } from './Modal';
-export { Spinner } from './Spinner';
+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 { 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';