@mkbabb/glass-ui 6.0.0 → 7.0.0

package/dist/forms.js

@@ -1,14 +1,22 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { t } from "./menuItemVariants-D6AOzzND.js";
-import { t as n } from "./useUserInvalidAria-Cr4nR3tu.js";
-import { t as r } from "./useControlSize-CFfOk8I-.js";
-import { t as i } from "./Input-B4WQ_CMc.js";
-import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, createVNode as u, defineComponent as d, isRef as f, mergeProps as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, vModelText as v, withCtx as y, withDirectives as b } from "vue";
-import { ComboboxAnchor as x, ComboboxContent as S, ComboboxEmpty as C, ComboboxGroup as w, ComboboxInput as T, ComboboxItem as E, ComboboxItemIndicator as D, ComboboxLabel as O, ComboboxPortal as k, ComboboxRoot as A, ComboboxTrigger as j, useForwardProps as M, useForwardPropsEmits as N } from "reka-ui";
-import { SearchIcon as P } from "@lucide/vue";
-import { reactiveOmit as F, useVModel as I } from "@vueuse/core";
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./selection-DqIULxRG.js";
+import { t as n } from "./primitive-B2t2jdqM.js";
+import { t as r } from "./floating-dB5TD88k.js";
+import { t as i } from "./useUserInvalidAria-0GNrddMX.js";
+import { n as a } from "./field-control.css_vue_type_style_index_0_src_true_lang-CeLay9Tk.js";
+import { t as o } from "./menuRowClass-Nh7CtMON.js";
+import { t as s } from "./Input-9BlLluik.js";
+import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createTextVNode as f, createVNode as p, defineComponent as m, isRef as h, mergeProps as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as x, vModelText as S, withCtx as C, withDirectives as w } from "vue";
+import { ComboboxAnchor as T, ComboboxContent as E, ComboboxEmpty as D, ComboboxGroup as O, ComboboxInput as k, ComboboxItem as A, ComboboxItemIndicator as j, ComboboxLabel as M, ComboboxPortal as N, ComboboxRoot as P, ComboboxTrigger as F } from "reka-ui";
+import { SearchIcon as I } from "@lucide/vue";
+import { useVModel as L } from "@vueuse/core";
 //#region src/components/textarea/Textarea.vue?vue&type=script&setup=true&lang.ts
