@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

package/dist/cjs/components/shared/footers/WizardFooter.d.cts

@@ -0,0 +1,12 @@
+import { BaseFooterProps } from "../types/footer.cjs";
+
+//#region src/components/shared/footers/WizardFooter.d.ts
+declare function WizardFooter<T = any>({
+  actionButtons,
+  className,
+  isSubmitting,
+  onClose
+}: Pick<BaseFooterProps<T>, "actionButtons" | "className" | "isSubmitting" | "onClose">): any;
+//#endregion
+export { WizardFooter };
+//# sourceMappingURL=WizardFooter.d.cts.map

package/dist/cjs/components/shared/footers/index.cjs

@@ -0,0 +1,30 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_components_shared_footers_ActionsFooter = require('./ActionsFooter.cjs');
+const require_components_shared_footers_DefaultFooter = require('./DefaultFooter.cjs');
+const require_components_shared_footers_FormFooter = require('./FormFooter.cjs');
+const require_components_shared_footers_StepFormFooter = require('./StepFormFooter.cjs');
+const require_components_shared_footers_WizardFooter = require('./WizardFooter.cjs');
+
+//#region src/components/shared/footers/index.ts
+var init_footers = require_rolldown_runtime.__esmMin((() => {
+	init_ActionsFooter();
+	init_DefaultFooter();
+	init_FormFooter();
+	init_StepFormFooter();
+	init_WizardFooter();
+}));
+
+//#endregion
+init_footers();
+exports.ActionsFooter = require_components_shared_footers_ActionsFooter.ActionsFooter;
+exports.DefaultFooter = require_components_shared_footers_DefaultFooter.DefaultFooter;
+exports.FormFooter = require_components_shared_footers_FormFooter.FormFooter;
+exports.StepFormFooter = require_components_shared_footers_StepFormFooter.StepFormFooter;
+exports.WizardFooter = require_components_shared_footers_WizardFooter.WizardFooter;
+Object.defineProperty(exports, 'init_footers', {
+  enumerable: true,
+  get: function () {
+    return init_footers;
+  }
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/shared/footers/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../../../src/components/shared/footers/index.ts"],"sourcesContent":["export * from \"./ActionsFooter\";\nexport * from \"./DefaultFooter\";\nexport * from \"./FormFooter\";\nexport * from \"./StepFormFooter\";\nexport * from \"./WizardFooter\";\n"],"mappings":""}

package/dist/cjs/components/shared/footers/index.d.cts

@@ -0,0 +1,6 @@
+import { ActionsFooter } from "./ActionsFooter.cjs";
+import { DefaultFooter } from "./DefaultFooter.cjs";
+import { FormFooter } from "./FormFooter.cjs";
+import { StepFormFooter } from "./StepFormFooter.cjs";
+import { WizardFooter } from "./WizardFooter.cjs";
+export { ActionsFooter, DefaultFooter, FormFooter, StepFormFooter, WizardFooter };

package/dist/cjs/components/shared/headers/DefaultHeader.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_components_actions_ActionListRenderer = require('../../actions/ActionListRenderer.cjs');
+const require_components_actions_index = require('../../actions/index.cjs');
+let _lumeweb_portal_framework_ui_core = require("@lumeweb/portal-framework-ui-core");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/shared/headers/DefaultHeader.tsx
+function DefaultHeader({ actionButtons, className, description, environment, title }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _lumeweb_portal_framework_ui_core.cn)("space-y-2", className),
+		children: [(title || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-1",
+			children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "text-lg font-semibold leading-none tracking-tight",
+				children: title
+			}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-muted-foreground text-sm",
+				children: description
+			})]
+		}), actionButtons && actionButtons.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_actions_ActionListRenderer.ActionListRenderer, {
+			actions: actionButtons,
+			className: "flex justify-end gap-2",
+			layout: "horizontal"
+		})]
+	});
+}
+var init_DefaultHeader = require_rolldown_runtime.__esmMin((() => {
+	require_components_actions_index.init_actions();
+}));
+
+//#endregion
+init_DefaultHeader();
+exports.DefaultHeader = DefaultHeader;
+Object.defineProperty(exports, 'init_DefaultHeader', {
+  enumerable: true,
+  get: function () {
+    return init_DefaultHeader;
+  }
+});
+//# sourceMappingURL=DefaultHeader.cjs.map

