@ultraviolet/ui 3.12.3 → 3.13.1

package/dist/compositions/OrderSummary/index.js

@@ -0,0 +1,149 @@
+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 { UnitInput, init_UnitInput } from "../../components/UnitInput/index.js";
+import { Units, init_constants } from "./constants.js";
+import en_default, { init_en } from "./locales/en.js";
+import { OrderSummaryContext, init_Provider } from "./Provider.js";
+import { computeCategoriesPrice, computeTotalPrice, init_helpers } from "./helpers.js";
+import { init_styles_css, orderSummaryStyle } from "./styles.css.js";
+import { NonScrollableContent, init_NonScrollableContent } from "./NonScrollableContent.js";
+import { ScrollableContent, init_ScrollableContent } from "./ScrollableContent.js";
+import { useEffect, useMemo, useState } from "react";
+import { cn } from "@ultraviolet/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/compositions/OrderSummary/index.tsx
+var OrderSummary;
+var init_OrderSummary = __esmMin(() => {
+	init_Stack();
+	init_Text();
+	init_UnitInput();
+	init_constants();
+	init_helpers();
+	init_en();
+	init_NonScrollableContent();
+	init_Provider();
+	init_ScrollableContent();
+	init_styles_css();
+	OrderSummary = ({ header, hideTimeUnit = false, periodOptions = Units, valueUnitInput = 1, unitUnitInput = "hours", items, locales = en_default, currency = "EUR", localeFormat = "en-US", footer, children, discount = 0, totalPriceInfo, fractionDigits, hideDetails = false, onChange, onChangeUnitInput, totalPriceDescription, additionalInfo, className, totalPriceInfoPlacement = "left", hideBeforePrice = false, "data-testid": dataTestId, style, priceInformation }) => {
+		const [timePeriodUnit, setTimePeriodUnit] = useState(unitUnitInput);
+		const [timePeriodAmount, setTimePeriodAmount] = useState(valueUnitInput);
+		const categoriesPrice = useMemo(() => computeCategoriesPrice(items, hideTimeUnit, timePeriodAmount, timePeriodUnit), [
+			hideTimeUnit,
+			items,
+			timePeriodAmount,
+			timePeriodUnit
+		]);
+		const unitaryCategoriesPrice = useMemo(() => computeCategoriesPrice(items, hideTimeUnit, 1, "hours"), [items, hideTimeUnit]);
+		const totalPrice = useMemo(() => computeTotalPrice(categoriesPrice, discount, timePeriodUnit), [
+			timePeriodUnit,
+			categoriesPrice,
+			discount
+		]);
+		const unitaryTotalPrice = useMemo(() => computeTotalPrice(unitaryCategoriesPrice, discount, "hours"), [discount, unitaryCategoriesPrice]);
+		const valueContext = useMemo(() => ({
+			categoriesPrice,
+			currency,
+			fractionDigits,
+			hideTimeUnit,
+			items,
+			localeFormat,
+			locales,
+			timePeriodAmount,
+			timePeriodUnit
+		}), [
+			currency,
+			localeFormat,
+			items,
+			categoriesPrice,
+			hideTimeUnit,
+			timePeriodUnit,
+			timePeriodAmount,
+			locales,
+			fractionDigits
+		]);
+		const computePeriodOptions = useMemo(() => {
+			const computedPeriodOptions = [];
+			for (const option of periodOptions) computedPeriodOptions.push({
+				label: locales[`order.summary.units.${option}.label`],
+				value: option
+			});
+			return computedPeriodOptions;
+		}, [periodOptions, locales]);
+		useEffect(() => {
+			onChange === null || onChange === void 0 || onChange(categoriesPrice, totalPrice, unitaryCategoriesPrice, unitaryTotalPrice);
+		}, [
+			categoriesPrice,
+			totalPrice,
+			onChange,
+			unitaryTotalPrice,
+			unitaryCategoriesPrice
+		]);
+		return /* @__PURE__ */ jsx(OrderSummaryContext.Provider, {
+			value: valueContext,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				className: cn(className, orderSummaryStyle.container),
+				"data-testid": dataTestId,
+				justifyContent: hideDetails ? "flex-start" : "space-between",
+				style,
+				children: [
+					header ? /* @__PURE__ */ jsxs(Stack, {
+						alignItems: "center",
+						className: orderSummaryStyle.headerContainer[hideDetails ? "hideDetails" : "showDetails"],
+						direction: "row",
+						gap: 2,
+						justifyContent: "space-between",
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "h3",
+							prominence: "strong",
+							sentiment: "neutral",
+							variant: "headingSmallStrong",
+							children: header
+						}), hideTimeUnit || hideDetails ? null : /* @__PURE__ */ jsx(Stack, {
+							className: orderSummaryStyle.stackBackground,
+							children: /* @__PURE__ */ jsx(UnitInput, {
+								dropdownAlign: "center",
+								maxWidth: "200px",
+								onChange: (value) => {
+									setTimePeriodAmount(value);
+									onChangeUnitInput === null || onChangeUnitInput === void 0 || onChangeUnitInput(timePeriodUnit, value);
+								},
+								onChangeUnitValue: (val) => {
+									setTimePeriodUnit(val);
+									onChangeUnitInput === null || onChangeUnitInput === void 0 || onChangeUnitInput(val, timePeriodAmount);
+								},
+								options: computePeriodOptions,
+								selectInputWidth: "100%",
+								size: "small",
+								templateColumns: "2fr 3fr",
+								unitValue: unitUnitInput,
+								value: valueUnitInput
+							})
+						})]
+					}) : null,
+					hideDetails ? null : /* @__PURE__ */ jsx(ScrollableContent, {}),
+					/* @__PURE__ */ jsx(NonScrollableContent, {
+						additionalInfo,
+						defaultPriceInformation: priceInformation === true || hideDetails && !priceInformation && priceInformation !== false,
+						discount,
+						footer,
+						hideBeforePrice,
+						priceInformation,
+						timePeriodAmount,
+						totalPrice,
+						totalPriceDescription,
+						totalPriceInfo,
+						totalPriceInfoPlacement,
+						unit: timePeriodUnit,
+						children
+					})
+				]
+			})
+		});
+	};
+});
+
+//#endregion
+init_OrderSummary();
+export { OrderSummary, init_OrderSummary };

