@webflare/ui 0.0.0-stage → 0.1.0

package/dist/FieldCheckbox-CYuyWgbl.cjs

@@ -0,0 +1,139 @@
+const require_FieldBase = require("./FieldBase-X1FWOqPU.cjs");
+const require_FieldFooter = require("./FieldFooter-05GxwrFg.cjs");
+const require_choiceStyles = require("./choiceStyles-DIVBtoZF.cjs");
+const require_useFieldControl = require("./useFieldControl-CEI7IRAa.cjs");
+let vue = require("vue");
+let reka_ui = require("reka-ui");
+// src/internal/controls/ControlCheckbox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-disabled"];
+// src/internal/controls/ControlCheckbox.vue
+var ControlCheckbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ControlCheckbox",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		id: {},
+		name: {},
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		class: {}
+	}, {
+		"modelValue": {
+			type: [Boolean, null],
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component ControlCheckbox
+		* @description Checkbox built on reka-ui Checkbox primitives.
+		*/
+		const props = __props;
+		const model = (0, vue.useModel)(__props, "modelValue");
+		const { id, describedBy, invalid } = require_useFieldControl.useFieldControl(props);
+		const classes = (0, vue.computed)(() => require_choiceStyles.checkboxStyles({ size: props.size }));
+		const handleUpdate = (value) => {
+			model.value = value === true;
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
+				class: (0, vue.normalizeClass)([classes.value.root, props.class]),
+				"data-disabled": __props.disabled ? "" : void 0
+			}, [(0, vue.createVNode)((0, vue.unref)(reka_ui.CheckboxRoot), {
+				id: (0, vue.unref)(id),
+				name: __props.name || void 0,
+				required: __props.required,
+				disabled: __props.disabled,
+				"model-value": Boolean(model.value),
+				"aria-invalid": (0, vue.unref)(invalid),
+				"aria-describedby": (0, vue.unref)(describedBy),
+				class: (0, vue.normalizeClass)(classes.value.control),
+				"onUpdate:modelValue": handleUpdate
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.CheckboxIndicator), { class: (0, vue.normalizeClass)(classes.value.indicator) }, {
+					default: (0, vue.withCtx)(() => [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("span", { class: "icon icon-check-bold" }, null, -1)])]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 1
+			}, 8, [
+				"id",
+				"name",
+				"required",
+				"disabled",
+				"model-value",
+				"aria-invalid",
+				"aria-describedby",
+				"class"
+			]), __props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				key: 0,
+				class: (0, vue.normalizeClass)(classes.value.label)
+			}, (0, vue.toDisplayString)(__props.label), 3)) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1);
+		};
+	}
+});
+// src/components/Field/FieldCheckbox.vue
+var FieldCheckbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "FieldCheckbox",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		id: {},
+		name: {},
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		message: {},
+		error: {},
+		class: {}
+	}, {
+		"modelValue": { type: [Boolean, null] },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component FieldCheckbox
+		* @description Checkbox with helper text and error. The label sits next to the box.
+		*/
+		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)(ControlCheckbox_default, {
+					modelValue: model.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					label: __props.label,
+					name: __props.name,
+					disabled: __props.disabled,
+					required: __props.required,
+					size: __props.size,
+					class: (0, vue.normalizeClass)(props.class)
+				}, null, 8, [
+					"modelValue",
+					"label",
+					"name",
+					"disabled",
+					"required",
+					"size",
+					"class"
+				]), (0, vue.createVNode)(require_FieldFooter.FieldFooter_default)]),
+				_: 1
+			}, 8, [
+				"id",
+				"error",
+				"message"
+			]);
+		};
+	}
+});
+Object.defineProperty(exports, "FieldCheckbox_default", {
+	enumerable: true,
+	get: function() {
+		return FieldCheckbox_default;
+	}
+});

package/dist/FieldCheckbox-DsQsNeX7.js

