@orianatech/pire 0.2.1 → 0.4.0

package/README.md

@@ -10,7 +10,8 @@ Requires Node 20+ and pnpm.
 ```bash
 pnpm install
 pnpm storybook        # docs + playground at http://localhost:6006
-pnpm build            # dist/ (ESM + CJS + .d.ts + CSS)
+pnpm build            # dist/ (ESM + CJS + .d.ts + CSS), icon codegen first
+pnpm icons:generate   # re-inline the Carbon glyphs listed in icon-map.ts
 pnpm typecheck        # tsc --noEmit
 pnpm lint             # biome
 ```
@@ -76,14 +77,45 @@ Override tokens, never component rules:
 
 ### Icons
 
-Names are Lucide slugs; the shipped pack is IBM Carbon, resolved through an internal map. Glyphs
-load from a CDN by default — self-host in production:
+**Zero configuration, and no network.** Every glyph is inlined into the bundle at build time and
+rendered as inline SVG, so icons paint offline, cost no requests, and report nothing to anyone.
+
+```tsx
+<Icon name="shopping-cart" size={20} />              {/* decorative: aria-hidden */}
+<Icon name="lock" size={20} label="Locked record" /> {/* meaningful: role="img" + aria-label */}
+```
+
+Names are canonical **Lucide slugs**; the shipped pack is IBM Carbon, reached through an internal
+map, so a pack swap never touches a call site. The same names are what the `icon` prop on `Button`,
+`IconButton`, `Card`, `KpiTile`, `Tabs`, `EmptyState` and `InlineMessage` takes.
+
+Glyphs are filled with `currentColor`, so an icon takes the colour of the text it sits in — style the
+container, not the icon. `size` is the pixel box: 16 in dense UI, 20 in headers, 24 in tiles.
+
+An unrecognised name renders an empty box of the right size and logs one `[pire]` console warning
+naming it. The warning is compiled out of production builds.
+
+The bundled set covers what the ERP screens use. For anything else, register the *inner* markup of a
+32×32 SVG once at startup:
 
 ```ts
 import { configureIcons } from '@orianatech/pire';
-configureIcons({ base: '/assets/icons/' });   // folder of <slug>.svg
+
+configureIcons({
+  resolve: (name) => (name === 'oriana-mark' ? '<circle cx="16" cy="16" r="8"/>' : undefined),
+});
 ```
 
+> **Upgrading from 0.3 or earlier.** Glyphs used to be fetched per render from `cdn.jsdelivr.net`,
+> which meant blank icons in an offline PWA, so apps self-hosted the SVGs and called
+> `configureIcons({ base })`. That is now unnecessary: **delete the `configureIcons({ base })` call
+> and the vendored `<slug>.svg` files.** `base` and `pack` are still accepted so existing code keeps
+> compiling, but they are ignored and warn in development. The `lucide` pack is gone —
+> `pack="lucide"` now renders the Carbon glyph.
+
+Adding a glyph to the library itself is one line in `src/components/core/icon-map.ts` plus a build;
+see the Icons section of `CLAUDE.md`.
+
 ## Migrating from the HTML/JSX prototypes
 
 | Prototype API | Package API |
@@ -104,7 +136,13 @@ configureIcons({ base: '/assets/icons/' });   // folder of <slug>.svg
 
 ## Toolchain notes
 
-- `pnpm build` runs `tsup` for the JS bundles, then `tsc -p tsconfig.build.json` for the
+- `pnpm build` first runs `scripts/generate-icon-data.mjs`, which inlines the Carbon SVGs listed in
+  `src/components/core/icon-map.ts` into a committed `icon-data.generated.ts`. `@carbon/icons` is a
+  **devDependency on purpose** — it depends on `@ibm/telemetry-js` and runs `ibmtelemetry` from a
+  `postinstall` script, which as a runtime dependency would execute in every app that installs Pire.
+  The generated file is committed because typecheck, lint, tests and Storybook all read `src/`
+  without building; its install script is denied in `pnpm-workspace.yaml`.
+- `pnpm build` then runs `tsup` for the JS bundles, then `tsc -p tsconfig.build.json` for the
   `.d.ts` files, then `scripts/postbuild-types.mjs`. tsup's own declaration pipeline is not
   compatible with the TypeScript 7 native compiler, so `dts` is off in `tsup.config.ts` —
   leave it that way. The post-pass makes the emitted declarations resolvable under

