react-wizard-engine 0.1.0

package/dist/shadcn/index.js

@@ -0,0 +1,270 @@
+"use client";
+
+// src/react/components-provider.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var FallbackButton = (props) => {
+  const { children, asChild: _asChild, variant: _variant, size: _size, ...rest } = props;
+  return /* @__PURE__ */ jsx("button", { ...rest, type: props.type ?? "button", children });
+};
+var FallbackBackArrowIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M10 4 L6 8 L10 12", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) });
+var defaults = { Button: FallbackButton, BackArrowIcon: FallbackBackArrowIcon };
+var WizardComponentsContext = createContext(defaults);
+function WizardComponentsProvider(props) {
+  const { Button, BackArrowIcon, children } = props;
+  const value = {
+    Button: Button ?? defaults.Button,
+    BackArrowIcon: BackArrowIcon ?? defaults.BackArrowIcon
+  };
+  return /* @__PURE__ */ jsx(WizardComponentsContext.Provider, { value, children });
+}
+function useWizardComponents() {
+  return useContext(WizardComponentsContext);
+}
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(...inputs));
+}
+
+// src/shadcn/default-back-arrow-icon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function defaultBackArrowIcon({ className, ...rest }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      className: cn(
+        "h-4 w-4 transition-transform duration-150 group-hover:-translate-x-0.5",
+        className
+      ),
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      viewBox: "0 0 16 16",
+      "aria-hidden": true,
+      ...rest,
+      children: /* @__PURE__ */ jsx2("path", { d: "M10 4 L6 8 L10 12" })
+    }
+  );
+}
+
+// src/shadcn/default-button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        ghost: "hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        "icon-sm": "h-8 w-8"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var defaultButton = forwardRef(function DefaultButton({ asChild, className, size, variant, type, ...rest }, ref) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx3(
+    Comp,
+    {
+      ref,
+      type: asChild ? void 0 : type ?? "button",
+      className: cn(buttonVariants({ size, variant }), className),
+      ...rest
+    }
+  );
+});
+
+// src/shadcn/components-provider-with-defaults.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function WizardComponentsProviderWithDefaults({ children }) {
+  return /* @__PURE__ */ jsx4(WizardComponentsProvider, { Button: defaultButton, BackArrowIcon: defaultBackArrowIcon, children });
+}
+
+// src/shadcn/wizard-layout.tsx
+import * as Dialog from "@radix-ui/react-dialog";
+import { useState } from "react";
+
+// src/shadcn/wizard-layout.context.ts
+import { createContext as createContext2 } from "react";
+var WizardLayoutContext = createContext2(null);
+
+// src/shadcn/wizard-layout.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+function WizardLayout(props) {
+  const { children, className, defaultRailTitle = "Wizard steps", rail, railTitle, ref, topBar } = props;
+  const [mobileSheetOpen, setMobileSheetOpen] = useState(false);
+  const closeMobileSheet = () => setMobileSheetOpen(false);
+  return /* @__PURE__ */ jsxs(WizardLayoutContext.Provider, { value: { mobileSheetOpen, setMobileSheetOpen }, children: [
+    /* @__PURE__ */ jsx5("div", { className: cn("flex h-full min-h-0 w-full flex-1 bg-sidebar", className), "data-slot": "wizard-layout-outer", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-1 overflow-hidden bg-background text-foreground shadow-sm ring-1 ring-foreground/10 md:rounded-xl",
+        "data-slot": "wizard-layout",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "aside",
+            {
+              className: "hidden w-[280px] shrink-0 flex-col gap-4 border-r border-border px-4 py-6 md:flex",
+              "data-slot": "wizard-layout-rail",
+              children: [
+                railTitle && /* @__PURE__ */ jsx5("div", { className: "px-3 text-base font-semibold text-foreground", children: railTitle }),
+                rail
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            topBar,
+            /* @__PURE__ */ jsx5(
+              "div",
+              {
+                className: "min-h-0 flex-1 overflow-y-auto px-4 py-6 sm:px-8",
+                "data-slot": "wizard-layout-scroll",
+                ref,
+                children
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx5(Dialog.Root, { onOpenChange: setMobileSheetOpen, open: mobileSheetOpen, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx5(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }),
+      /* @__PURE__ */ jsxs(
+        Dialog.Content,
+        {
+          "aria-describedby": void 0,
+          className: "fixed inset-y-0 left-0 z-50 flex w-3/4 max-w-sm flex-col gap-4 border-r border-border bg-background px-4 py-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+          children: [
+            /* @__PURE__ */ jsx5(Dialog.Title, { className: "px-3 text-base font-semibold", children: railTitle ?? defaultRailTitle }),
+            /* @__PURE__ */ jsx5("div", { onClickCapture: closeMobileSheet, children: rail })
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+
+// src/shadcn/wizard-top-bar.tsx
+import { MenuIcon, XIcon } from "lucide-react";
+import { useContext as useContext3 } from "react";
+
+// src/react/use-wizard.ts
+import { useContext as useContext2, useSyncExternalStore } from "react";
+
+// src/core/errors/wizard.error.ts
+var WizardError = class extends Error {
+  name = "WizardError";
+  constructor(message) {
+    super(message);
+    Object.setPrototypeOf(this, new.target.prototype);
+  }
+};
+
+// src/react/context.ts
+import { createContext as createContext3 } from "react";
+var WizardEngineContext = createContext3(null);
+
+// src/react/use-wizard.ts
+function useWizard() {
+  const engine = useContext2(WizardEngineContext);
+  if (!engine) {
+    throw new WizardError("useWizard must be used inside <WizardProvider>");
+  }
+  useSyncExternalStore(engine.subscribe, engine.getTreeSnapshot, engine.getTreeSnapshot);
+  return engine;
+}
+
+// src/shadcn/wizard-top-bar.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function WizardTopBar(props) {
+  const { backLabel, className, closeLabel, disabled, extraActions, finishLabel, menuLabel, nextLabel, onClose } = props;
+  const wizard = useWizard();
+  const layout = useContext3(WizardLayoutContext);
+  const { Button, BackArrowIcon } = useWizardComponents();
+  const config = wizard.configOptions;
+  const tree = wizard.tree;
+  const isFirstStep = tree.activeBranch.prevCategory == null && tree.activeCategory.prevStep == null;
+  const isLastStep = tree.activeBranch.nextCategory == null && tree.activeCategory.nextStep == null;
+  const resolvedBackLabel = backLabel ?? config.backBtnText;
+  const resolvedFinishLabel = finishLabel ?? config.finishText;
+  const resolvedNextLabel = nextLabel ?? config.nextBtnText;
+  const resolvedMenuLabel = menuLabel ?? "Open wizard steps";
+  const resolvedCloseLabel = closeLabel ?? "Close";
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn("flex h-14 items-center gap-3 border-b border-border bg-background px-4 sm:px-6", className),
+      "data-slot": "wizard-top-bar",
+      children: [
+        layout && /* @__PURE__ */ jsx6(
+          Button,
+          {
+            "aria-label": resolvedMenuLabel,
+            className: "md:hidden",
+            onClick: () => layout.setMobileSheetOpen(true),
+            size: "icon-sm",
+            type: "button",
+            variant: "ghost",
+            children: /* @__PURE__ */ jsx6(MenuIcon, {})
+          }
+        ),
+        !isFirstStep && /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            "aria-label": typeof resolvedBackLabel === "string" ? resolvedBackLabel : void 0,
+            className: "group inline-flex items-center gap-1 rounded-md py-1 pr-2.5 pl-3.5 text-sm font-normal text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground",
+            onClick: () => {
+              void wizard.back();
+            },
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsx6(BackArrowIcon, {}),
+              /* @__PURE__ */ jsx6("span", { children: resolvedBackLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 items-center justify-end gap-2", children: [
+          extraActions,
+          isLastStep ? /* @__PURE__ */ jsx6(Button, { disabled, type: "submit", variant: "default", children: resolvedFinishLabel }, "wizard-finish") : /* @__PURE__ */ jsx6(
+            Button,
+            {
+              disabled,
+              onClick: () => {
+                void wizard.next();
+              },
+              type: "button",
+              variant: "default",
+              children: resolvedNextLabel
+            },
+            "wizard-next"
+          ),
+          /* @__PURE__ */ jsx6(Button, { "aria-label": resolvedCloseLabel, onClick: onClose, size: "icon-sm", type: "button", variant: "ghost", children: /* @__PURE__ */ jsx6(XIcon, {}) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  WizardComponentsProviderWithDefaults,
+  WizardLayout,
+  WizardLayoutContext,
+  WizardTopBar,
+  defaultBackArrowIcon,
+  defaultButton
+};
+//# sourceMappingURL=index.js.map

package/dist/shadcn/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/components-provider.tsx","../../src/utils/cn.ts","../../src/shadcn/default-back-arrow-icon.tsx","../../src/shadcn/default-button.tsx","../../src/shadcn/components-provider-with-defaults.tsx","../../src/shadcn/wizard-layout.tsx","../../src/shadcn/wizard-layout.context.ts","../../src/shadcn/wizard-top-bar.tsx","../../src/react/use-wizard.ts","../../src/core/errors/wizard.error.ts","../../src/react/context.ts"],"sourcesContent":["'use client';\n\nimport { type ComponentType, createContext, type ReactNode, useContext } from 'react';\n\nexport interface IWizardButtonProps {\n\tasChild?: boolean;\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tdisabled?: boolean;\n\tonClick?: () => void;\n\ttype?: 'button' | 'submit';\n\tvariant?: 'default' | 'ghost';\n\tsize?: 'default' | 'icon-sm';\n\t'aria-label'?: string;\n}\n\nexport interface IWizardBackArrowIconProps {\n\tclassName?: string;\n}\n\nexport interface IWizardComponents {\n\tButton: ComponentType<IWizardButtonProps>;\n\tBackArrowIcon: ComponentType<IWizardBackArrowIconProps>;\n}\n\nconst FallbackButton: ComponentType<IWizardButtonProps> = (props) => {\n\tconst { children, asChild: _asChild, variant: _variant, size: _size, ...rest } = props;\n\treturn (\n\t\t<button {...rest} type={props.type ?? 'button'}>\n\t\t\t{children}\n\t\t</button>\n\t);\n};\n\nconst FallbackBackArrowIcon: ComponentType<IWizardBackArrowIconProps> = ({ className }) => (\n\t<svg className={className} width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden>\n\t\t<path d=\"M10 4 L6 8 L10 12\" stroke=\"currentColor\" strokeWidth=\"1.5\" fill=\"none\" />\n\t</svg>\n);\n\nconst defaults: IWizardComponents = { Button: FallbackButton, BackArrowIcon: FallbackBackArrowIcon };\n\nconst WizardComponentsContext = createContext<IWizardComponents>(defaults);\n\nexport function WizardComponentsProvider(props: {\n\tButton?: ComponentType<IWizardButtonProps>;\n\tBackArrowIcon?: ComponentType<IWizardBackArrowIconProps>;\n\tchildren: ReactNode;\n}) {\n\tconst { Button, BackArrowIcon, children } = props;\n\tconst value: IWizardComponents = {\n\t\tButton: Button ?? defaults.Button,\n\t\tBackArrowIcon: BackArrowIcon ?? defaults.BackArrowIcon,\n\t};\n\treturn <WizardComponentsContext.Provider value={value}>{children}</WizardComponentsContext.Provider>;\n}\n\nexport function useWizardComponents(): IWizardComponents {\n\treturn useContext(WizardComponentsContext);\n}\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(...inputs));\n}\n","'use client';\n\nimport { type ComponentProps } from 'react';\n\nimport { cn } from '~/utils/cn';\n\n/** Animated back-arrow icon. The arrow translates -2px on the parent's group-hover. */\nexport function defaultBackArrowIcon({ className, ...rest }: ComponentProps<'svg'>) {\n\treturn (\n\t\t<svg\n\t\t\tclassName={cn(\n\t\t\t\t'h-4 w-4 transition-transform duration-150 group-hover:-translate-x-0.5',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth={1.75}\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\taria-hidden\n\t\t\t{...rest}\n\t\t>\n\t\t\t<path d=\"M10 4 L6 8 L10 12\" />\n\t\t</svg>\n\t);\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { cn } from '~/utils/cn';\nimport { type IWizardButtonProps } from '../react/components-provider';\n\nconst buttonVariants = cva(\n\t'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: 'bg-primary text-primary-foreground hover:bg-primary/90',\n\t\t\t\tghost: 'hover:bg-accent hover:text-accent-foreground',\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: 'h-9 px-4 py-2',\n\t\t\t\t'icon-sm': 'h-8 w-8',\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: 'default',\n\t\t\tsize: 'default',\n\t\t},\n\t}\n);\n\ntype InternalProps = Omit<IWizardButtonProps, 'size' | 'variant'> &\n\tVariantProps<typeof buttonVariants> & {\n\t\tchildren?: ReactNode;\n\t};\n\nexport const defaultButton = forwardRef<HTMLButtonElement, InternalProps>(function DefaultButton(\n\t{ asChild, className, size, variant, type, ...rest },\n\tref\n) {\n\tconst Comp: any = asChild ? Slot : 'button';\n\treturn (\n\t\t<Comp\n\t\t\tref={ref}\n\t\t\ttype={asChild ? undefined : (type ?? 'button')}\n\t\t\tclassName={cn(buttonVariants({ size, variant }), className)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n","'use client';\n\nimport { type ReactNode } from 'react';\n\nimport { WizardComponentsProvider } from '../react/components-provider';\nimport { defaultBackArrowIcon } from './default-back-arrow-icon';\nimport { defaultButton } from './default-button';\n\n/**\n * Convenience wrapper around `WizardComponentsProvider` that wires in the\n * package-shipped `defaultButton` and `defaultBackArrowIcon`. Use this if\n * you want the styled adapter out of the box; use `WizardComponentsProvider`\n * directly if you want to pass your own.\n */\nexport function WizardComponentsProviderWithDefaults({ children }: { children: ReactNode }) {\n\treturn (\n\t\t<WizardComponentsProvider Button={defaultButton} BackArrowIcon={defaultBackArrowIcon}>\n\t\t\t{children}\n\t\t</WizardComponentsProvider>\n\t);\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { type ReactNode, type Ref, useState } from 'react';\n\nimport { cn } from '~/utils/cn';\nimport { WizardLayoutContext } from './wizard-layout.context';\n\ninterface IWizardLayoutProps {\n\tchildren: ReactNode;\n\tclassName?: string;\n\tdefaultRailTitle?: string;\n\trail: ReactNode;\n\trailTitle?: ReactNode;\n\tref?: Ref<HTMLDivElement>;\n\ttopBar: ReactNode;\n}\n\n/**\n * Full-page wizard shell. Renders a top bar across the right column on\n * desktop, a vertical rail on the left, and a scrollable content area for\n * the active step. Below the `md` breakpoint the rail collapses into a\n * left-side dialog whose open state is exposed via `WizardLayoutContext`\n * so the top bar's hamburger button can drive it.\n */\nexport function WizardLayout(props: IWizardLayoutProps) {\n\tconst { children, className, defaultRailTitle = 'Wizard steps', rail, railTitle, ref, topBar } = props;\n\tconst [mobileSheetOpen, setMobileSheetOpen] = useState(false);\n\n\tconst closeMobileSheet = () => setMobileSheetOpen(false);\n\n\treturn (\n\t\t<WizardLayoutContext.Provider value={{ mobileSheetOpen, setMobileSheetOpen }}>\n\t\t\t<div className={cn('flex h-full min-h-0 w-full flex-1 bg-sidebar', className)} data-slot=\"wizard-layout-outer\">\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"flex flex-1 overflow-hidden bg-background text-foreground shadow-sm ring-1 ring-foreground/10 md:rounded-xl\"\n\t\t\t\t\tdata-slot=\"wizard-layout\"\n\t\t\t\t>\n\t\t\t\t\t<aside\n\t\t\t\t\t\tclassName=\"hidden w-[280px] shrink-0 flex-col gap-4 border-r border-border px-4 py-6 md:flex\"\n\t\t\t\t\t\tdata-slot=\"wizard-layout-rail\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{railTitle && <div className=\"px-3 text-base font-semibold text-foreground\">{railTitle}</div>}\n\t\t\t\t\t\t{rail}\n\t\t\t\t\t</aside>\n\n\t\t\t\t\t<div className=\"flex min-w-0 flex-1 flex-col\">\n\t\t\t\t\t\t{topBar}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"min-h-0 flex-1 overflow-y-auto px-4 py-6 sm:px-8\"\n\t\t\t\t\t\t\tdata-slot=\"wizard-layout-scroll\"\n\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<Dialog.Root onOpenChange={setMobileSheetOpen} open={mobileSheetOpen}>\n\t\t\t\t<Dialog.Portal>\n\t\t\t\t\t<Dialog.Overlay className=\"fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\" />\n\t\t\t\t\t<Dialog.Content\n\t\t\t\t\t\taria-describedby={undefined}\n\t\t\t\t\t\tclassName=\"fixed inset-y-0 left-0 z-50 flex w-3/4 max-w-sm flex-col gap-4 border-r border-border bg-background px-4 py-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Dialog.Title className=\"px-3 text-base font-semibold\">{railTitle ?? defaultRailTitle}</Dialog.Title>\n\t\t\t\t\t\t<div onClickCapture={closeMobileSheet}>{rail}</div>\n\t\t\t\t\t</Dialog.Content>\n\t\t\t\t</Dialog.Portal>\n\t\t\t</Dialog.Root>\n\t\t</WizardLayoutContext.Provider>\n\t);\n}\n","'use client';\n\nimport { createContext } from 'react';\n\nexport interface IWizardLayoutContextValue {\n\tmobileSheetOpen: boolean;\n\tsetMobileSheetOpen: (open: boolean) => void;\n}\n\n/**\n * Communicates the rail's mobile-Sheet open state from `WizardLayout` to\n * `WizardTopBar`. Null outside a layout — consumers (top bar's hamburger\n * button) silently no-op when context is missing, so the top bar stays usable\n * outside `WizardLayout`.\n */\nexport const WizardLayoutContext = createContext<IWizardLayoutContextValue | null>(null);\n","'use client';\n\nimport { MenuIcon, XIcon } from 'lucide-react';\nimport { type ReactNode, useContext } from 'react';\n\nimport { useWizardComponents } from '../react/components-provider';\nimport { useWizard } from '../react/use-wizard';\nimport { cn } from '~/utils/cn';\nimport { WizardLayoutContext } from './wizard-layout.context';\n\ninterface IWizardTopBarProps {\n\tbackLabel?: ReactNode;\n\tclassName?: string;\n\tcloseLabel?: string;\n\tdisabled?: boolean;\n\textraActions?: ReactNode;\n\tfinishLabel?: ReactNode;\n\tmenuLabel?: string;\n\tnextLabel?: ReactNode;\n\tonClose: () => void;\n}\n\n/**\n * Header bar for full-page wizard layouts. Renders Back / primary action /\n * extras / close X. Reads `useWizard` for first/last-step detection. The\n * primary action is `type=\"submit\"` on the last step (lets the parent form\n * own submission) and dispatches `wizard.next()` otherwise. Hamburger only\n * surfaces when wrapped by a `WizardLayout`.\n */\nexport function WizardTopBar(props: IWizardTopBarProps) {\n\tconst { backLabel, className, closeLabel, disabled, extraActions, finishLabel, menuLabel, nextLabel, onClose } =\n\t\tprops;\n\tconst wizard = useWizard();\n\tconst layout = useContext(WizardLayoutContext);\n\tconst { Button, BackArrowIcon } = useWizardComponents();\n\n\tconst config = wizard.configOptions;\n\tconst tree = wizard.tree;\n\tconst isFirstStep = tree.activeBranch.prevCategory == null && tree.activeCategory.prevStep == null;\n\tconst isLastStep = tree.activeBranch.nextCategory == null && tree.activeCategory.nextStep == null;\n\n\tconst resolvedBackLabel = backLabel ?? config.backBtnText;\n\tconst resolvedFinishLabel = finishLabel ?? config.finishText;\n\tconst resolvedNextLabel = nextLabel ?? config.nextBtnText;\n\tconst resolvedMenuLabel = menuLabel ?? 'Open wizard steps';\n\tconst resolvedCloseLabel = closeLabel ?? 'Close';\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn('flex h-14 items-center gap-3 border-b border-border bg-background px-4 sm:px-6', className)}\n\t\t\tdata-slot=\"wizard-top-bar\"\n\t\t>\n\t\t\t{layout && (\n\t\t\t\t<Button\n\t\t\t\t\taria-label={resolvedMenuLabel}\n\t\t\t\t\tclassName=\"md:hidden\"\n\t\t\t\t\tonClick={() => layout.setMobileSheetOpen(true)}\n\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t>\n\t\t\t\t\t<MenuIcon />\n\t\t\t\t</Button>\n\t\t\t)}\n\n\t\t\t{!isFirstStep && (\n\t\t\t\t<button\n\t\t\t\t\taria-label={typeof resolvedBackLabel === 'string' ? resolvedBackLabel : undefined}\n\t\t\t\t\tclassName=\"group inline-flex items-center gap-1 rounded-md py-1 pr-2.5 pl-3.5 text-sm font-normal text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tvoid wizard.back();\n\t\t\t\t\t}}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t>\n\t\t\t\t\t<BackArrowIcon />\n\t\t\t\t\t<span>{resolvedBackLabel}</span>\n\t\t\t\t</button>\n\t\t\t)}\n\n\t\t\t<div className=\"flex flex-1 items-center justify-end gap-2\">\n\t\t\t\t{extraActions}\n\t\t\t\t{isLastStep ? (\n\t\t\t\t\t<Button disabled={disabled} key=\"wizard-finish\" type=\"submit\" variant=\"default\">\n\t\t\t\t\t\t{resolvedFinishLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t) : (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tkey=\"wizard-next\"\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tvoid wizard.next();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{resolvedNextLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t\t<Button aria-label={resolvedCloseLabel} onClick={onClose} size=\"icon-sm\" type=\"button\" variant=\"ghost\">\n\t\t\t\t\t<XIcon />\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n","'use client';\n\nimport { useContext, useSyncExternalStore } from 'react';\n\nimport type { WizardEngine } from '../core/wizard-engine';\n\nimport { WizardError } from '../core/errors';\nimport { WizardEngineContext } from './context';\n\n/**\n * Returns the active `WizardEngine` instance and re-renders the consumer on\n * every tree change. Throws if used outside a `<WizardProvider>`.\n *\n * Engine identity is stable across renders.\n */\nexport function useWizard<Step extends string, Category extends string, Branch extends string = string>(): WizardEngine<\n\tStep,\n\tCategory,\n\tBranch\n> {\n\tconst engine = useContext(WizardEngineContext) as null | WizardEngine<Step, Category, Branch>;\n\tif (!engine) {\n\t\tthrow new WizardError('useWizard must be used inside <WizardProvider>');\n\t}\n\tuseSyncExternalStore(engine.subscribe, engine.getTreeSnapshot, engine.getTreeSnapshot);\n\treturn engine;\n}\n","export class WizardError extends Error {\n\tpublic override readonly name: string = 'WizardError';\n\n\tconstructor(message?: string) {\n\t\tsuper(message);\n\t\tObject.setPrototypeOf(this, new.target.prototype);\n\t}\n}\n\nexport class WizardInitializationError extends WizardError {\n\tpublic override readonly name: string = 'WizardInitializationError';\n}\n\nexport class WizardNavigationError extends WizardError {\n\tpublic override readonly name: string = 'WizardNavigationError';\n}\n\nexport class WizardResolverError extends WizardError {\n\tpublic override readonly name: string = 'WizardResolverError';\n}\n","'use client';\n\nimport { createContext } from 'react';\n\nimport type { WizardEngine } from '../core/wizard-engine';\n\n/**\n * React context exposing the active `WizardEngine` instance to descendants.\n * `null` outside a `<WizardProvider>` — `useWizard()` throws a clear error.\n */\nexport const WizardEngineContext = createContext<null | WizardEngine<string, string, string>>(null);\n"],"mappings":"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","names":["jsx","jsx","jsx","createContext","jsx","useContext","useContext","createContext","useContext","jsx","jsxs","useContext"]}

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "react-wizard-engine",
+  "version": "0.1.0",
+  "license": "MIT",
+  "description": "Multi-step flow engine for React: steps, categories, branches, pluggable strategies, async navigation with cancellation.",
+  "keywords": [
+    "react",
+    "wizard",
+    "stepper",
+    "multi-step",
+    "form",
+    "flow",
+    "headless"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/knazark/react-wizard-engine.git"
+  },
+  "bugs": "https://github.com/knazark/react-wizard-engine/issues",
+  "homepage": "https://github.com/knazark/react-wizard-engine#readme",
+  "author": "Nazarii Kovtun",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./shadcn": {
+      "types": "./dist/shadcn/index.d.ts",
+      "import": "./dist/shadcn/index.js",
+      "require": "./dist/shadcn/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "release": "changeset publish",
+    "prepublishOnly": "pnpm build"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.0"
+  },
+  "peerDependencies": {
+    "@radix-ui/react-dialog": ">=1",
+    "@radix-ui/react-slot": ">=1",
+    "lucide-react": ">=0.400.0",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "@radix-ui/react-dialog": {
+      "optional": true
+    },
+    "@radix-ui/react-slot": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.9",
+    "@eslint/js": "^9.18.0",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.18.0",
+    "happy-dom": "^16.5.3",
+    "lucide-react": "^0.469.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0",
+    "vitest": "^2.1.8"
+  },
+  "packageManager": "pnpm@10.32.1",
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}