@tensor_1/react 2.28.0 → 2.29.0

package/README.md

@@ -331,3 +331,26 @@ toast.dismiss(id);   // or toast.dismiss() for all
 - **Accessibility:** errors are `role="alert"`. Everything else is announced through the toaster's polite live region, and a loading toast that settles is announced again. Esc closes the focused toast. Tone glyphs are decorative; the text carries the meaning.
 - **Stores:** `toast` writes to a default store that `<Toaster />` reads. `createToastApi(createToastStore())` gives a separate queue (tests, embedded apps); pass its `store` to `<Toaster store>`. The store has no React dependency.
 - `<Toaster>` still renders hand-managed `<Toast>` children first. `Toast` gains `tone="warning"` and an `action` slot.
+### Icons (`@tensor_1/react/icons`)
+
+The UIx icon set (HAR-996): 233 glyphs drawn in `currentColor` at the `--uix-icon-*` sizes. Icons come only from UIx
+(workspace ADR-0038); no product adds an icon library. The glyphs are Lucide's (ISC); the licence travels in
+`THIRD_PARTY_NOTICES.md`. Import the CSS once: `@tensor_1/tokens/components/icon` (also in the bundle).
+
+```tsx
+import { ShieldCheckIcon, TriangleAlertIcon, Icon } from '@tensor_1/react/icons';
+import type { UixIcon, IconName } from '@tensor_1/react/icons';
+
+<ShieldCheckIcon />                                   // decorative: aria-hidden, 20 px (md)
+<ShieldCheckIcon size="sm" tone="success" label="Verified" />   // role="img" with a name
+<Button icon aria-label="Delete"><Trash2Icon /></Button>         // the button carries the name
+<Icon name={entityIconName} />                          // chosen at run time (loads the whole set)
+const icons: Record<EntityType, UixIcon> = { incident: SirenIcon, change: GitBranchIcon };
+```
+
+- **Migrating from `lucide-react`:** import from `@tensor_1/react/icons` and add `Icon` to the name: `ShieldCheck` → `ShieldCheckIcon`. The older Lucide names the products use are kept as aliases (`AlertTriangleIcon`, `CheckCircle2Icon`, `Loader2Icon`, …). `etc/icon-names.json` maps every Lucide name to its UIx component and glyph, for a codemod. `LucideIcon` becomes `UixIcon`.
+- **Size:** `sm` 16 px, `md` 20 px (default), `lg` 24 px, or any CSS length or pixel number. A product sizing class (a Tailwind `size-4`) wins over the default.
+- **Tone:** `current` (default, inherits the text colour), `muted`, `accent`, `success`, `warning`, `danger`, `info`.
+- **Accessibility:** decorative unless `label` is set. Never let an icon carry meaning alone; pair it with text.
+- **Bundle size:** each `<Name>Icon` is tree-shaken; one icon adds well under 3 KB minified. `<Icon name>` and `ICON_GLYPHS` load all of them.
+- **A glyph is missing?** Add its Lucide name to `scripts/icon-names.txt`, run `node scripts/generate-icons.mjs <lucide-react dir>` and release. Do not paste an SVG into a product.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,54 @@
+# Third-party notices
+
+`@tensor_1/react` redistributes SVG path data from these projects. Their licences require this notice to travel with copies.
+
+## Lucide (lucide-react 1.39.0)
+
+Used by: the icon set (`@tensor_1/react/icons`, `dist/icons/**`) and the editor, emoji, reaction and table-control glyphs (`EditorIcons`). Source: https://lucide.dev
+
+```text
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+```

package/dist/icons/Icon.d.ts