package/dist/components/core/Icon.d.cts

@@ -1,22 +1,37 @@
-import * as React from 'react';
+import type * as React from 'react';
+/** @deprecated Retained only so existing `pack` values still typecheck. Glyphs are bundled from
+ *  the Carbon pack; there is no second pack and no remote fetch, so the value is ignored. */
 export type IconPack = 'carbon' | 'lucide';
 export interface IconConfig {
-    /** Pack used when an <Icon> does not specify one. Default 'carbon'. */
+    /** @deprecated Ignored. The bundled Carbon pack is the only pack — `lucide` was a remote-URL
+     *  pack and no longer exists. Setting this warns in development. */
     pack?: IconPack;
-    /** Serve glyphs from your own origin: a folder of <slug>.svg files. Recommended in production. */
+    /** @deprecated Ignored — glyphs are inlined in the bundle, so there is nothing to serve from a
+     *  folder. Apps that vendored `<slug>.svg` files into `public/` to survive offline can delete
+     *  both the files and this call. Setting it warns in development. */
     base?: string;
+    /** Escape hatch for a glyph Pire does not bundle, or to override one. Return the *inner* markup
+     *  of a 32x32 SVG (`'<path d="…"/>'`), or `undefined` to fall through to the bundled set. The
+     *  string is injected as-is, so it must be authored markup, never user input. */
+    resolve?: (name: string) => string | undefined;
 }
-/** Point the whole app at a self-hosted glyph folder, or switch packs, once at startup. */
+/** Optional. The bundled Carbon set needs no configuration — this exists only to register glyphs
+ *  Pire does not ship, once at startup. */
 export declare function configureIcons(next: IconConfig): void;
 export interface IconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
-    /** Canonical (Lucide) slug, e.g. "shopping-cart". Mapped automatically for the Carbon pack. */
+    /** Canonical (Lucide) slug, e.g. "shopping-cart". Translated to the Carbon pack automatically. */
     name: string;
     /** Pixel box. 16 in dense UI, 20 in headers, 24 in tiles. */
     size?: number;
     /** Accessible name. Omit for decorative icons — they are hidden from assistive tech. */
     label?: string;
+    /** @deprecated Ignored. See {@link IconConfig.pack}. */
     pack?: IconPack;
 }
-/** Glyph painted as a CSS mask over currentColor, so it inherits text colour everywhere.
- *  A missing glyph degrades to empty space rather than a solid block. */
+/** Glyph rendered as inline SVG filled with `currentColor`, so it inherits text colour everywhere
+ *  and paints with no network at all — which the previous CDN-backed implementation did not, leaving
+ *  every icon blank offline in the PWAs that consume this library.
+ *
+ *  An unknown name still renders nothing, so a typo cannot collapse a layout, but it warns in
+ *  development: the silent blank gap was the failure mode worth killing. */
 export declare function Icon({ name, size, label, pack, style, ...rest }: IconProps): React.JSX.Element;

package/dist/components/core/Icon.d.ts

@@ -1,23 +1,38 @@
-import * as React from 'react';
+import type * as React from 'react';
+/** @deprecated Retained only so existing `pack` values still typecheck. Glyphs are bundled from
+ *  the Carbon pack; there is no second pack and no remote fetch, so the value is ignored. */
 export type IconPack = 'carbon' | 'lucide';
 export interface IconConfig {
-    /** Pack used when an <Icon> does not specify one. Default 'carbon'. */
+    /** @deprecated Ignored. The bundled Carbon pack is the only pack — `lucide` was a remote-URL
+     *  pack and no longer exists. Setting this warns in development. */
     pack?: IconPack;
-    /** Serve glyphs from your own origin: a folder of <slug>.svg files. Recommended in production. */
+    /** @deprecated Ignored — glyphs are inlined in the bundle, so there is nothing to serve from a
+     *  folder. Apps that vendored `<slug>.svg` files into `public/` to survive offline can delete
+     *  both the files and this call. Setting it warns in development. */
     base?: string;
+    /** Escape hatch for a glyph Pire does not bundle, or to override one. Return the *inner* markup
+     *  of a 32x32 SVG (`'<path d="…"/>'`), or `undefined` to fall through to the bundled set. The
+     *  string is injected as-is, so it must be authored markup, never user input. */
+    resolve?: (name: string) => string | undefined;
 }