package/dist/cjs/components/shared/headers/DefaultHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultHeader.cjs","names":["ActionListRenderer"],"sources":["../../../../../src/components/shared/headers/DefaultHeader.tsx"],"sourcesContent":["import { cn } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport { ActionListRenderer } from \"../../actions\";\nimport { BaseHeaderProps } from \"../types/header\";\n\nexport function DefaultHeader<T = any>({\n  actionButtons,\n  className,\n  description,\n  environment,\n  title,\n}: BaseHeaderProps<T>) {\n  return (\n    <div className={cn(\"space-y-2\", className)}>\n      {(title || description) && (\n        <div className=\"space-y-1\">\n          {title && (\n            <h2 className=\"text-lg font-semibold leading-none tracking-tight\">\n              {title}\n            </h2>\n          )}\n          {description && (\n            <p className=\"text-muted-foreground text-sm\">{description}</p>\n          )}\n        </div>\n      )}\n      {actionButtons && actionButtons.length > 0 && (\n        <ActionListRenderer\n          actions={actionButtons}\n          className=\"flex justify-end gap-2\"\n          layout=\"horizontal\"\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAMA,SAAgB,cAAuB,EACrC,eACA,WACA,aACA,aACA,SACqB;AACrB,QACE,4CAAC;EAAI,qDAAc,aAAa,UAAU;cACtC,SAAS,gBACT,4CAAC;GAAI,WAAU;cACZ,SACC,2CAAC;IAAG,WAAU;cACX;KACE,EAEN,eACC,2CAAC;IAAE,WAAU;cAAiC;KAAgB;IAE5D,EAEP,iBAAiB,cAAc,SAAS,KACvC,2CAACA;GACC,SAAS;GACT,WAAU;GACV,QAAO;IACP;GAEA;;;gDA/ByC"}

package/dist/cjs/components/shared/headers/DefaultHeader.d.cts

@@ -0,0 +1,13 @@
+import { BaseHeaderProps } from "../types/header.cjs";
+
+//#region src/components/shared/headers/DefaultHeader.d.ts
+declare function DefaultHeader<T = any>({
+  actionButtons,
+  className,
+  description,
+  environment,
+  title
+}: BaseHeaderProps<T>): any;
+//#endregion
+export { DefaultHeader };
+//# sourceMappingURL=DefaultHeader.d.cts.map

package/dist/cjs/components/shared/headers/FormHeader.cjs

@@ -0,0 +1,43 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_components_actions_ActionListRenderer = require('../../actions/ActionListRenderer.cjs');
+const require_components_actions_index = require('../../actions/index.cjs');
+let _lumeweb_portal_framework_ui_core = require("@lumeweb/portal-framework-ui-core");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/shared/headers/FormHeader.tsx
+function FormHeader({ actionButtons, className, description, title }) {
+	if (!title && !description && (!actionButtons || actionButtons.length === 0)) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _lumeweb_portal_framework_ui_core.cn)("space-y-4", className),
+		children: [(title || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-2",
+			children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "text-xl font-semibold leading-none tracking-tight",
+				children: title
+			}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-muted-foreground text-sm",
+				children: description
+			})]
+		}), actionButtons && actionButtons.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_actions_ActionListRenderer.ActionListRenderer, {
+			actions: actionButtons,
+			className: "flex justify-end gap-2",
+			layout: "horizontal"
+		})]
+	});
+}
+var init_FormHeader = require_rolldown_runtime.__esmMin((() => {
+	require_components_actions_index.init_actions();
+}));
+
+//#endregion
+init_FormHeader();
+exports.FormHeader = FormHeader;
+Object.defineProperty(exports, 'init_FormHeader', {
+  enumerable: true,
+  get: function () {
+    return init_FormHeader;
+  }
+});
+//# sourceMappingURL=FormHeader.cjs.map

package/dist/cjs/components/shared/headers/FormHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHeader.cjs","names":["ActionListRenderer"],"sources":["../../../../../src/components/shared/headers/FormHeader.tsx"],"sourcesContent":["import { cn } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport { ActionListRenderer } from \"../../actions\";\nimport { BaseHeaderProps } from \"../types/header\";\n\nexport function FormHeader<T = any>({\n  actionButtons,\n  className,\n  description,\n  title,\n}: BaseHeaderProps<T>) {\n  // Return null if all content fields are not passed\n  if (\n    !title &&\n    !description &&\n    (!actionButtons || actionButtons.length === 0)\n  ) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"space-y-4\", className)}>\n      {(title || description) && (\n        <div className=\"space-y-2\">\n          {title && (\n            <h2 className=\"text-xl font-semibold leading-none tracking-tight\">\n              {title}\n            </h2>\n          )}\n          {description && (\n            <p className=\"text-muted-foreground text-sm\">{description}</p>\n          )}\n        </div>\n      )}\n      {actionButtons && actionButtons.length > 0 && (\n        <ActionListRenderer\n          actions={actionButtons}\n          className=\"flex justify-end gap-2\"\n          layout=\"horizontal\"\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAMA,SAAgB,WAAoB,EAClC,eACA,WACA,aACA,SACqB;AAErB,KACE,CAAC,SACD,CAAC,gBACA,CAAC,iBAAiB,cAAc,WAAW,GAE5C,QAAO;AAGT,QACE,4CAAC;EAAI,qDAAc,aAAa,UAAU;cACtC,SAAS,gBACT,4CAAC;GAAI,WAAU;cACZ,SACC,2CAAC;IAAG,WAAU;cACX;KACE,EAEN,eACC,2CAAC;IAAE,WAAU;cAAiC;KAAgB;IAE5D,EAEP,iBAAiB,cAAc,SAAS,KACvC,2CAACA;GACC,SAAS;GACT,WAAU;GACV,QAAO;IACP;GAEA;;;gDAvCyC"}

