@webflare/ui 0.0.0-stage → 0.1.1

package/dist/ListItem-1sYxrNuv.cjs

@@ -0,0 +1,164 @@
+const require_css = require("./css-BRRSQx3P.cjs");
+const require_injection_key = require("./injection-key-DPb_AXnh.cjs");
+let vue = require("vue");
+// src/components/List/styles.ts
+var listStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"list",
+		"item",
+		"marker"
+	],
+	base: {
+		list: {
+			display: "flex",
+			flexDirection: "column",
+			flexWrap: "wrap"
+		},
+		item: { display: "inline-flex" },
+		marker: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: "5xl",
+			flexBasis: "auto",
+			flexGrow: "0"
+		}
+	},
+	variants: {
+		size: {
+			sm: {
+				list: { gap: "xs" },
+				item: {
+					fontSize: "sm",
+					gap: "sm"
+				},
+				marker: {
+					"width": "16px",
+					"height": "16px",
+					"minWidth": "16px",
+					"marginTop": "2px",
+					"& .icon": { fontSize: "10px" }
+				}
+			},
+			md: {
+				list: { gap: "xs" },
+				item: {
+					fontSize: "md",
+					gap: "sm"
+				},
+				marker: {
+					"width": "20px",
+					"height": "20px",
+					"minWidth": "20px",
+					"marginTop": "2px",
+					"& .icon": { fontSize: "12px" }
+				}
+			},
+			lg: {
+				list: { gap: "xs" },
+				item: {
+					fontSize: "lg",
+					gap: "sm"
+				},
+				marker: {
+					"width": "20px",
+					"height": "20px",
+					"minWidth": "20px",
+					"marginTop": "6px",
+					"& .icon": { fontSize: "12px" }
+				}
+			}
+		},
+		state: {
+			default: { marker: {
+				color: "text.muted",
+				backgroundColor: "neutral.subtle"
+			} },
+			primary: { marker: {
+				color: "primary",
+				backgroundColor: "primary/10"
+			} },
+			success: { marker: {
+				color: "success.subtle",
+				backgroundColor: "success.subtle/10"
+			} },
+			danger: { marker: {
+				color: "danger.subtle",
+				backgroundColor: "danger.subtle/10"
+			} },
+			info: { marker: {
+				color: "info.subtle",
+				backgroundColor: "info.subtle/10"
+			} }
+		}
+	},
+	defaultVariants: {
+		size: "sm",
+		state: "default"
+	}
+});
+// src/components/List/types.ts
+var ListContextKey = require_injection_key.createInjectionKey("ListContext");
+// src/components/List/ListItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+// src/components/List/ListItem.vue
+var ListItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ListItem",
+	props: {
+		content: {},
+		size: {},
+		state: {},
+		icon: { type: [String, Boolean] },
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const list = (0, vue.inject)(ListContextKey, null);
+		const size = (0, vue.computed)(() => props.size ?? list?.value.size ?? "md");
+		const state = (0, vue.computed)(() => props.state ?? list?.value.state ?? "default");
+		const styles = (0, vue.computed)(() => listStyles.raw({
+			size: size.value,
+			state: state.value
+		}));
+		const stateIcons = {
+			default: "caret-right-bold",
+			primary: "caret-right-bold",
+			success: "check-bold",
+			danger: "x-bold",
+			info: "info-bold"
+		};
+		const icon = (0, vue.computed)(() => {
+			if (props.icon === false) return null;
+			if (typeof props.icon === "string") return props.icon;
+			return stateIcons[state.value];
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.item, props.css?.root)) }, [(0, vue.renderSlot)(_ctx.$slots, "marker", {}, () => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.marker, props.css?.marker)) }, [icon.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				key: 0,
+				class: (0, vue.normalizeClass)(`icon icon-${icon.value}`),
+				"aria-hidden": "true"
+			}, null, 2)) : (0, vue.createCommentVNode)("", true)], 2)]), (0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [props.content ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				innerHTML: props.content
+			}, null, 8, _hoisted_1)) : (0, vue.createCommentVNode)("", true)])], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "ListContextKey", {
+	enumerable: true,
+	get: function() {
+		return ListContextKey;
+	}
+});
+Object.defineProperty(exports, "ListItem_default", {
+	enumerable: true,
+	get: function() {
+		return ListItem_default;
+	}
+});
+Object.defineProperty(exports, "listStyles", {
+	enumerable: true,
+	get: function() {
+		return listStyles;
+	}
+});

package/dist/ListItem-rD49tsLw.js

