tharaday 0.7.0 → 0.7.2

package/src/components/Accordion/Accordion.tsx

@@ -46,7 +46,20 @@ export const Accordion = ({
               aria-controls={`${componentId}-content-${item.id}`}
             >
               <span>{item.title}</span>
-              <span className={clsx(styles.icon, isExpanded && styles.iconExpanded)}>▼</span>
+              <span
+                className={clsx(styles.icon, isExpanded && styles.iconExpanded)}
+                aria-hidden="true"
+              >
+                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                  <path
+                    d="M2.5 4.5L6 8L9.5 4.5"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </span>
             </button>
             <div
               id={`${componentId}-content-${item.id}`}

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -6,6 +6,30 @@ const meta: Meta<typeof Dropdown> = {
   title: 'Components/Dropdown',
   component: Dropdown,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+A custom select built on a \`button\` + \`listbox\` pattern. Supports both controlled (\`value\` + \`onChange\`) and uncontrolled (\`defaultValue\`) usage. Options can carry an optional description and can be individually disabled.
+
+**When to use**
+Use Dropdown when you need richer option rendering (descriptions, icons) or tighter visual control over the trigger. For simple native selects, use the \`Select\` component instead.
+
+**Keyboard interaction**
+
+| Key | Behaviour |
+|-----|-----------|
+| \`Enter\` / \`Space\` | Toggle open; select focused option when open |
+| \`ArrowDown\` | Open list or move focus to next option |
+| \`ArrowUp\` | Open list or move focus to previous option |
+| \`Home\` | Move focus to first option |
+| \`End\` | Move focus to last option |
+| \`Escape\` | Close list and return focus to trigger |
+| \`Tab\` | Close list and move focus to next element |
+        `,
+      },
+    },
+  },
   argTypes: {
     onChange: { action: 'changed' },
   },

package/src/components/Modal/Modal.module.css

@@ -39,15 +39,14 @@
   color: var(--ds-text-1);
 }
 
