@cratis/components 2.9.0 → 3.0.0

package/README.md

@@ -7,8 +7,8 @@ A collection of React components for building modern applications with Cratis.
 ### Minimum Versions
 
 - TypeScript: 4.7+
-- React: 18.0+ or 19.0+
-- Node.js: 16+ (for development)
+- React: 19.0+
+- Node.js: 18+ (for development)
 
 ### TypeScript Configuration
 
@@ -16,32 +16,55 @@ This package is compatible with all modern TypeScript `moduleResolution` strateg
 
 - ✅ `"bundler"` (recommended for Vite, esbuild, webpack 5+)
 - ✅ `"node16"` / `"nodenext"` (for Node.js projects)
-- ✅ `"node"` (legacy, but supported)
 
-The package provides dual CommonJS and ES Module builds with proper conditional exports for optimal module resolution and tree-shaking.
+The package is **ESM-only** (`"type": "module"`) — PrimeReact 11 dropped the
+CommonJS build. It ships subpath `exports` with per-entry `types` for optimal
+module resolution and tree-shaking. Consume it from an ESM or bundler context;
+there is no `require()` entry.
 
 ## Installation
 
 ```bash
-npm install @cratis/components primereact primeicons
+npm install @cratis/components primereact @primereact/core @primereact/headless primeicons
 # or
-yarn add @cratis/components primereact primeicons
+yarn add @cratis/components primereact @primereact/core @primereact/headless primeicons
 ```
 
