@webflare/ui 0.0.0-stage → 0.1.1

package/dist/FieldUrl-DNnXDfBR.cjs

@@ -0,0 +1,391 @@
+const require_FieldBase = require("./FieldBase-X1FWOqPU.cjs");
+const require_FieldLabel = require("./FieldLabel-DBKhMbql.cjs");
+const require_FieldFooter = require("./FieldFooter-05GxwrFg.cjs");
+const require_css = require("./css-BRRSQx3P.cjs");
+const require_useFieldControl = require("./useFieldControl-CEI7IRAa.cjs");
+let vue = require("vue");
+// src/internal/controls/urlStyles.ts
+/** URL field: clickable protocol prefix plus host/path input. */
+var urlStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"root",
+		"protocol",
+		"input"
+	],
+	base: {
+		root: {
+			display: "flex",
+			alignItems: "center",
+			width: "100%",
+			minWidth: "200px",
+			paddingX: "0",
+			paddingY: "0",
+			gap: "0",
+			overflow: "hidden",
+			backgroundColor: "surface",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border",
+			borderRadius: "lg",
+			outlineWidth: "3px",
+			outlineColor: "transparent",
+			outlineOffset: "0px",
+			outlineStyle: "solid",
+			fontWeight: "450",
+			lineHeight: "1.5",
+			color: "neutral",
+			transition: "all 300ms",
+			_hover: { borderColor: "border.hover" },
+			_focus: { outlineColor: "transparent" },
+			_focusWithin: {
+				outlineColor: "primary/50",
+				borderColor: "primary"
+			},
+			_disabled: {
+				opacity: "0.5",
+				cursor: "not-allowed"
+			}
+		},
+		protocol: {
+			"display": "inline-flex",
+			"alignItems": "center",
+			"gap": "2xs",
+			"flexShrink": 0,
+			"margin": "0",
+			"border": "none",
+			"borderRadius": "0",
+			"backgroundColor": "neutral.subtle",
+			"color": "inherit",
+			"font": "inherit",
+			"fontWeight": "450",
+			"lineHeight": "1.5",
+			"whiteSpace": "nowrap",
+			"cursor": "pointer",
+			"_hover": { opacity: "0.9" },
+			"_focusVisible": {
+				outlineWidth: "2px",
+				outlineStyle: "solid",
+				outlineColor: "primary",
+				outlineOffset: "-2px",
+				borderRadius: "md"
+			},
+			"_disabled": {
+				cursor: "not-allowed",
+				opacity: "1"
+			},
+			"& .icon": { fontSize: "0.9em" }
+		},
+		input: {
+			flex: "1",
+			minWidth: "0",
+			width: "100%",
+			margin: "0",
+			border: "none",
+			outline: "none",
+			backgroundColor: "transparent",
+			color: "inherit",
+			font: "inherit",
+			fontWeight: "450",
+			lineHeight: "1.5",
+			_placeholder: { color: "text.placeholder" },
+			_disabled: { cursor: "not-allowed" }
+		}
+	},
+	variants: {
+		size: {
+			sm: {
+				root: { fontSize: "sm" },
+				protocol: {
+					paddingInline: "sm",
+					paddingBlock: "xs"
+				},
+				input: {
+					paddingInlineStart: "sm",
+					paddingInlineEnd: "md",
+					paddingBlock: "xs"
+				}
+			},
+			md: {
+				root: { fontSize: "md" },
+				protocol: {
+					paddingInline: "sm",
+					paddingBlock: "sm"
+				},
+				input: {
+					paddingInlineStart: "sm",
+					paddingInlineEnd: "lg",
+					paddingBlock: "sm"
+				}
+			},
+			lg: {
+				root: { fontSize: "lg" },
+				protocol: {
+					paddingInline: "md",
+					paddingBlock: "md"
+				},
+				input: {
+					paddingInlineStart: "md",
+					paddingInlineEnd: "xl",
+					paddingBlock: "md"
+				}
+			}
+		},
+		valid: {
+			true: { root: {
+				borderColor: "success.subtle !important",
+				_focusWithin: {
+					borderColor: "success.subtle !important",
+					outlineColor: "success.subtle/50 !important"
+				}
+			} },
+			false: { root: {
+				borderColor: "danger.subtle !important",
+				_focusWithin: {
+					borderColor: "danger.subtle !important",
+					outlineColor: "danger.subtle/50 !important"
+				}
+			} },
+			none: {}
+		},
+		secure: {
+			true: { protocol: { "& .icon": { color: "success.subtle" } } },
+			false: { protocol: { "& .icon": { color: "text.placeholder" } } }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		valid: "none",
+		secure: true
+	}
+});
+// src/internal/controls/urlUtils.ts
+var SCHEME = /^(https?):\/\/(.*)$/i;
+/**
+* Split a leading `http://`, `https://`, or `//` off `value`.
+* `protocol` is only set when the value named one.
+*/
+function splitScheme(value) {
+	const match = SCHEME.exec(value);
+	if (match) return {
+		protocol: match[1].toLowerCase(),
+		hostPath: match[2] ?? ""
+	};
+	if (value.startsWith("//")) return { hostPath: value.slice(2) };
+	return null;
+}
+function parseUrlValue(value, defaultProtocol = "https") {
+	const raw = (value ?? "").trim();
+	const split = splitScheme(raw);
+	return {
+		protocol: split?.protocol ?? defaultProtocol,
+		hostPath: split ? split.hostPath : raw
+	};
+}
+/**
+* Strip a leading http(s):// (or //) from user input/paste and capture the protocol.
+* Input without a scheme is returned unchanged, so typing is not disturbed.
+*/
+function sanitizeHostPathInput(input) {
+	return splitScheme(input.trimStart()) ?? { hostPath: input };
+}
+function joinUrl(protocol, hostPath) {
+	const path = hostPath.trim();
+	if (!path) return "";
+	return `${protocol}://${path}`;
+}
+// src/internal/controls/ControlUrl.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["name", "value"];
+var _hoisted_2 = ["disabled", "aria-label"];
+var _hoisted_3 = [
+	"id",
+	"placeholder",
+	"value",
+	"disabled",
+	"required",
+	"autocomplete",
+	"aria-invalid",
+	"aria-describedby"
+];
+// src/internal/controls/ControlUrl.vue
+var ControlUrl_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ControlUrl",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		id: {},
+		name: {},
+		placeholder: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		autocomplete: { default: "url" },
+		size: { default: "md" },
+		valid: {
+			type: [Boolean, String],
+			default: "none"
+		},
+		defaultProtocol: { default: "https" },
+		css: {},
+		class: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component ControlUrl
+		* @description URL input group with a clickable http(s) prefix and paste sanitization.
+		*/
+		const props = __props;
+		const model = (0, vue.useModel)(__props, "modelValue");
+		const { id, describedBy, valid, invalid } = require_useFieldControl.useFieldControl(props);
+		const protocol = (0, vue.ref)(props.defaultProtocol);
+		const hostPath = (0, vue.ref)("");
+		(0, vue.watch)(model, (value) => {
+			if (!(value ?? "").trim()) {
+				hostPath.value = "";
+				return;
+			}
+			const parsed = parseUrlValue(value, props.defaultProtocol);
+			protocol.value = parsed.protocol;
+			hostPath.value = parsed.hostPath;
+		}, { immediate: true });
+		const fullUrl = (0, vue.computed)(() => joinUrl(protocol.value, hostPath.value));
+		const protocolLabel = (0, vue.computed)(() => `${protocol.value}://`);
+		const isSecure = (0, vue.computed)(() => protocol.value === "https");
+		const styles = (0, vue.computed)(() => urlStyles.raw({
+			size: props.size,
+			valid: valid.value,
+			secure: isSecure.value
+		}));
+		const emitJoined = () => {
+			model.value = fullUrl.value;
+		};
+		const toggleProtocol = () => {
+			if (props.disabled) return;
+			protocol.value = protocol.value === "https" ? "http" : "https";
+			emitJoined();
+		};
+		const handleInput = (event) => {
+			const sanitized = sanitizeHostPathInput(event.target.value);
+			if (sanitized.protocol) protocol.value = sanitized.protocol;
+			hostPath.value = sanitized.hostPath;
+			emitJoined();
+		};
+		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.name ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("input", {
+					key: 0,
+					type: "hidden",
+					name: __props.name,
+					value: fullUrl.value
+				}, null, 8, _hoisted_1)) : (0, vue.createCommentVNode)("", true),
+				(0, vue.createElementVNode)("button", {
+					type: "button",
+					class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.protocol, props.css?.protocol)),
+					disabled: __props.disabled,
+					"aria-label": `Toggle protocol, currently ${protocolLabel.value}`,
+					onClick: toggleProtocol
+				}, [(0, vue.createElementVNode)("span", {
+					class: (0, vue.normalizeClass)(["icon", isSecure.value ? "icon-lock-simple-bold" : "icon-lock-simple-open-bold"]),
+					"aria-hidden": "true"
+				}, null, 2), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(protocolLabel.value), 1)], 10, _hoisted_2),
+				(0, vue.createElementVNode)("input", {
+					id: (0, vue.unref)(id),
+					type: "text",
+					inputmode: "url",
+					class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.input, props.css?.input)),
+					placeholder: __props.placeholder || void 0,
+					value: hostPath.value,
+					disabled: __props.disabled,
+					required: __props.required,
+					autocomplete: __props.autocomplete || void 0,
+					"aria-invalid": (0, vue.unref)(invalid),
+					"aria-describedby": (0, vue.unref)(describedBy),
+					onInput: handleInput
+				}, null, 42, _hoisted_3)
+			], 2);
+		};
+	}
+});
+// src/components/Field/FieldUrl.vue
+var FieldUrl_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "FieldUrl",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		id: {},
+		name: {},
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		message: {},
+		error: {},
+		class: {},
+		placeholder: {},
+		autocomplete: { default: "url" },
+		defaultProtocol: { default: "https" },
+		css: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component FieldUrl
+		* @description URL field with a clickable protocol prefix, label, helper text, and error.
+		*/
+		const props = __props;
+		const model = (0, vue.useModel)(__props, "modelValue");
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(require_FieldBase.FieldBase_default, {
+				id: __props.id || void 0,
+				error: __props.error,
+				message: __props.message
+			}, {
+				default: (0, vue.withCtx)(() => [
+					__props.label ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_FieldLabel.FieldLabel_default, {
+						key: 0,
+						label: __props.label,
+						required: __props.required,
+						size: "sm"
+					}, null, 8, ["label", "required"])) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createVNode)(ControlUrl_default, {
+						modelValue: model.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+						placeholder: __props.placeholder,
+						autocomplete: __props.autocomplete,
+						"default-protocol": __props.defaultProtocol,
+						css: props.css,
+						name: __props.name,
+						disabled: __props.disabled,
+						required: __props.required,
+						size: __props.size,
+						class: (0, vue.normalizeClass)(props.class)
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"autocomplete",
+						"default-protocol",
+						"css",
+						"name",
+						"disabled",
+						"required",
+						"size",
+						"class"
+					]),
+					(0, vue.createVNode)(require_FieldFooter.FieldFooter_default)
+				]),
+				_: 1
+			}, 8, [
+				"id",
+				"error",
+				"message"
+			]);
+		};
+	}
+});
+Object.defineProperty(exports, "FieldUrl_default", {
+	enumerable: true,
+	get: function() {
+		return FieldUrl_default;
+	}
+});

