@aereamart/design-system 0.3.6 → 0.4.2

package/src/Card.tsx

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

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

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

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

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

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

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

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

@@ -1,30 +0,0 @@
-import { cn } from './cn';
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  error?: string;
-}
-
-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-slate-700">
-          {label}
-        </label>
-      )}
-      <input
-        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/Link.tsx

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

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