@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

package/dist/esm/components/shared/utils/createForceRerenderReceiver.js

@@ -0,0 +1,34 @@
+import { __esmMin } from "../../../_virtual/rolldown_runtime.js";
+
+//#region src/components/shared/utils/createForceRerenderReceiver.ts
+/**
+* Create a force rerender receiver for the receiving side
+*
+* This helper function creates a simple receiver that can be used
+* to store and call a force rerender method provided by the framework.
+* It returns an object with the callback to pass to the framework
+* and a function to trigger the rerender.
+*
+* @returns An object with:
+*   - forceRerenderCallback: The callback to pass to the framework config
+*   - forceRerender: Function to call when you need to force a rerender
+*/
+function createForceRerenderReceiver() {
+	let forceRerenderMethod = null;
+	const forceRerenderCallback = (rerenderMethod) => {
+		forceRerenderMethod = rerenderMethod;
+	};
+	const forceRerender = () => {
+		if (forceRerenderMethod) forceRerenderMethod();
+	};
+	return {
+		forceRerender,
+		forceRerenderCallback
+	};
+}
+var init_createForceRerenderReceiver = __esmMin(() => {});
+
+//#endregion
+init_createForceRerenderReceiver();
+export { createForceRerenderReceiver, init_createForceRerenderReceiver };
+//# sourceMappingURL=createForceRerenderReceiver.js.map

package/dist/esm/components/shared/utils/createForceRerenderReceiver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createForceRerenderReceiver.js","names":[],"sources":["../../../../../src/components/shared/utils/createForceRerenderReceiver.ts"],"sourcesContent":["import type { ForceRerenderCallback, ForceRerenderMethod } from \"../types/form\";\n\n/**\n * Create a force rerender receiver for the receiving side\n *\n * This helper function creates a simple receiver that can be used\n * to store and call a force rerender method provided by the framework.\n * It returns an object with the callback to pass to the framework\n * and a function to trigger the rerender.\n *\n * @returns An object with:\n *   - forceRerenderCallback: The callback to pass to the framework config\n *   - forceRerender: Function to call when you need to force a rerender\n */\nexport function createForceRerenderReceiver() {\n  let forceRerenderMethod: ForceRerenderMethod | null = null;\n\n  const forceRerenderCallback: ForceRerenderCallback = (rerenderMethod) => {\n    forceRerenderMethod = rerenderMethod;\n  };\n\n  const forceRerender = () => {\n    if (forceRerenderMethod) {\n      forceRerenderMethod();\n    }\n  };\n\n  return {\n    forceRerender,\n    forceRerenderCallback,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;AAcA,SAAgB,8BAA8B;CAC5C,IAAI,sBAAkD;CAEtD,MAAM,yBAAgD,mBAAmB;AACvE,wBAAsB;;CAGxB,MAAM,sBAAsB;AAC1B,MAAI,oBACF,sBAAqB;;AAIzB,QAAO;EACL;EACA;EACD"}

package/dist/esm/components/shared/utils/index.d.ts

@@ -0,0 +1,6 @@
+import { createForceRerenderReceiver } from "./createForceRerenderReceiver.js";
+import { createEnvironmentReceiver } from "./createEnvironmentReceiver.js";
+import { FooterRenderConfig, renderFooter } from "./renderFooter.js";
+import { HeaderRenderConfig, renderHeader } from "./renderHeader.js";
+import { StepState, calculateStepState, createStepClickHandler, createStepKeyHandler, resolveAllowStepNavigation } from "./stepState.js";
+export { FooterRenderConfig, HeaderRenderConfig, StepState, calculateStepState, createEnvironmentReceiver, createForceRerenderReceiver, createStepClickHandler, createStepKeyHandler, renderFooter, renderHeader, resolveAllowStepNavigation };

package/dist/esm/components/shared/utils/index.js

@@ -0,0 +1,20 @@
+import { __esmMin } from "../../../_virtual/rolldown_runtime.js";
+import { calculateStepState, createStepClickHandler, createStepKeyHandler, init_stepState, resolveAllowStepNavigation } from "./stepState.js";
+import { createForceRerenderReceiver, init_createForceRerenderReceiver } from "./createForceRerenderReceiver.js";
+import { createEnvironmentReceiver, init_createEnvironmentReceiver } from "./createEnvironmentReceiver.js";
+import { init_renderFooter, renderFooter } from "./renderFooter.js";
+import { init_renderHeader, renderHeader } from "./renderHeader.js";
+
+//#region src/components/shared/utils/index.tsx
+var init_utils = __esmMin(() => {
+	init_createForceRerenderReceiver();
+	init_createEnvironmentReceiver();
+	init_renderFooter();
+	init_renderHeader();
+	init_stepState();
+});
+
+//#endregion
+init_utils();
+export { calculateStepState, createEnvironmentReceiver, createForceRerenderReceiver, createStepClickHandler, createStepKeyHandler, init_utils, renderFooter, renderHeader, resolveAllowStepNavigation };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/shared/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/shared/utils/index.tsx"],"sourcesContent":["// Force rerender utility\nexport * from \"./createForceRerenderReceiver\";\n\n// Environment sync utility\nexport * from \"./createEnvironmentReceiver\";\n\n// Footer rendering utility\nexport * from \"./renderFooter\";\n\n// Header rendering utility\nexport * from \"./renderHeader\";\n\nexport * from \"./stepState\";\n"],"mappings":""}

package/dist/esm/components/shared/utils/renderFooter.d.ts

@@ -0,0 +1,37 @@
+import { DialogConfig } from "../../dialog/Dialog.types.js";
+import { BaseRecord } from "@refinedev/core";
+import React, { ReactNode } from "react";
+
+//#region src/components/shared/utils/renderFooter.d.ts
+interface FooterRenderConfig<T extends BaseRecord = any> {
+  /** CSS class name for the footer container */
+  className?: string;
+  /** Dialog configuration (required for dialog contexts) */
+  dialogConfig?: DialogConfig<T>;
+  /** Footer configuration - can be false, ReactNode, or function */
+  footer?: ((environment: any) => ReactNode) | false | ReactNode;
+  /** Form methods for form state */
+  formMethods?: any;
+  /** Whether this is rendered in a dialog context */
+  isDialog?: boolean;
+  /** Callback function to handle cancel/close actions */
+  onCancel?: () => void;
+  /** Configuration object for UnifiedFooter */
+  unifiedFooterConfig?: any;
+}
+/**
+ * Shared footer rendering utility that standardizes footer rendering
+ * across dialogs and forms in the portal framework.
+ *
+ * This utility handles:
+ * - Function-based footers with environment context
+ * - Static footer content
+ * - Disabled footers (footer: false)
+ * - Default UnifiedFooter fallback
+ * - Dialog vs standalone contexts
+ * - Wizard/step form detection for dialogs
+ */
+declare function renderFooter<T extends BaseRecord = any>(config: FooterRenderConfig<T>): React.ReactNode;
+//#endregion
+export { FooterRenderConfig, renderFooter };
+//# sourceMappingURL=renderFooter.d.ts.map

