@bitrise/bitkit-v2 0.3.266 → 0.3.267-beta.1792

package/AGENTS.md

@@ -113,7 +113,20 @@ Bitkit components use consistent prop names across the library:
   <BitkitActionMenu.Item href="https://example.com" isExternal value="docs">Open docs</BitkitActionMenu.Item>
   ```
 - **Form components are flat** — `BitkitTextInput`, `BitkitSelect`, `BitkitCombobox`, etc. expose `label`, `errorText`, `helperText`, etc. directly as props. No need to wrap in a separate field component.
-- **`BitkitDialog` non-dismissible + post-close callback** — pass `closable={false}` to make the dialog fully non-dismissible: the close button is rendered but disabled (kept for layout consistency), ESC is blocked, and 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):
+- **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. Accepts form props (`onSubmit`, `method`, …).
+  - `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`.
+  ```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>
+  ```
+  For closing on click, use controlled `open`/`onOpenChange`, or wrap a button in Chakra's `Dialog.ActionTrigger`. For a fully custom dialog, compose raw Chakra `Dialog.*` atoms directly.
+- **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):
   ```tsx
   <BitkitDialog closable={false} open={open} onOpenChange={…} title="Action required">…</BitkitDialog>
   <BitkitDialog open={open} onExitComplete={() => navigate('/next')} onOpenChange={…} title="…">…</BitkitDialog>
@@ -145,7 +158,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`, `BitkitDrawer`, `BitkitCalendar` — use the component's own sizing API (`size`, `maxHeight`, etc.).
+  - Page-level overlays: `BitkitDialog`, `BitkitFormDialog`, `BitkitStepperDialog`, `BitkitDrawer`, `BitkitCalendar` — use the component's own sizing API (`size`, `maxHeight`, etc.).
   - Floating positioned components: `BitkitTooltip`, `BitkitLabelTooltip`, `BitkitDefinitionTooltip`, `BitkitOverflowTooltip`, `BitkitToast`, `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

@@ -1,9 +1,10 @@
 import { Dialog } from '@chakra-ui/react/dialog';
 import { ReactNode } from 'react';
