@ahrowe/ui 0.47.3 → 0.48.0

package/dist/types/common/menu/menu.types.d.ts

@@ -25,6 +25,11 @@ export interface MenuAction {
     disabled?: boolean;
     /** Renders in the destructive colour. For deleting, discarding, revoking. */
     danger?: boolean;
+    /**
+     * Followed after `onClick` and `onAction`. In `Menu` a real `<a>`, so Ctrl/⌘-click opens a new tab.
+     * Loads the whole page: with a client-side router, navigate in `onClick` instead.
+     */
+    href?: string;
     onClick?: () => void;
 }
 /** A line between groups of actions. */

package/dist/types/common/menu/menuHotkeys.d.ts

@@ -14,7 +14,7 @@ import { MenuEntry } from './menu.types.js';
  * useHotkeys(menuHotkeys(items, run), { enabled: isOpen }); // only while the menu is open
  * ```
  *
- * Runs each entry the way clicking it does: its own `onClick`, then `onAction`. A `disabled`
- * entry, and an entry with no `shortcut`, is left out.
+ * Runs each entry the way clicking it does: its own `onClick`, then `onAction`, then its `href`.
+ * A `disabled` entry, and an entry with no `shortcut`, is left out.
  */
 export declare function menuHotkeys(items: MenuEntry[], onAction?: (id: string) => void): HotkeyMap;

package/dist/types/common/menu/menuItem.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, ReactNode } from 'react';
+import { MenuAction, MenuEntry } from './menu.types.js';
+export declare function hasAnyIcon(items: MenuEntry[]): boolean;
+/** The action's icon, or an empty cell as wide when another action has one, so the labels line up. */
+export declare function renderItemIcon(icon: MenuAction['icon'], reserveCell: boolean, props: {
+    className: string;
+    style?: CSSProperties;
+}): ReactNode;
+/** Runs an action the way clicking it does: its own `onClick`, then `onAction`, then its `href`. */
+export declare function runMenuAction(action: MenuAction, onAction?: (id: string) => void): void;

package/docs/CommandPalette.md

@@ -73,7 +73,7 @@ On a small touch screen it can present as a bottom sheet like every `Modal`: pas
 | `isLoading` | `boolean` | Shows the `loading` label instead of `empty` while nothing matches |
 | `presentation` | `Presentation` | Centred dialog (default), bottom sheet, or a sheet only on a small touch screen |
 
-A command is a `MenuAction`: `id`, `label`, `icon`, `shortcut`, `keywords`, `disabled`, `danger` and `onClick`. See [Menu.md](Menu.md).
+A command is a `MenuAction`: `id`, `label`, `icon`, `shortcut`, `keywords`, `disabled`, `danger`, `href` and `onClick`. A command with an `href` goes there after running. See [Menu.md](Menu.md).
 
 **Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ CommandPalette: { presentation: Presentation.Auto } }}`. See [ConfigProvider.md](ConfigProvider.md).
 

package/docs/InteractableDiv.md

@@ -23,4 +23,4 @@ import { InteractableDiv } from '@ahrowe/ui';
 </InteractableDiv>
 ```
 
-**Note:** Check [package/common/interactableDiv/](https://github.com/AndreasWeinzierl/ahrowe-ui/tree/master/package/common/interactableDiv) for full prop details.
+**Note:** Check [package/common/interactableDiv/](https://github.com/ahrowe-dev/ahrowe-ui/tree/master/package/common/interactableDiv) for full prop details.

package/docs/Menu.md

@@ -27,9 +27,9 @@ const items: MenuEntry[] = [
 **Entries** are one of three shapes, and the list is read in the order you give it:
 
 ```ts
-{ id: 'edit', label: 'Edit', icon, shortcut, keywords, disabled, danger, onClick }  // an action
-{ separator: true }                                                                 // a line
-{ heading: 'This document' }                                                        // a label over what follows
+{ id: 'edit', label: 'Edit', icon, shortcut, keywords, disabled, danger, href, onClick }  // an action, or a link with `href`
+{ separator: true }                                                                       // a line
+{ heading: 'This document' }                                                              // a label over what follows
 ```
 
 `keywords` are extra search terms for [CommandPalette](CommandPalette.md), which takes the same entries. The menu ignores them.
@@ -54,7 +54,7 @@ useHotkeys(menuHotkeys(items, run));
 useHotkeys(menuHotkeys(items, run), { enabled: isOpen });
 ```
 
