@aereamart/design-system 0.3.0 → 0.3.2

package/src/Menu.tsx

@@ -1,73 +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>
-  );
+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

@@ -1,62 +1,62 @@
-import { useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { X } from 'lucide-react';
-import { cn } from './cn';
-
-export interface ModalProps {
-  open: boolean;
-  onClose: () => void;
-  title?: string;
-  children?: React.ReactNode;
-  className?: string;
-  maxWidth?: string;
-}
-
-export function Modal({
-  open,
-  onClose,
-  title,
-  children,
-  className,
-  maxWidth = 'max-w-md',
-}: ModalProps) {
-  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-center justify-center bg-black/50 p-4">
-      <div
-        className={cn('w-full rounded-2xl bg-white shadow-xl', maxWidth, className)}
-        role="dialog"
-        aria-modal="true"
-      >
-        {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>
-        )}
-        {children}
-      </div>
-    </div>,
-    document.body
-  );
-}
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { cn } from './cn';
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children?: React.ReactNode;
+  className?: string;
+  maxWidth?: string;
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  children,
+  className,
+  maxWidth = 'max-w-md',
+}: ModalProps) {
+  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-center justify-center bg-black/50 p-4">
+      <div
+        className={cn('w-full rounded-2xl bg-white shadow-xl', maxWidth, className)}
+        role="dialog"
+        aria-modal="true"
+      >
+        {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>
+        )}
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+}

package/src/NavigationBar.tsx

