@webflare/ui 0.0.0-stage → 0.1.0

package/dist/PricingCardBody--EB7FzUU.cjs

@@ -0,0 +1,60 @@
+const require_ListRoot = require("./ListRoot-BRrC79y6.cjs");
+const require_ListItem = require("./ListItem-1sYxrNuv.cjs");
+const require_types = require("./types-DzEK6W6x.cjs");
+let vue = require("vue");
+let styled_system_css = require("@webflare/ui/css");
+// src/components/List/index.ts
+var List_default = {
+	Root: require_ListRoot.ListRoot_default,
+	Item: require_ListItem.ListItem_default
+};
+// src/components/PricingCard/PricingCardBody.vue
+var PricingCardBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "PricingCardBody",
+	props: {
+		features: { default: void 0 },
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const data = (0, vue.inject)(require_types.PricingCardDataKey, (0, vue.computed)(() => ({})));
+		const features = (0, vue.computed)(() => props.features ?? data.value.features ?? []);
+		const items = (0, vue.computed)(() => features.value.map((feature) => ({
+			content: feature,
+			css: {
+				root: props.css?.feature,
+				marker: props.css?.featureIcon
+			}
+		})));
+		const rootCss = (0, vue.computed)(() => styled_system_css.css.raw({
+			paddingBlock: "lg",
+			paddingInline: "lg"
+		}, props.css?.root));
+		return (_ctx, _cache) => {
+			return (0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [items.value.length > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_ListRoot.ListRoot_default), {
+				key: 0,
+				state: (0, vue.unref)(data).featuresState ?? "success",
+				size: (0, vue.unref)(data).featuresSize ?? "md",
+				items: items.value,
+				css: { root: rootCss.value }
+			}, null, 8, [
+				"state",
+				"size",
+				"items",
+				"css"
+			])) : (0, vue.createCommentVNode)("", true)]);
+		};
+	}
+});
+Object.defineProperty(exports, "List_default", {
+	enumerable: true,
+	get: function() {
+		return List_default;
+	}
+});
+Object.defineProperty(exports, "PricingCardBody_default", {
+	enumerable: true,
+	get: function() {
+		return PricingCardBody_default;
+	}
+});

package/dist/PricingCardBody-Dai1zKDL.js

@@ -0,0 +1,49 @@
+import { t as ListRoot_default } from "./ListRoot-CP7smMl_.js";
+import { t as ListItem_default } from "./ListItem-rD49tsLw.js";
+import { t as PricingCardDataKey } from "./types-B1vOzUjg.js";
+import { computed, createBlock, createCommentVNode, defineComponent, inject, openBlock, renderSlot, unref } from "vue";
+import { css } from "@webflare/ui/css";
+// src/components/List/index.ts
+var List_default = {
+	Root: ListRoot_default,
+	Item: ListItem_default
+};
+// src/components/PricingCard/PricingCardBody.vue
+var PricingCardBody_default = /* @__PURE__ */ defineComponent({
+	__name: "PricingCardBody",
+	props: {
+		features: { default: void 0 },
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const data = inject(PricingCardDataKey, computed(() => ({})));
+		const features = computed(() => props.features ?? data.value.features ?? []);
+		const items = computed(() => features.value.map((feature) => ({
+			content: feature,
+			css: {
+				root: props.css?.feature,
+				marker: props.css?.featureIcon
+			}
+		})));
+		const rootCss = computed(() => css.raw({
+			paddingBlock: "lg",
+			paddingInline: "lg"
+		}, props.css?.root));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", {}, () => [items.value.length > 0 ? (openBlock(), createBlock(unref(ListRoot_default), {
+				key: 0,
+				state: unref(data).featuresState ?? "success",
+				size: unref(data).featuresSize ?? "md",
+				items: items.value,
+				css: { root: rootCss.value }
+			}, null, 8, [
+				"state",
+				"size",
+				"items",
+				"css"
+			])) : createCommentVNode("", true)]);
+		};
+	}
+});
+export { List_default as n, PricingCardBody_default as t };

