@ultraviolet/ui 3.11.1 → 3.12.0

package/dist/components/compositions/Plans/index.js

@@ -1,177 +1,188 @@
-import { __name } from "../../../_virtual/_rolldown/runtime.js";
-import { Stack } from "../../Stack/index.js";
-import { Text } from "../../Text/index.js";
-import { Badge } from "../../Badge/index.js";
-import { plans, plansCell, plansOutOfStockBadge, plansRowHidden, plansUppercaseText } from "./styles.css.js";
-import { FeatureHint } from "./FeatureHint.js";
-import locales from "./locales/en.js";
-import { PlanHeader } from "./PlanHeader.js";
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../Stack/index.js";
+import { Text, init_Text } from "../../Text/index.js";
+import { Badge, init_Badge } from "../../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/components/compositions/Plans/index.tsx
-const Plans = ({ fieldName, onChange, value, features, plans: plans$1, 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: plans,
-		style,
-		children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", {
-			className: plansCell({ hide: hideLabels }),
-			children: hideFeatureText ? null : /* @__PURE__ */ jsx(Text, {
-				as: "span",
-				variant: "headingSmallStrong",
-				children: locales$1["plans.features"]
-			})
-		}), plans$1.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: plansCell({
-					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: plansOutOfStockBadge,
-						size: "small",
-						children: locales$1["plans.outOfStock"]
-					}) : null,
-					plan.header.quotas && !plan.outOfStock ? /* @__PURE__ */ jsx(Badge, {
-						className: plansOutOfStockBadge,
-						size: "small",
-						children: plan.header.quotas
-					}) : null,
-					isHighlighted && !plan.outOfStock && !plan.header.quotas ? /* @__PURE__ */ jsx(Badge, {
-						className: plansOutOfStockBadge,
-						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 ? plansRowHidden : "",
-				children: [/* @__PURE__ */ jsx("td", {
-					className: plansCell({}),
-					children: /* @__PURE__ */ jsxs(Stack, {
-						alignItems: "center",
-						direction: "row",
-						gap: 1,
-						children: [/* @__PURE__ */ jsx(Text, {
-							as: "p",
-							className: plansUppercaseText,
-							sentiment: "neutral",
-							variant: "bodySmallStronger",
-							children: feature.group
-						}), feature.hint ? /* @__PURE__ */ jsx(FeatureHint, { hint: feature.hint }) : null]
-					})
-				}), plans$1.map((plan) => {
-					const isHighlighted = plan.value === (highlight === null || highlight === void 0 ? void 0 : highlight.plan);
-					return /* @__PURE__ */ jsx("td", { className: plansCell({
-						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: plansCell({ 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$1.map((plan) => {
-				const computedDisabled = plan.outOfStock || plan.disabled;
+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: plansCell({
+					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: () => {},
+					onBlur: () => hoverPlan(),
 					onClick: selectable ? () => onChange(plan.value) : void 0,
-					onFocus: () => {},
-					onKeyDown: () => {},
+					onFocus: () => hoverPlan(plan.value),
+					onKeyDown: (event) => {
+						if ([" ", "Enter"].includes(event.key) && selectable) onChange(plan.value);
+					},
 					onMouseOut: () => hoverPlan(),
 					onMouseOver: () => hoverPlan(plan.value),
 					children: [
-						plan.data[featureKey] === false ? /* @__PURE__ */ jsx(CloseIcon, {
-							disabled: computedDisabled,
-							prominence: "weak",
-							sentiment: "neutral",
-							size: "large"
+						plan.outOfStock ? /* @__PURE__ */ jsx(Badge, {
+							className: plansStyle.outOfStockBadge,
+							size: "small",
+							children: locales$1["plans.outOfStock"]
 						}) : null,
-						plan.data[featureKey] === true ? /* @__PURE__ */ jsx(CheckCircleIcon, {
-							disabled: computedDisabled,
-							sentiment: "success",
-							size: "medium"
+						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,
-						typeof plan.data[featureKey] !== "boolean" ? /* @__PURE__ */ jsx(Text, {
-							as: "span",
+						/* @__PURE__ */ jsx(PlanHeader, {
+							currentPlanValue: value,
 							disabled: computedDisabled,
-							sentiment: "neutral",
-							variant: "body",
-							children: plan.data[featureKey]
-						}) : null
+							fieldName,
+							onChange,
+							plan,
+							setFocusedPlan
+						})
 					]
 				}, plan.value);
-			})] }, feature.key);
-		}) })]
-	});
-};
+			})] }) }), /* @__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
-export { Plans };
+init_Plans();
+export { Plans, init_Plans };

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

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

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

@@ -1,67 +1,69 @@
-export declare const plansIconWrapper: string;
-export declare const plans: string;
-export declare const plansOutOfStockBadge: string;
-export declare const plansCell: import("@vanilla-extract/recipes").RuntimeFn<{
-    activeColor: {
-        true: {
-            selectors: {
-                'thead &:not(:first-child), tbody &:not(:first-child), tbody tr:last-child &:not(:first-child)': {
-                    borderColor: `var(--${string})`;
+export declare const plansStyle: {
+    iconWrapper: string;
+    plans: string;
+    outOfStockBadge: string;
+    cell: import("@vanilla-extract/recipes").RuntimeFn<{
+        activeColor: {
+            true: {
+                selectors: {
+                    'thead &:not(:first-child), tbody &:not(:first-child), tbody tr:last-child &:not(:first-child)': {
+                        borderColor: `var(--${string})`;
+                    };
                 };
             };
         };
-    };
-    disabled: {
-        true: {
-            backgroundColor: `var(--${string})`;
+        disabled: {
+            true: {
+                backgroundColor: `var(--${string})`;
+            };
         };
-    };
-    focus: {
-        true: {
-            selectors: {
-                'thead &:not(:first-child), tbody &:not(:first-child), tbody tr:last-child &:not(:first-child)': {
-                    borderColor: "blue";
-                    borderWidth: "2px 2px 0 2px";
+        focus: {
+            true: {
+                selectors: {
+                    'thead &:not(:first-child), tbody &:not(:first-child), tbody tr:last-child &:not(:first-child)': {
+                        borderColor: "blue";
+                        borderWidth: "2px 2px 0 2px";
+                    };
                 };
             };
         };
-    };
-    hide: {
-        true: {
-            display: "none";
+        hide: {
+            true: {
+                display: "none";
+            };
         };
-    };
-    hideLabels: {
-        true: {
-            paddingLeft: `var(--${string})`;
-            textAlign: "start";
-            selectors: {
-                'thead &': {
-                    paddingLeft: `var(--${string})`;
+        hideLabels: {
+            true: {
+                paddingLeft: `var(--${string})`;
+                textAlign: "start";
+                selectors: {
+                    'thead &': {
+                        paddingLeft: `var(--${string})`;
+                    };
                 };
             };
         };
-    };
-    selectable: {
-        true: {
-            cursor: "pointer";
+        selectable: {
+            true: {
+                cursor: "pointer";
+            };
         };
-    };
-    spaceAfter: {
-        true: {
-            selectors: {
-                'tbody &': {
-                    paddingBottom: `var(--${string})`;
+        spaceAfter: {
+            true: {
+                selectors: {
+                    'tbody &': {
+                        paddingBottom: `var(--${string})`;
+                    };
                 };
             };
         };
-    };
-}>;
-export declare const plansRowHidden: string;
-export declare const plansUppercaseText: string;
-export declare const plansHeaderInput: string;
-export declare const plansHeaderFullHeight: string;
-export declare const plansDescription: string;
-export declare const plansFullSizeSeparator: string;
-export declare const plansCurrentWrapper: string;
+    }>;
+    rowHidden: string;
+    uppercaseText: string;
+    headerInput: string;
+    headerFullHeight: string;
+    description: string;
+    fullSizeSeparator: string;
+    currentWrapper: string;
+};
 //# sourceMappingURL=styles.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/Plans/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,QAA6C,CAAA;AAE1E,eAAO,MAAM,KAAK,QAWhB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAK/B,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0GpB,CAAA;AAEF,eAAO,MAAM,cAAc,QAA6B,CAAA;AAExD,eAAO,MAAM,kBAAkB,QAAwC,CAAA;AAEvE,eAAO,MAAM,gBAAgB,QAK3B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAA4B,CAAA;AAE9D,eAAO,MAAM,gBAAgB,QAG3B,CAAA;AAEF,eAAO,MAAM,sBAAsB,QAA2B,CAAA;AAE9D,eAAO,MAAM,mBAAmB,QAK9B,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/Plans/styles.css.ts"],"names":[],"mappings":"AAiKA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYtB,CAAA"}

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

@@ -1,39 +1,47 @@
-/* empty css                      */
+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/components/compositions/Plans/styles.css.ts
-var plansIconWrapper = "uv_4bym9s0";
-var plans = "uv_4bym9s1";
-var plansOutOfStockBadge = "uv_4bym9s2";
-var plansCell = createRuntimeFn({
-	defaultClassName: "uv_4bym9s3",
-	variantClassNames: {
-		activeColor: { true: "uv_4bym9s4" },
-		disabled: { true: "uv_4bym9s5" },
-		focus: { true: "uv_4bym9s6" },
-		hide: { true: "uv_4bym9s7" },
-		hideLabels: { true: "uv_4bym9s8" },
-		selectable: { true: "uv_4bym9s9" },
-		spaceAfter: { true: "uv_4bym9sa" }
-	},
-	defaultVariants: {
-		activeColor: false,
-		disabled: false,
-		focus: false,
-		hide: false,
-		hideLabels: false,
-		selectable: false,
-		spaceAfter: false
-	},
-	compoundVariants: []
+var plansStyle;
+var init_styles_css = __esmMin(() => {
+	init_styles_css_ts_vanilla();
+	plansStyle = {
+		iconWrapper: "uv_4bym9s0",
+		plans: "uv_4bym9s1",
+		outOfStockBadge: "uv_4bym9s2",
+		cell: createRuntimeFn({
+			defaultClassName: "uv_4bym9s3",
+			variantClassNames: {
+				activeColor: { true: "uv_4bym9s4" },
+				disabled: { true: "uv_4bym9s5" },
+				focus: { true: "uv_4bym9s6" },
+				hide: { true: "uv_4bym9s7" },
+				hideLabels: { true: "uv_4bym9s8" },
+				selectable: { true: "uv_4bym9s9" },
+				spaceAfter: { true: "uv_4bym9sa" }
+			},
+			defaultVariants: {
+				activeColor: false,
+				disabled: false,
+				focus: false,
+				hide: false,
+				hideLabels: false,
+				selectable: false,
+				spaceAfter: false
+			},
+			compoundVariants: []
+		}),
+		rowHidden: "uv_4bym9sb",
+		uppercaseText: "uv_4bym9sc",
+		headerInput: "uv_4bym9sd",
+		headerFullHeight: "uv_4bym9se",
+		description: "uv_4bym9sf",
+		fullSizeSeparator: "uv_4bym9sg",
+		currentWrapper: "uv_4bym9sh"
+	};
 });
-var plansRowHidden = "uv_4bym9sb";
-var plansUppercaseText = "uv_4bym9sc";
-var plansHeaderInput = "uv_4bym9sd";
-var plansHeaderFullHeight = "uv_4bym9se";
-var plansDescription = "uv_4bym9sf";
-var plansFullSizeSeparator = "uv_4bym9sg";
-var plansCurrentWrapper = "uv_4bym9sh";
 
 //#endregion
-export { plans, plansCell, plansCurrentWrapper, plansDescription, plansFullSizeSeparator, plansHeaderFullHeight, plansHeaderInput, plansIconWrapper, plansOutOfStockBadge, plansRowHidden, plansUppercaseText };
+init_styles_css();
+export { init_styles_css, plansStyle };

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

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