package/dist/cjs/components/shared/headers/FormHeader.d.cts

@@ -0,0 +1,12 @@
+import { BaseHeaderProps } from "../types/header.cjs";
+
+//#region src/components/shared/headers/FormHeader.d.ts
+declare function FormHeader<T = any>({
+  actionButtons,
+  className,
+  description,
+  title
+}: BaseHeaderProps<T>): any;
+//#endregion
+export { FormHeader };
+//# sourceMappingURL=FormHeader.d.cts.map

package/dist/cjs/components/shared/headers/WizardHeader.cjs

@@ -0,0 +1,131 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_components_shared_utils_stepState = require('../utils/stepState.cjs');
+const require_components_sizing_index = require('../../sizing/index.cjs');
+const require_components_shared_context_HeaderContext = require('../context/HeaderContext.cjs');
+const require_components_shared_types_header = require('../types/header.cjs');
+let _lumeweb_portal_framework_ui_core = require("@lumeweb/portal-framework-ui-core");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_is = require("react-is");
+let lucide_react = require("lucide-react");
+
+//#region src/components/shared/headers/WizardHeader.tsx
+function WizardHeader({ className }) {
+	const context = require_components_shared_context_HeaderContext.useHeaderContext();
+	if (!require_components_shared_types_header.isWizardNavigation(context.navigation)) {
+		console.warn("WizardHeader rendered without wizard navigation context");
+		return null;
+	}
+	const { allowNavigation, current, descriptionMaxWidth = "xs", disabledSteps = [], iconSize = "sm", onStepClick, showStepDescriptions = true, showStepTitles = true, steps = [], total } = context.navigation;
+	const resolvedAllowNavigation = (0, react.useMemo)(() => {
+		if (typeof allowNavigation === "function") return allowNavigation();
+		return allowNavigation;
+	}, [allowNavigation]);
+	const renderMobileProgressBars = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "mb-6 w-full px-4 md:hidden",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "bg-muted flex h-1 w-full overflow-hidden rounded-full",
+			children: Array.from({ length: total }, (_, index) => {
+				const stepState = require_components_shared_utils_stepState.calculateStepState(index, current, total, resolvedAllowNavigation, disabledSteps, steps);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, _lumeweb_portal_framework_ui_core.cn)("h-full flex-1 transition-all duration-300", {
+						"bg-accent": stepState.isCompleted,
+						"bg-muted": !stepState.isCompleted && !stepState.isActive,
+						"bg-primary": stepState.isActive && !stepState.isCompleted,
+						"cursor-pointer": stepState.canNavigate
+					}),
+					onClick: stepState.canNavigate ? require_components_shared_utils_stepState.createStepClickHandler(index, resolvedAllowNavigation, disabledSteps, current, onStepClick) : void 0,
+					onKeyDown: stepState.canNavigate ? require_components_shared_utils_stepState.createStepKeyHandler(index, resolvedAllowNavigation, disabledSteps, current, onStepClick) : void 0,
+					role: stepState.canNavigate ? "button" : void 0,
+					tabIndex: stepState.canNavigate ? 0 : -1
+				}, index);
+			})
+		}), steps[current] && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mt-4 text-center",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-2 flex items-center justify-center gap-2",
+				children: [renderIcon(steps[current].icon, iconSize) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-center",
+					children: renderIcon(steps[current].icon, iconSize)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-primary text-sm font-medium",
+					children: steps[current].shortTitle || steps[current].title || `Step ${current}`
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "text-muted-foreground text-xs",
+				children: [
+					"Step ",
+					current,
+					" of ",
+					total
+				]
+			})]
+		})]
+	});
+	const renderDesktopTimeline = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "mb-6 hidden items-center justify-center gap-4 px-4 md:flex",
+		children: Array.from({ length: total }, (_, index) => {
+			const stepState = require_components_shared_utils_stepState.calculateStepState(index, current, total, resolvedAllowNavigation, disabledSteps, steps);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col items-center justify-center",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"aria-current": stepState.isActive ? "step" : void 0,
+							"aria-disabled": stepState.isDisabled,
+							className: `flex h-10 w-10 items-center justify-center rounded-full transition-all duration-200 ${stepState.isCompleted ? "bg-accent text-white" : stepState.isActive ? "bg-primary text-primary-foreground ring-primary/20 ring-4" : "bg-muted text-muted-foreground"} ${stepState.canNavigate ? "cursor-pointer hover:scale-110 hover:shadow-lg" : ""}`,
+							onClick: stepState.canNavigate ? require_components_shared_utils_stepState.createStepClickHandler(index, resolvedAllowNavigation, disabledSteps, current, onStepClick) : void 0,
+							onKeyDown: stepState.canNavigate ? require_components_shared_utils_stepState.createStepKeyHandler(index, resolvedAllowNavigation, disabledSteps, current, onStepClick) : void 0,
+							role: stepState.canNavigate ? "button" : void 0,
+							tabIndex: stepState.canNavigate ? 0 : -1,
+							children: stepState.isCompleted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-5 w-5" }) : renderIcon(stepState.step.icon, "md") || /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-5 w-5" })
+						}),
+						showStepTitles && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `mt-3 text-center text-sm font-medium ${stepState.isActive ? "text-primary" : stepState.isCompleted ? "text-accent-foreground" : "text-muted-foreground"} ${stepState.canNavigate ? "cursor-pointer" : ""}`,
+							onClick: stepState.canNavigate ? require_components_shared_utils_stepState.createStepClickHandler(index, resolvedAllowNavigation, disabledSteps, current, onStepClick) : void 0,
+							children: stepState.step.shortTitle || stepState.step.title
+						}),
+						showStepDescriptions && stepState.step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: (0, _lumeweb_portal_framework_ui_core.cn)("text-muted-foreground mt-2 text-center text-xs", require_components_sizing_index.getComponentSizeClass(descriptionMaxWidth)),
+							children: stepState.step.description
+						})
+					]
+				}), index < total - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `mx-2 h-0.5 w-6 transition-all duration-200 ${stepState.isCompleted ? "bg-accent" : "bg-muted"}` })]
+			}, index);
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _lumeweb_portal_framework_ui_core.cn)("space-y-6", className),
+		children: [renderMobileProgressBars(), renderDesktopTimeline()]
+	});
+}
+function renderIcon(icon, size = "sm") {
+	if (!icon) return null;
+	const sizeClasses = {
+		lg: "h-6 w-6",
+		md: "h-5 w-5",
+		sm: "h-4 w-4"
+	};
+	if ((0, react_is.isElement)(icon)) return react.default.cloneElement(icon, { className: (0, _lumeweb_portal_framework_ui_core.cn)(icon.props.className, sizeClasses[size]) });
+	if ((0, react_is.isValidElementType)(icon)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icon, { className: sizeClasses[size] });
+	return null;
+}
+var init_WizardHeader = require_rolldown_runtime.__esmMin((() => {
+	require_components_sizing_index.init_sizing();
+	require_components_shared_context_HeaderContext.init_HeaderContext();
+	require_components_shared_types_header.init_header();
+	require_components_shared_utils_stepState.init_stepState();
+}));
+
+//#endregion
+init_WizardHeader();
+exports.WizardHeader = WizardHeader;
+Object.defineProperty(exports, 'init_WizardHeader', {
+  enumerable: true,
+  get: function () {
+    return init_WizardHeader;
+  }
+});
+//# sourceMappingURL=WizardHeader.cjs.map