-var L = ["data-autosize"], R = /* @__PURE__ */ d({
+var R = [
+	"data-size",
+	"data-state",
+	"data-resize",
+	"aria-invalid"
+], z = /* @__PURE__ */ m({
 	inheritAttrs: !1,
 	__name: "Textarea",
 	props: {
@@ -19,189 +27,237 @@ var L = ["data-autosize"], R = /* @__PURE__ */ d({
 			Object,
 			Array
 		] },
+		cols: {},
 		defaultValue: {},
-		modelValue: {},
-		size: {},
-		placeholder: {},
-		disabled: { type: [Boolean, String] },
-		autosize: {
+		disabled: { type: Boolean },
+		form: {},
+		invalid: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		maxlength: {},
+		minlength: {},
+		modelValue: {},
+		name: {},
+		placeholder: {},
+		readonly: { type: Boolean },
+		required: { type: Boolean },
+		resize: { default: "vertical" },
+		rows: {},
+		size: { default: "md" },
+		wrap: {}
 	},
 	emits: ["update:modelValue"],
 	setup(t, { emit: n }) {
-		let i = t, o = I(i, "modelValue", n, {
+		let r = t, i = n, { ariaInvalid: o, forwardedAttrs: s, state: l } = a(r, x()), u = L(r, "modelValue", i, {
 			passive: !0,
-			defaultValue: i.defaultValue
-		}), s = a(() => ({
-			placeholder: i.placeholder,
-			disabled: i.disabled
+			defaultValue: r.defaultValue
+		}), f = c(() => ({
+			cols: r.cols,
+			disabled: r.disabled,
+			form: r.form,
+			maxlength: r.maxlength,
+			minlength: r.minlength,
+			name: r.name,
+			placeholder: r.placeholder,
+			readonly: r.readonly,
+			required: r.required,
+			rows: r.rows,
+			wrap: r.wrap
 		}));
-		return (n, a) => b((m(), c("textarea", p({
-			"onUpdate:modelValue": a[0] ||= (e) => f(o) ? o.value = e : null,
-			"data-slot": "textarea"
-		}, {
-			...n.$attrs,
-			...s.value
+		return (n, i) => w((_(), d("textarea", g({
+			...b(s),
+			...f.value
 		}, {
-			"data-autosize": t.autosize ? "" : void 0,
-			class: _(e)("input-pill glass-control-edge [--control-surface-bg:var(--input-on-glass)] rounded-field py-2", _(r)(i.size), t.autosize ? "" : "min-h-20", i.class)
-		}), null, 16, L)), [[v, _(o)]]);
+			"onUpdate:modelValue": i[0] ||= (e) => h(u) ? u.value = e : null,
+			"data-slot": "textarea",
+			"data-kind": "textarea",
+			"data-size": t.size,
+			"data-state": b(l),
+			"data-resize": t.resize,
+			"aria-invalid": b(o),
+			class: b(e)("field-control glass-defined", r.class)
+		}), null, 16, R)), [[S, b(u)]]);
 	}
-}), z = /* @__PURE__ */ d({
+}), B = /* @__PURE__ */ m({
+	name: "Combobox",
+	inheritAttrs: !1,
 	__name: "Combobox",
 	props: {
-		open: { type: Boolean },
-		defaultOpen: { type: Boolean },
-		resetSearchTermOnBlur: { type: Boolean },
-		resetSearchTermOnSelect: { type: Boolean },
-		openOnFocus: { type: Boolean },
-		openOnClick: { type: Boolean },
-		ignoreFilter: { type: Boolean },
-		resetModelValueOnClear: { type: Boolean },
+		multiple: { type: Boolean },
 		modelValue: {},
 		defaultValue: {},
-		multiple: { type: Boolean },
-		dir: {},
+		open: { type: Boolean },
+		defaultOpen: { type: Boolean },
 		disabled: { type: Boolean },
-		highlightOnHover: { type: Boolean },
-		by: { type: [String, Function] },
-		asChild: { type: Boolean },
-		as: {},
 		name: {},
 		required: { type: Boolean }
 	},
-	emits: [
-		"update:modelValue",
-		"highlight",
-		"update:open"
-	],
-	setup(e, { emit: t }) {
-		let n = e, r = N(n, t);
-		return (e, t) => (m(), o(_(A), p({
+	emits: ["update:modelValue", "update:open"],
+	setup(e, { emit: n }) {
+		let r = e, i = n;
+		function a(e) {
+			return e === null || t(e);
+		}
+		function o(e) {
+			if (!(r.multiple ? Array.isArray(e) && e.every(t) : a(e))) throw TypeError("[glass-ui] Combobox received an invalid model value.");
+			return e;
+		}
+		function s(e) {
+			i("update:modelValue", o(e));
+		}
+		function c(e) {
+			return e === void 0 ? void 0 : o(e);
+		}
+		return (e, t) => (_(), l(b(P), {
 			"data-slot": "combobox",
-			"data-multiple": n.multiple ? "" : void 0
-		}, _(r)), {
-			default: y(({ open: t, modelValue: n }) => [h(e.$slots, "default", {
+			"data-multiple": r.multiple ? "" : void 0,
+			"model-value": c(r.modelValue),
+			"default-value": c(r.defaultValue),
+			multiple: r.multiple,
+			open: r.open,
+			"default-open": r.defaultOpen,
+			disabled: r.disabled,
+			name: r.name,
+			required: r.required,
+			"onUpdate:modelValue": s,
+			"onUpdate:open": t[0] ||= (e) => i("update:open", e)
+		}, {
+			default: C(({ open: t, modelValue: n }) => [v(e.$slots, "default", {
 				open: t,
-				modelValue: n
+				modelValue: c(n)
 			})]),
 			_: 3
-		}, 16, ["data-multiple"]));
+		}, 8, [
+			"data-multiple",
+			"model-value",
+			"default-value",
+			"multiple",
+			"open",
+			"default-open",
+			"disabled",
+			"name",
+			"required"
+		]));
 	}
-}), B = /* @__PURE__ */ d({
+}), V = /* @__PURE__ */ m({
+	name: "ComboboxAnchor",
+	inheritAttrs: !1,
 	__name: "ComboboxAnchor",
-	props: {
-		reference: {},
-		asChild: { type: Boolean },
-		as: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
 	setup(t) {
-		let n = t, r = M(F(n, "class"));
-		return (t, i) => (m(), o(_(x), p({ "data-slot": "combobox-anchor" }, _(r), { class: _(e)("w-popover", n.class) }), {
-			default: y(() => [h(t.$slots, "default")]),
+		let r = t, i = x(), a = c(() => {
+			let { reference: e, ...t } = n(i);
+			return t;
+		});
+		return (t, n) => (_(), l(b(T), g({ "data-slot": "combobox-anchor" }, a.value, { class: b(e)("w-popover", r.class) }), {
+			default: C(() => [v(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), V = /* @__PURE__ */ d({
+}), H = /* @__PURE__ */ m({
+	name: "ComboboxEmpty",
+	inheritAttrs: !1,
 	__name: "ComboboxEmpty",
-	props: {
-		asChild: { type: Boolean },
-		as: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
 	setup(t) {
-		let n = t, r = F(n, "class");
-		return (t, i) => (m(), o(_(C), p({ "data-slot": "combobox-empty" }, _(r), { class: _(e)("py-6 text-center text-dropdown", n.class) }), {
-			default: y(() => [h(t.$slots, "default")]),
+		let r = t, i = x(), a = c(() => n(i));
+		return (t, n) => (_(), l(b(D), g({ "data-slot": "combobox-empty" }, a.value, { class: b(e)("py-6 text-center text-dropdown", r.class) }), {
+			default: C(() => [v(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), H = /* @__PURE__ */ d({
+}), U = /* @__PURE__ */ m({
+	name: "ComboboxGroup",
+	inheritAttrs: !1,
 	__name: "ComboboxGroup",
 	props: {
-		asChild: { type: Boolean },
-		as: {},
+		heading: {},
 		class: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
-		] },
-		heading: {}
+		] }
 	},
 	setup(t) {
-		let n = t, r = F(n, "class");
-		return (i, a) => (m(), o(_(w), p({ "data-slot": "combobox-group" }, _(r), { class: _(e)("overflow-hidden p-1 text-foreground", n.class) }), {
-			default: y(() => [t.heading ? (m(), o(_(O), {
+		let r = t, i = x(), a = c(() => n(i));
+		return (t, n) => (_(), l(b(O), g({ "data-slot": "combobox-group" }, a.value, { class: b(e)("overflow-hidden p-1 text-foreground", r.class) }), {
+			default: C(() => [r.heading ? (_(), l(b(M), {
 				key: 0,
 				class: "px-2 py-1.5 text-dropdown-secondary font-medium text-muted-foreground"
 			}, {
-				default: y(() => [l(g(t.heading), 1)]),
+				default: C(() => [f(y(r.heading), 1)]),
 				_: 1
-			})) : s("", !0), h(i.$slots, "default")]),
+			})) : u("", !0), v(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), U = {
-	"data-slot": "command-input-wrapper",
+}), W = {
+	"data-slot": "combobox-input-wrapper",
 	class: "flex h-9 items-center gap-2 border-b px-3 rounded-input has-[[aria-invalid='true']]:border-(--destructive) has-[:user-invalid]:border-(--destructive) has-[[aria-invalid='true']]:shadow-(--invalid-ring) has-[:user-invalid]:shadow-(--invalid-ring)"
-}, W = /* @__PURE__ */ d({
+}, G = /* @__PURE__ */ m({
+	name: "ComboboxInput",
 	inheritAttrs: !1,
 	__name: "ComboboxInput",
 	props: {
-		displayValue: { type: Function },
 		modelValue: {},
 		autoFocus: { type: Boolean },
 		disabled: { type: Boolean },
-		asChild: { type: Boolean },
-		as: {},
+		placeholder: {},
 		class: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
-		] },
-		placeholder: {}
+		] }
 	},
 	emits: ["update:modelValue"],
-	setup(t, { emit: n }) {
-		let r = t, i = n, a = N(F(r, "class"), i);
-		return (t, n) => (m(), c("div", U, [u(_(P), { class: "size-4 shrink-0 opacity-50" }), u(_(T), p({
-			"data-slot": "command-input",
-			class: _(e)("placeholder:text-muted-foreground flex h-(--dropdown-input-height) w-full rounded-input bg-transparent py-3 text-dropdown outline-hidden disabled:cursor-not-allowed disabled:opacity-disabled aria-invalid:text-destructive aria-invalid:placeholder:text-[color-mix(in_srgb,var(--destructive)_60%,transparent)]", r.class)
-		}, {
-			..._(a),
-			...t.$attrs
+	setup(t, { emit: r }) {
+		let i = t, a = r, o = x(), s = c(() => ({
+			...n(o),
+			placeholder: i.placeholder
+		}));
+		return (t, n) => (_(), d("div", W, [p(b(I), { class: "size-4 shrink-0 opacity-50" }), p(b(k), g({
+			"data-slot": "combobox-input",
+			class: b(e)("placeholder:text-muted-foreground flex h-(--dropdown-input-height) w-full rounded-input bg-transparent py-3 text-dropdown outline-hidden disabled:cursor-not-allowed disabled:opacity-disabled aria-invalid:text-destructive aria-invalid:placeholder:text-[color-mix(in_srgb,var(--destructive)_60%,transparent)]", i.class)
+		}, s.value, {
+			"model-value": i.modelValue,
+			"auto-focus": i.autoFocus,
+			disabled: i.disabled,
+			"onUpdate:modelValue": n[0] ||= (e) => a("update:modelValue", e)
 		}), {
-			default: y(() => [h(t.$slots, "default")]),
+			default: C(() => [v(t.$slots, "default")]),
 			_: 3
-		}, 16, ["class"])]));
+		}, 16, [
+			"class",
+			"model-value",
+			"auto-focus",
+			"disabled"
+		])]));
 	}
-}), G = /* @__PURE__ */ d({
+}), K = /* @__PURE__ */ m({
+	name: "ComboboxItem",
+	inheritAttrs: !1,
 	__name: "ComboboxItem",
 	props: {
-		textValue: {},
 		value: {},
 		disabled: { type: Boolean },
-		asChild: { type: Boolean },
-		as: {},
+		textValue: {},
 		class: { type: [
 			Boolean,
 			null,
@@ -211,68 +267,58 @@ var L = ["data-autosize"], R = /* @__PURE__ */ d({
 		] }
 	},
 	emits: ["select"],
-	setup(n, { emit: r }) {
-		let i = n, a = r, s = N(F(i, "class"), a);
-		return (n, r) => (m(), o(_(E), p({ "data-slot": "combobox-item" }, _(s), { class: _(e)(_(t)({ indicator: "none" }), "gap-2 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", i.class) }), {
-			default: y(() => [h(n.$slots, "default")]),
+	setup(t, { emit: r }) {
+		let i = t, a = r, s = x(), u = c(() => n(s));
+		return (t, n) => (_(), l(b(A), g({ "data-slot": "combobox-item" }, u.value, {
+			value: i.value,
+			disabled: i.disabled,
+			"text-value": i.textValue,
+			class: b(e)(b(o)(), "gap-2 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", i.class),
+			onSelect: n[0] ||= (e) => a("select", e)
+		}), {
+			default: C(() => [v(t.$slots, "default")]),
 			_: 3
-		}, 16, ["class"]));
+		}, 16, [
+			"value",
+			"disabled",
+			"text-value",
+			"class"
+		]));
 	}
-}), K = /* @__PURE__ */ d({
+}), q = /* @__PURE__ */ m({
+	name: "ComboboxItemIndicator",
+	inheritAttrs: !1,
 	__name: "ComboboxItemIndicator",
-	props: {
-		asChild: { type: Boolean },
-		as: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
 	setup(t) {
-		let n = t, r = M(F(n, "class"));
-		return (t, i) => (m(), o(_(D), p({ "data-slot": "combobox-item-indicator" }, _(r), { class: _(e)("ml-auto", n.class) }), {
-			default: y(() => [h(t.$slots, "default")]),
+		let r = t, i = x(), a = c(() => n(i));
+		return (t, n) => (_(), l(b(j), g({ "data-slot": "combobox-item-indicator" }, a.value, { class: b(e)("ml-auto", r.class) }), {
+			default: C(() => [v(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), q = /* @__PURE__ */ d({
+}), J = /* @__PURE__ */ m({
+	name: "ComboboxList",
+	inheritAttrs: !1,
 	__name: "ComboboxList",
 	props: {
-		forceMount: { type: Boolean },
-		position: { default: "popper" },
-		bodyLock: { type: Boolean },
-		hideWhenEmpty: { type: Boolean },
-		side: {},
-		sideOffset: { default: 4 },
-		sideFlip: { type: Boolean },
-		align: { default: "center" },
-		alignOffset: {},
-		alignFlip: { type: Boolean },
-		avoidCollisions: { type: Boolean },
-		collisionBoundary: {},
-		collisionPadding: {},
-		arrowPadding: {},
-		hideShiftedArrow: { type: Boolean },
-		sticky: {},
-		hideWhenDetached: { type: Boolean },
-		positionStrategy: {},
-		updatePositionStrategy: {},
-		disableUpdateOnLayoutShift: { type: Boolean },
-		prioritizePosition: { type: Boolean },
-		reference: {},
-		asChild: { type: Boolean },
-		as: {},
-		disableOutsidePointerEvents: { type: Boolean },
 		class: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
-		] }
+		] },
+		side: { default: "bottom" },
+		sideOffset: { default: 4 },
+		align: { default: "center" },
+		alignOffset: { default: 0 }
 	},
 	emits: [
 		"escapeKeyDown",
@@ -281,18 +327,77 @@ var L = ["data-autosize"], R = /* @__PURE__ */ d({
 		"interactOutside"
 	],
 	setup(t, { emit: n }) {
-		let r = t, i = n, a = N(F(r, "class"), i);
-		return (t, n) => (m(), o(_(k), null, {
-			default: y(() => [u(_(S), p({
+		let i = t, a = n, o = x(), s = c(() => {
+			let { bodyLock: e, "body-lock": t, position: n, ...i } = r(o);
+			return i;
+		}), u = c(() => ({
+			position: "popper",
+			side: i.side,
+			sideOffset: i.sideOffset,
+			align: i.align,
+			alignOffset: i.alignOffset,
+			avoidCollisions: !0
+		}));
+		return (t, n) => (_(), l(b(N), null, {
+			default: C(() => [p(b(E), g({
 				"data-slot": "combobox-list",
 				"data-reveal": "menu"
-			}, _(a), { class: _(e)("z-popover w-popover rounded-panel border glass-floating text-popover-foreground origin-(--reka-combobox-content-transform-origin) overflow-hidden outline-none glass-reveal glass-field-portal", r.class) }), {
-				default: y(() => [h(t.$slots, "default")]),
+			}, {
+				...u.value,
+				...s.value
+			}, {
+				class: b(e)("z-popover max-h-[min(24rem,var(--reka-combobox-content-available-height,60dvh))] w-popover overflow-x-hidden overflow-y-auto rounded-panel border glass-floating text-popover-foreground origin-(--reka-combobox-content-transform-origin) outline-none glass-reveal glass-field-portal", i.class),
+				onEscapeKeyDown: n[0] ||= (e) => a("escapeKeyDown", e),
+				onPointerDownOutside: n[1] ||= (e) => a("pointerDownOutside", e),
+				onFocusOutside: n[2] ||= (e) => a("focusOutside", e),
+				onInteractOutside: n[3] ||= (e) => a("interactOutside", e)
+			}), {
+				default: C(() => [v(t.$slots, "default")]),
 				_: 3
 			}, 16, ["class"])]),
 			_: 3
 		}));
 	}
+}), Y = /* @__PURE__ */ m({
+	name: "ComboboxTrigger",
+	inheritAttrs: !1,
+	__name: "ComboboxTrigger",
+	props: {
+		asChild: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(e) {
+		let t = e, r = x(), i = c(() => {
+			let e = n(r);
+			return t.asChild ? e : {
+				...e,
+				type: "button"
+			};
+		});
+		return (e, n) => (_(), l(b(F), g(i.value, {
+			as: "button",
+			"as-child": t.asChild,
+			disabled: t.disabled,
+			class: t.class
+		}), {
+			default: C(() => [v(e.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"as-child",
+			"disabled",
+			"class"
+		]));
+	}
 });
 //#endregion
-export { z as Combobox, B as ComboboxAnchor, V as ComboboxEmpty, H as ComboboxGroup, W as ComboboxInput, G as ComboboxItem, K as ComboboxItemIndicator, q as ComboboxList, j as ComboboxTrigger, i as Input, R as Textarea, n as useUserInvalidAria };
+export { B as Combobox, V as ComboboxAnchor, H as ComboboxEmpty, U as ComboboxGroup, G as ComboboxInput, K as ComboboxItem, q as ComboboxItemIndicator, J as ComboboxList, Y as ComboboxTrigger, s as Input, z as Textarea, i as useUserInvalidAria };