-import { BitkitDialogHeaderProps } from './BitkitDialogHeader';
 export interface BitkitDialogProps {
     children?: ReactNode;
     closable?: boolean;
+    footerButtons?: ReactNode;
+    footerContent?: ReactNode;
     headerLabel?: string;
     maxHeight?: string;
     onExitComplete?: () => void;
@@ -15,28 +16,14 @@ export interface BitkitDialogProps {
     scrollBehavior?: 'inside' | 'outside';
     showScrollGradient?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'full';
-    step?: number;
     title: ReactNode;
     trigger?: ReactNode;
     variant?: 'overflowContent';
 }
 declare const _default: {
-    ({ children, closable, headerLabel, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior: scrollBehaviorProp, showScrollGradient, size, step, title, trigger, variant, }: BitkitDialogProps): import("react").JSX.Element;
+    ({ children, closable, footerButtons, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant, }: BitkitDialogProps): import("react").JSX.Element;
     displayName: string;
 } & {
     ActionTrigger: import('react').ForwardRefExoticComponent<Dialog.ActionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
-    Body: ({ children, ...rest }: import('./BitkitDialogBody').BitkitDialogBodyProps) => import("react").JSX.Element;
-    Buttons: import('react').ForwardRefExoticComponent<import('@chakra-ui/react').BoxProps & import('react').RefAttributes<HTMLDivElement>>;
-    Content: ({ maxHeight, ...inner }: import('./BitkitDialogContent').BitkitDialogContentProps) => import("react").JSX.Element;
-    Footer: import('react').ForwardRefExoticComponent<Dialog.FooterProps & import('react').RefAttributes<HTMLDivElement>>;
-    FormContent: import('react').ForwardRefExoticComponent<import('./BitkitDialogFormContent').BitkitDialogFormContentProps & import('react').RefAttributes<HTMLFormElement>>;
-    Header: {
-        ({ children }: BitkitDialogHeaderProps): import("react").JSX.Element;
-        displayName: string;
-    };
-    Step: {
-        (props: import('./BitkitDialogStep').BitkitDialogStepProps): import("react").JSX.Element | null;
-        displayName: string;
-    };
 };
 export default _default;

package/dist/components/BitkitDialog/BitkitDialog.js

@@ -1,59 +1,36 @@
 import { withSubComponents } from "../../utilities/withSubComponents.js";
-import BitkitDialogStep from "./BitkitDialogStep.js";
-import BitkitDialogBody from "./BitkitDialogBody.js";
-import BitkitDialogButtons from "./BitkitDialogButtons.js";
-import BitkitDialogContent from "./BitkitDialogContent.js";
-import BitkitDialogFormContent from "./BitkitDialogFormContent.js";
-import BitkitDialogHeader from "./BitkitDialogHeader.js";
-import BitkitDialogRoot from "./BitkitDialogRoot.js";
-import { Children, isValidElement } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Portal } from "@chakra-ui/react/portal";
+import DialogInner from "./DialogInner.js";
+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, headerLabel, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior: scrollBehaviorProp, showScrollGradient, size, step = 0, title, trigger, variant }) => {
-	const scrollBehavior = variant === "overflowContent" ? "inside" : scrollBehaviorProp;
-	const childrenArray = Children.toArray(children);
-	const headerChild = childrenArray.find((child) => isValidElement(child) && child.type === BitkitDialogHeader);
-	const bodyChildren = childrenArray.filter((child) => !(isValidElement(child) && child.type === BitkitDialogHeader));
-	const stepHeader = isValidElement(headerChild) ? headerChild.props.children : void 0;
-	return /* @__PURE__ */ jsxs(BitkitDialogRoot, {
-		closeOnEscape: closable,
-		onExitComplete,
-		onOpenChange,
-		open,
-		preventScroll,
-		scrollBehavior,
-		size,
-		variant,
-		children: [trigger && /* @__PURE__ */ jsx(Dialog.Trigger, {
-			asChild: true,
-			children: trigger
-		}), /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Positioner, { children: /* @__PURE__ */ jsx(BitkitDialogContent, {
+var BitkitDialog = ({ children, closable = true, footerButtons, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant }) => /* @__PURE__ */ jsx(DialogShell, {
+	closable,
+	onExitComplete,
+	onOpenChange,
+	open,
+	preventScroll,
+	scrollBehavior,
+	size,
+	trigger,
+	variant,
+	children: /* @__PURE__ */ jsx(Dialog.Content, {
+		maxHeight,
+		children: /* @__PURE__ */ jsx(DialogInner, {
 			closable,
+			footerButtons,
+			footerContent,
 			headerLabel,
-			maxHeight,
 			scrollBehavior,
 			showScrollGradient,
-			step,
-			stepHeader,
 			title,
 			variant,
-			children: bodyChildren
-		}) })] })]
-	});
-};
-BitkitDialog.displayName = "BitkitDialog";
-var BitkitDialog_default = withSubComponents(BitkitDialog, {
-	ActionTrigger: Dialog.ActionTrigger,
-	Body: BitkitDialogBody,
-	Buttons: BitkitDialogButtons,
-	Content: BitkitDialogContent,
-	Footer: Dialog.Footer,
-	FormContent: BitkitDialogFormContent,
-	Header: BitkitDialogHeader,
-	Step: BitkitDialogStep
+			children
+		})
+	})
 });