package/dist/cjs/components/shared/headers/WizardHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardHeader.cjs","names":["useHeaderContext","isWizardNavigation","calculateStepState","createStepClickHandler","createStepKeyHandler","Check","getComponentSizeClass","React"],"sources":["../../../../../src/components/shared/headers/WizardHeader.tsx"],"sourcesContent":["import { cn } from \"@lumeweb/portal-framework-ui-core\";\nimport { Check } from \"lucide-react\";\nimport React, { useMemo } from \"react\";\nimport { isElement, isValidElementType } from \"react-is\";\n\nimport { ComponentSize, getComponentSizeClass } from \"../../sizing\";\nimport { useHeaderContext } from \"../context/HeaderContext\";\nimport { BaseHeaderProps, isWizardNavigation } from \"../types/header\";\nimport {\n  calculateStepState,\n  createStepClickHandler,\n  createStepKeyHandler,\n} from \"../utils/stepState\";\n\nexport function WizardHeader<T = any>({ className }: BaseHeaderProps<T>) {\n  const context = useHeaderContext<T>();\n\n  // Wizard header requires wizard navigation context\n  if (!isWizardNavigation(context.navigation)) {\n    console.warn(\"WizardHeader rendered without wizard navigation context\");\n    return null;\n  }\n\n  const {\n    allowNavigation,\n    current,\n    descriptionMaxWidth = \"xs\" as ComponentSize,\n    disabledSteps = [],\n    iconSize = \"sm\",\n    onStepClick,\n    showStepDescriptions = true,\n    showStepTitles = true,\n    steps = [],\n    total,\n  } = context.navigation;\n\n  // Resolve allowNavigation value (it's already pre-resolved)\n  const resolvedAllowNavigation = useMemo(() => {\n    if (typeof allowNavigation === \"function\") {\n      return allowNavigation();\n    }\n    return allowNavigation;\n  }, [allowNavigation]);\n\n  // Mobile Instagram-style progress bars\n  const renderMobileProgressBars = () => (\n    <div className=\"mb-6 w-full px-4 md:hidden\">\n      <div className=\"bg-muted flex h-1 w-full overflow-hidden rounded-full\">\n        {Array.from({ length: total }, (_, index) => {\n          const stepState = calculateStepState(\n            index,\n            current,\n            total,\n            resolvedAllowNavigation,\n            disabledSteps,\n            steps,\n          );\n\n          return (\n            <div\n              className={cn(\"h-full flex-1 transition-all duration-300\", {\n                \"bg-accent\": stepState.isCompleted,\n                \"bg-muted\": !stepState.isCompleted && !stepState.isActive,\n                \"bg-primary\": stepState.isActive && !stepState.isCompleted,\n                \"cursor-pointer\": stepState.canNavigate,\n              })}\n              key={index}\n              onClick={\n                stepState.canNavigate\n                  ? createStepClickHandler(\n                      index,\n                      resolvedAllowNavigation,\n                      disabledSteps,\n                      current,\n                      onStepClick,\n                    )\n                  : undefined\n              }\n              onKeyDown={\n                stepState.canNavigate\n                  ? createStepKeyHandler(\n                      index,\n                      resolvedAllowNavigation,\n                      disabledSteps,\n                      current,\n                      onStepClick,\n                    )\n                  : undefined\n              }\n              role={stepState.canNavigate ? \"button\" : undefined}\n              tabIndex={stepState.canNavigate ? 0 : -1}\n            />\n          );\n        })}\n      </div>\n      {steps[current] && (\n        <div className=\"mt-4 text-center\">\n          <div className=\"mb-2 flex items-center justify-center gap-2\">\n            {renderIcon(steps[current].icon, iconSize) && (\n              <div className=\"flex items-center\">\n                {renderIcon(steps[current].icon, iconSize)}\n              </div>\n            )}\n            <span className=\"text-primary text-sm font-medium\">\n              {steps[current].shortTitle ||\n                steps[current].title ||\n                `Step ${current}`}\n            </span>\n          </div>\n          <div className=\"text-muted-foreground text-xs\">\n            Step {current} of {total}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n\n  // Desktop circular timeline\n  const renderDesktopTimeline = () => (\n    <div className=\"mb-6 hidden items-center justify-center gap-4 px-4 md:flex\">\n      {Array.from({ length: total }, (_, index) => {\n        const stepState = calculateStepState(\n          index,\n          current,\n          total,\n          resolvedAllowNavigation,\n          disabledSteps,\n          steps,\n        );\n\n        return (\n          <div className=\"flex items-center\" key={index}>\n            <div className=\"flex flex-col items-center justify-center\">\n              <div\n                aria-current={stepState.isActive ? \"step\" : undefined}\n                aria-disabled={stepState.isDisabled}\n                className={`flex h-10 w-10 items-center justify-center rounded-full transition-all duration-200 ${\n                  stepState.isCompleted\n                    ? \"bg-accent text-white\"\n                    : stepState.isActive\n                      ? \"bg-primary text-primary-foreground ring-primary/20 ring-4\"\n                      : \"bg-muted text-muted-foreground\"\n                } ${stepState.canNavigate ? \"cursor-pointer hover:scale-110 hover:shadow-lg\" : \"\"}`}\n                onClick={\n                  stepState.canNavigate\n                    ? createStepClickHandler(\n                        index,\n                        resolvedAllowNavigation,\n                        disabledSteps,\n                        current,\n                        onStepClick,\n                      )\n                    : undefined\n                }\n                onKeyDown={\n                  stepState.canNavigate\n                    ? createStepKeyHandler(\n                        index,\n                        resolvedAllowNavigation,\n                        disabledSteps,\n                        current,\n                        onStepClick,\n                      )\n                    : undefined\n                }\n                role={stepState.canNavigate ? \"button\" : undefined}\n                tabIndex={stepState.canNavigate ? 0 : -1}>\n                {stepState.isCompleted ? (\n                  <Check className=\"h-5 w-5\" />\n                ) : (\n                  renderIcon(stepState.step.icon, \"md\") || (\n                    <div className=\"h-5 w-5\" />\n                  )\n                )}\n              </div>\n              {showStepTitles && (\n                <span\n                  className={`mt-3 text-center text-sm font-medium ${\n                    stepState.isActive\n                      ? \"text-primary\"\n                      : stepState.isCompleted\n                        ? \"text-accent-foreground\"\n                        : \"text-muted-foreground\"\n                  } ${stepState.canNavigate ? \"cursor-pointer\" : \"\"}`}\n                  onClick={\n                    stepState.canNavigate\n                      ? createStepClickHandler(\n                          index,\n                          resolvedAllowNavigation,\n                          disabledSteps,\n                          current,\n                          onStepClick,\n                        )\n                      : undefined\n                  }>\n                  {stepState.step.shortTitle || stepState.step.title}\n                </span>\n              )}\n              {showStepDescriptions && stepState.step.description && (\n                <span\n                  className={cn(\n                    \"text-muted-foreground mt-2 text-center text-xs\",\n                    getComponentSizeClass(descriptionMaxWidth),\n                  )}>\n                  {stepState.step.description}\n                </span>\n              )}\n            </div>\n            {index < total - 1 && (\n              <div\n                className={`mx-2 h-0.5 w-6 transition-all duration-200 ${\n                  stepState.isCompleted ? \"bg-accent\" : \"bg-muted\"\n                }`}\n              />\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n\n  return (\n    <div className={cn(\"space-y-6\", className)}>\n      {renderMobileProgressBars()}\n      {renderDesktopTimeline()}\n    </div>\n  );\n}\n\n// Helper function to safely render icons\nfunction renderIcon(\n  icon: React.ReactNode,\n  size: \"lg\" | \"md\" | \"sm\" = \"sm\",\n): React.ReactNode {\n  if (!icon) return null;\n\n  // Define size classes\n  const sizeClasses = {\n    lg: \"h-6 w-6\",\n    md: \"h-5 w-5\",\n    sm: \"h-4 w-4\",\n  };\n\n  // If icon is already a valid React element, clone it with size classes\n  if (isElement(icon)) {\n    return React.cloneElement(icon as React.ReactElement, {\n      className: cn(\n        (icon as React.ReactElement).props.className,\n        sizeClasses[size],\n      ),\n    });\n  }\n\n  // If icon is a valid React component type, instantiate it with size classes\n  if (isValidElementType(icon)) {\n    const IconComponent = icon as React.ComponentType<{ className?: string }>;\n    return <IconComponent className={sizeClasses[size]} />;\n  }\n\n  // For any other case, return null\n  return null;\n}\n"],"mappings":"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"}

