@ahrowe/ui 0.34.0 → 0.35.0

package/docs/ThemeProvider.md

@@ -5,7 +5,8 @@
 **Keywords:** theming, dark mode, gradient
 
 **Import:** `import { ThemeProvider } from '@ahrowe/ui'`  
-**Types:** `import type { Theme, ThemeVariables } from '@ahrowe/ui'`
+**Types:** `import type { Theme, ThemeVariables } from '@ahrowe/ui'`  
+**Built-in themes:** `import { defaultTheme, lightTheme } from '@ahrowe/ui'`
 
 ```tsx
 import { ThemeProvider } from '@ahrowe/ui';
@@ -50,6 +51,34 @@ const darkTheme: Theme = {
 </ThemeProvider>
 ```
 
+## The two built-in themes
+
+The package ships a pair. `defaultTheme` is dark and is what `ThemeProvider` applies when you pass
+no `themes` at all. `lightTheme` is its light sibling: same brand colour, inverted surfaces. Pass
+both to let the user choose.
+
+```tsx
+import { ThemeProvider, defaultTheme, lightTheme, useTheme } from '@ahrowe/ui';
+
+function App() {
+  const { currentThemeId, setCurrentThemeId } = useTheme(defaultTheme.id);
+
+  return (
+    <ThemeProvider themes={[defaultTheme, lightTheme]} currentThemeId={currentThemeId}>
+      <button onClick={() => setCurrentThemeId(currentThemeId === 'light' ? 'default' : 'light')}>
+        Toggle theme
+      </button>
+      <App />
+    </ThemeProvider>
+  );
+}
+```
+
+`lightTheme` declares only the twenty-odd variables that have to flip and inherits the rest through
+`baseThemeId: 'default'`. That is the shape to copy for your own theme: override what your brand
+changes, inherit everything else, so a new variable added to the library reaches your theme without
+you touching it.
+
 **Theme type:**
 
 ```ts

package/docs/Tooltip.md

@@ -4,7 +4,8 @@
 
 **Keywords:** hint, help text, info bubble
 
-**Import:** `import { Tooltip } from '@ahrowe/ui'`
+**Import:** `import { Tooltip } from '@ahrowe/ui'`  
+**Types:** `import type { TooltipProps, TooltipVariant, TooltipLabels } from '@ahrowe/ui'`
 
 ```tsx
 import { Tooltip } from '@ahrowe/ui';
@@ -39,6 +40,27 @@ import { Tooltip } from '@ahrowe/ui';
 | `iconPosition` | `string` | CSS positioning for the icon |
 | `tooltipPosition` | `string` | CSS positioning for the bubble |
 | `onClick` | `() => void` | Click handler on the icon |
+| `labels` | `TooltipLabels` | Overrides the text Tooltip renders of its own. Merged per key |
+
+**Labels:** `details` (accessible name of the `details` variant's `?` badge, default `More information`).
+
+## Accessibility
+
+The bubble carries `role="tooltip"`, and while it is shown the element it sits inside gains an
+`aria-describedby` pointing at it, so a screen reader reads the tooltip as the description of the
+field or control it explains. The attribute is removed again when the bubble goes.
+
+The `error` variant is `role="alert"` instead: it appears in answer to something the user just
+did, and a description is only read out when its trigger is focused, which a field the user has
+already left is not.
+
+The `details` badge is a real control. It takes focus, opens on focus as well as hover, toggles on
+Enter and Space, and reports its state through `aria-expanded`. Give it a translated name through
+`labels.details`.
+
+```tsx
+<Tooltip variant="details" message="Last updated: 2 hours ago" labels={{ details: 'Mehr Informationen' }} />
+```
 
 The bubble is rendered through a portal and tracks its trigger's position directly, so it always escapes clipping ancestors (cards, scroll containers, virtualized lists) — no `position: relative` wrapper is required. It flips to the opposite side automatically when there's no room in its preferred direction, and hides (without losing state) if the trigger itself scrolls behind a clipping ancestor, reappearing once it's back in view.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "components",
@@ -59,6 +59,7 @@
     "lint": "run-p run-tsc run-oxlint run-stylelint run-oxfmt",
     "gen-barrel": "tsx scripts/gen-barrel.ts",
     "gen-theme-map": "tsx scripts/gen-theme-map.ts",
+    "gen-readme-table": "tsx scripts/gen-readme-table.ts",
     "gc": "tsx scripts/generate-component.ts",
     "changeset": "changeset",
     "release": "bash src/scripts/release.sh",
@@ -74,18 +75,17 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@modelcontextprotocol/sdk": "^1.30.0",
     "@mona-health/react-input-mask": "^3.0.3",
     "classnames": "^2.5.1",
     "downshift": "^9.4.0",
-    "react-number-format": "^5.4.5",
-    "zod": "^4.6.5"
+    "react-number-format": "^5.4.5"
   },
   "devDependencies": {
     "@changesets/cli": "^3.0.3",
     "@fortawesome/fontawesome-svg-core": "^7.3.1",
     "@fortawesome/free-solid-svg-icons": "^7.3.1",
     "@fortawesome/react-fontawesome": "^3.5.0",
+    "@modelcontextprotocol/sdk": "^1.30.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
@@ -120,14 +120,15 @@
     "typescript": "^6.0.3",
     "vite": "^8.3.0",
     "vite-plugin-dts": "^5.1.0",
-    "vitest": "^5.0.1"
+    "vitest": "^5.0.1",
+    "zod": "^4.6.5"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": ">=6.0.0",
     "@fortawesome/free-solid-svg-icons": ">=6.0.0",
     "@fortawesome/react-fontawesome": ">=0.2.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "lint-staged": {
     "*.{ts,tsx}": "vitest related --run"