@aereamart/design-system 0.3.0 → 0.3.2

package/package.json

@@ -1,43 +1,43 @@
-{
-  "name": "@aereamart/design-system",
-  "version": "0.3.0",
-  "description": "Aereamart shared React UI primitives (Badge, Button, Input, Select, Textarea, Modal, Spinner)",
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
-    "lint": "oxlint src"
-  },
-  "peerDependencies": {
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
-  },
-  "dependencies": {
-    "lucide-react": "^1.30.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "oxlint": "^1.75.0",
-    "typescript": "~6.0.2"
-  },
-  "keywords": [
-    "ui",
-    "components",
-    "aereamart"
-  ],
-  "license": "MIT"
-}
+{
+  "name": "@aereamart/design-system",
+  "version": "0.3.2",
+  "description": "Aereamart shared React UI primitives (Badge, Button, Input, Select, Textarea, Modal, Spinner)",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "oxlint src"
+  },
+  "peerDependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "dependencies": {
+    "lucide-react": "^1.30.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "oxlint": "^1.75.0",
+    "typescript": "~6.0.2"
+  },
+  "keywords": [
+    "ui",
+    "components",
+    "aereamart"
+  ],
+  "license": "MIT"
+}

package/src/Accordion.tsx

@@ -1,58 +1,58 @@
-import { useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-import { cn } from './cn';
-
-export interface AccordionItem {
-  title: string;
-  content: React.ReactNode;
-}
-
-export interface AccordionProps {
-  items: AccordionItem[];
-  defaultOpen?: number | null;
-  className?: string;
-}
-
-export function Accordion({ items, defaultOpen = null, className }: AccordionProps) {
-  const [open, setOpen] = useState<number | null>(defaultOpen);
-
-  return (
-    <div
-      className={cn(
-        'divide-y divide-slate-200 overflow-hidden rounded-xl border border-slate-200 bg-white',
-        className
-      )}
-    >
-      {items.map((item, i) => {
-        const isOpen = open === i;
-        const uid = `accordion-${i}`;
-        return (
-          <div key={uid}>
-            <button
-              type="button"
-              aria-expanded={isOpen}
-              aria-controls={`${uid}-panel`}
-              onClick={() => setOpen(isOpen ? null : i)}
-              className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40"
-            >
-              {item.title}
-              <ChevronDown
-                aria-hidden="true"
-                className={cn('h-4 w-4 shrink-0 text-slate-400 transition-transform', isOpen && 'rotate-180')}
-              />
-            </button>
-            {isOpen && (
-              <div
-                id={`${uid}-panel`}
-                role="region"
-                className="border-t border-slate-100 px-5 py-4 text-sm leading-relaxed text-slate-600"
-              >
-                {item.content}
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
+import { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from './cn';
+
+export interface AccordionItem {
+  title: string;
+  content: React.ReactNode;
+}
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  defaultOpen?: number | null;
+  className?: string;
+}
+
+export function Accordion({ items, defaultOpen = null, className }: AccordionProps) {
+  const [open, setOpen] = useState<number | null>(defaultOpen);
+
+  return (
+    <div
+      className={cn(
+        'divide-y divide-slate-200 overflow-hidden rounded-xl border border-slate-200 bg-white',
+        className
+      )}
+    >
+      {items.map((item, i) => {
+        const isOpen = open === i;
+        const uid = `accordion-${i}`;
+        return (
+          <div key={uid}>
+            <button
+              type="button"
+              aria-expanded={isOpen}
+              aria-controls={`${uid}-panel`}
+              onClick={() => setOpen(isOpen ? null : i)}
+              className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40"
+            >
+              {item.title}
+              <ChevronDown
+                aria-hidden="true"
+                className={cn('h-4 w-4 shrink-0 text-slate-400 transition-transform', isOpen && 'rotate-180')}
+              />
+            </button>
+            {isOpen && (
+              <div
+                id={`${uid}-panel`}
+                role="region"
+                className="border-t border-slate-100 px-5 py-4 text-sm leading-relaxed text-slate-600"
+              >
+                {item.content}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
 }

package/src/AlertBanner.tsx

@@ -1,62 +1,62 @@
-import { Info, AlertTriangle, CheckCircle2, XCircle, X } from 'lucide-react';
-import { useState } from 'react';
-import { cn } from './cn';
-
-type AlertTone = 'info' | 'primary' | 'accent' | 'danger' | 'neutral';
-
-export interface AlertBannerProps extends React.HTMLAttributes<HTMLDivElement> {
-  tone?: AlertTone;
-  title?: string;
-  dismissible?: boolean;
-  onDismiss?: () => void;
-}
-
-const toneRecord: Record<AlertTone, { wrap: string; icon: React.ReactNode; label: string }> = {
-  info: { wrap: 'border-sky-300 bg-sky-50 text-sky-900', icon: <Info className="h-4 w-4" />, label: 'Info' },
-  primary: { wrap: 'border-lime-300 bg-lime-50 text-lime-900', icon: <CheckCircle2 className="h-4 w-4" />, label: 'Success' },
-  accent: { wrap: 'border-purple-300 bg-purple-50 text-purple-900', icon: <AlertTriangle className="h-4 w-4" />, label: 'Warning' },
-  danger: { wrap: 'border-red-300 bg-red-50 text-red-900', icon: <XCircle className="h-4 w-4" />, label: 'Error' },
-  neutral: { wrap: 'border-slate-300 bg-slate-50 text-slate-800', icon: <Info className="h-4 w-4" />, label: 'Notice' },
-};
-
-export function AlertBanner({
-  tone = 'primary',
-  title,
-  dismissible = false,
-  onDismiss,
-  className,
-  children,
-  ...props
-}: AlertBannerProps) {
-  const [hidden, setHidden] = useState(false);
-  if (hidden) return null;
-  const t = toneRecord[tone];
-  return (
-    <div
-      role="alert"
-      className={cn('flex items-start gap-3 rounded-lg border px-4 py-3 text-sm', t.wrap, className)}
-      {...props}
-    >
-      <span className="mt-0.5 shrink-0" aria-label={t.label}>
-        {t.icon}
-      </span>
-      <div className="min-w-0 flex-1">
-        {title && <p className="font-bold">{title}</p>}
-        <div className={cn(title && 'mt-0.5 text-sm opacity-90')}>{children}</div>
-      </div>
-      {dismissible && (
-        <button
-          type="button"
-          aria-label="Dismiss"
-          onClick={() => {
-            setHidden(true);
-            onDismiss?.();
-          }}
-          className="-mr-1 -mt-1 shrink-0 rounded-full p-1 hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current"
-        >
-          <X aria-hidden="true" className="h-4 w-4" />
-        </button>
-      )}
-    </div>
-  );
+import { Info, AlertTriangle, CheckCircle2, XCircle, X } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from './cn';
+
+type AlertTone = 'info' | 'primary' | 'accent' | 'danger' | 'neutral';
+
+export interface AlertBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+  tone?: AlertTone;
+  title?: string;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+}
+
+const toneRecord: Record<AlertTone, { wrap: string; icon: React.ReactNode; label: string }> = {
+  info: { wrap: 'border-sky-300 bg-sky-50 text-sky-900', icon: <Info className="h-4 w-4" />, label: 'Info' },
+  primary: { wrap: 'border-lime-300 bg-lime-50 text-lime-900', icon: <CheckCircle2 className="h-4 w-4" />, label: 'Success' },
+  accent: { wrap: 'border-purple-300 bg-purple-50 text-purple-900', icon: <AlertTriangle className="h-4 w-4" />, label: 'Warning' },
+  danger: { wrap: 'border-red-300 bg-red-50 text-red-900', icon: <XCircle className="h-4 w-4" />, label: 'Error' },
+  neutral: { wrap: 'border-slate-300 bg-slate-50 text-slate-800', icon: <Info className="h-4 w-4" />, label: 'Notice' },
+};
+
+export function AlertBanner({
+  tone = 'primary',
+  title,
+  dismissible = false,
+  onDismiss,
+  className,
+  children,
+  ...props
+}: AlertBannerProps) {
+  const [hidden, setHidden] = useState(false);
+  if (hidden) return null;
+  const t = toneRecord[tone];
+  return (
+    <div
+      role="alert"
+      className={cn('flex items-start gap-3 rounded-lg border px-4 py-3 text-sm', t.wrap, className)}
+      {...props}
+    >
+      <span className="mt-0.5 shrink-0" aria-label={t.label}>
+        {t.icon}
+      </span>
+      <div className="min-w-0 flex-1">
+        {title && <p className="font-bold">{title}</p>}
+        <div className={cn(title && 'mt-0.5 text-sm opacity-90')}>{children}</div>
+      </div>
+      {dismissible && (
+        <button
+          type="button"
+          aria-label="Dismiss"
+          onClick={() => {
+            setHidden(true);
+            onDismiss?.();
+          }}
+          className="-mr-1 -mt-1 shrink-0 rounded-full p-1 hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current"
+        >
+          <X aria-hidden="true" className="h-4 w-4" />
+        </button>
+      )}
+    </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-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}
-    />
-  );
-}
+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

@@ -1,60 +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
-  );
+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/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-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>
-  );
-}
+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>
+  );
+}