package/dist/cjs/components/shared/headers/WizardHeader.d.cts

@@ -0,0 +1,9 @@
+import { BaseHeaderProps } from "../types/header.cjs";
+
+//#region src/components/shared/headers/WizardHeader.d.ts
+declare function WizardHeader<T = any>({
+  className
+}: BaseHeaderProps<T>): any;
+//#endregion
+export { WizardHeader };
+//# sourceMappingURL=WizardHeader.d.cts.map

package/dist/cjs/components/shared/headers/index.cjs

@@ -0,0 +1,24 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_components_shared_headers_DefaultHeader = require('./DefaultHeader.cjs');
+const require_components_shared_headers_FormHeader = require('./FormHeader.cjs');
+const require_components_shared_headers_WizardHeader = require('./WizardHeader.cjs');
+
+//#region src/components/shared/headers/index.ts
+var init_headers = require_rolldown_runtime.__esmMin((() => {
+	init_DefaultHeader();
+	init_FormHeader();
+	init_WizardHeader();
+}));
+
+//#endregion
+init_headers();
+exports.DefaultHeader = require_components_shared_headers_DefaultHeader.DefaultHeader;
+exports.FormHeader = require_components_shared_headers_FormHeader.FormHeader;
+exports.WizardHeader = require_components_shared_headers_WizardHeader.WizardHeader;
+Object.defineProperty(exports, 'init_headers', {
+  enumerable: true,
+  get: function () {
+    return init_headers;
+  }
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/shared/headers/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../../../src/components/shared/headers/index.ts"],"sourcesContent":["export * from \"./DefaultHeader\";\nexport * from \"./FormHeader\";\nexport * from \"./WizardHeader\";\n"],"mappings":""}