package/dist/esm/components/shared/utils/renderFooter.js

@@ -0,0 +1,107 @@
+import { __esmMin } from "../../../_virtual/rolldown_runtime.js";
+import { init_Dialog_types, isDialogFooterFunction, isWizardFormConfig } from "../../dialog/Dialog.types.js";
+import { init_StepControlContext, useOptionalStepControlContext } from "../../form/StepControlContext.js";
+import { Environment, init_builders } from "../environment/builders.js";
+import { UnifiedFooter, init_UnifiedFooter } from "../UnifiedFooter.js";
+import { DialogFooter } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/shared/utils/renderFooter.tsx
+/**
+* Shared footer rendering utility that standardizes footer rendering
+* across dialogs and forms in the portal framework.
+*
+* This utility handles:
+* - Function-based footers with environment context
+* - Static footer content
+* - Disabled footers (footer: false)
+* - Default UnifiedFooter fallback
+* - Dialog vs standalone contexts
+* - Wizard/step form detection for dialogs
+*/
+function renderFooter(config) {
+	const { className, dialogConfig, footer, formMethods, isDialog = false, onCancel, unifiedFooterConfig } = config;
+	if (footer === false) return null;
+	if (footer && isDialogFooterFunction(footer)) return /* @__PURE__ */ jsx(DialogFooter, {
+		className,
+		children: footer(buildFooterEnvironment({
+			dialogConfig,
+			formMethods,
+			isDialog,
+			onCancel,
+			stepControl: useOptionalStepControlContext()
+		}))
+	});
+	if (footer) return /* @__PURE__ */ jsx(DialogFooter, {
+		className,
+		children: footer
+	});
+	const footerEnvironment = buildFooterEnvironment({
+		dialogConfig,
+		formMethods,
+		isDialog,
+		onCancel,
+		stepControl: useOptionalStepControlContext()
+	});
+	return /* @__PURE__ */ jsx(DialogFooter, {
+		className,
+		children: /* @__PURE__ */ jsx(UnifiedFooter, {
+			config: unifiedFooterConfig || dialogConfig?.formConfig || dialogConfig,
+			environment: footerEnvironment
+		})
+	});
+}
+function buildFooterEnvironment({ dialogConfig, formMethods, isDialog, onCancel, stepControl }) {
+	if (!isDialog || !dialogConfig) return buildStandaloneFooterEnvironment(formMethods, dialogConfig);
+	return buildDialogFooterEnvironment(dialogConfig, formMethods, onCancel, stepControl);
+}
+/**
+* Builds footer environment for standalone contexts
+*/
+function buildStandaloneFooterEnvironment(formMethods, dialogConfig) {
+	const builder = Environment.footer().standalone();
+	if (formMethods && (!dialogConfig || dialogConfig.formConfig)) return builder.simpleForm({
+		isSubmitting: formMethods?.formState?.isSubmitting || false,
+		methods: formMethods
+	}).build();
+	return builder.buildContainerOnly();
+}
+/**
+* Builds footer environment for dialog contexts
+*/
+function buildDialogFooterEnvironment(dialogConfig, formMethods, onCancel, stepControl) {
+	const builder = Environment.footer().dialog({
+		dialogConfig,
+		onClose: onCancel || dialogConfig.onClose
+	});
+	if (dialogConfig.formConfig && isWizardFormConfig(dialogConfig.formConfig) && !!stepControl) return builder.wizardForm({
+		isSubmitting: formMethods?.formState?.isSubmitting || false,
+		methods: formMethods
+	}).step({
+		current: stepControl.currentStep,
+		isFirst: stepControl.isFirstStep,
+		isLast: stepControl.isLastStep,
+		onNext: stepControl.handleNext,
+		onPrevious: stepControl.handlePrevious,
+		onRetry: stepControl.handleRetry,
+		total: stepControl.totalSteps,
+		retryCount: stepControl.retryCount
+	}).build();
+	if (formMethods && dialogConfig.formConfig) return builder.simpleForm({
+		isSubmitting: formMethods?.formState?.isSubmitting || false,
+		methods: formMethods
+	}).build();
+	return builder.buildContainerOnly();
+}
+var init_renderFooter = __esmMin(() => {
+	init_Dialog_types();
+	init_StepControlContext();
+	init_builders();
+	init_UnifiedFooter();
+});
+
+//#endregion
+init_renderFooter();
+export { init_renderFooter, renderFooter };
+//# sourceMappingURL=renderFooter.js.map

