@j2-health/design-system 0.6.2 → 0.6.3

package/dist/index.cjs

@@ -52,6 +52,7 @@ const require_Spinner = require("./src/components/spinner/Spinner.cjs");
 const require_StatusPill = require("./src/components/statusPill/StatusPill.cjs");
 const require_useSteps = require("./src/components/steps/useSteps.cjs");
 const require_Steps = require("./src/components/steps/Steps.cjs");
+const require_StepDrawer = require("./src/components/stepDrawer/StepDrawer.cjs");
 const require_SwatchStrip = require("./src/components/swatchStrip/SwatchStrip.cjs");
 const require_Switch = require("./src/components/switch/Switch.cjs");
 const require_Table = require("./src/components/table/Table.cjs");
@@ -111,6 +112,7 @@ exports.SelectAll = require_SelectAll.SelectAll;
 exports.Skeleton = require_Skeleton.Skeleton;
 exports.Spinner = require_Spinner.Spinner;
 exports.StatusPill = require_StatusPill.StatusPill;
+exports.StepDrawer = require_StepDrawer.StepDrawer;
 exports.Steps = require_Steps.Steps;
 exports.SummarizedSelect = require_SummarizedSelect.SummarizedSelect;
 exports.Swatch = require_Swatch.Swatch;
@@ -137,5 +139,6 @@ exports.operatorOptionsFor = require_useFilterField.operatorOptionsFor;
 exports.tailwindPreset = require_tailwind.tailwindPreset;
 exports.useMessage = require_useMessage.useMessage;
 exports.useNotification = require_useNotification.useNotification;
+exports.useStepDrawerSlots = require_StepDrawer.useStepDrawerSlots;
 exports.useSteps = require_useSteps.useSteps;
 exports.withDesignSystemPaginationOverrides = require_Pagination.withDesignSystemPaginationOverrides;

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export * from './src/components/select/index.js';
 export * from './src/components/skeleton/index.js';
 export * from './src/components/spinner/index.js';
 export * from './src/components/statusPill/index.js';
+export * from './src/components/stepDrawer/index.js';
 export * from './src/components/steps/index.js';
 export * from './src/components/swatch/index.js';
 export * from './src/components/swatchStrip/index.js';

package/dist/index.js

@@ -51,6 +51,7 @@ import { Spinner } from "./src/components/spinner/Spinner.js";
 import { StatusPill } from "./src/components/statusPill/StatusPill.js";
 import { useSteps } from "./src/components/steps/useSteps.js";
 import { Steps } from "./src/components/steps/Steps.js";
+import { StepDrawer, useStepDrawerSlots } from "./src/components/stepDrawer/StepDrawer.js";
 import { SwatchStrip } from "./src/components/swatchStrip/SwatchStrip.js";
 import { Switch } from "./src/components/switch/Switch.js";
 import { Table } from "./src/components/table/Table.js";
@@ -60,4 +61,4 @@ import { VennDiagram } from "./src/components/vennDiagram/VennDiagram.js";
 import { UserProfile } from "./src/components/legacyNavMenu/UserProfile.js";
 import { LegacyNavMenu } from "./src/components/legacyNavMenu/LegacyNavMenu.js";
 import { icons } from "./index2.js";
-export { Alert, AntdInput, AntdSearchInput, AntdSelect, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioGroup, Rate, Select, SelectAll, Skeleton, Spinner, StatusPill, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useSteps, withDesignSystemPaginationOverrides };
+export { Alert, AntdInput, AntdSearchInput, AntdSelect, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioGroup, Rate, Select, SelectAll, Skeleton, Spinner, StatusPill, StepDrawer, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useStepDrawerSlots, useSteps, withDesignSystemPaginationOverrides };

package/dist/index2.js

@@ -51,6 +51,7 @@ import { Spinner } from "./src/components/spinner/Spinner.js";
 import { StatusPill } from "./src/components/statusPill/StatusPill.js";
 import { useSteps } from "./src/components/steps/useSteps.js";
 import { Steps } from "./src/components/steps/Steps.js";
+import { StepDrawer, useStepDrawerSlots } from "./src/components/stepDrawer/StepDrawer.js";
 import { SwatchStrip } from "./src/components/swatchStrip/SwatchStrip.js";
 import { Switch } from "./src/components/switch/Switch.js";
 import { Table } from "./src/components/table/Table.js";
@@ -60,4 +61,4 @@ import { VennDiagram } from "./src/components/vennDiagram/VennDiagram.js";
 import { UserProfile } from "./src/components/legacyNavMenu/UserProfile.js";
 import { LegacyNavMenu } from "./src/components/legacyNavMenu/LegacyNavMenu.js";
 import * as icons from "@phosphor-icons/react";
-export { Alert, AntdInput, AntdSearchInput, AntdSelect, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioGroup, Rate, Select, SelectAll, Skeleton, Spinner, StatusPill, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useSteps, withDesignSystemPaginationOverrides };
+export { Alert, AntdInput, AntdSearchInput, AntdSelect, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioGroup, Rate, Select, SelectAll, Skeleton, Spinner, StatusPill, StepDrawer, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useStepDrawerSlots, useSteps, withDesignSystemPaginationOverrides };

package/dist/src/components/stepDrawer/StepDrawer.cjs

@@ -0,0 +1,89 @@
+const require_Button = require("../button/Button.cjs");
+const require_Drawer = require("../drawer/Drawer.cjs");
+const require_Steps = require("../steps/Steps.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/stepDrawer/StepDrawer.tsx
+var SlotContext = (0, react.createContext)({
+	primary: null,
+	extra: null
+});
+/**
+* The footer's primary-action slot and the header's extra slot, for steps that
+* build their own buttons from state the drawer's parent cannot reach. Portal
+* into them with `createPortal`. A flow whose buttons are available where the
+* drawer is rendered passes `primaryAction` / `extraContent` instead.
+*
+* Use one or the other on a given step. The header slot only exists while
+* `extraContent` is empty, but the footer slot is always there, so a step that
+* portals its primary action needs the flow to pass no `primaryAction`.
+*/
+var useStepDrawerSlots = () => (0, react.useContext)(SlotContext);
+/**
+* A full-page multi-step drawer: bottom placement, a numbered step bar that
+* shows progress but cannot be clicked, and a right-aligned footer. Navigation
+* is footer-only. There is no Cancel button: leaving goes through `onClose`,
+* from the close control or Esc.
+*
+* The flow owns everything that gates a step. There is deliberately no
+* `canProceed` prop: whether the primary action is disabled, or clickable and
+* revealing errors, is up to the node passed as `primaryAction`.
+*/
+function StepDrawer({ open, onClose, title, labels, current, onBack, primaryAction, extraContent, bodyClassName = "h-full overflow-y-auto", destroyOnHidden, afterOpenChange, children }) {
+	const [primarySlot, setPrimarySlot] = (0, react.useState)(null);
+	const [extraSlot, setExtraSlot] = (0, react.useState)(null);
+	const slots = (0, react.useMemo)(() => ({
+		primary: primarySlot,
+		extra: extraSlot
+	}), [primarySlot, extraSlot]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Drawer.Drawer, {
+		open,
+		onClose,
+		title,
+		placement: "bottom",
+		fillPage: true,
+		destroyOnHidden,
+		afterOpenChange,
+		extraContent: extraContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ref: setExtraSlot }),
+		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex w-full justify-end gap-2",
+			children: [
+				onBack && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					size: "large",
+					onClick: onBack,
+					children: "Go back"
+				}),
+				primaryAction,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: setPrimarySlot,
+					className: "contents"
+				})
+			]
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotContext.Provider, {
+			value: slots,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: bodyClassName,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex w-full justify-center py-8",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "w-2/3 max-w-4xl",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Steps.Steps, {
+							items: labels.map((label, index) => ({
+								title: index + 1,
+								description: label
+							})),
+							dot: true,
+							current
+						})
+					})
+				}), children]
+			})
+		})
+	});
+}
+//#endregion
+exports.StepDrawer = StepDrawer;
+exports.useStepDrawerSlots = useStepDrawerSlots;
+
+//# sourceMappingURL=StepDrawer.cjs.map

