@webflare/ui 0.0.0-stage → 0.1.1

package/dist/FieldSelect-D6X_BwTS.js

@@ -0,0 +1,239 @@
+import { t as FieldBase_default } from "./FieldBase-BwD6Dput.js";
+import { t as FieldLabel_default } from "./FieldLabel-BYlOJvXY.js";
+import { t as FieldFooter_default } from "./FieldFooter-CE598o7n.js";
+import { t as controlStyles } from "./controlStyles-Bf6fx2rL.js";
+import { t as useFieldControl } from "./useFieldControl-BkQi1zak.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, withCtx } from "vue";
+import { SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectPortal, SelectRoot, SelectTrigger, SelectValue, SelectViewport } from "reka-ui";
+import { sva } from "@webflare/ui/css";
+// src/internal/controls/selectStyles.ts
+/** Select menu. The trigger uses `controlStyles` with `element: 'select'`. */
+var selectStyles = sva({
+	slots: [
+		"content",
+		"viewport",
+		"item",
+		"itemIndicator"
+	],
+	base: {
+		content: {
+			zIndex: "50",
+			overflow: "hidden",
+			backgroundColor: "surface",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border",
+			borderRadius: "lg",
+			boxShadow: "lg",
+			minWidth: "var(--reka-select-trigger-width)",
+			maxHeight: "18rem"
+		},
+		viewport: { p: "xs" },
+		item: {
+			"display": "flex",
+			"alignItems": "center",
+			"gap": "sm",
+			"borderRadius": "md",
+			"paddingX": "md",
+			"paddingY": "sm",
+			"paddingLeft": "2rem",
+			"fontSize": "md",
+			"fontWeight": "450",
+			"color": "neutral",
+			"cursor": "pointer",
+			"outline": "none",
+			"userSelect": "none",
+			"position": "relative",
+			"&[data-highlighted]": { backgroundColor: "neutral.subtle" },
+			"&[data-disabled]": {
+				opacity: "0.5",
+				cursor: "not-allowed"
+			}
+		},
+		itemIndicator: {
+			position: "absolute",
+			left: "md",
+			display: "inline-flex",
+			width: "1em",
+			color: "primary"
+		}
+	}
+});
+// src/internal/controls/ControlSelect.vue
+var ControlSelect_default = /* @__PURE__ */ defineComponent({
+	__name: "ControlSelect",
+	props: /*@__PURE__*/ mergeModels({
+		id: {},
+		name: {},
+		options: { default: () => [] },
+		placeholder: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		valid: {
+			type: [Boolean, String],
+			default: "none"
+		},
+		class: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component ControlSelect
+		* @description Select built on reka-ui Select primitives.
+		*/
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const { id, describedBy, valid, invalid } = useFieldControl(props);
+		const classes = selectStyles();
+		const handleUpdate = (value) => {
+			if (value == null) return;
+			model.value = String(value);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SelectRoot), {
+				"model-value": model.value || void 0,
+				name: __props.name || void 0,
+				required: __props.required,
+				disabled: __props.disabled,
+				"onUpdate:modelValue": handleUpdate
+			}, {
+				default: withCtx(() => [createVNode(unref(SelectTrigger), {
+					id: unref(id),
+					class: normalizeClass([unref(controlStyles)({
+						element: "select",
+						size: __props.size,
+						valid: unref(valid)
+					}), props.class]),
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy)
+				}, {
+					default: withCtx(() => [createVNode(unref(SelectValue), { placeholder: __props.placeholder || void 0 }, null, 8, ["placeholder"]), createVNode(unref(SelectIcon), { "as-child": "" }, {
+						default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "icon icon-caret-down-bold" }, null, -1)])]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, [
+					"id",
+					"class",
+					"aria-invalid",
+					"aria-describedby"
+				]), createVNode(unref(SelectPortal), null, {
+					default: withCtx(() => [createVNode(unref(SelectContent), {
+						position: "popper",
+						"side-offset": 4,
+						class: normalizeClass(unref(classes).content)
+					}, {
+						default: withCtx(() => [createVNode(unref(SelectViewport), { class: normalizeClass(unref(classes).viewport) }, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+								return openBlock(), createBlock(unref(SelectItem), {
+									key: option.value,
+									value: option.value,
+									disabled: option.disabled,
+									class: normalizeClass(unref(classes).item)
+								}, {
+									default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(classes).itemIndicator) }, [createVNode(unref(SelectItemIndicator), null, {
+										default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("span", { class: "icon icon-check-bold" }, null, -1)])]),
+										_: 1
+									})], 2), createVNode(unref(SelectItemText), null, {
+										default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1)]),
+										_: 2
+									}, 1024)]),
+									_: 2
+								}, 1032, [
+									"value",
+									"disabled",
+									"class"
+								]);
+							}), 128))]),
+							_: 1
+						}, 8, ["class"])]),
+						_: 1
+					}, 8, ["class"])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"name",
+				"required",
+				"disabled"
+			]);
+		};
+	}
+});
+// src/components/Field/FieldSelect.vue
+var FieldSelect_default = /* @__PURE__ */ defineComponent({
+	__name: "FieldSelect",
+	props: /*@__PURE__*/ mergeModels({
+		id: {},
+		name: {},
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		message: {},
+		error: {},
+		class: {},
+		placeholder: {},
+		options: { default: () => [] }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component FieldSelect
+		* @description Select with label, helper text, and error.
+		*/
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(FieldBase_default, {
+				id: __props.id || void 0,
+				error: __props.error,
+				message: __props.message
+			}, {
+				default: withCtx(() => [
+					__props.label ? (openBlock(), createBlock(FieldLabel_default, {
+						key: 0,
+						label: __props.label,
+						required: __props.required,
+						size: "sm"
+					}, null, 8, ["label", "required"])) : createCommentVNode("", true),
+					createVNode(ControlSelect_default, {
+						modelValue: model.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+						placeholder: __props.placeholder,
+						options: __props.options,
+						name: __props.name,
+						disabled: __props.disabled,
+						required: __props.required,
+						size: __props.size,
+						class: normalizeClass(props.class)
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"options",
+						"name",
+						"disabled",
+						"required",
+						"size",
+						"class"
+					]),
+					createVNode(FieldFooter_default)
+				]),
+				_: 1
+			}, 8, [
+				"id",
+				"error",
+				"message"
+			]);
+		};
+	}
+});
+export { FieldSelect_default as t };