-.closeButton {
-  margin: 0;
-  padding: 0 !important;
-  width: var(--ds-space-8) !important;
-  height: var(--ds-space-8) !important;
-  min-width: unset !important;
-  font-size: var(--ds-font-size-lg) !important;
+/* Double class increases specificity to (0,2,0) — wins over Button's single-class size rules */
+.closeButton.closeButton {
+  padding: 0;
+  width: var(--ds-space-8);
+  height: var(--ds-space-8);
+  font-size: var(--ds-font-size-lg);
   font-weight: var(--ds-font-weight-semibold);
-  line-height: 1 !important;
+  line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;

package/src/components/Modal/Modal.stories.tsx

@@ -15,6 +15,28 @@ const meta = {
   tags: ['autodocs'],
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A dialog overlay that traps focus while open and restores it to the trigger element on close. Renders into the normal DOM tree (no portal) and is controlled via \`isOpen\` + \`onClose\`.
+
+**Usage**
+Always provide a \`title\` — it is wired to \`aria-labelledby\` on the dialog element. Pass action buttons via the \`footer\` prop to keep them visually anchored to the bottom.
+
+**Keyboard interaction**
+
+| Key | Behaviour |
+|-----|-----------|
+| \`Tab\` | Cycle focus through all focusable elements inside the modal |
+| \`Shift + Tab\` | Cycle focus backwards |
+| \`Escape\` | Close the modal |
+
+**Sizes**
+
+\`sm\` · \`md\` (default) · \`lg\` · \`xl\` · \`full\`
+        `,
+      },
+    },
   },
   argTypes: {
     size: {

package/src/components/Modal/Modal.tsx

@@ -61,15 +61,14 @@ export const Modal = ({
       document.body.style.overflow = 'hidden';
       window.addEventListener('keydown', handleKeyDown);
 
-      // Focus the first element or the close button after a small delay to ensure it's rendered
-      setTimeout(() => {
+      requestAnimationFrame(() => {
         const focusableElements = modalRef.current?.querySelectorAll<HTMLElement>(
           'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
         );
         if (focusableElements && focusableElements.length > 0) {
           focusableElements[0].focus();
         }
-      }, 0);
+      });
     }
 
     return () => {
@@ -108,7 +107,14 @@ export const Modal = ({
             aria-label="Close modal"
             disabled={isLoading}
           >
-            ✕
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+              <path
+                d="M1 1L9 9M9 1L1 9"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
           </Button>
         </div>
         <div className={styles.content}>{children}</div>

package/src/components/Notification/Notification.tsx

@@ -26,7 +26,14 @@ export const Notification = ({
           className={styles.closeButton}
           aria-label="Close notification"
         >
-          ✕
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+            <path
+              d="M1 1L9 9M9 1L1 9"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
         </Button>
       )}
     </div>

package/src/components/Tabs/Tabs.stories.tsx

@@ -8,6 +8,25 @@ const meta = {
   tags: ['autodocs'],
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A tab widget implementing the [ARIA Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). Supports controlled (\`activeId\` + \`onChange\`) and uncontrolled (\`defaultActiveId\`) modes. Individual tabs can be disabled. Two visual variants are available: \`line\` (default) and \`pill\`.
+
+**Keyboard interaction**
+
+Focus moves into the tab list on \`Tab\`. Arrow keys then navigate between tabs and automatically activate them (automatic activation pattern).
+
+| Key | Behaviour |
+|-----|-----------|
+| \`ArrowRight\` / \`ArrowDown\` | Move to and activate next enabled tab (wraps) |
+| \`ArrowLeft\` / \`ArrowUp\` | Move to and activate previous enabled tab (wraps) |
+| \`Home\` | Move to and activate first enabled tab |
+| \`End\` | Move to and activate last enabled tab |
+| \`Tab\` | Move focus from tab list into the active tab panel |
+        `,
+      },
+    },
   },
 } satisfies Meta<typeof Tabs>;
 

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -7,6 +7,30 @@ const meta: Meta<typeof Tooltip> = {
   title: 'Components/Tooltip',
   component: Tooltip,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Wraps any focusable trigger element and shows supplementary content on hover or focus. The tooltip element always stays in the DOM (CSS opacity toggle) so that \`aria-describedby\` references remain valid at all times.
+
+**Usage**
+Pass a single focusable element as \`children\`. The component clones it to inject \`aria-describedby\`, so the trigger does not need to be modified manually. Use short, non-essential text — tooltips are not a substitute for visible labels.
+
+**Keyboard interaction**
+
+| Key | Behaviour |
+|-----|-----------|
+| Focus trigger | Show tooltip after \`delay\` ms |
+| Blur trigger | Hide tooltip immediately |
+| \`Escape\` | Hide tooltip while trigger is focused |
+
+**Positions:** \`top\` (default) · \`bottom\` · \`left\` · \`right\`
+
+**Variants:** \`dark\` (default) · \`light\`
+        `,
+      },
+    },
+  },
   decorators: [
     (Story) => (
       <div

package/src/components/Tree/Tree.stories.tsx

@@ -5,6 +5,21 @@ const meta = {
   title: 'Components/Tree',
   component: Tree,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Renders any JavaScript value — object, array, or primitive — as an expandable tree. Useful for debugging, JSON inspection, or displaying structured data. Nested objects and arrays are collapsible; primitives and \`null\` are displayed inline.
+
+**Usage**
+Pass any serialisable value to \`data\`. Control the initial expand state with \`defaultExpanded\` (default: \`true\`). Custom expand/collapse icons can be provided via \`expandIcon\` and \`collapseIcon\`.
+
+**Limitations**
+This component is a data visualiser, not a navigation tree. It does not implement the [ARIA Tree pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) — there is no keyboard navigation between nodes. For navigable trees (e.g. file explorers, side nav), a fully accessible tree widget should be used instead.
+        `,
+      },
+    },
+  },
 } satisfies Meta<typeof Tree>;
 
 export default meta;

package/src/layouts/AppLayout/AppLayout.stories.tsx

@@ -5,6 +5,8 @@ import { AppLayout } from './AppLayout.tsx';
 import { Box } from '../../components/Box/Box.tsx';
 import { Button } from '../../components/Button/Button.tsx';
 import { Card, CardHeader, CardContent } from '../../components/Card/Card.tsx';
+import { Header } from '../../components/Header/Header.tsx';
+import { NavBar } from '../../components/NavBar/NavBar.tsx';
 import { Text } from '../../components/Text/Text.tsx';
 
 const meta = {
@@ -13,13 +15,6 @@ const meta = {
   parameters: {
     layout: 'fullscreen',
   },
-  args: {
-    headerTitle: 'Tharaday',
-    onLogin: fn(),
-    onLogout: fn(),
-    onCreateAccount: fn(),
-    onNavItemClick: fn(),
-  },
 } satisfies Meta<typeof AppLayout>;
 
 export default meta;
@@ -46,14 +41,26 @@ const navItems = [
 
 export const Default: Story = {
   args: {
-    headerLogo: logo,
-    user: { name: 'John Doe' },
-    navItems,
-    activeNavId: 'dashboard',
-    navActions: (
-      <Button size="sm" variant="outline">
-        Feedback
-      </Button>
+    header: (
+      <Header
+        logo={logo}
+        title="Tharaday"
+        user={{ name: 'John Doe' }}
+        onLogout={fn()}
+        onCreateAccount={fn()}
+      />
+    ),
+    navbar: (
+      <NavBar
+        items={navItems}
+        activeId="dashboard"
+        actions={
+          <Button size="sm" variant="outline">
+            Feedback
+          </Button>
+        }
+        onItemClick={fn()}
+      />
     ),
     children: (
       <Box display="flex" flexDirection="column" gap={6}>
@@ -72,7 +79,7 @@ export const Default: Story = {
                 The top bar is the <strong>Header</strong>. It handles:
               </Text>
               <ul>
-                <li>Global Branding (Logo & Title)</li>
+                <li>Global Branding (Logo &amp; Title)</li>
                 <li>User Identity (Welcome message)</li>
                 <li>Session State (Log out button)</li>
               </ul>
@@ -111,31 +118,36 @@ export const Default: Story = {
 
 export const LoggedOut: Story = {
   args: {
-    ...Default.args,
-    user: undefined,
-    navItems: [
-      { id: 'home', label: 'Home' },
-      { id: 'features', label: 'Features' },
-      { id: 'pricing', label: 'Pricing' },
-      { id: 'docs', label: 'Documentation' },
-    ],
-    activeNavId: 'home',
-  },
-};
-
-export const LoggedOutWithoutHeaderActions: Story = {
-  args: {
-    ...LoggedOut.args,
-    onLogin: undefined,
-    onCreateAccount: undefined,
+    header: <Header logo={logo} title="Tharaday" onLogin={fn()} onCreateAccount={fn()} />,
+    navbar: (
+      <NavBar
+        items={[
+          { id: 'home', label: 'Home' },
+          { id: 'features', label: 'Features' },
+          { id: 'pricing', label: 'Pricing' },
+          { id: 'docs', label: 'Documentation' },
+        ]}
+        activeId="home"
+        onItemClick={fn()}
+      />
+    ),
+    children: Default.args?.children,
   },
 };
 
 export const LongHeaderContent: Story = {
   args: {
-    ...Default.args,
-    headerTitle: 'Tharaday Design System Platform',
-    user: { name: 'Alexandria Catherine Montgomery' },
+    header: (
+      <Header
+        logo={logo}
+        title="Tharaday Design System Platform"
+        user={{ name: 'Alexandria Catherine Montgomery' }}
+        onLogout={fn()}
+        maxWidth="48rem"
+      />
+    ),
+    navbar: <NavBar items={navItems} activeId="dashboard" onItemClick={fn()} maxWidth="48rem" />,
     maxWidth: '48rem',
+    children: Default.args?.children,
   },
 };

package/src/layouts/AppLayout/AppLayout.tsx

@@ -3,48 +3,18 @@ import clsx from 'clsx';
 import styles from './AppLayout.module.css';
 import type { AppLayoutProps } from './AppLayout.types.ts';
 import { Box } from '../../components/Box/Box.tsx';
-import { Header } from '../../components/Header/Header.tsx';
-import { NavBar } from '../../components/NavBar/NavBar.tsx';
 
-/**
- * AppLayout provides a standard layout structure that includes both
- * a Header (for branding and user state) and a NavBar (for navigation).
- *
- * This component demonstrates the distinct roles of Header and NavBar.
- */
 export const AppLayout = ({
-  headerLogo,
-  headerTitle,
-  user,
-  navItems,
-  activeNavId,
-  navActions,
+  header,
+  navbar,
   children,
-  onLogin,
-  onLogout,
-  onCreateAccount,
-  onNavItemClick,
   className,
   maxWidth = '75rem',
 }: AppLayoutProps) => {
   return (
     <div className={clsx(styles.root, className)}>
-      <Header
-        logo={headerLogo}
-        title={headerTitle}
-        user={user}
-        onLogin={onLogin}
-        onLogout={onLogout}
-        onCreateAccount={onCreateAccount}
-        maxWidth={maxWidth}
-      />
-      <NavBar
-        items={navItems}
-        activeId={activeNavId}
-        actions={navActions}
-        onItemClick={onNavItemClick}
-        maxWidth={maxWidth}
-      />
+      {header}
+      {navbar}
       <main className={styles.main}>
         <Box className={styles.container} maxWidth={maxWidth}>
           {children}

package/src/layouts/AppLayout/AppLayout.types.ts

@@ -1,58 +1,14 @@
 import type { ReactNode } from 'react';
 
-import type { NavBarItem } from '../../components/NavBar/NavBar.types.ts';
-
 export interface AppLayoutProps {
-  /**
-   * Additional class name for the layout root
-   */
+  /** Additional class name for the layout root */
   className?: string;
-  /**
-   * Max width for header and navbar containers
-   */
+  /** Max width for the main content container */
   maxWidth?: string | number;
-  /**
-   * Header logo element
-   */
-  headerLogo?: ReactNode;
-  /**
-   * Header title
-   */
-  headerTitle?: string;
-  /**
-   * Current user object for the Header
-   */
-  user?: { name: string };
-  /**
-   * NavBar navigation items
-   */
-  navItems: NavBarItem[];
-  /**
-   * Active NavBar item ID
-   */
-  activeNavId?: string;
-  /**
-   * NavBar actions (right side)
-   */
-  navActions?: ReactNode;
-  /**
-   * Content to display in the main area
-   */
+  /** Header slot — render a pre-configured Header component */
+  header?: ReactNode;
+  /** NavBar slot — render a pre-configured NavBar component */
+  navbar?: ReactNode;
+  /** Main content */
   children: ReactNode;
-  /**
-   * Callback for header login
-   */
-  onLogin?: () => void;
-  /**
-   * Callback for header logout
-   */
-  onLogout?: () => void;
-  /**
-   * Callback for header create account
-   */
-  onCreateAccount?: () => void;
-  /**
-   * Callback for nav item click
-   */
-  onNavItemClick?: (id: string) => void;
 }

package/src/layouts/DashboardLayout/DashboardLayout.stories.tsx

@@ -8,6 +8,7 @@ import { Box } from '../../components/Box/Box.tsx';
 import { Breadcrumbs, BreadcrumbItem } from '../../components/Breadcrumbs/Breadcrumbs.tsx';
 import { Button } from '../../components/Button/Button.tsx';
 import { Card, CardHeader, CardContent } from '../../components/Card/Card.tsx';
+import { Header } from '../../components/Header/Header.tsx';
 import { Text } from '../../components/Text/Text.tsx';
 
 const meta = {
@@ -16,12 +17,6 @@ const meta = {
   parameters: {
     layout: 'fullscreen',
   },
-  args: {
-    headerTitle: 'DS Creator',
-    onLogin: fn(),
-    onLogout: fn(),
-    onCreateAccount: fn(),
-  },
 } satisfies Meta<typeof DashboardLayout>;
 
 export default meta;
@@ -41,8 +36,9 @@ const logo = (
 
 export const Overview: Story = {
   args: {
-    headerLogo: logo,
-    user: { name: 'Design Creator' },
+    header: (
+      <Header logo={logo} title="DS Creator" user={{ name: 'Design Creator' }} onLogout={fn()} />
+    ),
     breadcrumbs: (
       <Breadcrumbs>
         <BreadcrumbItem href="#">Home</BreadcrumbItem>

package/src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -2,33 +2,18 @@ import clsx from 'clsx';
 
 import styles from './DashboardLayout.module.css';
 import type { DashboardLayoutProps } from './DashboardLayout.types.tsx';
-import { Header } from '../../components/Header/Header.tsx';
 
 export const DashboardLayout = ({
-  headerLogo,
-  headerTitle,
+  header,
   breadcrumbs,
   actions,
   stats,
   children,
-  user,
-  onLogin,
-  onLogout,
-  onCreateAccount,
   className,
-  maxWidth,
 }: DashboardLayoutProps) => {
   return (
     <div className={clsx(styles.root, className)}>
-      <Header
-        logo={headerLogo}
-        title={headerTitle}
-        user={user}
-        onLogin={onLogin}
-        onLogout={onLogout}
-        onCreateAccount={onCreateAccount}
-        maxWidth={maxWidth}
-      />
+      {header}
       <main className={styles.main}>
         <div className={styles.container}>
           {(breadcrumbs || actions) && (

package/src/layouts/DashboardLayout/DashboardLayout.types.tsx

@@ -2,15 +2,10 @@ import type { ReactNode } from 'react';
 
 export interface DashboardLayoutProps {
   className?: string;
-  maxWidth?: string | number;
-  headerLogo?: ReactNode;
-  headerTitle?: string;
+  /** Header slot — render a pre-configured Header component */
+  header?: ReactNode;
   breadcrumbs?: ReactNode;
   actions?: ReactNode;
   stats?: ReactNode;
   children: ReactNode;
-  user?: { name: string };
-  onLogin?: () => void;
-  onLogout?: () => void;
-  onCreateAccount?: () => void;
 }

package/src/layouts/SettingsLayout/SettingsLayout.stories.tsx

@@ -6,6 +6,7 @@ import { Box } from '../../components/Box/Box.tsx';
 import { Breadcrumbs, BreadcrumbItem } from '../../components/Breadcrumbs/Breadcrumbs.tsx';
 import { Button } from '../../components/Button/Button.tsx';
 import { Card, CardHeader, CardContent, CardFooter } from '../../components/Card/Card.tsx';
+import { Header } from '../../components/Header/Header.tsx';
 import { Input } from '../../components/Input/Input.tsx';
 import { Notification } from '../../components/Notification/Notification.tsx';
 import { Text } from '../../components/Text/Text.tsx';
@@ -17,20 +18,28 @@ const meta = {
   parameters: {
     layout: 'fullscreen',
   },
-  args: {
-    headerTitle: 'DS Creator',
-    onLogin: fn(),
-    onLogout: fn(),
-    onCreateAccount: fn(),
-  },
 } satisfies Meta<typeof SettingsLayout>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const logo = (
+  <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fillRule="evenodd">
+      <path
+        d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+        fill="#3b82f6"
+      />
+      <path d="M16 8l8 12H8l8-12z" fill="#FFF" />
+    </g>
+  </svg>
+);
+
 export const ProfileSettings: Story = {
   args: {
-    user: { name: 'Design Creator' },
+    header: (
+      <Header logo={logo} title="DS Creator" user={{ name: 'Design Creator' }} onLogout={fn()} />
+    ),
     breadcrumbs: (
       <Breadcrumbs>
         <BreadcrumbItem href="#">Home</BreadcrumbItem>

package/src/layouts/SettingsLayout/SettingsLayout.tsx

@@ -2,32 +2,17 @@ import clsx from 'clsx';
 
 import styles from './SettingsLayout.module.css';
 import type { SettingsLayoutProps } from './SettingsLayout.types.tsx';
-import { Header } from '../../components/Header/Header.tsx';
 
 export const SettingsLayout = ({
-  headerLogo,
-  headerTitle,
+  header,
   breadcrumbs,
   sidebar,
   children,
-  user,
-  onLogin,
-  onLogout,
-  onCreateAccount,
   className,
-  maxWidth,
 }: SettingsLayoutProps) => {
   return (
     <div className={clsx(styles.root, className)}>
-      <Header
-        logo={headerLogo}
-        title={headerTitle}
-        user={user}
-        onLogin={onLogin}
-        onLogout={onLogout}
-        onCreateAccount={onCreateAccount}
-        maxWidth={maxWidth}
-      />
+      {header}
       <main className={styles.main}>
         <div className={styles.container}>
           {breadcrumbs && <div className={styles.breadcrumbs}>{breadcrumbs}</div>}

package/src/layouts/SettingsLayout/SettingsLayout.types.tsx

@@ -2,14 +2,9 @@ import type { ReactNode } from 'react';
 
 export interface SettingsLayoutProps {
   className?: string;
-  maxWidth?: string | number;
-  headerLogo?: ReactNode;
-  headerTitle?: string;
+  /** Header slot — render a pre-configured Header component */
+  header?: ReactNode;
   breadcrumbs?: ReactNode;
   sidebar?: ReactNode;
   children: ReactNode;
-  user?: { name: string };
-  onLogin?: () => void;
-  onLogout?: () => void;
-  onCreateAccount?: () => void;
 }