@ultraviolet/ui 3.12.3 → 3.13.1

package/dist/compositions/Plans/index.js

@@ -0,0 +1,188 @@
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../components/Stack/index.js";
+import { Text, init_Text } from "../../components/Text/index.js";
+import { Badge, init_Badge } from "../../components/Badge/index.js";
+import { init_styles_css, plansStyle } from "./styles.css.js";
+import { FeatureHint, init_FeatureHint } from "./FeatureHint.js";
+import locales, { init_en } from "./locales/en.js";
+import { PlanHeader, init_PlanHeader } from "./PlanHeader.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
+import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
+
+//#region src/compositions/Plans/index.tsx
+var Plans;
+var init_Plans = __esmMin(() => {
+	init_Badge();
+	init_Stack();
+	init_Text();
+	init_FeatureHint();
+	init_en();
+	init_PlanHeader();
+	init_styles_css();
+	Plans = ({ fieldName, onChange, value, features, plans, hideFeatureText = false, hideLabels = false, locales: locales$1 = locales, style, highlight }) => {
+		const hasCardBehavior = !!(fieldName && onChange);
+		const [focusedPlan, setFocusedPlan] = useState();
+		const [hoveredPlan, setHoveredPlan] = useState();
+		return /* @__PURE__ */ jsxs("table", {
+			className: plansStyle.plans,
+			style,
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", {
+				className: plansStyle.cell({ hide: hideLabels }),
+				children: hideFeatureText ? null : /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "headingSmallStrong",
+					children: locales$1["plans.features"]
+				})
+			}), plans.map((plan) => {
+				const computedDisabled = !!(plan.outOfStock || plan.disabled);
+				const selectable = hasCardBehavior && !computedDisabled;
+				const isHighlighted = plan.value === (highlight === null || highlight === void 0 ? void 0 : highlight.plan);
+				const hoverPlan = (newValue) => {
+					if (selectable) setHoveredPlan(newValue);
+				};
+				return /* @__PURE__ */ jsxs("td", {
+					className: plansStyle.cell({
+						activeColor: value === plan.value || hoveredPlan === plan.value || isHighlighted && !plan.outOfStock,
+						disabled: computedDisabled,
+						focus: focusedPlan === plan.value,
+						hideLabels,
+						selectable
+					}),
+					onBlur: () => hoverPlan(),
+					onClick: selectable ? () => onChange(plan.value) : void 0,
+					onFocus: () => hoverPlan(plan.value),
+					onKeyDown: (event) => {
+						if ([" ", "Enter"].includes(event.key) && selectable) onChange(plan.value);
+					},
+					onMouseOut: () => hoverPlan(),
+					onMouseOver: () => hoverPlan(plan.value),
+					children: [
+						plan.outOfStock ? /* @__PURE__ */ jsx(Badge, {
+							className: plansStyle.outOfStockBadge,
+							size: "small",
+							children: locales$1["plans.outOfStock"]
+						}) : null,
+						plan.header.quotas && !plan.outOfStock ? /* @__PURE__ */ jsx(Badge, {
+							className: plansStyle.outOfStockBadge,
+							size: "small",
+							children: plan.header.quotas
+						}) : null,
+						isHighlighted && !plan.outOfStock && !plan.header.quotas ? /* @__PURE__ */ jsx(Badge, {
+							className: plansStyle.outOfStockBadge,
+							prominence: "strong",
+							sentiment: "primary",
+							size: "small",
+							children: highlight.content
+						}) : null,
+						/* @__PURE__ */ jsx(PlanHeader, {
+							currentPlanValue: value,
+							disabled: computedDisabled,
+							fieldName,
+							onChange,
+							plan,
+							setFocusedPlan
+						})
+					]
+				}, plan.value);
+			})] }) }), /* @__PURE__ */ jsx("tbody", { children: features.map((feature) => {
+				var _feature$key;
+				if ("group" in feature) return /* @__PURE__ */ jsxs("tr", {
+					className: hideLabels ? plansStyle.rowHidden : "",
+					children: [/* @__PURE__ */ jsx("td", {
+						className: plansStyle.cell({}),
+						children: /* @__PURE__ */ jsxs(Stack, {
+							alignItems: "center",
+							direction: "row",
+							gap: 1,
+							children: [/* @__PURE__ */ jsx(Text, {
+								as: "p",
+								className: plansStyle.uppercaseText,
+								sentiment: "neutral",
+								variant: "bodySmallStronger",
+								children: feature.group
+							}), feature.hint ? /* @__PURE__ */ jsx(FeatureHint, { hint: feature.hint }) : null]
+						})
+					}), plans.map((plan) => {
+						const isHighlighted = plan.value === (highlight === null || highlight === void 0 ? void 0 : highlight.plan);
+						return /* @__PURE__ */ jsx("td", { className: plansStyle.cell({
+							activeColor: value === plan.value || hoveredPlan === plan.value || isHighlighted && !plan.outOfStock,
+							disabled: plan.outOfStock || plan.disabled,
+							focus: focusedPlan === plan.value,
+							hide: hideLabels
+						}) }, plan.value);
+					})]
+				}, feature.group);
+				const featureKey = (_feature$key = feature.key) !== null && _feature$key !== void 0 ? _feature$key : "";
+				return /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", {
+					className: plansStyle.cell({ hide: hideLabels }),
+					children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsxs(Stack, {
+						alignItems: "center",
+						direction: "row",
+						gap: 1,
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "p",
+							variant: "bodyStrong",
+							children: feature.text
+						}), /* @__PURE__ */ jsx(FeatureHint, { hint: feature.hint })]
+					}), feature.description ? /* @__PURE__ */ jsx(Text, {
+						as: "div",
+						placement: "start",
+						prominence: "weak",
+						sentiment: "neutral",
+						variant: "caption",
+						children: feature.description
+					}) : null] })
+				}), plans.map((plan) => {
+					const computedDisabled = plan.outOfStock || plan.disabled;
+					const selectable = hasCardBehavior && !computedDisabled;
+					const isHighlighted = plan.value === (highlight === null || highlight === void 0 ? void 0 : highlight.plan);
+					const hoverPlan = (newValue) => {
+						if (selectable) setHoveredPlan(newValue);
+					};
+					return /* @__PURE__ */ jsxs("td", {
+						className: plansStyle.cell({
+							activeColor: value === plan.value || hoveredPlan === plan.value || isHighlighted && !plan.outOfStock,
+							disabled: computedDisabled,
+							focus: focusedPlan === plan.value,
+							hideLabels,
+							selectable
+						}),
+						"data-testid": `${plan.value}-${feature.key}`,
+						onBlur: () => {},
+						onClick: selectable ? () => onChange(plan.value) : void 0,
+						onFocus: () => {},
+						onKeyDown: () => {},
+						onMouseOut: () => hoverPlan(),
+						onMouseOver: () => hoverPlan(plan.value),
+						children: [
+							plan.data[featureKey] === false ? /* @__PURE__ */ jsx(CloseIcon, {
+								disabled: computedDisabled,
+								prominence: "weak",
+								sentiment: "neutral",
+								size: "large"
+							}) : null,
+							plan.data[featureKey] === true ? /* @__PURE__ */ jsx(CheckCircleIcon, {
+								disabled: computedDisabled,
+								sentiment: "success",
+								size: "medium"
+							}) : null,
+							typeof plan.data[featureKey] !== "boolean" ? /* @__PURE__ */ jsx(Text, {
+								as: "span",
+								disabled: computedDisabled,
+								sentiment: "neutral",
+								variant: "body",
+								children: plan.data[featureKey]
+							}) : null
+						]
+					}, plan.value);
+				})] }, feature.key);
+			}) })]
+		});
+	};
+});
+
+//#endregion
+init_Plans();
+export { Plans, init_Plans };