package/dist/FieldSelect-DVcgCsHL.cjs

@@ -0,0 +1,243 @@
+const require_FieldBase = require("./FieldBase-X1FWOqPU.cjs");
+const require_FieldLabel = require("./FieldLabel-DBKhMbql.cjs");
+const require_FieldFooter = require("./FieldFooter-05GxwrFg.cjs");
+const require_controlStyles = require("./controlStyles-CClWH9EG.cjs");
+const require_useFieldControl = require("./useFieldControl-CEI7IRAa.cjs");
+let vue = require("vue");
+let reka_ui = require("reka-ui");
+// src/internal/controls/selectStyles.ts
+/** Select menu. The trigger uses `controlStyles` with `element: 'select'`. */
+var selectStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"content",
+		"viewport",
+		"item",
+		"itemIndicator"
+	],
+	base: {
+		content: {
+			zIndex: "50",
+			overflow: "hidden",
+			backgroundColor: "surface",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border",
+			borderRadius: "lg",
+			boxShadow: "lg",
+			minWidth: "var(--reka-select-trigger-width)",
+			maxHeight: "18rem"
+		},
+		viewport: { p: "xs" },
+		item: {
+			"display": "flex",
+			"alignItems": "center",
+			"gap": "sm",
+			"borderRadius": "md",
+			"paddingX": "md",
+			"paddingY": "sm",
+			"paddingLeft": "2rem",
+			"fontSize": "md",
+			"fontWeight": "450",
+			"color": "neutral",
+			"cursor": "pointer",
+			"outline": "none",
+			"userSelect": "none",
+			"position": "relative",
+			"&[data-highlighted]": { backgroundColor: "neutral.subtle" },
+			"&[data-disabled]": {
+				opacity: "0.5",
+				cursor: "not-allowed"
+			}
+		},
+		itemIndicator: {
+			position: "absolute",
+			left: "md",
+			display: "inline-flex",
+			width: "1em",
+			color: "primary"
+		}
+	}
+});
+// src/internal/controls/ControlSelect.vue
+var ControlSelect_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ControlSelect",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		id: {},
+		name: {},
+		options: { default: () => [] },
+		placeholder: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		valid: {
+			type: [Boolean, String],
+			default: "none"
+		},
+		class: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component ControlSelect
+		* @description Select built on reka-ui Select primitives.
+		*/
+		const props = __props;
+		const model = (0, vue.useModel)(__props, "modelValue");
+		const { id, describedBy, valid, invalid } = require_useFieldControl.useFieldControl(props);
+		const classes = selectStyles();
+		const handleUpdate = (value) => {
+			if (value == null) return;
+			model.value = String(value);
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SelectRoot), {
+				"model-value": model.value || void 0,
+				name: __props.name || void 0,
+				required: __props.required,
+				disabled: __props.disabled,
+				"onUpdate:modelValue": handleUpdate
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectTrigger), {
+					id: (0, vue.unref)(id),
+					class: (0, vue.normalizeClass)([(0, vue.unref)(require_controlStyles.controlStyles)({
+						element: "select",
+						size: __props.size,
+						valid: (0, vue.unref)(valid)
+					}), props.class]),
+					"aria-invalid": (0, vue.unref)(invalid),
+					"aria-describedby": (0, vue.unref)(describedBy)
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectValue), { placeholder: __props.placeholder || void 0 }, null, 8, ["placeholder"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.SelectIcon), { "as-child": "" }, {
+						default: (0, vue.withCtx)(() => [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("span", { class: "icon icon-caret-down-bold" }, null, -1)])]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, [
+					"id",
+					"class",
+					"aria-invalid",
+					"aria-describedby"
+				]), (0, vue.createVNode)((0, vue.unref)(reka_ui.SelectPortal), null, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectContent), {
+						position: "popper",
+						"side-offset": 4,
+						class: (0, vue.normalizeClass)((0, vue.unref)(classes).content)
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectViewport), { class: (0, vue.normalizeClass)((0, vue.unref)(classes).viewport) }, {
+							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.options, (option) => {
+								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SelectItem), {
+									key: option.value,
+									value: option.value,
+									disabled: option.disabled,
+									class: (0, vue.normalizeClass)((0, vue.unref)(classes).item)
+								}, {
+									default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(classes).itemIndicator) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectItemIndicator), null, {
+										default: (0, vue.withCtx)(() => [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("span", { class: "icon icon-check-bold" }, null, -1)])]),
+										_: 1
+									})], 2), (0, vue.createVNode)((0, vue.unref)(reka_ui.SelectItemText), null, {
+										default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(option.label), 1)]),
+										_: 2
+									}, 1024)]),
+									_: 2
+								}, 1032, [
+									"value",
+									"disabled",
+									"class"
+								]);
+							}), 128))]),
+							_: 1
+						}, 8, ["class"])]),
+						_: 1
+					}, 8, ["class"])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"name",
+				"required",
+				"disabled"
+			]);
+		};
+	}
+});
+// src/components/Field/FieldSelect.vue
+var FieldSelect_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "FieldSelect",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		id: {},
+		name: {},
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		message: {},
+		error: {},
+		class: {},
+		placeholder: {},
+		options: { default: () => [] }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component FieldSelect
+		* @description Select with 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)(ControlSelect_default, {
+						modelValue: model.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+						placeholder: __props.placeholder,
+						options: __props.options,
+						name: __props.name,
+						disabled: __props.disabled,
+						required: __props.required,
+						size: __props.size,
+						class: (0, vue.normalizeClass)(props.class)
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"options",
+						"name",
+						"disabled",
+						"required",
+						"size",
+						"class"
+					]),
+					(0, vue.createVNode)(require_FieldFooter.FieldFooter_default)
+				]),
+				_: 1
+			}, 8, [
+				"id",
+				"error",
+				"message"
+			]);
+		};
+	}
+});
+Object.defineProperty(exports, "FieldSelect_default", {
+	enumerable: true,
+	get: function() {
+		return FieldSelect_default;
+	}
+});