package/dist/src/components/stepDrawer/StepDrawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepDrawer.cjs","names":["createContext","useContext","useState","useMemo","Drawer","Button","Steps"],"sources":["../../../../src/components/stepDrawer/StepDrawer.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react'\nimport { Button } from '../button'\nimport { Drawer } from '../drawer'\nimport { Steps } from '../steps'\n\ntype StepDrawerSlots = {\n  primary: HTMLElement | null\n  extra: HTMLElement | null\n}\n\nconst SlotContext = createContext<StepDrawerSlots>({\n  primary: null,\n  extra: null,\n})\n\n/**\n * The footer's primary-action slot and the header's extra slot, for steps that\n * build their own buttons from state the drawer's parent cannot reach. Portal\n * into them with `createPortal`. A flow whose buttons are available where the\n * drawer is rendered passes `primaryAction` / `extraContent` instead.\n *\n * Use one or the other on a given step. The header slot only exists while\n * `extraContent` is empty, but the footer slot is always there, so a step that\n * portals its primary action needs the flow to pass no `primaryAction`.\n */\nexport const useStepDrawerSlots = () => useContext(SlotContext)\n\nexport type StepDrawerProps = {\n  open: boolean\n  onClose: () => void\n  title: ReactNode\n  /** One label per step, shown under its number in the step bar. */\n  labels: string[]\n  /** Zero-based index of the step on screen. The drawer never changes it. */\n  current: number\n  /**\n   * Renders a Go back button in the footer. Omit it on a step with nowhere to\n   * return to, which is usually the first. A flow whose first step does have\n   * somewhere to return to passes a handler there too.\n   */\n  onBack?: () => void\n  /** The footer's main button, such as Next or Submit. */\n  primaryAction?: ReactNode\n  /**\n   * Content in the header, left of the close control. While it is empty\n   * (any falsy value, such as the `false` from `cond && <X />`) the header\n   * holds the extra slot instead.\n   */\n  extraContent?: ReactNode\n  /**\n   * Classes for the body around the step bar and content. Replaces the\n   * default `h-full overflow-y-auto`, so a step that scrolls its own content\n   * can pass `h-full` alone.\n   */\n  bodyClassName?: string\n  destroyOnHidden?: boolean\n  /**\n   * Fires once the open or close animation has finished. A flow that resets\n   * state on close wants this rather than `open`, which flips while the panel\n   * is still on screen.\n   */\n  afterOpenChange?: (open: boolean) => void\n  children: ReactNode\n}\n\n/**\n * A full-page multi-step drawer: bottom placement, a numbered step bar that\n * shows progress but cannot be clicked, and a right-aligned footer. Navigation\n * is footer-only. There is no Cancel button: leaving goes through `onClose`,\n * from the close control or Esc.\n *\n * The flow owns everything that gates a step. There is deliberately no\n * `canProceed` prop: whether the primary action is disabled, or clickable and\n * revealing errors, is up to the node passed as `primaryAction`.\n */\nexport function StepDrawer({\n  open,\n  onClose,\n  title,\n  labels,\n  current,\n  onBack,\n  primaryAction,\n  extraContent,\n  bodyClassName = 'h-full overflow-y-auto',\n  destroyOnHidden,\n  afterOpenChange,\n  children,\n}: StepDrawerProps) {\n  const [primarySlot, setPrimarySlot] = useState<HTMLDivElement | null>(null)\n  const [extraSlot, setExtraSlot] = useState<HTMLDivElement | null>(null)\n  const slots = useMemo(\n    () => ({ primary: primarySlot, extra: extraSlot }),\n    [primarySlot, extraSlot]\n  )\n\n  return (\n    <Drawer\n      open={open}\n      onClose={onClose}\n      title={title}\n      placement=\"bottom\"\n      fillPage\n      destroyOnHidden={destroyOnHidden}\n      afterOpenChange={afterOpenChange}\n      // Unlike the footer slot below, this one is either/or: the header sits in\n      // an antd `Space`, which gives every child its own gap, so an unused slot\n      // would push the close control across.\n      extraContent={extraContent || <div ref={setExtraSlot} />}\n      footer={\n        <div className=\"flex w-full justify-end gap-2\">\n          {/* The group is right-anchored, so a missing Go back leaves the\n              primary action where it was rather than shifting it. */}\n          {onBack && (\n            <Button size=\"large\" onClick={onBack}>\n              Go back\n            </Button>\n          )}\n          {primaryAction}\n          {/* `contents` keeps the empty slot out of the flex row, so a flow can\n              pass `primaryAction` on some steps and portal into the slot on\n              others without the unused one opening a gap. */}\n          <div ref={setPrimarySlot} className=\"contents\" />\n        </div>\n      }\n    >\n      <SlotContext.Provider value={slots}>\n        <div className={bodyClassName}>\n          <div className=\"flex w-full justify-center py-8\">\n            <div className=\"w-2/3 max-w-4xl\">\n              {/* `current` without `setCurrent` renders the bar read-only. */}\n              <Steps\n                items={labels.map((label, index) => ({\n                  title: index + 1,\n                  description: label,\n                }))}\n                dot\n                current={current}\n              />\n            </div>\n          </div>\n          {children}\n        </div>\n      </SlotContext.Provider>\n    </Drawer>\n  )\n}\n"],"mappings":";;;;;;AAgBA,IAAM,eAAA,GAAcA,MAAAA,cAAAA,CAA+B;CACjD,SAAS;CACT,OAAO;AACT,CAAC;;;;;;;;;;;AAYD,IAAa,4BAAA,GAA2BC,MAAAA,WAAAA,CAAW,WAAW;;;;;;;;;;;AAkD9D,SAAgB,WAAW,EACzB,MACA,SACA,OACA,QACA,SACA,QACA,eACA,cACA,gBAAgB,0BAChB,iBACA,iBACA,YACkB;CAClB,MAAM,CAAC,aAAa,mBAAA,GAAkBC,MAAAA,SAAAA,CAAgC,IAAI;CAC1E,MAAM,CAAC,WAAW,iBAAA,GAAgBA,MAAAA,SAAAA,CAAgC,IAAI;CACtE,MAAM,SAAA,GAAQC,MAAAA,QAAAA,QACL;EAAE,SAAS;EAAa,OAAO;CAAU,IAChD,CAAC,aAAa,SAAS,CACzB;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;EACQ;EACG;EACF;EACP,WAAU;EACV,UAAA;EACiB;EACA;EAIjB,cAAc,gBAAgB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,KAAK,aAAe,CAAA;EACvD,QACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IAGG,UACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;KAAQ,MAAK;KAAQ,SAAS;KAAQ,UAAA;IAE9B,CAAA;IAET;IAID,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,KAAK;KAAgB,WAAU;IAAY,CAAA;GAC7C;;EAGP,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAY,UAAb;GAAsB,OAAO;GAC3B,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAU;MAEb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;OACE,OAAO,OAAO,KAAK,OAAO,WAAW;QACnC,OAAO,QAAQ;QACf,aAAa;OACf,EAAE;OACF,KAAA;OACS;MACV,CAAA;KACE,CAAA;IACF,CAAA,GACJ,QACE;;EACe,CAAA;CAChB,CAAA;AAEZ"}