@@ -0,0 +1,489 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { IconNode, UixIcon, IconProps } from './types.js';
+
+/** Renders a glyph as an inline SVG; the props contract shared by every icon. */
+declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, className, style, ...rest }: IconProps, ref?: unknown): react.ReactElement<{
+    string?: number | string | undefined | undefined;
+    type?: string | undefined | undefined;
+    id?: string | undefined | undefined;
+    name?: string | undefined | undefined;
+    z?: number | string | undefined | undefined;
+    color?: string | undefined | undefined;
+    opacity?: number | string | undefined | undefined;
+    x?: number | string | undefined | undefined;
+    y?: number | string | undefined | undefined;
+    cursor?: number | string | undefined | undefined;
+    children?: react.ReactNode;
+    clipPath?: string | undefined | undefined;
+    radius?: number | string | undefined | undefined;
+    media?: string | undefined | undefined;
+    fontStyle?: number | string | undefined | undefined;
+    fontWeight?: number | string | undefined | undefined;
+    fontSize?: number | string | undefined | undefined;
+    fontFamily?: string | undefined | undefined;
+    height?: number | string | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    lang?: string | undefined | undefined;
+    tabIndex?: number | undefined | undefined;
+    role: string | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden": (boolean | "false" | "true") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label": string | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "false" | "true") | undefined;
+    "aria-multiline"?: (boolean | "false" | "true") | undefined;
+    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: react.ClipboardEventHandler<SVGSVGElement> | undefined;
+    onCopyCapture?: react.ClipboardEventHandler<SVGSVGElement> | undefined;
+    onCut?: react.ClipboardEventHandler<SVGSVGElement> | undefined;
+    onCutCapture?: react.ClipboardEventHandler<SVGSVGElement> | undefined;
+    onPaste?: react.ClipboardEventHandler<SVGSVGElement> | undefined;
+    onPasteCapture?: react.ClipboardEventHandler<SVGSVGElement> | undefined;
+    onCompositionEnd?: react.CompositionEventHandler<SVGSVGElement> | undefined;
+    onCompositionEndCapture?: react.CompositionEventHandler<SVGSVGElement> | undefined;
+    onCompositionStart?: react.CompositionEventHandler<SVGSVGElement> | undefined;
+    onCompositionStartCapture?: react.CompositionEventHandler<SVGSVGElement> | undefined;
+    onCompositionUpdate?: react.CompositionEventHandler<SVGSVGElement> | undefined;
+    onCompositionUpdateCapture?: react.CompositionEventHandler<SVGSVGElement> | undefined;
+    onFocus?: react.FocusEventHandler<SVGSVGElement> | undefined;
+    onFocusCapture?: react.FocusEventHandler<SVGSVGElement> | undefined;
+    onBlur?: react.FocusEventHandler<SVGSVGElement> | undefined;
+    onBlurCapture?: react.FocusEventHandler<SVGSVGElement> | undefined;
+    onChange?: react.FormEventHandler<SVGSVGElement> | undefined;
+    onChangeCapture?: react.FormEventHandler<SVGSVGElement> | undefined;
+    onBeforeInput?: react.InputEventHandler<SVGSVGElement> | undefined;
+    onBeforeInputCapture?: react.FormEventHandler<SVGSVGElement> | undefined;
+    onInput?: react.FormEventHandler<SVGSVGElement> | undefined;
+    onInputCapture?: react.FormEventHandler<SVGSVGElement> | undefined;
+    onReset?: react.FormEventHandler<SVGSVGElement> | undefined;
+    onResetCapture?: react.FormEventHandler<SVGSVGElement> | undefined;
+    onSubmit?: react.FormEventHandler<SVGSVGElement> | undefined;
+    onSubmitCapture?: react.FormEventHandler<SVGSVGElement> | undefined;
+    onInvalid?: react.FormEventHandler<SVGSVGElement> | undefined;
+    onInvalidCapture?: react.FormEventHandler<SVGSVGElement> | undefined;
+    onLoad?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onLoadCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onError?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onErrorCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onKeyDown?: react.KeyboardEventHandler<SVGSVGElement> | undefined;
+    onKeyDownCapture?: react.KeyboardEventHandler<SVGSVGElement> | undefined;
+    onKeyPress?: react.KeyboardEventHandler<SVGSVGElement> | undefined;
+    onKeyPressCapture?: react.KeyboardEventHandler<SVGSVGElement> | undefined;
+    onKeyUp?: react.KeyboardEventHandler<SVGSVGElement> | undefined;
+    onKeyUpCapture?: react.KeyboardEventHandler<SVGSVGElement> | undefined;
+    onAbort?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onAbortCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onCanPlay?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onCanPlayCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onCanPlayThrough?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onCanPlayThroughCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onDurationChange?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onDurationChangeCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onEmptied?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onEmptiedCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onEncrypted?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onEncryptedCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onEnded?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onEndedCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onLoadedData?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onLoadedDataCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onLoadedMetadata?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onLoadedMetadataCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onLoadStart?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onLoadStartCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onPause?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onPauseCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onPlay?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onPlayCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onPlaying?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onPlayingCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onProgress?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onProgressCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onRateChange?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onRateChangeCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onSeeked?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onSeekedCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onSeeking?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onSeekingCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onStalled?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onStalledCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onSuspend?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onSuspendCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onTimeUpdate?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onTimeUpdateCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onVolumeChange?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onVolumeChangeCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onWaiting?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onWaitingCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onAuxClick?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onAuxClickCapture?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onClick?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onClickCapture?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onContextMenu?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onContextMenuCapture?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onDoubleClick?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onDoubleClickCapture?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onDrag?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragCapture?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragEnd?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragEndCapture?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragEnter?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragEnterCapture?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragExit?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragExitCapture?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragLeave?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragLeaveCapture?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragOver?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragOverCapture?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragStart?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDragStartCapture?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDrop?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onDropCapture?: react.DragEventHandler<SVGSVGElement> | undefined;
+    onMouseDown?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onMouseDownCapture?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onMouseEnter?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onMouseLeave?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onMouseMove?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onMouseMoveCapture?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onMouseOut?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onMouseOutCapture?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onMouseOver?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onMouseOverCapture?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onMouseUp?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onMouseUpCapture?: react.MouseEventHandler<SVGSVGElement> | undefined;
+    onSelect?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onSelectCapture?: react.ReactEventHandler<SVGSVGElement> | undefined;
+    onTouchCancel?: react.TouchEventHandler<SVGSVGElement> | undefined;
+    onTouchCancelCapture?: react.TouchEventHandler<SVGSVGElement> | undefined;
+    onTouchEnd?: react.TouchEventHandler<SVGSVGElement> | undefined;
+    onTouchEndCapture?: react.TouchEventHandler<SVGSVGElement> | undefined;
+    onTouchMove?: react.TouchEventHandler<SVGSVGElement> | undefined;
+    onTouchMoveCapture?: react.TouchEventHandler<SVGSVGElement> | undefined;
+    onTouchStart?: react.TouchEventHandler<SVGSVGElement> | undefined;
+    onTouchStartCapture?: react.TouchEventHandler<SVGSVGElement> | undefined;
+    onPointerDown?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerDownCapture?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerMove?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerMoveCapture?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerUp?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerUpCapture?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerCancel?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerCancelCapture?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerEnter?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerLeave?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerOver?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerOverCapture?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerOut?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onPointerOutCapture?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onGotPointerCapture?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onGotPointerCaptureCapture?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onLostPointerCapture?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onLostPointerCaptureCapture?: react.PointerEventHandler<SVGSVGElement> | undefined;
+    onScroll?: react.UIEventHandler<SVGSVGElement> | undefined;
+    onScrollCapture?: react.UIEventHandler<SVGSVGElement> | undefined;
+    onWheel?: react.WheelEventHandler<SVGSVGElement> | undefined;
+    onWheelCapture?: react.WheelEventHandler<SVGSVGElement> | undefined;
+    onAnimationStart?: react.AnimationEventHandler<SVGSVGElement> | undefined;
+    onAnimationStartCapture?: react.AnimationEventHandler<SVGSVGElement> | undefined;
+    onAnimationEnd?: react.AnimationEventHandler<SVGSVGElement> | undefined;
+    onAnimationEndCapture?: react.AnimationEventHandler<SVGSVGElement> | undefined;
+    onAnimationIteration?: react.AnimationEventHandler<SVGSVGElement> | undefined;
+    onAnimationIterationCapture?: react.AnimationEventHandler<SVGSVGElement> | undefined;
+    onTransitionEnd?: react.TransitionEventHandler<SVGSVGElement> | undefined;
+    onTransitionEndCapture?: react.TransitionEventHandler<SVGSVGElement> | undefined;
+    end?: number | string | undefined | undefined;
+    alphabetic?: number | string | undefined | undefined;
+    ideographic?: number | string | undefined | undefined;
+    mathematical?: number | string | undefined | undefined;
+    accumulate?: "none" | "sum" | undefined | undefined;
+    local?: number | string | undefined | undefined;
+    hanging?: number | string | undefined | undefined;
+    unicode?: number | string | undefined | undefined;
+    fill: string;
+    clip?: number | string | undefined | undefined;
+    stroke: string;
+    r?: number | string | undefined | undefined;
+    filter?: string | undefined | undefined;
+    values?: string | undefined | undefined;
+    offset?: number | string | undefined | undefined;
+    dy?: number | string | undefined | undefined;
+    dx?: number | string | undefined | undefined;
+    transform?: string | undefined | undefined;
+    mask?: string | undefined | undefined;
+    path?: string | undefined | undefined;
+    max?: number | string | undefined | undefined;
+    method?: string | undefined | undefined;
+    min?: number | string | undefined | undefined;
+    target?: string | undefined | undefined;
+    width?: number | string | undefined | undefined;
+    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+    accentHeight?: number | string | undefined | undefined;
+    additive?: "replace" | "sum" | undefined | undefined;
+    alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit" | undefined | undefined;
+    allowReorder?: "no" | "yes" | undefined | undefined;
+    amplitude?: number | string | undefined | undefined;
+    arabicForm?: "initial" | "medial" | "terminal" | "isolated" | undefined | undefined;
+    ascent?: number | string | undefined | undefined;
+    attributeName?: string | undefined | undefined;
+    attributeType?: string | undefined | undefined;
+    autoReverse?: (boolean | "false" | "true") | undefined;
+    azimuth?: number | string | undefined | undefined;
+    baseFrequency?: number | string | undefined | undefined;
+    baselineShift?: number | string | undefined | undefined;
+    baseProfile?: number | string | undefined | undefined;
+    bbox?: number | string | undefined | undefined;
+    begin?: number | string | undefined | undefined;
+    bias?: number | string | undefined | undefined;
+    by?: number | string | undefined | undefined;
+    calcMode?: number | string | undefined | undefined;
+    capHeight?: number | string | undefined | undefined;
+    clipPathUnits?: number | string | undefined | undefined;
+    clipRule?: number | string | undefined | undefined;
+    colorInterpolation?: number | string | undefined | undefined;
+    colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit" | undefined | undefined;
+    colorProfile?: number | string | undefined | undefined;
+    colorRendering?: number | string | undefined | undefined;
+    contentScriptType?: number | string | undefined | undefined;
+    contentStyleType?: number | string | undefined | undefined;
+    cx?: number | string | undefined | undefined;
+    cy?: number | string | undefined | undefined;
+    d?: string | undefined | undefined;
+    decelerate?: number | string | undefined | undefined;
+    descent?: number | string | undefined | undefined;
+    diffuseConstant?: number | string | undefined | undefined;
+    direction?: number | string | undefined | undefined;
+    display?: number | string | undefined | undefined;
+    divisor?: number | string | undefined | undefined;
+    dominantBaseline?: "auto" | "use-script" | "no-change" | "reset-size" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "central" | "middle" | "text-after-edge" | "text-before-edge" | "inherit" | undefined | undefined;
+    dur?: number | string | undefined | undefined;
+    edgeMode?: number | string | undefined | undefined;
+    elevation?: number | string | undefined | undefined;
+    enableBackground?: number | string | undefined | undefined;
+    exponent?: number | string | undefined | undefined;
+    externalResourcesRequired?: (boolean | "false" | "true") | undefined;
+    fillOpacity?: number | string | undefined | undefined;
+    fillRule?: "nonzero" | "evenodd" | "inherit" | undefined | undefined;
+    filterRes?: number | string | undefined | undefined;
+    filterUnits?: number | string | undefined | undefined;
+    floodColor?: number | string | undefined | undefined;
+    floodOpacity?: number | string | undefined | undefined;
+    focusable: string | boolean;
+    fontSizeAdjust?: number | string | undefined | undefined;
+    fontStretch?: number | string | undefined | undefined;
+    fontVariant?: number | string | undefined | undefined;
+    format?: number | string | undefined | undefined;
+    fr?: number | string | undefined | undefined;
+    from?: number | string | undefined | undefined;
+    fx?: number | string | undefined | undefined;
+    fy?: number | string | undefined | undefined;
+    g1?: number | string | undefined | undefined;
+    g2?: number | string | undefined | undefined;
+    glyphName?: number | string | undefined | undefined;
+    glyphOrientationHorizontal?: number | string | undefined | undefined;
+    glyphOrientationVertical?: number | string | undefined | undefined;
+    glyphRef?: number | string | undefined | undefined;
+    gradientTransform?: string | undefined | undefined;
+    gradientUnits?: string | undefined | undefined;
+    horizAdvX?: number | string | undefined | undefined;
+    horizOriginX?: number | string | undefined | undefined;
+    href?: string | undefined | undefined;
+    imageRendering?: number | string | undefined | undefined;
+    in2?: number | string | undefined | undefined;
+    in?: string | undefined | undefined;
+    intercept?: number | string | undefined | undefined;
+    k1?: number | string | undefined | undefined;
+    k2?: number | string | undefined | undefined;
+    k3?: number | string | undefined | undefined;
+    k4?: number | string | undefined | undefined;
+    k?: number | string | undefined | undefined;
+    kernelMatrix?: number | string | undefined | undefined;
+    kernelUnitLength?: number | string | undefined | undefined;
+    kerning?: number | string | undefined | undefined;
+    keyPoints?: number | string | undefined | undefined;
+    keySplines?: number | string | undefined | undefined;
+    keyTimes?: number | string | undefined | undefined;
+    lengthAdjust?: number | string | undefined | undefined;
+    letterSpacing?: number | string | undefined | undefined;
+    lightingColor?: number | string | undefined | undefined;
+    limitingConeAngle?: number | string | undefined | undefined;
+    markerEnd?: string | undefined | undefined;
+    markerHeight?: number | string | undefined | undefined;
+    markerMid?: string | undefined | undefined;
+    markerStart?: string | undefined | undefined;
+    markerUnits?: number | string | undefined | undefined;
+    markerWidth?: number | string | undefined | undefined;
+    maskContentUnits?: number | string | undefined | undefined;
+    maskUnits?: number | string | undefined | undefined;
+    mode?: number | string | undefined | undefined;
+    numOctaves?: number | string | undefined | undefined;
+    operator?: number | string | undefined | undefined;
+    order?: number | string | undefined | undefined;
+    orient?: number | string | undefined | undefined;
+    orientation?: number | string | undefined | undefined;
+    origin?: number | string | undefined | undefined;
+    overflow?: number | string | undefined | undefined;
+    overlinePosition?: number | string | undefined | undefined;
+    overlineThickness?: number | string | undefined | undefined;
+    paintOrder?: number | string | undefined | undefined;
+    panose1?: number | string | undefined | undefined;
+    pathLength?: number | string | undefined | undefined;
+    patternContentUnits?: string | undefined | undefined;
+    patternTransform?: number | string | undefined | undefined;
+    patternUnits?: string | undefined | undefined;
+    pointerEvents?: number | string | undefined | undefined;
+    points?: string | undefined | undefined;
+    pointsAtX?: number | string | undefined | undefined;
+    pointsAtY?: number | string | undefined | undefined;
+    pointsAtZ?: number | string | undefined | undefined;
+    preserveAlpha?: (boolean | "false" | "true") | undefined;
+    preserveAspectRatio?: string | undefined | undefined;
+    primitiveUnits?: number | string | undefined | undefined;
+    refX?: number | string | undefined | undefined;
+    refY?: number | string | undefined | undefined;
+    renderingIntent?: number | string | undefined | undefined;
+    repeatCount?: number | string | undefined | undefined;
+    repeatDur?: number | string | undefined | undefined;
+    requiredExtensions?: number | string | undefined | undefined;
+    requiredFeatures?: number | string | undefined | undefined;
+    restart?: number | string | undefined | undefined;
+    result?: string | undefined | undefined;
+    rotate?: number | string | undefined | undefined;
+    rx?: number | string | undefined | undefined;
+    ry?: number | string | undefined | undefined;
+    scale?: number | string | undefined | undefined;
+    seed?: number | string | undefined | undefined;
+    shapeRendering?: number | string | undefined | undefined;
+    slope?: number | string | undefined | undefined;
+    spacing?: number | string | undefined | undefined;
+    specularConstant?: number | string | undefined | undefined;
+    specularExponent?: number | string | undefined | undefined;
+    speed?: number | string | undefined | undefined;
+    spreadMethod?: string | undefined | undefined;
+    startOffset?: number | string | undefined | undefined;
+    stdDeviation?: number | string | undefined | undefined;
+    stemh?: number | string | undefined | undefined;
+    stemv?: number | string | undefined | undefined;
+    stitchTiles?: number | string | undefined | undefined;
+    stopColor?: string | undefined | undefined;
+    stopOpacity?: number | string | undefined | undefined;
+    strikethroughPosition?: number | string | undefined | undefined;
+    strikethroughThickness?: number | string | undefined | undefined;
+    strokeDasharray?: string | number | undefined | undefined;
+    strokeDashoffset?: string | number | undefined | undefined;
+    strokeLinecap: string;
+    strokeLinejoin: string;
+    strokeMiterlimit?: number | string | undefined | undefined;
+    strokeOpacity?: number | string | undefined | undefined;
+    surfaceScale?: number | string | undefined | undefined;
+    systemLanguage?: number | string | undefined | undefined;
+    tableValues?: number | string | undefined | undefined;
+    targetX?: number | string | undefined | undefined;
+    targetY?: number | string | undefined | undefined;
+    textAnchor?: "start" | "middle" | "end" | "inherit" | undefined | undefined;
+    textDecoration?: number | string | undefined | undefined;
+    textLength?: number | string | undefined | undefined;
+    textRendering?: number | string | undefined | undefined;
+    to?: number | string | undefined | undefined;
+    transformOrigin?: string | undefined | undefined;
+    u1?: number | string | undefined | undefined;
+    u2?: number | string | undefined | undefined;
+    underlinePosition?: number | string | undefined | undefined;
+    underlineThickness?: number | string | undefined | undefined;
+    unicodeBidi?: number | string | undefined | undefined;
+    unicodeRange?: number | string | undefined | undefined;
+    unitsPerEm?: number | string | undefined | undefined;
+    vAlphabetic?: number | string | undefined | undefined;
+    vectorEffect?: number | string | undefined | undefined;
+    version?: string | undefined | undefined;
+    vertAdvY?: number | string | undefined | undefined;
+    vertOriginX?: number | string | undefined | undefined;
+    vertOriginY?: number | string | undefined | undefined;
+    vHanging?: number | string | undefined | undefined;
+    vIdeographic?: number | string | undefined | undefined;
+    viewBox: string;
+    viewTarget?: number | string | undefined | undefined;
+    visibility?: number | string | undefined | undefined;
+    vMathematical?: number | string | undefined | undefined;
+    widths?: number | string | undefined | undefined;
+    wordSpacing?: number | string | undefined | undefined;
+    writingMode?: number | string | undefined | undefined;
+    x1?: number | string | undefined | undefined;
+    x2?: number | string | undefined | undefined;
+    xChannelSelector?: string | undefined | undefined;
+    xHeight?: number | string | undefined | undefined;
+    xlinkActuate?: string | undefined | undefined;
+    xlinkArcrole?: string | undefined | undefined;
+    xlinkHref?: string | undefined | undefined;
+    xlinkRole?: string | undefined | undefined;
+    xlinkShow?: string | undefined | undefined;
+    xlinkTitle?: string | undefined | undefined;
+    xlinkType?: string | undefined | undefined;
+    xmlBase?: string | undefined | undefined;
+    xmlLang?: string | undefined | undefined;
+    xmlns: string;
+    xmlnsXlink?: string | undefined | undefined;
+    xmlSpace?: string | undefined | undefined;
+    y1?: number | string | undefined | undefined;
+    y2?: number | string | undefined | undefined;
+    yChannelSelector?: string | undefined | undefined;
+    zoomAndPan?: string | undefined | undefined;
+    key?: react.Key | null | undefined;
+    ref: unknown;
+    strokeWidth: string | number;
+    className: string;
+    style: CSSProperties | undefined;
+}, string | react.JSXElementConstructor<any>>;
+/** Makes a named, ref-forwarding component for one glyph (the generated `<Name>Icon` exports). */
+declare function createIcon(displayName: string, node: IconNode): UixIcon;
+
+export { createIcon, renderIcon };