package/dist/compositions/Plans/locales/en.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/compositions/Plans/locales/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,OAAO;IACX,mBAAmB;IACnB,gBAAgB;IAChB,kBAAkB;CACnB,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/compositions/Plans/locales/en.js

@@ -0,0 +1,15 @@
+import { __esmMin } from "../../../_virtual/_rolldown/runtime.js";
+
+//#region src/compositions/Plans/locales/en.ts
+var locales;
+var init_en = __esmMin(() => {
+	locales = {
+		"plans.currentPlan": "Current plan",
+		"plans.features": "Features",
+		"plans.outOfStock": "Out of stock"
+	};
+});
+
+//#endregion
+init_en();
+export { locales as default, init_en };

package/dist/compositions/Plans/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/compositions/Plans/styles.css.ts"],"names":[],"mappings":"AAiKA,eAAO,MAAM,UAAU;;;;;;YArFjB,IAAI;gBACF,SAAS;oBACP,+FAA+F;wBAE3F,WAAW;;;;;;YAMnB,IAAI;gBACF,eAAe;;;;;;;;;;;;;;;;;;;;;;;oBAwBb,SAAS;wBACP,WAAW;;;;;;;;;;;YAWjB,IAAI;gBACF,SAAS;oBACP,SAAS;wBACP,aAAa;;;;;;;;;;;;;CA+CxB,CAAA"}

