@bitrise/bitkit-v2 0.3.394 → 0.3.395

package/AGENTS.md

@@ -138,22 +138,23 @@ Bitkit components use consistent prop names across the library:
 - **Three dialog components, one shell** — pick by intent, never reach for low-level dialog primitives (there are none exported):
   - `BitkitDialog` — header (title + close) + body (`children`) + footer. The body is the dialog's `children`. The footer is two slot props: `footerButtons` (action buttons, auto-wrapped in the standard right-aligned row — no manual wrapper) and `footerContent` (arbitrary content rendered raw, e.g. an inline `BitkitAlert`). Both can be combined (content first, then buttons); omit both for a passive dialog with no footer.
   - `BitkitFormDialog` — same API as `BitkitDialog`, but the whole content is a `<form>`, so a `type="submit"` button in `footerButtons` submits natively. On top of the shared dialog props it takes `onSubmit` (correctly typed as `FormEvent<HTMLFormElement>`) and `noValidate`, and nothing else off the native `<form>`.
-  - `BitkitStepperDialog` — a multi-step dialog. Pass `BitkitStepperDialog.Step` children (each with `label` for the steps header, `title`/`description` for the step body). It owns the step state and auto-renders the steps header; wire footer navigation via the `useStepperDialog()` hook (`{ step, setStep, next, prev, goTo, isFirst, isLast, totalSteps }`) from a component rendered in the footer slot. Controlled via `step`/`onStepChange`, or uncontrolled via `defaultStep`.
+  - `BitkitStepsDialog` — a multi-step dialog. Pass `BitkitStepsDialog.Step` children (each with `label` for the steps header, `title`/`description` for the step body). It owns the step state and auto-renders the steps header; build the step navigation with the `useStepsDialog()` hook (`{ step, setStep, next, prev, goTo, isFirst, isLast, totalSteps }`) and pass it as `footerButtons`, which the dialog lays out with the leading action opposite the step navigation. `footerContent` still renders raw above it. Controlled via `step`/`onStepChange`, or uncontrolled via `defaultStep`.
   - All three expose `.ActionTrigger` (a thin re-export of Chakra's `Dialog.ActionTrigger`): wrap a footer button in it to close the dialog on click — the default way to dismiss a trigger-based (uncontrolled) dialog without wiring `open` state.
   ```tsx
   <BitkitDialog footerButtons={<><Button variant="secondary">Cancel</Button><Button variant="primary">Save</Button></>} open={open} onOpenChange={…} title="Title">Body</BitkitDialog>
   <BitkitFormDialog onSubmit={handleSubmit} open={open} onOpenChange={…} title="Edit" footerButtons={<Button type="submit">Save</Button>}>…fields…</BitkitFormDialog>
-  <BitkitStepperDialog footerContent={<StepperNav />} title="Wizard" trigger={<Button>Open</Button>}>
-    <BitkitStepperDialog.Step label="Account" title="Create account">…</BitkitStepperDialog.Step>
-    <BitkitStepperDialog.Step label="Confirm" title="Confirm">…</BitkitStepperDialog.Step>
-  </BitkitStepperDialog>
+  <BitkitStepsDialog footerButtons={<StepsNav />} title="Wizard" trigger={<Button>Open</Button>}>
+    <BitkitStepsDialog.Step label="Account" title="Create account">…</BitkitStepsDialog.Step>
+    <BitkitStepsDialog.Step label="Confirm" title="Confirm">…</BitkitStepsDialog.Step>
+  </BitkitStepsDialog>
   ```
-  For closing on click, use controlled `open`/`onOpenChange`, or wrap a button in `BitkitDialog.ActionTrigger` (and the `BitkitFormDialog.ActionTrigger` / `BitkitStepperDialog.ActionTrigger` equivalents). For a fully custom dialog, compose raw Chakra `Dialog.*` atoms directly.
+  For closing on click, use controlled `open`/`onOpenChange`, or wrap a button in `BitkitDialog.ActionTrigger` (and the `BitkitFormDialog.ActionTrigger` / `BitkitStepsDialog.ActionTrigger` equivalents). For a fully custom dialog, compose raw Chakra `Dialog.*` atoms directly.
 
   All three forward `data-*` attributes to the element carrying `role="dialog"` (`data-testid`, `data-clarity-unmask`), and nothing else — style props, `className` and `id` don't pass through.
-- **Dialog non-dismissible + post-close callback** — works on all three: pass `closable={false}` to make the dialog fully non-dismissible (the close button is rendered but disabled, ESC is blocked, outside clicks are ignored — the only way out is an explicit footer action). Pass `onExitComplete` to run code after the close animation finishes (navigation, focus restoration, cleanup):
+- **Dialog non-dismissible + post-close callback** — works on all three: pass `dismissible={false}` to remove every route out that skips a decision (no close button, ESC blocked, outside clicks ignored — the only way out is an explicit footer action). Outside clicks never dismiss a Bitkit dialog, `dismissible` or not. While a footer action is in flight, pass `state="loading"` on the dialog next to the button's own `state="loading"`: the close button stays in place but goes disabled, ESC is blocked, and the dialog gets `aria-busy`. Pass `onExitComplete` to run code after the close animation finishes (navigation, focus restoration, cleanup):
   ```tsx
-  <BitkitDialog closable={false} open={open} onOpenChange={…} title="Action required">…</BitkitDialog>
+  <BitkitDialog dismissible={false} open={open} onOpenChange={…} title="Action required">…</BitkitDialog>
+  <BitkitDialog state={isSaving ? 'loading' : undefined} open={open} onOpenChange={…} title="Save changes">…</BitkitDialog>
   <BitkitDialog open={open} onExitComplete={() => navigate('/next')} onOpenChange={…} title="…">…</BitkitDialog>
   ```
 
@@ -227,7 +228,7 @@ Bitkit components use consistent prop names across the library:
   This holds for form fields (`BitkitTextInput`, `BitkitSelect`, `BitkitNativeSelect`, `BitkitCombobox`, etc.), buttons (`BitkitButton`, `BitkitIconButton`, etc.), and most other components — they all forward Chakra style props through to the rendered root element.
 
   **Exceptions** — a few component groups intentionally own their own layout and don't accept arbitrary style props from outside:
-  - Page-level overlays: `BitkitDialog`, `BitkitFormDialog`, `BitkitStepperDialog`, `BitkitDrawer`, `BitkitCalendar`, `BitkitTour` — they own their layout; where it's configurable at all, it's through their own props (`size`, `maxHeight`, …), not style props from outside.
+  - Page-level overlays: `BitkitDialog`, `BitkitFormDialog`, `BitkitStepsDialog`, `BitkitDrawer`, `BitkitCalendar`, `BitkitTour` — they own their layout; where it's configurable at all, it's through their own props (`size`, `maxHeight`, …), not style props from outside.
   - Floating positioned components: `BitkitTooltip`, `BitkitLabelTooltip`, `BitkitDefinitionTooltip`, `BitkitOverflowTooltip`, `BitkitToast`, `BitkitActionMenu`, `BitkitSelectMenu`, `BitkitMultiselectMenu` — their layout is positioned automatically; pass styling via the component's own props instead of a wrapper.
 
   > **For everything else, if a style prop doesn't take effect on a Bitkit component, that's a bug in the component, not a styling task.** Stop, tell the user something looks off in Bitkit so they can flag it to the Bitkit team — don't quietly add a `<Box>` workaround. Each silent workaround hides a regression and bakes the wrapper pattern into the codebase.

package/dist/components/BitkitDialog/BitkitDialog.d.ts

@@ -4,7 +4,8 @@ import { BitkitDataAttributes } from '../../utilities/dataAttributes';
 import { DialogShellProps } from './DialogShell';
 export type BitkitDialogProps = {
     children?: ReactNode;
-    closable?: boolean;
+    /** Set to `false` to remove every dismiss route that skips a decision: no close button, no ESC. */
+    dismissible?: boolean;
     footerButtons?: ReactNode;
     footerContent?: ReactNode;
     headerLabel?: string;
@@ -20,12 +21,17 @@ export type BitkitDialogProps = {
     scrollBehavior?: 'inside' | 'outside';
     showScrollGradient?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * `loading` locks the dialog while a background action runs: the close button stays in place but
+     * disabled, and ESC is blocked. Use it alongside the footer button's own `state="loading"`.
+     */
+    state?: 'loading';
     title: ReactNode;
     trigger?: ReactNode;
     variant?: 'overflowContent';
 } & BitkitDataAttributes;
 declare const _default: {
-    ({ children, closable, footerButtons, footerContent, headerLabel, initialFocusEl, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant, ...dataAttributes }: BitkitDialogProps): import("react").JSX.Element;
+    ({ children, dismissible, footerButtons, footerContent, headerLabel, initialFocusEl, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, state, title, trigger, variant, ...dataAttributes }: BitkitDialogProps): import("react").JSX.Element;
     displayName: string;
 } & {
     ActionTrigger: import('react').ForwardRefExoticComponent<Dialog.ActionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/BitkitDialog/BitkitDialog.js

@@ -4,8 +4,8 @@ import DialogShell from "./DialogShell.js";
 import { jsx } from "react/jsx-runtime";
 import { Dialog } from "@chakra-ui/react/dialog";
 //#region lib/components/BitkitDialog/BitkitDialog.tsx
-var BitkitDialog = ({ children, closable = true, footerButtons, footerContent, headerLabel, initialFocusEl, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant, ...dataAttributes }) => /* @__PURE__ */ jsx(DialogShell, {
-	closable,
+var BitkitDialog = ({ children, dismissible = true, footerButtons, footerContent, headerLabel, initialFocusEl, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, state, title, trigger, variant, ...dataAttributes }) => /* @__PURE__ */ jsx(DialogShell, {
+	dismissible,
 	initialFocusEl,
 	onExitComplete,
 	onOpenChange,
@@ -13,18 +13,21 @@ var BitkitDialog = ({ children, closable = true, footerButtons, footerContent, h
 	preventScroll,
 	scrollBehavior,
 	size,
+	state,
 	trigger,
 	variant,
 	children: /* @__PURE__ */ jsx(Dialog.Content, {
+		"aria-busy": state === "loading" || void 0,
 		maxHeight,
 		...dataAttributes,
 		children: /* @__PURE__ */ jsx(DialogInner, {
-			closable,
+			dismissible,
 			footerButtons,
 			footerContent,
 			headerLabel,
 			scrollBehavior,
 			showScrollGradient,
+			state,
 			title,
 			variant,
 			children

package/dist/components/BitkitDialog/BitkitDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { type ReactNode } from 'react';\n\nimport { type BitkitDataAttributes } from '../../utilities/dataAttributes';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport DialogInner from './DialogInner';\nimport DialogShell, { type DialogShellProps } from './DialogShell';\n\nexport type BitkitDialogProps = {\n  children?: ReactNode;\n  closable?: boolean;\n  footerButtons?: ReactNode;\n  footerContent?: ReactNode;\n  headerLabel?: string;\n  /** Element to focus when the dialog opens, instead of the first focusable one. */\n  initialFocusEl?: DialogShellProps['initialFocusEl'];\n  maxHeight?: string;\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  title: ReactNode;\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n  // Data attributes are forwarded to the element carrying `role=\"dialog\"`, and nothing else is —\n  // style props, `className` and `id` don't pass through.\n} & BitkitDataAttributes;\n\nconst BitkitDialog = ({\n  children,\n  closable = true,\n  footerButtons,\n  footerContent,\n  headerLabel,\n  initialFocusEl,\n  maxHeight,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll,\n  scrollBehavior,\n  showScrollGradient,\n  size,\n  title,\n  trigger,\n  variant,\n  ...dataAttributes\n}: BitkitDialogProps) => (\n  <DialogShell\n    closable={closable}\n    initialFocusEl={initialFocusEl}\n    onExitComplete={onExitComplete}\n    onOpenChange={onOpenChange}\n    open={open}\n    preventScroll={preventScroll}\n    scrollBehavior={scrollBehavior}\n    size={size}\n    trigger={trigger}\n    variant={variant}\n  >\n    <Dialog.Content maxHeight={maxHeight} {...dataAttributes}>\n      <DialogInner\n        closable={closable}\n        footerButtons={footerButtons}\n        footerContent={footerContent}\n        headerLabel={headerLabel}\n        scrollBehavior={scrollBehavior}\n        showScrollGradient={showScrollGradient}\n        title={title}\n        variant={variant}\n      >\n        {children}\n      </DialogInner>\n    </Dialog.Content>\n  </DialogShell>\n);\n\nBitkitDialog.displayName = 'BitkitDialog';\n\nexport default withSubComponents(BitkitDialog, { ActionTrigger: Dialog.ActionTrigger });\n"],"mappings":";;;;;;AA+BA,IAAM,gBAAgB,EACpB,UACA,WAAW,MACX,eACA,eACA,aACA,gBACA,WACA,gBACA,cACA,MACA,eACA,gBACA,oBACA,MACA,OACA,SACA,SACA,GAAG,qBAEH,oBAAC,aAAD;CACY;CACM;CACA;CACF;CACR;CACS;CACC;CACV;CACG;CACA;CAET,UAAA,oBAAC,OAAO,SAAR;EAA2B;EAAW,GAAI;EACxC,UAAA,oBAAC,aAAD;GACY;GACK;GACA;GACF;GACG;GACI;GACb;GACE;GAER;EACU,CAAA;CACC,CAAA;AACL,CAAA;AAGf,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc,EAAE,eAAe,OAAO,cAAc,CAAC"}
+{"version":3,"file":"BitkitDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { type ReactNode } from 'react';\n\nimport { type BitkitDataAttributes } from '../../utilities/dataAttributes';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport DialogInner from './DialogInner';\nimport DialogShell, { type DialogShellProps } from './DialogShell';\n\nexport type BitkitDialogProps = {\n  children?: ReactNode;\n  /** Set to `false` to remove every dismiss route that skips a decision: no close button, no ESC. */\n  dismissible?: boolean;\n  footerButtons?: ReactNode;\n  footerContent?: ReactNode;\n  headerLabel?: string;\n  /** Element to focus when the dialog opens, instead of the first focusable one. */\n  initialFocusEl?: DialogShellProps['initialFocusEl'];\n  maxHeight?: string;\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  /**\n   * `loading` locks the dialog while a background action runs: the close button stays in place but\n   * disabled, and ESC is blocked. Use it alongside the footer button's own `state=\"loading\"`.\n   */\n  state?: 'loading';\n  title: ReactNode;\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n  // Data attributes are forwarded to the element carrying `role=\"dialog\"`, and nothing else is —\n  // style props, `className` and `id` don't pass through.\n} & BitkitDataAttributes;\n\nconst BitkitDialog = ({\n  children,\n  dismissible = true,\n  footerButtons,\n  footerContent,\n  headerLabel,\n  initialFocusEl,\n  maxHeight,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll,\n  scrollBehavior,\n  showScrollGradient,\n  size,\n  state,\n  title,\n  trigger,\n  variant,\n  ...dataAttributes\n}: BitkitDialogProps) => (\n  <DialogShell\n    dismissible={dismissible}\n    initialFocusEl={initialFocusEl}\n    onExitComplete={onExitComplete}\n    onOpenChange={onOpenChange}\n    open={open}\n    preventScroll={preventScroll}\n    scrollBehavior={scrollBehavior}\n    size={size}\n    state={state}\n    trigger={trigger}\n    variant={variant}\n  >\n    <Dialog.Content aria-busy={state === 'loading' || undefined} maxHeight={maxHeight} {...dataAttributes}>\n      <DialogInner\n        dismissible={dismissible}\n        footerButtons={footerButtons}\n        footerContent={footerContent}\n        headerLabel={headerLabel}\n        scrollBehavior={scrollBehavior}\n        showScrollGradient={showScrollGradient}\n        state={state}\n        title={title}\n        variant={variant}\n      >\n        {children}\n      </DialogInner>\n    </Dialog.Content>\n  </DialogShell>\n);\n\nBitkitDialog.displayName = 'BitkitDialog';\n\nexport default withSubComponents(BitkitDialog, { ActionTrigger: Dialog.ActionTrigger });\n"],"mappings":";;;;;;AAqCA,IAAM,gBAAgB,EACpB,UACA,cAAc,MACd,eACA,eACA,aACA,gBACA,WACA,gBACA,cACA,MACA,eACA,gBACA,oBACA,MACA,OACA,OACA,SACA,SACA,GAAG,qBAEH,oBAAC,aAAD;CACe;CACG;CACA;CACF;CACR;CACS;CACC;CACV;CACC;CACE;CACA;CAET,UAAA,oBAAC,OAAO,SAAR;EAAgB,aAAW,UAAU,aAAa,KAAA;EAAsB;EAAW,GAAI;EACrF,UAAA,oBAAC,aAAD;GACe;GACE;GACA;GACF;GACG;GACI;GACb;GACA;GACE;GAER;EACU,CAAA;CACC,CAAA;AACL,CAAA;AAGf,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc,EAAE,eAAe,OAAO,cAAc,CAAC"}

package/dist/components/BitkitDialog/BitkitFormDialog.d.ts

@@ -8,7 +8,7 @@ export type BitkitFormDialogProps = BitkitDialogProps & {
 };
 declare const _default: import('react').ForwardRefExoticComponent<{
     children?: import('react').ReactNode;
-    closable?: boolean;
+    dismissible?: boolean;
     footerButtons?: import('react').ReactNode;
     footerContent?: import('react').ReactNode;
     headerLabel?: string;
@@ -23,6 +23,7 @@ declare const _default: import('react').ForwardRefExoticComponent<{
     scrollBehavior?: "inside" | "outside";
     showScrollGradient?: boolean;
     size?: "sm" | "md" | "lg" | "full";
+    state?: "loading";
     title: import('react').ReactNode;
     trigger?: import('react').ReactNode;
     variant?: "overflowContent";

package/dist/components/BitkitDialog/BitkitFormDialog.js

@@ -12,9 +12,9 @@ import { Dialog } from "@chakra-ui/react/dialog";
 * `onSubmit` and `noValidate` — no Chakra style props, no `className`, no `id`.
 */
 var BitkitFormDialog = forwardRef((props, ref) => {
-	const { children, closable = true, footerButtons, footerContent, headerLabel, initialFocusEl, maxHeight, noValidate, onExitComplete, onOpenChange, onSubmit, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant, ...dataAttributes } = props;
+	const { children, dismissible = true, footerButtons, footerContent, headerLabel, initialFocusEl, maxHeight, noValidate, onExitComplete, onOpenChange, onSubmit, open, preventScroll, scrollBehavior, showScrollGradient, size, state, title, trigger, variant, ...dataAttributes } = props;
 	return /* @__PURE__ */ jsx(DialogShell, {
-		closable,
+		dismissible,
 		initialFocusEl,
 		onExitComplete,
 		onOpenChange,
@@ -22,9 +22,11 @@ var BitkitFormDialog = forwardRef((props, ref) => {
 		preventScroll,
 		scrollBehavior,
 		size,
+		state,
 		trigger,
 		variant,
 		children: /* @__PURE__ */ jsx(Dialog.Content, {
+			"aria-busy": state === "loading" || void 0,
 			asChild: true,
 			maxHeight,
 			...dataAttributes,
@@ -33,12 +35,13 @@ var BitkitFormDialog = forwardRef((props, ref) => {
 				noValidate,
 				onSubmit,
 				children: /* @__PURE__ */ jsx(DialogInner, {
-					closable,
+					dismissible,
 					footerButtons,
 					footerContent,
 					headerLabel,
 					scrollBehavior,
 					showScrollGradient,
+					state,
 					title,
 					variant,
 					children

package/dist/components/BitkitDialog/BitkitFormDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitFormDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitFormDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type FormEventHandler, forwardRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { type BitkitDialogProps } from './BitkitDialog';\nimport DialogInner from './DialogInner';\nimport DialogShell from './DialogShell';\n\nexport type BitkitFormDialogProps = BitkitDialogProps & {\n  /** Skips the browser's native constraint validation on submit. */\n  noValidate?: boolean;\n  onSubmit?: FormEventHandler<HTMLFormElement>;\n};\n\n/**\n * A dialog whose entire content is a `<form>`, so a `type=\"submit\"` button in the footer submits\n * natively. Like the other dialog overlays it owns its own layout, so the form surface is just\n * `onSubmit` and `noValidate` — no Chakra style props, no `className`, no `id`.\n */\nconst BitkitFormDialog = forwardRef<HTMLFormElement, BitkitFormDialogProps>((props, ref) => {\n  const {\n    children,\n    closable = true,\n    footerButtons,\n    footerContent,\n    headerLabel,\n    initialFocusEl,\n    maxHeight,\n    noValidate,\n    onExitComplete,\n    onOpenChange,\n    onSubmit,\n    open,\n    preventScroll,\n    scrollBehavior,\n    showScrollGradient,\n    size,\n    title,\n    trigger,\n    variant,\n    ...dataAttributes\n  } = props;\n\n  return (\n    <DialogShell\n      closable={closable}\n      initialFocusEl={initialFocusEl}\n      onExitComplete={onExitComplete}\n      onOpenChange={onOpenChange}\n      open={open}\n      preventScroll={preventScroll}\n      scrollBehavior={scrollBehavior}\n      size={size}\n      trigger={trigger}\n      variant={variant}\n    >\n      <Dialog.Content asChild maxHeight={maxHeight} {...dataAttributes}>\n        <chakra.form ref={ref} noValidate={noValidate} onSubmit={onSubmit}>\n          <DialogInner\n            closable={closable}\n            footerButtons={footerButtons}\n            footerContent={footerContent}\n            headerLabel={headerLabel}\n            scrollBehavior={scrollBehavior}\n            showScrollGradient={showScrollGradient}\n            title={title}\n            variant={variant}\n          >\n            {children}\n          </DialogInner>\n        </chakra.form>\n      </Dialog.Content>\n    </DialogShell>\n  );\n});\n\nBitkitFormDialog.displayName = 'BitkitFormDialog';\n\nexport default withSubComponents(BitkitFormDialog, { ActionTrigger: Dialog.ActionTrigger });\n"],"mappings":";;;;;;;;;;;;;AAoBA,IAAM,mBAAmB,YAAoD,OAAO,QAAQ;CAC1F,MAAM,EACJ,UACA,WAAW,MACX,eACA,eACA,aACA,gBACA,WACA,YACA,gBACA,cACA,UACA,MACA,eACA,gBACA,oBACA,MACA,OACA,SACA,SACA,GAAG,mBACD;CAEJ,OACE,oBAAC,aAAD;EACY;EACM;EACA;EACF;EACR;EACS;EACC;EACV;EACG;EACA;EAET,UAAA,oBAAC,OAAO,SAAR;GAAgB,SAAA;GAAmB;GAAW,GAAI;GAChD,UAAA,oBAAC,OAAO,MAAR;IAAkB;IAAiB;IAAsB;IACvD,UAAA,oBAAC,aAAD;KACY;KACK;KACA;KACF;KACG;KACI;KACb;KACE;KAER;IACU,CAAA;GACF,CAAA;EACC,CAAA;CACL,CAAA;AAEjB,CAAC;AAED,iBAAiB,cAAc;AAE/B,IAAA,2BAAe,kBAAkB,kBAAkB,EAAE,eAAe,OAAO,cAAc,CAAC"}
+{"version":3,"file":"BitkitFormDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitFormDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type FormEventHandler, forwardRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { type BitkitDialogProps } from './BitkitDialog';\nimport DialogInner from './DialogInner';\nimport DialogShell from './DialogShell';\n\nexport type BitkitFormDialogProps = BitkitDialogProps & {\n  /** Skips the browser's native constraint validation on submit. */\n  noValidate?: boolean;\n  onSubmit?: FormEventHandler<HTMLFormElement>;\n};\n\n/**\n * A dialog whose entire content is a `<form>`, so a `type=\"submit\"` button in the footer submits\n * natively. Like the other dialog overlays it owns its own layout, so the form surface is just\n * `onSubmit` and `noValidate` — no Chakra style props, no `className`, no `id`.\n */\nconst BitkitFormDialog = forwardRef<HTMLFormElement, BitkitFormDialogProps>((props, ref) => {\n  const {\n    children,\n    dismissible = true,\n    footerButtons,\n    footerContent,\n    headerLabel,\n    initialFocusEl,\n    maxHeight,\n    noValidate,\n    onExitComplete,\n    onOpenChange,\n    onSubmit,\n    open,\n    preventScroll,\n    scrollBehavior,\n    showScrollGradient,\n    size,\n    state,\n    title,\n    trigger,\n    variant,\n    ...dataAttributes\n  } = props;\n\n  return (\n    <DialogShell\n      dismissible={dismissible}\n      initialFocusEl={initialFocusEl}\n      onExitComplete={onExitComplete}\n      onOpenChange={onOpenChange}\n      open={open}\n      preventScroll={preventScroll}\n      scrollBehavior={scrollBehavior}\n      size={size}\n      state={state}\n      trigger={trigger}\n      variant={variant}\n    >\n      <Dialog.Content aria-busy={state === 'loading' || undefined} asChild maxHeight={maxHeight} {...dataAttributes}>\n        <chakra.form ref={ref} noValidate={noValidate} onSubmit={onSubmit}>\n          <DialogInner\n            dismissible={dismissible}\n            footerButtons={footerButtons}\n            footerContent={footerContent}\n            headerLabel={headerLabel}\n            scrollBehavior={scrollBehavior}\n            showScrollGradient={showScrollGradient}\n            state={state}\n            title={title}\n            variant={variant}\n          >\n            {children}\n          </DialogInner>\n        </chakra.form>\n      </Dialog.Content>\n    </DialogShell>\n  );\n});\n\nBitkitFormDialog.displayName = 'BitkitFormDialog';\n\nexport default withSubComponents(BitkitFormDialog, { ActionTrigger: Dialog.ActionTrigger });\n"],"mappings":";;;;;;;;;;;;;AAoBA,IAAM,mBAAmB,YAAoD,OAAO,QAAQ;CAC1F,MAAM,EACJ,UACA,cAAc,MACd,eACA,eACA,aACA,gBACA,WACA,YACA,gBACA,cACA,UACA,MACA,eACA,gBACA,oBACA,MACA,OACA,OACA,SACA,SACA,GAAG,mBACD;CAEJ,OACE,oBAAC,aAAD;EACe;EACG;EACA;EACF;EACR;EACS;EACC;EACV;EACC;EACE;EACA;EAET,UAAA,oBAAC,OAAO,SAAR;GAAgB,aAAW,UAAU,aAAa,KAAA;GAAW,SAAA;GAAmB;GAAW,GAAI;GAC7F,UAAA,oBAAC,OAAO,MAAR;IAAkB;IAAiB;IAAsB;IACvD,UAAA,oBAAC,aAAD;KACe;KACE;KACA;KACF;KACG;KACI;KACb;KACA;KACE;KAER;IACU,CAAA;GACF,CAAA;EACC,CAAA;CACL,CAAA;AAEjB,CAAC;AAED,iBAAiB,cAAc;AAE/B,IAAA,2BAAe,kBAAkB,kBAAkB,EAAE,eAAe,OAAO,cAAc,CAAC"}

package/dist/components/BitkitDialog/{BitkitStepperDialog.d.ts → BitkitStepsDialog.d.ts}

@@ -1,22 +1,24 @@
 import { Dialog } from '@chakra-ui/react/dialog';
 import { ReactNode } from 'react';
 import { BitkitDataAttributes } from '../../utilities/dataAttributes';
-import { BitkitStepperDialogStepProps } from './BitkitStepperDialogStep';
+import { BitkitStepsDialogStepProps } from './BitkitStepsDialogStep';
 import { DialogShellProps } from './DialogShell';
-export { useStepperDialog } from './StepperContext';
-export type BitkitStepperDialogProps = {
-    /** `BitkitStepperDialog.Step` children, one per step. */
+export { useStepsDialog } from './StepsDialogContext';
+export type BitkitStepsDialogProps = {
+    /** `BitkitStepsDialog.Step` children, one per step. */
     children: ReactNode;
-    closable?: boolean;
     /** Initial step when uncontrolled. Resets to this when the dialog closes. */
     defaultStep?: number;
+    /** Set to `false` to remove every dismiss route that skips a decision: no close button, no ESC. */
+    dismissible?: boolean;
     /** Element to focus when the dialog opens, instead of the first focusable one. */
     initialFocusEl?: DialogShellProps['initialFocusEl'];
     /**
-     * Footer content rendered raw. Stepper footers are space-between (Cancel left, Prev/Next right),
-     * so build the nav row here with `useStepperDialog()` — there is no `footerButtons` slot, which
-     * would force right-alignment.
+     * The step navigation, built with `useStepsDialog()`. Pass the buttons themselves: the dialog lays
+     * them out the way the design asks for, leading action on the left, the step navigation opposite.
      */
+    footerButtons?: ReactNode;
+    /** Arbitrary content rendered raw inside the footer, above `footerButtons` (e.g. a `BitkitAlert`). */
     footerContent?: ReactNode;
     headerLabel?: string;
     maxHeight?: string;
@@ -31,6 +33,11 @@ export type BitkitStepperDialogProps = {
     scrollBehavior?: 'inside' | 'outside';
     showScrollGradient?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * `loading` locks the dialog while a background action runs: the close button stays in place but
+     * disabled, and ESC is blocked. Use it alongside the footer button's own `state="loading"`.
+     */
+    state?: 'loading';
     /** Controlled active step. Omit for uncontrolled (see `defaultStep`). */
     step?: number;
     title: ReactNode;
@@ -38,12 +45,12 @@ export type BitkitStepperDialogProps = {
     variant?: 'overflowContent';
 } & BitkitDataAttributes;
 declare const _default: {
-    ({ children, closable, defaultStep, initialFocusEl, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, onStepChange, open, preventScroll, scrollBehavior, showScrollGradient, size, step: stepProp, title, trigger, variant, ...dataAttributes }: BitkitStepperDialogProps): import("react").JSX.Element;
+    ({ children, defaultStep, dismissible, initialFocusEl, footerButtons, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, onStepChange, open, preventScroll, scrollBehavior, showScrollGradient, size, state, step: stepProp, title, trigger, variant, ...dataAttributes }: BitkitStepsDialogProps): import("react").JSX.Element;
     displayName: string;
 } & {
     ActionTrigger: import('react').ForwardRefExoticComponent<Dialog.ActionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
     Step: {
-        ({ children, description, title }: BitkitStepperDialogStepProps): import("react").JSX.Element;
+        ({ children, description, title }: BitkitStepsDialogStepProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/BitkitDialog/{BitkitStepperDialog.js → BitkitStepsDialog.js}

@@ -3,22 +3,23 @@ import { flattenChildren } from "../../utilities/flattenChildren.js";
 import DialogInner from "./DialogInner.js";
 import DialogShell from "./DialogShell.js";
 import BitkitSteps_default from "../BitkitSteps/BitkitSteps.js";
-import BitkitStepperDialogStep from "./BitkitStepperDialogStep.js";
-import { StepperDialogProvider, useStepperDialog } from "./StepperContext.js";
+import BitkitStepsDialogStep from "./BitkitStepsDialogStep.js";
+import { StepsDialogProvider, useStepsDialog } from "./StepsDialogContext.js";
+import { Box } from "@chakra-ui/react/box";
 import { useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Dialog } from "@chakra-ui/react/dialog";
-//#region lib/components/BitkitDialog/BitkitStepperDialog.tsx
+//#region lib/components/BitkitDialog/BitkitStepsDialog.tsx
 /**
-* A dialog that walks through a sequence of `BitkitStepperDialog.Step` children. It owns the step
-* state, auto-renders the steps header, and shows only the active step's body. Footer navigation is
-* wired by the consumer through the `useStepperDialog()` hook.
+* A dialog that walks through a sequence of `BitkitStepsDialog.Step` children. It owns the step
+* state, auto-renders the steps header, and shows only the active step's body. The consumer builds
+* the step navigation with the `useStepsDialog()` hook and passes it in as `footerButtons`.
 */
-var BitkitStepperDialog = ({ children, closable = true, defaultStep = 0, initialFocusEl, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, onStepChange, open, preventScroll, scrollBehavior, showScrollGradient, size, step: stepProp, title, trigger, variant, ...dataAttributes }) => {
+var BitkitStepsDialog = ({ children, defaultStep = 0, dismissible = true, initialFocusEl, footerButtons, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, onStepChange, open, preventScroll, scrollBehavior, showScrollGradient, size, state, step: stepProp, title, trigger, variant, ...dataAttributes }) => {
 	const [internalStep, setInternalStep] = useState(defaultStep);
 	const isControlled = stepProp !== void 0;
 	const rawStep = (isControlled ? stepProp : internalStep) ?? 0;
-	const steps = flattenChildren(children).filter((child) => child.type === BitkitStepperDialogStep);
+	const steps = flattenChildren(children).filter((child) => child.type === BitkitStepsDialogStep);
 	const totalSteps = steps.length;
 	const step = Math.max(0, Math.min(rawStep, Math.max(0, totalSteps - 1)));
 	const setStep = useCallback((next) => {
@@ -48,14 +49,20 @@ var BitkitStepperDialog = ({ children, closable = true, defaultStep = 0, initial
 		if (!details.open && !isControlled) setInternalStep(defaultStep);
 		onOpenChange?.(details);
 	};
+	const footerNav = footerButtons && /* @__PURE__ */ jsx(Box, {
+		display: "flex",
+		justifyContent: "space-between",
+		width: "100%",
+		children: footerButtons
+	});
 	const stepsHeader = /* @__PURE__ */ jsx(BitkitSteps_default, {
 		step,
 		children: steps.map((child, index) => /* @__PURE__ */ jsx(BitkitSteps_default.Item, { label: child.props.label }, index))
 	});
-	return /* @__PURE__ */ jsx(StepperDialogProvider, {
+	return /* @__PURE__ */ jsx(StepsDialogProvider, {
 		value: ctx,
 		children: /* @__PURE__ */ jsx(DialogShell, {
-			closable,
+			dismissible,
 			initialFocusEl,
 			onExitComplete,
 			onOpenChange: handleOpenChange,
@@ -63,18 +70,22 @@ var BitkitStepperDialog = ({ children, closable = true, defaultStep = 0, initial
 			preventScroll,
 			scrollBehavior,
 			size,
+			state,
 			trigger,
 			variant,
 			children: /* @__PURE__ */ jsx(Dialog.Content, {
+				"aria-busy": state === "loading" || void 0,
 				maxHeight,
 				...dataAttributes,
 				children: /* @__PURE__ */ jsx(DialogInner, {
-					closable,
+					dismissible,
+					footerButtons: footerNav,
 					footerContent,
 					headerExtra: stepsHeader,
 					headerLabel,
 					scrollBehavior,
 					showScrollGradient,
+					state,
 					title,
 					variant,
 					children: steps[step]
@@ -83,12 +94,12 @@ var BitkitStepperDialog = ({ children, closable = true, defaultStep = 0, initial
 		})
 	});
 };
-BitkitStepperDialog.displayName = "BitkitStepperDialog";
-var BitkitStepperDialog_default = withSubComponents(BitkitStepperDialog, {
+BitkitStepsDialog.displayName = "BitkitStepsDialog";
+var BitkitStepsDialog_default = withSubComponents(BitkitStepsDialog, {
 	ActionTrigger: Dialog.ActionTrigger,
-	Step: BitkitStepperDialogStep
+	Step: BitkitStepsDialogStep
 });
 //#endregion
-export { BitkitStepperDialog_default as default, useStepperDialog };
+export { BitkitStepsDialog_default as default, useStepsDialog };
 
-//# sourceMappingURL=BitkitStepperDialog.js.map
+//# sourceMappingURL=BitkitStepsDialog.js.map

package/dist/components/BitkitDialog/BitkitStepsDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitStepsDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepsDialog.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog } from '@chakra-ui/react/dialog';\nimport { type ReactElement, type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { type BitkitDataAttributes } from '../../utilities/dataAttributes';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitSteps from '../BitkitSteps/BitkitSteps';\nimport BitkitStepsDialogStep, { type BitkitStepsDialogStepProps } from './BitkitStepsDialogStep';\nimport DialogInner from './DialogInner';\nimport DialogShell, { type DialogShellProps } from './DialogShell';\nimport { StepsDialogProvider } from './StepsDialogContext';\n\nexport { useStepsDialog } from './StepsDialogContext';\n\nexport type BitkitStepsDialogProps = {\n  /** `BitkitStepsDialog.Step` children, one per step. */\n  children: ReactNode;\n  /** Initial step when uncontrolled. Resets to this when the dialog closes. */\n  defaultStep?: number;\n  /** Set to `false` to remove every dismiss route that skips a decision: no close button, no ESC. */\n  dismissible?: boolean;\n  /** Element to focus when the dialog opens, instead of the first focusable one. */\n  initialFocusEl?: DialogShellProps['initialFocusEl'];\n  /**\n   * The step navigation, built with `useStepsDialog()`. Pass the buttons themselves: the dialog lays\n   * them out the way the design asks for, leading action on the left, the step navigation opposite.\n   */\n  footerButtons?: ReactNode;\n  /** Arbitrary content rendered raw inside the footer, above `footerButtons` (e.g. a `BitkitAlert`). */\n  footerContent?: ReactNode;\n  headerLabel?: string;\n  maxHeight?: string;\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  /** Called whenever the active step changes (controlled or uncontrolled). */\n  onStepChange?: (step: number) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  /**\n   * `loading` locks the dialog while a background action runs: the close button stays in place but\n   * disabled, and ESC is blocked. Use it alongside the footer button's own `state=\"loading\"`.\n   */\n  state?: 'loading';\n  /** Controlled active step. Omit for uncontrolled (see `defaultStep`). */\n  step?: number;\n  title: ReactNode;\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n  // Data attributes are forwarded to the element carrying `role=\"dialog\"`, and nothing else is —\n  // style props, `className` and `id` don't pass through.\n} & BitkitDataAttributes;\n\n/**\n * A dialog that walks through a sequence of `BitkitStepsDialog.Step` children. It owns the step\n * state, auto-renders the steps header, and shows only the active step's body. The consumer builds\n * the step navigation with the `useStepsDialog()` hook and passes it in as `footerButtons`.\n */\nconst BitkitStepsDialog = ({\n  children,\n  defaultStep = 0,\n  dismissible = true,\n  initialFocusEl,\n  footerButtons,\n  footerContent,\n  headerLabel,\n  maxHeight,\n  onExitComplete,\n  onOpenChange,\n  onStepChange,\n  open,\n  preventScroll,\n  scrollBehavior,\n  showScrollGradient,\n  size,\n  state,\n  step: stepProp,\n  title,\n  trigger,\n  variant,\n  ...dataAttributes\n}: BitkitStepsDialogProps) => {\n  const [internalStep, setInternalStep] = useState(defaultStep);\n  const isControlled = stepProp !== undefined;\n  const rawStep = (isControlled ? stepProp : internalStep) ?? 0;\n  const steps = flattenChildren(children).filter(\n    (child): child is ReactElement<BitkitStepsDialogStepProps> => child.type === BitkitStepsDialogStep,\n  );\n  const totalSteps = steps.length;\n  const step = Math.max(0, Math.min(rawStep, Math.max(0, totalSteps - 1)));\n\n  const setStep = useCallback(\n    (next: number) => {\n      const clamped = Math.max(0, Math.min(next, totalSteps - 1));\n      if (!isControlled) setInternalStep(clamped);\n      onStepChange?.(clamped);\n    },\n    [isControlled, onStepChange, totalSteps],\n  );\n\n  const ctx = useMemo(\n    () => ({\n      goTo: setStep,\n      isFirst: step === 0,\n      isLast: step === totalSteps - 1,\n      next: () => setStep(step + 1),\n      prev: () => setStep(step - 1),\n      setStep,\n      step,\n      totalSteps,\n    }),\n    [setStep, step, totalSteps],\n  );\n\n  const handleOpenChange = (details: { open: boolean }) => {\n    if (!details.open && !isControlled) setInternalStep(defaultStep);\n    onOpenChange?.(details);\n  };\n\n  // The design splits this row: the leading action sits opposite the step navigation. Laying it out\n  // here rather than in `DialogInner` keeps the shared action block right-aligned for every other\n  // dialog, and keeps the split off every call site.\n  const footerNav = footerButtons && (\n    <Box display=\"flex\" justifyContent=\"space-between\" width=\"100%\">\n      {footerButtons}\n    </Box>\n  );\n\n  const stepsHeader = (\n    <BitkitSteps step={step}>\n      {steps.map((child, index) => (\n        <BitkitSteps.Item key={index} label={child.props.label} />\n      ))}\n    </BitkitSteps>\n  );\n\n  return (\n    <StepsDialogProvider value={ctx}>\n      <DialogShell\n        dismissible={dismissible}\n        initialFocusEl={initialFocusEl}\n        onExitComplete={onExitComplete}\n        onOpenChange={handleOpenChange}\n        open={open}\n        preventScroll={preventScroll}\n        scrollBehavior={scrollBehavior}\n        size={size}\n        state={state}\n        trigger={trigger}\n        variant={variant}\n      >\n        <Dialog.Content aria-busy={state === 'loading' || undefined} maxHeight={maxHeight} {...dataAttributes}>\n          <DialogInner\n            dismissible={dismissible}\n            footerButtons={footerNav}\n            footerContent={footerContent}\n            headerExtra={stepsHeader}\n            headerLabel={headerLabel}\n            scrollBehavior={scrollBehavior}\n            showScrollGradient={showScrollGradient}\n            state={state}\n            title={title}\n            variant={variant}\n          >\n            {steps[step]}\n          </DialogInner>\n        </Dialog.Content>\n      </DialogShell>\n    </StepsDialogProvider>\n  );\n};\n\nBitkitStepsDialog.displayName = 'BitkitStepsDialog';\n\nexport default withSubComponents(BitkitStepsDialog, {\n  ActionTrigger: Dialog.ActionTrigger,\n  Step: BitkitStepsDialogStep,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AA6DA,IAAM,qBAAqB,EACzB,UACA,cAAc,GACd,cAAc,MACd,gBACA,eACA,eACA,aACA,WACA,gBACA,cACA,cACA,MACA,eACA,gBACA,oBACA,MACA,OACA,MAAM,UACN,OACA,SACA,SACA,GAAG,qBACyB;CAC5B,MAAM,CAAC,cAAc,mBAAmB,SAAS,WAAW;CAC5D,MAAM,eAAe,aAAa,KAAA;CAClC,MAAM,WAAW,eAAe,WAAW,iBAAiB;CAC5D,MAAM,QAAQ,gBAAgB,QAAQ,CAAC,CAAC,QACrC,UAA6D,MAAM,SAAS,qBAC/E;CACA,MAAM,aAAa,MAAM;CACzB,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,KAAK,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;CAEvE,MAAM,UAAU,aACb,SAAiB;EAChB,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,aAAa,CAAC,CAAC;EAC1D,IAAI,CAAC,cAAc,gBAAgB,OAAO;EAC1C,eAAe,OAAO;CACxB,GACA;EAAC;EAAc;EAAc;CAAU,CACzC;CAEA,MAAM,MAAM,eACH;EACL,MAAM;EACN,SAAS,SAAS;EAClB,QAAQ,SAAS,aAAa;EAC9B,YAAY,QAAQ,OAAO,CAAC;EAC5B,YAAY,QAAQ,OAAO,CAAC;EAC5B;EACA;EACA;CACF,IACA;EAAC;EAAS;EAAM;CAAU,CAC5B;CAEA,MAAM,oBAAoB,YAA+B;EACvD,IAAI,CAAC,QAAQ,QAAQ,CAAC,cAAc,gBAAgB,WAAW;EAC/D,eAAe,OAAO;CACxB;CAKA,MAAM,YAAY,iBAChB,oBAAC,KAAD;EAAK,SAAQ;EAAO,gBAAe;EAAgB,OAAM;EACtD,UAAA;CACE,CAAA;CAGP,MAAM,cACJ,oBAAC,qBAAD;EAAmB;EAChB,UAAA,MAAM,KAAK,OAAO,UACjB,oBAAC,oBAAY,MAAb,EAA8B,OAAO,MAAM,MAAM,MAAQ,GAAlC,KAAkC,CAC1D;CACU,CAAA;CAGf,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAAC,aAAD;GACe;GACG;GACA;GAChB,cAAc;GACR;GACS;GACC;GACV;GACC;GACE;GACA;GAET,UAAA,oBAAC,OAAO,SAAR;IAAgB,aAAW,UAAU,aAAa,KAAA;IAAsB;IAAW,GAAI;IACrF,UAAA,oBAAC,aAAD;KACe;KACb,eAAe;KACA;KACf,aAAa;KACA;KACG;KACI;KACb;KACA;KACE;KAER,UAAA,MAAM;IACI,CAAA;GACC,CAAA;EACL,CAAA;CACM,CAAA;AAEzB;AAEA,kBAAkB,cAAc;AAEhC,IAAA,4BAAe,kBAAkB,mBAAmB;CAClD,eAAe,OAAO;CACtB,MAAM;AACR,CAAC"}

package/dist/components/BitkitDialog/{BitkitStepperDialogStep.d.ts → BitkitStepsDialogStep.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export interface BitkitStepperDialogStepProps {
+export interface BitkitStepsDialogStepProps {
     /** Body content for this step. */
     children?: ReactNode;
     /** Optional subtitle shown under the step's body title. */
@@ -10,11 +10,11 @@ export interface BitkitStepperDialogStepProps {
     title: string;
 }
 /**
- * A single step of a {@link BitkitStepperDialog}. Renders its `title`/`description` typography
+ * A single step of a {@link BitkitStepsDialog}. Renders its `title`/`description` typography
  * followed by `children`. The parent only mounts the active step, so this never self-gates.
  */
-declare const BitkitStepperDialogStep: {
-    ({ children, description, title }: BitkitStepperDialogStepProps): import("react").JSX.Element;
+declare const BitkitStepsDialogStep: {
+    ({ children, description, title }: BitkitStepsDialogStepProps): import("react").JSX.Element;
     displayName: string;
 };
-export default BitkitStepperDialogStep;
+export default BitkitStepsDialogStep;

package/dist/components/BitkitDialog/{BitkitStepperDialogStep.js → BitkitStepsDialogStep.js}

@@ -1,12 +1,12 @@
 import { chakra } from "@chakra-ui/react/styled-system";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useDialogStyles } from "@chakra-ui/react/dialog";
-//#region lib/components/BitkitDialog/BitkitStepperDialogStep.tsx
+//#region lib/components/BitkitDialog/BitkitStepsDialogStep.tsx
 /**
-* A single step of a {@link BitkitStepperDialog}. Renders its `title`/`description` typography
+* A single step of a {@link BitkitStepsDialog}. Renders its `title`/`description` typography
 * followed by `children`. The parent only mounts the active step, so this never self-gates.
 */
-var BitkitStepperDialogStep = ({ children, description, title }) => {
+var BitkitStepsDialogStep = ({ children, description, title }) => {
 	const styles = useDialogStyles();
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(chakra.div, {
 		css: styles.stepTitleGroup,
@@ -19,8 +19,8 @@ var BitkitStepperDialogStep = ({ children, description, title }) => {
 		})]
 	}), children] });
 };
-BitkitStepperDialogStep.displayName = "BitkitStepperDialogStep";
+BitkitStepsDialogStep.displayName = "BitkitStepsDialogStep";
 //#endregion
-export { BitkitStepperDialogStep as default };
+export { BitkitStepsDialogStep as default };
 
-//# sourceMappingURL=BitkitStepperDialogStep.js.map
+//# sourceMappingURL=BitkitStepsDialogStep.js.map

package/dist/components/BitkitDialog/BitkitStepsDialogStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitStepsDialogStep.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepsDialogStep.tsx"],"sourcesContent":["import { useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode } from 'react';\n\nexport interface BitkitStepsDialogStepProps {\n  /** Body content for this step. */\n  children?: ReactNode;\n  /** Optional subtitle shown under the step's body title. */\n  description?: string;\n  /** Short label shown in the steps header. */\n  label: string;\n  /** Heading shown at the top of the step's body. */\n  title: string;\n}\n\n/**\n * A single step of a {@link BitkitStepsDialog}. Renders its `title`/`description` typography\n * followed by `children`. The parent only mounts the active step, so this never self-gates.\n */\nconst BitkitStepsDialogStep = ({ children, description, title }: BitkitStepsDialogStepProps) => {\n  const styles = useDialogStyles();\n\n  return (\n    <>\n      <chakra.div css={styles.stepTitleGroup}>\n        <chakra.p css={styles.stepTitle}>{title}</chakra.p>\n        {description && <chakra.p css={styles.stepDescription}>{description}</chakra.p>}\n      </chakra.div>\n      {children}\n    </>\n  );\n};\n\nBitkitStepsDialogStep.displayName = 'BitkitStepsDialogStep';\n\nexport default BitkitStepsDialogStep;\n"],"mappings":";;;;;;;;AAmBA,IAAM,yBAAyB,EAAE,UAAU,aAAa,YAAwC;CAC9F,MAAM,SAAS,gBAAgB;CAE/B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAO,KAAR;EAAY,KAAK,OAAO;EAAxB,UAAA,CACE,oBAAC,OAAO,GAAR;GAAU,KAAK,OAAO;GAAY,UAAA;EAAgB,CAAA,GACjD,eAAe,oBAAC,OAAO,GAAR;GAAU,KAAK,OAAO;GAAkB,UAAA;EAAsB,CAAA,CACpE;CACX,CAAA,GAAA,QACD,EAAA,CAAA;AAEN;AAEA,sBAAsB,cAAc"}

package/dist/components/BitkitDialog/DialogInner.d.ts

@@ -2,24 +2,25 @@ import { ReactNode } from 'react';
 export interface DialogInnerProps {
     /** Body content. */
     children?: ReactNode;
-    closable?: boolean;
+    dismissible?: boolean;
     /** Action buttons, auto-wrapped in the standard right-aligned button row inside the footer. */
     footerButtons?: ReactNode;
     /** Arbitrary content rendered raw inside the footer, before any `footerButtons`. */
     footerContent?: ReactNode;
-    /** Extra header content below the title (e.g. the stepper's steps header). */
+    /** Extra header content below the title (e.g. the steps dialog's steps header). */
     headerExtra?: ReactNode;
     headerLabel?: string;
     scrollBehavior?: 'inside' | 'outside';
     showScrollGradient?: boolean;
+    state?: 'loading';
     title: ReactNode;
     variant?: 'overflowContent';
 }
 /**
  * Header + body + footer rendered inside a `Dialog.Content`. Shared by every Bitkit dialog
  * flavour. Footer rules: `footerContent` renders raw; `footerButtons` is auto-wrapped in the
- * standard right-aligned button row; both render in the same `Dialog.Footer` (content first); if
- * neither is set, no footer renders.
+ * standard right-aligned button row, which carries the design's 24px gap above the actions; both
+ * render in the same `Dialog.Footer` (content first); if neither is set, no footer renders.
  */
-declare const DialogInner: ({ children, closable, footerButtons, footerContent, headerExtra, headerLabel, scrollBehavior: scrollBehaviorProp, showScrollGradient, title, variant, }: DialogInnerProps) => import("react").JSX.Element;
+declare const DialogInner: ({ children, dismissible, footerButtons, footerContent, headerExtra, headerLabel, scrollBehavior: scrollBehaviorProp, showScrollGradient, state, title, variant, }: DialogInnerProps) => import("react").JSX.Element;
 export default DialogInner;

package/dist/components/BitkitDialog/DialogInner.js

@@ -10,10 +10,10 @@ var PORTAL_DISABLED = { disablePortal: true };
 /**
 * Header + body + footer rendered inside a `Dialog.Content`. Shared by every Bitkit dialog
 * flavour. Footer rules: `footerContent` renders raw; `footerButtons` is auto-wrapped in the
-* standard right-aligned button row; both render in the same `Dialog.Footer` (content first); if
-* neither is set, no footer renders.
+* standard right-aligned button row, which carries the design's 24px gap above the actions; both
+* render in the same `Dialog.Footer` (content first); if neither is set, no footer renders.
 */
-var DialogInner = ({ children, closable = true, footerButtons, footerContent, headerExtra, headerLabel, scrollBehavior: scrollBehaviorProp, showScrollGradient = true, title, variant }) => {
+var DialogInner = ({ children, dismissible = true, footerButtons, footerContent, headerExtra, headerLabel, scrollBehavior: scrollBehaviorProp, showScrollGradient = true, state, title, variant }) => {
 	const scrollBehavior = resolveScrollBehavior(variant, scrollBehaviorProp) ?? "outside";
 	const styles = useDialogStyles();
 	const hasFooter = !!footerContent || !!footerButtons;
@@ -33,16 +33,19 @@ var DialogInner = ({ children, closable = true, footerButtons, footerContent, he
 						children: [headerLabel && /* @__PURE__ */ jsx(chakra.p, {
 							css: styles.label,
 							children: headerLabel
-						}), /* @__PURE__ */ jsx(Dialog.Title, { children: title })]
+						}), /* @__PURE__ */ jsx(Dialog.Title, {
+							paddingInlineEnd: dismissible ? void 0 : "0",
+							children: title
+						})]
 					}),
 					!!headerExtra && /* @__PURE__ */ jsx(Box, {
 						css: styles.stepHeader,
 						children: headerExtra
 					}),
-					/* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+					dismissible && /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ jsx(BitkitCloseButton, {
-							disabled: !closable,
+							disabled: state === "loading",
 							size: variant === "overflowContent" ? "xs" : "md",
 							type: "button"
 						})

package/dist/components/BitkitDialog/DialogInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogInner.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogInner.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog, useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode } from 'react';\n\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport DialogBody, { DialogBodyContext, resolveScrollBehavior } from './DialogBodyContext';\n\nconst PORTAL_DISABLED = { disablePortal: true };\n\nexport interface DialogInnerProps {\n  /** Body content. */\n  children?: ReactNode;\n  closable?: boolean;\n  /** Action buttons, auto-wrapped in the standard right-aligned button row inside the footer. */\n  footerButtons?: ReactNode;\n  /** Arbitrary content rendered raw inside the footer, before any `footerButtons`. */\n  footerContent?: ReactNode;\n  /** Extra header content below the title (e.g. the stepper's steps header). */\n  headerExtra?: ReactNode;\n  headerLabel?: string;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  title: ReactNode;\n  variant?: 'overflowContent';\n}\n\n/**\n * Header + body + footer rendered inside a `Dialog.Content`. Shared by every Bitkit dialog\n * flavour. Footer rules: `footerContent` renders raw; `footerButtons` is auto-wrapped in the\n * standard right-aligned button row; both render in the same `Dialog.Footer` (content first); if\n * neither is set, no footer renders.\n */\nconst DialogInner = ({\n  children,\n  closable = true,\n  footerButtons,\n  footerContent,\n  headerExtra,\n  headerLabel,\n  scrollBehavior: scrollBehaviorProp,\n  showScrollGradient = true,\n  title,\n  variant,\n}: DialogInnerProps) => {\n  const scrollBehavior = resolveScrollBehavior(variant, scrollBehaviorProp) ?? 'outside';\n  const styles = useDialogStyles();\n  const hasFooter = !!footerContent || !!footerButtons;\n\n  return (\n    <BitkitPortalContext.Provider value={PORTAL_DISABLED}>\n      <DialogBodyContext.Provider value={{ scrollBehavior, showScrollGradient }}>\n        <Dialog.Header>\n          <Box display=\"flex\" flexDirection=\"column\" gap=\"4\">\n            {headerLabel && <chakra.p css={styles.label}>{headerLabel}</chakra.p>}\n            <Dialog.Title>{title}</Dialog.Title>\n          </Box>\n          {!!headerExtra && <Box css={styles.stepHeader}>{headerExtra}</Box>}\n          <Dialog.CloseTrigger asChild>\n            <BitkitCloseButton disabled={!closable} size={variant === 'overflowContent' ? 'xs' : 'md'} type=\"button\" />\n          </Dialog.CloseTrigger>\n        </Dialog.Header>\n        <DialogBody>{children}</DialogBody>\n        {hasFooter && (\n          <Dialog.Footer>\n            {footerContent}\n            {footerButtons && (\n              <Box display=\"flex\" gap=\"16\" justifyContent=\"flex-end\" paddingBlockStart=\"24\">\n                {footerButtons}\n              </Box>\n            )}\n          </Dialog.Footer>\n        )}\n      </DialogBodyContext.Provider>\n    </BitkitPortalContext.Provider>\n  );\n};\n\nexport default DialogInner;\n"],"mappings":";;;;;;;;AASA,IAAM,kBAAkB,EAAE,eAAe,KAAK;;;;;;;AAyB9C,IAAM,eAAe,EACnB,UACA,WAAW,MACX,eACA,eACA,aACA,aACA,gBAAgB,oBAChB,qBAAqB,MACrB,OACA,cACsB;CACtB,MAAM,iBAAiB,sBAAsB,SAAS,kBAAkB,KAAK;CAC7E,MAAM,SAAS,gBAAgB;CAC/B,MAAM,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAAC;CAEvC,OACE,oBAAC,oBAAoB,UAArB;EAA8B,OAAO;EACnC,UAAA,qBAAC,kBAAkB,UAAnB;GAA4B,OAAO;IAAE;IAAgB;GAAmB;GAAxE,UAAA;IACE,qBAAC,OAAO,QAAR,EAAA,UAAA;KACE,qBAAC,KAAD;MAAK,SAAQ;MAAO,eAAc;MAAS,KAAI;MAA/C,UAAA,CACG,eAAe,oBAAC,OAAO,GAAR;OAAU,KAAK,OAAO;OAAQ,UAAA;MAAsB,CAAA,GACpE,oBAAC,OAAO,OAAR,EAAA,UAAe,MAAoB,CAAA,CAChC;;KACJ,CAAC,CAAC,eAAe,oBAAC,KAAD;MAAK,KAAK,OAAO;MAAa,UAAA;KAAiB,CAAA;KACjE,oBAAC,OAAO,cAAR;MAAqB,SAAA;MACnB,UAAA,oBAAC,mBAAD;OAAmB,UAAU,CAAC;OAAU,MAAM,YAAY,oBAAoB,OAAO;OAAM,MAAK;MAAU,CAAA;KACvF,CAAA;IACR,EAAA,CAAA;IACf,oBAAC,YAAD,EAAa,SAAqB,CAAA;IACjC,aACC,qBAAC,OAAO,QAAR,EAAA,UAAA,CACG,eACA,iBACC,oBAAC,KAAD;KAAK,SAAQ;KAAO,KAAI;KAAK,gBAAe;KAAW,mBAAkB;KACtE,UAAA;IACE,CAAA,CAEM,EAAA,CAAA;GAES;;CACA,CAAA;AAElC"}
+{"version":3,"file":"DialogInner.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogInner.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog, useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode } from 'react';\n\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport DialogBody, { DialogBodyContext, resolveScrollBehavior } from './DialogBodyContext';\n\nconst PORTAL_DISABLED = { disablePortal: true };\n\nexport interface DialogInnerProps {\n  /** Body content. */\n  children?: ReactNode;\n  dismissible?: boolean;\n  /** Action buttons, auto-wrapped in the standard right-aligned button row inside the footer. */\n  footerButtons?: ReactNode;\n  /** Arbitrary content rendered raw inside the footer, before any `footerButtons`. */\n  footerContent?: ReactNode;\n  /** Extra header content below the title (e.g. the steps dialog's steps header). */\n  headerExtra?: ReactNode;\n  headerLabel?: string;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  state?: 'loading';\n  title: ReactNode;\n  variant?: 'overflowContent';\n}\n\n/**\n * Header + body + footer rendered inside a `Dialog.Content`. Shared by every Bitkit dialog\n * flavour. Footer rules: `footerContent` renders raw; `footerButtons` is auto-wrapped in the\n * standard right-aligned button row, which carries the design's 24px gap above the actions; both\n * render in the same `Dialog.Footer` (content first); if neither is set, no footer renders.\n */\nconst DialogInner = ({\n  children,\n  dismissible = true,\n  footerButtons,\n  footerContent,\n  headerExtra,\n  headerLabel,\n  scrollBehavior: scrollBehaviorProp,\n  showScrollGradient = true,\n  state,\n  title,\n  variant,\n}: DialogInnerProps) => {\n  const scrollBehavior = resolveScrollBehavior(variant, scrollBehaviorProp) ?? 'outside';\n  const styles = useDialogStyles();\n  const hasFooter = !!footerContent || !!footerButtons;\n\n  return (\n    <BitkitPortalContext.Provider value={PORTAL_DISABLED}>\n      <DialogBodyContext.Provider value={{ scrollBehavior, showScrollGradient }}>\n        <Dialog.Header>\n          <Box display=\"flex\" flexDirection=\"column\" gap=\"4\">\n            {headerLabel && <chakra.p css={styles.label}>{headerLabel}</chakra.p>}\n            <Dialog.Title paddingInlineEnd={dismissible ? undefined : '0'}>{title}</Dialog.Title>\n          </Box>\n          {!!headerExtra && <Box css={styles.stepHeader}>{headerExtra}</Box>}\n          {dismissible && (\n            <Dialog.CloseTrigger asChild>\n              <BitkitCloseButton\n                disabled={state === 'loading'}\n                size={variant === 'overflowContent' ? 'xs' : 'md'}\n                type=\"button\"\n              />\n            </Dialog.CloseTrigger>\n          )}\n        </Dialog.Header>\n        <DialogBody>{children}</DialogBody>\n        {hasFooter && (\n          <Dialog.Footer>\n            {footerContent}\n            {footerButtons && (\n              <Box display=\"flex\" gap=\"16\" justifyContent=\"flex-end\" paddingBlockStart=\"24\">\n                {footerButtons}\n              </Box>\n            )}\n          </Dialog.Footer>\n        )}\n      </DialogBodyContext.Provider>\n    </BitkitPortalContext.Provider>\n  );\n};\n\nexport default DialogInner;\n"],"mappings":";;;;;;;;AASA,IAAM,kBAAkB,EAAE,eAAe,KAAK;;;;;;;AA0B9C,IAAM,eAAe,EACnB,UACA,cAAc,MACd,eACA,eACA,aACA,aACA,gBAAgB,oBAChB,qBAAqB,MACrB,OACA,OACA,cACsB;CACtB,MAAM,iBAAiB,sBAAsB,SAAS,kBAAkB,KAAK;CAC7E,MAAM,SAAS,gBAAgB;CAC/B,MAAM,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAAC;CAEvC,OACE,oBAAC,oBAAoB,UAArB;EAA8B,OAAO;EACnC,UAAA,qBAAC,kBAAkB,UAAnB;GAA4B,OAAO;IAAE;IAAgB;GAAmB;GAAxE,UAAA;IACE,qBAAC,OAAO,QAAR,EAAA,UAAA;KACE,qBAAC,KAAD;MAAK,SAAQ;MAAO,eAAc;MAAS,KAAI;MAA/C,UAAA,CACG,eAAe,oBAAC,OAAO,GAAR;OAAU,KAAK,OAAO;OAAQ,UAAA;MAAsB,CAAA,GACpE,oBAAC,OAAO,OAAR;OAAc,kBAAkB,cAAc,KAAA,IAAY;OAAM,UAAA;MAAoB,CAAA,CACjF;;KACJ,CAAC,CAAC,eAAe,oBAAC,KAAD;MAAK,KAAK,OAAO;MAAa,UAAA;KAAiB,CAAA;KAChE,eACC,oBAAC,OAAO,cAAR;MAAqB,SAAA;MACnB,UAAA,oBAAC,mBAAD;OACE,UAAU,UAAU;OACpB,MAAM,YAAY,oBAAoB,OAAO;OAC7C,MAAK;MACN,CAAA;KACkB,CAAA;IAEV,EAAA,CAAA;IACf,oBAAC,YAAD,EAAa,SAAqB,CAAA;IACjC,aACC,qBAAC,OAAO,QAAR,EAAA,UAAA,CACG,eACA,iBACC,oBAAC,KAAD;KAAK,SAAQ;KAAO,KAAI;KAAK,gBAAe;KAAW,mBAAkB;KACtE,UAAA;IACE,CAAA,CAEM,EAAA,CAAA;GAES;;CACA,CAAA;AAElC"}

package/dist/components/BitkitDialog/DialogShell.d.ts

@@ -3,7 +3,7 @@ import { ComponentProps, ReactNode } from 'react';
 export interface DialogShellProps {
     /** The `Dialog.Content` element (rendered inside the positioner). */
     children: ReactNode;
-    closable?: boolean;
+    dismissible?: boolean;
     /** Element to focus when the dialog opens, instead of the first focusable one. */
     initialFocusEl?: ComponentProps<typeof Dialog.Root>['initialFocusEl'];
     onExitComplete?: () => void;
@@ -14,16 +14,19 @@ export interface DialogShellProps {
     preventScroll?: boolean;
     scrollBehavior?: 'inside' | 'outside';
     size?: 'sm' | 'md' | 'lg' | 'full';
+    state?: 'loading';
     trigger?: ReactNode;
     variant?: 'overflowContent';
 }
 /**
  * Shared overlay shell for every Bitkit dialog flavour: `Dialog.Root` + optional trigger + portal +
- * backdrop + positioner. Dismiss policy is derived from `closable` for ESC/close-trigger; outside
- * clicks are always ignored (`closeOnInteractOutside={false}`). Note that `closable` does not reach
+ * backdrop + positioner. `dismissible={false}` removes every route out that skips a decision: the
+ * close button is not rendered (see `DialogInner`) and ESC is blocked. `state="loading"` blocks the
+ * same routes for as long as it is set, but keeps the close button in place, disabled. Outside clicks never dismiss a
+ * Bitkit dialog either way (`closeOnInteractOutside={false}`). Note that `dismissible` does not reach
  * `ActionTrigger` -- a footer button wired to it closes the dialog either way, so a caller that has
  * to block every route out disables that button itself.
  * The caller passes the `Dialog.Content` (or a `Dialog.Content asChild` wrapper) as children.
  **/
-declare const DialogShell: ({ children, closable, initialFocusEl, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior: scrollBehaviorProp, size, trigger, variant, }: DialogShellProps) => import("react").JSX.Element;
+declare const DialogShell: ({ children, dismissible, initialFocusEl, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior: scrollBehaviorProp, size, state, trigger, variant, }: DialogShellProps) => import("react").JSX.Element;
 export default DialogShell;

package/dist/components/BitkitDialog/DialogShell.js

@@ -5,16 +5,18 @@ import { Dialog } from "@chakra-ui/react/dialog";
 //#region lib/components/BitkitDialog/DialogShell.tsx
 /**
 * Shared overlay shell for every Bitkit dialog flavour: `Dialog.Root` + optional trigger + portal +
-* backdrop + positioner. Dismiss policy is derived from `closable` for ESC/close-trigger; outside
-* clicks are always ignored (`closeOnInteractOutside={false}`). Note that `closable` does not reach
+* backdrop + positioner. `dismissible={false}` removes every route out that skips a decision: the
+* close button is not rendered (see `DialogInner`) and ESC is blocked. `state="loading"` blocks the
+* same routes for as long as it is set, but keeps the close button in place, disabled. Outside clicks never dismiss a
+* Bitkit dialog either way (`closeOnInteractOutside={false}`). Note that `dismissible` does not reach
 * `ActionTrigger` -- a footer button wired to it closes the dialog either way, so a caller that has
 * to block every route out disables that button itself.
 * The caller passes the `Dialog.Content` (or a `Dialog.Content asChild` wrapper) as children.
 **/
-var DialogShell = ({ children, closable = true, initialFocusEl, onExitComplete, onOpenChange, open, preventScroll = true, scrollBehavior: scrollBehaviorProp, size, trigger, variant }) => {
+var DialogShell = ({ children, dismissible = true, initialFocusEl, onExitComplete, onOpenChange, open, preventScroll = true, scrollBehavior: scrollBehaviorProp, size, state, trigger, variant }) => {
 	const scrollBehavior = resolveScrollBehavior(variant, scrollBehaviorProp);
 	return /* @__PURE__ */ jsxs(Dialog.Root, {
-		closeOnEscape: closable,
+		closeOnEscape: dismissible && state !== "loading",
 		closeOnInteractOutside: false,
 		initialFocusEl,
 		onExitComplete,

package/dist/components/BitkitDialog/DialogShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogShell.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogShell.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type ComponentProps, type ReactNode } from 'react';\n\nimport { resolveScrollBehavior } from './DialogBodyContext';\n\nexport interface DialogShellProps {\n  /** The `Dialog.Content` element (rendered inside the positioner). */\n  children: ReactNode;\n  closable?: boolean;\n  /** Element to focus when the dialog opens, instead of the first focusable one. */\n  initialFocusEl?: ComponentProps<typeof Dialog.Root>['initialFocusEl'];\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n}\n\n/**\n * Shared overlay shell for every Bitkit dialog flavour: `Dialog.Root` + optional trigger + portal +\n * backdrop + positioner. Dismiss policy is derived from `closable` for ESC/close-trigger; outside\n * clicks are always ignored (`closeOnInteractOutside={false}`). Note that `closable` does not reach\n * `ActionTrigger` -- a footer button wired to it closes the dialog either way, so a caller that has\n * to block every route out disables that button itself.\n * The caller passes the `Dialog.Content` (or a `Dialog.Content asChild` wrapper) as children.\n **/\n\nconst DialogShell = ({\n  children,\n  closable = true,\n  initialFocusEl,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll = true,\n  scrollBehavior: scrollBehaviorProp,\n  size,\n  trigger,\n  variant,\n}: DialogShellProps) => {\n  const scrollBehavior = resolveScrollBehavior(variant, scrollBehaviorProp);\n\n  return (\n    <Dialog.Root\n      closeOnEscape={closable}\n      closeOnInteractOutside={false}\n      initialFocusEl={initialFocusEl}\n      onExitComplete={onExitComplete}\n      onOpenChange={onOpenChange}\n      open={open}\n      preventScroll={preventScroll}\n      scrollBehavior={scrollBehavior}\n      size={size}\n      variant={variant}\n    >\n      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}\n      <Portal>\n        <Dialog.Backdrop />\n        <Dialog.Positioner>{children}</Dialog.Positioner>\n      </Portal>\n    </Dialog.Root>\n  );\n};\n\nexport default DialogShell;\n"],"mappings":";;;;;;;;;;;;;AA+BA,IAAM,eAAe,EACnB,UACA,WAAW,MACX,gBACA,gBACA,cACA,MACA,gBAAgB,MAChB,gBAAgB,oBAChB,MACA,SACA,cACsB;CACtB,MAAM,iBAAiB,sBAAsB,SAAS,kBAAkB;CAExE,OACE,qBAAC,OAAO,MAAR;EACE,eAAe;EACf,wBAAwB;EACR;EACA;EACF;EACR;EACS;EACC;EACV;EACG;EAVX,UAAA,CAYG,WAAW,oBAAC,OAAO,SAAR;GAAgB,SAAA;GAAS,UAAA;EAAwB,CAAA,GAC7D,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAO,UAAR,CAAkB,CAAA,GAClB,oBAAC,OAAO,YAAR,EAAoB,SAA4B,CAAA,CAC1C,EAAA,CAAA,CACG;;AAEjB"}
+{"version":3,"file":"DialogShell.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogShell.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type ComponentProps, type ReactNode } from 'react';\n\nimport { resolveScrollBehavior } from './DialogBodyContext';\n\nexport interface DialogShellProps {\n  /** The `Dialog.Content` element (rendered inside the positioner). */\n  children: ReactNode;\n  dismissible?: boolean;\n  /** Element to focus when the dialog opens, instead of the first focusable one. */\n  initialFocusEl?: ComponentProps<typeof Dialog.Root>['initialFocusEl'];\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  state?: 'loading';\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n}\n\n/**\n * Shared overlay shell for every Bitkit dialog flavour: `Dialog.Root` + optional trigger + portal +\n * backdrop + positioner. `dismissible={false}` removes every route out that skips a decision: the\n * close button is not rendered (see `DialogInner`) and ESC is blocked. `state=\"loading\"` blocks the\n * same routes for as long as it is set, but keeps the close button in place, disabled. Outside clicks never dismiss a\n * Bitkit dialog either way (`closeOnInteractOutside={false}`). Note that `dismissible` does not reach\n * `ActionTrigger` -- a footer button wired to it closes the dialog either way, so a caller that has\n * to block every route out disables that button itself.\n * The caller passes the `Dialog.Content` (or a `Dialog.Content asChild` wrapper) as children.\n **/\n\nconst DialogShell = ({\n  children,\n  dismissible = true,\n  initialFocusEl,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll = true,\n  scrollBehavior: scrollBehaviorProp,\n  size,\n  state,\n  trigger,\n  variant,\n}: DialogShellProps) => {\n  const scrollBehavior = resolveScrollBehavior(variant, scrollBehaviorProp);\n\n  return (\n    <Dialog.Root\n      closeOnEscape={dismissible && state !== 'loading'}\n      closeOnInteractOutside={false}\n      initialFocusEl={initialFocusEl}\n      onExitComplete={onExitComplete}\n      onOpenChange={onOpenChange}\n      open={open}\n      preventScroll={preventScroll}\n      scrollBehavior={scrollBehavior}\n      size={size}\n      variant={variant}\n    >\n      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}\n      <Portal>\n        <Dialog.Backdrop />\n        <Dialog.Positioner>{children}</Dialog.Positioner>\n      </Portal>\n    </Dialog.Root>\n  );\n};\n\nexport default DialogShell;\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,IAAM,eAAe,EACnB,UACA,cAAc,MACd,gBACA,gBACA,cACA,MACA,gBAAgB,MAChB,gBAAgB,oBAChB,MACA,OACA,SACA,cACsB;CACtB,MAAM,iBAAiB,sBAAsB,SAAS,kBAAkB;CAExE,OACE,qBAAC,OAAO,MAAR;EACE,eAAe,eAAe,UAAU;EACxC,wBAAwB;EACR;EACA;EACF;EACR;EACS;EACC;EACV;EACG;EAVX,UAAA,CAYG,WAAW,oBAAC,OAAO,SAAR;GAAgB,SAAA;GAAS,UAAA;EAAwB,CAAA,GAC7D,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAO,UAAR,CAAkB,CAAA,GAClB,oBAAC,OAAO,YAAR,EAAoB,SAA4B,CAAA,CAC1C,EAAA,CAAA,CACG;;AAEjB"}

package/dist/components/BitkitDialog/{StepperContext.d.ts → StepsDialogContext.d.ts}

@@ -1,4 +1,4 @@
-export interface StepperDialogContextValue {
+export interface StepsDialogContextValue {
     /** Jump to an arbitrary (clamped) step. */
     goTo: (step: number) => void;
     isFirst: boolean;
@@ -12,5 +12,5 @@ export interface StepperDialogContextValue {
     step: number;
     totalSteps: number;
 }
-declare const StepperDialogProvider: import('react').Provider<StepperDialogContextValue>, useStepperDialog: () => StepperDialogContextValue;
-export { StepperDialogProvider, useStepperDialog };
+declare const StepsDialogProvider: import('react').Provider<StepsDialogContextValue>, useStepsDialog: () => StepsDialogContextValue;
+export { StepsDialogProvider, useStepsDialog };

package/dist/components/BitkitDialog/StepsDialogContext.js

@@ -0,0 +1,11 @@
+import { createContext } from "@chakra-ui/react";
+//#region lib/components/BitkitDialog/StepsDialogContext.ts
+var [StepsDialogProvider, useStepsDialog] = createContext({
+	hookName: "useStepsDialog",
+	name: "StepsDialogContext",
+	providerName: "<BitkitStepsDialog />"
+});
+//#endregion
+export { StepsDialogProvider, useStepsDialog };
+
+//# sourceMappingURL=StepsDialogContext.js.map

package/dist/components/BitkitDialog/StepsDialogContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepsDialogContext.js","names":[],"sources":["../../../lib/components/BitkitDialog/StepsDialogContext.ts"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\n\nexport interface StepsDialogContextValue {\n  /** Jump to an arbitrary (clamped) step. */\n  goTo: (step: number) => void;\n  isFirst: boolean;\n  isLast: boolean;\n  /** Advance to the next step (clamped to the last). */\n  next: () => void;\n  /** Go back to the previous step (clamped to the first). */\n  prev: () => void;\n  /** Alias of {@link goTo}. */\n  setStep: (step: number) => void;\n  step: number;\n  totalSteps: number;\n}\n\nconst [StepsDialogProvider, useStepsDialog] = createContext<StepsDialogContextValue>({\n  hookName: 'useStepsDialog',\n  name: 'StepsDialogContext',\n  providerName: '<BitkitStepsDialog />',\n});\n\nexport { StepsDialogProvider, useStepsDialog };\n"],"mappings":";;AAkBA,IAAM,CAAC,qBAAqB,kBAAkB,cAAuC;CACnF,UAAU;CACV,MAAM;CACN,cAAc;AAChB,CAAC"}

package/dist/components/index.d.ts

@@ -20,8 +20,8 @@ export { default as BitkitDatePicker, type BitkitDatePickerProps } from './Bitki
 export { default as BitkitDefinitionTooltip, type BitkitDefinitionTooltipProps, } from './BitkitDefinitionTooltip/BitkitDefinitionTooltip';
 export { default as BitkitDialog, type BitkitDialogProps } from './BitkitDialog/BitkitDialog';
 export { default as BitkitFormDialog, type BitkitFormDialogProps } from './BitkitDialog/BitkitFormDialog';
-export { default as BitkitStepperDialog, type BitkitStepperDialogProps, useStepperDialog, } from './BitkitDialog/BitkitStepperDialog';
-export { type BitkitStepperDialogStepProps } from './BitkitDialog/BitkitStepperDialogStep';
+export { default as BitkitStepsDialog, type BitkitStepsDialogProps, useStepsDialog, } from './BitkitDialog/BitkitStepsDialog';
+export { type BitkitStepsDialogStepProps } from './BitkitDialog/BitkitStepsDialogStep';
 export { default as BitkitDraggableCard, type BitkitDraggableCardProps, } from './BitkitDraggableCard/BitkitDraggableCard';
 export { default as BitkitDrawer, type BitkitDrawerActionTriggerProps, type BitkitDrawerBackdropProps, type BitkitDrawerBodyProps, type BitkitDrawerCloseButtonProps, type BitkitDrawerContentProps, type BitkitDrawerDescriptionProps, type BitkitDrawerFooterProps, type BitkitDrawerHeaderProps, type BitkitDrawerPositionerProps, type BitkitDrawerRootProps, type BitkitDrawerTitleProps, type BitkitDrawerTriggerProps, } from './BitkitDrawer/BitkitDrawer';
 export { default as BitkitEmptyState, type BitkitEmptyStateProps } from './BitkitEmptyState/BitkitEmptyState';

package/dist/main.js

@@ -321,8 +321,8 @@ import BitkitDefinitionTooltip from "./components/BitkitDefinitionTooltip/Bitkit
 import BitkitDialog_default from "./components/BitkitDialog/BitkitDialog.js";
 import BitkitFormDialog_default from "./components/BitkitDialog/BitkitFormDialog.js";
 import BitkitSteps_default from "./components/BitkitSteps/BitkitSteps.js";
-import { useStepperDialog } from "./components/BitkitDialog/StepperContext.js";
-import BitkitStepperDialog_default from "./components/BitkitDialog/BitkitStepperDialog.js";
+import { useStepsDialog } from "./components/BitkitDialog/StepsDialogContext.js";
+import BitkitStepsDialog_default from "./components/BitkitDialog/BitkitStepsDialog.js";
 import BitkitDraggableCard from "./components/BitkitDraggableCard/BitkitDraggableCard.js";
 import BitkitDrawer from "./components/BitkitDrawer/BitkitDrawer.js";
 import BitkitEmptyState from "./components/BitkitEmptyState/BitkitEmptyState.js";
@@ -387,4 +387,4 @@ import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeVie
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitBulkActionsRow, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionColumnHeader, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFilterRow, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitLinkedRow_default as BitkitLinkedRow, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitRowActionsCell, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepperDialog };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitBulkActionsRow, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionColumnHeader, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFilterRow, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitLinkedRow_default as BitkitLinkedRow, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitRowActionsCell, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepsDialog };

package/docs/v1-to-v2-migration-guide.md

@@ -154,14 +154,38 @@ Other prop mappings:
 
 | v1 | v2 |
 |----|----|
-| `isClosable={false}` | `closable={false}` |
+| `isClosable={false}` | `dismissible={false}` |
+| `isClosable={!isLoading}` (toggled during an async action) | `state="loading"` |
 | `onCloseComplete={fn}` | `onExitComplete={fn}` (fires when the close animation finishes) |
 
-`closable={false}` matches v1: the header close button is **rendered but disabled** (kept in place so the header layout stays consistent) and **ESC is blocked**. Overlay/outside clicks are ignored regardless of `closable` — the dialog always sets `closeOnInteractOutside={false}` internally. With `closable={false}` the only way to dismiss the dialog is through an explicit footer action.
+`dismissible={false}` goes one step further than v1: the header close button is **not rendered at all** (v1 kept it in place, disabled) and **ESC is blocked**. Overlay/outside clicks are ignored regardless of `dismissible`, because the dialog always sets `closeOnInteractOutside={false}` internally. With `dismissible={false}` the only way to dismiss the dialog is through an explicit footer action.
+
+**Which of the two you want.** v1 had a single `isClosable`, so a dialog that merely had to survive an in-flight request used the same flag as one that can never be dismissed. v2 splits them:
+
+- `dismissible={false}` is a property of the dialog itself: it can never be dismissed, so it carries no close button at all. Use it when the only way out is an explicit footer action, e.g. an acknowledgement or a forced choice.
+- `state="loading"` is temporary: something is running and the dialog must not be abandoned halfway. The close button stays where it is but goes disabled, ESC is blocked, and the dialog gets `aria-busy`. Set it together with the footer button's own `state="loading"`, and disable the other footer buttons for as long as it runs.
+
+A v1 `isClosable={!isLoading}` is the second case, not the first. Mapping it to `dismissible` would make the close button vanish when the request starts and reappear when it finishes, where v1 only greyed it out.
 
 ```tsx
 // Acknowledge-only dialog
-<BitkitDialog closable={false} open={open} onOpenChange={…} title="Action required">…</BitkitDialog>
+<BitkitDialog dismissible={false} open={open} onOpenChange={…} title="Action required">…</BitkitDialog>
+
+// Locked while a request is in flight (v1: isClosable={!isSaving})
+<BitkitDialog
+  footerButtons={
+    <>
+      <BitkitButton state={isSaving ? 'disabled' : undefined} variant="secondary" onClick={close}>Cancel</BitkitButton>
+      <BitkitButton state={isSaving ? 'loading' : undefined} variant="primary" onClick={save}>Save</BitkitButton>
+    </>
+  }
+  open={open}
+  state={isSaving ? 'loading' : undefined}
+  title="Save changes"
+  onOpenChange={…}
+>
+  …
+</BitkitDialog>
 
 // Run code after the close animation completes (e.g. navigation, focus restoration)
 <BitkitDialog open={open} onOpenChange={…} onExitComplete={() => navigate('/next')} title="…">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.394",
+  "version": "0.3.395",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",

package/dist/components/BitkitDialog/BitkitStepperDialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BitkitStepperDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepperDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { type ReactElement, type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { type BitkitDataAttributes } from '../../utilities/dataAttributes';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitSteps from '../BitkitSteps/BitkitSteps';\nimport BitkitStepperDialogStep, { type BitkitStepperDialogStepProps } from './BitkitStepperDialogStep';\nimport DialogInner from './DialogInner';\nimport DialogShell, { type DialogShellProps } from './DialogShell';\nimport { StepperDialogProvider } from './StepperContext';\n\nexport { useStepperDialog } from './StepperContext';\n\nexport type BitkitStepperDialogProps = {\n  /** `BitkitStepperDialog.Step` children, one per step. */\n  children: ReactNode;\n  closable?: boolean;\n  /** Initial step when uncontrolled. Resets to this when the dialog closes. */\n  defaultStep?: number;\n  /** Element to focus when the dialog opens, instead of the first focusable one. */\n  initialFocusEl?: DialogShellProps['initialFocusEl'];\n  /**\n   * Footer content rendered raw. Stepper footers are space-between (Cancel left, Prev/Next right),\n   * so build the nav row here with `useStepperDialog()` — there is no `footerButtons` slot, which\n   * would force right-alignment.\n   */\n  footerContent?: ReactNode;\n  headerLabel?: string;\n  maxHeight?: string;\n  onExitComplete?: () => void;\n  onOpenChange?: (details: { open: boolean }) => void;\n  /** Called whenever the active step changes (controlled or uncontrolled). */\n  onStepChange?: (step: number) => void;\n  open?: boolean;\n  preventScroll?: boolean;\n  scrollBehavior?: 'inside' | 'outside';\n  showScrollGradient?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  /** Controlled active step. Omit for uncontrolled (see `defaultStep`). */\n  step?: number;\n  title: ReactNode;\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n  // Data attributes are forwarded to the element carrying `role=\"dialog\"`, and nothing else is —\n  // style props, `className` and `id` don't pass through.\n} & BitkitDataAttributes;\n\n/**\n * A dialog that walks through a sequence of `BitkitStepperDialog.Step` children. It owns the step\n * state, auto-renders the steps header, and shows only the active step's body. Footer navigation is\n * wired by the consumer through the `useStepperDialog()` hook.\n */\nconst BitkitStepperDialog = ({\n  children,\n  closable = true,\n  defaultStep = 0,\n  initialFocusEl,\n  footerContent,\n  headerLabel,\n  maxHeight,\n  onExitComplete,\n  onOpenChange,\n  onStepChange,\n  open,\n  preventScroll,\n  scrollBehavior,\n  showScrollGradient,\n  size,\n  step: stepProp,\n  title,\n  trigger,\n  variant,\n  ...dataAttributes\n}: BitkitStepperDialogProps) => {\n  const [internalStep, setInternalStep] = useState(defaultStep);\n  const isControlled = stepProp !== undefined;\n  const rawStep = (isControlled ? stepProp : internalStep) ?? 0;\n  const steps = flattenChildren(children).filter(\n    (child): child is ReactElement<BitkitStepperDialogStepProps> => child.type === BitkitStepperDialogStep,\n  );\n  const totalSteps = steps.length;\n  const step = Math.max(0, Math.min(rawStep, Math.max(0, totalSteps - 1)));\n\n  const setStep = useCallback(\n    (next: number) => {\n      const clamped = Math.max(0, Math.min(next, totalSteps - 1));\n      if (!isControlled) setInternalStep(clamped);\n      onStepChange?.(clamped);\n    },\n    [isControlled, onStepChange, totalSteps],\n  );\n\n  const ctx = useMemo(\n    () => ({\n      goTo: setStep,\n      isFirst: step === 0,\n      isLast: step === totalSteps - 1,\n      next: () => setStep(step + 1),\n      prev: () => setStep(step - 1),\n      setStep,\n      step,\n      totalSteps,\n    }),\n    [setStep, step, totalSteps],\n  );\n\n  const handleOpenChange = (details: { open: boolean }) => {\n    if (!details.open && !isControlled) setInternalStep(defaultStep);\n    onOpenChange?.(details);\n  };\n\n  const stepsHeader = (\n    <BitkitSteps step={step}>\n      {steps.map((child, index) => (\n        <BitkitSteps.Item key={index} label={child.props.label} />\n      ))}\n    </BitkitSteps>\n  );\n\n  return (\n    <StepperDialogProvider value={ctx}>\n      <DialogShell\n        closable={closable}\n        initialFocusEl={initialFocusEl}\n        onExitComplete={onExitComplete}\n        onOpenChange={handleOpenChange}\n        open={open}\n        preventScroll={preventScroll}\n        scrollBehavior={scrollBehavior}\n        size={size}\n        trigger={trigger}\n        variant={variant}\n      >\n        <Dialog.Content maxHeight={maxHeight} {...dataAttributes}>\n          <DialogInner\n            closable={closable}\n            footerContent={footerContent}\n            headerExtra={stepsHeader}\n            headerLabel={headerLabel}\n            scrollBehavior={scrollBehavior}\n            showScrollGradient={showScrollGradient}\n            title={title}\n            variant={variant}\n          >\n            {steps[step]}\n          </DialogInner>\n        </Dialog.Content>\n      </DialogShell>\n    </StepperDialogProvider>\n  );\n};\n\nBitkitStepperDialog.displayName = 'BitkitStepperDialog';\n\nexport default withSubComponents(BitkitStepperDialog, {\n  ActionTrigger: Dialog.ActionTrigger,\n  Step: BitkitStepperDialogStep,\n});\n"],"mappings":";;;;;;;;;;;;;;;;AAqDA,IAAM,uBAAuB,EAC3B,UACA,WAAW,MACX,cAAc,GACd,gBACA,eACA,aACA,WACA,gBACA,cACA,cACA,MACA,eACA,gBACA,oBACA,MACA,MAAM,UACN,OACA,SACA,SACA,GAAG,qBAC2B;CAC9B,MAAM,CAAC,cAAc,mBAAmB,SAAS,WAAW;CAC5D,MAAM,eAAe,aAAa,KAAA;CAClC,MAAM,WAAW,eAAe,WAAW,iBAAiB;CAC5D,MAAM,QAAQ,gBAAgB,QAAQ,CAAC,CAAC,QACrC,UAA+D,MAAM,SAAS,uBACjF;CACA,MAAM,aAAa,MAAM;CACzB,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,KAAK,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;CAEvE,MAAM,UAAU,aACb,SAAiB;EAChB,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,aAAa,CAAC,CAAC;EAC1D,IAAI,CAAC,cAAc,gBAAgB,OAAO;EAC1C,eAAe,OAAO;CACxB,GACA;EAAC;EAAc;EAAc;CAAU,CACzC;CAEA,MAAM,MAAM,eACH;EACL,MAAM;EACN,SAAS,SAAS;EAClB,QAAQ,SAAS,aAAa;EAC9B,YAAY,QAAQ,OAAO,CAAC;EAC5B,YAAY,QAAQ,OAAO,CAAC;EAC5B;EACA;EACA;CACF,IACA;EAAC;EAAS;EAAM;CAAU,CAC5B;CAEA,MAAM,oBAAoB,YAA+B;EACvD,IAAI,CAAC,QAAQ,QAAQ,CAAC,cAAc,gBAAgB,WAAW;EAC/D,eAAe,OAAO;CACxB;CAEA,MAAM,cACJ,oBAAC,qBAAD;EAAmB;EAChB,UAAA,MAAM,KAAK,OAAO,UACjB,oBAAC,oBAAY,MAAb,EAA8B,OAAO,MAAM,MAAM,MAAQ,GAAlC,KAAkC,CAC1D;CACU,CAAA;CAGf,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAAC,aAAD;GACY;GACM;GACA;GAChB,cAAc;GACR;GACS;GACC;GACV;GACG;GACA;GAET,UAAA,oBAAC,OAAO,SAAR;IAA2B;IAAW,GAAI;IACxC,UAAA,oBAAC,aAAD;KACY;KACK;KACf,aAAa;KACA;KACG;KACI;KACb;KACE;KAER,UAAA,MAAM;IACI,CAAA;GACC,CAAA;EACL,CAAA;CACQ,CAAA;AAE3B;AAEA,oBAAoB,cAAc;AAElC,IAAA,8BAAe,kBAAkB,qBAAqB;CACpD,eAAe,OAAO;CACtB,MAAM;AACR,CAAC"}

package/dist/components/BitkitDialog/BitkitStepperDialogStep.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BitkitStepperDialogStep.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepperDialogStep.tsx"],"sourcesContent":["import { useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode } from 'react';\n\nexport interface BitkitStepperDialogStepProps {\n  /** Body content for this step. */\n  children?: ReactNode;\n  /** Optional subtitle shown under the step's body title. */\n  description?: string;\n  /** Short label shown in the steps header. */\n  label: string;\n  /** Heading shown at the top of the step's body. */\n  title: string;\n}\n\n/**\n * A single step of a {@link BitkitStepperDialog}. Renders its `title`/`description` typography\n * followed by `children`. The parent only mounts the active step, so this never self-gates.\n */\nconst BitkitStepperDialogStep = ({ children, description, title }: BitkitStepperDialogStepProps) => {\n  const styles = useDialogStyles();\n\n  return (\n    <>\n      <chakra.div css={styles.stepTitleGroup}>\n        <chakra.p css={styles.stepTitle}>{title}</chakra.p>\n        {description && <chakra.p css={styles.stepDescription}>{description}</chakra.p>}\n      </chakra.div>\n      {children}\n    </>\n  );\n};\n\nBitkitStepperDialogStep.displayName = 'BitkitStepperDialogStep';\n\nexport default BitkitStepperDialogStep;\n"],"mappings":";;;;;;;;AAmBA,IAAM,2BAA2B,EAAE,UAAU,aAAa,YAA0C;CAClG,MAAM,SAAS,gBAAgB;CAE/B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAO,KAAR;EAAY,KAAK,OAAO;EAAxB,UAAA,CACE,oBAAC,OAAO,GAAR;GAAU,KAAK,OAAO;GAAY,UAAA;EAAgB,CAAA,GACjD,eAAe,oBAAC,OAAO,GAAR;GAAU,KAAK,OAAO;GAAkB,UAAA;EAAsB,CAAA,CACpE;CACX,CAAA,GAAA,QACD,EAAA,CAAA;AAEN;AAEA,wBAAwB,cAAc"}

package/dist/components/BitkitDialog/StepperContext.js

@@ -1,11 +0,0 @@
-import { createContext } from "@chakra-ui/react";
-//#region lib/components/BitkitDialog/StepperContext.ts
-var [StepperDialogProvider, useStepperDialog] = createContext({
-	hookName: "useStepperDialog",
-	name: "StepperDialogContext",
-	providerName: "<BitkitStepperDialog />"
-});
-//#endregion
-export { StepperDialogProvider, useStepperDialog };
-
-//# sourceMappingURL=StepperContext.js.map

package/dist/components/BitkitDialog/StepperContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StepperContext.js","names":[],"sources":["../../../lib/components/BitkitDialog/StepperContext.ts"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\n\nexport interface StepperDialogContextValue {\n  /** Jump to an arbitrary (clamped) step. */\n  goTo: (step: number) => void;\n  isFirst: boolean;\n  isLast: boolean;\n  /** Advance to the next step (clamped to the last). */\n  next: () => void;\n  /** Go back to the previous step (clamped to the first). */\n  prev: () => void;\n  /** Alias of {@link goTo}. */\n  setStep: (step: number) => void;\n  step: number;\n  totalSteps: number;\n}\n\nconst [StepperDialogProvider, useStepperDialog] = createContext<StepperDialogContextValue>({\n  hookName: 'useStepperDialog',\n  name: 'StepperDialogContext',\n  providerName: '<BitkitStepperDialog />',\n});\n\nexport { StepperDialogProvider, useStepperDialog };\n"],"mappings":";;AAkBA,IAAM,CAAC,uBAAuB,oBAAoB,cAAyC;CACzF,UAAU;CACV,MAAM;CACN,cAAc;AAChB,CAAC"}