@webflare/ui 0.0.0-stage → 0.1.0

package/dist/ControlSwitch-C0Rj6fSW.js

@@ -0,0 +1,184 @@
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { t as useFieldControl } from "./useFieldControl-BkQi1zak.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, resolveDynamicComponent, toDisplayString, unref, useModel, withCtx } from "vue";
+import { SwitchRoot, SwitchThumb } from "reka-ui";
+import { sva } from "@webflare/ui/css";
+// src/internal/controls/switchStyles.ts
+var switchStyles = sva({
+	slots: [
+		"root",
+		"track",
+		"thumb",
+		"label"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "sm",
+			cursor: "pointer",
+			userSelect: "none",
+			_disabled: {
+				cursor: "not-allowed",
+				opacity: "0.5"
+			}
+		},
+		track: {
+			"transition": "all 300ms",
+			"overflow": "hidden",
+			"display": "flex",
+			"flexDir": "row",
+			"cursor": "pointer",
+			"justifyContent": "start",
+			"borderWidth": "1px",
+			"borderStyle": "solid",
+			"borderColor": {
+				base: "grey.300",
+				_dark: "grey.300/75",
+				_osDark: "grey.300/75"
+			},
+			"padding": "2px",
+			"borderRadius": "pill",
+			"bgColor": {
+				base: "grey.100",
+				_dark: "grey.950",
+				_osDark: "grey.950"
+			},
+			"flexShrink": "0",
+			"_hover": { borderColor: {
+				base: "grey.400",
+				_dark: "grey.400",
+				_osDark: "grey.400"
+			} },
+			"&[data-state=\"checked\"]": { bgColor: {
+				base: "primary",
+				_dark: "primary",
+				_osDark: "primary"
+			} },
+			"&[data-disabled]": { cursor: "not-allowed" },
+			"&[data-invalid]": { borderColor: {
+				base: "danger.subtle",
+				_dark: "danger.subtle",
+				_osDark: "danger.subtle"
+			} }
+		},
+		thumb: {
+			transition: "all 300ms",
+			aspectRatio: "1",
+			display: "block",
+			borderRadius: "pill",
+			bgColor: "white",
+			translate: "auto",
+			translateX: "0",
+			shadow: "0 0 16px var(--shadow-color)",
+			shadowColor: {
+				base: "grey.400",
+				_dark: "grey.950",
+				_osDark: "grey.950"
+			}
+		},
+		label: {
+			fontWeight: "500",
+			color: "neutral",
+			lineHeight: "1.4"
+		}
+	},
+	variants: { size: {
+		sm: {
+			track: { width: "32px" },
+			thumb: {
+				"width": "12px",
+				"[data-state=\"checked\"] &": { translateX: "14px" }
+			},
+			label: { fontSize: "sm" }
+		},
+		md: {
+			track: { width: "40px" },
+			thumb: {
+				"width": "16px",
+				"[data-state=\"checked\"] &": { translateX: "18px" }
+			},
+			label: { fontSize: "md" }
+		},
+		lg: {
+			track: { width: "48px" },
+			thumb: {
+				"width": "20px",
+				"[data-state=\"checked\"] &": { translateX: "22px" }
+			},
+			label: { fontSize: "lg" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+// src/internal/controls/ControlSwitch.vue
+var ControlSwitch_default = /* @__PURE__ */ defineComponent({
+	__name: "ControlSwitch",
+	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 ControlSwitch
+		* @description Switch built on reka-ui Switch primitives.
+		*/
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const { id, describedBy, invalid } = useFieldControl(props);
+		const styles = computed(() => switchStyles.raw({ size: props.size }));
+		const handleUpdate = (value) => {
+			model.value = value;
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.label ? "label" : "div"), {
+				class: normalizeClass([unref(withCss)(styles.value.root, props.css?.root), props.class]),
+				"data-disabled": __props.disabled ? "" : void 0
+			}, {
+				default: withCtx(() => [createVNode(unref(SwitchRoot), {
+					id: unref(id),
+					name: __props.name || void 0,
+					required: __props.required,
+					disabled: __props.disabled,
+					"model-value": Boolean(model.value),
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy),
+					"data-invalid": unref(invalid) ? "" : void 0,
+					class: normalizeClass(unref(withCss)(styles.value.track, props.css?.track)),
+					"onUpdate:modelValue": handleUpdate
+				}, {
+					default: withCtx(() => [createVNode(unref(SwitchThumb), { class: normalizeClass(unref(withCss)(styles.value.thumb, props.css?.thumb)) }, null, 8, ["class"])]),
+					_: 1
+				}, 8, [
+					"id",
+					"name",
+					"required",
+					"disabled",
+					"model-value",
+					"aria-invalid",
+					"aria-describedby",
+					"data-invalid",
+					"class"
+				]), __props.label ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(unref(withCss)(styles.value.label, props.css?.label))
+				}, toDisplayString(__props.label), 3)) : createCommentVNode("", true)]),
+				_: 1
+			}, 8, ["class", "data-disabled"]);
+		};
+	}
+});
+export { ControlSwitch_default as t };