package/dist/FieldSwitch-C7VMSMoE.cjs

@@ -0,0 +1,71 @@
+const require_FieldBase = require("./FieldBase-X1FWOqPU.cjs");
+const require_FieldFooter = require("./FieldFooter-05GxwrFg.cjs");
+const require_ControlSwitch = require("./ControlSwitch-C-pzHgWm.cjs");
+let vue = require("vue");
+// src/components/Field/FieldSwitch.vue
+var FieldSwitch_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "FieldSwitch",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		id: {},
+		name: {},
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		message: {},
+		error: {},
+		class: {},
+		css: {}
+	}, {
+		"modelValue": { type: [Boolean, null] },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component FieldSwitch
+		* @description Switch with helper text and error. The label sits next to the switch.
+		*/
+		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)(() => [(0, vue.createVNode)(require_ControlSwitch.ControlSwitch_default, {
+					modelValue: model.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					label: __props.label,
+					css: props.css,
+					name: __props.name,
+					disabled: __props.disabled,
+					required: __props.required,
+					size: __props.size,
+					class: (0, vue.normalizeClass)(props.class)
+				}, null, 8, [
+					"modelValue",
+					"label",
+					"css",
+					"name",
+					"disabled",
+					"required",
+					"size",
+					"class"
+				]), (0, vue.createVNode)(require_FieldFooter.FieldFooter_default)]),
+				_: 1
+			}, 8, [
+				"id",
+				"error",
+				"message"
+			]);
+		};
+	}
+});
+Object.defineProperty(exports, "FieldSwitch_default", {
+	enumerable: true,
+	get: function() {
+		return FieldSwitch_default;
+	}
+});