package/dist/compositions/OrderSummary/locales/en.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    readonly 'order.summary.total': 'Estimated cost';
+    readonly 'order.summary.units.days.label': 'Day(s)';
+    readonly 'order.summary.units.hours.label': 'Hour(s)';
+    readonly 'order.summary.units.minutes.label': 'Minute(s)';
+    readonly 'order.summary.units.months.label': 'Month(s)';
+    readonly 'order.summary.units.seconds.label': 'Second(s)';
+    readonly 'order.summary.units.years.label': 'Year(s)';
+};
+export default _default;
+//# sourceMappingURL=en.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/compositions/OrderSummary/locales/en.ts"],"names":[],"mappings":";aACE,qBAAqB,EAAE,gBAAgB;aACvC,gCAAgC,EAAE,QAAQ;aAC1C,iCAAiC,EAAE,SAAS;aAC5C,mCAAmC,EAAE,WAAW;aAChD,kCAAkC,EAAE,UAAU;aAC9C,mCAAmC,EAAE,WAAW;aAChD,iCAAiC,EAAE,SAAS;;AAP9C,wBAQU"}

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

@@ -0,0 +1,19 @@
+import { __esmMin } from "../../../_virtual/_rolldown/runtime.js";
+
+//#region src/compositions/OrderSummary/locales/en.ts
+var en_default;
+var init_en = __esmMin(() => {
+	en_default = {
+		"order.summary.total": "Estimated cost",
+		"order.summary.units.days.label": "Day(s)",
+		"order.summary.units.hours.label": "Hour(s)",
+		"order.summary.units.minutes.label": "Minute(s)",
+		"order.summary.units.months.label": "Month(s)",
+		"order.summary.units.seconds.label": "Second(s)",
+		"order.summary.units.years.label": "Year(s)"
+	};
+});
+
+//#endregion
+init_en();
+export { en_default as default, init_en };

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/compositions/OrderSummary/styles.css.ts"],"names":[],"mappings":"AA4GA,eAAO,MAAM,iBAAiB;;;YAnBxB,MAAM;gBACJ,SAAS;;YAEX,KAAK;gBACH,SAAS;;;;;;;;;;;;;;CA2BhB,CAAA"}

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