package/dist/compositions/Plans/styles.css.js

@@ -0,0 +1,47 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/compositions/Plans/styles.css.ts
+var plansStyle;
+var init_styles_css = __esmMin(() => {
+	init_styles_css_ts_vanilla();
+	plansStyle = {
+		iconWrapper: "uv_2xypr50",
+		plans: "uv_2xypr51",
+		outOfStockBadge: "uv_2xypr52",
+		cell: createRuntimeFn({
+			defaultClassName: "uv_2xypr53",
+			variantClassNames: {
+				activeColor: { true: "uv_2xypr54" },
+				disabled: { true: "uv_2xypr55" },
+				focus: { true: "uv_2xypr56" },
+				hide: { true: "uv_2xypr57" },
+				hideLabels: { true: "uv_2xypr58" },
+				selectable: { true: "uv_2xypr59" },
+				spaceAfter: { true: "uv_2xypr5a" }
+			},
+			defaultVariants: {
+				activeColor: false,
+				disabled: false,
+				focus: false,
+				hide: false,
+				hideLabels: false,
+				selectable: false,
+				spaceAfter: false
+			},
+			compoundVariants: []
+		}),
+		rowHidden: "uv_2xypr5b",
+		uppercaseText: "uv_2xypr5c",
+		headerInput: "uv_2xypr5d",
+		headerFullHeight: "uv_2xypr5e",
+		description: "uv_2xypr5f",
+		fullSizeSeparator: "uv_2xypr5g",
+		currentWrapper: "uv_2xypr5h"
+	};
+});
+
+//#endregion
+init_styles_css();
+export { init_styles_css, plansStyle };

package/dist/compositions/Plans/styles.css.ts.vanilla.js

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+
+//#region src/compositions/Plans/styles.css.ts.vanilla.css
+var init_styles_css_ts_vanilla = __esmMin(() => {});
+
+//#endregion
+init_styles_css_ts_vanilla();
+export { init_styles_css_ts_vanilla };

package/dist/compositions/Plans/types.d.ts