package/dist/src/components/stepDrawer/StepDrawer.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+type StepDrawerSlots = {
+    primary: HTMLElement | null;
+    extra: HTMLElement | null;
+};
+/**
+ * The footer's primary-action slot and the header's extra slot, for steps that
+ * build their own buttons from state the drawer's parent cannot reach. Portal
+ * into them with `createPortal`. A flow whose buttons are available where the
+ * drawer is rendered passes `primaryAction` / `extraContent` instead.
+ *
+ * Use one or the other on a given step. The header slot only exists while
+ * `extraContent` is empty, but the footer slot is always there, so a step that
+ * portals its primary action needs the flow to pass no `primaryAction`.
+ */
+export declare const useStepDrawerSlots: () => StepDrawerSlots;
+export type StepDrawerProps = {
+    open: boolean;
+    onClose: () => void;
+    title: ReactNode;
+    /** One label per step, shown under its number in the step bar. */
+    labels: string[];
+    /** Zero-based index of the step on screen. The drawer never changes it. */
+    current: number;
+    /**
+     * Renders a Go back button in the footer. Omit it on a step with nowhere to
+     * return to, which is usually the first. A flow whose first step does have
+     * somewhere to return to passes a handler there too.
+     */
+    onBack?: () => void;
+    /** The footer's main button, such as Next or Submit. */
+    primaryAction?: ReactNode;
+    /**
+     * Content in the header, left of the close control. While it is empty
+     * (any falsy value, such as the `false` from `cond && <X />`) the header
+     * holds the extra slot instead.
+     */
+    extraContent?: ReactNode;
+    /**
+     * Classes for the body around the step bar and content. Replaces the
+     * default `h-full overflow-y-auto`, so a step that scrolls its own content
+     * can pass `h-full` alone.
+     */
+    bodyClassName?: string;
+    destroyOnHidden?: boolean;
+    /**
+     * Fires once the open or close animation has finished. A flow that resets
+     * state on close wants this rather than `open`, which flips while the panel
+     * is still on screen.
+     */
+    afterOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+};
+/**
+ * A full-page multi-step drawer: bottom placement, a numbered step bar that
+ * shows progress but cannot be clicked, and a right-aligned footer. Navigation
+ * is footer-only. There is no Cancel button: leaving goes through `onClose`,
+ * from the close control or Esc.
+ *
+ * The flow owns everything that gates a step. There is deliberately no
+ * `canProceed` prop: whether the primary action is disabled, or clickable and
+ * revealing errors, is up to the node passed as `primaryAction`.
+ */
+export declare function StepDrawer({ open, onClose, title, labels, current, onBack, primaryAction, extraContent, bodyClassName, destroyOnHidden, afterOpenChange, children, }: StepDrawerProps): import('react').JSX.Element;
+export {};

package/dist/src/components/stepDrawer/StepDrawer.js

@@ -0,0 +1,88 @@
+import { Button } from "../button/Button.js";
+import { Drawer } from "../drawer/Drawer.js";
+import { Steps } from "../steps/Steps.js";
+import { createContext, useContext, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/stepDrawer/StepDrawer.tsx
+var SlotContext = createContext({
+	primary: null,
+	extra: null
+});
+/**
+* The footer's primary-action slot and the header's extra slot, for steps that
+* build their own buttons from state the drawer's parent cannot reach. Portal
+* into them with `createPortal`. A flow whose buttons are available where the
+* drawer is rendered passes `primaryAction` / `extraContent` instead.
+*
+* Use one or the other on a given step. The header slot only exists while
+* `extraContent` is empty, but the footer slot is always there, so a step that
+* portals its primary action needs the flow to pass no `primaryAction`.
+*/
+var useStepDrawerSlots = () => useContext(SlotContext);
+/**
+* A full-page multi-step drawer: bottom placement, a numbered step bar that
+* shows progress but cannot be clicked, and a right-aligned footer. Navigation
+* is footer-only. There is no Cancel button: leaving goes through `onClose`,
+* from the close control or Esc.
+*
+* The flow owns everything that gates a step. There is deliberately no
+* `canProceed` prop: whether the primary action is disabled, or clickable and
+* revealing errors, is up to the node passed as `primaryAction`.
+*/
+function StepDrawer({ open, onClose, title, labels, current, onBack, primaryAction, extraContent, bodyClassName = "h-full overflow-y-auto", destroyOnHidden, afterOpenChange, children }) {
+	const [primarySlot, setPrimarySlot] = useState(null);
+	const [extraSlot, setExtraSlot] = useState(null);
+	const slots = useMemo(() => ({
+		primary: primarySlot,
+		extra: extraSlot
+	}), [primarySlot, extraSlot]);
+	return /* @__PURE__ */ jsx(Drawer, {
+		open,
+		onClose,
+		title,
+		placement: "bottom",
+		fillPage: true,
+		destroyOnHidden,
+		afterOpenChange,
+		extraContent: extraContent || /* @__PURE__ */ jsx("div", { ref: setExtraSlot }),
+		footer: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full justify-end gap-2",
+			children: [
+				onBack && /* @__PURE__ */ jsx(Button, {
+					size: "large",
+					onClick: onBack,
+					children: "Go back"
+				}),
+				primaryAction,
+				/* @__PURE__ */ jsx("div", {
+					ref: setPrimarySlot,
+					className: "contents"
+				})
+			]
+		}),
+		children: /* @__PURE__ */ jsx(SlotContext.Provider, {
+			value: slots,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: bodyClassName,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex w-full justify-center py-8",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "w-2/3 max-w-4xl",
+						children: /* @__PURE__ */ jsx(Steps, {
+							items: labels.map((label, index) => ({
+								title: index + 1,
+								description: label
+							})),
+							dot: true,
+							current
+						})
+					})
+				}), children]
+			})
+		})
+	});
+}
+//#endregion
+export { StepDrawer, useStepDrawerSlots };
+
+//# sourceMappingURL=StepDrawer.js.map

