@aereamart/design-system 0.3.0 → 0.3.1

package/src/Textarea.tsx

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

package/src/Tooltip.tsx

@@ -1,25 +1,25 @@
-import { cn } from './cn';
-
-export interface TooltipProps {
-  content: React.ReactNode;
-  side?: 'top' | 'bottom';
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function Tooltip({ content, side = 'top', children, className }: TooltipProps) {
-  return (
-    <span className={cn('group relative inline-flex', className)}>
-      {children}
-      <span
-        role="tooltip"
-        className={cn(
-          'pointer-events-none absolute left-1/2 z-50 w-max max-w-xs -translate-x-1/2 rounded-lg bg-slate-900 px-3 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100',
-          side === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'
-        )}
-      >
-        {content}
-      </span>
-    </span>
-  );
+import { cn } from './cn';
+
+export interface TooltipProps {
+  content: React.ReactNode;
+  side?: 'top' | 'bottom';
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Tooltip({ content, side = 'top', children, className }: TooltipProps) {
+  return (
+    <span className={cn('group relative inline-flex', className)}>
+      {children}
+      <span
+        role="tooltip"
+        className={cn(
+          'pointer-events-none absolute left-1/2 z-50 w-max max-w-xs -translate-x-1/2 rounded-lg bg-slate-900 px-3 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100',
+          side === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'
+        )}
+      >
+        {content}
+      </span>
+    </span>
+  );
 }

package/src/TreeView.tsx

@@ -1,105 +1,105 @@
-import { useId, useState } from 'react';
-import { ChevronRight } from 'lucide-react';
-import { cn } from './cn';
-
-export interface TreeNode {
-  id: string;
-  label: string;
-  children?: TreeNode[];
-}
-
-export interface TreeViewProps {
-  nodes: TreeNode[];
-  defaultExpanded?: string[];
-  defaultAllExpanded?: boolean;
-  className?: string;
-}
-
-function Node({
-  node,
-  depth,
-  expanded,
-  onToggle,
-}: {
-  node: TreeNode;
-  depth: number;
-  expanded: Set<string>;
-  onToggle: (id: string) => void;
-}) {
-  const hasChildren = !!node.children?.length;
-  const isOpen = expanded.has(node.id);
-
-  return (
-    <li>
-      <div className={cn('flex items-center gap-1.5 rounded-lg py-1.5 pr-2')}>
-        <button
-          type="button"
-          aria-expanded={hasChildren ? isOpen : undefined}
-          onClick={() => hasChildren && onToggle(node.id)}
-          className={cn(
-            'inline-flex w-full items-center gap-1.5 rounded-lg py-1.5 pr-2 text-left text-sm font-medium transition-colors',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40',
-            'hover:bg-slate-100'
-          )}
-          style={{ paddingLeft: `${8 + depth * 24}px` }}
-        >
-          {hasChildren ? (
-            <ChevronRight
-              className={cn('h-4 w-4 shrink-0 text-slate-400 transition-transform', isOpen && 'rotate-90')}
-            />
-          ) : (
-            <span className="ml-4 h-4 w-4 shrink-0" aria-hidden="true" />
-          )}
-          <span className={cn(isOpen && 'font-semibold text-slate-900')}>{node.label}</span>
-        </button>
-      </div>
-      {hasChildren && isOpen && (
-        <ul role="group">
-          {node.children!.map(child => (
-            <Node key={child.id} node={child} depth={depth + 1} expanded={expanded} onToggle={onToggle} />
-          ))}
-        </ul>
-      )}
-    </li>
-  );
-}
-
-export function TreeView({ nodes, defaultExpanded = [], defaultAllExpanded = false, className }: TreeViewProps) {
-  const [expanded, setExpanded] = useState<Set<string>>(() => {
-    if (defaultAllExpanded) {
-      const all = new Set<string>();
-      const walk = (list: TreeNode[]) => list.forEach(n => {
-        all.add(n.id);
-        if (n.children) walk(n.children);
-      });
-      walk(nodes);
-      return all;
-    }
-    return new Set(defaultExpanded);
-  });
-  const labelId = useId();
-
-  const toggle = (id: string) =>
-    setExpanded(prev => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-
-  return (
-    <ul
-      role="tree"
-      aria-label="Tree"
-      aria-labelledby={labelId}
-      className={cn('space-y-0.5', className)}
-    >
-      <span id={labelId} className="sr-only">
-        Tree view
-      </span>
-      {nodes.map(node => (
-        <Node key={node.id} node={node} depth={0} expanded={expanded} onToggle={toggle} />
-      ))}
-    </ul>
-  );
+import { useId, useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from './cn';
+
+export interface TreeNode {
+  id: string;
+  label: string;
+  children?: TreeNode[];
+}
+
+export interface TreeViewProps {
+  nodes: TreeNode[];
+  defaultExpanded?: string[];
+  defaultAllExpanded?: boolean;
+  className?: string;
+}
+
+function Node({
+  node,
+  depth,
+  expanded,
+  onToggle,
+}: {
+  node: TreeNode;
+  depth: number;
+  expanded: Set<string>;
+  onToggle: (id: string) => void;
+}) {
+  const hasChildren = !!node.children?.length;
+  const isOpen = expanded.has(node.id);
+
+  return (
+    <li>
+      <div className={cn('flex items-center gap-1.5 rounded-lg py-1.5 pr-2')}>
+        <button
+          type="button"
+          aria-expanded={hasChildren ? isOpen : undefined}
+          onClick={() => hasChildren && onToggle(node.id)}
+          className={cn(
+            'inline-flex w-full items-center gap-1.5 rounded-lg py-1.5 pr-2 text-left text-sm font-medium transition-colors',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-500/40',
+            'hover:bg-slate-100'
+          )}
+          style={{ paddingLeft: `${8 + depth * 24}px` }}
+        >
+          {hasChildren ? (
+            <ChevronRight
+              className={cn('h-4 w-4 shrink-0 text-slate-400 transition-transform', isOpen && 'rotate-90')}
+            />
+          ) : (
+            <span className="ml-4 h-4 w-4 shrink-0" aria-hidden="true" />
+          )}
+          <span className={cn(isOpen && 'font-semibold text-slate-900')}>{node.label}</span>
+        </button>
+      </div>
+      {hasChildren && isOpen && (
+        <ul role="group">
+          {node.children!.map(child => (
+            <Node key={child.id} node={child} depth={depth + 1} expanded={expanded} onToggle={onToggle} />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+export function TreeView({ nodes, defaultExpanded = [], defaultAllExpanded = false, className }: TreeViewProps) {
+  const [expanded, setExpanded] = useState<Set<string>>(() => {
+    if (defaultAllExpanded) {
+      const all = new Set<string>();
+      const walk = (list: TreeNode[]) => list.forEach(n => {
+        all.add(n.id);
+        if (n.children) walk(n.children);
+      });
+      walk(nodes);
+      return all;
+    }
+    return new Set(defaultExpanded);
+  });
+  const labelId = useId();
+
+  const toggle = (id: string) =>
+    setExpanded(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+
+  return (
+    <ul
+      role="tree"
+      aria-label="Tree"
+      aria-labelledby={labelId}
+      className={cn('space-y-0.5', className)}
+    >
+      <span id={labelId} className="sr-only">
+        Tree view
+      </span>
+      {nodes.map(node => (
+        <Node key={node.id} node={node} depth={0} expanded={expanded} onToggle={toggle} />
+      ))}
+    </ul>
+  );
 }

package/src/cn.ts

@@ -1,3 +1,3 @@
-export function cn(...parts: Array<string | false | null | undefined>): string {
-  return parts.filter(Boolean).join(' ');
+export function cn(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ');
 }