@@ -0,0 +1,38 @@
+import type { Text } from '../../components/Text';
+import type { ComponentProps, ReactNode } from 'react';
+export type Hint = {
+    type: 'tooltip';
+    text: string;
+} | {
+    type: 'popover';
+    title: string;
+    content: ReactNode;
+};
+export type PlanType<T extends string> = {
+    value: string;
+    title: string;
+    titleHeader?: ReactNode;
+    sentiment?: ComponentProps<typeof Text>['sentiment'];
+    header: {
+        description?: ReactNode;
+        price: string;
+        quotas?: string;
+        priceDescription?: string;
+        cta?: ReactNode;
+        separator?: ReactNode;
+    };
+    outOfStock?: boolean;
+    disabled?: boolean;
+    data: Record<T, string | number | undefined | ReactNode>;
+};
+export type Feature<T extends string> = {
+    key: T;
+    text: string;
+    description?: string;
+    spaceAfter?: boolean;
+    hint?: Hint;
+} | {
+    group: string;
+    hint?: Hint;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/compositions/Plans/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/compositions/Plans/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,MAAM,MAAM,IAAI,GACZ;IACE,IAAI,EAAE,SAAS,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;CACb,GACD;IACE,IAAI,EAAE,SAAS,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,CAAA;CACnB,CAAA;AAEL,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,IAAI;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,WAAW,CAAC,CAAA;IACpD,MAAM,EAAE;QACN,WAAW,CAAC,EAAE,SAAS,CAAA;QACvB,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,GAAG,CAAC,EAAE,SAAS,CAAA;QACf,SAAS,CAAC,EAAE,SAAS,CAAA;KACtB,CAAA;IACD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA;CACzD,CAAA;AAED,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,MAAM,IAChC;IACE,GAAG,EAAE,CAAC,CAAA;IACN,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ,GACD;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAA;CAAE,CAAA"}

package/dist/compositions/SteppedListCard/Step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/compositions/SteppedListCard/Step.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,KAAK,SAAS,GAAG;IACf;;OAEG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,WAAW,+EAMrB,SAAS,4CAyCX,CAAA"}

package/dist/compositions/SteppedListCard/Step.js

@@ -0,0 +1,55 @@
+'use client';
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Text, init_Text } from "../../components/Text/index.js";
+import { StepList, init_StepList } from "../../components/StepList/index.js";
+import { Data, init_helper } from "./helper.js";
+import { init_styles_css, steppedListCardStyle } from "./styles.css.js";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon } from "@ultraviolet/icons/CheckIcon";
+
+//#region src/compositions/SteppedListCard/Step.tsx
+var SteppedList;
+var init_Step = __esmMin(() => {
+	init_StepList();
+	init_Text();
+	init_helper();
+	init_styles_css();
+	SteppedList = ({ stepNumber, stepTitle, completed, stepIcon, "data-testid": dataTestId }) => {
+		const containerData = useContext(Data);
+		const active = containerData.currentStep === stepNumber;
+		return completed ? /* @__PURE__ */ jsx(StepList.Item, {
+			bulletContent: /* @__PURE__ */ jsx(CheckIcon, {}),
+			className: steppedListCardStyle.step,
+			"data-testid": dataTestId,
+			onClick: () => containerData.setCurrentStep(stepNumber),
+			prominence: active ? "strong" : "default",
+			sentiment: "primary",
+			size: "small",
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "h3",
+				className: steppedListCardStyle.stepTitle,
+				variant: active ? "bodyStrong" : "body",
+				children: stepTitle
+			})
+		}) : /* @__PURE__ */ jsx(StepList.Item, {
+			bulletContent: stepIcon !== null && stepIcon !== void 0 ? stepIcon : String(stepNumber),
+			className: steppedListCardStyle.step,
+			"data-testid": dataTestId,
+			onClick: () => containerData.setCurrentStep(stepNumber),
+			prominence: active ? "strong" : void 0,
+			sentiment: active ? "primary" : void 0,
+			size: "small",
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "h3",
+				className: steppedListCardStyle.stepTitle,
+				variant: active ? "bodyStrong" : "body",
+				children: stepTitle
+			})
+		});
+	};
+});
+
+//#endregion
+init_Step();
+export { SteppedList, init_Step };

package/dist/compositions/SteppedListCard/SteppedListContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SteppedListContent.d.ts","sourceRoot":"","sources":["../../../src/compositions/SteppedListCard/SteppedListContent.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,KAAK,uBAAuB,GAAG;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IAC9E,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AACD,eAAO,MAAM,kBAAkB,kEAO5B,uBAAuB,mDAoDzB,CAAA"}

package/dist/compositions/SteppedListCard/SteppedListContent.js

@@ -0,0 +1,64 @@
+'use client';
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../components/Stack/index.js";
+import { Text, init_Text } from "../../components/Text/index.js";
+import { Data, init_helper, nextStep } from "./helper.js";
+import { init_styles_css, steppedListCardStyle } from "./styles.css.js";
+import { useContext, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/compositions/SteppedListCard/SteppedListContent.tsx
+var SteppedListContent;
+var init_SteppedListContent = __esmMin(() => {
+	init_Stack();
+	init_Text();
+	init_helper();
+	init_styles_css();
+	SteppedListContent = ({ subHeader, children, image, stepNumber, completed = false, style }) => {
+		const { setDone, currentStep, done, setCurrentStep, numberOfSteps, setHidden, onClickHide } = useContext(Data);
+		useEffect(() => {
+			setDone((prevDone) => {
+				const updatedDone = [...prevDone];
+				updatedDone[stepNumber - 1] = completed;
+				return updatedDone;
+			});
+		}, [
+			completed,
+			setDone,
+			stepNumber
+		]);
+		if (stepNumber === currentStep) return /* @__PURE__ */ jsxs(Stack, {
+			className: steppedListCardStyle.content,
+			style,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: steppedListCardStyle.subHeader,
+					children: typeof subHeader === "string" ? /* @__PURE__ */ jsx(Text, {
+						as: "h3",
+						variant: "headingSmallStrong",
+						children: subHeader
+					}) : subHeader
+				}),
+				typeof children === "function" ? children((completedArg) => nextStep({
+					completed: completedArg,
+					done,
+					numberOfSteps,
+					onClickHide,
+					setCompleted: setDone,
+					setCurrentStep,
+					setHidden,
+					stepNumber
+				})) : children,
+				/* @__PURE__ */ jsx("div", {
+					className: steppedListCardStyle.image,
+					children: image
+				})
+			]
+		});
+		return null;
+	};
+});
+
+//#endregion
+init_SteppedListContent();
+export { SteppedListContent, init_SteppedListContent };