package/dist/esm/components/shared/utils/renderFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderFooter.js","names":[],"sources":["../../../../../src/components/shared/utils/renderFooter.tsx"],"sourcesContent":["import type { BaseRecord } from \"@refinedev/core\";\n\nimport { DialogFooter } from \"@lumeweb/portal-framework-ui-core\";\nimport React, { ReactNode } from \"react\";\n\nimport { DialogConfig, isDialogFooterFunction, isWizardFormConfig } from \"../../dialog/Dialog.types\";\nimport { useOptionalStepControlContext } from \"../../form/StepControlContext\";\nimport { isStepFormConfig } from \"../../form/types\";\nimport { Environment } from \"../environment/builders\";\nimport { UnifiedFooter } from \"../UnifiedFooter\";\n\nexport interface FooterRenderConfig<T extends BaseRecord = any> {\n  /** CSS class name for the footer container */\n  className?: string;\n  /** Dialog configuration (required for dialog contexts) */\n  dialogConfig?: DialogConfig<T>;\n  /** Footer configuration - can be false, ReactNode, or function */\n  footer?: ((environment: any) => ReactNode) | false | ReactNode;\n  /** Form methods for form state */\n  formMethods?: any;\n  /** Whether this is rendered in a dialog context */\n  isDialog?: boolean;\n  /** Callback function to handle cancel/close actions */\n  onCancel?: () => void;\n  /** Configuration object for UnifiedFooter */\n  unifiedFooterConfig?: any;\n}\n\n/**\n * Shared footer rendering utility that standardizes footer rendering\n * across dialogs and forms in the portal framework.\n *\n * This utility handles:\n * - Function-based footers with environment context\n * - Static footer content\n * - Disabled footers (footer: false)\n * - Default UnifiedFooter fallback\n * - Dialog vs standalone contexts\n * - Wizard/step form detection for dialogs\n */\nexport function renderFooter<T extends BaseRecord = any>(\n  config: FooterRenderConfig<T>,\n): React.ReactNode {\n  const {\n    className,\n    dialogConfig,\n    footer,\n    formMethods,\n    isDialog = false,\n    onCancel,\n    unifiedFooterConfig,\n  } = config;\n\n  // If footer is explicitly false, don't render anything\n  if (footer === false) {\n    return null;\n  }\n\n  // Handle function-based footers\n  if (footer && isDialogFooterFunction(footer)) {\n    const stepControl = useOptionalStepControlContext();\n    const footerEnvironment = buildFooterEnvironment({\n      dialogConfig,\n      formMethods,\n      isDialog,\n      onCancel,\n      stepControl,\n    });\n\n    const customFooter = footer(footerEnvironment);\n    return <DialogFooter className={className}>{customFooter}</DialogFooter>;\n  }\n\n  // Handle static footer content\n  if (footer) {\n    return <DialogFooter className={className}>{footer}</DialogFooter>;\n  }\n\n  // Default: Use UnifiedFooter system\n  const stepControl = useOptionalStepControlContext();\n  const footerEnvironment = buildFooterEnvironment({\n    dialogConfig,\n    formMethods,\n    isDialog,\n    onCancel,\n    stepControl,\n  });\n\n  return (\n    <DialogFooter className={className}>\n      <UnifiedFooter\n        config={unifiedFooterConfig || dialogConfig?.formConfig || dialogConfig}\n        environment={footerEnvironment}\n      />\n    </DialogFooter>\n  );\n}\n\n// Helper function extracted from current DialogFooterContent\nfunction buildFooterEnvironment<T extends BaseRecord = any>({\n  dialogConfig,\n  formMethods,\n  isDialog,\n  onCancel,\n  stepControl,\n}: {\n  dialogConfig?: DialogConfig<T>;\n  formMethods?: any;\n  isDialog: boolean;\n  onCancel?: () => void;\n  stepControl?: any;\n}) {\n  // Handle standalone context (when not in dialog or dialogConfig is missing)\n  const isStandaloneContext = !isDialog || !dialogConfig;\n  if (isStandaloneContext) {\n    return buildStandaloneFooterEnvironment(formMethods, dialogConfig);\n  }\n\n  // Handle dialog context\n  return buildDialogFooterEnvironment(dialogConfig, formMethods, onCancel, stepControl);\n}\n\n/**\n * Builds footer environment for standalone contexts\n */\nfunction buildStandaloneFooterEnvironment(formMethods: any, dialogConfig: any) {\n  const builder = Environment.footer().standalone();\n  \n  // Add form context only if formMethods exists and dialogConfig.formConfig exists (when dialogConfig is provided)\n  const shouldIncludeFormContext = formMethods && (!dialogConfig || dialogConfig.formConfig);\n  if (shouldIncludeFormContext) {\n    return builder\n      .simpleForm({\n        isSubmitting: formMethods?.formState?.isSubmitting || false,\n        methods: formMethods,\n      })\n      .build();\n  }\n  \n  // Return basic standalone footer without form context\n  return builder.buildContainerOnly();\n}\n\n/**\n * Builds footer environment for dialog contexts\n */\nfunction buildDialogFooterEnvironment(dialogConfig: any, formMethods: any, onCancel: (() => void) | undefined, stepControl: any) {\n  const builder = Environment.footer().dialog({\n    dialogConfig,\n    onClose: onCancel || dialogConfig.onClose,\n  });\n\n  // Check if this is a wizard form with step control\n  const isWizardForm = dialogConfig.formConfig && isWizardFormConfig(dialogConfig.formConfig);\n  const hasStepControl = !!stepControl;\n  \n  if (isWizardForm && hasStepControl) {\n    return builder\n      .wizardForm({\n        isSubmitting: formMethods?.formState?.isSubmitting || false,\n        methods: formMethods,\n      })\n      .step({\n        current: stepControl.currentStep,\n        isFirst: stepControl.isFirstStep,\n        isLast: stepControl.isLastStep,\n        onNext: stepControl.handleNext,\n        onPrevious: stepControl.handlePrevious,\n        onRetry: stepControl.handleRetry,\n        total: stepControl.totalSteps,\n        retryCount: stepControl.retryCount,\n      })\n      .build();\n  }\n\n  // Add simple form context if formMethods and formConfig exist\n  const shouldIncludeSimpleFormContext = formMethods && dialogConfig.formConfig;\n  if (shouldIncludeSimpleFormContext) {\n    return builder\n      .simpleForm({\n        isSubmitting: formMethods?.formState?.isSubmitting || false,\n        methods: formMethods,\n      })\n      .build();\n  }\n\n  // Return dialog footer without form context\n  return builder.buildContainerOnly();\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwCA,SAAgB,aACd,QACiB;CACjB,MAAM,EACJ,WACA,cACA,QACA,aACA,WAAW,OACX,UACA,wBACE;AAGJ,KAAI,WAAW,MACb,QAAO;AAIT,KAAI,UAAU,uBAAuB,OAAO,CAW1C,QAAO,oBAAC;EAAwB;YADX,OARK,uBAAuB;GAC/C;GACA;GACA;GACA;GACA,aANkB,+BAA+B;GAOlD,CAAC,CAE4C;GAC0B;AAI1E,KAAI,OACF,QAAO,oBAAC;EAAwB;YAAY;GAAsB;CAKpE,MAAM,oBAAoB,uBAAuB;EAC/C;EACA;EACA;EACA;EACA,aANkB,+BAA+B;EAOlD,CAAC;AAEF,QACE,oBAAC;EAAwB;YACvB,oBAAC;GACC,QAAQ,uBAAuB,cAAc,cAAc;GAC3D,aAAa;IACb;GACW;;AAKnB,SAAS,uBAAmD,EAC1D,cACA,aACA,UACA,UACA,eAOC;AAGD,KAD4B,CAAC,YAAY,CAAC,aAExC,QAAO,iCAAiC,aAAa,aAAa;AAIpE,QAAO,6BAA6B,cAAc,aAAa,UAAU,YAAY;;;;;AAMvF,SAAS,iCAAiC,aAAkB,cAAmB;CAC7E,MAAM,UAAU,YAAY,QAAQ,CAAC,YAAY;AAIjD,KADiC,gBAAgB,CAAC,gBAAgB,aAAa,YAE7E,QAAO,QACJ,WAAW;EACV,cAAc,aAAa,WAAW,gBAAgB;EACtD,SAAS;EACV,CAAC,CACD,OAAO;AAIZ,QAAO,QAAQ,oBAAoB;;;;;AAMrC,SAAS,6BAA6B,cAAmB,aAAkB,UAAoC,aAAkB;CAC/H,MAAM,UAAU,YAAY,QAAQ,CAAC,OAAO;EAC1C;EACA,SAAS,YAAY,aAAa;EACnC,CAAC;AAMF,KAHqB,aAAa,cAAc,mBAAmB,aAAa,WAAW,IACpE,CAAC,CAAC,YAGvB,QAAO,QACJ,WAAW;EACV,cAAc,aAAa,WAAW,gBAAgB;EACtD,SAAS;EACV,CAAC,CACD,KAAK;EACJ,SAAS,YAAY;EACrB,SAAS,YAAY;EACrB,QAAQ,YAAY;EACpB,QAAQ,YAAY;EACpB,YAAY,YAAY;EACxB,SAAS,YAAY;EACrB,OAAO,YAAY;EACnB,YAAY,YAAY;EACzB,CAAC,CACD,OAAO;AAKZ,KADuC,eAAe,aAAa,WAEjE,QAAO,QACJ,WAAW;EACV,cAAc,aAAa,WAAW,gBAAgB;EACtD,SAAS;EACV,CAAC,CACD,OAAO;AAIZ,QAAO,QAAQ,oBAAoB;;;oBAtLgE;0BACvB;gBAExB;qBACL"}

