@webflare/ui 0.0.0-stage → 0.1.0

package/dist/ProgressRoot-CWWNmB99.cjs

@@ -0,0 +1,255 @@
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+let reka_ui = require("reka-ui");
+// src/components/Progress/styles.ts
+var progressStyles = (0, require("@webflare/ui/css").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__ */ (0, vue.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 = (0, vue.computed)(() => props.modelValue == null);
+		const percentage = (0, vue.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 = (0, vue.computed)(() => progressStyles.raw({
+			size: props.size,
+			color: props.color,
+			percent: isIndeterminate.value ? void 0 : percentage.value
+		}));
+		const displayValue = (0, vue.computed)(() => {
+			if (isIndeterminate.value) return void 0;
+			return `${percentage.value}%`;
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)([(0, vue.unref)(require_css.withCss)(styles.value.root, props.css?.root), props.class]) }, [__props.showValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.value, props.css?.value))
+			}, [(0, vue.renderSlot)(_ctx.$slots, "value", {
+				modelValue: __props.modelValue,
+				max: __props.max,
+				percentage: percentage.value
+			}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(displayValue.value), 1)])], 2)) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)((0, vue.unref)(reka_ui.ProgressRoot), {
+				"model-value": __props.modelValue,
+				max: __props.max,
+				"get-value-label": __props.getValueLabel,
+				"get-value-text": __props.getValueText,
+				class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.track, props.css?.track))
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ProgressIndicator), { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.indicator, props.css?.indicator)) }, null, 8, ["class"]), (0, vue.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);
+		};
+	}
+});
+Object.defineProperty(exports, "ProgressRoot_default", {
+	enumerable: true,
+	get: function() {
+		return ProgressRoot_default;
+	}
+});

package/dist/SwitchRoot-CcipiBzA.cjs

@@ -0,0 +1,61 @@
+const require_ControlSwitch = require("./ControlSwitch-C-pzHgWm.cjs");
+let vue = require("vue");
+// src/components/Switch/SwitchRoot.vue
+var SwitchRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "SwitchRoot",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		id: {},
+		name: {},
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		css: {},
+		class: {}
+	}, {
+		"modelValue": {
+			type: [Boolean, null],
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component SwitchRoot
+		* @description Standalone switch for product UI. Inside forms prefer FieldSwitch.
+		*/
+		const props = __props;
+		const model = (0, vue.useModel)(__props, "modelValue");
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(require_ControlSwitch.ControlSwitch_default, {
+				id: props.id,
+				modelValue: model.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+				name: props.name,
+				label: props.label,
+				disabled: props.disabled,
+				required: props.required,
+				size: props.size,
+				css: props.css,
+				class: (0, vue.normalizeClass)(props.class)
+			}, null, 8, [
+				"id",
+				"modelValue",
+				"name",
+				"label",
+				"disabled",
+				"required",
+				"size",
+				"css",
+				"class"
+			]);
+		};
+	}
+});
+Object.defineProperty(exports, "SwitchRoot_default", {
+	enumerable: true,
+	get: function() {
+		return SwitchRoot_default;
+	}
+});

package/dist/SwitchRoot-DGFu9ZWR.js

@@ -0,0 +1,56 @@
+import { t as ControlSwitch_default } from "./ControlSwitch-C0Rj6fSW.js";
+import { createBlock, defineComponent, mergeModels, normalizeClass, openBlock, useModel } from "vue";
+// src/components/Switch/SwitchRoot.vue
+var SwitchRoot_default = /* @__PURE__ */ defineComponent({
+	__name: "SwitchRoot",
+	props: /*@__PURE__*/ mergeModels({
+		id: {},
+		name: {},
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		css: {},
+		class: {}
+	}, {
+		"modelValue": {
+			type: [Boolean, null],
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component SwitchRoot
+		* @description Standalone switch for product UI. Inside forms prefer FieldSwitch.
+		*/
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ControlSwitch_default, {
+				id: props.id,
+				modelValue: model.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+				name: props.name,
+				label: props.label,
+				disabled: props.disabled,
+				required: props.required,
+				size: props.size,
+				css: props.css,
+				class: normalizeClass(props.class)
+			}, null, 8, [
+				"id",
+				"modelValue",
+				"name",
+				"label",
+				"disabled",
+				"required",
+				"size",
+				"css",
+				"class"
+			]);
+		};
+	}
+});
+export { SwitchRoot_default as t };