package/dist/FlyoutDropdown-Bw3pD8Tk.cjs

@@ -0,0 +1,90 @@
+const require_css = require("./css-BRRSQx3P.cjs");
+const require_injection_key = require("./injection-key-DPb_AXnh.cjs");
+let vue = require("vue");
+let reka_ui = require("reka-ui");
+// src/components/Flyout/styles.ts
+var flyoutStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"root",
+		"trigger",
+		"content"
+	],
+	base: {
+		root: {
+			position: "relative",
+			zIndex: 20
+		},
+		trigger: {
+			cursor: "pointer",
+			fontFamily: "inherit"
+		},
+		content: {
+			"zIndex": 50,
+			"paddingTop": "sm",
+			"outline": "none",
+			"&[data-state=\"open\"]": {
+				animationName: "flyoutIn",
+				animationDuration: "200ms"
+			},
+			"&[data-state=\"closed\"]": {
+				animationName: "flyoutOut",
+				animationDuration: "200ms"
+			}
+		}
+	}
+});
+// src/components/Flyout/types.ts
+var FlyoutContextKey = require_injection_key.createInjectionKey("Flyout");
+// src/components/Flyout/FlyoutDropdown.vue
+var FlyoutDropdown_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "FlyoutDropdown",
+	props: {
+		direction: {},
+		css: {}
+	},
+	setup(__props) {
+		/**
+		* @component FlyoutDropdown
+		* @description The flyout panel (reka-ui PopoverContent). Use it inside `Flyout.Root`,
+		* usually through the root's `dropdown` slot.
+		*/
+		const props = __props;
+		const flyout = (0, vue.inject)(FlyoutContextKey, null);
+		const align = (0, vue.computed)(() => (props.direction ?? flyout?.direction.value ?? "left") === "left" ? "start" : "end");
+		const onOpenAutoFocus = (event) => {
+			if (flyout?.openedBy.value === "hover") event.preventDefault();
+		};
+		const styles = flyoutStyles.raw();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.PopoverContent), {
+				side: "bottom",
+				align: align.value,
+				"side-offset": 0,
+				"avoid-collisions": false,
+				class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).content, props.css?.root)),
+				onOpenAutoFocus
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["align", "class"]);
+		};
+	}
+});
+Object.defineProperty(exports, "FlyoutContextKey", {
+	enumerable: true,
+	get: function() {
+		return FlyoutContextKey;
+	}
+});
+Object.defineProperty(exports, "FlyoutDropdown_default", {
+	enumerable: true,
+	get: function() {
+		return FlyoutDropdown_default;
+	}
+});
+Object.defineProperty(exports, "flyoutStyles", {
+	enumerable: true,
+	get: function() {
+		return flyoutStyles;
+	}
+});

