Design_System.md

{
  "name": "aidesignsystem",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "lucide-react": "^0.577.0",
    "next": "16.1.6",
    "react": "19.2.3",
    "react-dom": "19.2.3",
    "recharts": "^3.8.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4"
  }
}

<Button
  variant="primary"       // "primary" | "secondary" | "tertiary" | "danger" | "ghost"
  size="md"               // "sm" | "md" | "lg"
  disabled={false}
  loading={false}         // shows Loader2 spinner, disables button
  icon={<IconComponent />}
  iconPosition="left"     // "left" | "right"
  fullWidth={false}
  type="button"           // "button" | "submit" | "reset"
  onClick={fn}
/>

<TextInput
  label="Email"
  placeholder="you@example.com"
  size="md"               // "sm" | "md" | "lg"
  disabled={false}
  required={false}
  helperText="We'll never share your email."
  errorText="Invalid email"   // triggers error state (red border + icon)
  successText="Looks good!"   // triggers success state (green border + icon)
  icon={<IconComponent />}    // left icon
  wrapperClassName=""
  // All native <input> props: value, onChange, type, name, etc.
/>

<Select
  label="Country"
  options={[                    // string[] or { value, label }[]
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
  ]}
  value="us"
  onChange={fn}
  placeholder="Select an option"
  size="md"                     // "sm" | "md" | "lg"
  disabled={false}
  required={false}
  errorText=""
  helperText=""
  wrapperClassName=""
/>

<Dropdown
  label="Role"
  options={[                    // string[] or { value, label, disabled? }[]
    { value: 'admin', label: 'Admin' },
    { value: 'user', label: 'User' },
  ]}
  value="admin"
  onChange={(value) => {}}
  placeholder="Select..."
  size="md"                     // "sm" | "md" | "lg"
  disabled={false}
  required={false}
  errorText=""
  helperText=""
  wrapperClassName=""
/>

<Checkbox
  label="Accept terms"
  checked={false}
  indeterminate={false}    // shows minus icon (mixed state)
  disabled={false}
  size="md"                // "sm" | "md" | "lg"
  onChange={fn}
/>

<Toggle
  label="Dark mode"
  checked={false}
  disabled={false}
  size="md"               // "sm" | "md" | "lg"
  onChange={fn}
/>

<Modal
  open={false}
  onClose={fn}
  title="Confirm Action"
  size="md"               // "sm" | "md" | "lg" | "xl" | "full"
  closeOnOverlay={true}
  closeOnEsc={true}
  showCloseButton={true}
  footer={<>
    <Button variant="tertiary" onClick={onClose}>Cancel</Button>
    <Button onClick={onConfirm}>Confirm</Button>
  </>}
>
  <p>Modal body content here.</p>
</Modal>

<Tag
  color="default"          // "default" | "brand" | "success" | "warning" | "danger" | "info"
  size="md"                // "sm" | "md" | "lg"
  dismissible={false}
  onDismiss={fn}
  icon={<IconComponent />}
  outline={false}          // outline variant: transparent bg with colored border
>
  Label
</Tag>

<Notification
  type="info"              // "success" | "warning" | "error" | "info"
  title="Heads up"
  dismissible={true}
  onDismiss={fn}
>
  Descriptive message body.
</Notification>

<Toast
  type="success"           // "success" | "warning" | "error" | "info"
  title="Saved"
  visible={true}
  duration={5000}          // ms, 0 = persistent
  onClose={fn}
>
  Optional body text.
</Toast>

<Banner
  type="warning"           // "success" | "warning" | "error" | "info"
  dismissible={true}
  onDismiss={fn}
>
  System maintenance scheduled for tonight.
</Banner>

<DataTable
  columns={[
    { key: 'name', header: 'Name', sortable: true, width: '200px' },
    { key: 'email', header: 'Email' },
    { key: 'status', header: 'Status', render: (val, row) => <Tag>{val}</Tag> },
  ]}
  data={[
    { id: 1, name: 'Alice', email: 'alice@co.com', status: 'Active' },
  ]}
  sortable={true}
  defaultSortColumn="name"
  defaultSortDirection="asc"    // "asc" | "desc"
  onSort={(column, direction) => {}}
  selectable={false}
  selectedRows={[]}             // array of row indices
  onSelectionChange={(indices) => {}}
  batchActions={<Button size="sm">Delete</Button>}  // shown when rows selected
  paginated={false}
  defaultPageSize={10}
  pageSizeOptions={[10, 25, 50, 100]}
  editableColumns={['name']}    // columns that support inline edit (double-click)
  onCellEdit={(rowIndex, columnKey, newValue) => {}}
  loading={false}
  emptyMessage="No data available"
  stickyHeader={false}
  compact={false}               // tighter row padding
  striped={false}               // alternating row backgrounds
/>