package/dist/cjs/components/shared/headers/index.d.cts

@@ -0,0 +1,4 @@
+import { DefaultHeader } from "./DefaultHeader.cjs";
+import { FormHeader } from "./FormHeader.cjs";
+import { WizardHeader } from "./WizardHeader.cjs";
+export { DefaultHeader, FormHeader, WizardHeader };

package/dist/cjs/components/shared/hooks/index.cjs

@@ -0,0 +1,21 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_components_shared_hooks_useEnvironmentSync = require('./useEnvironmentSync.cjs');
+const require_components_shared_hooks_useForceRerender = require('./useForceRerender.cjs');
+
+//#region src/components/shared/hooks/index.ts
+var init_hooks = require_rolldown_runtime.__esmMin((() => {
+	init_useForceRerender();
+	init_useEnvironmentSync();
+}));
+
+//#endregion
+init_hooks();
+Object.defineProperty(exports, 'init_hooks', {
+  enumerable: true,
+  get: function () {
+    return init_hooks;
+  }
+});
+exports.useEnvironmentSync = require_components_shared_hooks_useEnvironmentSync.useEnvironmentSync;
+exports.useForceRerender = require_components_shared_hooks_useForceRerender.useForceRerender;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/shared/hooks/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../../../src/components/shared/hooks/index.ts"],"sourcesContent":["export * from \"./useForceRerender\";\nexport * from \"./useEnvironmentSync\";\n"],"mappings":""}