package/dist/FieldSwitch-DqagDsKK.js

@@ -0,0 +1,66 @@
+import { t as FieldBase_default } from "./FieldBase-BwD6Dput.js";
+import { t as FieldFooter_default } from "./FieldFooter-CE598o7n.js";
+import { t as ControlSwitch_default } from "./ControlSwitch-C0Rj6fSW.js";
+import { createBlock, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, useModel, withCtx } from "vue";
+// src/components/Field/FieldSwitch.vue
+var FieldSwitch_default = /* @__PURE__ */ defineComponent({
+	__name: "FieldSwitch",
+	props: /*@__PURE__*/ mergeModels({
+		id: {},
+		name: {},
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		message: {},
+		error: {},
+		class: {},
+		css: {}
+	}, {
+		"modelValue": { type: [Boolean, null] },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component FieldSwitch
+		* @description Switch with helper text and error. The label sits next to the switch.
+		*/
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(FieldBase_default, {
+				id: __props.id || void 0,
+				error: __props.error,
+				message: __props.message
+			}, {
+				default: withCtx(() => [createVNode(ControlSwitch_default, {
+					modelValue: model.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					label: __props.label,
+					css: props.css,
+					name: __props.name,
+					disabled: __props.disabled,
+					required: __props.required,
+					size: __props.size,
+					class: normalizeClass(props.class)
+				}, null, 8, [
+					"modelValue",
+					"label",
+					"css",
+					"name",
+					"disabled",
+					"required",
+					"size",
+					"class"
+				]), createVNode(FieldFooter_default)]),
+				_: 1
+			}, 8, [
+				"id",
+				"error",
+				"message"
+			]);
+		};
+	}
+});
+export { FieldSwitch_default as t };