@aereamart/design-system 0.3.6 → 0.4.2

package/src/Pagination.tsx

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

package/src/Progress.tsx

@@ -1,53 +0,0 @@
-import { cn } from './cn';
-
-export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
-  value: number;
-  max?: number;
-  size?: 'sm' | 'md';
-  tone?: 'primary' | 'accent' | 'danger';
-  showLabel?: boolean;
-}
-
-const track: Record<NonNullable<ProgressProps['size']>, string> = {
-  sm: 'h-1.5',
-  md: 'h-2.5',
-};
-
-const fill: Record<NonNullable<ProgressProps['tone']>, string> = {
-  primary: 'bg-lime-600',
-  accent: 'bg-purple-600',
-  danger: 'bg-red-600',
-};
-
-export function Progress({
-  value,
-  max = 100,
-  size = 'md',
-  tone = 'primary',
-  showLabel = false,
-  className,
-  ...props
-}: ProgressProps) {
-  const pct = max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0;
-  return (
-    <div className={cn('flex items-center gap-3', className)} {...props}>
-      <div
-        role="progressbar"
-        aria-valuenow={value}
-        aria-valuemin={0}
-        aria-valuemax={max}
-        className={cn('w-full overflow-hidden rounded-full bg-slate-200', track[size])}
-      >
-        <div
-          className={cn('h-full rounded-full transition-all duration-300', fill[tone])}
-          style={{ width: `${pct}%` }}
-        />
-      </div>
-      {showLabel && (
-        <span className="w-10 shrink-0 text-right text-xs font-semibold tabular-nums text-slate-600">
-          {Math.round(pct)}%
-        </span>
-      )}
-    </div>
-  );
-}

package/src/Radio.tsx

@@ -1,49 +0,0 @@
-import { cn } from './cn';
-
-export interface RadioProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
-  label?: string;
-}
-
-export function Radio({ label, id, className, ...props }: RadioProps) {
-  return (
-    <label
-      htmlFor={id}
-      className={cn('inline-flex cursor-pointer items-center gap-2.5 text-sm', className)}
-    >
-      <input
-        id={id}
-        type="radio"
-        className="h-4 w-4 shrink-0 cursor-pointer accent-lime-600 focus:outline-none focus:ring-2 focus:ring-lime-500/40"
-        {...props}
-      />
-      {label && <span className="font-medium text-slate-700">{label}</span>}
-    </label>
-  );
-}
-
-export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  name: string;
-  value?: string | number;
-  onChange?: (value: string) => void;
-  options: { value: string; label: string; disabled?: boolean }[];
-}
-
-export function RadioGroup({ name, value, onChange, options, className, ...props }: RadioGroupProps) {
-  return (
-    <div className={cn('flex flex-wrap gap-x-5 gap-y-2.5', className)} {...props}>
-      {options.map(opt => (
-        <Radio
-          key={opt.value}
-          id={`${name}-${opt.value}`}
-          name={name}
-          value={opt.value}
-          label={opt.label}
-          checked={value === opt.value}
-          disabled={opt.disabled}
-          onChange={e => onChange?.(e.target.value)}
-        />
-      ))}
-    </div>
-  );
-}

package/src/SegmentedControl.tsx

@@ -1,63 +0,0 @@
-import { useState } from 'react';
-import { cn } from './cn';
-
-export interface SegmentedOption<T extends string | number> {
-  value: T;
-  label: string;
-  disabled?: boolean;
-}
-
-export interface SegmentedControlProps<T extends string | number> {
-  options: SegmentedOption<T>[];
-  value?: T;
-  defaultValue?: T;
-  onChange?: (value: T) => void;
-  className?: string;
-}
-
-export function SegmentedControl<T extends string | number>({
-  options,
-  value,
-  defaultValue,
-  onChange,
-  className,
-}: SegmentedControlProps<T>) {
-  const isControlled = value !== undefined;
-  const [inner, setInner] = useState<T | undefined>(defaultValue);
-  const active = isControlled ? value : inner;
-
-  return (
-    <div
-      role="tablist"
-      className={cn(
-        'inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-white p-1',
-        className
-      )}
-    >
-      {options.map(opt => {
-        const selected = active === opt.value;
-        return (
-          <button
-            key={String(opt.value)}
-            type="button"
-            role="tab"
-            aria-selected={selected}
-            disabled={opt.disabled}
-            onClick={() => {
-              if (!isControlled) setInner(opt.value);
-              onChange?.(opt.value);
-            }}
-            className={cn(
-              'rounded-md px-4 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40 disabled:opacity-50',
-              selected
-                ? 'bg-lime-600 text-white'
-                : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
-            )}
-          >
-            {opt.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}

package/src/Select.tsx

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

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

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

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

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

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

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