@aereamart/design-system 0.3.0 → 0.3.2

package/src/Card.tsx

@@ -1,39 +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>
-  );
+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/DataTable.tsx

@@ -1,64 +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>
-  );
+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 +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>
-  );
+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/Drawer.tsx

@@ -1,71 +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
-  );
+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 +1,37 @@
-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>
-  );
+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 +1,30 @@
-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>
-  );
-}
+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>
+  );
+}