@aereamart/design-system 0.2.0 → 0.3.1

package/src/Avatar.tsx

@@ -0,0 +1,42 @@
+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 +1,27 @@
-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-500 text-white',
-  primary: 'bg-primary-600 text-white',
-  accent: 'bg-accent-500 text-white',
-  neutral: 'bg-neutral-200 text-neutral-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}
-    />
-  );
-}
+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

@@ -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

@@ -1,54 +1,54 @@
-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-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500/40',
-  secondary:
-    'border border-neutral-300 bg-white text-neutral-700 hover:bg-neutral-50 focus-visible:ring-neutral-400/40',
-  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',
-};
-
-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>
-  );
-}
+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>
+  );
+}

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
+  );
+}