package/dist/FlyoutDropdown-ByXW9lqH.js

@@ -0,0 +1,74 @@
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { t as createInjectionKey } from "./injection-key-BQYV9vIr.js";
+import { computed, createBlock, defineComponent, inject, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { PopoverContent } from "reka-ui";
+import { sva } from "@webflare/ui/css";
+// src/components/Flyout/styles.ts
+var flyoutStyles = sva({
+	slots: [
+		"root",
+		"trigger",
+		"content"
+	],
+	base: {
+		root: {
+			position: "relative",
+			zIndex: 20
+		},
+		trigger: {
+			cursor: "pointer",
+			fontFamily: "inherit"
+		},
+		content: {
+			"zIndex": 50,
+			"paddingTop": "sm",
+			"outline": "none",
+			"&[data-state=\"open\"]": {
+				animationName: "flyoutIn",
+				animationDuration: "200ms"
+			},
+			"&[data-state=\"closed\"]": {
+				animationName: "flyoutOut",
+				animationDuration: "200ms"
+			}
+		}
+	}
+});
+// src/components/Flyout/types.ts
+var FlyoutContextKey = createInjectionKey("Flyout");
+// src/components/Flyout/FlyoutDropdown.vue
+var FlyoutDropdown_default = /* @__PURE__ */ defineComponent({
+	__name: "FlyoutDropdown",
+	props: {
+		direction: {},
+		css: {}
+	},
+	setup(__props) {
+		/**
+		* @component FlyoutDropdown
+		* @description The flyout panel (reka-ui PopoverContent). Use it inside `Flyout.Root`,
+		* usually through the root's `dropdown` slot.
+		*/
+		const props = __props;
+		const flyout = inject(FlyoutContextKey, null);
+		const align = computed(() => (props.direction ?? flyout?.direction.value ?? "left") === "left" ? "start" : "end");
+		const onOpenAutoFocus = (event) => {
+			if (flyout?.openedBy.value === "hover") event.preventDefault();
+		};
+		const styles = flyoutStyles.raw();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PopoverContent), {
+				side: "bottom",
+				align: align.value,
+				"side-offset": 0,
+				"avoid-collisions": false,
+				class: normalizeClass(unref(withCss)(unref(styles).content, props.css?.root)),
+				onOpenAutoFocus
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["align", "class"]);
+		};
+	}
+});
+export { FlyoutContextKey as n, flyoutStyles as r, FlyoutDropdown_default as t };