package/dist/esm/components/shared/utils/renderHeader.d.ts

@@ -0,0 +1,39 @@
+import { DialogConfig } from "../../dialog/Dialog.types.js";
+import { BaseRecord } from "@refinedev/core";
+import React, { ReactNode } from "react";
+
+//#region src/components/shared/utils/renderHeader.d.ts
+interface HeaderRenderConfig<T extends BaseRecord = any> {
+  /** Actions for the header */
+  actions?: any[];
+  /** CSS class name for the header container */
+  className?: string;
+  /** Description for the header */
+  description?: string;
+  /** Dialog configuration (required for dialog contexts) */
+  dialogConfig?: DialogConfig<T>;
+  /** Header configuration - can be false, ReactNode, or function */
+  header?: ((environment: any) => ReactNode) | false | ReactNode;
+  /** Whether this is rendered in a dialog context */
+  isDialog?: boolean;
+  /** Title for the header */
+  title?: string;
+  /** Configuration object for UnifiedHeader */
+  unifiedHeaderConfig?: any;
+}
+/**
+ * Shared header rendering utility that standardizes header rendering
+ * across dialogs and forms in the portal framework.
+ *
+ * This utility handles:
+ * - Function-based headers with environment context
+ * - Static header content
+ * - Disabled headers (header: false)
+ * - Default UnifiedHeader fallback
+ * - Dialog vs standalone contexts
+ * - Wizard/step form detection for dialogs
+ */
+declare function renderHeader<T extends BaseRecord = any>(config: HeaderRenderConfig<T>): React.ReactNode;
+//#endregion
+export { HeaderRenderConfig, renderHeader };
+//# sourceMappingURL=renderHeader.d.ts.map

package/dist/esm/components/shared/utils/renderHeader.js

@@ -0,0 +1,128 @@
+import { __esmMin } from "../../../_virtual/rolldown_runtime.js";
+import { init_Dialog_types, isDialogHeaderFunction } from "../../dialog/Dialog.types.js";
+import { init_StepControlContext, useOptionalStepControlContext } from "../../form/StepControlContext.js";
+import { Environment, init_builders } from "../environment/builders.js";
+import { UnifiedHeader, init_UnifiedHeader } from "../UnifiedHeader.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/shared/utils/renderHeader.tsx
+/**
+* Shared header rendering utility that standardizes header rendering
+* across dialogs and forms in the portal framework.
+*
+* This utility handles:
+* - Function-based headers with environment context
+* - Static header content
+* - Disabled headers (header: false)
+* - Default UnifiedHeader fallback
+* - Dialog vs standalone contexts
+* - Wizard/step form detection for dialogs
+*/
+function renderHeader(config) {
+	const { actions, className, description, dialogConfig, header, isDialog = false, title, unifiedHeaderConfig } = config;
+	if (header === false) return null;
+	if (header && isDialogHeaderFunction(header)) {
+		let headerEnvironment;
+		if (isDialog && dialogConfig) if (dialogConfig.formConfig && "steps" in dialogConfig.formConfig) {
+			const stepControl = useOptionalStepControlContext();
+			if (stepControl) headerEnvironment = Environment.header().dialog({
+				dialogConfig,
+				onClose: dialogConfig.onClose
+			}).content({
+				actions,
+				description,
+				title
+			}).wizardNavigation({
+				current: stepControl.currentStep,
+				progressStyle: "timeline",
+				steps: dialogConfig.formConfig.steps,
+				total: stepControl.totalSteps
+			}).build();
+			else headerEnvironment = Environment.header().dialog({
+				dialogConfig,
+				onClose: dialogConfig.onClose
+			}).content({
+				actions,
+				description,
+				title
+			}).noneNavigation().build();
+		} else headerEnvironment = Environment.header().dialog({
+			dialogConfig,
+			onClose: dialogConfig.onClose
+		}).content({
+			actions,
+			description,
+			title
+		}).noneNavigation().build();
+		else headerEnvironment = Environment.header().standalone().content({
+			actions,
+			description,
+			title
+		}).noneNavigation().build();
+		return /* @__PURE__ */ jsx("div", {
+			className,
+			children: header(headerEnvironment)
+		});
+	}
+	if (header) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: header
+	});
+	let unifiedHeaderEnvironment;
+	if (isDialog && dialogConfig) if (dialogConfig.formConfig && "steps" in dialogConfig.formConfig) {
+		const stepControl = useOptionalStepControlContext();
+		if (stepControl) unifiedHeaderEnvironment = Environment.header().dialog({
+			dialogConfig,
+			onClose: dialogConfig.onClose
+		}).content({
+			actions,
+			description,
+			title
+		}).wizardNavigation({
+			current: stepControl.currentStep,
+			progressStyle: "timeline",
+			steps: dialogConfig.formConfig.steps,
+			total: stepControl.totalSteps
+		}).build();
+		else unifiedHeaderEnvironment = Environment.header().dialog({
+			dialogConfig,
+			onClose: dialogConfig.onClose
+		}).content({
+			actions,
+			description,
+			title
+		}).noneNavigation().build();
+	} else unifiedHeaderEnvironment = Environment.header().dialog({
+		dialogConfig,
+		onClose: dialogConfig.onClose
+	}).content({
+		actions,
+		description,
+		title
+	}).noneNavigation().build();
+	else unifiedHeaderEnvironment = Environment.header().standalone().content({
+		actions,
+		description,
+		title
+	}).noneNavigation().build();
+	return /* @__PURE__ */ jsx(UnifiedHeader, {
+		config: unifiedHeaderConfig || {
+			actions,
+			description,
+			title
+		},
+		environment: unifiedHeaderEnvironment
+	});
+}
+var init_renderHeader = __esmMin(() => {
+	init_Dialog_types();
+	init_StepControlContext();
+	init_builders();
+	init_UnifiedHeader();
+});
+
+//#endregion
+init_renderHeader();
+export { init_renderHeader, renderHeader };
+//# sourceMappingURL=renderHeader.js.map