-It runs each entry the way clicking it does, its own `onClick` then `onAction`, and leaves out a `disabled` entry and any entry with no `shortcut`. Bind them yourself instead if the actions already live in a keymap of your own; the menu does not mind either way.
+It runs each entry the way clicking it does, its own `onClick` then `onAction` then its `href`, and leaves out a `disabled` entry and any entry with no `shortcut`. Bind them yourself instead if the actions already live in a keymap of your own; the menu does not mind either way.
 
 An action runs its own `onClick` first, then `onAction` on the menu, then the menu closes. Use whichever of the two fits: a handler per entry when they are unrelated, `onAction` when they funnel into one place.
 
@@ -116,10 +116,11 @@ Separators and headings are never focused. The trigger is given `aria-haspopup`,
 |-------|------|-------------|
 | `id` | `string` | Stable id, also what `onAction` reports |
 | `label` | `ReactNode` | What the entry says |
-| `icon` | `IconContent` | Leading icon |
+| `icon` | `IconContent` | Leading icon. Entries without one keep its space while any other has one, so the labels line up. Same in `CommandPalette` |
 | `shortcut` | `string` | A combo in `useHotkeys` spelling, e.g. `'mod+k'`. Shown on the trailing edge, written for the platform. Binding it is yours, see `menuHotkeys` |
 | `disabled` | `boolean` | Not clickable, and skipped by the arrow keys |
 | `danger` | `boolean` | Renders in the destructive colour |
+| `href` | `string` | Makes the entry a real `<a>`, so Ctrl/⌘-click and a middle click open it in a new tab. A click runs `onClick` and `onAction` first, a middle click neither. The browser loads the page, so with a client-side router navigate in `onClick` instead. A `disabled` entry stays a button |
 | `onClick` | `() => void` | Runs before `onAction` |
 
 **Slots:** `root` `trigger` `menu` `item` `itemIcon` `itemLabel` `itemShortcut` `separator` `heading`

package/docs/ProgressBar.md

@@ -49,7 +49,7 @@ when unset. A label on a coloured segment is black or white, whichever reads on
 
 | Variable | Falls back to |
 |----------|---------------|
-| `--progress-bar-track-color` | `var(--background-accent)` |
+| `--progress-bar-track-color` | `var(--background-accent-light)` |
 
 ```tsx
 // Theme-wide, via ThemeProvider

package/docs/RadioGroup.md

@@ -79,6 +79,6 @@ interface RadioOption {
 
 ## Sizing
 
-The group is sized by its font, so the radios, the spacing between options and the gap to each label all scale with the text. `--radio-size` and `--radio-gap` override the circle and the label spacing; they fall back to `1.125em` and `0.625em`, i.e. 18px and 10px at a 16px base. The dot is always half the circle.
+The group is sized by its font, so the radios, the spacing between options and the gap to each label all scale with the text. `--radio-size` and `--radio-gap` override the circle and the label spacing; they fall back to `1.125em` and `0.625em`, i.e. 18px and 10px at a 16px base. The dot is about half the circle.
 
 The `size` prop still wins where it is given, for a radio that must match a fixed layout rather than the text around it.

package/docs/ThemeProvider.md

@@ -92,7 +92,7 @@ interface Theme {
 }
 ```
 
-**Key CSS variables** (see `package/common/themeProvider/theme.types.ts` for the full list):
+**Key CSS variables** (`ThemeVariables` is the full list, in `node_modules/@ahrowe/ui/dist/types/common/themeProvider/theme.types.d.ts`):
 
 | Variable | Purpose |
 |----------|---------|

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.47.3",
+  "version": "0.48.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "agent",
@@ -18,13 +18,13 @@
   ],
   "homepage": "https://ahrowe.com/packages/ui/demo/",
   "bugs": {
-    "url": "https://github.com/AndreasWeinzierl/ahrowe-ui/issues"
+    "url": "https://github.com/ahrowe-dev/ahrowe-ui/issues"
   },
   "license": "MIT",
   "author": "ahrowe <dev@ahrowe.com>",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/AndreasWeinzierl/ahrowe-ui.git"
+    "url": "git+https://github.com/ahrowe-dev/ahrowe-ui.git"
   },
   "style": "./dist/style.css",
   "bin": {
@@ -77,7 +77,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "build:demo": "vite build --base=/packages/ui/demo/ --outDir dist-demo",
+    "build:demo": "vite build --base=./ --outDir dist-demo",
     "build:lib": "vite build --config vite.lib.config.ts",
     "build:mcp": "vite build --config vite.mcp.config.ts",
     "preview": "vite preview",