package/dist/compositions/SteppedListCard/helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/compositions/SteppedListCard/helper.ts"],"names":[],"mappings":"AAEA,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;IAC5D,aAAa,EAAE,MAAM,CAAA;IACrB,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC,CAAA;IACxD,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;IACxD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,IAAI,sCAQf,CAAA;AAEF,KAAK,aAAa,GAAG;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC,CAAA;IAC7D,UAAU,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;IAC5D,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;IACxD,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,0GASlB,aAAa,SAaf,CAAA"}

package/dist/compositions/SteppedListCard/helper.js

@@ -0,0 +1,33 @@
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { createContext } from "react";
+
+//#region src/compositions/SteppedListCard/helper.ts
+var Data, nextStep;
+var init_helper = __esmMin(() => {
+	Data = createContext({
+		currentStep: 1,
+		done: [
+			false,
+			false,
+			false,
+			false,
+			false
+		],
+		numberOfSteps: 1,
+		onClickHide: () => {},
+		setCurrentStep: () => {},
+		setDone: () => {},
+		setHidden: () => {}
+	});
+	nextStep = ({ completed, setCompleted, stepNumber, setCurrentStep, numberOfSteps, setHidden, done, onClickHide }) => {
+		const newValue = completed === void 0 ? done[stepNumber - 1] : completed;
+		setCompleted(done.map((item, index) => index === stepNumber - 1 ? newValue : item));
+		if (numberOfSteps > stepNumber) setCurrentStep(stepNumber + 1);
+		else if (onClickHide) onClickHide();
+		else setHidden(true);
+	};
+});
+
+//#endregion
+init_helper();
+export { Data, init_helper, nextStep };