-`primereact` and `primeicons` are peer dependencies — installing them in your
-app ensures a single copy is shared with the wrappers in this package. The
-`@cratis/arc*` packages and `react`/`react-dom` are also peer dependencies;
-you typically already have them.
+**PrimeReact is a peer dependency** as of 3.0.0. You install it; the library uses
+your copy. This is deliberate: when `primereact` was a regular dependency, an app
+that also depended on it could end up with **two copies** — and two copies mean two
+`PrimeReactProvider` React contexts, so components rendered from the library read a
+different config, theme and z-index registry than components you render yourself.
+Nothing errors; overlays just stack wrongly and `pt` / `unstyled` silently fail to
+apply. If your app carries a `resolutions` / `overrides` pin to collapse PrimeReact
+into one copy, you can now delete it.
+
+`primereact` pins `@primereact/core` and `@primereact/headless` to its own exact
+version, so one `primereact@11.x` install gives you matching copies of all three;
+declaring them is what makes a strict installer (pnpm, Yarn PnP) resolve them for the
+library too. `@primereact/types` is an **optional** peer — needed only if your own
+code imports the prop types the wrappers re-export.
+
+The other **peer dependencies** you provide are `react` / `react-dom` (**19+**), the
+`@cratis/arc*` packages (`>=20.3.1 <22` — Arc 20 and 21 both work), `reflect-metadata`
+and `tsyringe`; you typically already have these in a Cratis app. `pixi.js`,
+`framer-motion`, `allotment` and `react-icons` remain regular dependencies and are
+installed for you. The styled `@primeuix/themes` presets are optional and only needed
+if you opt into a licensed preset (see [Styling](#styling)).
+
+### Stylesheets
+
+Component CSS is no longer imported by the JavaScript — import it once in your app
+entry point, in this order:
 
-The following are **optional** peer dependencies, only required if you use the
-component that depends on them:
-
-| Component | Optional peer |
-|---|---|
-| `PivotViewer` | `pixi.js` (canvas) and `framer-motion` (animated panels) |
-| `DataPage` resizable layout | `allotment` |
+```ts
+import '@cratis/components/tokens';   // the --cratis-* token layer
+import '@cratis/components/styles';   // every component stylesheet, in one file
+import '@cratis/components/theme';    // optional — the license-free baseline look
+```
 
-Install them only when you reach for the corresponding component.
+`./styles` also vendors `allotment/dist/style.css`, which `DataPage` needs for its
+split view, so you do not have to import that yourself.
 
 ## Usage
 
@@ -72,7 +95,9 @@ Components:
 - `@cratis/components/DataPage`
 - `@cratis/components/DataTables`
 - `@cratis/components/Dialogs`
+- `@cratis/components/Display` — `Tag`, `Badge`, `Chip`, `Skeleton`, `Avatar`, `ProgressBar`
 - `@cratis/components/Dropdown`
+- `@cratis/components/Notifications` — `Toaster`, `toast`, `toastCommandResult`
 - `@cratis/components/ObjectContentEditor`
 - `@cratis/components/ObjectNavigationalBar`
 - `@cratis/components/PivotViewer`
@@ -83,8 +108,9 @@ Components:
 
 Stylesheets:
 
-- `@cratis/components/styles` — Tailwind utilities + Cratis CSS variable tokens (single stylesheet, recommended)
-- `@cratis/components/tokens` — only the `--cratis-*` CSS variable tokens (for consumers using their own utility CSS solution)
+- `@cratis/components/theme` — the **Cratis baseline theme** (light + dark, no PrimeUI license); import it and add `class="cratis-theme"` to skin every component from the token layer
+- `@cratis/components/styles` — **required**: every component stylesheet, the Tailwind utilities used inside the package, and the `allotment` rules `DataPage` needs, in one file
+- `@cratis/components/tokens` — **required**: the `--cratis-*` CSS variable tokens every component reads from
 
 ## Styling
 
@@ -93,41 +119,43 @@ Styling is designed to stay out of the way: choose the setup that matches how
 much control you want, and the other layers stay invisible.
 
 > **Tip — see each setup live:** every Storybook story includes a **Styling**
-> toolbar (paintbrush icon) that flips between five modes that demonstrate
-> the three setups below: *Lara Dark Blue*, *Lara Light Blue*, *Themed with
-> custom palette*, *Unstyled (bare structure)*, and *Unstyled + Tailwind pt*.
-> Open any story (`yarn dev`) and switch modes to see the same component under
-> each setup.
+> toolbar (paintbrush icon) that flips between the modes demonstrating the
+> setups below: *Aura Dark* and *Aura Light* (a licensed `@primeuix/themes`
+> preset), *Cratis baseline theme* (light and dark, no license), *Unstyled
+> (bare structure)*, and *Unstyled + Tailwind pt*. Open any story (`yarn dev`)
+> and switch modes to see the same component under each setup.
 
 ### TL;DR — choose a styling setup
 
-| Setup | When | Effort | What you write |
-|---|---|---|---|
-| **Use a PrimeReact theme** | You want components to look good immediately and tweak from there. | Lowest | Theme CSS import + provider |
-| **Use a custom palette on top of a PrimeReact theme** | You want PrimeReact's structure but your own colors. | Low | A PrimeReact theme + CSS variable overrides |
-| **Use fully unstyled mode** | You're integrating into a tightly controlled design system. | Highest | `unstyled: true` + a `pt` preset in CSS or Tailwind |
+| Setup | When | Effort | License | What you write |
+|---|---|---|---|---|
+| **Cratis baseline theme** | You want a polished default look with no license. | Lowest | None | `unstyled` + `import '@cratis/components/theme'` + `class="cratis-theme"` |
+| **A styled `@primeuix/themes` preset** | You want a prebuilt design system to tweak from. | Low | PrimeUI key | `value={{ theme: { preset } }}` on the provider |
+| **A custom palette over a preset** | You want the preset's structure but your own colors. | Low | PrimeUI key | A preset + CSS variable overrides |
+| **Fully unstyled** | You're integrating into a tightly controlled design system. | Highest | None | `unstyled: true` + a `pt` preset in CSS or Tailwind |
 
-> **Why the first two options still load a PrimeReact theme**
+> **Why you need a theme, a baseline stylesheet, or a `pt` preset**
 >
-> In PrimeReact 10, every widget's *structural* CSS (padding, borders, dialog
-> frame, focus rings, button shapes) ships **inside the theme file**. There is
-> no separate "primitives" stylesheet. So a consumer who doesn't load any
-> PrimeReact theme also has no structural CSS — components render as their
-> raw HTML primitives.
+> PrimeReact 11 is **unstyled-first**: the primitives render structural markup
+> with no built-in visuals. A look comes from one of three sources — a
+> `@primeuix/themes` preset (token-based, license-gated), the Cratis baseline
+> theme (`@cratis/components/theme`, no license), or your own `pt`/CSS. Load
+> none of them and the components render as their raw HTML primitives.
 >
-> The `--cratis-*` token layer is therefore an **additive Cratis-scoped tint**
-> for surfaces *our* wrappers own (validation error text, the FormElement
-> addon, breadcrumb borders, etc.). It is not, by itself, enough to skin
-> PrimeReact widgets. Override PrimeReact's variables when you want the whole
-> UI in your palette. Use `unstyled: true` and a `pt` preset when you want to
-> replace PrimeReact's visuals entirely.
+> The `--cratis-*` token layer is an **additive Cratis-scoped tint** for
+> surfaces *our* wrappers own (validation error text, the FormElement addon,
+> breadcrumb borders, etc.). It is not, by itself, enough to skin the
+> PrimeReact widgets — pair it with the baseline theme, a preset, or a `pt`
+> preset. Override the PrimeReact variables (or a preset's `--p-*` tokens) when
+> you want the whole UI in your palette.
 
-All three setups use the same one-line setup. You can change direction later
-because the same provider, tokens, and `pt` hooks stay available.
+All setups share the same one-line provider setup. You can change direction
+later because the same provider, tokens, and `pt` hooks stay available.
 
 ### One-line setup (every styling option)
 
 ```tsx
+import '@cratis/components/tokens';
 import '@cratis/components/styles';
 import { CratisComponentsProvider } from '@cratis/components';
 
@@ -138,40 +166,75 @@ export const App = () => (
 );
 ```
 
-- `@cratis/components/styles` ships the Tailwind utility classes used inside
-  the package plus the `--cratis-*` CSS variable token layer that every
-  internal component reads from. (Use `@cratis/components/tokens` instead if
-  you're bringing your own Tailwind.)
-- `CratisComponentsProvider` is a thin wrapper over PrimeReact's
-  `PrimeReactProvider` so Cratis has one place to layer in defaults. Drop in
-  raw `PrimeReactProvider` if you'd rather.
-
-The three setups below differ only in **what else** you load on top of this
-setup.
+- `@cratis/components/tokens` is the `--cratis-*` CSS variable layer every
+  internal component reads from. It is the seam that lets the library span
+  PrimeReact major versions, so it is always needed.
+- `@cratis/components/styles` is every component stylesheet in one file, plus
+  the Tailwind utility classes used inside the package and the third-party
+  `allotment` rules `DataPage` needs. Components no longer import their own
+  CSS — that is what made the published package unloadable in Node
+  ([#118](https://github.com/Cratis/Components/issues/118)) — so this import is
+  required, not optional.
+- `CratisComponentsProvider` is a thin wrapper over `@primereact/core`'s
+  `PrimeReactProvider` so Cratis has one place to layer in defaults (including
+  the optional `value={{ theme: { preset } }}` styled layer). Drop in the raw
+  `PrimeReactProvider` from `@primereact/core` if you'd rather.
+
+The setups below differ only in **what else** you load on top of this
+provider setup.
 
 ---
 
-### Use a PrimeReact theme
+### Use a styled preset
 
-Load any PrimeReact theme stylesheet alongside Cratis Components. PrimeReact's
-own widgets paint themselves from the theme, and the `--cratis-*` tokens cascade
-to the matching theme variables so Cratis-scoped surfaces follow along.
+PrimeReact 11 dropped the v10 `primereact/resources/themes/*/theme.css`
+stylesheets in favor of the token-based `@primeuix/themes` layer. Apply a
+preset by passing `value={{ theme: { preset } }}` to `CratisComponentsProvider` —
+no theme CSS import. PrimeReact's own widgets paint themselves from the preset, and the
+`--cratis-*` tokens cascade to the matching variables so Cratis-scoped surfaces
+follow along.
 
 ```tsx
-// 1. Theme first, then Cratis styles so any --cratis-* override wins.
-import 'primereact/resources/themes/lara-dark-blue/theme.css';
+import Aura from '@primeuix/themes/aura';   // or lara / nora / material
 import 'primeicons/primeicons.css';
 import '@cratis/components/styles';
 
 import { CratisComponentsProvider } from '@cratis/components';
 
 export const App = () => (
-    <CratisComponentsProvider>
+    <CratisComponentsProvider value={{ theme: { preset: Aura } }}>
         <YourApp />
     </CratisComponentsProvider>
 );
 ```
 
+Omit `theme` entirely to stay unstyled-first — ship only structure plus the
+`--cratis-*` tokens and bring your own visuals (see the pass-through / `pt`
+options below).
+
+### Use the Cratis baseline theme (no license)
+
+Want a polished default look **without a PrimeUI license**? Ship the components
+unstyled and import the Cratis baseline theme — a token-based stylesheet that
+styles every component from the `--cratis-*` layer:
+
+```tsx
+import 'primeicons/primeicons.css';
+import '@cratis/components/theme';   // the baseline theme
+
+export const App = () => (
+    <CratisComponentsProvider value={{ unstyled: true }}>
+        <div className="cratis-theme">   {/* scope: put on <body>, app root, or a subtree */}
+            <YourApp />
+        </div>
+    </CratisComponentsProvider>
+);
+```
+
+Add `cratis-dark` to an ancestor for the dark palette. The theme defers to a
+`@primeuix/themes` preset's `--p-*` tokens when one is present, so you can layer
+it under a preset too, and every rule is overridable via your own CSS or `pt`.
+
 #### Override a single component with CSS
 
 Plain CSS works fine on top of the theme. Target either PrimeReact's class
@@ -255,11 +318,10 @@ independently if you want Cratis surfaces to differ from PrimeReact widgets.
 ```
 
 ```tsx
-// 1. PrimeReact theme provides the structure.
-import 'primereact/resources/themes/lara-dark-blue/theme.css';
+// 1. A styled preset provides the structure (apply it via the provider — see above).
 import 'primeicons/primeicons.css';
 import '@cratis/components/styles';
-// 2. Your palette overrides — must come after the theme so they win.
+// 2. Your palette overrides — must come after the styles so they win.
 import './palette.override.css';
 ```
 
@@ -290,7 +352,6 @@ Tailwind handles cascade and dark mode:
 ```css
 /* app.css */
 @import "tailwindcss";
-@import "primereact/resources/themes/lara-dark-blue/theme.css";
 @import "@cratis/components/styles";
 
 @layer base {
@@ -352,7 +413,7 @@ through PrimeReact's `pt` (pass-through) mechanism, your own CSS, or both.
 Components render structurally only and become a blank canvas.
 
 ```tsx
-import '@cratis/components/styles';   // tokens + Tailwind utilities still useful for spacing/layout
+import '@cratis/components/styles';   // component rules + Tailwind utilities, still needed when unstyled
 import { CratisComponentsProvider } from '@cratis/components';
 
 export const App = () => (
@@ -412,7 +473,7 @@ Same shape, Tailwind utilities as the class strings:
 // pt-preset.ts
 export const globalPt = {
     button: {
-        root: { className: 'inline-flex items-center px-4 py-2 rounded-lg bg-sky-500 text-white hover:bg-sky-400 disabled:opacity-50' },
+        root: { className: 'inline-flex items-center px-4 py-2 rounded-lg bg-sky-700 text-white hover:bg-sky-600 disabled:opacity-50' },
     },
     dialog: {
         root:    { className: 'rounded-2xl shadow-2xl overflow-hidden' },

package/dist/esm/CommandDialog/CommandDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDialog.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAKH,KAAK,gBAAgB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAsB,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAWtF,MAAM,WAAW,kBAAkB,CAAC,QAAQ,SAAS,MAAM,EAAE,SAAS,GAAG,MAAM,CAC3E,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,UAAU,GAAG,iBAAiB,CAAC,EAC/E,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAcjC,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAOlD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAiVD,eAAO,MAAM,aAAa;KApEM,QAAQ,SAAS,MAAM,WAAW,SAAS,kBAAkB,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC;;uBA6DlF;YAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;SAAE;;;CAO5B,CAAC"}
+{"version":3,"file":"CommandDialog.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAKH,KAAK,gBAAgB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAsB,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAWtF,MAAM,WAAW,kBAAkB,CAAC,QAAQ,SAAS,MAAM,EAAE,SAAS,GAAG,MAAM,CAC3E,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,UAAU,GAAG,iBAAiB,CAAC,EAC/E,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAcjC,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAOlD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AA2VD,eAAO,MAAM,aAAa;KAxEM,QAAQ,SAAS,MAAM,WAAW,SAAS,kBAAkB,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC;;uBAiElF;YAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;SAAE;;;CAO5B,CAAC"}

package/dist/esm/CommandDialog/CommandDialog.js

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { CommandForm, useCommandFormContext, useCommandInstance, CommandFormFieldWrapper } from '@cratis/arc.react/commands';
 import { applyBeforeExecute } from './applyBeforeExecute.js';
 
-const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resizable, buttons, initialFocus, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, className, pt, ptOptions, unstyled, children }) => {
+const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resizable, buttons, initialFocus, okLabel, cancelLabel, yesLabel, noLabel, dismissable, closeAriaLabel, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, className, pt, ptOptions, unstyled, children }) => {
     const { setCommandValues, setCommandResult, isValid: isCommandFormValid } = useCommandFormContext();
     const commandInstance = useCommandInstance();
     const [isBusy, setIsBusy] = useState(false);
@@ -62,7 +62,7 @@ const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resi
     };
     const processedChildren = processChildren(children);
     const isDialogValid = (isValid !== false) && isCommandFormValid;
-    return (jsx(Dialog, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, initialFocus: initialFocus, onClose: onClose, onConfirm: handleConfirm, onCancel: onCancel, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isDialogValid, isBusy: isBusy, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
+    return (jsx(Dialog, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, initialFocus: initialFocus, onClose: onClose, onConfirm: handleConfirm, onCancel: onCancel, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, dismissable: dismissable, closeAriaLabel: closeAriaLabel, isValid: isDialogValid, isBusy: isBusy, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
 };
 /**
  * A {@link Dialog} that hosts a Cratis Arc `CommandForm`, runs the bound
@@ -181,8 +181,8 @@ const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resi
  * @param props - {@link CommandDialogProps}.
  */
 const CommandDialogComponent = (props) => {
-    const { title, visible, width, style, contentStyle, resizable, buttons = DialogButtons.OkCancel, initialFocus, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onBeforeExecute, className, pt, ptOptions, unstyled, children, ...commandFormProps } = props;
-    return (jsx(CommandForm, { ...commandFormProps, children: jsx(CommandDialogWrapper, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, initialFocus: initialFocus, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: onBeforeExecute, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }) }));
+    const { title, visible, width, style, contentStyle, resizable, buttons = DialogButtons.OkCancel, initialFocus, okLabel, cancelLabel, yesLabel, noLabel, dismissable, closeAriaLabel, isValid, onClose, onConfirm, onCancel, onBeforeExecute, className, pt, ptOptions, unstyled, children, ...commandFormProps } = props;
+    return (jsx(CommandForm, { ...commandFormProps, children: jsx(CommandDialogWrapper, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, initialFocus: initialFocus, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, dismissable: dismissable, closeAriaLabel: closeAriaLabel, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: onBeforeExecute, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }) }));
 };
 const CommandDialogColumnWrapper = ({ children }) => (jsx(CommandForm.Column, { children: children }));
 CommandDialogColumnWrapper.displayName = 'CommandFormColumn';

package/dist/esm/CommandDialog/CommandDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;AAmDA,MAAM,oBAAoB,GAAG,CAA8C,EACvE,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,YAAY,EACZ,SAAS,EACT,OAAO,EACP,YAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,eAAe,EACf,SAAS,EACT,EAAE,EACF,SAAS,EACT,QAAQ,EACR,QAAQ,EA2BX,KAAI;AACD,IAAA,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,OAAO,EAAE,kBAAkB,EAAE,GAAG,qBAAqB,EAAY;AAC7G,IAAA,MAAM,eAAe,GAAG,kBAAkB,EAAY;IACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE3C,IAAA,MAAM,aAAa,GAAG,YAAW;QAC7B,IAAI,eAAe,EAAE;YACjB,MAAM,OAAO,GAAG,kBAAkB,CAAC,eAAe,EAAE,eAAe,CAAC;AACpE,YAAA,gBAAgB,CAAC,OAAO,YAAY,OAAO,GAAG,MAAM,OAAO,GAAG,OAAO,CAAC;QAC1E;QAEA,SAAS,CAAC,IAAI,CAAC;AACf,QAAA,IAAI,MAAiC;AACrC,QAAA,IAAI;AACA,YAAA,MAAM,GAAG,MAAO,eAAoF,CAAC,OAAO,EAAE;QAClH;gBAAU;YACN,SAAS,CAAC,KAAK,CAAC;QACpB;AAEA,QAAA,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE;AACnB,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACjB,gBAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,iBAAiB,CAAC;YACzD;iBAAO;AACH,gBAAA,MAAM,QAAQ,GAAG,MAAM,CAAC;YAC5B;YACA,gBAAgB,CAAC,MAAM,CAAC;AACxB,YAAA,OAAO,KAAK;QAChB;AAEA,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,QAAqB,CAAC;QAE/C,IAAI,SAAS,EAAE;AACX,YAAA,MAAM,WAAW,GAAG,MAAM,SAAS,EAAE;YACrC,OAAO,WAAW,KAAK,IAAI;QAC/B;QAEA,IAAI,OAAO,EAAE;YACT,MAAM,WAAW,GAAG,MAAM,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;YAClD,OAAO,WAAW,KAAK,KAAK;QAChC;AAEA,QAAA,OAAO,IAAI;AACf,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,KAAsB,KAAqB;QAChE,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,KAAK,KAAI;AACvC,YAAA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;AAAE,gBAAA,OAAO,KAAK;AAE9C,YAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAoC;AAC5D,YAAA,IAAI,SAAS,CAAC,WAAW,KAAK,kBAAkB,EAAE;AAE9C,gBAAA,OAAOA,IAAC,uBAAuB,EAAA,EAAC,KAAK,EAAE,KAAgC,GAAI;YAC/E;AAEA,YAAA,MAAM,UAAU,GAAG,KAAK,CAAC,KAAgC;AACzD,YAAA,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,EAAE;AAC7B,gBAAA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAoD,EAAE;AAC5E,oBAAA,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,QAA2B;AACnE,iBAAA,CAAC;YACN;AAEA,YAAA,OAAO,KAAK;AAChB,QAAA,CAAC,CAAC;AACN,IAAA,CAAC;AAED,IAAA,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,CAAC;IACnD,MAAM,aAAa,GAAG,CAAC,OAAO,KAAK,KAAK,KAAK,kBAAkB;IAE/D,QACIA,GAAA,CAAC,MAAM,EAAA,EACH,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAElBA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EAClE,iBAAiB,EAAA,CAChB,EAAA,CACD;AAEjB,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHG;AACH,MAAM,sBAAsB,GAAG,CAAuD,KAA8C,KAAI;IACpI,MAAM,EACF,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,YAAY,EACZ,SAAS,EACT,OAAO,GAAG,aAAa,CAAC,QAAQ,EAChC,YAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,eAAe,EACf,SAAS,EACT,EAAE,EACF,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,gBAAgB,EACtB,GAAG,KAAK;IAET,QACIA,GAAA,CAAC,WAAW,EAAA,EAAA,GAA0B,gBAAgB,YAClDA,GAAA,CAAC,oBAAoB,EAAA,EACjB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAC9C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAEjB,QAAQ,EAAA,CACU,EAAA,CACb;AAEtB,CAAC;AAED,MAAM,0BAA0B,GAAG,CAAC,EAAE,QAAQ,EAAiC,MAC3EA,GAAA,CAAC,WAAW,CAAC,MAAM,cAAE,QAAQ,EAAA,CAAsB,CACtD;AACD,0BAA0B,CAAC,WAAW,GAAG,mBAAmB;AAE5D,sBAAsB,CAAC,MAAM,GAAG,0BAA0B;AAEnD,MAAM,aAAa,GAAG;;;;"}
+{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;AAmDA,MAAM,oBAAoB,GAAG,CAA8C,EACvE,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,YAAY,EACZ,SAAS,EACT,OAAO,EACP,YAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,EACP,WAAW,EACX,cAAc,EACd,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,eAAe,EACf,SAAS,EACT,EAAE,EACF,SAAS,EACT,QAAQ,EACR,QAAQ,EA6BX,KAAI;AACD,IAAA,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,OAAO,EAAE,kBAAkB,EAAE,GAAG,qBAAqB,EAAY;AAC7G,IAAA,MAAM,eAAe,GAAG,kBAAkB,EAAY;IACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE3C,IAAA,MAAM,aAAa,GAAG,YAAW;QAC7B,IAAI,eAAe,EAAE;YACjB,MAAM,OAAO,GAAG,kBAAkB,CAAC,eAAe,EAAE,eAAe,CAAC;AACpE,YAAA,gBAAgB,CAAC,OAAO,YAAY,OAAO,GAAG,MAAM,OAAO,GAAG,OAAO,CAAC;QAC1E;QAEA,SAAS,CAAC,IAAI,CAAC;AACf,QAAA,IAAI,MAAiC;AACrC,QAAA,IAAI;AACA,YAAA,MAAM,GAAG,MAAO,eAAoF,CAAC,OAAO,EAAE;QAClH;gBAAU;YACN,SAAS,CAAC,KAAK,CAAC;QACpB;AAEA,QAAA,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE;AACnB,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACjB,gBAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,iBAAiB,CAAC;YACzD;iBAAO;AACH,gBAAA,MAAM,QAAQ,GAAG,MAAM,CAAC;YAC5B;YACA,gBAAgB,CAAC,MAAM,CAAC;AACxB,YAAA,OAAO,KAAK;QAChB;AAEA,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,QAAqB,CAAC;QAE/C,IAAI,SAAS,EAAE;AACX,YAAA,MAAM,WAAW,GAAG,MAAM,SAAS,EAAE;YACrC,OAAO,WAAW,KAAK,IAAI;QAC/B;QAEA,IAAI,OAAO,EAAE;YACT,MAAM,WAAW,GAAG,MAAM,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;YAClD,OAAO,WAAW,KAAK,KAAK;QAChC;AAEA,QAAA,OAAO,IAAI;AACf,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,KAAsB,KAAqB;QAChE,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,KAAK,KAAI;AACvC,YAAA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;AAAE,gBAAA,OAAO,KAAK;AAE9C,YAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAoC;AAC5D,YAAA,IAAI,SAAS,CAAC,WAAW,KAAK,kBAAkB,EAAE;AAE9C,gBAAA,OAAOA,IAAC,uBAAuB,EAAA,EAAC,KAAK,EAAE,KAAgC,GAAI;YAC/E;AAEA,YAAA,MAAM,UAAU,GAAG,KAAK,CAAC,KAAgC;AACzD,YAAA,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,EAAE;AAC7B,gBAAA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAoD,EAAE;AAC5E,oBAAA,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,QAA2B;AACnE,iBAAA,CAAC;YACN;AAEA,YAAA,OAAO,KAAK;AAChB,QAAA,CAAC,CAAC;AACN,IAAA,CAAC;AAED,IAAA,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,CAAC;IACnD,MAAM,aAAa,GAAG,CAAC,OAAO,KAAK,KAAK,KAAK,kBAAkB;IAE/D,QACIA,GAAA,CAAC,MAAM,EAAA,EACH,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAElBA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EAClE,iBAAiB,EAAA,CAChB,EAAA,CACD;AAEjB,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHG;AACH,MAAM,sBAAsB,GAAG,CAAuD,KAA8C,KAAI;IACpI,MAAM,EACF,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,YAAY,EACZ,SAAS,EACT,OAAO,GAAG,aAAa,CAAC,QAAQ,EAChC,YAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,EACP,WAAW,EACX,cAAc,EACd,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,eAAe,EACf,SAAS,EACT,EAAE,EACF,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,gBAAgB,EACtB,GAAG,KAAK;IAET,QACIA,GAAA,CAAC,WAAW,EAAA,EAAA,GAA0B,gBAAgB,EAAA,QAAA,EAClDA,GAAA,CAAC,oBAAoB,EAAA,EACjB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAC9C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAEjB,QAAQ,EAAA,CACU,EAAA,CACb;AAEtB,CAAC;AAED,MAAM,0BAA0B,GAAG,CAAC,EAAE,QAAQ,EAAiC,MAC3EA,GAAA,CAAC,WAAW,CAAC,MAAM,cAAE,QAAQ,EAAA,CAAsB,CACtD;AACD,0BAA0B,CAAC,WAAW,GAAG,mBAAmB;AAE5D,sBAAsB,CAAC,MAAM,GAAG,0BAA0B;AAEnD,MAAM,aAAa,GAAG;;;;"}

package/dist/esm/CommandDialog/CommandStepper.d.ts

@@ -1,9 +1,23 @@
 import React from 'react';
-import { type StepperProps } from 'primereact/stepper';
+import type { StepperRootProps } from '@primereact/types/primitive/stepper';
 import { type CommandFormProps } from '@cratis/arc.react/commands';
 import { type BeforeExecuteCallback } from './applyBeforeExecute';
-import './CommandStepper.css';
-export type StepperCustomizationProps = Pick<StepperProps, 'orientation' | 'headerPosition' | 'linear' | 'onChangeStep' | 'start' | 'end' | 'pt' | 'ptOptions' | 'unstyled'>;
+export interface StepperChangeEvent {
+    index: number;
+}
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperHeaderPosition = 'top' | 'bottom';
+export interface StepperCustomizationProps {
+    linear?: boolean;
+    orientation?: StepperOrientation;
+    headerPosition?: StepperHeaderPosition;
+    start?: React.ReactNode;
+    end?: React.ReactNode;
+    onChangeStep?: (event: StepperChangeEvent) => void;
+    pt?: StepperRootProps['pt'];
+    ptOptions?: StepperRootProps['ptOptions'];
+    unstyled?: boolean;
+}
 export interface CommandStepperContentProps extends StepperCustomizationProps {
     activeStep: number;
     visitedSteps: Set<number>;
@@ -26,6 +40,6 @@ export interface CommandStepperProps<TCommand extends object, TResponse = object
     onBeforeExecute?: BeforeExecuteCallback<TCommand>;
     children?: React.ReactNode;
 }
-export declare const CommandStepperContent: ({ activeStep, visitedSteps, children, onActiveStepChange, onVisitedStepsChange, onStepErrorsChange, getFieldError, showNavigation, showSubmit, nextLabel, previousLabel, okLabel, isBusy, isSubmitting, isSubmitDisabled, onSubmit, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, }: CommandStepperContentProps) => React.JSX.Element;
+export declare const CommandStepperContent: ({ activeStep, visitedSteps, children, onActiveStepChange, onVisitedStepsChange, onStepErrorsChange, getFieldError, showNavigation, showSubmit, nextLabel, previousLabel, okLabel, isBusy, isSubmitting, isSubmitDisabled, onSubmit, linear, orientation, headerPosition, start, end, onChangeStep, pt, ptOptions, unstyled, }: CommandStepperContentProps) => React.JSX.Element;
 export declare const CommandStepper: <TCommand extends object = object, TResponse = object>(props: CommandStepperProps<TCommand, TResponse>) => React.JSX.Element;
 //# sourceMappingURL=CommandStepper.d.ts.map

package/dist/esm/CommandDialog/CommandStepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandStepper.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandStepper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGhF,OAAO,EAKH,KAAK,gBAAgB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAsB,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAEtF,OAAO,sBAAsB,CAAC;AAM9B,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,YAAY,EACrD,aAAa,GAAG,gBAAgB,GAAG,QAAQ,GAAG,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,WAAW,GAAG,UAAU,CACnH,CAAC;AAEF,MAAM,WAAW,0BAA2B,SAAQ,yBAAyB;IAEzE,UAAU,EAAE,MAAM,CAAC;IAEnB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAE3D,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAErD,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAE/C,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,mBAAmB,CAAC,QAAQ,SAAS,MAAM,EAAE,SAAS,GAAG,MAAM,CAC5E,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,UAAU,GAAG,iBAAiB,CAAC,EAC/E,IAAI,CAAC,0BAA0B,EAAE,YAAY,GAAG,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,eAAe,GAAG,cAAc,GAAG,kBAAkB,GAAG,UAAU,CAAC;IAaxL,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAElD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAmDD,eAAO,MAAM,qBAAqB,GAAI,+TA0BnC,0BAA0B,sBA8J5B,CAAC;AAmKF,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,MAAM,GAAG,MAAM,EAAE,SAAS,GAAG,MAAM,EAC/E,OAAO,mBAAmB,CAAC,QAAQ,EAAE,SAAS,CAAC,sBAoDlD,CAAC"}
+{"version":3,"file":"CommandStepper.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandStepper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAEhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAG5E,OAAO,EAKH,KAAK,gBAAgB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAsB,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAkBtF,MAAM,WAAW,kBAAkB;IAE/B,KAAK,EAAE,MAAM,CAAC;CACjB;AAGD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAG3D,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IAOtC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAEjC,cAAc,CAAC,EAAE,qBAAqB,CAAC;IAEvC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAEnD,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAE5B,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAE1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,0BAA2B,SAAQ,yBAAyB;IAEzE,UAAU,EAAE,MAAM,CAAC;IAEnB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAE3D,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAErD,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAE/C,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,mBAAmB,CAAC,QAAQ,SAAS,MAAM,EAAE,SAAS,GAAG,MAAM,CAC5E,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,UAAU,GAAG,iBAAiB,CAAC,EAC/E,IAAI,CAAC,0BAA0B,EAAE,YAAY,GAAG,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,eAAe,GAAG,cAAc,GAAG,kBAAkB,GAAG,UAAU,CAAC;IAaxL,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAElD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAsDD,eAAO,MAAM,qBAAqB,GAAI,+TA0BnC,0BAA0B,sBA2J5B,CAAC;AAkKF,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,MAAM,GAAG,MAAM,EAAE,SAAS,GAAG,MAAM,EAC/E,OAAO,mBAAmB,CAAC,QAAQ,EAAE,SAAS,CAAC,sBAoDlD,CAAC"}

package/dist/esm/CommandDialog/CommandStepper.js

@@ -1,12 +1,20 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useMemo, useEffect, useState } from 'react';
 import { Stepper } from 'primereact/stepper';
 import { Button } from 'primereact/button';
 import { CommandForm, useCommandFormContext, useCommandInstance, CommandFormFieldWrapper } from '@cratis/arc.react/commands';
 import { applyBeforeExecute } from './applyBeforeExecute.js';
 import { getStepPanels } from './stepChildren.js';
-import './CommandStepper.css';
 
+// PrimeReact 11's Stepper annotates each step header as role="tab" and each panel
+// as role="tabpanel", with `aria-controls` pointing at element ids it never
+// renders — a dangling-reference + orphaned-tab pattern (the list is not a
+// role="tablist") that axe flags as critical. The headless stepper implements no
+// keyboard navigation bound to these roles (steps navigate by click on the native
+// <button>), so stripping the broken tab semantics is safe: it leaves natively
+// keyboard-accessible buttons and a plain content region. `undefined` in `pt`
+// removes the attribute the primitive would otherwise set.
+const stripBrokenTabRole = { root: { role: undefined, 'aria-controls': undefined } };
 /** Extracts the property name from an accessor function like `c => c.name`. */
 const getPropertyName = (accessor) => {
     if (typeof accessor !== 'function')
@@ -52,12 +60,14 @@ const processChildren = (nodes) => {
         return child;
     });
 };
-const CommandStepperContent = ({ activeStep, visitedSteps, children, onActiveStepChange, onVisitedStepsChange, onStepErrorsChange, getFieldError, showNavigation = true, showSubmit = true, nextLabel = 'Next', previousLabel = 'Previous', okLabel = 'Submit', isBusy = false, isSubmitting = false, isSubmitDisabled = false, onSubmit, orientation = 'horizontal', headerPosition, linear = true, onChangeStep, start, end, pt, ptOptions, unstyled, }) => {
+/** The value used to identify a step in PrimeReact 11's Stepper — its index as a string. */
+const stepValue = (index) => String(index);
+const CommandStepperContent = ({ activeStep, visitedSteps, children, onActiveStepChange, onVisitedStepsChange, onStepErrorsChange, getFieldError, showNavigation = true, showSubmit = true, nextLabel = 'Next', previousLabel = 'Previous', okLabel = 'Submit', isBusy = false, isSubmitting = false, isSubmitDisabled = false, onSubmit, linear = true, orientation = 'horizontal', headerPosition = 'top', start, end, onChangeStep, pt, ptOptions, unstyled, }) => {
     // The steps that actually render. Conditional steps (`{condition && <StepperPanel/>}`)
     // leave falsy children behind, so the count, the per-step validation state and what the
     // Stepper renders are all derived from this one list — they cannot drift apart.
-    const steps = useMemo(() => getStepPanels(children), [children]);
-    const stepCount = steps.length;
+    const panels = useMemo(() => getStepPanels(children), [children]);
+    const stepCount = panels.length;
     // A conditional step can vanish after the user has advanced past it, which leaves the
     // incoming index pointing at a step that is no longer rendered. Clamp it into the set that
     // is, so the panel shown, the validation state read and the buttons offered all belong to a
@@ -65,61 +75,39 @@ const CommandStepperContent = ({ activeStep, visitedSteps, children, onActiveSte
     const currentStep = Math.min(Math.max(activeStep, 0), Math.max(stepCount - 1, 0));
     const isLastStep = currentStep >= stepCount - 1;
     const isFirstStep = currentStep <= 0;
-    const stepFieldNames = useMemo(() => steps.map((step) => {
-        const stepProps = step.props;
-        return extractFieldNamesFromNode(stepProps.children);
-    }), [steps]);
+    const stepFieldNames = useMemo(() => panels.map((panel) => extractFieldNamesFromNode(panel.props.children)), [panels]);
     const stepErrors = useMemo(() => stepFieldNames.map(fields => fields.some(fieldName => !!getFieldError?.(fieldName))), [stepFieldNames, getFieldError]);
     useEffect(() => {
         onStepErrorsChange?.(stepErrors);
     }, [onStepErrorsChange, stepErrors]);
     const isCurrentStepInvalid = stepErrors[currentStep] ?? false;
     const hasAnyStepErrors = stepErrors.some(hasError => hasError);
-    const stepperPt = useMemo(() => {
-        const userPt = pt;
-        const userStepperPanelPt = userPt?.stepperpanel;
-        const userNumberPt = userStepperPanelPt?.number;
-        return {
-            ...userPt,
-            stepperpanel: {
-                ...userStepperPanelPt,
-                number: (opts) => {
-                    const existing = typeof userNumberPt === 'function'
-                        ? userNumberPt(opts)
-                        : userNumberPt ?? {};
-                    const idx = opts.context.index;
-                    const hasError = stepErrors[idx] ?? false;
-                    const isVisited = visitedSteps.has(idx);
-                    // Use straightforward color names here so unit tests that
-                    // inspect the computed `backgroundColor` can assert reliably.
-                    const bgColor = hasError
-                        ? 'red'
-                        : isVisited
-                            ? 'green'
-                            : null;
-                    if (!bgColor)
-                        return existing;
-                    const existingStyle = existing.style;
-                    return {
-                        ...existing,
-                        style: { ...existingStyle, backgroundColor: bgColor, color: 'var(--cratis-primary-color-text)' }
-                    };
-                }
-            }
-        };
-    }, [pt, stepErrors, visitedSteps]);
-    const handleChangeStep = event => {
-        onChangeStep?.(event);
-        const index = event.index;
-        if (typeof index === 'number') {
-            if (index > currentStep && isCurrentStepInvalid) {
-                return;
-            }
-            if (index > currentStep) {
-                onVisitedStepsChange?.(new Set(visitedSteps).add(currentStep));
-            }
-            onActiveStepChange?.(index);
+    // The per-step number indicator paints red when a visited step still has a
+    // field error and green once a step has been visited without errors — a
+    // traffic-light status marker that is intentionally theme-independent, so
+    // the literal color names are appropriate here (and let specs assert on the
+    // computed background reliably).
+    const numberStyle = (index) => {
+        const hasError = stepErrors[index] ?? false;
+        const isVisited = visitedSteps.has(index);
+        const backgroundColor = hasError ? 'red' : isVisited ? 'green' : undefined;
+        if (!backgroundColor)
+            return undefined;
+        return { backgroundColor, color: 'var(--cratis-primary-color-text)' };
+    };
+    const handleValueChange = event => {
+        const raw = event.value;
+        const index = typeof raw === 'number' ? raw : parseInt(String(raw ?? ''), 10);
+        if (Number.isNaN(index))
+            return;
+        onChangeStep?.({ index });
+        if (index > currentStep && isCurrentStepInvalid) {
+            return;
+        }
+        if (index > currentStep) {
+            onVisitedStepsChange?.(new Set(visitedSteps).add(currentStep));
         }
+        onActiveStepChange?.(index);
     };
     const handlePrevious = () => {
         onActiveStepChange?.(Math.max(0, currentStep - 1));
@@ -131,9 +119,13 @@ const CommandStepperContent = ({ activeStep, visitedSteps, children, onActiveSte
         onVisitedStepsChange?.(new Set(visitedSteps).add(currentStep));
         onActiveStepChange?.(Math.min(stepCount - 1, currentStep + 1));
     };
-    return (jsxs("div", { className: "cratis-command-stepper", children: [jsx(Stepper, { activeStep: currentStep, linear: linear, orientation: orientation, headerPosition: headerPosition, onChangeStep: handleChangeStep, start: start, end: end, pt: stepperPt, ptOptions: ptOptions, unstyled: unstyled, children: processChildren(steps) }), showNavigation && (jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', gap: '0.75rem' }, children: [!isFirstStep && (jsx(Button, { label: previousLabel, icon: "pi pi-arrow-left", onClick: handlePrevious, disabled: isBusy, outlined: true, style: { width: 'auto' } })), jsx("div", { style: { flex: 1 } }), !isLastStep && (jsx(Button, { label: nextLabel, icon: "pi pi-arrow-right", iconPos: "right", onClick: handleNext, disabled: isBusy || isSubmitting || isCurrentStepInvalid, style: { width: 'auto' } })), isLastStep && showSubmit && (jsx(Button, { label: okLabel, icon: "pi pi-check", onClick: () => void onSubmit?.(), loading: isSubmitting, disabled: isBusy || isSubmitting || isSubmitDisabled || hasAnyStepErrors, autoFocus: true, style: { width: 'auto' } }))] }))] }));
+    const stepperList = (jsx(Stepper.List, { children: panels.map((panel, index) => (jsxs(Stepper.Step, { value: stepValue(index), children: [jsxs(Stepper.Header, { pt: stripBrokenTabRole, children: [jsx(Stepper.Number, { style: numberStyle(index), children: index + 1 }), jsx(Stepper.Title, { children: panel.props.header })] }), index < stepCount - 1 && jsx(Stepper.Separator, {})] }, index))) }));
+    const stepperPanels = (jsx(Stepper.Panels, { children: panels.map((panel, index) => (jsx(Stepper.Panel, { value: stepValue(index), pt: stripBrokenTabRole, children: processChildren(panel.props.children) }, index))) }));
+    return (jsxs("div", { className: `cratis-command-stepper cratis-command-stepper--${orientation}`, "data-orientation": orientation, children: [start, jsx(Stepper.Root, { value: stepValue(currentStep), linear: linear, onValueChange: handleValueChange, "data-orientation": orientation, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: headerPosition === 'bottom'
+                    ? (jsxs(Fragment, { children: [stepperPanels, stepperList] }))
+                    : (jsxs(Fragment, { children: [stepperList, stepperPanels] })) }), end, showNavigation && (jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', gap: '0.75rem' }, children: [!isFirstStep && (jsxs(Button, { variant: "outlined", onClick: handlePrevious, disabled: isBusy, style: { width: 'auto' }, children: [jsx("i", { className: "pi pi-arrow-left" }), jsx("span", { children: previousLabel })] })), jsx("div", { style: { flex: 1 } }), !isLastStep && (jsxs(Button, { onClick: handleNext, disabled: isBusy || isSubmitting || isCurrentStepInvalid, style: { width: 'auto' }, children: [jsx("span", { children: nextLabel }), jsx("i", { className: "pi pi-arrow-right" })] })), isLastStep && showSubmit && (jsxs(Button, { onClick: () => void onSubmit?.(), disabled: isBusy || isSubmitting || isSubmitDisabled || hasAnyStepErrors, autoFocus: true, style: { width: 'auto' }, children: [jsx("i", { className: isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-check' }), jsx("span", { children: okLabel })] }))] }))] }));
 };
-const CommandStepperWrapper = ({ children, onStepErrorsChange, showNavigation, showSubmit, nextLabel, previousLabel, okLabel, isBusy, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, onSuccess, onValidationFailure, onFailed, onBeforeExecute, }) => {
+const CommandStepperWrapper = ({ children, onStepErrorsChange, showNavigation, showSubmit, nextLabel, previousLabel, okLabel, isBusy, linear, orientation, headerPosition, start, end, onChangeStep, pt, ptOptions, unstyled, onSuccess, onValidationFailure, onFailed, onBeforeExecute, }) => {
     const { getFieldError, isValid: isCommandFormValid, setCommandValues, setCommandResult } = useCommandFormContext();
     const commandInstance = useCommandInstance();
     const [activeStep, setActiveStep] = useState(0);
@@ -164,7 +156,7 @@ const CommandStepperWrapper = ({ children, onStepErrorsChange, showNavigation, s
         }
         await onSuccess?.(result.response);
     };
-    return (jsx(CommandStepperContent, { activeStep: activeStep, visitedSteps: visitedSteps, onActiveStepChange: setActiveStep, onVisitedStepsChange: setVisitedSteps, onStepErrorsChange: onStepErrorsChange, getFieldError: getFieldError, showNavigation: showNavigation, showSubmit: showSubmit, nextLabel: nextLabel, previousLabel: previousLabel, okLabel: okLabel, isBusy: isBusy, isSubmitting: isSubmitting, isSubmitDisabled: !isCommandFormValid, onSubmit: handleSubmit, orientation: orientation, headerPosition: headerPosition, linear: linear, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }));
+    return (jsx(CommandStepperContent, { activeStep: activeStep, visitedSteps: visitedSteps, onActiveStepChange: setActiveStep, onVisitedStepsChange: setVisitedSteps, onStepErrorsChange: onStepErrorsChange, getFieldError: getFieldError, showNavigation: showNavigation, showSubmit: showSubmit, nextLabel: nextLabel, previousLabel: previousLabel, okLabel: okLabel, isBusy: isBusy, isSubmitting: isSubmitting, isSubmitDisabled: !isCommandFormValid, onSubmit: handleSubmit, linear: linear, orientation: orientation, headerPosition: headerPosition, start: start, end: end, onChangeStep: onChangeStep, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }));
 };
 /**
  * A multi-step wizard backed by a single Cratis Arc command — the embedded,
@@ -205,8 +197,7 @@ const CommandStepperWrapper = ({ children, onStepErrorsChange, showNavigation, s
  * Stepper directly.
  *
  * ```tsx
- * import { CommandStepper } from '@cratis/components/CommandStepper';
- * import { StepperPanel } from 'primereact/stepperpanel';
+ * import { CommandStepper, StepperPanel } from '@cratis/components/CommandDialog';
  * import { RegisterAuthor } from './RegisterAuthor';   // proxy from C#
  *
  * export const RegisterAuthorPage = () => (
@@ -227,8 +218,8 @@ const CommandStepperWrapper = ({ children, onStepErrorsChange, showNavigation, s
  * @param props - {@link CommandStepperProps}.
  */
 const CommandStepper = (props) => {
-    const { children, onStepErrorsChange, showNavigation, showSubmit, nextLabel, previousLabel, okLabel, isBusy, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, onBeforeExecute, ...commandFormProps } = props;
-    return (jsx(CommandForm, { ...commandFormProps, children: jsx(CommandStepperWrapper, { onStepErrorsChange: onStepErrorsChange, showNavigation: showNavigation, showSubmit: showSubmit, nextLabel: nextLabel, previousLabel: previousLabel, okLabel: okLabel, isBusy: isBusy, orientation: orientation, headerPosition: headerPosition, linear: linear, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: onBeforeExecute, children: children }) }));
+    const { children, onStepErrorsChange, showNavigation, showSubmit, nextLabel, previousLabel, okLabel, isBusy, linear, orientation, headerPosition, start, end, onChangeStep, pt, ptOptions, unstyled, onBeforeExecute, ...commandFormProps } = props;
+    return (jsx(CommandForm, { ...commandFormProps, children: jsx(CommandStepperWrapper, { onStepErrorsChange: onStepErrorsChange, showNavigation: showNavigation, showSubmit: showSubmit, nextLabel: nextLabel, previousLabel: previousLabel, okLabel: okLabel, isBusy: isBusy, linear: linear, orientation: orientation, headerPosition: headerPosition, start: start, end: end, onChangeStep: onChangeStep, pt: pt, ptOptions: ptOptions, unstyled: unstyled, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: onBeforeExecute, children: children }) }));
 };
 
 export { CommandStepper, CommandStepperContent };