-/** Point the whole app at a self-hosted glyph folder, or switch packs, once at startup. */
+/** Optional. The bundled Carbon set needs no configuration — this exists only to register glyphs
+ *  Pire does not ship, once at startup. */
 export declare function configureIcons(next: IconConfig): void;
 export interface IconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
-    /** Canonical (Lucide) slug, e.g. "shopping-cart". Mapped automatically for the Carbon pack. */
+    /** Canonical (Lucide) slug, e.g. "shopping-cart". Translated to the Carbon pack automatically. */
     name: string;
     /** Pixel box. 16 in dense UI, 20 in headers, 24 in tiles. */
     size?: number;
     /** Accessible name. Omit for decorative icons — they are hidden from assistive tech. */
     label?: string;
+    /** @deprecated Ignored. See {@link IconConfig.pack}. */
     pack?: IconPack;
 }
-/** Glyph painted as a CSS mask over currentColor, so it inherits text colour everywhere.
- *  A missing glyph degrades to empty space rather than a solid block. */
+/** Glyph rendered as inline SVG filled with `currentColor`, so it inherits text colour everywhere
+ *  and paints with no network at all — which the previous CDN-backed implementation did not, leaving
+ *  every icon blank offline in the PWAs that consume this library.
+ *
+ *  An unknown name still renders nothing, so a typo cannot collapse a layout, but it warns in
+ *  development: the silent blank gap was the failure mode worth killing. */
 export declare function Icon({ name, size, label, pack, style, ...rest }: IconProps): React.JSX.Element;
 //# sourceMappingURL=Icon.d.ts.map

package/dist/components/core/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/core/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AA4B3C,MAAM,WAAW,UAAU;IACzB,uEAAuE;IACvE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,kGAAkG;IAClG,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,2FAA2F;AAC3F,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,QAAsC;AAErF,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACxF,+FAA+F;IAC/F,IAAI,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;yEACyE;AACzE,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,qBAuB/E"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/core/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AA2BpC;6FAC6F;AAC7F,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3C,MAAM,WAAW,UAAU;IACzB;wEACoE;IACpE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;yEAEqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;qFAEiF;IACjF,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CAChD;AAID;2CAC2C;AAC3C,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAerD;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACxF,kGAAkG;IAClG,IAAI,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;;;4EAK4E;AAC5E,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,qBAqC/E"}

package/dist/components/core/icon-data.generated.d.cts

@@ -0,0 +1 @@
+export declare const ICON_MARKUP: Record<string, string>;

package/dist/components/core/icon-data.generated.d.ts

@@ -0,0 +1,2 @@
+export declare const ICON_MARKUP: Record<string, string>;
+//# sourceMappingURL=icon-data.generated.d.ts.map

package/dist/components/core/icon-data.generated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-data.generated.d.ts","sourceRoot":"","sources":["../../../src/components/core/icon-data.generated.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAgE9C,CAAC"}

package/dist/components/core/icon-map.d.cts