@@ -1,68 +1,68 @@
-import { useState } from 'react';
-import { cn } from './cn';
-
-export interface NavItem {
-  value: string;
-  label: string;
-  disabled?: boolean;
-}
-
-export interface NavigationBarProps {
-  items: NavItem[];
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  variant?: 'pills' | 'links';
-  className?: string;
-}
-
-export function NavigationBar({
-  items,
-  value,
-  defaultValue,
-  onChange,
-  variant = 'links',
-  className,
-}: NavigationBarProps) {
-  const isControlled = value !== undefined;
-  const [inner, setInner] = useState<string | undefined>(defaultValue);
-  const active = isControlled ? value : inner;
-
-  return (
-    <nav aria-label="Primary" className={cn('flex items-center gap-1', className)}>
-      {items.map(item => {
-        const selected = active === item.value;
-        return (
-          <button
-            key={item.value}
-            type="button"
-            aria-current={selected ? 'page' : undefined}
-            disabled={item.disabled}
-            onClick={() => {
-              if (!isControlled) setInner(item.value);
-              onChange?.(item.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 === 'pills'
-                ? cn(
-                    'rounded-lg',
-                    selected
-                      ? 'bg-lime-600 text-white'
-                      : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
-                  )
-                : cn(
-                    'border-b-2',
-                    selected
-                      ? 'border-lime-600 text-lime-700'
-                      : 'border-transparent text-slate-500 hover:text-slate-900'
-                  )
-            )}
-          >
-            {item.label}
-          </button>
-        );
-      })}
-    </nav>
-  );
+import { useState } from 'react';
+import { cn } from './cn';
+
+export interface NavItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface NavigationBarProps {
+  items: NavItem[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  variant?: 'pills' | 'links';
+  className?: string;
+}
+
+export function NavigationBar({
+  items,
+  value,
+  defaultValue,
+  onChange,
+  variant = 'links',
+  className,
+}: NavigationBarProps) {
+  const isControlled = value !== undefined;
+  const [inner, setInner] = useState<string | undefined>(defaultValue);
+  const active = isControlled ? value : inner;
+
+  return (
+    <nav aria-label="Primary" className={cn('flex items-center gap-1', className)}>
+      {items.map(item => {
+        const selected = active === item.value;
+        return (
+          <button
+            key={item.value}
+            type="button"
+            aria-current={selected ? 'page' : undefined}
+            disabled={item.disabled}
+            onClick={() => {
+              if (!isControlled) setInner(item.value);
+              onChange?.(item.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 === 'pills'
+                ? cn(
+                    'rounded-lg',
+                    selected
+                      ? 'bg-lime-600 text-white'
+                      : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
+                  )
+                : cn(
+                    'border-b-2',
+                    selected
+                      ? 'border-lime-600 text-lime-700'
+                      : 'border-transparent text-slate-500 hover:text-slate-900'
+                  )
+            )}
+          >
+            {item.label}
+          </button>
+        );
+      })}
+    </nav>
+  );
 }

package/src/Pagination.tsx

@@ -1,69 +1,69 @@
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { cn } from './cn';
-import { Button } from './Button';
-
-export interface PaginationProps {
-  page: number;
-  totalPages: number;
-  onChange: (page: number) => void;
-  className?: string;
-}
-
-function pageList(page: number, total: number): (number | '…')[] {
-  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
-  const pages: (number | '…')[] = [1];
-  const start = Math.max(2, page - 1);
-  const end = Math.min(total - 1, page + 1);
-  if (start > 2) pages.push('…');
-  for (let i = start; i <= end; i++) pages.push(i);
-  if (end < total - 1) pages.push('…');
-  pages.push(total);
-  return pages;
-}
-
-export function Pagination({ page, totalPages, onChange, className }: PaginationProps) {
-  return (
-    <nav aria-label="Pagination" className={cn('flex items-center gap-1', className)}>
-      <Button
-        variant="ghost"
-        size="sm"
-        disabled={page <= 1}
-        onClick={() => onChange(page - 1)}
-        aria-label="Previous page"
-      >
-        <ChevronLeft className="h-4 w-4" />
-      </Button>
-      {pageList(page, totalPages).map((p, i) =>
-        p === '…' ? (
-          <span key={`e-${i}`} className="px-1.5 text-sm text-slate-400">
-            …
-          </span>
-        ) : (
-          <button
-            key={p}
-            type="button"
-            onClick={() => onChange(p)}
-            aria-current={p === page ? 'page' : undefined}
-            className={cn(
-              'h-8 min-w-8 rounded-lg px-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40',
-              p === page
-                ? 'bg-lime-600 text-white'
-                : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
-            )}
-          >
-            {p}
-          </button>
-        )
-      )}
-      <Button
-        variant="ghost"
-        size="sm"
-        disabled={page >= totalPages}
-        onClick={() => onChange(page + 1)}
-        aria-label="Next page"
-      >
-        <ChevronRight className="h-4 w-4" />
-      </Button>
-    </nav>
-  );
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from './cn';
+import { Button } from './Button';
+
+export interface PaginationProps {
+  page: number;
+  totalPages: number;
+  onChange: (page: number) => void;
+  className?: string;
+}
+
+function pageList(page: number, total: number): (number | '…')[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages: (number | '…')[] = [1];
+  const start = Math.max(2, page - 1);
+  const end = Math.min(total - 1, page + 1);
+  if (start > 2) pages.push('…');
+  for (let i = start; i <= end; i++) pages.push(i);
+  if (end < total - 1) pages.push('…');
+  pages.push(total);
+  return pages;
+}
+
+export function Pagination({ page, totalPages, onChange, className }: PaginationProps) {
+  return (
+    <nav aria-label="Pagination" className={cn('flex items-center gap-1', className)}>
+      <Button
+        variant="ghost"
+        size="sm"
+        disabled={page <= 1}
+        onClick={() => onChange(page - 1)}
+        aria-label="Previous page"
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+      {pageList(page, totalPages).map((p, i) =>
+        p === '…' ? (
+          <span key={`e-${i}`} className="px-1.5 text-sm text-slate-400">
+            …
+          </span>
+        ) : (
+          <button
+            key={p}
+            type="button"
+            onClick={() => onChange(p)}
+            aria-current={p === page ? 'page' : undefined}
+            className={cn(
+              'h-8 min-w-8 rounded-lg px-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40',
+              p === page
+                ? 'bg-lime-600 text-white'
+                : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
+            )}
+          >
+            {p}
+          </button>
+        )
+      )}
+      <Button
+        variant="ghost"
+        size="sm"
+        disabled={page >= totalPages}
+        onClick={() => onChange(page + 1)}
+        aria-label="Next page"
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+    </nav>
+  );
 }

package/src/Popover.tsx

@@ -1,34 +1,34 @@
-import { cn } from './cn';
-
-export interface PopoverProps {
-  trigger: React.ReactNode;
-  content: React.ReactNode;
-  side?: 'top' | 'bottom' | 'left' | 'right';
-  className?: string;
-}
-
-export function Popover({ trigger, content, side = 'bottom', className }: PopoverProps) {
-  const isTop = side === 'top';
-  const isBottom = side === 'bottom';
-  const isLeft = side === 'left';
-  const isRight = side === 'right';
-
-  return (
-    <span className="group relative inline-flex">
-      {trigger}
-      <span
-        role="tooltip"
-        className={cn(
-          'pointer-events-none absolute z-50 w-64 rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700 opacity-0 shadow-lg transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100',
-          isBottom && 'left-1/2 top-full mt-2 -translate-x-1/2',
-          isTop && 'bottom-full left-1/2 mb-2 -translate-x-1/2',
-          isLeft && 'right-full top-1/2 mr-2 -translate-y-1/2',
-          isRight && 'left-full top-1/2 ml-2 -translate-y-1/2',
-          className
-        )}
-      >
-        {content}
-      </span>
-    </span>
-  );
+import { cn } from './cn';
+
+export interface PopoverProps {
+  trigger: React.ReactNode;
+  content: React.ReactNode;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  className?: string;
+}
+
+export function Popover({ trigger, content, side = 'bottom', className }: PopoverProps) {
+  const isTop = side === 'top';
+  const isBottom = side === 'bottom';
+  const isLeft = side === 'left';
+  const isRight = side === 'right';
+
+  return (
+    <span className="group relative inline-flex">
+      {trigger}
+      <span
+        role="tooltip"
+        className={cn(
+          'pointer-events-none absolute z-50 w-64 rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700 opacity-0 shadow-lg transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100',
+          isBottom && 'left-1/2 top-full mt-2 -translate-x-1/2',
+          isTop && 'bottom-full left-1/2 mb-2 -translate-x-1/2',
+          isLeft && 'right-full top-1/2 mr-2 -translate-y-1/2',
+          isRight && 'left-full top-1/2 ml-2 -translate-y-1/2',
+          className
+        )}
+      >
+        {content}
+      </span>
+    </span>
+  );
 }