@webflare/ui 0.0.0-stage → 0.1.0

package/dist/FlyoutRoot-DUoOHEoX.cjs

@@ -0,0 +1,115 @@
+const require_FlyoutDropdown = require("./FlyoutDropdown-Bw3pD8Tk.cjs");
+const require_flyout = require("./flyout-BaVoXePQ.cjs");
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+let reka_ui = require("reka-ui");
+// src/components/Flyout/FlyoutRoot.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+// src/components/Flyout/FlyoutRoot.vue
+var FlyoutRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "FlyoutRoot",
+	props: {
+		icon: {},
+		label: {},
+		ariaLabel: {},
+		direction: { default: "left" },
+		openOnHover: {
+			type: Boolean,
+			default: true
+		},
+		css: {}
+	},
+	setup(__props) {
+		/**
+		* @component FlyoutRoot
+		* @description Dropdown panel built on reka-ui Popover. Opens on mouse hover and on click;
+		* Escape and an outside click close it. A click while it is hover-open pins it open.
+		*
+		* @slot trigger - Replaces the trigger button. Render exactly one element; it becomes
+		* the Popover trigger. Slot props: `{ open, toggle }`.
+		* @slot trigger-label - Replaces the label inside the default trigger.
+		* @slot trigger-icon - Appended inside the default trigger. Slot props: `{ open }`.
+		* @slot dropdown - Replaces the default `Flyout.Dropdown`. Keep the panel inside a
+		* `Flyout.Dropdown` so Escape, outside clicks, and positioning still work.
+		* @slot default - Panel content.
+		*/
+		const props = __props;
+		const slots = (0, vue.useSlots)();
+		const { open, openedBy, setOpen, toggle, pin, onPointerEnter, onPointerLeave } = require_flyout.useFlyout({ openOnHover: () => props.openOnHover });
+		(0, vue.provide)(require_FlyoutDropdown.FlyoutContextKey, {
+			openedBy,
+			direction: (0, vue.toRef)(props, "direction")
+		});
+		const triggerId = (0, vue.useId)();
+		let clickOnTrigger = false;
+		/** Runs before PopoverTrigger's own click handler toggles the popover. */
+		const onClickCapture = (event) => {
+			const target = event.target;
+			clickOnTrigger = Boolean(target?.closest?.(`[data-flyout-trigger="${triggerId}"]`));
+		};
+		const onOpenChange = (value) => {
+			const fromTrigger = clickOnTrigger;
+			clickOnTrigger = false;
+			if (!value && fromTrigger && openedBy.value === "hover") {
+				pin();
+				return;
+			}
+			setOpen(value, "click");
+		};
+		const styles = (0, vue.computed)(() => require_FlyoutDropdown.flyoutStyles.raw());
+		const hasCustomTrigger = (0, vue.computed)(() => Boolean(slots.trigger));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.PopoverRoot), {
+				open: (0, vue.unref)(open),
+				"onUpdate:open": onOpenChange
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
+					class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.root, props.css?.root)),
+					onPointerenter: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(onPointerEnter) && (0, vue.unref)(onPointerEnter)(...args)),
+					onPointerleave: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(onPointerLeave) && (0, vue.unref)(onPointerLeave)(...args)),
+					onClickCapture
+				}, [hasCustomTrigger.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.PopoverTrigger), {
+					key: 0,
+					"as-child": "",
+					"data-flyout-trigger": (0, vue.unref)(triggerId)
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "trigger", {
+						open: (0, vue.unref)(open),
+						toggle: (0, vue.unref)(toggle)
+					})]),
+					_: 3
+				}, 8, ["data-flyout-trigger"])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.PopoverTrigger), {
+					key: 1,
+					"data-flyout-trigger": (0, vue.unref)(triggerId),
+					class: (0, vue.normalizeClass)([(0, vue.unref)(require_css.withCss)(styles.value.trigger, props.css?.trigger), (0, vue.unref)(open) ? "active" : null]),
+					"aria-label": __props.ariaLabel || __props.label
+				}, {
+					default: (0, vue.withCtx)(() => [
+						props.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+							key: 0,
+							class: (0, vue.normalizeClass)(props.icon),
+							"aria-hidden": "true"
+						}, null, 2)) : (0, vue.createCommentVNode)("", true),
+						(0, vue.renderSlot)(_ctx.$slots, "trigger-label", {}, () => [(0, vue.createElementVNode)("span", { innerHTML: __props.label }, null, 8, _hoisted_1)]),
+						(0, vue.renderSlot)(_ctx.$slots, "trigger-icon", { open: (0, vue.unref)(open) })
+					]),
+					_: 3
+				}, 8, [
+					"data-flyout-trigger",
+					"class",
+					"aria-label"
+				])), (0, vue.renderSlot)(_ctx.$slots, "dropdown", { open: (0, vue.unref)(open) }, () => [(0, vue.createVNode)(require_FlyoutDropdown.FlyoutDropdown_default, { css: { root: props.css?.content } }, {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					_: 3
+				}, 8, ["css"])])], 34)]),
+				_: 3
+			}, 8, ["open"]);
+		};
+	}
+});
+Object.defineProperty(exports, "FlyoutRoot_default", {
+	enumerable: true,
+	get: function() {
+		return FlyoutRoot_default;
+	}
+});