package/dist/src/components/stepDrawer/StepDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepDrawer.js","names":[],"sources":["../../../../src/components/stepDrawer/StepDrawer.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react'\nimport { Button } from '../button'\nimport { Drawer } from '../drawer'\nimport { Steps } from '../steps'\n\ntype StepDrawerSlots = {\n  primary: HTMLElement | null\n  extra: HTMLElement | null\n}\n\nconst SlotContext = createContext<StepDrawerSlots>({\n  primary: null,\n  extra: null,\n})\n\n/**\n * The footer's primary-action slot and the header's extra slot, for steps that\n * build their own buttons from state the drawer's parent cannot reach. Portal\n * into them with `createPortal`. A flow whose buttons are available where the\n * drawer is rendered passes `primaryAction` / `extraContent` instead.\n *\n * Use one or the other on a given step. The header slot only exists while\n * `extraContent` is empty, but the footer slot is always there, so a step that\n * portals its primary action needs the flow to pass no `primaryAction`.\n */\nexport const useStepDrawerSlots = () => useContext(SlotContext)\n\nexport type StepDrawerProps = {\n  open: boolean\n  onClose: () => void\n  title: ReactNode\n  /** One label per step, shown under its number in the step bar. */\n  labels: string[]\n  /** Zero-based index of the step on screen. The drawer never changes it. */\n  current: number\n  /**\n   * Renders a Go back button in the footer. Omit it on a step with nowhere to\n   * return to, which is usually the first. A flow whose first step does have\n   * somewhere to return to passes a handler there too.\n   */\n  onBack?: () => void\n  /** The footer's main button, such as Next or Submit. */\n  primaryAction?: ReactNode\n  /**\n   * Content in the header, left of the close control. While it is empty\n   * (any falsy value, such as the `false` from `cond && <X />`) the header\n   * holds the extra slot instead.\n   */\n  extraContent?: ReactNode\n  /**\n   * Classes for the body around the step bar and content. Replaces the\n   * default `h-full overflow-y-auto`, so a step that scrolls its own content\n   * can pass `h-full` alone.\n   */\n  bodyClassName?: string\n  destroyOnHidden?: boolean\n  /**\n   * Fires once the open or close animation has finished. A flow that resets\n   * state on close wants this rather than `open`, which flips while the panel\n   * is still on screen.\n   */\n  afterOpenChange?: (open: boolean) => void\n  children: ReactNode\n}\n\n/**\n * A full-page multi-step drawer: bottom placement, a numbered step bar that\n * shows progress but cannot be clicked, and a right-aligned footer. Navigation\n * is footer-only. There is no Cancel button: leaving goes through `onClose`,\n * from the close control or Esc.\n *\n * The flow owns everything that gates a step. There is deliberately no\n * `canProceed` prop: whether the primary action is disabled, or clickable and\n * revealing errors, is up to the node passed as `primaryAction`.\n */\nexport function StepDrawer({\n  open,\n  onClose,\n  title,\n  labels,\n  current,\n  onBack,\n  primaryAction,\n  extraContent,\n  bodyClassName = 'h-full overflow-y-auto',\n  destroyOnHidden,\n  afterOpenChange,\n  children,\n}: StepDrawerProps) {\n  const [primarySlot, setPrimarySlot] = useState<HTMLDivElement | null>(null)\n  const [extraSlot, setExtraSlot] = useState<HTMLDivElement | null>(null)\n  const slots = useMemo(\n    () => ({ primary: primarySlot, extra: extraSlot }),\n    [primarySlot, extraSlot]\n  )\n\n  return (\n    <Drawer\n      open={open}\n      onClose={onClose}\n      title={title}\n      placement=\"bottom\"\n      fillPage\n      destroyOnHidden={destroyOnHidden}\n      afterOpenChange={afterOpenChange}\n      // Unlike the footer slot below, this one is either/or: the header sits in\n      // an antd `Space`, which gives every child its own gap, so an unused slot\n      // would push the close control across.\n      extraContent={extraContent || <div ref={setExtraSlot} />}\n      footer={\n        <div className=\"flex w-full justify-end gap-2\">\n          {/* The group is right-anchored, so a missing Go back leaves the\n              primary action where it was rather than shifting it. */}\n          {onBack && (\n            <Button size=\"large\" onClick={onBack}>\n              Go back\n            </Button>\n          )}\n          {primaryAction}\n          {/* `contents` keeps the empty slot out of the flex row, so a flow can\n              pass `primaryAction` on some steps and portal into the slot on\n              others without the unused one opening a gap. */}\n          <div ref={setPrimarySlot} className=\"contents\" />\n        </div>\n      }\n    >\n      <SlotContext.Provider value={slots}>\n        <div className={bodyClassName}>\n          <div className=\"flex w-full justify-center py-8\">\n            <div className=\"w-2/3 max-w-4xl\">\n              {/* `current` without `setCurrent` renders the bar read-only. */}\n              <Steps\n                items={labels.map((label, index) => ({\n                  title: index + 1,\n                  description: label,\n                }))}\n                dot\n                current={current}\n              />\n            </div>\n          </div>\n          {children}\n        </div>\n      </SlotContext.Provider>\n    </Drawer>\n  )\n}\n"],"mappings":";;;;;;AAgBA,IAAM,cAAc,cAA+B;CACjD,SAAS;CACT,OAAO;AACT,CAAC;;;;;;;;;;;AAYD,IAAa,2BAA2B,WAAW,WAAW;;;;;;;;;;;AAkD9D,SAAgB,WAAW,EACzB,MACA,SACA,OACA,QACA,SACA,QACA,eACA,cACA,gBAAgB,0BAChB,iBACA,iBACA,YACkB;CAClB,MAAM,CAAC,aAAa,kBAAkB,SAAgC,IAAI;CAC1E,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CACtE,MAAM,QAAQ,eACL;EAAE,SAAS;EAAa,OAAO;CAAU,IAChD,CAAC,aAAa,SAAS,CACzB;CAEA,OACE,oBAAC,QAAD;EACQ;EACG;EACF;EACP,WAAU;EACV,UAAA;EACiB;EACA;EAIjB,cAAc,gBAAgB,oBAAC,OAAD,EAAK,KAAK,aAAe,CAAA;EACvD,QACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IAGG,UACC,oBAAC,QAAD;KAAQ,MAAK;KAAQ,SAAS;KAAQ,UAAA;IAE9B,CAAA;IAET;IAID,oBAAC,OAAD;KAAK,KAAK;KAAgB,WAAU;IAAY,CAAA;GAC7C;;EAGP,UAAA,oBAAC,YAAY,UAAb;GAAsB,OAAO;GAC3B,UAAA,qBAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,CACE,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,OAAD;MAAK,WAAU;MAEb,UAAA,oBAAC,OAAD;OACE,OAAO,OAAO,KAAK,OAAO,WAAW;QACnC,OAAO,QAAQ;QACf,aAAa;OACf,EAAE;OACF,KAAA;OACS;MACV,CAAA;KACE,CAAA;IACF,CAAA,GACJ,QACE;;EACe,CAAA;CAChB,CAAA;AAEZ"}

package/dist/src/components/stepDrawer/index.d.ts

@@ -0,0 +1 @@
+export { StepDrawer, useStepDrawerSlots, type StepDrawerProps, } from './StepDrawer.js';

package/dist/src/components/steps/Steps.cjs

@@ -8,22 +8,23 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames, 1);
 //#region src/components/steps/Steps.tsx