@@ -0,0 +1,13 @@
+/** Canonical Pire icon names are Lucide slugs; the shipped IBM Carbon pack is reached through
+ *  this map, so swapping packs never touches a call site. A new icon name used by a component
+ *  must be added here — that is the whole registration step.
+ *
+ *  This file is also the single source of truth for *which glyphs get vendored*:
+ *  `scripts/generate-icon-data.mjs` reads it and inlines the matching SVG from
+ *  `@carbon/icons` into `icon-data.generated.ts`. The script cannot import TypeScript, so it
+ *  parses this object textually. **Every entry must stay a literal `'name': 'slug',` pair.**
+ *  A spread, a computed key or a template literal is invisible to the generator: the glyph
+ *  never gets vendored and `Icon` warns at runtime instead of rendering. Multiple names may
+ *  point at one slug (`boxes` and `package` both mean `box`); the generator de-duplicates.
+ */
+export declare const CARBON_MAP: Record<string, string>;

package/dist/components/core/icon-map.d.ts

@@ -0,0 +1,14 @@
+/** Canonical Pire icon names are Lucide slugs; the shipped IBM Carbon pack is reached through
+ *  this map, so swapping packs never touches a call site. A new icon name used by a component
+ *  must be added here — that is the whole registration step.
+ *
+ *  This file is also the single source of truth for *which glyphs get vendored*:
+ *  `scripts/generate-icon-data.mjs` reads it and inlines the matching SVG from
+ *  `@carbon/icons` into `icon-data.generated.ts`. The script cannot import TypeScript, so it
+ *  parses this object textually. **Every entry must stay a literal `'name': 'slug',` pair.**
+ *  A spread, a computed key or a template literal is invisible to the generator: the glyph
+ *  never gets vendored and `Icon` warns at runtime instead of rendering. Multiple names may
+ *  point at one slug (`boxes` and `package` both mean `box`); the generator de-duplicates.
+ */
+export declare const CARBON_MAP: Record<string, string>;
+//# sourceMappingURL=icon-map.d.ts.map

package/dist/components/core/icon-map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-map.d.ts","sourceRoot":"","sources":["../../../src/components/core/icon-map.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiB7C,CAAC"}

package/dist/components/feedback/Skeleton.d.cts

@@ -0,0 +1,43 @@
+import type * as React from 'react';
+export type SkeletonShape = 'text' | 'block' | 'circle';
+export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** text — a line of copy; block — a card, chart or image; circle — an avatar. */
+    shape?: SkeletonShape;
+    /** Overrides the shape's default. A percentage reads better than a pixel count in a
+     *  fluid layout, and keeps the placeholder honest when the real value is unknown. */
+    width?: number | string;
+    height?: number | string;
+}
+/** Loading placeholder for content whose shape is known before its value is.
+ *
+ *  Deliberately `aria-hidden`: a screen reader gains nothing from "graphic, graphic, graphic",
+ *  and announcing placeholders as content is worse than silence. Announce the wait once, on the
+ *  region that is loading — `aria-busy="true"` on the container, or a live-region message — and
+ *  let the skeleton be purely visual. Nothing inside is focusable, so keyboard order is
+ *  unaffected while the data is in flight.
+ *
+ *  The shimmer is suppressed under `prefers-reduced-motion`; the placeholder still reads as one
+ *  because the shape and the surface contrast carry it, not the animation. */
+export declare function Skeleton({ shape, width, height, className, style, ...rest }: SkeletonProps): React.JSX.Element;
+export interface SkeletonTableColumn {
+    align?: 'left' | 'right' | 'center';
+    /** Fixed column width. Omit to let the column share the free space, as DataTable does. */
+    width?: number | string;
+    /** Right-aligns the bar. Mirrors DataTable's column flag so a loading table and a loaded one
+     *  put their numbers in the same place. */
+    numeric?: boolean;
+}
+export interface SkeletonTableRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** A column count, or one descriptor per column when alignment or width matters. */
+    columns: number | SkeletonTableColumn[];
+    /** Must match the DataTable it stands in for, or the rows jump on load. */
+    density?: 'condensed' | 'regular' | 'comfortable';
+}
+/** One placeholder row, sized to line up with `DataTable` — same row height per density, same
+ *  cell padding, same bottom rule. Render a handful inside `.pire-table-wrap` (or above a real
+ *  table's body) while the first page loads, so the grid does not resize when it arrives.
+ *
+ *  It is not a real `<tr>` and cannot be handed to `DataTable` as a row: DataTable builds its
+ *  collection from `rows`, and React Aria's table owns everything under it. Use it in place of
+ *  the table, not inside one. */
+export declare function SkeletonTableRow({ columns, density, className, style, ...rest }: SkeletonTableRowProps): React.JSX.Element;