package/dist/PricingCardHeader-DCEG6BUA.js

@@ -0,0 +1,39 @@
+import { t as pricingCardStyles } from "./styles-8a0pzMRc.js";
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { n as PricingCardStylesKey, t as PricingCardDataKey } from "./types-B1vOzUjg.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+// src/components/PricingCard/PricingCardHeader.vue
+var PricingCardHeader_default = /* @__PURE__ */ defineComponent({
+	__name: "PricingCardHeader",
+	props: {
+		title: {},
+		titleTag: {},
+		subtitle: {},
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = inject(PricingCardStylesKey, computed(() => pricingCardStyles.raw()));
+		const data = inject(PricingCardDataKey, computed(() => ({})));
+		const titleTag = computed(() => props.titleTag ?? data.value.titleTag ?? "div");
+		const title = computed(() => props.title ?? data.value.title);
+		const subtitle = computed(() => props.subtitle ?? data.value.subtitle);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("header", { class: normalizeClass(unref(withCss)(unref(styles).header, props.css?.root)) }, [
+				renderSlot(_ctx.$slots, "prepend"),
+				renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", { class: normalizeClass(unref(withCss)(unref(styles).headerPackage, props.css?.headerPackage)) }, [renderSlot(_ctx.$slots, "title", {}, () => [title.value ? (openBlock(), createBlock(resolveDynamicComponent(titleTag.value), {
+					key: 0,
+					class: normalizeClass(unref(withCss)(unref(styles).title, props.css?.title))
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(title.value), 1)]),
+					_: 1
+				}, 8, ["class"])) : createCommentVNode("", true)]), renderSlot(_ctx.$slots, "subtitle", {}, () => [subtitle.value ? (openBlock(), createElementBlock("p", {
+					key: 0,
+					class: normalizeClass(unref(withCss)(unref(styles).subtitle, props.css?.subtitle))
+				}, toDisplayString(subtitle.value), 3)) : createCommentVNode("", true)])], 2)]),
+				renderSlot(_ctx.$slots, "append")
+			], 2);
+		};
+	}
+});
+export { PricingCardHeader_default as t };

package/dist/PricingCardHeader-yebSjw8M.cjs

@@ -0,0 +1,44 @@
+const require_styles = require("./styles-Cjlvkx8i.cjs");
+const require_css = require("./css-BRRSQx3P.cjs");
+const require_types = require("./types-DzEK6W6x.cjs");
+let vue = require("vue");
+// src/components/PricingCard/PricingCardHeader.vue
+var PricingCardHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "PricingCardHeader",
+	props: {
+		title: {},
+		titleTag: {},
+		subtitle: {},
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = (0, vue.inject)(require_types.PricingCardStylesKey, (0, vue.computed)(() => require_styles.pricingCardStyles.raw()));
+		const data = (0, vue.inject)(require_types.PricingCardDataKey, (0, vue.computed)(() => ({})));
+		const titleTag = (0, vue.computed)(() => props.titleTag ?? data.value.titleTag ?? "div");
+		const title = (0, vue.computed)(() => props.title ?? data.value.title);
+		const subtitle = (0, vue.computed)(() => props.subtitle ?? data.value.subtitle);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("header", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).header, props.css?.root)) }, [
+				(0, vue.renderSlot)(_ctx.$slots, "prepend"),
+				(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).headerPackage, props.css?.headerPackage)) }, [(0, vue.renderSlot)(_ctx.$slots, "title", {}, () => [title.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(titleTag.value), {
+					key: 0,
+					class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).title, props.css?.title))
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(title.value), 1)]),
+					_: 1
+				}, 8, ["class"])) : (0, vue.createCommentVNode)("", true)]), (0, vue.renderSlot)(_ctx.$slots, "subtitle", {}, () => [subtitle.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", {
+					key: 0,
+					class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).subtitle, props.css?.subtitle))
+				}, (0, vue.toDisplayString)(subtitle.value), 3)) : (0, vue.createCommentVNode)("", true)])], 2)]),
+				(0, vue.renderSlot)(_ctx.$slots, "append")
+			], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "PricingCardHeader_default", {
+	enumerable: true,
+	get: function() {
+		return PricingCardHeader_default;
+	}
+});