@@ -0,0 +1,40 @@
+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/OrderSummary/styles.css.ts
+var orderSummaryStyle;
+var init_styles_css = __esmMin(() => {
+	init_styles_css_ts_vanilla();
+	orderSummaryStyle = {
+		anchorIcon: createRuntimeFn({
+			defaultClassName: "uv_11nvx2kb",
+			variantClassNames: { size: {
+				medium: "uv_11nvx2kc",
+				small: "uv_11nvx2kd"
+			} },
+			defaultVariants: {},
+			compoundVariants: []
+		}),
+		container: "uv_11nvx2k0",
+		headerContainer: {
+			hideDetails: "uv_11nvx2k2 uv_11nvx2k1",
+			showDetails: "uv_11nvx2k3 uv_11nvx2k1"
+		},
+		stackBackground: "uv_11nvx2k4",
+		nonScrollableContainer: "uv_11nvx2k5",
+		scrollableContainer: "uv_11nvx2k7",
+		details: "uv_11nvx2k8",
+		category: "uv_11nvx2k9",
+		anchor: "uv_11nvx2ka",
+		totalPrice: {
+			priceInformation: "uv_11nvx2ke",
+			"default": "uv_11nvx2kf"
+		},
+		numberInput: "uv_11nvx2k6"
+	};
+});
+
+//#endregion
+init_styles_css();
+export { init_styles_css, orderSummaryStyle };

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

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+
+//#region src/compositions/OrderSummary/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/OrderSummary/types.d.ts

@@ -0,0 +1,127 @@
+import type { UnitInput } from '../../components/UnitInput';
+import type orderSummaryLocales from './locales/en';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
+export type TimeUnit = 'seconds' | 'minutes' | 'hours' | 'days' | 'months';
+type PeriodProps = {
+    hideTimeUnit: true;
+    periodOptions?: never;
+    valueUnitInput?: never;
+    unitUnitInput?: TimeUnit;
+    onChangeUnitInput?: never;
+} | {
+    /**
+     * Optional time input allowing the user to estimate their cost on different time horizon.
+     * Pass the options to be displayed in the dropdown.
+     */
+    hideTimeUnit?: false;
+    periodOptions?: TimeUnit[];
+    valueUnitInput?: ComponentProps<typeof UnitInput>['value'];
+    unitUnitInput?: TimeUnit;
+    onChangeUnitInput?: (unit: string, amount: number) => void;
+};
+type NumberInputType = {
+    /**
+     * Display a number input instead of the price
+     */
+    numberInput?: boolean;
+    numberInputValue?: number | null;
+    numberInputUnit?: string;
+    numberInputControls?: boolean;
+    onChangeInput?: (value: number | null) => void;
+};
+export type PriceTypeSingle = {
+    maxPrice: number;
+    maxPriceWithDiscount: number;
+    totalPrice: number;
+    totalPriceWithDiscount: number;
+    timeUnit: TimeUnit;
+};
+export type PriceType = Record<string, PriceTypeSingle>;
+export type SubCategoryType = {
+    title?: string;
+    icon?: ReactNode;
+    additionalInfo?: ReactNode;
+    price?: number;
+    /**
+     * List of elements to be displayed in the subcategory
+     */
+    details?: ReactNode[];
+    discount?: number;
+    amount?: number[] | number;
+    amountFree?: number;
+    /**
+     * Set to true if the price does not depend on the time
+     */
+    fixedPrice?: boolean;
+    /**
+     * Suffix to be displayed after the price - this will trigger to not display the overall price taking into account the amount for the subcategory.
+     */
+    priceUnit?: string;
+    /**
+     * Hide the price for the line (it will still be counted in the general price)
+     */
+    hidePrice?: boolean;
+    /**
+     * Custom content to display next to the price
+     */
+    customContent?: ReactNode;
+    anchor?: string;
+} & NumberInputType;
+export type ItemsType = {
+    category: string;
+    additionalInfo?: ReactNode;
+    /** Information to add beneath the catecgory name */
+    subTitle?: ReactNode;
+    subCategories?: SubCategoryType[];
+    discount?: number;
+    /**
+     * Hide the price of the category and display the custom content instead
+     */
+    customContent?: ReactNode;
+    /**
+     * Whether the category price can be < 0 (e.g coupons)
+     */
+    allowNegative?: boolean;
+    anchor?: string;
+} & NumberInputType;
+export type CurrencyType = 'EUR';
+export type LocalesFormatType = Intl.LocalesArgument;
+export type OrderSummaryProps = {
+    items: ItemsType[];
+    header?: string;
+    locales?: Record<keyof typeof orderSummaryLocales, string>;
+    currency?: CurrencyType;
+    /**
+     * Locale to format the numbers (prices)
+     */
+    localeFormat?: LocalesFormatType;
+    /**
+     *Total applied to the final cost (due to commitment, beta...)
+     */
+    discount?: number;
+    footer?: ReactNode;
+    children?: ReactNode;
+    totalPriceInfo?: ReactNode;
+    totalPriceInfoPlacement?: 'left' | 'right';
+    totalPriceDescription?: ReactNode;
+    additionalInfo?: string;
+    priceInformation?: ReactNode;
+    hideBeforePrice?: boolean;
+    /**
+     * Number of fraction digit to display in the price details
+     */
+    fractionDigits?: number;
+    /**
+     * Get the computed price for each category.
+     * `price.category = { before: [total, totalMax], after: [totalWithDiscount, totalMaxWithDiscount]}` +
+     * Get the total price +
+     * Get the unitary categories- and total-prices (for 1 hour)
+     */
+    onChange?: (price: PriceType, totalPrice: PriceTypeSingle, unitaryCategoriesPrice: PriceType, unitaryTotalPrice: PriceTypeSingle) => void;
+    hideDetails?: boolean;
+    className?: string;
+    ['data-testid']?: string;
+    style?: CSSProperties;
+} & PeriodProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/compositions/OrderSummary/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureHint.d.ts","sourceRoot":"","sources":["../../../src/compositions/Plans/FeatureHint.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,KAAK,gBAAgB,GAAG;IACtB,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ,CAAA;AAED,eAAO,MAAM,WAAW,aAAc,gBAAgB,4CAsCrD,CAAA"}