package/dist/icons/Icon.js

@@ -0,0 +1,37 @@
+import { createElement, forwardRef } from "react";
+import { cx } from "../cx.js";
+const SIZES = /* @__PURE__ */ new Set(["sm", "md", "lg"]);
+function renderIcon(node, { size = "md", tone = "current", label, strokeWidth = 2, className, style, ...rest }, ref) {
+  const tokenSize = typeof size === "string" && SIZES.has(size);
+  const length = typeof size === "number" ? `${size}px` : tokenSize ? void 0 : size;
+  return createElement(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      focusable: "false",
+      className: cx("uix-icon", tokenSize && size !== "md" && `uix-icon--${size}`, tone !== "current" && `uix-icon--${tone}`, className),
+      style: length ? { width: length, height: length, ...style } : style,
+      role: label ? "img" : void 0,
+      "aria-label": label || void 0,
+      "aria-hidden": label ? void 0 : true,
+      ...rest
+    },
+    node.map(([tag, attrs], i) => createElement(tag, { key: i, ...attrs }))
+  );
+}
+function createIcon(displayName, node) {
+  const Component = forwardRef((props, ref) => renderIcon(node, props, ref));
+  Component.displayName = displayName;
+  return Component;
+}
+export {
+  createIcon,
+  renderIcon
+};

package/dist/icons/NamedIcon.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { IconName } from './glyphs.js';
+import { IconProps } from './types.js';
+
+interface IconByNameProps extends IconProps {
+    name: IconName;
+}
+/**
+ * An icon chosen by name at run time (e.g. from a config or an entity type). It imports the
+ * whole set; a fixed icon should use its own component (`ShieldCheckIcon`) so bundlers keep
+ * only the glyphs you use.
+ */
+declare const Icon: react.ForwardRefExoticComponent<IconByNameProps & react.RefAttributes<SVGSVGElement>>;
+
+export { Icon, type IconByNameProps };

package/dist/icons/NamedIcon.js

@@ -0,0 +1,9 @@
+import { forwardRef } from "react";
+import { renderIcon } from "./Icon.js";
+import { ICON_GLYPHS } from "./glyphs.js";
+const Icon = forwardRef(function Icon2({ name, ...props }, ref) {
+  return renderIcon(ICON_GLYPHS[name], props, ref);
+});
+export {
+  Icon
+};