package/dist/TabItem--4wiBton.cjs

@@ -0,0 +1,114 @@
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+let reka_ui = require("reka-ui");
+// src/components/Tab/styles.ts
+var tabStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"root",
+		"item",
+		"icon"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "2xs",
+			backgroundColor: "surface",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border.card",
+			borderRadius: "pill",
+			padding: "2xs",
+			position: "relative",
+			_after: {
+				content: "\"\"",
+				position: "absolute",
+				positionAnchor: "--active-tab",
+				bgColor: "primary",
+				transition: "all 300ms",
+				top: "anchor(top)",
+				left: "anchor(left)",
+				right: "anchor(right)",
+				bottom: "anchor(bottom)",
+				borderRadius: "pill",
+				zIndex: "0"
+			}
+		},
+		item: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "xs",
+			paddingBlock: "xs",
+			paddingInline: "lg",
+			borderRadius: "pill",
+			fontSize: "md",
+			fontWeight: "semibold",
+			lineHeight: "normal",
+			color: "neutral",
+			cursor: "pointer",
+			position: "relative",
+			zIndex: "2",
+			transitionProperty: "background-color, color",
+			transitionDuration: "200ms",
+			_disabled: {
+				opacity: .4,
+				cursor: "not-allowed"
+			},
+			_hover: { bgColor: "border.card" },
+			_active: {
+				anchorName: "--active-tab",
+				color: "neutral.inverse",
+				_hover: { bgColor: "transparent" }
+			}
+		},
+		icon: { fontSize: "lg" }
+	}
+});
+// src/components/Tab/TabItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+// src/components/Tab/TabItem.vue
+var TabItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "TabItem",
+	props: {
+		value: {},
+		label: {},
+		disabled: { type: Boolean },
+		icon: {},
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = tabStyles.raw();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsTrigger), {
+				value: __props.value,
+				disabled: __props.disabled,
+				class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).item, props.css?.root))
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "icon", {}, () => [__props.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 0,
+					class: (0, vue.normalizeClass)([`icon icon-${__props.icon}`, (0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).icon, props.css?.icon)]),
+					"aria-hidden": "true"
+				}, null, 2)) : (0, vue.createCommentVNode)("", true)]), (0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createElementVNode)("span", { innerHTML: __props.label }, null, 8, _hoisted_1)])]),
+				_: 3
+			}, 8, [
+				"value",
+				"disabled",
+				"class"
+			]);
+		};
+	}
+});
+Object.defineProperty(exports, "TabItem_default", {
+	enumerable: true,
+	get: function() {
+		return TabItem_default;
+	}
+});
+Object.defineProperty(exports, "tabStyles", {
+	enumerable: true,
+	get: function() {
+		return tabStyles;
+	}
+});

package/dist/TabItem-BTIrtLtp.js