package/dist/components/feedback/Skeleton.d.ts

@@ -0,0 +1,44 @@
+import type * as React from 'react';
+export type SkeletonShape = 'text' | 'block' | 'circle';
+export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** text — a line of copy; block — a card, chart or image; circle — an avatar. */
+    shape?: SkeletonShape;
+    /** Overrides the shape's default. A percentage reads better than a pixel count in a
+     *  fluid layout, and keeps the placeholder honest when the real value is unknown. */
+    width?: number | string;
+    height?: number | string;
+}
+/** Loading placeholder for content whose shape is known before its value is.
+ *
+ *  Deliberately `aria-hidden`: a screen reader gains nothing from "graphic, graphic, graphic",
+ *  and announcing placeholders as content is worse than silence. Announce the wait once, on the
+ *  region that is loading — `aria-busy="true"` on the container, or a live-region message — and
+ *  let the skeleton be purely visual. Nothing inside is focusable, so keyboard order is
+ *  unaffected while the data is in flight.
+ *
+ *  The shimmer is suppressed under `prefers-reduced-motion`; the placeholder still reads as one
+ *  because the shape and the surface contrast carry it, not the animation. */
+export declare function Skeleton({ shape, width, height, className, style, ...rest }: SkeletonProps): React.JSX.Element;
+export interface SkeletonTableColumn {
+    align?: 'left' | 'right' | 'center';
+    /** Fixed column width. Omit to let the column share the free space, as DataTable does. */
+    width?: number | string;
+    /** Right-aligns the bar. Mirrors DataTable's column flag so a loading table and a loaded one
+     *  put their numbers in the same place. */
+    numeric?: boolean;
+}
+export interface SkeletonTableRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** A column count, or one descriptor per column when alignment or width matters. */
+    columns: number | SkeletonTableColumn[];
+    /** Must match the DataTable it stands in for, or the rows jump on load. */
+    density?: 'condensed' | 'regular' | 'comfortable';
+}
+/** One placeholder row, sized to line up with `DataTable` — same row height per density, same
+ *  cell padding, same bottom rule. Render a handful inside `.pire-table-wrap` (or above a real
+ *  table's body) while the first page loads, so the grid does not resize when it arrives.
+ *
+ *  It is not a real `<tr>` and cannot be handed to `DataTable` as a row: DataTable builds its
+ *  collection from `rows`, and React Aria's table owns everything under it. Use it in place of
+ *  the table, not inside one. */
+export declare function SkeletonTableRow({ columns, density, className, style, ...rest }: SkeletonTableRowProps): React.JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/feedback/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,iFAAiF;IACjF,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;yFACqF;IACrF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;8EAS8E;AAC9E,wBAAgB,QAAQ,CAAC,EAAE,KAAc,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,qBAKnG;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;+CAC2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnG,oFAAoF;IACpF,OAAO,EAAE,MAAM,GAAG,mBAAmB,EAAE,CAAC;IACxC,2EAA2E;IAC3E,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,aAAa,CAAC;CACnD;AAOD;;;;;;iCAMiC;AACjC,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAmB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,qBAmBlH"}

