@j2-health/design-system 0.6.1 → 0.6.3

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/dist/src/components/swatch/Swatch.cjs

@@ -4,25 +4,30 @@ let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames, 1);
 //#region src/components/swatch/Swatch.tsx
 /**
-* A small color square for keys, legends and inline indicators.
+* A small color square for keys, legends and inline indicators. Other span
+* attributes land on the square, e.g. `role="img"` and an `aria-label` for
+* one shown on its own.
 */
-var Swatch = ({ color = "var(--j2-color-primary)", variant = "solid", tint, stroke, size = 16, radius = 4, className }) => {
-	const style = {
+var Swatch = ({ color = "var(--j2-color-primary)", variant = "solid", tint, stroke, size = 16, radius = 4, className, style, ...props }) => {
+	const box = {
+		...style,
 		width: size,
 		height: size,
 		borderRadius: radius
 	};
 	if (variant === "solid") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
 		className: (0, classnames.default)("block shrink-0", className),
 		style: {
-			...style,
+			...box,
 			background: color
 		}
 	});
 	if (variant === "hatched") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
 		className: (0, classnames.default)("block shrink-0 overflow-hidden border", className),
 		style: {
-			...style,
+			...box,
 			borderColor: color,
 			background: tint ?? `color-mix(in srgb, ${color} 10%, white)`
 		},
@@ -40,8 +45,9 @@ var Swatch = ({ color = "var(--j2-color-primary)", variant = "solid", tint, stro
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
 		className: (0, classnames.default)("block shrink-0 border border-j2-border bg-white", className),
-		style
+		style: box
 	});
 };
 //#endregion