+BitkitDialog.displayName = "BitkitDialog";
+var BitkitDialog_default = withSubComponents(BitkitDialog, { ActionTrigger: Dialog.ActionTrigger });
 //#endregion
 export { BitkitDialog_default as default };
 

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 { Portal } from '@chakra-ui/react/portal';\nimport { Children, isValidElement, type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitDialogBody from './BitkitDialogBody';\nimport BitkitDialogButtons from './BitkitDialogButtons';\nimport BitkitDialogContent from './BitkitDialogContent';\nimport BitkitDialogFormContent from './BitkitDialogFormContent';\nimport BitkitDialogHeader, { type BitkitDialogHeaderProps } from './BitkitDialogHeader';\nimport BitkitDialogRoot from './BitkitDialogRoot';\nimport BitkitDialogStep from './BitkitDialogStep';\n\nexport interface BitkitDialogProps {\n  children?: ReactNode;\n  closable?: boolean;\n  headerLabel?: string;\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  step?: number;\n  title: ReactNode;\n  trigger?: ReactNode;\n  variant?: 'overflowContent';\n}\n\nconst BitkitDialog = ({\n  children,\n  closable = true,\n  headerLabel,\n  maxHeight,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll,\n  scrollBehavior: scrollBehaviorProp,\n  showScrollGradient,\n  size,\n  step = 0,\n  title,\n  trigger,\n  variant,\n}: BitkitDialogProps) => {\n  const scrollBehavior = variant === 'overflowContent' ? 'inside' : scrollBehaviorProp;\n\n  const childrenArray = Children.toArray(children);\n  const headerChild = childrenArray.find((child) => isValidElement(child) && child.type === BitkitDialogHeader);\n  const bodyChildren = childrenArray.filter((child) => !(isValidElement(child) && child.type === BitkitDialogHeader));\n  const stepHeader = isValidElement(headerChild) ? (headerChild.props as BitkitDialogHeaderProps).children : undefined;\n\n  return (\n    <BitkitDialogRoot\n      closeOnEscape={closable}\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>\n          <BitkitDialogContent\n            closable={closable}\n            headerLabel={headerLabel}\n            maxHeight={maxHeight}\n            scrollBehavior={scrollBehavior}\n            showScrollGradient={showScrollGradient}\n            step={step}\n            stepHeader={stepHeader}\n            title={title}\n            variant={variant}\n          >\n            {bodyChildren}\n          </BitkitDialogContent>\n        </Dialog.Positioner>\n      </Portal>\n    </BitkitDialogRoot>\n  );\n};\n\nBitkitDialog.displayName = 'BitkitDialog';\n\nexport default withSubComponents(BitkitDialog, {\n  ActionTrigger: Dialog.ActionTrigger,\n  Body: BitkitDialogBody,\n  Buttons: BitkitDialogButtons,\n  Content: BitkitDialogContent,\n  Footer: Dialog.Footer,\n  FormContent: BitkitDialogFormContent,\n  Header: BitkitDialogHeader,\n  Step: BitkitDialogStep,\n});\n"],"mappings":";;;;;;;;;;;;;AA+BA,IAAM,gBAAgB,EACpB,UACA,WAAW,MACX,aACA,WACA,gBACA,cACA,MACA,eACA,gBAAgB,oBAChB,oBACA,MACA,OAAO,GACP,OACA,SACA,cACuB;CACvB,MAAM,iBAAiB,YAAY,oBAAoB,WAAW;CAElE,MAAM,gBAAgB,SAAS,QAAQ,QAAQ;CAC/C,MAAM,cAAc,cAAc,MAAM,UAAU,eAAe,KAAK,KAAK,MAAM,SAAS,kBAAkB;CAC5G,MAAM,eAAe,cAAc,QAAQ,UAAU,EAAE,eAAe,KAAK,KAAK,MAAM,SAAS,mBAAmB;CAClH,MAAM,aAAa,eAAe,WAAW,IAAK,YAAY,MAAkC,WAAW,KAAA;CAE3G,OACE,qBAAC,kBAAD;EACE,eAAe;EACC;EACF;EACR;EACS;EACC;EACV;EACG;YARX,CAUG,WAAW,oBAAC,OAAO,SAAR;GAAgB,SAAA;aAAS;EAAwB,CAAA,GAC7D,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAO,UAAR,CAAkB,CAAA,GAClB,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,qBAAD;GACY;GACG;GACF;GACK;GACI;GACd;GACM;GACL;GACE;aAER;EACkB,CAAA,EACJ,CAAA,CACb,EAAA,CAAA,CACQ;;AAEtB;AAEA,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc;CAC7C,eAAe,OAAO;CACtB,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ,OAAO;CACf,aAAa;CACb,QAAQ;CACR,MAAM;AACR,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 { withSubComponents } from '../../utilities/withSubComponents';\nimport DialogInner from './DialogInner';\nimport DialogShell from './DialogShell';\n\nexport interface BitkitDialogProps {\n  children?: ReactNode;\n  closable?: boolean;\n  footerButtons?: ReactNode;\n  footerContent?: ReactNode;\n  headerLabel?: string;\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}\n\nconst BitkitDialog = ({\n  children,\n  closable = true,\n  footerButtons,\n  footerContent,\n  headerLabel,\n  maxHeight,\n  onExitComplete,\n  onOpenChange,\n  open,\n  preventScroll,\n  scrollBehavior,\n  showScrollGradient,\n  size,\n  title,\n  trigger,\n  variant,\n}: BitkitDialogProps) => (\n  <DialogShell\n    closable={closable}\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}>\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":";;;;;;AA0BA,IAAM,gBAAgB,EACpB,UACA,WAAW,MACX,eACA,eACA,aACA,WACA,gBACA,cACA,MACA,eACA,gBACA,oBACA,MACA,OACA,SACA,cAEA,oBAAC,aAAD;CACY;CACM;CACF;CACR;CACS;CACC;CACV;CACG;CACA;WAET,oBAAC,OAAO,SAAR;EAA2B;YACzB,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"}

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

@@ -0,0 +1,9 @@
+import { Dialog } from '@chakra-ui/react/dialog';
+import { ComponentPropsWithoutRef } from 'react';
+import { BitkitDialogProps } from './BitkitDialog';
+export interface BitkitFormDialogProps extends BitkitDialogProps, Omit<ComponentPropsWithoutRef<'form'>, keyof BitkitDialogProps> {
+}
+declare const _default: import('react').ForwardRefExoticComponent<BitkitFormDialogProps & import('react').RefAttributes<HTMLFormElement>> & {
+    ActionTrigger: import('react').ForwardRefExoticComponent<Dialog.ActionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+};
+export default _default;

package/dist/components/BitkitDialog/BitkitFormDialog.js

@@ -0,0 +1,53 @@
+import { withSubComponents } from "../../utilities/withSubComponents.js";
+import DialogInner from "./DialogInner.js";
+import DialogShell from "./DialogShell.js";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@chakra-ui/react/dialog";
+//#region lib/components/BitkitDialog/BitkitFormDialog.tsx
+/**
+* A dialog whose entire content is a `<form>`, so a `type="submit"` button in the footer submits
+* natively. Exposes native form attributes (`onSubmit`, `method`, `noValidate`, …) alongside the
+* standard dialog props. Like the other dialog overlays it owns its own layout — it intentionally
+* does NOT accept Chakra style props (`width`, `padding`, …), which would override the `size` variant.
+*/
+var BitkitFormDialog = forwardRef((props, ref) => {
+	const { children, closable = true, footerButtons, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant, ...formProps } = props;
+	return /* @__PURE__ */ jsx(DialogShell, {
+		closable,
+		onExitComplete,
+		onOpenChange,
+		open,
+		preventScroll,
+		scrollBehavior,
+		size,
+		trigger,
+		variant,
+		children: /* @__PURE__ */ jsx(Dialog.Content, {
+			asChild: true,
+			maxHeight,
+			children: /* @__PURE__ */ jsx(chakra.form, {
+				ref,
+				...formProps,
+				children: /* @__PURE__ */ jsx(DialogInner, {
+					closable,
+					footerButtons,
+					footerContent,
+					headerLabel,
+					scrollBehavior,
+					showScrollGradient,
+					title,
+					variant,
+					children
+				})
+			})
+		})
+	});
+});
+BitkitFormDialog.displayName = "BitkitFormDialog";
+var BitkitFormDialog_default = withSubComponents(BitkitFormDialog, { ActionTrigger: Dialog.ActionTrigger });
+//#endregion
+export { BitkitFormDialog_default as default };
+
+//# sourceMappingURL=BitkitFormDialog.js.map

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

@@ -0,0 +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 ComponentPropsWithoutRef, forwardRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { type BitkitDialogProps } from './BitkitDialog';\nimport DialogInner from './DialogInner';\nimport DialogShell from './DialogShell';\n\nexport interface BitkitFormDialogProps\n  extends BitkitDialogProps, Omit<ComponentPropsWithoutRef<'form'>, keyof BitkitDialogProps> {}\n\n/**\n * A dialog whose entire content is a `<form>`, so a `type=\"submit\"` button in the footer submits\n * natively. Exposes native form attributes (`onSubmit`, `method`, `noValidate`, …) alongside the\n * standard dialog props. Like the other dialog overlays it owns its own layout — it intentionally\n * does NOT accept Chakra style props (`width`, `padding`, …), which would override the `size` variant.\n */\nconst BitkitFormDialog = forwardRef<HTMLFormElement, BitkitFormDialogProps>((props, ref) => {\n  const {\n    children,\n    closable = true,\n    footerButtons,\n    footerContent,\n    headerLabel,\n    maxHeight,\n    onExitComplete,\n    onOpenChange,\n    open,\n    preventScroll,\n    scrollBehavior,\n    showScrollGradient,\n    size,\n    title,\n    trigger,\n    variant,\n    ...formProps\n  } = props;\n\n  return (\n    <DialogShell\n      closable={closable}\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}>\n        <chakra.form ref={ref} {...formProps}>\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":";;;;;;;;;;;;;;AAkBA,IAAM,mBAAmB,YAAoD,OAAO,QAAQ;CAC1F,MAAM,EACJ,UACA,WAAW,MACX,eACA,eACA,aACA,WACA,gBACA,cACA,MACA,eACA,gBACA,oBACA,MACA,OACA,SACA,SACA,GAAG,cACD;CAEJ,OACE,oBAAC,aAAD;EACY;EACM;EACF;EACR;EACS;EACC;EACV;EACG;EACA;YAET,oBAAC,OAAO,SAAR;GAAgB,SAAA;GAAmB;aACjC,oBAAC,OAAO,MAAR;IAAkB;IAAK,GAAI;cACzB,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"}

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

@@ -0,0 +1,46 @@
+import { Dialog } from '@chakra-ui/react/dialog';
+import { ReactNode } from 'react';
+import { BitkitStepperDialogStepProps } from './BitkitStepperDialogStep';
+export { useStepperDialog } from './StepperContext';
+export interface BitkitStepperDialogProps {
+    /** `BitkitStepperDialog.Step` children, one per step. */
+    children: ReactNode;
+    closable?: boolean;
+    /** Initial step when uncontrolled. Resets to this when the dialog closes. */
+    defaultStep?: number;
+    /**
+     * 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.
+     */
+    footerContent?: ReactNode;
+    headerLabel?: string;
+    maxHeight?: string;
+    onExitComplete?: () => void;
+    onOpenChange?: (details: {
+        open: boolean;
+    }) => void;
+    /** Called whenever the active step changes (controlled or uncontrolled). */
+    onStepChange?: (step: number) => void;
+    open?: boolean;
+    preventScroll?: boolean;
+    scrollBehavior?: 'inside' | 'outside';
+    showScrollGradient?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    /** Controlled active step. Omit for uncontrolled (see `defaultStep`). */
+    step?: number;
+    title: ReactNode;
+    trigger?: ReactNode;
+    variant?: 'overflowContent';
+}
+declare const _default: {
+    ({ children, closable, defaultStep, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, onStepChange, open, preventScroll, scrollBehavior, showScrollGradient, size, step: stepProp, title, trigger, variant, }: BitkitStepperDialogProps): 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;
+        displayName: string;
+    };
+};
+export default _default;

package/dist/components/BitkitDialog/BitkitStepperDialog.js

@@ -0,0 +1,91 @@
+import { withSubComponents } from "../../utilities/withSubComponents.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 } from "./StepperContext.js";
+import { Children, isValidElement, useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@chakra-ui/react/dialog";
+//#region lib/components/BitkitDialog/BitkitStepperDialog.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.
+*/
+var BitkitStepperDialog = ({ children, closable = true, defaultStep = 0, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, onStepChange, open, preventScroll, scrollBehavior, showScrollGradient, size, step: stepProp, title, trigger, variant }) => {
+	const [internalStep, setInternalStep] = useState(defaultStep);
+	const isControlled = stepProp !== void 0;
+	const rawStep = (isControlled ? stepProp : internalStep) ?? 0;
+	const steps = Children.toArray(children).filter((child) => isValidElement(child) && child.type === BitkitStepperDialogStep);
+	const totalSteps = steps.length;
+	const step = Math.max(0, Math.min(rawStep, Math.max(0, totalSteps - 1)));
+	const setStep = useCallback((next) => {
+		const clamped = Math.max(0, Math.min(next, totalSteps - 1));
+		if (!isControlled) setInternalStep(clamped);
+		onStepChange?.(clamped);
+	}, [
+		isControlled,
+		onStepChange,
+		totalSteps
+	]);
+	const ctx = useMemo(() => ({
+		goTo: setStep,
+		isFirst: step === 0,
+		isLast: step === totalSteps - 1,
+		next: () => setStep(step + 1),
+		prev: () => setStep(step - 1),
+		setStep,
+		step,
+		totalSteps
+	}), [
+		setStep,
+		step,
+		totalSteps
+	]);
+	const handleOpenChange = (details) => {
+		if (!details.open && !isControlled) setInternalStep(defaultStep);
+		onOpenChange?.(details);
+	};
+	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, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx(DialogShell, {
+			closable,
+			onExitComplete,
+			onOpenChange: handleOpenChange,
+			open,
+			preventScroll,
+			scrollBehavior,
+			size,
+			trigger,
+			variant,
+			children: /* @__PURE__ */ jsx(Dialog.Content, {
+				maxHeight,
+				children: /* @__PURE__ */ jsx(DialogInner, {
+					closable,
+					footerContent,
+					headerExtra: stepsHeader,
+					headerLabel,
+					scrollBehavior,
+					showScrollGradient,
+					title,
+					variant,
+					children: steps[step]
+				})
+			})
+		})
+	});
+};
+BitkitStepperDialog.displayName = "BitkitStepperDialog";
+var BitkitStepperDialog_default = withSubComponents(BitkitStepperDialog, {
+	ActionTrigger: Dialog.ActionTrigger,
+	Step: BitkitStepperDialogStep
+});
+//#endregion
+export { BitkitStepperDialog_default as default };
+
+//# sourceMappingURL=BitkitStepperDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitStepperDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepperDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { Children, isValidElement, type ReactElement, type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitSteps from '../BitkitSteps/BitkitSteps';\nimport BitkitStepperDialogStep, { type BitkitStepperDialogStepProps } from './BitkitStepperDialogStep';\nimport DialogInner from './DialogInner';\nimport DialogShell from './DialogShell';\nimport { StepperDialogProvider } from './StepperContext';\n\nexport { useStepperDialog } from './StepperContext';\n\nexport interface 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  /**\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}\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  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}: BitkitStepperDialogProps) => {\n  const [internalStep, setInternalStep] = useState(defaultStep);\n  const isControlled = stepProp !== undefined;\n  const rawStep = (isControlled ? stepProp : internalStep) ?? 0;\n  const steps = Children.toArray(children).filter(\n    (child): child is ReactElement<BitkitStepperDialogStepProps> =>\n      isValidElement(child) && 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        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}>\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":";;;;;;;;;;;;;;;AA+CA,IAAM,uBAAuB,EAC3B,UACA,WAAW,MACX,cAAc,GACd,eACA,aACA,WACA,gBACA,cACA,cACA,MACA,eACA,gBACA,oBACA,MACA,MAAM,UACN,OACA,SACA,cAC8B;CAC9B,MAAM,CAAC,cAAc,mBAAmB,SAAS,WAAW;CAC5D,MAAM,eAAe,aAAa,KAAA;CAClC,MAAM,WAAW,eAAe,WAAW,iBAAiB;CAC5D,MAAM,QAAQ,SAAS,QAAQ,QAAQ,EAAE,QACtC,UACC,eAAe,KAAK,KAAK,MAAM,SAAS,uBAC5C;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;YAChB,MAAM,KAAK,OAAO,UACjB,oBAAC,oBAAY,MAAb,EAA8B,OAAO,MAAM,MAAM,MAAQ,GAAlC,KAAkC,CAC1D;CACU,CAAA;CAGf,OACE,oBAAC,uBAAD;EAAuB,OAAO;YAC5B,oBAAC,aAAD;GACY;GACM;GAChB,cAAc;GACR;GACS;GACC;GACV;GACG;GACA;aAET,oBAAC,OAAO,SAAR;IAA2B;cACzB,oBAAC,aAAD;KACY;KACK;KACf,aAAa;KACA;KACG;KACI;KACb;KACE;eAER,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.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface BitkitStepperDialogStepProps {
+    /** Body content for this step. */
+    children?: ReactNode;
+    /** Optional subtitle shown under the step's body title. */
+    description?: string;
+    /** Short label shown in the steps header. */
+    label: string;
+    /** Heading shown at the top of the step's body. */
+    title: string;
+}
+/**
+ * A single step of a {@link BitkitStepperDialog}. 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;
+    displayName: string;
+};
+export default BitkitStepperDialogStep;

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

@@ -1,13 +1,13 @@
-import { useBitkitDialogStepContext } from "./BitkitDialogStepContext.js";
 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/BitkitDialogStep.tsx
-var BitkitDialogStep = (props) => {
-	const { _index = 0, children, description, title } = props;
-	const step = useBitkitDialogStepContext()?.step ?? 0;
+//#region lib/components/BitkitDialog/BitkitStepperDialogStep.tsx
+/**
+* A single step of a {@link BitkitStepperDialog}. 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 }) => {
 	const styles = useDialogStyles();
-	if (_index !== step) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(chakra.div, {
 		css: styles.stepTitleGroup,
 		children: [/* @__PURE__ */ jsx(chakra.p, {
@@ -19,8 +19,8 @@ var BitkitDialogStep = (props) => {
 		})]
 	}), children] });
 };