package/dist/esm/components/shared/utils/renderHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderHeader.js","names":[],"sources":["../../../../../src/components/shared/utils/renderHeader.tsx"],"sourcesContent":["import type { BaseRecord } from \"@refinedev/core\";\n\nimport React, { ReactNode } from \"react\";\n\nimport {\n  DialogConfig,\n  isDialogHeaderFunction,\n} from \"../../dialog/Dialog.types\";\nimport { useOptionalStepControlContext } from \"../../form/StepControlContext\";\nimport { Environment } from \"../environment/builders\";\nimport { UnifiedHeader } from \"../UnifiedHeader\";\n\nexport interface HeaderRenderConfig<T extends BaseRecord = any> {\n  /** Actions for the header */\n  actions?: any[];\n  /** CSS class name for the header container */\n  className?: string;\n  /** Description for the header */\n  description?: string;\n  /** Dialog configuration (required for dialog contexts) */\n  dialogConfig?: DialogConfig<T>;\n  /** Header configuration - can be false, ReactNode, or function */\n  header?: ((environment: any) => ReactNode) | false | ReactNode;\n  /** Whether this is rendered in a dialog context */\n  isDialog?: boolean;\n  /** Title for the header */\n  title?: string;\n  /** Configuration object for UnifiedHeader */\n  unifiedHeaderConfig?: any;\n}\n\n/**\n * Shared header rendering utility that standardizes header rendering\n * across dialogs and forms in the portal framework.\n *\n * This utility handles:\n * - Function-based headers with environment context\n * - Static header content\n * - Disabled headers (header: false)\n * - Default UnifiedHeader fallback\n * - Dialog vs standalone contexts\n * - Wizard/step form detection for dialogs\n */\nexport function renderHeader<T extends BaseRecord = any>(\n  config: HeaderRenderConfig<T>,\n): React.ReactNode {\n  const {\n    actions,\n    className,\n    description,\n    dialogConfig,\n    header,\n    isDialog = false,\n    title,\n    unifiedHeaderConfig,\n  } = config;\n\n  // If header is explicitly false, don't render anything\n  if (header === false) {\n    return null;\n  }\n\n  // Handle function-based headers\n  if (header && isDialogHeaderFunction(header)) {\n    let headerEnvironment;\n\n    if (isDialog && dialogConfig) {\n      // Dialog context - determine if wizard or simple form\n      if (dialogConfig.formConfig && \"steps\" in dialogConfig.formConfig) {\n        // Wizard dialog - use optional step control context\n        const stepControl = useOptionalStepControlContext();\n        if (stepControl) {\n          headerEnvironment = Environment.header()\n            .dialog({ dialogConfig, onClose: dialogConfig.onClose })\n            .content({ actions, description, title })\n            .wizardNavigation({\n              current: stepControl.currentStep,\n              progressStyle: \"timeline\", // Default progress style\n              steps: dialogConfig.formConfig.steps,\n              total: stepControl.totalSteps,\n            })\n            .build();\n        } else {\n          // Fallback to simple dialog context if not in step control context\n          headerEnvironment = Environment.header()\n            .dialog({ dialogConfig, onClose: dialogConfig.onClose })\n            .content({ actions, description, title })\n            .noneNavigation()\n            .build();\n        }\n      } else {\n        // Simple dialog context\n        headerEnvironment = Environment.header()\n          .dialog({ dialogConfig, onClose: dialogConfig.onClose })\n          .content({ actions, description, title })\n          .noneNavigation()\n          .build();\n      }\n    } else {\n      // Standalone context\n      headerEnvironment = Environment.header()\n        .standalone()\n        .content({ actions, description, title })\n        .noneNavigation()\n        .build();\n    }\n\n    const customHeader = header(headerEnvironment);\n    return <div className={className}>{customHeader}</div>;\n  }\n\n  // Handle static header content\n  if (header) {\n    return <div className={className}>{header}</div>;\n  }\n\n  // Default: Use UnifiedHeader system\n  let unifiedHeaderEnvironment;\n\n  if (isDialog && dialogConfig) {\n    // Dialog context - determine if wizard or simple form\n    if (dialogConfig.formConfig && \"steps\" in dialogConfig.formConfig) {\n      // Wizard dialog - use optional step control context\n      const stepControl = useOptionalStepControlContext();\n      if (stepControl) {\n        unifiedHeaderEnvironment = Environment.header()\n          .dialog({ dialogConfig, onClose: dialogConfig.onClose })\n          .content({ actions, description, title })\n          .wizardNavigation({\n            current: stepControl.currentStep,\n            progressStyle: \"timeline\", // Default progress style\n            steps: dialogConfig.formConfig.steps,\n            total: stepControl.totalSteps,\n          })\n          .build();\n      } else {\n        // Fallback to simple dialog context if not in step control context\n        unifiedHeaderEnvironment = Environment.header()\n          .dialog({ dialogConfig, onClose: dialogConfig.onClose })\n          .content({ actions, description, title })\n          .noneNavigation()\n          .build();\n      }\n    } else {\n      // Simple dialog context\n      unifiedHeaderEnvironment = Environment.header()\n        .dialog({ dialogConfig, onClose: dialogConfig.onClose })\n        .content({ actions, description, title })\n        .noneNavigation()\n        .build();\n    }\n  } else {\n    // Standalone context\n    unifiedHeaderEnvironment = Environment.header()\n      .standalone()\n      .content({ actions, description, title })\n      .noneNavigation()\n      .build();\n  }\n\n  return (\n    <UnifiedHeader\n      config={unifiedHeaderConfig || { actions, description, title }}\n      environment={unifiedHeaderEnvironment}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2CA,SAAgB,aACd,QACiB;CACjB,MAAM,EACJ,SACA,WACA,aACA,cACA,QACA,WAAW,OACX,OACA,wBACE;AAGJ,KAAI,WAAW,MACb,QAAO;AAIT,KAAI,UAAU,uBAAuB,OAAO,EAAE;EAC5C,IAAI;AAEJ,MAAI,YAAY,aAEd,KAAI,aAAa,cAAc,WAAW,aAAa,YAAY;GAEjE,MAAM,cAAc,+BAA+B;AACnD,OAAI,YACF,qBAAoB,YAAY,QAAQ,CACrC,OAAO;IAAE;IAAc,SAAS,aAAa;IAAS,CAAC,CACvD,QAAQ;IAAE;IAAS;IAAa;IAAO,CAAC,CACxC,iBAAiB;IAChB,SAAS,YAAY;IACrB,eAAe;IACf,OAAO,aAAa,WAAW;IAC/B,OAAO,YAAY;IACpB,CAAC,CACD,OAAO;OAGV,qBAAoB,YAAY,QAAQ,CACrC,OAAO;IAAE;IAAc,SAAS,aAAa;IAAS,CAAC,CACvD,QAAQ;IAAE;IAAS;IAAa;IAAO,CAAC,CACxC,gBAAgB,CAChB,OAAO;QAIZ,qBAAoB,YAAY,QAAQ,CACrC,OAAO;GAAE;GAAc,SAAS,aAAa;GAAS,CAAC,CACvD,QAAQ;GAAE;GAAS;GAAa;GAAO,CAAC,CACxC,gBAAgB,CAChB,OAAO;MAIZ,qBAAoB,YAAY,QAAQ,CACrC,YAAY,CACZ,QAAQ;GAAE;GAAS;GAAa;GAAO,CAAC,CACxC,gBAAgB,CAChB,OAAO;AAIZ,SAAO,oBAAC;GAAe;aADF,OAAO,kBAAkB;IACQ;;AAIxD,KAAI,OACF,QAAO,oBAAC;EAAe;YAAY;GAAa;CAIlD,IAAI;AAEJ,KAAI,YAAY,aAEd,KAAI,aAAa,cAAc,WAAW,aAAa,YAAY;EAEjE,MAAM,cAAc,+BAA+B;AACnD,MAAI,YACF,4BAA2B,YAAY,QAAQ,CAC5C,OAAO;GAAE;GAAc,SAAS,aAAa;GAAS,CAAC,CACvD,QAAQ;GAAE;GAAS;GAAa;GAAO,CAAC,CACxC,iBAAiB;GAChB,SAAS,YAAY;GACrB,eAAe;GACf,OAAO,aAAa,WAAW;GAC/B,OAAO,YAAY;GACpB,CAAC,CACD,OAAO;MAGV,4BAA2B,YAAY,QAAQ,CAC5C,OAAO;GAAE;GAAc,SAAS,aAAa;GAAS,CAAC,CACvD,QAAQ;GAAE;GAAS;GAAa;GAAO,CAAC,CACxC,gBAAgB,CAChB,OAAO;OAIZ,4BAA2B,YAAY,QAAQ,CAC5C,OAAO;EAAE;EAAc,SAAS,aAAa;EAAS,CAAC,CACvD,QAAQ;EAAE;EAAS;EAAa;EAAO,CAAC,CACxC,gBAAgB,CAChB,OAAO;KAIZ,4BAA2B,YAAY,QAAQ,CAC5C,YAAY,CACZ,QAAQ;EAAE;EAAS;EAAa;EAAO,CAAC,CACxC,gBAAgB,CAChB,OAAO;AAGZ,QACE,oBAAC;EACC,QAAQ,uBAAuB;GAAE;GAAS;GAAa;GAAO;EAC9D,aAAa;GACb;;;oBA7J6B;0BAC2C;gBACxB;qBACL"}