package/dist/FormPrompt-BDAVKk5i.cjs

@@ -0,0 +1,63 @@
+const require_styles = require("./styles-_I-I4HYc.cjs");
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+// src/components/Form/FormPrompt.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"action",
+	"method",
+	"name",
+	"aria-label"
+];
+var _hoisted_2 = ["placeholder"];
+// src/components/Form/FormPrompt.vue
+var FormPrompt_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "FormPrompt",
+	props: {
+		action: {},
+		method: { default: "post" },
+		id: {},
+		name: {},
+		ariaLabel: {},
+		placeholder: {},
+		css: {}
+	},
+	emits: ["submit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const promptForm = (0, vue.ref)(null);
+		const styles = require_styles.formPromptStyles.raw();
+		const handleSubmit = (event) => {
+			event.preventDefault();
+			emit("submit", promptForm.value);
+		};
+		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).root, props.css?.root)) }, [(0, vue.renderSlot)(_ctx.$slots, "alert"), (0, vue.createElementVNode)("form", {
+				id: __props.id,
+				ref_key: "promptForm",
+				ref: promptForm,
+				action: __props.action,
+				method: __props.method,
+				name: __props.name,
+				"aria-label": __props.ariaLabel,
+				class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).form, props.css?.form)),
+				onSubmit: handleSubmit
+			}, [
+				(0, vue.renderSlot)(_ctx.$slots, "parameter"),
+				(0, vue.renderSlot)(_ctx.$slots, "textarea", {}, () => [(0, vue.createElementVNode)("textarea", {
+					name: "message",
+					class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).textarea, props.css?.textarea)),
+					placeholder: __props.placeholder
+				}, null, 10, _hoisted_2)]),
+				(0, vue.renderSlot)(_ctx.$slots, "footer")
+			], 42, _hoisted_1)], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "FormPrompt_default", {
+	enumerable: true,
+	get: function() {
+		return FormPrompt_default;
+	}
+});

package/dist/FormPrompt-BuS1lg-K.js

@@ -0,0 +1,58 @@
+import { t as formPromptStyles } from "./styles-CK7DJVwO.js";
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, unref } from "vue";
+// src/components/Form/FormPrompt.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"action",
+	"method",
+	"name",
+	"aria-label"
+];
+var _hoisted_2 = ["placeholder"];
+// src/components/Form/FormPrompt.vue
+var FormPrompt_default = /* @__PURE__ */ defineComponent({
+	__name: "FormPrompt",
+	props: {
+		action: {},
+		method: { default: "post" },
+		id: {},
+		name: {},
+		ariaLabel: {},
+		placeholder: {},
+		css: {}
+	},
+	emits: ["submit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const promptForm = ref(null);
+		const styles = formPromptStyles.raw();
+		const handleSubmit = (event) => {
+			event.preventDefault();
+			emit("submit", promptForm.value);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(withCss)(unref(styles).root, props.css?.root)) }, [renderSlot(_ctx.$slots, "alert"), createElementVNode("form", {
+				id: __props.id,
+				ref_key: "promptForm",
+				ref: promptForm,
+				action: __props.action,
+				method: __props.method,
+				name: __props.name,
+				"aria-label": __props.ariaLabel,
+				class: normalizeClass(unref(withCss)(unref(styles).form, props.css?.form)),
+				onSubmit: handleSubmit
+			}, [
+				renderSlot(_ctx.$slots, "parameter"),
+				renderSlot(_ctx.$slots, "textarea", {}, () => [createElementVNode("textarea", {
+					name: "message",
+					class: normalizeClass(unref(withCss)(unref(styles).textarea, props.css?.textarea)),
+					placeholder: __props.placeholder
+				}, null, 10, _hoisted_2)]),
+				renderSlot(_ctx.$slots, "footer")
+			], 42, _hoisted_1)], 2);
+		};
+	}
+});
+export { FormPrompt_default as t };

package/dist/FormPromptFooter-BhwWsaib.cjs