-BitkitDialogStep.displayName = "BitkitDialogStep";
+BitkitStepperDialogStep.displayName = "BitkitStepperDialogStep";
 //#endregion
-export { BitkitDialogStep as default };
+export { BitkitStepperDialogStep as default };
 
-//# sourceMappingURL=BitkitDialogStep.js.map
+//# sourceMappingURL=BitkitStepperDialogStep.js.map

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

@@ -0,0 +1 @@
+{"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;YAAxB,CACE,oBAAC,OAAO,GAAR;GAAU,KAAK,OAAO;aAAY;EAAgB,CAAA,GACjD,eAAe,oBAAC,OAAO,GAAR;GAAU,KAAK,OAAO;aAAkB;EAAsB,CAAA,CACpE;KACX,QACD,EAAA,CAAA;AAEN;AAEA,wBAAwB,cAAc"}

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

@@ -0,0 +1,12 @@
+import { Dialog } from '@chakra-ui/react/dialog';
+interface DialogBodyContextValue {
+    scrollBehavior: 'inside' | 'outside';
+    showScrollGradient: boolean;
+}
+export declare const DialogBodyContext: import('react').Context<DialogBodyContextValue>;
+/**
+ * Scroll-aware dialog body. Reads {@link DialogBodyContext} to decide whether the body scrolls
+ * internally (`inside` → scroll button + optional gradient) or the whole dialog scrolls (`outside`).
+ */
+declare const DialogBody: ({ children, ...rest }: Dialog.BodyProps) => import("react").JSX.Element;
+export default DialogBody;