@@ -0,0 +1,148 @@
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { t as createInjectionKey } from "./injection-key-BQYV9vIr.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, openBlock, renderSlot, unref } from "vue";
+import { sva } from "@webflare/ui/css";
+// src/components/List/styles.ts
+var listStyles = sva({
+	slots: [
+		"list",
+		"item",
+		"marker"
+	],
+	base: {
+		list: {
+			display: "flex",
+			flexDirection: "column",
+			flexWrap: "wrap"
+		},
+		item: { display: "inline-flex" },
+		marker: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: "5xl",
+			flexBasis: "auto",
+			flexGrow: "0"
+		}
+	},
+	variants: {
+		size: {
+			sm: {
+				list: { gap: "xs" },
+				item: {
+					fontSize: "sm",
+					gap: "sm"
+				},
+				marker: {
+					"width": "16px",
+					"height": "16px",
+					"minWidth": "16px",
+					"marginTop": "2px",
+					"& .icon": { fontSize: "10px" }
+				}
+			},
+			md: {
+				list: { gap: "xs" },
+				item: {
+					fontSize: "md",
+					gap: "sm"
+				},
+				marker: {
+					"width": "20px",
+					"height": "20px",
+					"minWidth": "20px",
+					"marginTop": "2px",
+					"& .icon": { fontSize: "12px" }
+				}
+			},
+			lg: {
+				list: { gap: "xs" },
+				item: {
+					fontSize: "lg",
+					gap: "sm"
+				},
+				marker: {
+					"width": "20px",
+					"height": "20px",
+					"minWidth": "20px",
+					"marginTop": "6px",
+					"& .icon": { fontSize: "12px" }
+				}
+			}
+		},
+		state: {
+			default: { marker: {
+				color: "text.muted",
+				backgroundColor: "neutral.subtle"
+			} },
+			primary: { marker: {
+				color: "primary",
+				backgroundColor: "primary/10"
+			} },
+			success: { marker: {
+				color: "success.subtle",
+				backgroundColor: "success.subtle/10"
+			} },
+			danger: { marker: {
+				color: "danger.subtle",
+				backgroundColor: "danger.subtle/10"
+			} },
+			info: { marker: {
+				color: "info.subtle",
+				backgroundColor: "info.subtle/10"
+			} }
+		}
+	},
+	defaultVariants: {
+		size: "sm",
+		state: "default"
+	}
+});
+// src/components/List/types.ts
+var ListContextKey = createInjectionKey("ListContext");
+// src/components/List/ListItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+// src/components/List/ListItem.vue
+var ListItem_default = /* @__PURE__ */ defineComponent({
+	__name: "ListItem",
+	props: {
+		content: {},
+		size: {},
+		state: {},
+		icon: { type: [String, Boolean] },
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const list = inject(ListContextKey, null);
+		const size = computed(() => props.size ?? list?.value.size ?? "md");
+		const state = computed(() => props.state ?? list?.value.state ?? "default");
+		const styles = computed(() => listStyles.raw({
+			size: size.value,
+			state: state.value
+		}));
+		const stateIcons = {
+			default: "caret-right-bold",
+			primary: "caret-right-bold",
+			success: "check-bold",
+			danger: "x-bold",
+			info: "info-bold"
+		};
+		const icon = computed(() => {
+			if (props.icon === false) return null;
+			if (typeof props.icon === "string") return props.icon;
+			return stateIcons[state.value];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", { class: normalizeClass(unref(withCss)(styles.value.item, props.css?.root)) }, [renderSlot(_ctx.$slots, "marker", {}, () => [createElementVNode("span", { class: normalizeClass(unref(withCss)(styles.value.marker, props.css?.marker)) }, [icon.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(`icon icon-${icon.value}`),
+				"aria-hidden": "true"
+			}, null, 2)) : createCommentVNode("", true)], 2)]), renderSlot(_ctx.$slots, "default", {}, () => [props.content ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				innerHTML: props.content
+			}, null, 8, _hoisted_1)) : createCommentVNode("", true)])], 2);
+		};
+	}
+});
+export { ListContextKey as n, listStyles as r, ListItem_default as t };

package/dist/ListRoot-BRrC79y6.cjs