package/dist/components/forms/MultiComboBox.d.cts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { ComboBoxOption } from './ComboBox.cjs';
+export interface MultiComboBoxProps {
+    label?: React.ReactNode;
+    /** Selected values, in the order they were picked. */
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (values: string[]) => void;
+    /**
+     * Free-text as typed, on every keystroke.
+     *
+     * Server-side search is only partly supported, exactly as on ComboBox. `options` is passed
+     * to React Aria as `defaultItems`, so React Aria applies its own local "contains" filter on
+     * top of whatever you supply: any result whose `label` does not literally contain the typed
+     * text is hidden client-side, and when the local filter matches nothing the menu closes.
+     * Fuzzy, synonym, code-to-description and server-ranked matches are therefore dropped. Use
+     * this to observe input (analytics, a debounced prefetch), or for server search only where
+     * the returned labels are guaranteed to contain the query as a substring.
+     */
+    onInputChange?: (text: string) => void;
+    options?: Array<string | ComboBoxOption>;
+    placeholder?: string;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isReadOnly?: boolean;
+    /** Let Enter commit text that is not in `options` — how product tags get coined. */
+    allowsCustomValue?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    name?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** Multi-value type-ahead: pick several options, each shown as a removable chip, and — with
+ *  `allowsCustomValue` — coin new ones by typing. Product tags, cost-centre sets, watchers.
+ *
+ *  A separate component rather than a mode on ComboBox: ComboBox's `value` is a `string | null`
+ *  and its `onChange` emits one key, while multi-select needs an array on both. Folding the two
+ *  together would put a discriminated union in front of every existing consumer of
+ *  `ComboBoxProps` — a breaking change in exchange for a purely additive feature.
+ *
+ *  Three things worth knowing before you use it:
+ *
+ *  - **Free text commits on Enter, never on blur.** React Aria treats the input text as
+ *    independent of the selection in multi-select mode, so leaving the field discards whatever
+ *    was typed but not committed. The chips are the only record of what was entered.
+ *  - **Backspace on an empty input removes the last chip.** The handler runs in the capture
+ *    phase because React Aria's own key handling sits on the same input and would otherwise act
+ *    on the same key.
+ *  - **The chips are plain `Tag`s, not a React Aria TagGroup.** React Aria's ComboBox builds its
+ *    listbox collection by shallow-rendering its entire subtree, which swallows any collection
+ *    component nested inside it — a TagGroup there registers its tags as listbox items and then
+ *    crashes looking for grid state. Each chip's remove button is an ordinary Tab stop instead,
+ *    and removals are announced through the live region below. */
+export declare function MultiComboBox({ label, value, defaultValue, onChange, onInputChange, options, description, errorMessage, allowsCustomValue, size, fullWidth, className, style, ...rest }: MultiComboBoxProps): React.JSX.Element;

package/dist/components/forms/MultiComboBox.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import type { ComboBoxOption } from './ComboBox.js';
+export interface MultiComboBoxProps {
+    label?: React.ReactNode;
+    /** Selected values, in the order they were picked. */
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (values: string[]) => void;
+    /**
+     * Free-text as typed, on every keystroke.
+     *
+     * Server-side search is only partly supported, exactly as on ComboBox. `options` is passed
+     * to React Aria as `defaultItems`, so React Aria applies its own local "contains" filter on
+     * top of whatever you supply: any result whose `label` does not literally contain the typed
+     * text is hidden client-side, and when the local filter matches nothing the menu closes.
+     * Fuzzy, synonym, code-to-description and server-ranked matches are therefore dropped. Use
+     * this to observe input (analytics, a debounced prefetch), or for server search only where
+     * the returned labels are guaranteed to contain the query as a substring.
+     */
+    onInputChange?: (text: string) => void;
+    options?: Array<string | ComboBoxOption>;
+    placeholder?: string;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isReadOnly?: boolean;
+    /** Let Enter commit text that is not in `options` — how product tags get coined. */
+    allowsCustomValue?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    name?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** Multi-value type-ahead: pick several options, each shown as a removable chip, and — with
+ *  `allowsCustomValue` — coin new ones by typing. Product tags, cost-centre sets, watchers.
+ *
+ *  A separate component rather than a mode on ComboBox: ComboBox's `value` is a `string | null`
+ *  and its `onChange` emits one key, while multi-select needs an array on both. Folding the two
+ *  together would put a discriminated union in front of every existing consumer of
+ *  `ComboBoxProps` — a breaking change in exchange for a purely additive feature.
+ *
+ *  Three things worth knowing before you use it:
+ *
+ *  - **Free text commits on Enter, never on blur.** React Aria treats the input text as
+ *    independent of the selection in multi-select mode, so leaving the field discards whatever
+ *    was typed but not committed. The chips are the only record of what was entered.
+ *  - **Backspace on an empty input removes the last chip.** The handler runs in the capture
+ *    phase because React Aria's own key handling sits on the same input and would otherwise act
+ *    on the same key.
+ *  - **The chips are plain `Tag`s, not a React Aria TagGroup.** React Aria's ComboBox builds its
+ *    listbox collection by shallow-rendering its entire subtree, which swallows any collection
+ *    component nested inside it — a TagGroup there registers its tags as listbox items and then
+ *    crashes looking for grid state. Each chip's remove button is an ordinary Tab stop instead,
+ *    and removals are announced through the live region below. */
+export declare function MultiComboBox({ label, value, defaultValue, onChange, onInputChange, options, description, errorMessage, allowsCustomValue, size, fullWidth, className, style, ...rest }: MultiComboBoxProps): React.JSX.Element;
+//# sourceMappingURL=MultiComboBox.d.ts.map

package/dist/components/forms/MultiComboBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/MultiComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAKD;;;;;;;;;;;;;;;;;;;;kEAoBkE;AAClE,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAY,EAC/F,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,IAAW,EACzD,SAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,qBAiHlE"}

package/dist/components/forms/TextArea.d.cts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+export interface TextAreaProps {
+    label?: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    /** Receives the raw string value. */
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    /** Help text below the field. Replaced by errorMessage when invalid. */
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** Visible lines before scrolling. Three is the ERP default: an address or a short note. */
+    rows?: number;
+    /** Grow with the content instead of scrolling. Off by default — see the component note. */
+    autoGrow?: boolean;
+    /** Ceiling for `autoGrow`, in lines. Beyond it the field scrolls, so a pasted essay
+     *  cannot push the form's buttons off screen. */
+    maxRows?: number;
+    fullWidth?: boolean;
+    name?: string;
+    autoFocus?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    textAreaRef?: React.Ref<HTMLTextAreaElement>;
+}
+/** Multi-line text entry — notes, addresses, rejection reasons. The prop API is Input's, so a
+ *  field can be swapped between the two without relearning; labels, descriptions and errors are
+ *  wired up by React Aria, so no manual aria-describedby is ever needed.
+ *
+ *  `autoGrow` is opt-in, not always-on, for two reasons. It costs a synchronous measure-and-write
+ *  on every keystroke, and in a dense form it makes every field below the one being typed in jump
+ *  — the wrong trade in a screen the user is tabbing through. Turn it on where the content length
+ *  is genuinely unknown (a long free-text comment) and leave it off everywhere else. When on, the
+ *  height is only written when it actually changed, so a keystroke that does not wrap costs no
+ *  layout; and the resize grip is removed, since a manual height would be overwritten on the next
+ *  keystroke anyway. */
+export declare function TextArea({ label, description, errorMessage, size, rows, autoGrow, maxRows, fullWidth, className, style, textAreaRef, onChange, ...rest }: TextAreaProps): React.JSX.Element;

package/dist/components/forms/TextArea.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+export interface TextAreaProps {
+    label?: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    /** Receives the raw string value. */
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    /** Help text below the field. Replaced by errorMessage when invalid. */
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** Visible lines before scrolling. Three is the ERP default: an address or a short note. */
+    rows?: number;
+    /** Grow with the content instead of scrolling. Off by default — see the component note. */
+    autoGrow?: boolean;
+    /** Ceiling for `autoGrow`, in lines. Beyond it the field scrolls, so a pasted essay
+     *  cannot push the form's buttons off screen. */
+    maxRows?: number;
+    fullWidth?: boolean;
+    name?: string;
+    autoFocus?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    textAreaRef?: React.Ref<HTMLTextAreaElement>;
+}
+/** Multi-line text entry — notes, addresses, rejection reasons. The prop API is Input's, so a
+ *  field can be swapped between the two without relearning; labels, descriptions and errors are
+ *  wired up by React Aria, so no manual aria-describedby is ever needed.
+ *
+ *  `autoGrow` is opt-in, not always-on, for two reasons. It costs a synchronous measure-and-write
+ *  on every keystroke, and in a dense form it makes every field below the one being typed in jump
+ *  — the wrong trade in a screen the user is tabbing through. Turn it on where the content length
+ *  is genuinely unknown (a long free-text comment) and leave it off everywhere else. When on, the
+ *  height is only written when it actually changed, so a keystroke that does not wrap costs no
+ *  layout; and the resize grip is removed, since a manual height would be overwritten on the next
+ *  keystroke anyway. */
+export declare function TextArea({ label, description, errorMessage, size, rows, autoGrow, maxRows, fullWidth, className, style, textAreaRef, onChange, ...rest }: TextAreaProps): React.JSX.Element;
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/components/forms/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;qDACiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAC9C;AAED;;;;;;;;;;wBAUwB;AACxB,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,IAAW,EAAE,IAAQ,EAAE,QAAQ,EAC1F,OAAO,EAAE,SAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,qBAsD7F"}

package/dist/components/navigation/ShellBar.d.cts

@@ -8,10 +8,17 @@ export interface ShellBarProps extends Omit<React.HTMLAttributes<HTMLElement>, '
     title?: React.ReactNode;
     onMenu?: () => void;
     onSearch?: () => void;
+    /** Accessible name for the menu button. Defaults to English, and the bar has no access to the app's
+     *  catalogue — a Spanish product must pass its own or ship an English screen-reader label. */
+    menuLabel?: string;
+    /** Accessible name for the search button, for the same reason as {@link ShellBarProps.menuLabel}.
+     *  Until this existed the only way to localise it was to drop `onSearch` and re-render the icon by
+     *  hand, which is how a shell ends up with two search icons. */
+    searchLabel?: string;
     /** IconButtons with variant="inverse". */
     actions?: React.ReactNode;
     /** Full name — initials render into the avatar. */
     user?: string;
 }
 /** Fixed 48px application chrome. One per page, always the first landmark. */
-export declare function ShellBar({ product, monogram, title, onMenu, onSearch, actions, user, className, ...rest }: ShellBarProps): React.JSX.Element;
+export declare function ShellBar({ product, monogram, title, onMenu, onSearch, menuLabel, searchLabel, actions, user, className, ...rest }: ShellBarProps): React.JSX.Element;

package/dist/components/navigation/ShellBar.d.ts

@@ -8,11 +8,18 @@ export interface ShellBarProps extends Omit<React.HTMLAttributes<HTMLElement>, '
     title?: React.ReactNode;
     onMenu?: () => void;
     onSearch?: () => void;
+    /** Accessible name for the menu button. Defaults to English, and the bar has no access to the app's
+     *  catalogue — a Spanish product must pass its own or ship an English screen-reader label. */
+    menuLabel?: string;
+    /** Accessible name for the search button, for the same reason as {@link ShellBarProps.menuLabel}.
+     *  Until this existed the only way to localise it was to drop `onSearch` and re-render the icon by
+     *  hand, which is how a shell ends up with two search icons. */
+    searchLabel?: string;
     /** IconButtons with variant="inverse". */
     actions?: React.ReactNode;
     /** Full name — initials render into the avatar. */
     user?: string;
 }
 /** Fixed 48px application chrome. One per page, always the first landmark. */
-export declare function ShellBar({ product, monogram, title, onMenu, onSearch, actions, user, className, ...rest }: ShellBarProps): React.JSX.Element;
+export declare function ShellBar({ product, monogram, title, onMenu, onSearch, menuLabel, searchLabel, actions, user, className, ...rest }: ShellBarProps): React.JSX.Element;
 //# sourceMappingURL=ShellBar.d.ts.map

package/dist/components/navigation/ShellBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShellBar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/ShellBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACrF,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAID,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,qBAaxH"}
+{"version":3,"file":"ShellBar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/ShellBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACrF,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;kGAC8F;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;oEAEgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAID,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,SAA6B,EAClG,WAAsB,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,qBAa3E"}