package/dist/FlyoutRoot-CuXnqpf8.js

@@ -0,0 +1,110 @@
+import { n as FlyoutContextKey, r as flyoutStyles, t as FlyoutDropdown_default } from "./FlyoutDropdown-ByXW9lqH.js";
+import { t as useFlyout } from "./flyout-QHh1jKmV.js";
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, provide, renderSlot, toRef, unref, useId, useSlots, withCtx } from "vue";
+import { PopoverRoot, PopoverTrigger } from "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__ */ 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 = useSlots();
+		const { open, openedBy, setOpen, toggle, pin, onPointerEnter, onPointerLeave } = useFlyout({ openOnHover: () => props.openOnHover });
+		provide(FlyoutContextKey, {
+			openedBy,
+			direction: toRef(props, "direction")
+		});
+		const triggerId = 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 = computed(() => flyoutStyles.raw());
+		const hasCustomTrigger = computed(() => Boolean(slots.trigger));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PopoverRoot), {
+				open: unref(open),
+				"onUpdate:open": onOpenChange
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					class: normalizeClass(unref(withCss)(styles.value.root, props.css?.root)),
+					onPointerenter: _cache[0] || (_cache[0] = (...args) => unref(onPointerEnter) && unref(onPointerEnter)(...args)),
+					onPointerleave: _cache[1] || (_cache[1] = (...args) => unref(onPointerLeave) && unref(onPointerLeave)(...args)),
+					onClickCapture
+				}, [hasCustomTrigger.value ? (openBlock(), createBlock(unref(PopoverTrigger), {
+					key: 0,
+					"as-child": "",
+					"data-flyout-trigger": unref(triggerId)
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", {
+						open: unref(open),
+						toggle: unref(toggle)
+					})]),
+					_: 3
+				}, 8, ["data-flyout-trigger"])) : (openBlock(), createBlock(unref(PopoverTrigger), {
+					key: 1,
+					"data-flyout-trigger": unref(triggerId),
+					class: normalizeClass([unref(withCss)(styles.value.trigger, props.css?.trigger), unref(open) ? "active" : null]),
+					"aria-label": __props.ariaLabel || __props.label
+				}, {
+					default: withCtx(() => [
+						props.icon ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							class: normalizeClass(props.icon),
+							"aria-hidden": "true"
+						}, null, 2)) : createCommentVNode("", true),
+						renderSlot(_ctx.$slots, "trigger-label", {}, () => [createElementVNode("span", { innerHTML: __props.label }, null, 8, _hoisted_1)]),
+						renderSlot(_ctx.$slots, "trigger-icon", { open: unref(open) })
+					]),
+					_: 3
+				}, 8, [
+					"data-flyout-trigger",
+					"class",
+					"aria-label"
+				])), renderSlot(_ctx.$slots, "dropdown", { open: unref(open) }, () => [createVNode(FlyoutDropdown_default, { css: { root: props.css?.content } }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 8, ["css"])])], 34)]),
+				_: 3
+			}, 8, ["open"]);
+		};
+	}
+});
+export { FlyoutRoot_default as t };