@@ -0,0 +1,21 @@
+const require_styles = require("./styles-_I-I4HYc.cjs");
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+// src/components/Form/FormPromptFooter.vue
+var FormPromptFooter_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "FormPromptFooter",
+	props: { css: {} },
+	setup(__props) {
+		const props = __props;
+		const styles = require_styles.formPromptStyles.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).footer, props.css?.root)) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).inputs, props.css?.inputs)) }, [(0, vue.renderSlot)(_ctx.$slots, "inputs")], 2), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).action, props.css?.action)) }, [(0, vue.renderSlot)(_ctx.$slots, "action")], 2)], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "FormPromptFooter_default", {
+	enumerable: true,
+	get: function() {
+		return FormPromptFooter_default;
+	}
+});

package/dist/FormPromptFooter-BrUOs40t.js

@@ -0,0 +1,16 @@
+import { t as formPromptStyles } from "./styles-CK7DJVwO.js";
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+// src/components/Form/FormPromptFooter.vue
+var FormPromptFooter_default = /* @__PURE__ */ defineComponent({
+	__name: "FormPromptFooter",
+	props: { css: {} },
+	setup(__props) {
+		const props = __props;
+		const styles = formPromptStyles.raw();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(withCss)(unref(styles).footer, props.css?.root)) }, [createElementVNode("div", { class: normalizeClass(unref(withCss)(unref(styles).inputs, props.css?.inputs)) }, [renderSlot(_ctx.$slots, "inputs")], 2), createElementVNode("div", { class: normalizeClass(unref(withCss)(unref(styles).action, props.css?.action)) }, [renderSlot(_ctx.$slots, "action")], 2)], 2);
+		};
+	}
+});
+export { FormPromptFooter_default as t };

package/dist/HeroLead-BU-74-fX.js

@@ -0,0 +1,151 @@
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+import { sva } from "@webflare/ui/css";
+// src/components/Hero/styles.ts
+var heroLeadStyles = sva({
+	slots: [
+		"root",
+		"headline",
+		"description",
+		"actions"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "start",
+			marginX: "auto"
+		},
+		headline: {
+			"textWrap": "balance",
+			"fontWeight": "750",
+			"transition": "all 200ms",
+			"& mark, & strong": { color: "primary" }
+		},
+		description: {
+			"color": "text.muted",
+			"textWrap": "balance",
+			"transition": "all 200ms",
+			"& mark, & strong, & a": { color: "neutral" }
+		}
+	},
+	variants: {
+		alignItems: {
+			start: { root: {
+				alignItems: "start",
+				textAlign: "start"
+			} },
+			center: { root: {
+				alignItems: "center",
+				textAlign: "center"
+			} },
+			end: { root: {
+				alignItems: "end",
+				textAlign: "end"
+			} }
+		},
+		alignSelf: {
+			start: { root: { alignSelf: "start" } },
+			center: { root: { alignSelf: "center" } },
+			end: { root: { alignSelf: "end" } }
+		},
+		size: {
+			sm: {
+				headline: {
+					fontSize: {
+						base: "xl",
+						xl: "2xl"
+					},
+					lineHeight: "1.25"
+				},
+				description: { fontSize: {
+					base: "sm",
+					md: "md"
+				} }
+			},
+			md: {
+				headline: {
+					fontSize: {
+						base: "2xl",
+						xl: "3xl"
+					},
+					lineHeight: "1.25"
+				},
+				description: { fontSize: {
+					base: "md",
+					md: "lg"
+				} }
+			},
+			lg: {
+				headline: {
+					fontSize: {
+						"base": "2xl",
+						"md": "4xl",
+						"2xl": "5xl"
+					},
+					lineHeight: "1.1"
+				},
+				description: {
+					fontSize: {
+						"base": "md",
+						"md": "lg",
+						"2xl": "xl"
+					},
+					lineHeight: "1.75"
+				}
+			}
+		},
+		gap: {
+			sm: { root: { gap: "sm" } },
+			md: { root: { gap: "lg" } },
+			lg: { root: { gap: "xl" } },
+			xl: { root: { gap: "2xl" } }
+		}
+	}
+});
+// src/components/Hero/HeroLead.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = ["innerHTML"];
+// src/components/Hero/HeroLead.vue
+var HeroLead_default = /* @__PURE__ */ defineComponent({
+	__name: "HeroLead",
+	props: {
+		headline: {},
+		headlineTag: { default: "h1" },
+		description: {},
+		alignItems: { default: "start" },
+		alignSelf: { default: "start" },
+		size: { default: "md" },
+		gap: { default: "md" },
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = computed(() => heroLeadStyles.raw({
+			alignItems: props.alignItems,
+			alignSelf: props.alignSelf,
+			size: props.size,
+			gap: props.gap
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(withCss)(styles.value.root, props.css?.root)) }, [
+				renderSlot(_ctx.$slots, "prepend"),
+				renderSlot(_ctx.$slots, "headline", {}, () => [__props.headline ? (openBlock(), createBlock(resolveDynamicComponent(__props.headlineTag), {
+					key: 0,
+					class: normalizeClass(unref(withCss)(styles.value.headline, props.css?.headline))
+				}, {
+					default: withCtx(() => [createElementVNode("span", { innerHTML: __props.headline }, null, 8, _hoisted_1)]),
+					_: 1
+				}, 8, ["class"])) : createCommentVNode("", true)]),
+				renderSlot(_ctx.$slots, "description", {}, () => [__props.description ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(withCss)(styles.value.description, props.css?.description)),
+					innerHTML: __props.description
+				}, null, 10, _hoisted_2)) : createCommentVNode("", true)]),
+				renderSlot(_ctx.$slots, "actions"),
+				renderSlot(_ctx.$slots, "append")
+			], 2);
+		};
+	}
+});
+export { HeroLead_default as t };