package/dist/DialogRoot-BiH9G8Jm.js

@@ -0,0 +1,170 @@
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { createBlock, createCommentVNode, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
+import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from "reka-ui";
+import { sva } from "@webflare/ui/css";
+// src/components/Dialog/styles.ts
+var dialogStyles = sva({
+	slots: [
+		"overlay",
+		"content",
+		"header",
+		"titleWrap",
+		"title",
+		"description",
+		"close",
+		"body"
+	],
+	base: {
+		overlay: {
+			position: "fixed",
+			inset: "0",
+			zIndex: "200",
+			bg: "black/75",
+			backdropFilter: "blur(20px)"
+		},
+		content: {
+			position: "fixed",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			zIndex: "300",
+			width: "calc(100% - 2rem)",
+			maxWidth: "720px",
+			maxHeight: "min(90vh, 900px)",
+			display: "flex",
+			flexDirection: "column",
+			bg: "surface",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border.subtle",
+			borderRadius: "lg",
+			boxShadow: {
+				base: "0 0 24px token(colors.black/12)",
+				_dark: "0 0 24px token(colors.black/45)",
+				_osDark: "0 0 24px token(colors.black/45)"
+			},
+			outline: "none",
+			overflow: "hidden"
+		},
+		header: {
+			display: "flex",
+			alignItems: "flex-start",
+			justifyContent: "space-between",
+			gap: "md",
+			p: "xl",
+			borderBottomWidth: "1px",
+			borderBottomStyle: "solid",
+			borderBottomColor: "border.subtle"
+		},
+		titleWrap: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "2xs",
+			minW: "0"
+		},
+		title: {
+			fontSize: "lg",
+			fontWeight: "700",
+			textWrap: "balance",
+			color: "neutral"
+		},
+		description: {
+			fontSize: "sm",
+			color: "text.muted"
+		},
+		close: {
+			display: "inline-flex",
+			alignItems: "center",
+			cursor: "pointer",
+			flexShrink: 0,
+			color: {
+				base: "grey.800",
+				_dark: "primary",
+				_osDark: "primary"
+			},
+			fontSize: "lg"
+		},
+		body: {
+			p: "xl",
+			overflow: "auto",
+			flex: "1",
+			minH: "0"
+		}
+	}
+});
+// src/components/Dialog/DialogRoot.vue
+var DialogRoot_default = /* @__PURE__ */ defineComponent({
+	__name: "DialogRoot",
+	props: /*@__PURE__*/ mergeModels({
+		title: {},
+		description: {},
+		closeLabel: { default: "Close" },
+		css: {}
+	}, {
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:open"],
+	setup(__props) {
+		/**
+		* @component DialogRoot
+		* @description Modal dialog built on reka-ui Dialog primitives.
+		*
+		* @prop {boolean} [open=false] - Controlled open state (`v-model:open`).
+		* @prop {string} [title] - Dialog title text.
+		* @prop {string} [description] - Dialog description text.
+		* @prop {string} [closeLabel='Close'] - Accessible label for the close button.
+		* @prop {DialogCss} [css] - Style overrides per slot. Wrap values in `css.raw()`.
+		*
+		* @slot default - Dialog body content.
+		* @slot title - Override the title region.
+		* @slot description - Override the description region.
+		* @slot close-icon - Override the close button icon.
+		* @slot header - Override the entire header.
+		*/
+		const open = useModel(__props, "open");
+		const props = __props;
+		const styles = dialogStyles.raw();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DialogRoot), {
+				open: open.value,
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+			}, {
+				default: withCtx(() => [createVNode(unref(DialogPortal), null, {
+					default: withCtx(() => [createVNode(unref(DialogOverlay), { class: normalizeClass(unref(withCss)(unref(styles).overlay, props.css?.overlay)) }, null, 8, ["class"]), createVNode(unref(DialogContent), { class: normalizeClass(unref(withCss)(unref(styles).content, props.css?.content)) }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", { class: normalizeClass(unref(withCss)(unref(styles).header, props.css?.header)) }, [createElementVNode("div", { class: normalizeClass(unref(withCss)(unref(styles).titleWrap, props.css?.titleWrap)) }, [renderSlot(_ctx.$slots, "title", {}, () => [props.title ? (openBlock(), createBlock(unref(DialogTitle), {
+							key: 0,
+							class: normalizeClass(unref(withCss)(unref(styles).title, props.css?.title))
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(props.title), 1)]),
+							_: 1
+						}, 8, ["class"])) : createCommentVNode("", true)]), renderSlot(_ctx.$slots, "description", {}, () => [props.description ? (openBlock(), createBlock(unref(DialogDescription), {
+							key: 0,
+							class: normalizeClass(unref(withCss)(unref(styles).description, props.css?.description))
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(props.description), 1)]),
+							_: 1
+						}, 8, ["class"])) : createCommentVNode("", true)])], 2), createVNode(unref(DialogClose), {
+							type: "button",
+							"aria-label": props.closeLabel,
+							class: normalizeClass(unref(withCss)(unref(styles).close, props.css?.close))
+						}, {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "close-icon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("span", {
+								class: "icon icon-x-bold",
+								"aria-hidden": "true"
+							}, null, -1))])]),
+							_: 3
+						}, 8, ["aria-label", "class"])], 2)]), createElementVNode("div", { class: normalizeClass(unref(withCss)(unref(styles).body, props.css?.body)) }, [renderSlot(_ctx.$slots, "default")], 2)]),
+						_: 3
+					}, 8, ["class"])]),
+					_: 3
+				})]),
+				_: 3
+			}, 8, ["open"]);
+		};
+	}
+});
+export { DialogRoot_default as t };