@@ -0,0 +1,42 @@
+const require_ListItem = require("./ListItem-1sYxrNuv.cjs");
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+// src/components/List/ListRoot.vue
+var ListRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ListRoot",
+	props: {
+		items: {},
+		size: { default: "md" },
+		state: { default: "default" },
+		icon: {
+			type: [String, Boolean],
+			default: true
+		},
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		(0, vue.provide)(require_ListItem.ListContextKey, (0, vue.computed)(() => ({
+			size: props.size,
+			state: props.state
+		})));
+		const styles = (0, vue.computed)(() => require_ListItem.listStyles.raw({
+			size: props.size,
+			state: props.state
+		}));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("ul", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.list, props.css?.root)) }, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.items, (item, index) => {
+				return (0, vue.openBlock)(), (0, vue.createBlock)(require_ListItem.ListItem_default, (0, vue.mergeProps)({
+					key: index,
+					icon: props.icon
+				}, { ref_for: true }, item), null, 16, ["icon"]);
+			}), 128))])], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "ListRoot_default", {
+	enumerable: true,
+	get: function() {
+		return ListRoot_default;
+	}
+});

package/dist/ListRoot-CP7smMl_.js

@@ -0,0 +1,37 @@
+import { n as ListContextKey, r as listStyles, t as ListItem_default } from "./ListItem-rD49tsLw.js";
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, normalizeClass, openBlock, provide, renderList, renderSlot, unref } from "vue";
+// src/components/List/ListRoot.vue
+var ListRoot_default = /* @__PURE__ */ defineComponent({
+	__name: "ListRoot",
+	props: {
+		items: {},
+		size: { default: "md" },
+		state: { default: "default" },
+		icon: {
+			type: [String, Boolean],
+			default: true
+		},
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		provide(ListContextKey, computed(() => ({
+			size: props.size,
+			state: props.state
+		})));
+		const styles = computed(() => listStyles.raw({
+			size: props.size,
+			state: props.state
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ul", { class: normalizeClass(unref(withCss)(styles.value.list, props.css?.root)) }, [renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				return openBlock(), createBlock(ListItem_default, mergeProps({
+					key: index,
+					icon: props.icon
+				}, { ref_for: true }, item), null, 16, ["icon"]);
+			}), 128))])], 2);
+		};
+	}
+});
+export { ListRoot_default as t };

package/dist/Loader-CMEggjED.cjs

@@ -0,0 +1,121 @@
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+let styled_system_css = require("@webflare/ui/css");
+// src/components/Loader/styles.ts
+/** Diameters with a `size` variant. `Loader` snaps other sizes to the closest one. */
+var loaderSizeValues = [
+	16,
+	20,
+	24,
+	32,
+	40,
+	48,
+	56,
+	64,
+	80,
+	96,
+	120
+];
+var loaderStyles = (0, styled_system_css.cva)({
+	base: {
+		boxSizing: "border-box",
+		borderRadius: "50%",
+		borderStyle: "solid",
+		borderColor: "loader.track",
+		borderTopColor: "primary",
+		animationDuration: "1000ms",
+		animationTimingFunction: "linear",
+		animationIterationCount: "infinite",
+		animationName: "spin"
+	},
+	variants: { size: {
+		16: {
+			width: "16px",
+			height: "16px",
+			borderWidth: "2px"
+		},
+		20: {
+			width: "20px",
+			height: "20px",
+			borderWidth: "2px"
+		},
+		24: {
+			width: "24px",
+			height: "24px",
+			borderWidth: "2px"
+		},
+		32: {
+			width: "32px",
+			height: "32px",
+			borderWidth: "3px"
+		},
+		40: {
+			width: "40px",
+			height: "40px",
+			borderWidth: "4px"
+		},
+		48: {
+			width: "48px",
+			height: "48px",
+			borderWidth: "5px"
+		},
+		56: {
+			width: "56px",
+			height: "56px",
+			borderWidth: "6px"
+		},
+		64: {
+			width: "64px",
+			height: "64px",
+			borderWidth: "6px"
+		},
+		80: {
+			width: "80px",
+			height: "80px",
+			borderWidth: "8px"
+		},
+		96: {
+			width: "96px",
+			height: "96px",
+			borderWidth: "10px"
+		},
+		120: {
+			width: "120px",
+			height: "120px",
+			borderWidth: "12px"
+		}
+	} },
+	defaultVariants: { size: 40 }
+});
+// src/components/Loader/Loader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+// src/components/Loader/Loader.vue
+var Loader_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "WfLoader",
+	__name: "Loader",
+	props: {
+		size: { default: 40 },
+		label: { default: "Loading" },
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		function resolveLoaderSize(value) {
+			return loaderSizeValues.reduce((best, candidate) => Math.abs(candidate - value) < Math.abs(best - value) ? candidate : best);
+		}
+		const loaderClass = (0, vue.computed)(() => require_css.withCss(loaderStyles.raw({ size: resolveLoaderSize(props.size) }), props.css?.root));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: (0, vue.normalizeClass)(["loader", loaderClass.value]),
+				role: "status",
+				"aria-label": __props.label
+			}, null, 10, _hoisted_1);
+		};
+	}
+});
+Object.defineProperty(exports, "Loader_default", {
+	enumerable: true,
+	get: function() {
+		return Loader_default;
+	}
+});