<Pagination
  currentPage={1}
  totalPages={10}
  totalItems={100}
  pageSize={10}
  onPageChange={(page) => {}}
  onPageSizeChange={(size) => {}}
  pageSizeOptions={[10, 25, 50, 100]}
  siblingCount={1}
  showPageSizeSelector={false}
  showItemCount={false}
/>

<Tabs
  tabs={[
    { id: 'tab1', label: 'General', content: <div>...</div> },
    { id: 'tab2', label: 'Settings', icon: <Settings size={16} />, badge: 3 },
    { id: 'tab3', label: 'Disabled', disabled: true },
  ]}
  defaultActiveTab="tab1"
  activeTab={controlled}        // optional controlled mode
  onChange={(tabId) => {}}
  variant="underline"           // "underline" | "pill"
  size="md"                     // "sm" | "md" | "lg"
  fullWidth={false}
/>

<Header
  logo={<img src="/logo.svg" alt="Logo" />}
  productName="Product"
  navItems={[
    { label: 'Dashboard', href: '/', active: true, icon: <Home size={16} /> },
    { label: 'Settings', href: '/settings', onClick: fn },
  ]}
  actions={<Button size="sm">Sign out</Button>}
/>

<SideNav
  collapsed={false}          // collapsed = icon-only (w-16), expanded = full (w-60)
  header={<Logo />}
  footer={<UserMenu />}
  items={[
    { label: 'Dashboard', href: '/', icon: <Home size={18} />, active: true, badge: '3' },
    { label: 'Analytics', icon: <BarChart size={18} />, children: [
      { label: 'Overview', href: '/analytics' },
      { label: 'Reports', href: '/reports' },
    ], defaultExpanded: true },
    { divider: true, label: 'Settings' },   // section divider with optional label
    { label: 'Preferences', icon: <Settings size={18} />, href: '/settings' },
  ]}
/>

<Breadcrumb
  items={[
    { label: 'Home', href: '/', icon: <Home size={14} /> },
    { label: 'Projects', href: '/projects' },
    { label: 'Current' },     // last item renders as plain text (aria-current="page")
  ]}
  separator={<CustomSeparator />}   // optional, defaults to ChevronRight
/>

<Search
  value={controlled}           // optional controlled mode
  onChange={(val) => {}}
  onSearch={(val) => {}}       // fires on Enter or after debounce
  onClear={fn}
  placeholder="Search..."
  suggestions={[               // string[] or { label, description }[]
    { label: 'Result 1', description: 'Description' },
  ]}
  onSuggestionSelect={(suggestion) => {}}
  loading={false}
  size="md"                    // "sm" | "md" | "lg"
  disabled={false}
  scope="Projects"             // optional scope badge inside input
  debounceMs={300}
  wrapperClassName=""
/>

<DatePicker
  label="Start date"
  value="2026-03-12"           // format: YYYY-MM-DD
  onChange={(dateStr) => {}}
  mode="single"                // "single" | "range"
  rangeEnd="2026-03-20"        // only when mode="range"
  onRangeChange={(start, end) => {}}
  placeholder="Select date"
  min="2026-01-01"             // disable dates before
  max="2026-12-31"             // disable dates after
  size="md"                    // "sm" | "md" | "lg"
  disabled={false}
  required={false}
  errorText=""
  helperText=""
  wrapperClassName=""
/>

<OverflowMenu
  trigger={<CustomTrigger />}  // optional, defaults to MoreVertical icon
  align="right"                // "right" | "left"
  size="md"                    // "sm" | "md" | "lg"
  items={[
    { label: 'Edit', icon: <Edit size={14} />, onClick: fn, shortcut: '⌘E' },
    { label: 'Duplicate', icon: <Copy size={14} />, onClick: fn },
    { divider: true },
    { label: 'Delete', icon: <Trash size={14} />, onClick: fn, danger: true },
    { label: 'Disabled', onClick: fn, disabled: true },
  ]}
/>

<Form onSubmit={(e) => {}}>
  <FormGroup legend="Personal Info">
    <FormRow>                   {/* 2-column grid on md+ screens */}
      <TextInput label="First name" />
      <TextInput label="Last name" />
    </FormRow>
    <TextInput label="Email" />
  </FormGroup>

  <FormActions align="right">  {/* "left" | "center" | "right" | "between" */}
    <Button variant="tertiary">Cancel</Button>
    <Button type="submit">Save</Button>
  </FormActions>
</Form>

<Spinner size="md" label="Loading..." />       // "sm" | "md" | "lg" | "xl"
<Skeleton width="200px" height="1rem" variant="rectangular" />  // "rectangular" | "circular" | "text"
<SkeletonText lines={3} />
<TableSkeleton rows={5} columns={4} />

import { useTheme } from '@/context/ThemeProvider';

function ThemeSwitcher() {
  const { theme, setTheme, toggleTheme, themes } = useTheme();
  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      {themes.map(t => <option key={t} value={t}>{t}</option>)}
    </select>
  );
}