@@ -0,0 +1,134 @@
+import { t as FieldBase_default } from "./FieldBase-BwD6Dput.js";
+import { t as FieldFooter_default } from "./FieldFooter-CE598o7n.js";
+import { t as checkboxStyles } from "./choiceStyles-DRjL1Y2d.js";
+import { t as useFieldControl } from "./useFieldControl-BkQi1zak.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, toDisplayString, unref, useModel, withCtx } from "vue";
+import { CheckboxIndicator, CheckboxRoot } from "reka-ui";
+// src/internal/controls/ControlCheckbox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-disabled"];
+// src/internal/controls/ControlCheckbox.vue
+var ControlCheckbox_default = /* @__PURE__ */ defineComponent({
+	__name: "ControlCheckbox",
+	props: /*@__PURE__*/ mergeModels({
+		id: {},
+		name: {},
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		class: {}
+	}, {
+		"modelValue": {
+			type: [Boolean, null],
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component ControlCheckbox
+		* @description Checkbox built on reka-ui Checkbox primitives.
+		*/
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const { id, describedBy, invalid } = useFieldControl(props);
+		const classes = computed(() => checkboxStyles({ size: props.size }));
+		const handleUpdate = (value) => {
+			model.value = value === true;
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", {
+				class: normalizeClass([classes.value.root, props.class]),
+				"data-disabled": __props.disabled ? "" : void 0
+			}, [createVNode(unref(CheckboxRoot), {
+				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),
+				class: normalizeClass(classes.value.control),
+				"onUpdate:modelValue": handleUpdate
+			}, {
+				default: withCtx(() => [createVNode(unref(CheckboxIndicator), { class: normalizeClass(classes.value.indicator) }, {
+					default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "icon icon-check-bold" }, null, -1)])]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 1
+			}, 8, [
+				"id",
+				"name",
+				"required",
+				"disabled",
+				"model-value",
+				"aria-invalid",
+				"aria-describedby",
+				"class"
+			]), __props.label ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(classes.value.label)
+			}, toDisplayString(__props.label), 3)) : createCommentVNode("", true)], 10, _hoisted_1);
+		};
+	}
+});
+// src/components/Field/FieldCheckbox.vue
+var FieldCheckbox_default = /* @__PURE__ */ defineComponent({
+	__name: "FieldCheckbox",
+	props: /*@__PURE__*/ mergeModels({
+		id: {},
+		name: {},
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		message: {},
+		error: {},
+		class: {}
+	}, {
+		"modelValue": { type: [Boolean, null] },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component FieldCheckbox
+		* @description Checkbox with helper text and error. The label sits next to the box.
+		*/
+		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(ControlCheckbox_default, {
+					modelValue: model.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					label: __props.label,
+					name: __props.name,
+					disabled: __props.disabled,
+					required: __props.required,
+					size: __props.size,
+					class: normalizeClass(props.class)
+				}, null, 8, [
+					"modelValue",
+					"label",
+					"name",
+					"disabled",
+					"required",
+					"size",
+					"class"
+				]), createVNode(FieldFooter_default)]),
+				_: 1
+			}, 8, [
+				"id",
+				"error",
+				"message"
+			]);
+		};
+	}
+});
+export { FieldCheckbox_default as t };

package/dist/FieldError-BPjk-uZc.js

@@ -0,0 +1,36 @@
+import { t as fieldStyles } from "./styles-BU90HeKh.js";
+import { t as fieldContextKey } from "./context-Bk4uIMQS.js";
+import { computed, createCommentVNode, createElementBlock, defineComponent, inject, normalizeClass, openBlock, unref } from "vue";
+// src/components/Field/FieldError.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id", "innerHTML"];
+// src/components/Field/FieldError.vue
+var FieldError_default = /* @__PURE__ */ defineComponent({
+	__name: "FieldError",
+	props: {
+		message: { default: null },
+		id: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* @component FieldError
+		* @description Error text. Reads the Field.Base context when `message` is omitted.
+		* Rendered as HTML.
+		*/
+		const props = __props;
+		const fieldContext = inject(fieldContextKey, null);
+		const displayMessage = computed(() => props.message || fieldContext?.errorMessage.value || null);
+		const errorId = computed(() => props.id || fieldContext?.errorId.value || void 0);
+		const classes = fieldStyles();
+		return (_ctx, _cache) => {
+			return displayMessage.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				id: errorId.value,
+				class: normalizeClass([unref(classes).error, props.class]),
+				role: "alert",
+				innerHTML: displayMessage.value
+			}, null, 10, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+export { FieldError_default as t };

package/dist/FieldError-XRz98TFe.cjs

@@ -0,0 +1,41 @@
+const require_styles = require("./styles-CuN4CHU4.cjs");
+const require_context = require("./context-cK3z69qT.cjs");
+let vue = require("vue");
+// src/components/Field/FieldError.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id", "innerHTML"];
+// src/components/Field/FieldError.vue
+var FieldError_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "FieldError",
+	props: {
+		message: { default: null },
+		id: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* @component FieldError
+		* @description Error text. Reads the Field.Base context when `message` is omitted.
+		* Rendered as HTML.
+		*/
+		const props = __props;
+		const fieldContext = (0, vue.inject)(require_context.fieldContextKey, null);
+		const displayMessage = (0, vue.computed)(() => props.message || fieldContext?.errorMessage.value || null);
+		const errorId = (0, vue.computed)(() => props.id || fieldContext?.errorId.value || void 0);
+		const classes = require_styles.fieldStyles();
+		return (_ctx, _cache) => {
+			return displayMessage.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				key: 0,
+				id: errorId.value,
+				class: (0, vue.normalizeClass)([(0, vue.unref)(classes).error, props.class]),
+				role: "alert",
+				innerHTML: displayMessage.value
+			}, null, 10, _hoisted_1)) : (0, vue.createCommentVNode)("", true);
+		};
+	}
+});
+Object.defineProperty(exports, "FieldError_default", {
+	enumerable: true,
+	get: function() {
+		return FieldError_default;
+	}
+});

package/dist/FieldFooter-05GxwrFg.cjs

