@aereamart/design-system 0.2.0 → 0.3.0

package/src/BottomSheet.tsx

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

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

@@ -12,12 +12,12 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 
 const variantClasses: Record<ButtonVariant, string> = {
   primary:
-    'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500/40',
+    'bg-lime-600 text-white hover:bg-lime-700 focus-visible:ring-lime-500/40',
   secondary:
-    'border border-neutral-300 bg-white text-neutral-700 hover:bg-neutral-50 focus-visible:ring-neutral-400/40',
+    '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',
+    'bg-transparent text-slate-600 hover:bg-slate-100 focus-visible:ring-slate-400/40',
 };
 
 const sizeClasses: Record<ButtonSize, string> = {

package/src/Card.tsx

@@ -0,0 +1,39 @@
+import { cn } from './cn';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  description?: string;
+  footer?: React.ReactNode;
+  hoverable?: boolean;
+}
+
+export function Card({
+  title,
+  description,
+  footer,
+  hoverable = false,
+  className,
+  children,
+  ...props
+}: CardProps) {
+  return (
+    <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}
+    >
+      {(title || description) && (
+        <div className="border-b border-slate-100 px-5 py-4">
+          {title && <h3 className="text-base font-bold text-slate-900">{title}</h3>}
+          {description && <p className="mt-0.5 text-sm text-slate-500">{description}</p>}
+        </div>
+      )}
+      <div className="px-5 py-4">{children}</div>
+      {footer && <div className="border-t border-slate-100 px-5 py-3">{footer}</div>}
+    </div>
+  );
+}

package/src/Checkbox.tsx

@@ -0,0 +1,31 @@
+import { cn } from './cn';
+
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string;
+  error?: string;
+}
+
+export function Checkbox({ label, error, id, className, ...props }: CheckboxProps) {
+  return (
+    <div className="grid gap-1.5">
+      <label
+        htmlFor={id}
+        className={cn('inline-flex cursor-pointer items-start gap-2.5 text-sm', className)}
+      >
+        <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 && (
+          <span className={cn('font-medium', error ? 'text-red-700' : 'text-slate-700')}>
+            {label}
+          </span>
+        )}
+      </label>
+      {error && <p className="pl-6.5 text-xs text-red-600">{error}</p>}
+    </div>
+  );
+}

package/src/Chip.tsx

@@ -0,0 +1,44 @@
+import { X } from 'lucide-react';
+import { cn } from './cn';
+
+type ChipVariant = 'primary' | 'accent' | 'neutral' | 'danger';
+
+export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: ChipVariant;
+  onRemove?: () => void;
+}
+
+const variantClasses: Record<ChipVariant, string> = {
+  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 }: ChipProps) {
+  return (
+    <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}
+      {onRemove && (
+        <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"
+        >
+          <X aria-hidden="true" className="h-3 w-3" />
+        </button>
+      )}
+    </span>
+  );
+}

package/src/DataTable.tsx

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

package/src/DatePicker.tsx

@@ -0,0 +1,44 @@
+import { useId } from 'react';
+import { CalendarDays } from 'lucide-react';
+import { cn } from './cn';
+
+export interface DatePickerProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string;
+  error?: string;
+}
+
+export function DatePicker({ label, error, id, className, ...props }: DatePickerProps) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+
+  return (
+    <div>
+      {label && (
+        <label htmlFor={inputId} className="mb-1 block text-sm font-medium text-slate-700">
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        <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"
+        />
+        <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}
+        />
+      </div>
+      {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+    </div>
+  );
+}

package/src/Divider.tsx

@@ -0,0 +1,33 @@
+import { cn } from './cn';
+
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  label?: string;
+}
+
+export function Divider({ orientation = 'horizontal', label, className, ...props }: DividerProps) {
+  if (orientation === 'vertical') {
+    return (
+      <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 (
+      <div className={cn('flex items-center gap-3', className)} {...props}>
+        <div className="h-px flex-1 bg-slate-200" />
+        <span className="text-xs font-medium uppercase tracking-wider text-slate-400">
+          {label}
+        </span>
+        <div className="h-px flex-1 bg-slate-200" />
+      </div>
+    );
+  }
+  return (
+    <div role="separator" className={cn('h-px w-full bg-slate-200', className)} {...props} />
+  );
+}

package/src/Drawer.tsx

@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { cn } from './cn';
+
+export interface DrawerProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  side?: 'right' | 'left';
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+}
+
+export function Drawer({
+  open,
+  onClose,
+  title,
+  side = 'right',
+  children,
+  footer,
+  className,
+}: DrawerProps) {
+  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">
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} aria-hidden="true" />
+      <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
+        )}
+      >
+        {title && (
+          <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4">
+            <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>
+        )}
+        <div className="flex-1 overflow-y-auto px-6 py-4">{children}</div>
+        {footer && <div className="border-t border-slate-100 px-6 py-4">{footer}</div>}
+      </section>
+    </div>,
+    document.body
+  );
+}