@@ -0,0 +1,104 @@
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { TabsTrigger } from "reka-ui";
+import { sva } from "@webflare/ui/css";
+// src/components/Tab/styles.ts
+var tabStyles = sva({
+	slots: [
+		"root",
+		"item",
+		"icon"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "2xs",
+			backgroundColor: "surface",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border.card",
+			borderRadius: "pill",
+			padding: "2xs",
+			position: "relative",
+			_after: {
+				content: "\"\"",
+				position: "absolute",
+				positionAnchor: "--active-tab",
+				bgColor: "primary",
+				transition: "all 300ms",
+				top: "anchor(top)",
+				left: "anchor(left)",
+				right: "anchor(right)",
+				bottom: "anchor(bottom)",
+				borderRadius: "pill",
+				zIndex: "0"
+			}
+		},
+		item: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "xs",
+			paddingBlock: "xs",
+			paddingInline: "lg",
+			borderRadius: "pill",
+			fontSize: "md",
+			fontWeight: "semibold",
+			lineHeight: "normal",
+			color: "neutral",
+			cursor: "pointer",
+			position: "relative",
+			zIndex: "2",
+			transitionProperty: "background-color, color",
+			transitionDuration: "200ms",
+			_disabled: {
+				opacity: .4,
+				cursor: "not-allowed"
+			},
+			_hover: { bgColor: "border.card" },
+			_active: {
+				anchorName: "--active-tab",
+				color: "neutral.inverse",
+				_hover: { bgColor: "transparent" }
+			}
+		},
+		icon: { fontSize: "lg" }
+	}
+});
+// src/components/Tab/TabItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+// src/components/Tab/TabItem.vue
+var TabItem_default = /* @__PURE__ */ defineComponent({
+	__name: "TabItem",
+	props: {
+		value: {},
+		label: {},
+		disabled: { type: Boolean },
+		icon: {},
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = tabStyles.raw();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TabsTrigger), {
+				value: __props.value,
+				disabled: __props.disabled,
+				class: normalizeClass(unref(withCss)(unref(styles).item, props.css?.root))
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass([`icon icon-${__props.icon}`, unref(withCss)(unref(styles).icon, props.css?.icon)]),
+					"aria-hidden": "true"
+				}, null, 2)) : createCommentVNode("", true)]), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("span", { innerHTML: __props.label }, null, 8, _hoisted_1)])]),
+				_: 3
+			}, 8, [
+				"value",
+				"disabled",
+				"class"
+			]);
+		};
+	}
+});
+export { tabStyles as n, TabItem_default as t };

package/dist/TabRoot-BNp4_dI_.cjs

@@ -0,0 +1,77 @@
+const require_TabItem = require("./TabItem--4wiBton.cjs");
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+let reka_ui = require("reka-ui");
+// src/components/Tab/TabRoot.vue
+var TabRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "TabRoot",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		orientation: { default: "horizontal" },
+		loop: {
+			type: Boolean,
+			default: true
+		},
+		items: { default: () => [] },
+		css: {}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const internalValue = (0, vue.ref)(props.modelValue ?? props.defaultValue ?? void 0);
+		(0, vue.watch)(() => props.modelValue, (value) => {
+			internalValue.value = value;
+		});
+		const styles = require_TabItem.tabStyles.raw();
+		const handleUpdate = (value) => {
+			const stringValue = String(value);
+			const oldValue = internalValue.value;
+			const oldIndex = props.items.findIndex((i) => i.value === oldValue);
+			const newIndex = props.items.findIndex((i) => i.value === stringValue);
+			const direction = oldIndex !== -1 && newIndex !== -1 && newIndex < oldIndex ? "prev" : "next";
+			internalValue.value = stringValue;
+			emit("update:modelValue", stringValue);
+			emit("change", {
+				value: stringValue,
+				direction
+			});
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsRoot), {
+				"model-value": internalValue.value,
+				orientation: __props.orientation,
+				"onUpdate:modelValue": handleUpdate
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.TabsList), {
+					class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).root, props.css?.root)),
+					loop: __props.loop
+				}, {
+					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.items, (item) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)(require_TabItem.TabItem_default, {
+							key: item.value,
+							value: item.value,
+							label: item.label,
+							icon: item.icon,
+							disabled: item.disabled
+						}, null, 8, [
+							"value",
+							"label",
+							"icon",
+							"disabled"
+						]);
+					}), 128)), (0, vue.renderSlot)(_ctx.$slots, "default")]),
+					_: 3
+				}, 8, ["class", "loop"])]),
+				_: 3
+			}, 8, ["model-value", "orientation"]);
+		};
+	}
+});
+Object.defineProperty(exports, "TabRoot_default", {
+	enumerable: true,
+	get: function() {
+		return TabRoot_default;
+	}
+});