package/dist/DialogRoot-C6icP9Fb.cjs

@@ -0,0 +1,174 @@
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+let reka_ui = require("reka-ui");
+// src/components/Dialog/styles.ts
+var dialogStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"overlay",
+		"content",
+		"header",
+		"titleWrap",
+		"title",
+		"description",
+		"close",
+		"body"
+	],
+	base: {
+		overlay: {
+			position: "fixed",
+			inset: "0",
+			zIndex: "200",
+			bg: "black/75",
+			backdropFilter: "blur(20px)"
+		},
+		content: {
+			position: "fixed",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			zIndex: "300",
+			width: "calc(100% - 2rem)",
+			maxWidth: "720px",
+			maxHeight: "min(90vh, 900px)",
+			display: "flex",
+			flexDirection: "column",
+			bg: "surface",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border.subtle",
+			borderRadius: "lg",
+			boxShadow: {
+				base: "0 0 24px token(colors.black/12)",
+				_dark: "0 0 24px token(colors.black/45)",
+				_osDark: "0 0 24px token(colors.black/45)"
+			},
+			outline: "none",
+			overflow: "hidden"
+		},
+		header: {
+			display: "flex",
+			alignItems: "flex-start",
+			justifyContent: "space-between",
+			gap: "md",
+			p: "xl",
+			borderBottomWidth: "1px",
+			borderBottomStyle: "solid",
+			borderBottomColor: "border.subtle"
+		},
+		titleWrap: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "2xs",
+			minW: "0"
+		},
+		title: {
+			fontSize: "lg",
+			fontWeight: "700",
+			textWrap: "balance",
+			color: "neutral"
+		},
+		description: {
+			fontSize: "sm",
+			color: "text.muted"
+		},
+		close: {
+			display: "inline-flex",
+			alignItems: "center",
+			cursor: "pointer",
+			flexShrink: 0,
+			color: {
+				base: "grey.800",
+				_dark: "primary",
+				_osDark: "primary"
+			},
+			fontSize: "lg"
+		},
+		body: {
+			p: "xl",
+			overflow: "auto",
+			flex: "1",
+			minH: "0"
+		}
+	}
+});
+// src/components/Dialog/DialogRoot.vue
+var DialogRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "DialogRoot",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		title: {},
+		description: {},
+		closeLabel: { default: "Close" },
+		css: {}
+	}, {
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:open"],
+	setup(__props) {
+		/**
+		* @component DialogRoot
+		* @description Modal dialog built on reka-ui Dialog primitives.
+		*
+		* @prop {boolean} [open=false] - Controlled open state (`v-model:open`).
+		* @prop {string} [title] - Dialog title text.
+		* @prop {string} [description] - Dialog description text.
+		* @prop {string} [closeLabel='Close'] - Accessible label for the close button.
+		* @prop {DialogCss} [css] - Style overrides per slot. Wrap values in `css.raw()`.
+		*
+		* @slot default - Dialog body content.
+		* @slot title - Override the title region.
+		* @slot description - Override the description region.
+		* @slot close-icon - Override the close button icon.
+		* @slot header - Override the entire header.
+		*/
+		const open = (0, vue.useModel)(__props, "open");
+		const props = __props;
+		const styles = dialogStyles.raw();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.DialogRoot), {
+				open: open.value,
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.DialogPortal), null, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.DialogOverlay), { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).overlay, props.css?.overlay)) }, null, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.DialogContent), { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).content, props.css?.content)) }, {
+						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "header", {}, () => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).header, props.css?.header)) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).titleWrap, props.css?.titleWrap)) }, [(0, vue.renderSlot)(_ctx.$slots, "title", {}, () => [props.title ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.DialogTitle), {
+							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)(props.title), 1)]),
+							_: 1
+						}, 8, ["class"])) : (0, vue.createCommentVNode)("", true)]), (0, vue.renderSlot)(_ctx.$slots, "description", {}, () => [props.description ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.DialogDescription), {
+							key: 0,
+							class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).description, props.css?.description))
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.description), 1)]),
+							_: 1
+						}, 8, ["class"])) : (0, vue.createCommentVNode)("", true)])], 2), (0, vue.createVNode)((0, vue.unref)(reka_ui.DialogClose), {
+							type: "button",
+							"aria-label": props.closeLabel,
+							class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).close, props.css?.close))
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "close-icon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("span", {
+								class: "icon icon-x-bold",
+								"aria-hidden": "true"
+							}, null, -1))])]),
+							_: 3
+						}, 8, ["aria-label", "class"])], 2)]), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).body, props.css?.body)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
+						_: 3
+					}, 8, ["class"])]),
+					_: 3
+				})]),
+				_: 3
+			}, 8, ["open"]);
+		};
+	}
+});
+Object.defineProperty(exports, "DialogRoot_default", {
+	enumerable: true,
+	get: function() {
+		return DialogRoot_default;
+	}
+});