package/dist/PricingCardPricing-DvdbyMEh.cjs

@@ -0,0 +1,30 @@
+const require_styles = require("./styles-Cjlvkx8i.cjs");
+const require_css = require("./css-BRRSQx3P.cjs");
+const require_types = require("./types-DzEK6W6x.cjs");
+let vue = require("vue");
+// src/components/PricingCard/PricingCardPricing.vue
+var PricingCardPricing_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "PricingCardPricing",
+	props: {
+		price: {},
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = (0, vue.inject)(require_types.PricingCardStylesKey, (0, vue.computed)(() => require_styles.pricingCardStyles.raw()));
+		const data = (0, vue.inject)(require_types.PricingCardDataKey, (0, vue.computed)(() => ({})));
+		const price = (0, vue.computed)(() => props.price ?? data.value.price);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).pricing, props.css?.root)) }, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.renderSlot)(_ctx.$slots, "price", {}, () => [price.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				key: 0,
+				class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).price, props.css?.price))
+			}, (0, vue.toDisplayString)(price.value), 3)) : (0, vue.createCommentVNode)("", true)]), (0, vue.renderSlot)(_ctx.$slots, "pricing-addon")])], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "PricingCardPricing_default", {
+	enumerable: true,
+	get: function() {
+		return PricingCardPricing_default;
+	}
+});

package/dist/PricingCardPricing-Vbs2D8Fm.js

@@ -0,0 +1,25 @@
+import { t as pricingCardStyles } from "./styles-8a0pzMRc.js";
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { n as PricingCardStylesKey, t as PricingCardDataKey } from "./types-B1vOzUjg.js";
+import { computed, createCommentVNode, createElementBlock, defineComponent, inject, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+// src/components/PricingCard/PricingCardPricing.vue
+var PricingCardPricing_default = /* @__PURE__ */ defineComponent({
+	__name: "PricingCardPricing",
+	props: {
+		price: {},
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = inject(PricingCardStylesKey, computed(() => pricingCardStyles.raw()));
+		const data = inject(PricingCardDataKey, computed(() => ({})));
+		const price = computed(() => props.price ?? data.value.price);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(withCss)(unref(styles).pricing, props.css?.root)) }, [renderSlot(_ctx.$slots, "default", {}, () => [renderSlot(_ctx.$slots, "price", {}, () => [price.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(unref(withCss)(unref(styles).price, props.css?.price))
+			}, toDisplayString(price.value), 3)) : createCommentVNode("", true)]), renderSlot(_ctx.$slots, "pricing-addon")])], 2);
+		};
+	}
+});
+export { PricingCardPricing_default as t };

package/dist/PricingCardRoot-B9ztC1u9.cjs