package/dist/esm/components/shared/utils/stepState.d.ts

@@ -0,0 +1,39 @@
+import { WizardStepDefinition } from "../../form/types.js";
+import "../../index.js";
+
+//#region src/components/shared/utils/stepState.d.ts
+
+/**
+ * Shared utility for calculating step state in wizard navigation
+ * Reduces code duplication between mobile and desktop renderers
+ */
+interface StepState {
+  canNavigate: boolean;
+  isActive: boolean;
+  isCompleted: boolean;
+  isDisabled: boolean;
+  step: WizardStepDefinition;
+}
+/**
+ * Calculate the state of a step at the given index
+ */
+declare function calculateStepState(index: number, current: number, total: number, allowNavigation: boolean, disabledSteps: number[], steps: WizardStepDefinition[]): StepState;
+/**
+ * Create a step click handler that validates navigation permissions
+ */
+declare function createStepClickHandler(index: number, allowNavigation: boolean, disabledSteps: number[], current: number, steps: WizardStepDefinition[], onStepClick?: (stepIndex: number) => void): () => void;
+/**
+ * Resolves whether step navigation is allowed based on step-level and wizard-level configurations
+ * @param wizardLevelConfig - Wizard-level navigation permission (boolean or function)
+ * @param steps - Array of wizard step definitions
+ * @param currentStep - Current step index (1-indexed)
+ * @returns Boolean indicating if step navigation is allowed
+ */
+declare function resolveAllowStepNavigation(wizardLevelConfig: boolean | (() => boolean) | undefined, steps: WizardStepDefinition[], currentStep: number): boolean;
+/**
+ * Create keyboard event handler for step navigation
+ */
+declare function createStepKeyHandler(index: number, allowNavigation: boolean, disabledSteps: number[], current: number, steps: WizardStepDefinition[], onStepClick?: (stepIndex: number) => void): (e: React.KeyboardEvent) => void;
+//#endregion
+export { StepState, calculateStepState, createStepClickHandler, createStepKeyHandler, resolveAllowStepNavigation };
+//# sourceMappingURL=stepState.d.ts.map