package/dist/cjs/components/shared/hooks/index.d.cts

@@ -0,0 +1,3 @@
+import { useForceRerender } from "./useForceRerender.cjs";
+import { useEnvironmentSync } from "./useEnvironmentSync.cjs";
+export { useEnvironmentSync, useForceRerender };

package/dist/cjs/components/shared/hooks/useEnvironmentSync.cjs

@@ -0,0 +1,27 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+
+//#region src/components/shared/hooks/useEnvironmentSync.ts
+/**
+* Hook to provide environment sync functionality
+* 
+* This hook is a simple mechanism to call the callback with the environment
+* when it's provided. It doesn't manage any state internally.
+* 
+* @param currentEnvironment - The current environment to sync
+* @param environmentSyncCallback - Optional callback that receives the environment directly
+*/
+function useEnvironmentSync(currentEnvironment, environmentSyncCallback) {
+	if (environmentSyncCallback && currentEnvironment) environmentSyncCallback(currentEnvironment);
+}
+var init_useEnvironmentSync = require_rolldown_runtime.__esmMin((() => {}));
+
+//#endregion
+init_useEnvironmentSync();
+Object.defineProperty(exports, 'init_useEnvironmentSync', {
+  enumerable: true,
+  get: function () {
+    return init_useEnvironmentSync;
+  }
+});
+exports.useEnvironmentSync = useEnvironmentSync;
+//# sourceMappingURL=useEnvironmentSync.cjs.map

package/dist/cjs/components/shared/hooks/useEnvironmentSync.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnvironmentSync.cjs","names":[],"sources":["../../../../../src/components/shared/hooks/useEnvironmentSync.ts"],"sourcesContent":["import type { EnvironmentSyncCallback } from \"../types/form\";\nimport type { UnifiedEnvironment } from \"../types/environment\";\n\n/**\n * Hook to provide environment sync functionality\n * \n * This hook is a simple mechanism to call the callback with the environment\n * when it's provided. It doesn't manage any state internally.\n * \n * @param currentEnvironment - The current environment to sync\n * @param environmentSyncCallback - Optional callback that receives the environment directly\n */\nexport function useEnvironmentSync(\n  currentEnvironment: UnifiedEnvironment | null,\n  environmentSyncCallback?: EnvironmentSyncCallback\n) {\n  // Call the callback with the current environment if provided\n  if (environmentSyncCallback && currentEnvironment) {\n    environmentSyncCallback(currentEnvironment);\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,mBACd,oBACA,yBACA;AAEA,KAAI,2BAA2B,mBAC7B,yBAAwB,mBAAmB"}

package/dist/cjs/components/shared/hooks/useEnvironmentSync.d.cts