@@ -0,0 +1,46 @@
+const require_styles = require("./styles-Cjlvkx8i.cjs");
+const require_css = require("./css-BRRSQx3P.cjs");
+const require_types = require("./types-DzEK6W6x.cjs");
+let vue = require("vue");
+// src/components/PricingCard/PricingCardRoot.vue
+var PricingCardRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "PricingCardRoot",
+	props: {
+		highlight: { type: Boolean },
+		css: {},
+		title: {},
+		titleTag: { default: "div" },
+		subtitle: {},
+		price: {},
+		features: { default: () => [] },
+		featuresState: { default: "success" },
+		featuresSize: { default: "md" }
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = (0, vue.computed)(() => require_styles.pricingCardStyles.raw({ highlight: props.highlight }));
+		(0, vue.provide)(require_types.PricingCardStylesKey, styles);
+		(0, vue.provide)(require_types.PricingCardDataKey, (0, vue.computed)(() => ({
+			title: props.title,
+			titleTag: props.titleTag,
+			subtitle: props.subtitle,
+			price: props.price,
+			features: props.features,
+			featuresState: props.featuresState,
+			featuresSize: props.featuresSize
+		})));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("article", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.root, props.css?.root)) }, [
+				(0, vue.renderSlot)(_ctx.$slots, "before"),
+				(0, vue.renderSlot)(_ctx.$slots, "default"),
+				(0, vue.renderSlot)(_ctx.$slots, "after")
+			], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "PricingCardRoot_default", {
+	enumerable: true,
+	get: function() {
+		return PricingCardRoot_default;
+	}
+});

package/dist/PricingCardRoot-Dagig8jr.js

@@ -0,0 +1,41 @@
+import { t as pricingCardStyles } from "./styles-8a0pzMRc.js";
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { n as PricingCardStylesKey, t as PricingCardDataKey } from "./types-B1vOzUjg.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, provide, renderSlot, unref } from "vue";
+// src/components/PricingCard/PricingCardRoot.vue
+var PricingCardRoot_default = /* @__PURE__ */ defineComponent({
+	__name: "PricingCardRoot",
+	props: {
+		highlight: { type: Boolean },
+		css: {},
+		title: {},
+		titleTag: { default: "div" },
+		subtitle: {},
+		price: {},
+		features: { default: () => [] },
+		featuresState: { default: "success" },
+		featuresSize: { default: "md" }
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = computed(() => pricingCardStyles.raw({ highlight: props.highlight }));
+		provide(PricingCardStylesKey, styles);
+		provide(PricingCardDataKey, computed(() => ({
+			title: props.title,
+			titleTag: props.titleTag,
+			subtitle: props.subtitle,
+			price: props.price,
+			features: props.features,
+			featuresState: props.featuresState,
+			featuresSize: props.featuresSize
+		})));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("article", { class: normalizeClass(unref(withCss)(styles.value.root, props.css?.root)) }, [
+				renderSlot(_ctx.$slots, "before"),
+				renderSlot(_ctx.$slots, "default"),
+				renderSlot(_ctx.$slots, "after")
+			], 2);
+		};
+	}
+});
+export { PricingCardRoot_default as t };

package/dist/ProgressRoot-BV_wQKYv.js