-var Steps = ({ items, current, setCurrent, dot = false, direction, orientation, size, labelPlacement, titlePlacement, ...props }) => {
+var Steps = ({ items, current, setCurrent, dot = false, direction, orientation, size, labelPlacement, titlePlacement, className, ...props }) => {
 	const isVertical = (orientation ?? direction) === "vertical";
 	const totalSteps = items?.length || 0;
+	const isReadOnly = current !== void 0 && setCurrent === void 0;
 	const { current: currentStep, setCurrent: setCurrentStep } = require_useSteps.useSteps({
 		current,
 		setCurrent,
 		totalSteps
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Steps, {
-		className: "j2Steps",
 		...props,
+		className: (0, classnames.default)("j2Steps", className),
 		orientation: orientation ?? direction,
 		titlePlacement: titlePlacement ?? labelPlacement,
 		size: size === "default" ? "medium" : size,
 		current: currentStep,
-		onChange: (curr) => setCurrentStep(curr),
+		onChange: isReadOnly ? void 0 : (curr) => setCurrentStep(curr),
 		...dot && { type: "dot" },
 		items: items?.map((item, index) => {
 			const { description, ...restItem } = item;

package/dist/src/components/steps/Steps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.cjs","names":["useSteps","AntdSteps","cx","CheckIcon"],"sources":["../../../../src/components/steps/Steps.tsx"],"sourcesContent":["import { Steps as AntdSteps, StepsProps } from 'antd'\nimport './Steps.css'\nimport { CheckIcon } from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport { useSteps } from './useSteps'\n\ntype AllProps = StepsProps & {\n  items: NonNullable<StepsProps['items']>\n  dot?: boolean\n  current?: number\n  setCurrent?: (current: number) => void\n}\n\ntype Props = Expand<AllProps>\n\nexport const Steps = ({\n  items,\n  current,\n  setCurrent,\n  dot = false,\n  direction,\n  orientation,\n  size,\n  labelPlacement,\n  titlePlacement,\n  ...props\n}: Props) => {\n  const isVertical = (orientation ?? direction) === 'vertical'\n  const totalSteps = items?.length || 0\n\n  const { current: currentStep, setCurrent: setCurrentStep } = useSteps({\n    current,\n    setCurrent,\n    totalSteps,\n  })\n\n  return (\n    <AntdSteps\n      className=\"j2Steps\"\n      {...props}\n      orientation={orientation ?? direction}\n      titlePlacement={titlePlacement ?? labelPlacement}\n      size={size === 'default' ? 'medium' : size}\n      current={currentStep}\n      onChange={(curr) => setCurrentStep(curr)}\n      {...(dot && { type: 'dot' })}\n      items={items?.map((item, index) => {\n        const { description, ...restItem } = item\n        return {\n          ...restItem,\n          content: item.content ?? description,\n          icon:\n            !dot && currentStep > index ? (\n              <div\n                className={cx(\n                  `check-${size === 'small' ? 'small' : 'medium'}`,\n                  isVertical ? `vertical-check-icon` : `check-icon`\n                )}\n              >\n                <CheckIcon size={16} />\n              </div>\n            ) : (\n              item.icon\n            ),\n        }\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;AAeA,IAAa,SAAS,EACpB,OACA,SACA,YACA,MAAM,OACN,WACA,aACA,MACA,gBACA,gBACA,GAAG,YACQ;CACX,MAAM,cAAc,eAAe,eAAe;CAClD,MAAM,aAAa,OAAO,UAAU;CAEpC,MAAM,EAAE,SAAS,aAAa,YAAY,mBAAmBA,iBAAAA,SAAS;EACpE;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,OAAD;EACE,WAAU;EACV,GAAI;EACJ,aAAa,eAAe;EAC5B,gBAAgB,kBAAkB;EAClC,MAAM,SAAS,YAAY,WAAW;EACtC,SAAS;EACT,WAAW,SAAS,eAAe,IAAI;EACvC,GAAK,OAAO,EAAE,MAAM,MAAM;EAC1B,OAAO,OAAO,KAAK,MAAM,UAAU;GACjC,MAAM,EAAE,aAAa,GAAG,aAAa;GACrC,OAAO;IACL,GAAG;IACH,SAAS,KAAK,WAAW;IACzB,MACE,CAAC,OAAO,cAAc,QACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KACE,YAAA,GAAWC,WAAAA,QAAAA,CACT,SAAS,SAAS,UAAU,UAAU,YACtC,aAAa,wBAAwB,YACvC;KAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,WAAD,EAAW,MAAM,GAAK,CAAA;IACnB,CAAA,IAEL,KAAK;GAEX;EACF,CAAC;CACF,CAAA;AAEL"}
+{"version":3,"file":"Steps.cjs","names":["useSteps","AntdSteps","cx","CheckIcon"],"sources":["../../../../src/components/steps/Steps.tsx"],"sourcesContent":["import { Steps as AntdSteps, StepsProps } from 'antd'\nimport './Steps.css'\nimport { CheckIcon } from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport { useSteps } from './useSteps'\n\ntype AllProps = StepsProps & {\n  items: NonNullable<StepsProps['items']>\n  dot?: boolean\n  current?: number\n  setCurrent?: (current: number) => void\n}\n\ntype Props = Expand<AllProps>\n\nexport const Steps = ({\n  items,\n  current,\n  setCurrent,\n  dot = false,\n  direction,\n  orientation,\n  size,\n  labelPlacement,\n  titlePlacement,\n  className,\n  ...props\n}: Props) => {\n  const isVertical = (orientation ?? direction) === 'vertical'\n  const totalSteps = items?.length || 0\n  // antd only makes a step clickable when `onChange` is set, so a controlled\n  // bar with no setter renders read-only rather than inert-but-clickable.\n  const isReadOnly = current !== undefined && setCurrent === undefined\n\n  const { current: currentStep, setCurrent: setCurrentStep } = useSteps({\n    current,\n    setCurrent,\n    totalSteps,\n  })\n\n  return (\n    <AntdSteps\n      {...props}\n      className={cx('j2Steps', className)}\n      orientation={orientation ?? direction}\n      titlePlacement={titlePlacement ?? labelPlacement}\n      size={size === 'default' ? 'medium' : size}\n      current={currentStep}\n      onChange={isReadOnly ? undefined : (curr) => setCurrentStep(curr)}\n      {...(dot && { type: 'dot' })}\n      items={items?.map((item, index) => {\n        const { description, ...restItem } = item\n        return {\n          ...restItem,\n          content: item.content ?? description,\n          icon:\n            !dot && currentStep > index ? (\n              <div\n                className={cx(\n                  `check-${size === 'small' ? 'small' : 'medium'}`,\n                  isVertical ? `vertical-check-icon` : `check-icon`\n                )}\n              >\n                <CheckIcon size={16} />\n              </div>\n            ) : (\n              item.icon\n            ),\n        }\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;AAeA,IAAa,SAAS,EACpB,OACA,SACA,YACA,MAAM,OACN,WACA,aACA,MACA,gBACA,gBACA,WACA,GAAG,YACQ;CACX,MAAM,cAAc,eAAe,eAAe;CAClD,MAAM,aAAa,OAAO,UAAU;CAGpC,MAAM,aAAa,YAAY,KAAA,KAAa,eAAe,KAAA;CAE3D,MAAM,EAAE,SAAS,aAAa,YAAY,mBAAmBA,iBAAAA,SAAS;EACpE;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,OAAD;EACE,GAAI;EACJ,YAAA,GAAWC,WAAAA,QAAAA,CAAG,WAAW,SAAS;EAClC,aAAa,eAAe;EAC5B,gBAAgB,kBAAkB;EAClC,MAAM,SAAS,YAAY,WAAW;EACtC,SAAS;EACT,UAAU,aAAa,KAAA,KAAa,SAAS,eAAe,IAAI;EAChE,GAAK,OAAO,EAAE,MAAM,MAAM;EAC1B,OAAO,OAAO,KAAK,MAAM,UAAU;GACjC,MAAM,EAAE,aAAa,GAAG,aAAa;GACrC,OAAO;IACL,GAAG;IACH,SAAS,KAAK,WAAW;IACzB,MACE,CAAC,OAAO,cAAc,QACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KACE,YAAA,GAAWA,WAAAA,QAAAA,CACT,SAAS,SAAS,UAAU,UAAU,YACtC,aAAa,wBAAwB,YACvC;KAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,WAAD,EAAW,MAAM,GAAK,CAAA;IACnB,CAAA,IAEL,KAAK;GAEX;EACF,CAAC;CACF,CAAA;AAEL"}

package/dist/src/components/steps/Steps.d.ts

@@ -6,5 +6,5 @@ type AllProps = StepsProps & {
     setCurrent?: (current: number) => void;
 };
 type Props = Expand<AllProps>;
-export declare const Steps: ({ items, current, setCurrent, dot, direction, orientation, size, labelPlacement, titlePlacement, ...props }: Props) => import('react').JSX.Element;
+export declare const Steps: ({ items, current, setCurrent, dot, direction, orientation, size, labelPlacement, titlePlacement, className, ...props }: Props) => import('react').JSX.Element;
 export {};

package/dist/src/components/steps/Steps.js

@@ -5,22 +5,23 @@ import { CheckIcon } from "@phosphor-icons/react";
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 //#region src/components/steps/Steps.tsx
-var Steps$1 = ({ items, current, setCurrent, dot = false, direction, orientation, size, labelPlacement, titlePlacement, ...props }) => {
+var Steps$1 = ({ items, current, setCurrent, dot = false, direction, orientation, size, labelPlacement, titlePlacement, className, ...props }) => {
 	const isVertical = (orientation ?? direction) === "vertical";
 	const totalSteps = items?.length || 0;
+	const isReadOnly = current !== void 0 && setCurrent === void 0;
 	const { current: currentStep, setCurrent: setCurrentStep } = useSteps({
 		current,
 		setCurrent,
 		totalSteps
 	});
 	return /* @__PURE__ */ jsx(Steps, {
-		className: "j2Steps",
 		...props,
+		className: cx("j2Steps", className),
 		orientation: orientation ?? direction,
 		titlePlacement: titlePlacement ?? labelPlacement,
 		size: size === "default" ? "medium" : size,
 		current: currentStep,
-		onChange: (curr) => setCurrentStep(curr),
+		onChange: isReadOnly ? void 0 : (curr) => setCurrentStep(curr),
 		...dot && { type: "dot" },
 		items: items?.map((item, index) => {
 			const { description, ...restItem } = item;

package/dist/src/components/steps/Steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.js","names":["Steps","AntdSteps"],"sources":["../../../../src/components/steps/Steps.tsx"],"sourcesContent":["import { Steps as AntdSteps, StepsProps } from 'antd'\nimport './Steps.css'\nimport { CheckIcon } from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport { useSteps } from './useSteps'\n\ntype AllProps = StepsProps & {\n  items: NonNullable<StepsProps['items']>\n  dot?: boolean\n  current?: number\n  setCurrent?: (current: number) => void\n}\n\ntype Props = Expand<AllProps>\n\nexport const Steps = ({\n  items,\n  current,\n  setCurrent,\n  dot = false,\n  direction,\n  orientation,\n  size,\n  labelPlacement,\n  titlePlacement,\n  ...props\n}: Props) => {\n  const isVertical = (orientation ?? direction) === 'vertical'\n  const totalSteps = items?.length || 0\n\n  const { current: currentStep, setCurrent: setCurrentStep } = useSteps({\n    current,\n    setCurrent,\n    totalSteps,\n  })\n\n  return (\n    <AntdSteps\n      className=\"j2Steps\"\n      {...props}\n      orientation={orientation ?? direction}\n      titlePlacement={titlePlacement ?? labelPlacement}\n      size={size === 'default' ? 'medium' : size}\n      current={currentStep}\n      onChange={(curr) => setCurrentStep(curr)}\n      {...(dot && { type: 'dot' })}\n      items={items?.map((item, index) => {\n        const { description, ...restItem } = item\n        return {\n          ...restItem,\n          content: item.content ?? description,\n          icon:\n            !dot && currentStep > index ? (\n              <div\n                className={cx(\n                  `check-${size === 'small' ? 'small' : 'medium'}`,\n                  isVertical ? `vertical-check-icon` : `check-icon`\n                )}\n              >\n                <CheckIcon size={16} />\n              </div>\n            ) : (\n              item.icon\n            ),\n        }\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAeA,IAAaA,WAAS,EACpB,OACA,SACA,YACA,MAAM,OACN,WACA,aACA,MACA,gBACA,gBACA,GAAG,YACQ;CACX,MAAM,cAAc,eAAe,eAAe;CAClD,MAAM,aAAa,OAAO,UAAU;CAEpC,MAAM,EAAE,SAAS,aAAa,YAAY,mBAAmB,SAAS;EACpE;EACA;EACA;CACF,CAAC;CAED,OACE,oBAACC,OAAD;EACE,WAAU;EACV,GAAI;EACJ,aAAa,eAAe;EAC5B,gBAAgB,kBAAkB;EAClC,MAAM,SAAS,YAAY,WAAW;EACtC,SAAS;EACT,WAAW,SAAS,eAAe,IAAI;EACvC,GAAK,OAAO,EAAE,MAAM,MAAM;EAC1B,OAAO,OAAO,KAAK,MAAM,UAAU;GACjC,MAAM,EAAE,aAAa,GAAG,aAAa;GACrC,OAAO;IACL,GAAG;IACH,SAAS,KAAK,WAAW;IACzB,MACE,CAAC,OAAO,cAAc,QACpB,oBAAC,OAAD;KACE,WAAW,GACT,SAAS,SAAS,UAAU,UAAU,YACtC,aAAa,wBAAwB,YACvC;KAEA,UAAA,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;IACnB,CAAA,IAEL,KAAK;GAEX;EACF,CAAC;CACF,CAAA;AAEL"}
+{"version":3,"file":"Steps.js","names":["Steps","AntdSteps"],"sources":["../../../../src/components/steps/Steps.tsx"],"sourcesContent":["import { Steps as AntdSteps, StepsProps } from 'antd'\nimport './Steps.css'\nimport { CheckIcon } from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport { useSteps } from './useSteps'\n\ntype AllProps = StepsProps & {\n  items: NonNullable<StepsProps['items']>\n  dot?: boolean\n  current?: number\n  setCurrent?: (current: number) => void\n}\n\ntype Props = Expand<AllProps>\n\nexport const Steps = ({\n  items,\n  current,\n  setCurrent,\n  dot = false,\n  direction,\n  orientation,\n  size,\n  labelPlacement,\n  titlePlacement,\n  className,\n  ...props\n}: Props) => {\n  const isVertical = (orientation ?? direction) === 'vertical'\n  const totalSteps = items?.length || 0\n  // antd only makes a step clickable when `onChange` is set, so a controlled\n  // bar with no setter renders read-only rather than inert-but-clickable.\n  const isReadOnly = current !== undefined && setCurrent === undefined\n\n  const { current: currentStep, setCurrent: setCurrentStep } = useSteps({\n    current,\n    setCurrent,\n    totalSteps,\n  })\n\n  return (\n    <AntdSteps\n      {...props}\n      className={cx('j2Steps', className)}\n      orientation={orientation ?? direction}\n      titlePlacement={titlePlacement ?? labelPlacement}\n      size={size === 'default' ? 'medium' : size}\n      current={currentStep}\n      onChange={isReadOnly ? undefined : (curr) => setCurrentStep(curr)}\n      {...(dot && { type: 'dot' })}\n      items={items?.map((item, index) => {\n        const { description, ...restItem } = item\n        return {\n          ...restItem,\n          content: item.content ?? description,\n          icon:\n            !dot && currentStep > index ? (\n              <div\n                className={cx(\n                  `check-${size === 'small' ? 'small' : 'medium'}`,\n                  isVertical ? `vertical-check-icon` : `check-icon`\n                )}\n              >\n                <CheckIcon size={16} />\n              </div>\n            ) : (\n              item.icon\n            ),\n        }\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAeA,IAAaA,WAAS,EACpB,OACA,SACA,YACA,MAAM,OACN,WACA,aACA,MACA,gBACA,gBACA,WACA,GAAG,YACQ;CACX,MAAM,cAAc,eAAe,eAAe;CAClD,MAAM,aAAa,OAAO,UAAU;CAGpC,MAAM,aAAa,YAAY,KAAA,KAAa,eAAe,KAAA;CAE3D,MAAM,EAAE,SAAS,aAAa,YAAY,mBAAmB,SAAS;EACpE;EACA;EACA;CACF,CAAC;CAED,OACE,oBAACC,OAAD;EACE,GAAI;EACJ,WAAW,GAAG,WAAW,SAAS;EAClC,aAAa,eAAe;EAC5B,gBAAgB,kBAAkB;EAClC,MAAM,SAAS,YAAY,WAAW;EACtC,SAAS;EACT,UAAU,aAAa,KAAA,KAAa,SAAS,eAAe,IAAI;EAChE,GAAK,OAAO,EAAE,MAAM,MAAM;EAC1B,OAAO,OAAO,KAAK,MAAM,UAAU;GACjC,MAAM,EAAE,aAAa,GAAG,aAAa;GACrC,OAAO;IACL,GAAG;IACH,SAAS,KAAK,WAAW;IACzB,MACE,CAAC,OAAO,cAAc,QACpB,oBAAC,OAAD;KACE,WAAW,GACT,SAAS,SAAS,UAAU,UAAU,YACtC,aAAa,wBAAwB,YACvC;KAEA,UAAA,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;IACnB,CAAA,IAEL,KAAK;GAEX;EACF,CAAC;CACF,CAAA;AAEL"}

package/dist/src/components/steps/useSteps.cjs

@@ -2,10 +2,10 @@ let react = require("react");
 //#region src/components/steps/useSteps.ts
 var useSteps = ({ current, setCurrent, totalSteps, initialStep = 0 }) => {
 	const [internalCurrent, setInternalCurrent] = (0, react.useState)(initialStep);
-	const isControlled = current !== void 0 && setCurrent !== void 0;
+	const isControlled = current !== void 0;
 	const currentStep = isControlled ? current : internalCurrent;
 	const handleSetCurrent = (0, react.useCallback)((newCurrent) => {
-		if (isControlled) setCurrent(newCurrent);
+		if (isControlled) setCurrent?.(newCurrent);
 		else setInternalCurrent(newCurrent);
 	}, [isControlled, setCurrent]);
 	return {

package/dist/src/components/steps/useSteps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSteps.cjs","names":["useState","useCallback"],"sources":["../../../../src/components/steps/useSteps.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\ninterface UseStepsOptions {\n  current?: number\n  setCurrent?: (current: number) => void\n  totalSteps: number\n  initialStep?: number\n}\n\nexport const useSteps = ({\n  current,\n  setCurrent,\n  totalSteps,\n  initialStep = 0,\n}: UseStepsOptions) => {\n  const [internalCurrent, setInternalCurrent] = useState(initialStep)\n\n  const isControlled = current !== undefined && setCurrent !== undefined\n  const currentStep = isControlled ? current : internalCurrent\n\n  const handleSetCurrent = useCallback(\n    (newCurrent: number) => {\n      if (isControlled) {\n        setCurrent!(newCurrent)\n      } else {\n        setInternalCurrent(newCurrent)\n      }\n    },\n    [isControlled, setCurrent]\n  )\n\n  const next = useCallback(() => {\n    if (currentStep < totalSteps - 1) {\n      handleSetCurrent(currentStep + 1)\n    }\n  }, [currentStep, totalSteps, handleSetCurrent])\n\n  const previous = useCallback(() => {\n    if (currentStep > 0) {\n      handleSetCurrent(currentStep - 1)\n    }\n  }, [currentStep, handleSetCurrent])\n\n  const goToStep = useCallback(\n    (step: number) => {\n      if (step >= 0 && step < totalSteps) {\n        handleSetCurrent(step)\n      }\n    },\n    [totalSteps, handleSetCurrent]\n  )\n\n  const cancel = useCallback(() => {\n    handleSetCurrent(initialStep)\n  }, [handleSetCurrent, initialStep])\n\n  return {\n    next,\n    previous,\n    goToStep,\n    cancel,\n    current: currentStep,\n    setCurrent: handleSetCurrent,\n    canGoNext: currentStep < totalSteps - 1,\n    canGoPrevious: currentStep > 0,\n  }\n}\n"],"mappings":";;AASA,IAAa,YAAY,EACvB,SACA,YACA,YACA,cAAc,QACO;CACrB,MAAM,CAAC,iBAAiB,uBAAA,GAAsBA,MAAAA,SAAAA,CAAS,WAAW;CAElE,MAAM,eAAe,YAAY,KAAA,KAAa,eAAe,KAAA;CAC7D,MAAM,cAAc,eAAe,UAAU;CAE7C,MAAM,oBAAA,GAAmBC,MAAAA,YAAAA,EACtB,eAAuB;EACtB,IAAI,cACF,WAAY,UAAU;OAEtB,mBAAmB,UAAU;CAEjC,GACA,CAAC,cAAc,UAAU,CAC3B;CA2BA,OAAO;EACL,OAAA,GA1BWA,MAAAA,YAAAA,OAAkB;GAC7B,IAAI,cAAc,aAAa,GAC7B,iBAAiB,cAAc,CAAC;EAEpC,GAAG;GAAC;GAAa;GAAY;EAAgB,CAsB3C;EACA,WAAA,GArBeA,MAAAA,YAAAA,OAAkB;GACjC,IAAI,cAAc,GAChB,iBAAiB,cAAc,CAAC;EAEpC,GAAG,CAAC,aAAa,gBAAgB,CAiB/B;EACA,WAAA,GAhBeA,MAAAA,YAAAA,EACd,SAAiB;GAChB,IAAI,QAAQ,KAAK,OAAO,YACtB,iBAAiB,IAAI;EAEzB,GACA,CAAC,YAAY,gBAAgB,CAU7B;EACA,SAAA,GARaA,MAAAA,YAAAA,OAAkB;GAC/B,iBAAiB,WAAW;EAC9B,GAAG,CAAC,kBAAkB,WAAW,CAM/B;EACA,SAAS;EACT,YAAY;EACZ,WAAW,cAAc,aAAa;EACtC,eAAe,cAAc;CAC/B;AACF"}
+{"version":3,"file":"useSteps.cjs","names":["useState","useCallback"],"sources":["../../../../src/components/steps/useSteps.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\ninterface UseStepsOptions {\n  current?: number\n  setCurrent?: (current: number) => void\n  totalSteps: number\n  initialStep?: number\n}\n\nexport const useSteps = ({\n  current,\n  setCurrent,\n  totalSteps,\n  initialStep = 0,\n}: UseStepsOptions) => {\n  const [internalCurrent, setInternalCurrent] = useState(initialStep)\n\n  // `current` alone makes the steps controlled. Without `setCurrent` they are\n  // read-only: navigation is a no-op and the parent moves `current` itself.\n  const isControlled = current !== undefined\n  const currentStep = isControlled ? current : internalCurrent\n\n  const handleSetCurrent = useCallback(\n    (newCurrent: number) => {\n      if (isControlled) {\n        setCurrent?.(newCurrent)\n      } else {\n        setInternalCurrent(newCurrent)\n      }\n    },\n    [isControlled, setCurrent]\n  )\n\n  const next = useCallback(() => {\n    if (currentStep < totalSteps - 1) {\n      handleSetCurrent(currentStep + 1)\n    }\n  }, [currentStep, totalSteps, handleSetCurrent])\n\n  const previous = useCallback(() => {\n    if (currentStep > 0) {\n      handleSetCurrent(currentStep - 1)\n    }\n  }, [currentStep, handleSetCurrent])\n\n  const goToStep = useCallback(\n    (step: number) => {\n      if (step >= 0 && step < totalSteps) {\n        handleSetCurrent(step)\n      }\n    },\n    [totalSteps, handleSetCurrent]\n  )\n\n  const cancel = useCallback(() => {\n    handleSetCurrent(initialStep)\n  }, [handleSetCurrent, initialStep])\n\n  return {\n    next,\n    previous,\n    goToStep,\n    cancel,\n    current: currentStep,\n    setCurrent: handleSetCurrent,\n    canGoNext: currentStep < totalSteps - 1,\n    canGoPrevious: currentStep > 0,\n  }\n}\n"],"mappings":";;AASA,IAAa,YAAY,EACvB,SACA,YACA,YACA,cAAc,QACO;CACrB,MAAM,CAAC,iBAAiB,uBAAA,GAAsBA,MAAAA,SAAAA,CAAS,WAAW;CAIlE,MAAM,eAAe,YAAY,KAAA;CACjC,MAAM,cAAc,eAAe,UAAU;CAE7C,MAAM,oBAAA,GAAmBC,MAAAA,YAAAA,EACtB,eAAuB;EACtB,IAAI,cACF,aAAa,UAAU;OAEvB,mBAAmB,UAAU;CAEjC,GACA,CAAC,cAAc,UAAU,CAC3B;CA2BA,OAAO;EACL,OAAA,GA1BWA,MAAAA,YAAAA,OAAkB;GAC7B,IAAI,cAAc,aAAa,GAC7B,iBAAiB,cAAc,CAAC;EAEpC,GAAG;GAAC;GAAa;GAAY;EAAgB,CAsB3C;EACA,WAAA,GArBeA,MAAAA,YAAAA,OAAkB;GACjC,IAAI,cAAc,GAChB,iBAAiB,cAAc,CAAC;EAEpC,GAAG,CAAC,aAAa,gBAAgB,CAiB/B;EACA,WAAA,GAhBeA,MAAAA,YAAAA,EACd,SAAiB;GAChB,IAAI,QAAQ,KAAK,OAAO,YACtB,iBAAiB,IAAI;EAEzB,GACA,CAAC,YAAY,gBAAgB,CAU7B;EACA,SAAA,GARaA,MAAAA,YAAAA,OAAkB;GAC/B,iBAAiB,WAAW;EAC9B,GAAG,CAAC,kBAAkB,WAAW,CAM/B;EACA,SAAS;EACT,YAAY;EACZ,WAAW,cAAc,aAAa;EACtC,eAAe,cAAc;CAC/B;AACF"}

package/dist/src/components/steps/useSteps.js

@@ -2,10 +2,10 @@ import { useCallback, useState } from "react";
 //#region src/components/steps/useSteps.ts
 var useSteps = ({ current, setCurrent, totalSteps, initialStep = 0 }) => {
 	const [internalCurrent, setInternalCurrent] = useState(initialStep);
-	const isControlled = current !== void 0 && setCurrent !== void 0;
+	const isControlled = current !== void 0;
 	const currentStep = isControlled ? current : internalCurrent;
 	const handleSetCurrent = useCallback((newCurrent) => {
-		if (isControlled) setCurrent(newCurrent);
+		if (isControlled) setCurrent?.(newCurrent);
 		else setInternalCurrent(newCurrent);
 	}, [isControlled, setCurrent]);
 	return {

package/dist/src/components/steps/useSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSteps.js","names":[],"sources":["../../../../src/components/steps/useSteps.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\ninterface UseStepsOptions {\n  current?: number\n  setCurrent?: (current: number) => void\n  totalSteps: number\n  initialStep?: number\n}\n\nexport const useSteps = ({\n  current,\n  setCurrent,\n  totalSteps,\n  initialStep = 0,\n}: UseStepsOptions) => {\n  const [internalCurrent, setInternalCurrent] = useState(initialStep)\n\n  const isControlled = current !== undefined && setCurrent !== undefined\n  const currentStep = isControlled ? current : internalCurrent\n\n  const handleSetCurrent = useCallback(\n    (newCurrent: number) => {\n      if (isControlled) {\n        setCurrent!(newCurrent)\n      } else {\n        setInternalCurrent(newCurrent)\n      }\n    },\n    [isControlled, setCurrent]\n  )\n\n  const next = useCallback(() => {\n    if (currentStep < totalSteps - 1) {\n      handleSetCurrent(currentStep + 1)\n    }\n  }, [currentStep, totalSteps, handleSetCurrent])\n\n  const previous = useCallback(() => {\n    if (currentStep > 0) {\n      handleSetCurrent(currentStep - 1)\n    }\n  }, [currentStep, handleSetCurrent])\n\n  const goToStep = useCallback(\n    (step: number) => {\n      if (step >= 0 && step < totalSteps) {\n        handleSetCurrent(step)\n      }\n    },\n    [totalSteps, handleSetCurrent]\n  )\n\n  const cancel = useCallback(() => {\n    handleSetCurrent(initialStep)\n  }, [handleSetCurrent, initialStep])\n\n  return {\n    next,\n    previous,\n    goToStep,\n    cancel,\n    current: currentStep,\n    setCurrent: handleSetCurrent,\n    canGoNext: currentStep < totalSteps - 1,\n    canGoPrevious: currentStep > 0,\n  }\n}\n"],"mappings":";;AASA,IAAa,YAAY,EACvB,SACA,YACA,YACA,cAAc,QACO;CACrB,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,WAAW;CAElE,MAAM,eAAe,YAAY,KAAA,KAAa,eAAe,KAAA;CAC7D,MAAM,cAAc,eAAe,UAAU;CAE7C,MAAM,mBAAmB,aACtB,eAAuB;EACtB,IAAI,cACF,WAAY,UAAU;OAEtB,mBAAmB,UAAU;CAEjC,GACA,CAAC,cAAc,UAAU,CAC3B;CA2BA,OAAO;EACL,MA1BW,kBAAkB;GAC7B,IAAI,cAAc,aAAa,GAC7B,iBAAiB,cAAc,CAAC;EAEpC,GAAG;GAAC;GAAa;GAAY;EAAgB,CAsB3C;EACA,UArBe,kBAAkB;GACjC,IAAI,cAAc,GAChB,iBAAiB,cAAc,CAAC;EAEpC,GAAG,CAAC,aAAa,gBAAgB,CAiB/B;EACA,UAhBe,aACd,SAAiB;GAChB,IAAI,QAAQ,KAAK,OAAO,YACtB,iBAAiB,IAAI;EAEzB,GACA,CAAC,YAAY,gBAAgB,CAU7B;EACA,QARa,kBAAkB;GAC/B,iBAAiB,WAAW;EAC9B,GAAG,CAAC,kBAAkB,WAAW,CAM/B;EACA,SAAS;EACT,YAAY;EACZ,WAAW,cAAc,aAAa;EACtC,eAAe,cAAc;CAC/B;AACF"}
+{"version":3,"file":"useSteps.js","names":[],"sources":["../../../../src/components/steps/useSteps.ts"],"sourcesContent":["import { useState, useCallback } from 'react'\n\ninterface UseStepsOptions {\n  current?: number\n  setCurrent?: (current: number) => void\n  totalSteps: number\n  initialStep?: number\n}\n\nexport const useSteps = ({\n  current,\n  setCurrent,\n  totalSteps,\n  initialStep = 0,\n}: UseStepsOptions) => {\n  const [internalCurrent, setInternalCurrent] = useState(initialStep)\n\n  // `current` alone makes the steps controlled. Without `setCurrent` they are\n  // read-only: navigation is a no-op and the parent moves `current` itself.\n  const isControlled = current !== undefined\n  const currentStep = isControlled ? current : internalCurrent\n\n  const handleSetCurrent = useCallback(\n    (newCurrent: number) => {\n      if (isControlled) {\n        setCurrent?.(newCurrent)\n      } else {\n        setInternalCurrent(newCurrent)\n      }\n    },\n    [isControlled, setCurrent]\n  )\n\n  const next = useCallback(() => {\n    if (currentStep < totalSteps - 1) {\n      handleSetCurrent(currentStep + 1)\n    }\n  }, [currentStep, totalSteps, handleSetCurrent])\n\n  const previous = useCallback(() => {\n    if (currentStep > 0) {\n      handleSetCurrent(currentStep - 1)\n    }\n  }, [currentStep, handleSetCurrent])\n\n  const goToStep = useCallback(\n    (step: number) => {\n      if (step >= 0 && step < totalSteps) {\n        handleSetCurrent(step)\n      }\n    },\n    [totalSteps, handleSetCurrent]\n  )\n\n  const cancel = useCallback(() => {\n    handleSetCurrent(initialStep)\n  }, [handleSetCurrent, initialStep])\n\n  return {\n    next,\n    previous,\n    goToStep,\n    cancel,\n    current: currentStep,\n    setCurrent: handleSetCurrent,\n    canGoNext: currentStep < totalSteps - 1,\n    canGoPrevious: currentStep > 0,\n  }\n}\n"],"mappings":";;AASA,IAAa,YAAY,EACvB,SACA,YACA,YACA,cAAc,QACO;CACrB,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,WAAW;CAIlE,MAAM,eAAe,YAAY,KAAA;CACjC,MAAM,cAAc,eAAe,UAAU;CAE7C,MAAM,mBAAmB,aACtB,eAAuB;EACtB,IAAI,cACF,aAAa,UAAU;OAEvB,mBAAmB,UAAU;CAEjC,GACA,CAAC,cAAc,UAAU,CAC3B;CA2BA,OAAO;EACL,MA1BW,kBAAkB;GAC7B,IAAI,cAAc,aAAa,GAC7B,iBAAiB,cAAc,CAAC;EAEpC,GAAG;GAAC;GAAa;GAAY;EAAgB,CAsB3C;EACA,UArBe,kBAAkB;GACjC,IAAI,cAAc,GAChB,iBAAiB,cAAc,CAAC;EAEpC,GAAG,CAAC,aAAa,gBAAgB,CAiB/B;EACA,UAhBe,aACd,SAAiB;GAChB,IAAI,QAAQ,KAAK,OAAO,YACtB,iBAAiB,IAAI;EAEzB,GACA,CAAC,YAAY,gBAAgB,CAU7B;EACA,QARa,kBAAkB;GAC/B,iBAAiB,WAAW;EAC9B,GAAG,CAAC,kBAAkB,WAAW,CAM/B;EACA,SAAS;EACT,YAAY;EACZ,WAAW,cAAc,aAAa;EACtC,eAAe,cAAc;CAC/B;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j2-health/design-system",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "type": "module",
   "description": "J2 Health shared React component library",
   "repository": {
@@ -84,7 +84,7 @@
     "@tailwindcss/postcss": "^4.3.3",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
-    "@types/lodash": "^4.17.14",
+    "@types/lodash": "^4.17.26",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^6.1.2",
@@ -100,11 +100,11 @@
     "eslint-plugin-storybook": "^10.6.1",
     "formik": "^2.4.6",
     "globals": "^17.13.0",
-    "happy-dom": "^20.14.5",
+    "happy-dom": "^20.14.6",
     "highcharts": "^13.1.1",
     "lodash": "^4.18.1",
     "postcss": "^8.5.29",
-    "prettier": "^3.9.9",
+    "prettier": "^3.9.10",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "semver": "^7.8.5",
@@ -113,14 +113,14 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.71.1",
-    "vite": "^8.3.3",
+    "vite": "^8.3.4",
     "vite-plugin-dts": "^5.1.2",
     "vite-plugin-svgr": "^5.2.0",
     "vitest": "^5.0.3",
     "yup": "^1.4.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.64.0"
+    "@rollup/rollup-linux-x64-gnu": "^4.64.5"
   },
   "eslintConfig": {
     "extends": [