@@ -0,0 +1,29 @@
+const require_styles = require("./styles-CuN4CHU4.cjs");
+const require_FieldMessage = require("./FieldMessage-C83iNsEp.cjs");
+const require_FieldError = require("./FieldError-XRz98TFe.cjs");
+const require_context = require("./context-cK3z69qT.cjs");
+let vue = require("vue");
+// src/components/Field/FieldFooter.vue
+var FieldFooter_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "FieldFooter",
+	setup(__props) {
+		/**
+		* Internal: message and error row under a composed field's control.
+		* Renders nothing when the field has neither.
+		*/
+		const fieldContext = (0, vue.inject)(require_context.fieldContextKey, null);
+		const classes = require_styles.fieldStyles();
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(fieldContext)?.message.value || (0, vue.unref)(fieldContext)?.errorMessage.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				class: (0, vue.normalizeClass)((0, vue.unref)(classes).footer)
+			}, [(0, vue.createVNode)(require_FieldMessage.FieldMessage_default), (0, vue.createVNode)(require_FieldError.FieldError_default)], 2)) : (0, vue.createCommentVNode)("", true);
+		};
+	}
+});
+Object.defineProperty(exports, "FieldFooter_default", {
+	enumerable: true,
+	get: function() {
+		return FieldFooter_default;
+	}
+});

package/dist/FieldFooter-CE598o7n.js

@@ -0,0 +1,24 @@
+import { t as fieldStyles } from "./styles-BU90HeKh.js";
+import { t as FieldMessage_default } from "./FieldMessage-GyO_RQdK.js";
+import { t as FieldError_default } from "./FieldError-BPjk-uZc.js";
+import { t as fieldContextKey } from "./context-Bk4uIMQS.js";
+import { createCommentVNode, createElementBlock, createVNode, defineComponent, inject, normalizeClass, openBlock, unref } from "vue";
+// src/components/Field/FieldFooter.vue
+var FieldFooter_default = /* @__PURE__ */ defineComponent({
+	__name: "FieldFooter",
+	setup(__props) {
+		/**
+		* Internal: message and error row under a composed field's control.
+		* Renders nothing when the field has neither.
+		*/
+		const fieldContext = inject(fieldContextKey, null);
+		const classes = fieldStyles();
+		return (_ctx, _cache) => {
+			return unref(fieldContext)?.message.value || unref(fieldContext)?.errorMessage.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(classes).footer)
+			}, [createVNode(FieldMessage_default), createVNode(FieldError_default)], 2)) : createCommentVNode("", true);
+		};
+	}
+});
+export { FieldFooter_default as t };

package/dist/FieldInput-bnC_fTws.cjs

@@ -0,0 +1,155 @@
+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");
+// src/internal/controls/ControlInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"name",
+	"type",
+	"placeholder",
+	"value",
+	"disabled",
+	"required",
+	"autocomplete",
+	"aria-invalid",
+	"aria-describedby"
+];
+// src/internal/controls/ControlInput.vue
+var ControlInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ControlInput",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		type: { default: "text" },
+		id: {},
+		name: {},
+		placeholder: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		autocomplete: {},
+		size: { default: "md" },
+		valid: {
+			type: [Boolean, String],
+			default: "none"
+		},
+		class: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component ControlInput
+		* @description Text input. Reads id, ARIA links, and validity from Field.Base.
+		*/
+		const props = __props;
+		const model = (0, vue.useModel)(__props, "modelValue");
+		const { id, describedBy, valid, invalid } = require_useFieldControl.useFieldControl(props);
+		const handleInput = (event) => {
+			model.value = event.target.value;
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("input", {
+				id: (0, vue.unref)(id),
+				name: __props.name || void 0,
+				class: (0, vue.normalizeClass)([(0, vue.unref)(require_controlStyles.controlStyles)({
+					size: __props.size,
+					valid: (0, vue.unref)(valid)
+				}), props.class]),
+				type: __props.type,
+				placeholder: __props.placeholder || void 0,
+				value: model.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_1);
+		};
+	}
+});
+// src/components/Field/FieldInput.vue
+var FieldInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "FieldInput",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		id: {},
+		name: {},
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		message: {},
+		error: {},
+		class: {},
+		type: { default: "text" },
+		placeholder: {},
+		autocomplete: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/**
+		* @component FieldInput
+		* @description Text input with label, helper text, and error. Native input attributes fall through to the input.
+		*/
+		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)(ControlInput_default, (0, vue.mergeProps)({
+						modelValue: model.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event)
+					}, _ctx.$attrs, {
+						type: __props.type,
+						placeholder: __props.placeholder,
+						autocomplete: __props.autocomplete,
+						name: __props.name,
+						disabled: __props.disabled,
+						required: __props.required,
+						size: __props.size,
+						class: props.class
+					}), null, 16, [
+						"modelValue",
+						"type",
+						"placeholder",
+						"autocomplete",
+						"name",
+						"disabled",
+						"required",
+						"size",
+						"class"
+					]),
+					(0, vue.createVNode)(require_FieldFooter.FieldFooter_default)
+				]),
+				_: 1
+			}, 8, [
+				"id",
+				"error",
+				"message"
+			]);
+		};
+	}
+});
+Object.defineProperty(exports, "FieldInput_default", {
+	enumerable: true,
+	get: function() {
+		return FieldInput_default;
+	}
+});