@aereamart/design-system 0.2.0 → 0.3.0

package/src/Textarea.tsx

@@ -9,17 +9,17 @@ export function Textarea({ label, error, className, id, ...props }: TextareaProp
   return (
     <div className="w-full">
       {label && (
-        <label htmlFor={id} className="mb-1 block text-sm font-medium text-neutral-700">
+        <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-neutral-900 placeholder:text-neutral-400 focus:outline-none focus:ring-2',
+          '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-500 focus:border-red-500 focus:ring-red-500/30'
-            : 'border-neutral-300 focus:border-primary-600 focus:ring-primary-500/30',
+            ? '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}

package/src/Tooltip.tsx

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

package/src/TreeView.tsx

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

package/src/index.ts

@@ -1,8 +1,38 @@
-export { cn } from './cn';
-export { Badge, type BadgeProps } from './Badge';
-export { Button, type ButtonProps } from './Button';
-export { Input, type InputProps } from './Input';
-export { Select, type SelectProps } from './Select';
-export { Textarea, type TextareaProps } from './Textarea';
-export { Modal, type ModalProps } from './Modal';
-export { Spinner } from './Spinner';
+export { cn } from './cn';
+export { Accordion, type AccordionProps, type AccordionItem } from './Accordion';
+export { AlertBanner, type AlertBannerProps } from './AlertBanner';
+export { AppBar, type AppBarProps } from './AppBar';
+export { Avatar, type AvatarProps } from './Avatar';
+export { Badge, type BadgeProps } from './Badge';
+export { BottomSheet, type BottomSheetProps } from './BottomSheet';
+export { Breadcrumb, type BreadcrumbProps, type Crumb } from './Breadcrumb';
+export { Button, type ButtonProps } from './Button';
+export { Card, type CardProps } from './Card';
+export { Checkbox, type CheckboxProps } from './Checkbox';
+export { Chip, type ChipProps } from './Chip';
+export { DataTable, type DataTableProps, type Column } from './DataTable';
+export { DatePicker, type DatePickerProps } from './DatePicker';
+export { Divider, type DividerProps } from './Divider';
+export { Drawer, type DrawerProps } from './Drawer';
+export { EmptyState, type EmptyStateProps } from './EmptyState';
+export { Input, type InputProps } from './Input';
+export { Link, type LinkProps } from './Link';
+export { Menu, type MenuProps, type MenuItem } from './Menu';
+export { Modal, type ModalProps } from './Modal';
+export { NavigationBar, type NavigationBarProps, type NavItem } from './NavigationBar';
+export { Pagination, type PaginationProps } from './Pagination';
+export { Popover, type PopoverProps } from './Popover';
+export { Progress, type ProgressProps } from './Progress';
+export { Radio, RadioGroup, type RadioProps, type RadioGroupProps } from './Radio';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedOption } from './SegmentedControl';
+export { Select, type SelectProps } from './Select';
+export { Sidebar, type SidebarProps, type SidebarItem } from './Sidebar';
+export { Slider, type SliderProps } from './Slider';
+export { Snackbar, type SnackbarProps } from './Snackbar';
+export { Spinner } from './Spinner';
+export { Switch, type SwitchProps } from './Switch';
+export { Tabs, type TabsProps, type Tab } from './Tabs';
+export { Tag, type TagProps } from './Tag';
+export { Textarea, type TextareaProps } from './Textarea';
+export { Tooltip, type TooltipProps } from './Tooltip';
+export { TreeView, type TreeViewProps, type TreeNode } from './TreeView';