package/dist/HeroLead-D52JBlM2.cjs

@@ -0,0 +1,155 @@
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+// src/components/Hero/styles.ts
+var heroLeadStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"root",
+		"headline",
+		"description",
+		"actions"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "start",
+			marginX: "auto"
+		},
+		headline: {
+			"textWrap": "balance",
+			"fontWeight": "750",
+			"transition": "all 200ms",
+			"& mark, & strong": { color: "primary" }
+		},
+		description: {
+			"color": "text.muted",
+			"textWrap": "balance",
+			"transition": "all 200ms",
+			"& mark, & strong, & a": { color: "neutral" }
+		}
+	},
+	variants: {
+		alignItems: {
+			start: { root: {
+				alignItems: "start",
+				textAlign: "start"
+			} },
+			center: { root: {
+				alignItems: "center",
+				textAlign: "center"
+			} },
+			end: { root: {
+				alignItems: "end",
+				textAlign: "end"
+			} }
+		},
+		alignSelf: {
+			start: { root: { alignSelf: "start" } },
+			center: { root: { alignSelf: "center" } },
+			end: { root: { alignSelf: "end" } }
+		},
+		size: {
+			sm: {
+				headline: {
+					fontSize: {
+						base: "xl",
+						xl: "2xl"
+					},
+					lineHeight: "1.25"
+				},
+				description: { fontSize: {
+					base: "sm",
+					md: "md"
+				} }
+			},
+			md: {
+				headline: {
+					fontSize: {
+						base: "2xl",
+						xl: "3xl"
+					},
+					lineHeight: "1.25"
+				},
+				description: { fontSize: {
+					base: "md",
+					md: "lg"
+				} }
+			},
+			lg: {
+				headline: {
+					fontSize: {
+						"base": "2xl",
+						"md": "4xl",
+						"2xl": "5xl"
+					},
+					lineHeight: "1.1"
+				},
+				description: {
+					fontSize: {
+						"base": "md",
+						"md": "lg",
+						"2xl": "xl"
+					},
+					lineHeight: "1.75"
+				}
+			}
+		},
+		gap: {
+			sm: { root: { gap: "sm" } },
+			md: { root: { gap: "lg" } },
+			lg: { root: { gap: "xl" } },
+			xl: { root: { gap: "2xl" } }
+		}
+	}
+});
+// src/components/Hero/HeroLead.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = ["innerHTML"];
+// src/components/Hero/HeroLead.vue
+var HeroLead_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "HeroLead",
+	props: {
+		headline: {},
+		headlineTag: { default: "h1" },
+		description: {},
+		alignItems: { default: "start" },
+		alignSelf: { default: "start" },
+		size: { default: "md" },
+		gap: { default: "md" },
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = (0, vue.computed)(() => heroLeadStyles.raw({
+			alignItems: props.alignItems,
+			alignSelf: props.alignSelf,
+			size: props.size,
+			gap: props.gap
+		}));
+		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)) }, [
+				(0, vue.renderSlot)(_ctx.$slots, "prepend"),
+				(0, vue.renderSlot)(_ctx.$slots, "headline", {}, () => [__props.headline ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.headlineTag), {
+					key: 0,
+					class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.headline, props.css?.headline))
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { innerHTML: __props.headline }, null, 8, _hoisted_1)]),
+					_: 1
+				}, 8, ["class"])) : (0, vue.createCommentVNode)("", true)]),
+				(0, vue.renderSlot)(_ctx.$slots, "description", {}, () => [__props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 0,
+					class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.description, props.css?.description)),
+					innerHTML: __props.description
+				}, null, 10, _hoisted_2)) : (0, vue.createCommentVNode)("", true)]),
+				(0, vue.renderSlot)(_ctx.$slots, "actions"),
+				(0, vue.renderSlot)(_ctx.$slots, "append")
+			], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "HeroLead_default", {
+	enumerable: true,
+	get: function() {
+		return HeroLead_default;
+	}
+});