@@ -0,0 +1,18 @@
+import { EnvironmentSyncCallback } from "../types/form.cjs";
+import { UnifiedEnvironment } from "../types/environment.cjs";
+
+//#region src/components/shared/hooks/useEnvironmentSync.d.ts
+
+/**
+ * Hook to provide environment sync functionality
+ *
+ * This hook is a simple mechanism to call the callback with the environment
+ * when it's provided. It doesn't manage any state internally.
+ *
+ * @param currentEnvironment - The current environment to sync
+ * @param environmentSyncCallback - Optional callback that receives the environment directly
+ */
+declare function useEnvironmentSync(currentEnvironment: UnifiedEnvironment | null, environmentSyncCallback?: EnvironmentSyncCallback): void;
+//#endregion
+export { useEnvironmentSync };
+//# sourceMappingURL=useEnvironmentSync.d.cts.map

package/dist/cjs/components/shared/hooks/useForceRerender.cjs

@@ -0,0 +1,35 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/shared/hooks/useForceRerender.ts
+/**
+* Hook to provide force rerender functionality
+* 
+* This hook manages a force rerender mechanism that can be triggered
+* from outside the normal React render loop. It accepts an optional
+* callback that the framework can call with a rerender method,
+* which can then be stored and used to force a rerender when needed.
+* 
+* @param forceRerenderCallback - Optional callback that receives the force rerender method
+*/
+function useForceRerender(forceRerenderCallback) {
+	const [, setCounter] = (0, react.useState)(0);
+	const forceRerender = (0, react.useCallback)(() => {
+		setCounter((prev) => prev + 1);
+	}, []);
+	(0, react.useCallback)(() => {
+		if (forceRerenderCallback) forceRerenderCallback(forceRerender);
+	}, [forceRerender, forceRerenderCallback])();
+}
+var init_useForceRerender = require_rolldown_runtime.__esmMin((() => {}));
+
+//#endregion
+init_useForceRerender();
+Object.defineProperty(exports, 'init_useForceRerender', {
+  enumerable: true,
+  get: function () {
+    return init_useForceRerender;
+  }
+});
+exports.useForceRerender = useForceRerender;
+//# sourceMappingURL=useForceRerender.cjs.map

package/dist/cjs/components/shared/hooks/useForceRerender.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForceRerender.cjs","names":[],"sources":["../../../../../src/components/shared/hooks/useForceRerender.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport type { ForceRerenderCallback } from \"../types/form\";\n\n/**\n * Hook to provide force rerender functionality\n * \n * This hook manages a force rerender mechanism that can be triggered\n * from outside the normal React render loop. It accepts an optional\n * callback that the framework can call with a rerender method,\n * which can then be stored and used to force a rerender when needed.\n * \n * @param forceRerenderCallback - Optional callback that receives the force rerender method\n */\nexport function useForceRerender(forceRerenderCallback?: ForceRerenderCallback) {\n  const [, setCounter] = useState(0);\n\n  // The force rerender method that can be called externally\n  const forceRerender = useCallback(() => {\n    setCounter((prev) => prev + 1);\n  }, []);\n\n  // Set up the callback if provided\n  useCallback(() => {\n    if (forceRerenderCallback) {\n      forceRerenderCallback(forceRerender);\n    }\n  }, [forceRerender, forceRerenderCallback])();\n\n  // Return nothing - the hook is used for its side effect of setting up the callback\n}"],"mappings":";;;;;;;;;;;;;;AAcA,SAAgB,iBAAiB,uBAA+C;CAC9E,MAAM,GAAG,kCAAuB,EAAE;CAGlC,MAAM,6CAAkC;AACtC,cAAY,SAAS,OAAO,EAAE;IAC7B,EAAE,CAAC;AAGN,8BAAkB;AAChB,MAAI,sBACF,uBAAsB,cAAc;IAErC,CAAC,eAAe,sBAAsB,CAAC,EAAE"}

package/dist/cjs/components/shared/hooks/useForceRerender.d.cts

@@ -0,0 +1,18 @@
+import { ForceRerenderCallback } from "../types/form.cjs";
+
+//#region src/components/shared/hooks/useForceRerender.d.ts
+
+/**
+ * Hook to provide force rerender functionality
+ *
+ * This hook manages a force rerender mechanism that can be triggered
+ * from outside the normal React render loop. It accepts an optional
+ * callback that the framework can call with a rerender method,
+ * which can then be stored and used to force a rerender when needed.
+ *
+ * @param forceRerenderCallback - Optional callback that receives the force rerender method
+ */
+declare function useForceRerender(forceRerenderCallback?: ForceRerenderCallback): void;
+//#endregion
+export { useForceRerender };
+//# sourceMappingURL=useForceRerender.d.cts.map