tharaday 0.6.3 → 0.7.1

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/Dropdown/Dropdown.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useId, useState, useRef, useEffect } from 'react';
+import { useId, useState, useRef, useEffect, type KeyboardEvent } from 'react';
 
 import styles from './Dropdown.module.css';
 import type { DropdownProps, DropdownOption } from './Dropdown.types.ts';
@@ -64,7 +64,7 @@ export const Dropdown = ({
     triggerRef.current?.focus();
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
+  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
     if (disabled) {
       return;
     }

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/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/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Button } from '../Button/Button.tsx';
+import { Tooltip } from './Tooltip.tsx';
+
+describe('Tooltip', () => {
+  it('renders the trigger element', () => {
+    render(
+      <Tooltip content="Save file">
+        <Button>Save</Button>
+      </Tooltip>
+    );
+    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+  });
+
+  it('keeps tooltip element in DOM when not visible', () => {
+    render(
+      <Tooltip content="Save file">
+        <Button>Save</Button>
+      </Tooltip>
+    );
+    expect(screen.getByRole('tooltip')).toBeInTheDocument();
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Save file');
+  });
+
+  it('always applies aria-describedby to the trigger', () => {
+    render(
+      <Tooltip content="Save file">
+        <Button>Save</Button>
+      </Tooltip>
+    );
+    const trigger = screen.getByRole('button');
+    const tooltip = screen.getByRole('tooltip');
+    expect(trigger).toHaveAttribute('aria-describedby', tooltip.id);
+  });
+
+  it('shows tooltip on hover', async () => {
+    render(
+      <Tooltip content="Tooltip text" delay={0}>
+        <Button>Hover me</Button>
+      </Tooltip>
+    );
+    const tooltip = screen.getByRole('tooltip');
+    expect(tooltip).not.toHaveClass('visible');
+    await userEvent.hover(screen.getByRole('button'));
+    expect(tooltip).toHaveClass('visible');
+  });
+
+  it('hides tooltip on mouse leave', async () => {
+    render(
+      <Tooltip content="Tooltip text" delay={0}>
+        <Button>Hover me</Button>
+      </Tooltip>
+    );
+    const trigger = screen.getByRole('button');
+    await userEvent.hover(trigger);
+    await userEvent.unhover(trigger);
+    expect(screen.getByRole('tooltip')).not.toHaveClass('visible');
+  });
+
+  it('hides tooltip on Escape key', async () => {
+    render(
+      <Tooltip content="Tooltip text" delay={0}>
+        <Button>Focus me</Button>
+      </Tooltip>
+    );
+    await userEvent.tab(); // focuses the button, onFocus shows the tooltip
+    expect(screen.getByRole('tooltip')).toHaveClass('visible');
+    await userEvent.keyboard('{Escape}');
+    expect(screen.getByRole('tooltip')).not.toHaveClass('visible');
+  });
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -68,20 +68,18 @@ export const Tooltip = ({
       onKeyDown={handleKeyDown}
     >
       <div className={styles.trigger}>{trigger}</div>
-      {isVisible && (
-        <div
-          className={clsx(
-            styles.tooltip,
-            styles[position],
-            styles[variant],
-            isVisible && styles.visible
-          )}
-          id={tooltipId}
-          role="tooltip"
-        >
-          {content}
-        </div>
-      )}
+      <div
+        className={clsx(
+          styles.tooltip,
+          styles[position],
+          styles[variant],
+          isVisible && styles.visible
+        )}
+        id={tooltipId}
+        role="tooltip"
+      >
+        {content}
+      </div>
     </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/styles/tokens.css

@@ -58,17 +58,17 @@
   --red-950: color-mix(in srgb, var(--red) 25%, #000000);
 
   /* Warning (Amber/Orange) */
-  --orange-50: #fffbeb;
-  --orange-100: #fef3c7;
-  --orange-200: #fde68a;
-  --orange-300: #fcd34d;
-  --orange-400: #fbbf24;
-  --orange-500: #f59e0b;
-  --orange-600: #d97706;
-  --orange-700: #b45309;
-  --orange-800: #92400e;
-  --orange-900: #78350f;
-  --orange-950: #451a03;
+  --orange-50: color-mix(in srgb, var(--orange) 10%, #ffffff);
+  --orange-100: color-mix(in srgb, var(--orange) 20%, #ffffff);
+  --orange-200: color-mix(in srgb, var(--orange) 35%, #ffffff);
+  --orange-300: color-mix(in srgb, var(--orange) 55%, #ffffff);
+  --orange-400: color-mix(in srgb, var(--orange) 75%, #ffffff);
+  --orange-500: var(--orange);
+  --orange-600: color-mix(in srgb, var(--orange) 85%, #000000);
+  --orange-700: color-mix(in srgb, var(--orange) 70%, #000000);
+  --orange-800: color-mix(in srgb, var(--orange) 55%, #000000);
+  --orange-900: color-mix(in srgb, var(--orange) 40%, #000000);
+  --orange-950: color-mix(in srgb, var(--orange) 25%, #000000);
 
   /* Retro palette */
   --retro-yellow: #faca78;

package/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tsconfig.app.json

@@ -24,5 +24,6 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/test"]
 }

package/.versionrc.json

@@ -1,6 +0,0 @@
-{
-  "skip": {
-    "commit": false,
-    "tag": false
-  }
-}