package/dist/src/components/swatch/Swatch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Swatch.cjs","names":["cx"],"sources":["../../../../src/components/swatch/Swatch.tsx"],"sourcesContent":["import cx from 'classnames'\n\nexport type SwatchProps = {\n  /** Any CSS color, e.g. `'var(--j2-color-interval-7-7)'`. */\n  color?: string\n  /**\n   * - `'solid'`: filled with `color`.\n   * - `'hatched'`: a light fill, a `color` border and a diagonal stroke. For\n   *   a softer version of the same meaning as solid.\n   * - `'outline'`: an empty square with a neutral border. For \"none\".\n   */\n  variant?: 'solid' | 'hatched' | 'outline'\n  /** The hatched variant's light fill. Defaults to `color` at 10%. */\n  tint?: string\n  /** The hatched variant's stroke. Defaults to `color`. */\n  stroke?: string\n  /** Side in px. */\n  size?: number\n  /** Corner radius in px. */\n  radius?: number\n  className?: string\n}\n\n/**\n * A small color square for keys, legends and inline indicators.\n */\nexport const Swatch = ({\n  color = 'var(--j2-color-primary)',\n  variant = 'solid',\n  tint,\n  stroke,\n  size = 16,\n  radius = 4,\n  className,\n}: SwatchProps) => {\n  const style: React.CSSProperties = {\n    width: size,\n    height: size,\n    borderRadius: radius,\n  }\n\n  if (variant === 'solid') {\n    return (\n      <span\n        className={cx('block shrink-0', className)}\n        style={{ ...style, background: color }}\n      />\n    )\n  }\n\n  if (variant === 'hatched') {\n    return (\n      <span\n        className={cx('block shrink-0 overflow-hidden border', className)}\n        style={{\n          ...style,\n          borderColor: color,\n          background: tint ?? `color-mix(in srgb, ${color} 10%, white)`,\n        }}\n      >\n        <svg viewBox=\"0 0 16 16\" className=\"block h-full w-full\">\n          <line\n            x1=\"0\"\n            y1=\"16\"\n            x2=\"16\"\n            y2=\"0\"\n            stroke={stroke ?? color}\n            strokeWidth=\"1.5\"\n          />\n        </svg>\n      </span>\n    )\n  }\n\n  return (\n    <span\n      className={cx(\n        'block shrink-0 border border-j2-border bg-white',\n        className\n      )}\n      style={style}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AA0BA,IAAa,UAAU,EACrB,QAAQ,2BACR,UAAU,SACV,MACA,QACA,OAAO,IACP,SAAS,GACT,gBACiB;CACjB,MAAM,QAA6B;EACjC,OAAO;EACP,QAAQ;EACR,cAAc;CAChB;CAEA,IAAI,YAAY,SACd,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,YAAA,GAAWA,WAAAA,QAAAA,CAAG,kBAAkB,SAAS;EACzC,OAAO;GAAE,GAAG;GAAO,YAAY;EAAM;CACtC,CAAA;CAIL,IAAI,YAAY,WACd,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,YAAA,GAAWA,WAAAA,QAAAA,CAAG,yCAAyC,SAAS;EAChE,OAAO;GACL,GAAG;GACH,aAAa;GACb,YAAY,QAAQ,sBAAsB,MAAM;EAClD;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,SAAQ;GAAY,WAAU;GACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,IAAG;IACH,IAAG;IACH,IAAG;IACH,IAAG;IACH,QAAQ,UAAU;IAClB,aAAY;GACb,CAAA;EACE,CAAA;CACD,CAAA;CAIV,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,YAAA,GAAWA,WAAAA,QAAAA,CACT,mDACA,SACF;EACO;CACR,CAAA;AAEL"}
+{"version":3,"file":"Swatch.cjs","names":["cx"],"sources":["../../../../src/components/swatch/Swatch.tsx"],"sourcesContent":["import cx from 'classnames'\n\n/**\n * How a swatch looks. Other components take this for a nested `swatch` prop,\n * where span attributes would land on the wrong element.\n */\nexport type SwatchVisualProps = {\n  /** Any CSS color, e.g. `'var(--j2-color-interval-7-7)'`. */\n  color?: string\n  /**\n   * - `'solid'`: filled with `color`.\n   * - `'hatched'`: a light fill, a `color` border and a diagonal stroke. For\n   *   a softer version of the same meaning as solid.\n   * - `'outline'`: an empty square with a neutral border. For \"none\".\n   */\n  variant?: 'solid' | 'hatched' | 'outline'\n  /** The hatched variant's light fill. Defaults to `color` at 10%. */\n  tint?: string\n  /** The hatched variant's stroke. Defaults to `color`. */\n  stroke?: string\n  /** Side in px. */\n  size?: number\n  /** Corner radius in px. */\n  radius?: number\n  className?: string\n}\n\nexport type SwatchProps = SwatchVisualProps &\n  Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>\n\n/**\n * A small color square for keys, legends and inline indicators. Other span\n * attributes land on the square, e.g. `role=\"img\"` and an `aria-label` for\n * one shown on its own.\n */\nexport const Swatch = ({\n  color = 'var(--j2-color-primary)',\n  variant = 'solid',\n  tint,\n  stroke,\n  size = 16,\n  radius = 4,\n  className,\n  style,\n  ...props\n}: SwatchProps) => {\n  const box: React.CSSProperties = {\n    ...style,\n    width: size,\n    height: size,\n    borderRadius: radius,\n  }\n\n  if (variant === 'solid') {\n    return (\n      <span\n        {...props}\n        className={cx('block shrink-0', className)}\n        style={{ ...box, background: color }}\n      />\n    )\n  }\n\n  if (variant === 'hatched') {\n    return (\n      <span\n        {...props}\n        className={cx('block shrink-0 overflow-hidden border', className)}\n        style={{\n          ...box,\n          borderColor: color,\n          background: tint ?? `color-mix(in srgb, ${color} 10%, white)`,\n        }}\n      >\n        <svg viewBox=\"0 0 16 16\" className=\"block h-full w-full\">\n          <line\n            x1=\"0\"\n            y1=\"16\"\n            x2=\"16\"\n            y2=\"0\"\n            stroke={stroke ?? color}\n            strokeWidth=\"1.5\"\n          />\n        </svg>\n      </span>\n    )\n  }\n\n  return (\n    <span\n      {...props}\n      className={cx(\n        'block shrink-0 border border-j2-border bg-white',\n        className\n      )}\n      style={box}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;AAmCA,IAAa,UAAU,EACrB,QAAQ,2BACR,UAAU,SACV,MACA,QACA,OAAO,IACP,SAAS,GACT,WACA,OACA,GAAG,YACc;CACjB,MAAM,MAA2B;EAC/B,GAAG;EACH,OAAO;EACP,QAAQ;EACR,cAAc;CAChB;CAEA,IAAI,YAAY,SACd,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACJ,YAAA,GAAWA,WAAAA,QAAAA,CAAG,kBAAkB,SAAS;EACzC,OAAO;GAAE,GAAG;GAAK,YAAY;EAAM;CACpC,CAAA;CAIL,IAAI,YAAY,WACd,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACJ,YAAA,GAAWA,WAAAA,QAAAA,CAAG,yCAAyC,SAAS;EAChE,OAAO;GACL,GAAG;GACH,aAAa;GACb,YAAY,QAAQ,sBAAsB,MAAM;EAClD;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,SAAQ;GAAY,WAAU;GACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,IAAG;IACH,IAAG;IACH,IAAG;IACH,IAAG;IACH,QAAQ,UAAU;IAClB,aAAY;GACb,CAAA;EACE,CAAA;CACD,CAAA;CAIV,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACJ,YAAA,GAAWA,WAAAA,QAAAA,CACT,mDACA,SACF;EACA,OAAO;CACR,CAAA;AAEL"}

package/dist/src/components/swatch/Swatch.d.ts

@@ -1,4 +1,8 @@
-export type SwatchProps = {
+/**
+ * How a swatch looks. Other components take this for a nested `swatch` prop,
+ * where span attributes would land on the wrong element.
+ */
+export type SwatchVisualProps = {
     /** Any CSS color, e.g. `'var(--j2-color-interval-7-7)'`. */
     color?: string;
     /**
@@ -18,7 +22,10 @@ export type SwatchProps = {
     radius?: number;
     className?: string;
 };
+export type SwatchProps = SwatchVisualProps & Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>;
 /**
- * A small color square for keys, legends and inline indicators.
+ * A small color square for keys, legends and inline indicators. Other span
+ * attributes land on the square, e.g. `role="img"` and an `aria-label` for
+ * one shown on its own.
  */
-export declare const Swatch: ({ color, variant, tint, stroke, size, radius, className, }: SwatchProps) => import('react').JSX.Element;
+export declare const Swatch: ({ color, variant, tint, stroke, size, radius, className, style, ...props }: SwatchProps) => import('react').JSX.Element;

package/dist/src/components/swatch/Swatch.js

@@ -2,25 +2,30 @@ import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 //#region src/components/swatch/Swatch.tsx
 /**
-* A small color square for keys, legends and inline indicators.
+* A small color square for keys, legends and inline indicators. Other span
+* attributes land on the square, e.g. `role="img"` and an `aria-label` for
+* one shown on its own.
 */
-var Swatch = ({ color = "var(--j2-color-primary)", variant = "solid", tint, stroke, size = 16, radius = 4, className }) => {
-	const style = {
+var Swatch = ({ color = "var(--j2-color-primary)", variant = "solid", tint, stroke, size = 16, radius = 4, className, style, ...props }) => {
+	const box = {
+		...style,
 		width: size,
 		height: size,
 		borderRadius: radius
 	};
 	if (variant === "solid") return /* @__PURE__ */ jsx("span", {
+		...props,
 		className: cx("block shrink-0", className),
 		style: {
-			...style,
+			...box,
 			background: color
 		}
 	});
 	if (variant === "hatched") return /* @__PURE__ */ jsx("span", {
+		...props,
 		className: cx("block shrink-0 overflow-hidden border", className),
 		style: {
-			...style,
+			...box,
 			borderColor: color,
 			background: tint ?? `color-mix(in srgb, ${color} 10%, white)`
 		},
@@ -38,8 +43,9 @@ var Swatch = ({ color = "var(--j2-color-primary)", variant = "solid", tint, stro
 		})
 	});
 	return /* @__PURE__ */ jsx("span", {
+		...props,
 		className: cx("block shrink-0 border border-j2-border bg-white", className),
-		style
+		style: box
 	});
 };
 //#endregion

package/dist/src/components/swatch/Swatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swatch.js","names":[],"sources":["../../../../src/components/swatch/Swatch.tsx"],"sourcesContent":["import cx from 'classnames'\n\nexport type SwatchProps = {\n  /** Any CSS color, e.g. `'var(--j2-color-interval-7-7)'`. */\n  color?: string\n  /**\n   * - `'solid'`: filled with `color`.\n   * - `'hatched'`: a light fill, a `color` border and a diagonal stroke. For\n   *   a softer version of the same meaning as solid.\n   * - `'outline'`: an empty square with a neutral border. For \"none\".\n   */\n  variant?: 'solid' | 'hatched' | 'outline'\n  /** The hatched variant's light fill. Defaults to `color` at 10%. */\n  tint?: string\n  /** The hatched variant's stroke. Defaults to `color`. */\n  stroke?: string\n  /** Side in px. */\n  size?: number\n  /** Corner radius in px. */\n  radius?: number\n  className?: string\n}\n\n/**\n * A small color square for keys, legends and inline indicators.\n */\nexport const Swatch = ({\n  color = 'var(--j2-color-primary)',\n  variant = 'solid',\n  tint,\n  stroke,\n  size = 16,\n  radius = 4,\n  className,\n}: SwatchProps) => {\n  const style: React.CSSProperties = {\n    width: size,\n    height: size,\n    borderRadius: radius,\n  }\n\n  if (variant === 'solid') {\n    return (\n      <span\n        className={cx('block shrink-0', className)}\n        style={{ ...style, background: color }}\n      />\n    )\n  }\n\n  if (variant === 'hatched') {\n    return (\n      <span\n        className={cx('block shrink-0 overflow-hidden border', className)}\n        style={{\n          ...style,\n          borderColor: color,\n          background: tint ?? `color-mix(in srgb, ${color} 10%, white)`,\n        }}\n      >\n        <svg viewBox=\"0 0 16 16\" className=\"block h-full w-full\">\n          <line\n            x1=\"0\"\n            y1=\"16\"\n            x2=\"16\"\n            y2=\"0\"\n            stroke={stroke ?? color}\n            strokeWidth=\"1.5\"\n          />\n        </svg>\n      </span>\n    )\n  }\n\n  return (\n    <span\n      className={cx(\n        'block shrink-0 border border-j2-border bg-white',\n        className\n      )}\n      style={style}\n    />\n  )\n}\n"],"mappings":";;;;;;AA0BA,IAAa,UAAU,EACrB,QAAQ,2BACR,UAAU,SACV,MACA,QACA,OAAO,IACP,SAAS,GACT,gBACiB;CACjB,MAAM,QAA6B;EACjC,OAAO;EACP,QAAQ;EACR,cAAc;CAChB;CAEA,IAAI,YAAY,SACd,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,kBAAkB,SAAS;EACzC,OAAO;GAAE,GAAG;GAAO,YAAY;EAAM;CACtC,CAAA;CAIL,IAAI,YAAY,WACd,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,yCAAyC,SAAS;EAChE,OAAO;GACL,GAAG;GACH,aAAa;GACb,YAAY,QAAQ,sBAAsB,MAAM;EAClD;EAEA,UAAA,oBAAC,OAAD;GAAK,SAAQ;GAAY,WAAU;GACjC,UAAA,oBAAC,QAAD;IACE,IAAG;IACH,IAAG;IACH,IAAG;IACH,IAAG;IACH,QAAQ,UAAU;IAClB,aAAY;GACb,CAAA;EACE,CAAA;CACD,CAAA;CAIV,OACE,oBAAC,QAAD;EACE,WAAW,GACT,mDACA,SACF;EACO;CACR,CAAA;AAEL"}
+{"version":3,"file":"Swatch.js","names":[],"sources":["../../../../src/components/swatch/Swatch.tsx"],"sourcesContent":["import cx from 'classnames'\n\n/**\n * How a swatch looks. Other components take this for a nested `swatch` prop,\n * where span attributes would land on the wrong element.\n */\nexport type SwatchVisualProps = {\n  /** Any CSS color, e.g. `'var(--j2-color-interval-7-7)'`. */\n  color?: string\n  /**\n   * - `'solid'`: filled with `color`.\n   * - `'hatched'`: a light fill, a `color` border and a diagonal stroke. For\n   *   a softer version of the same meaning as solid.\n   * - `'outline'`: an empty square with a neutral border. For \"none\".\n   */\n  variant?: 'solid' | 'hatched' | 'outline'\n  /** The hatched variant's light fill. Defaults to `color` at 10%. */\n  tint?: string\n  /** The hatched variant's stroke. Defaults to `color`. */\n  stroke?: string\n  /** Side in px. */\n  size?: number\n  /** Corner radius in px. */\n  radius?: number\n  className?: string\n}\n\nexport type SwatchProps = SwatchVisualProps &\n  Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>\n\n/**\n * A small color square for keys, legends and inline indicators. Other span\n * attributes land on the square, e.g. `role=\"img\"` and an `aria-label` for\n * one shown on its own.\n */\nexport const Swatch = ({\n  color = 'var(--j2-color-primary)',\n  variant = 'solid',\n  tint,\n  stroke,\n  size = 16,\n  radius = 4,\n  className,\n  style,\n  ...props\n}: SwatchProps) => {\n  const box: React.CSSProperties = {\n    ...style,\n    width: size,\n    height: size,\n    borderRadius: radius,\n  }\n\n  if (variant === 'solid') {\n    return (\n      <span\n        {...props}\n        className={cx('block shrink-0', className)}\n        style={{ ...box, background: color }}\n      />\n    )\n  }\n\n  if (variant === 'hatched') {\n    return (\n      <span\n        {...props}\n        className={cx('block shrink-0 overflow-hidden border', className)}\n        style={{\n          ...box,\n          borderColor: color,\n          background: tint ?? `color-mix(in srgb, ${color} 10%, white)`,\n        }}\n      >\n        <svg viewBox=\"0 0 16 16\" className=\"block h-full w-full\">\n          <line\n            x1=\"0\"\n            y1=\"16\"\n            x2=\"16\"\n            y2=\"0\"\n            stroke={stroke ?? color}\n            strokeWidth=\"1.5\"\n          />\n        </svg>\n      </span>\n    )\n  }\n\n  return (\n    <span\n      {...props}\n      className={cx(\n        'block shrink-0 border border-j2-border bg-white',\n        className\n      )}\n      style={box}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAmCA,IAAa,UAAU,EACrB,QAAQ,2BACR,UAAU,SACV,MACA,QACA,OAAO,IACP,SAAS,GACT,WACA,OACA,GAAG,YACc;CACjB,MAAM,MAA2B;EAC/B,GAAG;EACH,OAAO;EACP,QAAQ;EACR,cAAc;CAChB;CAEA,IAAI,YAAY,SACd,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,WAAW,GAAG,kBAAkB,SAAS;EACzC,OAAO;GAAE,GAAG;GAAK,YAAY;EAAM;CACpC,CAAA;CAIL,IAAI,YAAY,WACd,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,WAAW,GAAG,yCAAyC,SAAS;EAChE,OAAO;GACL,GAAG;GACH,aAAa;GACb,YAAY,QAAQ,sBAAsB,MAAM;EAClD;EAEA,UAAA,oBAAC,OAAD;GAAK,SAAQ;GAAY,WAAU;GACjC,UAAA,oBAAC,QAAD;IACE,IAAG;IACH,IAAG;IACH,IAAG;IACH,IAAG;IACH,QAAQ,UAAU;IAClB,aAAY;GACb,CAAA;EACE,CAAA;CACD,CAAA;CAIV,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,WAAW,GACT,mDACA,SACF;EACA,OAAO;CACR,CAAA;AAEL"}

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

@@ -1 +1 @@
-export { Swatch, type SwatchProps } from './Swatch.js';
+export { Swatch, type SwatchProps, type SwatchVisualProps } from './Swatch.js';