package/dist/compositions/Plans/FeatureHint.js

@@ -0,0 +1,50 @@
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Tooltip, init_Tooltip } from "../../components/Tooltip/index.js";
+import { Popover, init_Popover } from "../../components/Popover/index.js";
+import { init_styles_css, plansStyle } from "./styles.css.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { InformationOutlineIcon } from "@ultraviolet/icons/InformationOutlineIcon";
+
+//#region src/compositions/Plans/FeatureHint.tsx
+var FeatureHint;
+var init_FeatureHint = __esmMin(() => {
+	init_Popover();
+	init_Tooltip();
+	init_styles_css();
+	FeatureHint = ({ hint }) => {
+		const [visible, setVisible] = useState(false);
+		if (!hint) return /* @__PURE__ */ jsx("div", {});
+		if (hint.type === "tooltip") return /* @__PURE__ */ jsx(Tooltip, {
+			text: hint.text,
+			children: /* @__PURE__ */ jsx(InformationOutlineIcon, {
+				prominence: "weak",
+				sentiment: "neutral"
+			})
+		});
+		return /* @__PURE__ */ jsx(Popover, {
+			content: hint.content,
+			onClose: () => setVisible(false),
+			title: hint.title,
+			visible,
+			children: /* @__PURE__ */ jsx("button", {
+				className: plansStyle.iconWrapper,
+				"data-testid": "hint-popover",
+				onClick: () => setVisible(true),
+				onKeyDown: (event) => {
+					if (event.key === "Space" || event.key === "Enter") setVisible(true);
+				},
+				tabIndex: 0,
+				type: "button",
+				children: /* @__PURE__ */ jsx(InformationOutlineIcon, {
+					prominence: "weak",
+					sentiment: "neutral"
+				})
+			})
+		});
+	};
+});
+
+//#endregion
+init_FeatureHint();
+export { FeatureHint, init_FeatureHint };

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlanHeader.d.ts","sourceRoot":"","sources":["../../../src/compositions/Plans/PlanHeader.tsx"],"names":[],"mappings":"AAKA,OAAO,YAAY,MAAM,cAAc,CAAA;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,KAAK,eAAe,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,OAAO,YAAY,EAAE,MAAM,CAAC,CAAA;CACpD,CAAA;AAED,eAAO,MAAM,UAAU,wFAQpB,eAAe,4CA6FjB,CAAA"}

package/dist/compositions/Plans/PlanHeader.js