package/dist/FieldBase-BwD6Dput.js

@@ -0,0 +1,42 @@
+import { t as fieldStyles } from "./styles-BU90HeKh.js";
+import { t as fieldContextKey } from "./context-Bk4uIMQS.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, provide, renderSlot, unref, useId } from "vue";
+// src/components/Field/FieldBase.vue
+var FieldBase_default = /* @__PURE__ */ defineComponent({
+	__name: "FieldBase",
+	props: {
+		id: {},
+		error: { default: null },
+		message: { default: null },
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* @component FieldBase
+		* @description Wrapper for composing a field from a label, a control, a message, and an error.
+		* Provides the field context: generated ids, ARIA links, and validity.
+		*
+		* @example
+		* <Field.Base :error="emailError" message="We'll never share your email">
+		*   <Field.Label label="Email" />
+		*   <Field.Input name="email" v-model="email" />
+		* </Field.Base>
+		*/
+		const props = __props;
+		const autoId = useId();
+		const fieldId = computed(() => props.id || `field-${autoId}`);
+		provide(fieldContextKey, {
+			fieldId,
+			errorId: computed(() => props.error ? `${fieldId.value}-error` : null),
+			messageId: computed(() => props.message ? `${fieldId.value}-message` : null),
+			hasError: computed(() => !!props.error),
+			errorMessage: computed(() => props.error ?? null),
+			message: computed(() => props.message ?? null)
+		});
+		const classes = fieldStyles();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([unref(classes).root, props.class]) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+export { FieldBase_default as t };

package/dist/FieldBase-X1FWOqPU.cjs

@@ -0,0 +1,47 @@
+const require_styles = require("./styles-CuN4CHU4.cjs");
+const require_context = require("./context-cK3z69qT.cjs");
+let vue = require("vue");
+// src/components/Field/FieldBase.vue
+var FieldBase_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "FieldBase",
+	props: {
+		id: {},
+		error: { default: null },
+		message: { default: null },
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* @component FieldBase
+		* @description Wrapper for composing a field from a label, a control, a message, and an error.
+		* Provides the field context: generated ids, ARIA links, and validity.
+		*
+		* @example
+		* <Field.Base :error="emailError" message="We'll never share your email">
+		*   <Field.Label label="Email" />
+		*   <Field.Input name="email" v-model="email" />
+		* </Field.Base>
+		*/
+		const props = __props;
+		const autoId = (0, vue.useId)();
+		const fieldId = (0, vue.computed)(() => props.id || `field-${autoId}`);
+		(0, vue.provide)(require_context.fieldContextKey, {
+			fieldId,
+			errorId: (0, vue.computed)(() => props.error ? `${fieldId.value}-error` : null),
+			messageId: (0, vue.computed)(() => props.message ? `${fieldId.value}-message` : null),
+			hasError: (0, vue.computed)(() => !!props.error),
+			errorMessage: (0, vue.computed)(() => props.error ?? null),
+			message: (0, vue.computed)(() => props.message ?? null)
+		});
+		const classes = require_styles.fieldStyles();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)([(0, vue.unref)(classes).root, props.class]) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "FieldBase_default", {
+	enumerable: true,
+	get: function() {
+		return FieldBase_default;
+	}
+});