package/src/EmptyState.tsx

@@ -0,0 +1,37 @@
+import { Inbox } from 'lucide-react';
+import { cn } from './cn';
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export function EmptyState({
+  title,
+  description,
+  icon,
+  action,
+  className,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <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}
+    >
+      <div className="mb-3 rounded-full bg-lime-50 p-3 text-lime-600">
+        {icon ?? <Inbox aria-hidden="true" className="h-8 w-8" />}
+      </div>
+      <h3 className="text-base font-bold text-slate-900">{title}</h3>
+      {description && (
+        <p className="mt-1 max-w-sm text-sm text-slate-500">{description}</p>
+      )}
+      {action && <div className="mt-5">{action}</div>}
+    </div>
+  );
+}

package/src/Input.tsx

@@ -9,17 +9,17 @@ export function Input({ label, error, className, id, ...props }: InputProps) {
   return (
     <div className="w-full">
       {label && (
-        <label htmlFor={id} className="mb-1 block text-sm font-medium text-neutral-700">
+        <label htmlFor={id} className="mb-1 block text-sm font-medium text-slate-700">
           {label}
         </label>
       )}
       <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',
+          '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-500 focus:border-red-500 focus:ring-red-500/30'
-            : 'border-neutral-300 focus:border-primary-600 focus:ring-primary-500/30',
+            ? '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}

package/src/Link.tsx

@@ -0,0 +1,22 @@
+import { ExternalLink } from 'lucide-react';
+import { cn } from './cn';
+
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  external?: boolean;
+}
+
+export function Link({ external = false, className, children, ...props }: LinkProps) {
+  return (
+    <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}
+      {external && <ExternalLink aria-hidden="true" className="h-3.5 w-3.5" />}
+    </a>
+  );
+}

package/src/Menu.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from 'react';
+import { cn } from './cn';
+
+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 function Menu({ trigger, items, align = 'end', className }: MenuProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      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 (
+    <div ref={ref} className={cn('relative inline-flex', className)}>
+      <div onClick={() => setOpen(v => !v)}>{trigger}</div>
+      {open && (
+        <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'
+          )}
+        >
+          {items.map((item, i) => (
+            <button
+              key={`${item.label}-${i}`}
+              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'
+              )}
+            >
+              {item.icon}
+              <span className="flex-1">{item.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/Modal.tsx

@@ -43,11 +43,11 @@ export function Modal({
         aria-modal="true"
       >
         {title && (
-          <div className="flex items-center justify-between border-b border-neutral-100 px-6 py-4">
-            <h2 className="text-lg font-bold text-neutral-900">{title}</h2>
+          <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4">
+            <h2 className="text-lg font-bold text-slate-900">{title}</h2>
             <button
               onClick={onClose}
-              className="rounded-lg p-1 text-neutral-400 hover:bg-neutral-100"
+              className="rounded-lg p-1 text-slate-400 hover:bg-slate-100"
               aria-label="Close"
             >
               <X className="h-5 w-5" />