package/dist/compositions/SteppedListCard/index.d.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+type SteppedListContainerProps = {
+    /**
+     * Title of the section, introduces the feature.
+     */
+    header: ReactNode;
+    /**
+     * List of steps
+     */
+    steps: (string | {
+        title: string;
+        icon: ReactNode;
+    })[];
+    /**
+     * Define here the content of each step
+     */
+    children: ReactNode;
+    /**
+     * Function called when the component is closed. This function will overload the default behavior.
+     */
+    onClickHide?: () => void;
+} & ({
+    /**
+     * Show the toggle option
+     */
+    showToggleOption: false;
+    hideTooltipText?: never;
+    hideText?: never;
+    showText?: never;
+    showTooltipText?: never;
+} | {
+    /**
+     * Show the toggle option
+     */
+    showToggleOption?: true;
+    /**
+     * Text of the tooltip on the hide button
+     */
+    hideTooltipText?: string;
+    /**
+     * Text of the "hide" button
+     */
+    hideText?: string;
+    /**
+     * Text of the "show" button
+     */
+    showText?: string;
+    /**
+     * Text of tooltip on the "show" button
+     */
+    showTooltipText?: string;
+});
+declare function SteppedListCard({ header, showToggleOption, hideTooltipText, hideText, showText, showTooltipText, children, steps, onClickHide }: SteppedListContainerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SteppedListCard {
+    var Step: ({ subHeader, children, image, stepNumber, completed, style, }: {
+        subHeader?: ReactNode;
+        children: ((nextStep: (completed?: boolean) => void) => ReactNode) | ReactNode;
+        image?: ReactNode;
+        stepNumber: number;
+        completed?: boolean;
+        style?: import("react").CSSProperties;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+}
+export { SteppedListCard };
+//# sourceMappingURL=index.d.ts.map

package/dist/compositions/SteppedListCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/compositions/SteppedListCard/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,KAAK,yBAAyB,GAAG;IAC/B;;OAEG;IACH,MAAM,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,KAAK,EAAE,CAAC,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC,EAAE,CAAA;IACtD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,GAAG,CACA;IACE;;OAEG;IACH,gBAAgB,EAAE,KAAK,CAAA;IACvB,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,eAAe,CAAC,EAAE,KAAK,CAAA;CACxB,GACD;IACE;;OAEG;IACH,gBAAgB,CAAC,EAAE,IAAI,CAAA;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CACJ,CAAA;iCAMwB,EACvB,MAAM,EACN,gBAAuB,EACvB,eAAe,EACf,QAAiB,EACjB,QAAiB,EACjB,eAAe,EACf,QAAQ,EACR,KAAK,EACL,WAAW,EACZ,EAAE,yBAAyB;;;;;;;;;;;AAqG5B,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/compositions/SteppedListCard/index.js

@@ -0,0 +1,106 @@
+'use client';
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../components/Stack/index.js";
+import { Text, init_Text } from "../../components/Text/index.js";
+import { Button, init_Button } from "../../components/Button/index.js";
+import { Row, init_Row } from "../../components/Row/index.js";
+import { Card, init_Card } from "../../components/Card/index.js";
+import { StepList, init_StepList } from "../../components/StepList/index.js";
+import { Data, init_helper } from "./helper.js";
+import { init_styles_css, steppedListCardStyle } from "./styles.css.js";
+import { SteppedList, init_Step } from "./Step.js";
+import { SteppedListContent, init_SteppedListContent } from "./SteppedListContent.js";
+import { Children, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/compositions/SteppedListCard/index.tsx
+var SteppedListCard;
+var init_SteppedListCard = __esmMin(() => {
+	init_Button();
+	init_Card();
+	init_Row();
+	init_Stack();
+	init_StepList();
+	init_Text();
+	init_helper();
+	init_Step();
+	init_SteppedListContent();
+	init_styles_css();
+	SteppedListCard = ({ header, showToggleOption = true, hideTooltipText, hideText = "Hide", showText = "Show", showTooltipText, children, steps, onClickHide }) => {
+		const numberOfSteps = Children.count(children);
+		const [currentStep, setCurrentStep] = useState(1);
+		const [hidden, setHidden] = useState(false);
+		const [done, setDone] = useState(new Array(steps.length).fill(false));
+		const values = useMemo(() => ({
+			currentStep,
+			done,
+			numberOfSteps,
+			onClickHide,
+			setCurrentStep,
+			setDone,
+			setHidden
+		}), [
+			currentStep,
+			setCurrentStep,
+			numberOfSteps,
+			done,
+			setDone,
+			setHidden,
+			onClickHide
+		]);
+		const onClickHideButton = () => {
+			if (onClickHide) onClickHide();
+			else setHidden(!hidden);
+		};
+		return /* @__PURE__ */ jsx(Data.Provider, {
+			value: values,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				gap: 2,
+				width: "100%",
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					alignItems: "center",
+					direction: "row",
+					justifyContent: "space-between",
+					children: [typeof header === "string" ? /* @__PURE__ */ jsx(Text, {
+						as: "h3",
+						variant: "heading",
+						children: header
+					}) : header, showToggleOption ? /* @__PURE__ */ jsx(Button, {
+						className: steppedListCardStyle.hideButton,
+						onClick: onClickHideButton,
+						sentiment: "neutral",
+						size: "small",
+						tooltip: hidden ? showTooltipText : hideTooltipText,
+						variant: "ghost",
+						children: hidden ? showText : hideText
+					}) : null]
+				}), hidden ? null : /* @__PURE__ */ jsx(Card, {
+					className: steppedListCardStyle.steppedListCard,
+					children: /* @__PURE__ */ jsxs(Row, {
+						templateColumns: "1fr 3fr",
+						children: [/* @__PURE__ */ jsx(Stack, {
+							className: steppedListCardStyle.wrapper,
+							direction: "column",
+							gap: 4,
+							children: /* @__PURE__ */ jsx(StepList, { children: steps.map((step, index) => {
+								const stepTitle = typeof step === "string" ? step : step.title;
+								const stepIcon = typeof step === "string" ? void 0 : step.icon;
+								return /* @__PURE__ */ jsx(SteppedList, {
+									completed: done[index],
+									stepIcon,
+									stepNumber: index + 1,
+									stepTitle
+								}, stepTitle);
+							}) })
+						}), children]
+					})
+				})]
+			})
+		});
+	};
+	SteppedListCard.Step = SteppedListContent;
+});
+
+//#endregion
+init_SteppedListCard();
+export { SteppedListCard, init_SteppedListCard };

package/dist/compositions/SteppedListCard/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/compositions/SteppedListCard/styles.css.ts"],"names":[],"mappings":"AAmDA,eAAO,MAAM,oBAAoB;;;;;;;;;CAShC,CAAA"}