package/dist/Loader-DSLPdX6P.js

@@ -0,0 +1,116 @@
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock } from "vue";
+import { cva } from "@webflare/ui/css";
+// src/components/Loader/styles.ts
+/** Diameters with a `size` variant. `Loader` snaps other sizes to the closest one. */
+var loaderSizeValues = [
+	16,
+	20,
+	24,
+	32,
+	40,
+	48,
+	56,
+	64,
+	80,
+	96,
+	120
+];
+var loaderStyles = cva({
+	base: {
+		boxSizing: "border-box",
+		borderRadius: "50%",
+		borderStyle: "solid",
+		borderColor: "loader.track",
+		borderTopColor: "primary",
+		animationDuration: "1000ms",
+		animationTimingFunction: "linear",
+		animationIterationCount: "infinite",
+		animationName: "spin"
+	},
+	variants: { size: {
+		16: {
+			width: "16px",
+			height: "16px",
+			borderWidth: "2px"
+		},
+		20: {
+			width: "20px",
+			height: "20px",
+			borderWidth: "2px"
+		},
+		24: {
+			width: "24px",
+			height: "24px",
+			borderWidth: "2px"
+		},
+		32: {
+			width: "32px",
+			height: "32px",
+			borderWidth: "3px"
+		},
+		40: {
+			width: "40px",
+			height: "40px",
+			borderWidth: "4px"
+		},
+		48: {
+			width: "48px",
+			height: "48px",
+			borderWidth: "5px"
+		},
+		56: {
+			width: "56px",
+			height: "56px",
+			borderWidth: "6px"
+		},
+		64: {
+			width: "64px",
+			height: "64px",
+			borderWidth: "6px"
+		},
+		80: {
+			width: "80px",
+			height: "80px",
+			borderWidth: "8px"
+		},
+		96: {
+			width: "96px",
+			height: "96px",
+			borderWidth: "10px"
+		},
+		120: {
+			width: "120px",
+			height: "120px",
+			borderWidth: "12px"
+		}
+	} },
+	defaultVariants: { size: 40 }
+});
+// src/components/Loader/Loader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+// src/components/Loader/Loader.vue
+var Loader_default = /* @__PURE__ */ defineComponent({
+	name: "WfLoader",
+	__name: "Loader",
+	props: {
+		size: { default: 40 },
+		label: { default: "Loading" },
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		function resolveLoaderSize(value) {
+			return loaderSizeValues.reduce((best, candidate) => Math.abs(candidate - value) < Math.abs(best - value) ? candidate : best);
+		}
+		const loaderClass = computed(() => withCss(loaderStyles.raw({ size: resolveLoaderSize(props.size) }), props.css?.root));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["loader", loaderClass.value]),
+				role: "status",
+				"aria-label": __props.label
+			}, null, 10, _hoisted_1);
+		};
+	}
+});
+export { Loader_default as t };

package/dist/PricingCardBadge-DoHnRqTM.cjs

@@ -0,0 +1,25 @@
+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/PricingCardBadge.vue
+var PricingCardBadge_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "PricingCardBadge",
+	props: {
+		label: { default: "Featured" },
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = (0, vue.inject)(require_types.PricingCardStylesKey, (0, vue.computed)(() => require_styles.pricingCardStyles.raw()));
+		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).badge, props.css?.root)) }, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.label), 1)], 64)) : (0, vue.createCommentVNode)("", true)])], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "PricingCardBadge_default", {
+	enumerable: true,
+	get: function() {
+		return PricingCardBadge_default;
+	}
+});

package/dist/PricingCardBadge-lh3Oq5fB.js

@@ -0,0 +1,20 @@
+import { t as pricingCardStyles } from "./styles-8a0pzMRc.js";
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { n as PricingCardStylesKey } from "./types-B1vOzUjg.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createTextVNode, defineComponent, inject, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+// src/components/PricingCard/PricingCardBadge.vue
+var PricingCardBadge_default = /* @__PURE__ */ defineComponent({
+	__name: "PricingCardBadge",
+	props: {
+		label: { default: "Featured" },
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = inject(PricingCardStylesKey, computed(() => pricingCardStyles.raw()));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(withCss)(unref(styles).badge, props.css?.root)) }, [renderSlot(_ctx.$slots, "default", {}, () => [props.label ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(props.label), 1)], 64)) : createCommentVNode("", true)])], 2);
+		};
+	}
+});
+export { PricingCardBadge_default as t };