@@ -0,0 +1,113 @@
+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 { Separator, init_Separator } from "../../components/Separator/index.js";
+import { init_styles_css, plansStyle } from "./styles.css.js";
+import locales, { init_en } from "./locales/en.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/compositions/Plans/PlanHeader.tsx
+var PlanHeader;
+var init_PlanHeader = __esmMin(() => {
+	init_Badge();
+	init_Separator();
+	init_Stack();
+	init_Text();
+	init_en();
+	init_styles_css();
+	PlanHeader = ({ fieldName, setFocusedPlan, onChange, currentPlanValue, plan, disabled, locales: locales$1 = locales }) => {
+		var _plan$sentiment;
+		var _plan$sentiment2;
+		var _plan$sentiment3;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [fieldName && onChange && !disabled ? /* @__PURE__ */ jsx("input", {
+			className: plansStyle.headerInput,
+			"data-testid": plan.value,
+			id: plan.value,
+			name: fieldName,
+			onBlur: () => {
+				setFocusedPlan(void 0);
+			},
+			onChange: () => onChange(plan.value),
+			onFocus: () => {
+				setFocusedPlan(plan.value);
+			},
+			type: "radio",
+			value: plan.value
+		}) : null, /* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			className: plansStyle.headerFullHeight,
+			gap: 2,
+			justifyContent: "space-between",
+			children: [/* @__PURE__ */ jsxs(Stack, {
+				alignItems: "center",
+				gap: 3,
+				width: "100%",
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					alignItems: "center",
+					gap: 1,
+					children: [
+						/* @__PURE__ */ jsx(Badge, {
+							disabled,
+							sentiment: plan.sentiment && plan.sentiment !== "black" && plan.sentiment !== "white" ? plan.sentiment : "primary",
+							children: /* @__PURE__ */ jsx("label", {
+								htmlFor: plan.value,
+								children: plan.title
+							})
+						}),
+						plan.titleHeader,
+						/* @__PURE__ */ jsxs(Stack, {
+							alignItems: "center",
+							children: [/* @__PURE__ */ jsx(Text, {
+								as: "span",
+								disabled,
+								sentiment: (_plan$sentiment = plan.sentiment) !== null && _plan$sentiment !== void 0 ? _plan$sentiment : "primary",
+								variant: "headingSmallStrong",
+								children: plan.header.price
+							}), /* @__PURE__ */ jsx(Stack, {
+								style: { minHeight: "16px" },
+								children: plan.header.priceDescription ? /* @__PURE__ */ jsx(Text, {
+									as: "span",
+									disabled,
+									sentiment: (_plan$sentiment2 = plan.sentiment) !== null && _plan$sentiment2 !== void 0 ? _plan$sentiment2 : "primary",
+									variant: "caption",
+									children: plan.header.priceDescription
+								}) : null
+							})]
+						})
+					]
+				}), plan.header.description ? /* @__PURE__ */ jsx("div", {
+					className: plansStyle.description,
+					children: /* @__PURE__ */ jsx(Text, {
+						as: "div",
+						disabled,
+						variant: "caption",
+						children: plan.header.description
+					})
+				}) : null]
+			}), /* @__PURE__ */ jsxs(Stack, {
+				alignItems: "center",
+				gap: 3,
+				width: "100%",
+				children: [
+					plan.header.cta && currentPlanValue !== plan.value ? plan.header.cta : null,
+					plan.header.cta && currentPlanValue === plan.value ? /* @__PURE__ */ jsx("div", {
+						className: plansStyle.currentWrapper,
+						children: /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							disabled,
+							sentiment: (_plan$sentiment3 = plan.sentiment) !== null && _plan$sentiment3 !== void 0 ? _plan$sentiment3 : "primary",
+							variant: "bodySmallStrong",
+							children: locales$1["plans.currentPlan"]
+						})
+					}) : null,
+					plan.header.separator ? /* @__PURE__ */ jsx(Separator, { className: plansStyle.fullSizeSeparator }) : null
+				]
+			})]
+		})] });
+	};
+});
+
+//#endregion
+init_PlanHeader();
+export { PlanHeader, init_PlanHeader };

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

@@ -0,0 +1,25 @@
+import PlansLocales from './locales/en';
+import type { Feature, PlanType } from './types';
+import type { CSSProperties } from 'react';
+type PlansProps<T extends string> = {
+    fieldName?: string;
+    onChange?: (newPlanValue: string | undefined) => void;
+    value?: string;
+    features: Feature<T>[];
+    plans: PlanType<T>[];
+    hideFeatureText?: boolean;
+    hideLabels?: boolean;
+    locales?: Record<keyof typeof PlansLocales, string>;
+    style?: CSSProperties;
+    /** Highlights a plan. Use plan value and define the content of the highlight badge */
+    highlight?: {
+        plan: string;
+        content: string;
+    };
+};
+/**
+ * Allows users to compare different offers, providing varying features and pricing options to suit different needs.
+ */
+export declare const Plans: <T extends string>({ fieldName, onChange, value, features, plans, hideFeatureText, hideLabels, locales, style, highlight, }: PlansProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/compositions/Plans/index.tsx"],"names":[],"mappings":"AASA,OAAO,YAAY,MAAM,cAAc,CAAA;AAIvC,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,KAAK,UAAU,CAAC,CAAC,SAAS,MAAM,IAAI;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IACtB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,OAAO,YAAY,EAAE,MAAM,CAAC,CAAA;IACnD,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,sFAAsF;IACtF,SAAS,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAA;CAC9C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,4GAWnC,UAAU,CAAC,CAAC,CAAC,4CA4Nf,CAAA"}