package/dist/components/BitkitDialog/{BitkitDialogBody.js → DialogBodyContext.js}

@@ -1,11 +1,10 @@
 import IconArrowDown from "../../icons/IconArrowDown.js";
-import BitkitDialogStep from "./BitkitDialogStep.js";
 import { Box } from "@chakra-ui/react/box";
 import { chakra } from "@chakra-ui/react/styled-system";
-import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Dialog, useDialogContext, useDialogStyles } from "@chakra-ui/react/dialog";
-//#region lib/components/BitkitDialog/BitkitDialogBody.tsx
+//#region lib/components/BitkitDialog/DialogBodyContext.tsx
 var DialogBodyContext = createContext({
 	scrollBehavior: "outside",
 	showScrollGradient: true
@@ -58,22 +57,22 @@ var ScrollableDialogBody = ({ children, ...props }) => {
 		})] })]
 	});
 };
-var BitkitDialogBody = ({ children, ...rest }) => {
+/**
+* Scroll-aware dialog body. Reads {@link DialogBodyContext} to decide whether the body scrolls
+* internally (`inside` → scroll button + optional gradient) or the whole dialog scrolls (`outside`).
+*/
+var DialogBody = ({ children, ...rest }) => {
 	const { scrollBehavior } = useContext(DialogBodyContext);
-	const mappedChildren = Children.map(children, (child, index) => {
-		if (isValidElement(child) && child.type === BitkitDialogStep) return cloneElement(child, { _index: index });
-		return child;
-	});
 	if (scrollBehavior === "inside") return /* @__PURE__ */ jsx(ScrollableDialogBody, {
 		...rest,
-		children: mappedChildren
+		children
 	});
 	return /* @__PURE__ */ jsx(Dialog.Body, {
 		...rest,
-		children: mappedChildren
+		children
 	});
 };
 //#endregion
-export { DialogBodyContext, BitkitDialogBody as default };
+export { DialogBodyContext, DialogBody as default };
 
-//# sourceMappingURL=BitkitDialogBody.js.map
+//# sourceMappingURL=DialogBodyContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogBodyContext.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogBodyContext.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog, useDialogContext, useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\n\ninterface DialogBodyContextValue {\n  scrollBehavior: 'inside' | 'outside';\n  showScrollGradient: boolean;\n}\n\nexport const DialogBodyContext = createContext<DialogBodyContextValue>({\n  scrollBehavior: 'outside',\n  showScrollGradient: true,\n});\n\nconst ScrollableDialogBody = ({ children, ...props }: Dialog.BodyProps) => {\n  const { showScrollGradient } = useContext(DialogBodyContext);\n  const styles = useDialogStyles();\n  const { open } = useDialogContext();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n  const updateScrollButtonVisibility = useCallback(() => {\n    const content = contentRef.current;\n    if (!content) {\n      setIsScrollButtonVisible(false);\n      return;\n    }\n    const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n    setIsScrollButtonVisible(!didScrollToBottom);\n  }, []);\n\n  useEffect(() => {\n    const content = contentRef.current;\n    if (!open || !content) return;\n\n    content.addEventListener('scroll', updateScrollButtonVisibility);\n    const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n    resizeObserver.observe(content);\n\n    return () => {\n      content.removeEventListener('scroll', updateScrollButtonVisibility);\n      resizeObserver.disconnect();\n    };\n  }, [open, updateScrollButtonVisibility]);\n\n  return (\n    <Box css={styles.scrollBody}>\n      <Dialog.Body ref={contentRef} {...props}>\n        {children}\n      </Dialog.Body>\n      {isScrollButtonVisible && (\n        <>\n          {showScrollGradient && <Box css={styles.scrollGradient} />}\n          <chakra.button\n            aria-label=\"Scroll to bottom\"\n            css={styles.scrollButton}\n            type=\"button\"\n            onClick={() => {\n              contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n            }}\n          >\n            <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n          </chakra.button>\n        </>\n      )}\n    </Box>\n  );\n};\n\n/**\n * Scroll-aware dialog body. Reads {@link DialogBodyContext} to decide whether the body scrolls\n * internally (`inside` → scroll button + optional gradient) or the whole dialog scrolls (`outside`).\n */\nconst DialogBody = ({ children, ...rest }: Dialog.BodyProps) => {\n  const { scrollBehavior } = useContext(DialogBodyContext);\n\n  if (scrollBehavior === 'inside') {\n    return <ScrollableDialogBody {...rest}>{children}</ScrollableDialogBody>;\n  }\n  return <Dialog.Body {...rest}>{children}</Dialog.Body>;\n};\n\nexport default DialogBody;\n"],"mappings":";;;;;;;AAYA,IAAa,oBAAoB,cAAsC;CACrE,gBAAgB;CAChB,oBAAoB;AACtB,CAAC;AAED,IAAM,wBAAwB,EAAE,UAAU,GAAG,YAA8B;CACzE,MAAM,EAAE,uBAAuB,WAAW,iBAAiB;CAC3D,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,SAAS,iBAAiB;CAClC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,+BAA+B,kBAAkB;EACrD,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;GACZ,yBAAyB,KAAK;GAC9B;EACF;EAEA,yBAAyB,EADC,QAAQ,aAAa,QAAQ,eAAe,QAAQ,eAAe,EAClD;CAC7C,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS;EAEvB,QAAQ,iBAAiB,UAAU,4BAA4B;EAC/D,MAAM,iBAAiB,IAAI,eAAe,4BAA4B;EACtE,eAAe,QAAQ,OAAO;EAE9B,aAAa;GACX,QAAQ,oBAAoB,UAAU,4BAA4B;GAClE,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,4BAA4B,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;YAAjB,CACE,oBAAC,OAAO,MAAR;GAAa,KAAK;GAAY,GAAI;GAC/B;EACU,CAAA,GACZ,yBACC,qBAAA,YAAA,EAAA,UAAA,CACG,sBAAsB,oBAAC,KAAD,EAAK,KAAK,OAAO,eAAiB,CAAA,GACzD,oBAAC,OAAO,QAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,MAAK;GACL,eAAe;IACb,WAAW,SAAS,SAAS;KAAE,KAAK,WAAW,QAAQ;KAAc,UAAU;IAAS,CAAC;GAC3F;aAEA,oBAAC,eAAD;IAAe,OAAM;IAAgB,MAAK;GAAM,CAAA;EACnC,CAAA,CACf,EAAA,CAAA,CAED;;AAET;;;;;AAMA,IAAM,cAAc,EAAE,UAAU,GAAG,WAA6B;CAC9D,MAAM,EAAE,mBAAmB,WAAW,iBAAiB;CAEvD,IAAI,mBAAmB,UACrB,OAAO,oBAAC,sBAAD;EAAsB,GAAI;EAAO;CAA+B,CAAA;CAEzE,OAAO,oBAAC,OAAO,MAAR;EAAa,GAAI;EAAO;CAAsB,CAAA;AACvD"}

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface DialogInnerProps {
+    /** Body content. */
+    children?: ReactNode;
+    closable?: 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). */
+    headerExtra?: ReactNode;
+    headerLabel?: string;
+    scrollBehavior?: 'inside' | 'outside';
+    showScrollGradient?: boolean;
+    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.
+ */
+declare const DialogInner: ({ children, closable, footerButtons, footerContent, headerExtra, headerLabel, scrollBehavior: scrollBehaviorProp, showScrollGradient, title, variant, }: DialogInnerProps) => import("react").JSX.Element;
+export default DialogInner;