package/dist/esm/components/shared/utils/stepState.js

@@ -0,0 +1,65 @@
+import { __esmMin } from "../../../_virtual/rolldown_runtime.js";
+
+//#region src/components/shared/utils/stepState.ts
+/**
+* Calculate the state of a step at the given index
+*/
+function calculateStepState(index, current, total, allowNavigation, disabledSteps, steps) {
+	const step = steps[index] || { title: `Step ${index + 1}` };
+	const isActive = index === current - 1;
+	const isCompleted = index < current - 1;
+	const isDisabled = disabledSteps.includes(index + 1) || index + 1 > current;
+	return {
+		canNavigate: allowNavigation && !isDisabled && index + 1 <= current,
+		isActive,
+		isCompleted,
+		isDisabled,
+		step
+	};
+}
+/**
+* Create a step click handler that validates navigation permissions
+*/
+function createStepClickHandler(index, allowNavigation, disabledSteps, current, steps, onStepClick) {
+	return () => {
+		if (!allowNavigation) return;
+		if (!(disabledSteps.includes(index + 1) || index + 1 > current) && index + 1 <= current && onStepClick) onStepClick(index + 1);
+	};
+}
+/**
+* Resolves whether step navigation is allowed based on step-level and wizard-level configurations
+* @param wizardLevelConfig - Wizard-level navigation permission (boolean or function)
+* @param steps - Array of wizard step definitions
+* @param currentStep - Current step index (1-indexed)
+* @returns Boolean indicating if step navigation is allowed
+*/
+function resolveAllowStepNavigation(wizardLevelConfig, steps, currentStep) {
+	const currentStepDefinition = steps[currentStep - 1];
+	if (currentStepDefinition?.allowStepNavigation !== void 0) {
+		if (typeof currentStepDefinition.allowStepNavigation === "function") return currentStepDefinition.allowStepNavigation();
+		return currentStepDefinition.allowStepNavigation;
+	}
+	if (wizardLevelConfig !== void 0) {
+		if (typeof wizardLevelConfig === "function") return wizardLevelConfig();
+		return wizardLevelConfig;
+	}
+	return true;
+}
+/**
+* Create keyboard event handler for step navigation
+*/
+function createStepKeyHandler(index, allowNavigation, disabledSteps, current, steps, onStepClick) {
+	return (e) => {
+		if (!allowNavigation) return;
+		if (!(disabledSteps.includes(index + 1) || index + 1 > current) && index + 1 <= current && onStepClick && (e.key === "Enter" || e.key === " ")) {
+			e.preventDefault();
+			onStepClick(index + 1);
+		}
+	};
+}
+var init_stepState = __esmMin(() => {});
+
+//#endregion
+init_stepState();
+export { calculateStepState, createStepClickHandler, createStepKeyHandler, init_stepState, resolveAllowStepNavigation };
+//# sourceMappingURL=stepState.js.map

package/dist/esm/components/shared/utils/stepState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepState.js","names":[],"sources":["../../../../../src/components/shared/utils/stepState.ts"],"sourcesContent":["import { WizardStepDefinition } from \"@/components\";\n\n/**\n * Shared utility for calculating step state in wizard navigation\n * Reduces code duplication between mobile and desktop renderers\n */\nexport interface StepState {\n  canNavigate: boolean;\n  isActive: boolean;\n  isCompleted: boolean;\n  isDisabled: boolean;\n  step: WizardStepDefinition;\n}\n\n/**\n * Calculate the state of a step at the given index\n */\nexport function calculateStepState(\n  index: number,\n  current: number,\n  total: number,\n  allowNavigation: boolean,\n  disabledSteps: number[],\n  steps: WizardStepDefinition[],\n): StepState {\n  const step = steps[index] || { title: `Step ${index + 1}` };\n\n  const isActive = index === current - 1;\n  const isCompleted = index < current - 1;\n  const isDisabled = disabledSteps.includes(index + 1) || index + 1 > current;\n\n  const canNavigate = allowNavigation && !isDisabled && index + 1 <= current;\n\n  return {\n    canNavigate,\n    isActive,\n    isCompleted,\n    isDisabled,\n    step,\n  };\n}\n\n/**\n * Create a step click handler that validates navigation permissions\n */\nexport function createStepClickHandler(\n  index: number,\n  allowNavigation: boolean,\n  disabledSteps: number[],\n  current: number,\n  steps: WizardStepDefinition[],\n  onStepClick?: (stepIndex: number) => void,\n): () => void {\n  return () => {\n    if (!allowNavigation) return;\n\n    const isDisabled = disabledSteps.includes(index + 1) || index + 1 > current;\n    if (!isDisabled && index + 1 <= current && onStepClick) {\n      onStepClick(index + 1);\n    }\n  };\n}\n\n/**\n * Resolves whether step navigation is allowed based on step-level and wizard-level configurations\n * @param wizardLevelConfig - Wizard-level navigation permission (boolean or function)\n * @param steps - Array of wizard step definitions\n * @param currentStep - Current step index (1-indexed)\n * @returns Boolean indicating if step navigation is allowed\n */\nexport function resolveAllowStepNavigation(\n  wizardLevelConfig: boolean | (() => boolean) | undefined,\n  steps: WizardStepDefinition[],\n  currentStep: number,\n): boolean {\n  // Check if current step has its own navigation configuration\n  const currentStepDefinition = steps[currentStep - 1];\n  if (currentStepDefinition?.allowStepNavigation !== undefined) {\n    // If step-level config is a function, call it; otherwise use the boolean value\n    if (typeof currentStepDefinition.allowStepNavigation === \"function\") {\n      return currentStepDefinition.allowStepNavigation();\n    }\n    return currentStepDefinition.allowStepNavigation;\n  }\n\n  // Fall back to wizard-level configuration\n  if (wizardLevelConfig !== undefined) {\n    // If wizard-level config is a function, call it; otherwise use the boolean value\n    if (typeof wizardLevelConfig === \"function\") {\n      return wizardLevelConfig();\n    }\n    return wizardLevelConfig;\n  }\n\n  // Default to true if neither is configured\n  return true;\n}\n\n/**\n * Create keyboard event handler for step navigation\n */\nexport function createStepKeyHandler(\n  index: number,\n  allowNavigation: boolean,\n  disabledSteps: number[],\n  current: number,\n  steps: WizardStepDefinition[],\n  onStepClick?: (stepIndex: number) => void,\n): (e: React.KeyboardEvent) => void {\n  return (e: React.KeyboardEvent) => {\n    if (!allowNavigation) return;\n\n    const isDisabled = disabledSteps.includes(index + 1) || index + 1 > current;\n    if (\n      !isDisabled &&\n      index + 1 <= current &&\n      onStepClick &&\n      (e.key === \"Enter\" || e.key === \" \")\n    ) {\n      e.preventDefault();\n      onStepClick(index + 1);\n    }\n  };\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,mBACd,OACA,SACA,OACA,iBACA,eACA,OACW;CACX,MAAM,OAAO,MAAM,UAAU,EAAE,OAAO,QAAQ,QAAQ,KAAK;CAE3D,MAAM,WAAW,UAAU,UAAU;CACrC,MAAM,cAAc,QAAQ,UAAU;CACtC,MAAM,aAAa,cAAc,SAAS,QAAQ,EAAE,IAAI,QAAQ,IAAI;AAIpE,QAAO;EACL,aAHkB,mBAAmB,CAAC,cAAc,QAAQ,KAAK;EAIjE;EACA;EACA;EACA;EACD;;;;;AAMH,SAAgB,uBACd,OACA,iBACA,eACA,SACA,OACA,aACY;AACZ,cAAa;AACX,MAAI,CAAC,gBAAiB;AAGtB,MAAI,EADe,cAAc,SAAS,QAAQ,EAAE,IAAI,QAAQ,IAAI,YACjD,QAAQ,KAAK,WAAW,YACzC,aAAY,QAAQ,EAAE;;;;;;;;;;AAY5B,SAAgB,2BACd,mBACA,OACA,aACS;CAET,MAAM,wBAAwB,MAAM,cAAc;AAClD,KAAI,uBAAuB,wBAAwB,QAAW;AAE5D,MAAI,OAAO,sBAAsB,wBAAwB,WACvD,QAAO,sBAAsB,qBAAqB;AAEpD,SAAO,sBAAsB;;AAI/B,KAAI,sBAAsB,QAAW;AAEnC,MAAI,OAAO,sBAAsB,WAC/B,QAAO,mBAAmB;AAE5B,SAAO;;AAIT,QAAO;;;;;AAMT,SAAgB,qBACd,OACA,iBACA,eACA,SACA,OACA,aACkC;AAClC,SAAQ,MAA2B;AACjC,MAAI,CAAC,gBAAiB;AAGtB,MACE,EAFiB,cAAc,SAAS,QAAQ,EAAE,IAAI,QAAQ,IAAI,YAGlE,QAAQ,KAAK,WACb,gBACC,EAAE,QAAQ,WAAW,EAAE,QAAQ,MAChC;AACA,KAAE,gBAAgB;AAClB,eAAY,QAAQ,EAAE"}