@@ -0,0 +1,251 @@
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { computed, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { ProgressIndicator, ProgressRoot } from "reka-ui";
+import { sva } from "@webflare/ui/css";
+// src/components/Progress/styles.ts
+var progressStyles = sva({
+	slots: [
+		"root",
+		"track",
+		"indicator",
+		"value"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "xs",
+			width: "100%"
+		},
+		track: {
+			position: "relative",
+			overflow: "hidden",
+			width: "100%",
+			borderRadius: "pill",
+			bgColor: "grey.700"
+		},
+		indicator: {
+			"height": "100%",
+			"borderRadius": "pill",
+			"transition": "width 300ms ease",
+			"width": "0%",
+			"&[data-state=\"indeterminate\"]": {
+				width: "40%",
+				animationStyle: "progressIndeterminate"
+			}
+		},
+		value: {
+			fontWeight: "600",
+			lineHeight: "1.2",
+			color: "text.muted"
+		}
+	},
+	variants: {
+		size: {
+			sm: {
+				track: { height: "3px" },
+				value: {
+					paddingInline: "2xs",
+					fontSize: "sm"
+				}
+			},
+			md: {
+				track: { height: "6px" },
+				value: {
+					paddingInline: "2xs",
+					fontSize: "sm"
+				}
+			},
+			lg: {
+				track: { height: "12px" },
+				value: {
+					paddingInline: "2xs",
+					fontSize: "md"
+				}
+			}
+		},
+		color: {
+			primary: { indicator: { bgColor: "primary" } },
+			success: { indicator: { bgColor: "success.subtle" } },
+			danger: { indicator: { bgColor: "danger.subtle" } },
+			info: { indicator: { bgColor: "info.subtle" } }
+		},
+		percent: {
+			0: { indicator: { width: "0%" } },
+			1: { indicator: { width: "1%" } },
+			2: { indicator: { width: "2%" } },
+			3: { indicator: { width: "3%" } },
+			4: { indicator: { width: "4%" } },
+			5: { indicator: { width: "5%" } },
+			6: { indicator: { width: "6%" } },
+			7: { indicator: { width: "7%" } },
+			8: { indicator: { width: "8%" } },
+			9: { indicator: { width: "9%" } },
+			10: { indicator: { width: "10%" } },
+			11: { indicator: { width: "11%" } },
+			12: { indicator: { width: "12%" } },
+			13: { indicator: { width: "13%" } },
+			14: { indicator: { width: "14%" } },
+			15: { indicator: { width: "15%" } },
+			16: { indicator: { width: "16%" } },
+			17: { indicator: { width: "17%" } },
+			18: { indicator: { width: "18%" } },
+			19: { indicator: { width: "19%" } },
+			20: { indicator: { width: "20%" } },
+			21: { indicator: { width: "21%" } },
+			22: { indicator: { width: "22%" } },
+			23: { indicator: { width: "23%" } },
+			24: { indicator: { width: "24%" } },
+			25: { indicator: { width: "25%" } },
+			26: { indicator: { width: "26%" } },
+			27: { indicator: { width: "27%" } },
+			28: { indicator: { width: "28%" } },
+			29: { indicator: { width: "29%" } },
+			30: { indicator: { width: "30%" } },
+			31: { indicator: { width: "31%" } },
+			32: { indicator: { width: "32%" } },
+			33: { indicator: { width: "33%" } },
+			34: { indicator: { width: "34%" } },
+			35: { indicator: { width: "35%" } },
+			36: { indicator: { width: "36%" } },
+			37: { indicator: { width: "37%" } },
+			38: { indicator: { width: "38%" } },
+			39: { indicator: { width: "39%" } },
+			40: { indicator: { width: "40%" } },
+			41: { indicator: { width: "41%" } },
+			42: { indicator: { width: "42%" } },
+			43: { indicator: { width: "43%" } },
+			44: { indicator: { width: "44%" } },
+			45: { indicator: { width: "45%" } },
+			46: { indicator: { width: "46%" } },
+			47: { indicator: { width: "47%" } },
+			48: { indicator: { width: "48%" } },
+			49: { indicator: { width: "49%" } },
+			50: { indicator: { width: "50%" } },
+			51: { indicator: { width: "51%" } },
+			52: { indicator: { width: "52%" } },
+			53: { indicator: { width: "53%" } },
+			54: { indicator: { width: "54%" } },
+			55: { indicator: { width: "55%" } },
+			56: { indicator: { width: "56%" } },
+			57: { indicator: { width: "57%" } },
+			58: { indicator: { width: "58%" } },
+			59: { indicator: { width: "59%" } },
+			60: { indicator: { width: "60%" } },
+			61: { indicator: { width: "61%" } },
+			62: { indicator: { width: "62%" } },
+			63: { indicator: { width: "63%" } },
+			64: { indicator: { width: "64%" } },
+			65: { indicator: { width: "65%" } },
+			66: { indicator: { width: "66%" } },
+			67: { indicator: { width: "67%" } },
+			68: { indicator: { width: "68%" } },
+			69: { indicator: { width: "69%" } },
+			70: { indicator: { width: "70%" } },
+			71: { indicator: { width: "71%" } },
+			72: { indicator: { width: "72%" } },
+			73: { indicator: { width: "73%" } },
+			74: { indicator: { width: "74%" } },
+			75: { indicator: { width: "75%" } },
+			76: { indicator: { width: "76%" } },
+			77: { indicator: { width: "77%" } },
+			78: { indicator: { width: "78%" } },
+			79: { indicator: { width: "79%" } },
+			80: { indicator: { width: "80%" } },
+			81: { indicator: { width: "81%" } },
+			82: { indicator: { width: "82%" } },
+			83: { indicator: { width: "83%" } },
+			84: { indicator: { width: "84%" } },
+			85: { indicator: { width: "85%" } },
+			86: { indicator: { width: "86%" } },
+			87: { indicator: { width: "87%" } },
+			88: { indicator: { width: "88%" } },
+			89: { indicator: { width: "89%" } },
+			90: { indicator: { width: "90%" } },
+			91: { indicator: { width: "91%" } },
+			92: { indicator: { width: "92%" } },
+			93: { indicator: { width: "93%" } },
+			94: { indicator: { width: "94%" } },
+			95: { indicator: { width: "95%" } },
+			96: { indicator: { width: "96%" } },
+			97: { indicator: { width: "97%" } },
+			98: { indicator: { width: "98%" } },
+			99: { indicator: { width: "99%" } },
+			100: { indicator: { width: "100%" } }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		color: "primary"
+	}
+});
+// src/components/Progress/ProgressRoot.vue
+var ProgressRoot_default = /* @__PURE__ */ defineComponent({
+	__name: "ProgressRoot",
+	props: {
+		modelValue: { default: null },
+		max: { default: 100 },
+		size: { default: "md" },
+		color: { default: "primary" },
+		showValue: {
+			type: Boolean,
+			default: false
+		},
+		getValueLabel: {},
+		getValueText: {},
+		css: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* @component ProgressRoot
+		* @description Progress bar built on reka-ui Progress primitives.
+		* A `null` value renders the indeterminate animation.
+		*/
+		const props = __props;
+		const isIndeterminate = computed(() => props.modelValue == null);
+		const percentage = computed(() => {
+			if (props.modelValue == null || props.max <= 0) return 0;
+			return Math.min(100, Math.max(0, Math.round(props.modelValue / props.max * 100)));
+		});
+		const styles = computed(() => progressStyles.raw({
+			size: props.size,
+			color: props.color,
+			percent: isIndeterminate.value ? void 0 : percentage.value
+		}));
+		const displayValue = computed(() => {
+			if (isIndeterminate.value) return void 0;
+			return `${percentage.value}%`;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([unref(withCss)(styles.value.root, props.css?.root), props.class]) }, [__props.showValue ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(withCss)(styles.value.value, props.css?.value))
+			}, [renderSlot(_ctx.$slots, "value", {
+				modelValue: __props.modelValue,
+				max: __props.max,
+				percentage: percentage.value
+			}, () => [createTextVNode(toDisplayString(displayValue.value), 1)])], 2)) : createCommentVNode("", true), createVNode(unref(ProgressRoot), {
+				"model-value": __props.modelValue,
+				max: __props.max,
+				"get-value-label": __props.getValueLabel,
+				"get-value-text": __props.getValueText,
+				class: normalizeClass(unref(withCss)(styles.value.track, props.css?.track))
+			}, {
+				default: withCtx(() => [createVNode(unref(ProgressIndicator), { class: normalizeClass(unref(withCss)(styles.value.indicator, props.css?.indicator)) }, null, 8, ["class"]), renderSlot(_ctx.$slots, "default", {
+					modelValue: __props.modelValue,
+					max: __props.max,
+					percentage: percentage.value
+				})]),
+				_: 3
+			}, 8, [
+				"model-value",
+				"max",
+				"get-value-label",
+				"get-value-text",
+				"class"
+			])], 2);
+		};
+	}
+});
+export { ProgressRoot_default as t };