package/dist/esm/components/sizing/index.d.ts

@@ -0,0 +1,97 @@
+//#region src/components/sizing/index.d.ts
+/**
+ * Generic size system for UI components
+ * Provides consistent sizing across dialogs, wizards, and other components
+ */
+/**
+ * Standard size options using Tailwind CSS conventions
+ */
+declare enum ComponentSize {
+  TWO_XL = "2xl",
+  // max-w-2xl (42rem / 672px)
+  THREE_XL = "3xl",
+  // max-w-3xl (48rem / 768px)
+  FOUR_XL = "4xl",
+  // max-w-4xl (56rem / 896px)
+  FIVE_XL = "5xl",
+  // max-w-5xl (64rem / 1024px)
+  SIX_XL = "6xl",
+  // max-w-6xl (72rem / 1152px)
+  SEVEN_XL = "7xl",
+  // max-w-7xl (80rem / 1280px)
+  AUTO = "auto",
+  // Responsive auto width
+  FULL = "full",
+  // 100%
+  LG = "lg",
+  // max-w-lg (32rem / 512px)
+  MD = "md",
+  // max-w-md (28rem / 448px)
+  SM = "sm",
+  // max-w-sm (24rem / 384px)
+  XL = "xl",
+  // max-w-xl (36rem / 576px)
+  XS = "xs",
+}
+/**
+ * Width categories for components
+ */
+declare enum WidthCategory {
+  EXTRA_NARROW = "extra-narrow",
+  // xs, sm
+  NARROW = "narrow",
+  // md, lg
+  MEDIUM = "medium",
+  // xl
+  WIDE = "wide",
+  // 2xl, 3xl
+  EXTRA_WIDE = "extra-wide",
+  // 4xl, 5xl, 6xl, 7xl
+  RESPONSIVE = "responsive",
+}
+/**
+ * Generic size classes mapping that can be used by different components
+ * Each component can use the sizes that make sense for its context
+ */
+declare const COMPONENT_SIZE_CLASSES: {
+  readonly "2xl": "max-w-2xl";
+  readonly "3xl": "max-w-3xl";
+  readonly "4xl": "max-w-4xl";
+  readonly "5xl": "max-w-5xl";
+  readonly "6xl": "max-w-6xl";
+  readonly "7xl": "max-w-7xl";
+  readonly auto: "max-w-[calc(100vw-2rem)] sm:max-w-md";
+  readonly full: "max-w-full";
+  readonly lg: "max-w-lg";
+  readonly md: "max-w-md";
+  readonly sm: "max-w-sm";
+  readonly xl: "max-w-xl";
+  readonly xs: "max-w-xs";
+};
+/**
+ * Helper function to create size-specific props for components
+ */
+interface SizeConfig {
+  /**
+   * Custom size class that overrides the size prop
+   * Useful when you need a specific size not covered by the standard sizes
+   */
+  customSizeClass?: string;
+  size?: ComponentSize;
+}
+/**
+ * Get the CSS class for a given component size
+ * Returns undefined if the size is not valid
+ */
+declare function getComponentSizeClass(size: ComponentSize): string;
+/**
+ * Get the final size class considering both size prop and customSizeClass
+ */
+declare function getSizeClass(config: SizeConfig): string | undefined;
+/**
+ * Type guard to check if a string is a valid ComponentSize
+ */
+declare function isComponentSize(size: string): size is ComponentSize;
+//#endregion
+export { COMPONENT_SIZE_CLASSES, ComponentSize, SizeConfig, WidthCategory, getComponentSizeClass, getSizeClass, isComponentSize };
+//# sourceMappingURL=index.d.ts.map