@feugene/granularity 0.1.0

package/dist/chunks/DsPromptDialog-DdSca52S.js

@@ -0,0 +1,133 @@
+import { t as e } from "./DsButton-CA18Fha-.js";
+import { t } from "./DsDialog-BAGAa9DN.js";
+import { t as n } from "./DsFormField-XVZK7YVU.js";
+import { t as r } from "./DsInput-DeoAkT6R.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, watch as g, withCtx as _ } from "vue";
+//#region src/components/DsPromptDialog/DsPromptDialog.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "grid gap-4" }, y = {
+	key: 0,
+	class: "text-[14px] text-[var(--muted-fg)]"
+}, b = { class: "flex items-center justify-end gap-3" }, x = /* @__PURE__ */ d({
+	__name: "DsPromptDialog",
+	props: {
+		modelValue: { type: Boolean },
+		value: {},
+		title: { default: "Prompt" },
+		description: { default: void 0 },
+		label: { default: "Value" },
+		placeholder: { default: void 0 },
+		closeOnBackdrop: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: "md" },
+		headerConfig: { default: void 0 },
+		footerConfig: { default: void 0 },
+		buttonSize: { default: void 0 },
+		confirmText: { default: "Confirm" },
+		cancelText: { default: "Cancel" },
+		confirmVariant: { default: "primary" },
+		confirmTone: { default: "primary" },
+		required: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:value",
+		"confirm",
+		"cancel"
+	],
+	setup(d, { emit: x }) {
+		let S = d, C = x, w = i({
+			get: () => S.modelValue,
+			set: (e) => C("update:modelValue", e)
+		}), T = i({
+			get: () => S.value,
+			set: (e) => C("update:value", e)
+		}), E = p(!1), D = p(null);
+		g(() => S.modelValue, (e) => {
+			e && (E.value = !1);
+		});
+		let O = i(() => S.required ? T.value.trim().length > 0 : !0), k = i(() => {
+			if (S.required && E.value) return T.value.trim().length > 0 ? void 0 : "Enter a value.";
+		});
+		function A() {
+			C("cancel"), C("update:modelValue", !1);
+		}
+		function j() {
+			if (!O.value) {
+				E.value = !0, D.value?.focus();
+				return;
+			}
+			C("confirm", T.value), C("update:modelValue", !1);
+		}
+		return (i, p) => (f(), a(t, {
+			modelValue: w.value,
+			"onUpdate:modelValue": p[2] ||= (e) => w.value = e,
+			title: d.title,
+			size: S.size,
+			"close-on-backdrop": S.closeOnBackdrop,
+			"header-config": S.headerConfig,
+			"footer-config": S.footerConfig
+		}, {
+			footer: _(() => [m(i.$slots, "footer", {}, () => [c("div", b, [u(e, {
+				"data-testid": "ds-prompt-cancel",
+				variant: "outline",
+				size: S.buttonSize,
+				onClick: A
+			}, {
+				default: _(() => [l(h(d.cancelText), 1)]),
+				_: 1
+			}, 8, ["size"]), u(e, {
+				"data-testid": "ds-prompt-confirm",
+				variant: S.confirmVariant,
+				tone: S.confirmTone,
+				size: S.buttonSize,
+				disabled: S.required && E.value && !O.value,
+				onClick: j
+			}, {
+				default: _(() => [l(h(d.confirmText), 1)]),
+				_: 1
+			}, 8, [
+				"variant",
+				"tone",
+				"size",
+				"disabled"
+			])])])]),
+			default: _(() => [c("div", v, [m(i.$slots, "default", {}, () => [S.description ? (f(), s("div", y, h(S.description), 1)) : o("", !0)]), u(n, {
+				label: d.label,
+				error: k.value,
+				"for-id": "ds-prompt-input"
+			}, {
+				default: _(() => [u(r, {
+					id: "ds-prompt-input",
+					ref_key: "inputRef",
+					ref: D,
+					modelValue: T.value,
+					"onUpdate:modelValue": p[0] ||= (e) => T.value = e,
+					"data-testid": "ds-prompt-input",
+					placeholder: S.placeholder,
+					invalid: !!k.value,
+					onBlur: p[1] ||= (e) => E.value = !0
+				}, null, 8, [
+					"modelValue",
+					"placeholder",
+					"invalid"
+				])]),
+				_: 1
+			}, 8, ["label", "error"])])]),
+			_: 3
+		}, 8, [
+			"modelValue",
+			"title",
+			"size",
+			"close-on-backdrop",
+			"header-config",
+			"footer-config"
+		]));
+	}
+});
+//#endregion
+export { x as t };

package/dist/chunks/DsRadio-x2vmEUCv.js

@@ -0,0 +1,141 @@
+import { a as e, i as t, n, o as r, r as i } from "./config-BS0vLD_L.js";
+import { computed as a, createElementBlock as o, createElementVNode as s, defineComponent as c, inject as l, normalizeClass as u, openBlock as d, renderSlot as f, unref as p, withKeys as m, withModifiers as h } from "vue";
+//#region src/components/DsRadio/dsRadioGroupContext.ts
+var g = Symbol("DS_RADIO_GROUP_CONTEXT"), _ = [
+	"aria-checked",
+	"aria-label",
+	"aria-disabled",
+	"tabindex",
+	"onKeydown"
+], v = [
+	"checked",
+	"disabled",
+	"name",
+	"value",
+	"required",
+	"form"
+], y = [
+	"aria-checked",
+	"aria-label",
+	"aria-disabled",
+	"tabindex",
+	"onKeydown"
+], b = [
+	"checked",
+	"disabled",
+	"name",
+	"value",
+	"required",
+	"form"
+], x = { class: "text-sm text-[var(--muted-fg)]" }, S = /* @__PURE__ */ c({
+	__name: "DsRadio",
+	props: {
+		value: {},
+		modelValue: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		name: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		form: { default: void 0 },
+		size: { default: void 0 },
+		variant: { default: "radiobox" },
+		buttonVariant: { default: "outline" },
+		buttonTone: { default: "neutral" },
+		selectedButtonVariant: { default: "primary" },
+		selectedButtonTone: { default: "primary" },
+		ariaLabel: { default: void 0 }
+	},
+	emits: ["update:modelValue"],
+	setup(c, { emit: S }) {
+		let C = {
+			position: "absolute",
+			opacity: "0",
+			width: "0",
+			height: "0",
+			pointerEvents: "none"
+		}, w = c, T = S, E = l(g, null), D = a(() => w.modelValue === void 0 ? E?.modelValue.value ?? "" : w.modelValue), O = a(() => w.disabled === void 0 ? E?.disabled.value ?? !1 : w.disabled), k = a(() => w.name ? w.name : E?.name.value), A = a(() => w.size ? w.size : E?.size.value ?? "md"), j = a(() => D.value === w.value), M = a(() => n({
+			checked: j.value,
+			disabled: O.value,
+			size: A.value,
+			buttonVariant: w.buttonVariant,
+			buttonTone: w.buttonTone,
+			selectedButtonVariant: w.selectedButtonVariant,
+			selectedButtonTone: w.selectedButtonTone
+		})), N = a(() => r(O.value)), P = a(() => i(j.value)), F = a(() => e(j.value));
+		function I(e) {
+			if (!O.value) {
+				if (w.modelValue !== void 0) {
+					T("update:modelValue", e);
+					return;
+				}
+				E?.setValue(e);
+			}
+		}
+		function L() {
+			I(w.value);
+		}
+		return (e, n) => w.variant === "button" ? (d(), o("div", {
+			key: 0,
+			"data-ds-button": "",
+			"data-ds-radio": "",
+			role: "radio",
+			"aria-checked": j.value ? "true" : "false",
+			"aria-label": w.ariaLabel,
+			"aria-disabled": O.value ? "true" : void 0,
+			tabindex: O.value ? -1 : 0,
+			class: u(M.value),
+			onClick: L,
+			onKeydown: [m(h(L, ["prevent"]), ["space"]), m(h(L, ["prevent"]), ["enter"])]
+		}, [s("input", {
+			type: "radio",
+			checked: j.value,
+			disabled: O.value,
+			name: k.value,
+			value: w.value,
+			required: w.required,
+			form: w.form,
+			tabindex: "-1",
+			"aria-hidden": "true",
+			style: C
+		}, null, 8, v), f(e.$slots, "default")], 42, _)) : (d(), o("div", {
+			key: 1,
+			"data-ds-radio": "",
+			role: "radio",
+			"aria-checked": j.value ? "true" : "false",
+			"aria-label": w.ariaLabel,
+			"aria-disabled": O.value ? "true" : void 0,
+			tabindex: O.value ? -1 : 0,
+			class: u(["inline-flex items-center gap-2 select-none focus-visible:outline-none focus-visible:rounded-[8px] focus-visible:shadow-[0_0_0_2px_var(--ring),0_0_0_4px_var(--bg)]", N.value]),
+			onClick: L,
+			onKeydown: [m(h(L, ["prevent"]), ["space"]), m(h(L, ["prevent"]), ["enter"])]
+		}, [
+			s("input", {
+				type: "radio",
+				checked: j.value,
+				disabled: O.value,
+				name: k.value,
+				value: w.value,
+				required: w.required,
+				form: w.form,
+				tabindex: "-1",
+				"aria-hidden": "true",
+				style: C
+			}, null, 8, b),
+			s("span", {
+				"aria-hidden": "true",
+				class: u(["h-4 w-4 rounded-full border flex items-center justify-center transition-colors duration-150", P.value])
+			}, [s("span", {
+				"data-ds-radio-dot": "",
+				class: u([p(t), F.value])
+			}, null, 2)], 2),
+			s("span", x, [f(e.$slots, "default")])
+		], 42, y));
+	}
+});
+//#endregion
+export { g as n, S as t };

package/dist/chunks/DsRadioGroup-CzlzJF2E.js

@@ -0,0 +1,63 @@
+import { t as e } from "./DsButtonGroup-Ceat9ADe.js";
+import { n as t, t as n } from "./DsRadio-x2vmEUCv.js";
+import { Fragment as r, computed as i, createBlock as a, createElementBlock as o, createTextVNode as s, defineComponent as c, openBlock as l, provide as u, renderList as d, renderSlot as f, toDisplayString as p, withCtx as m } from "vue";
+//#region src/components/DsRadioGroup/DsRadioGroup.vue?vue&type=script&setup=true&lang.ts
+var h = ["aria-disabled"], g = {
+	key: 1,
+	class: "grid gap-2"
+}, _ = {
+	key: 1,
+	class: "grid gap-2"
+}, v = /* @__PURE__ */ c({
+	__name: "DsRadioGroup",
+	props: {
+		modelValue: {},
+		options: { default: void 0 },
+		name: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		variant: { default: "radiobox" },
+		size: { default: "md" }
+	},
+	emits: ["update:modelValue"],
+	setup(c, { emit: v }) {
+		let y = c, b = v;
+		function x(e) {
+			y.disabled || b("update:modelValue", e);
+		}
+		return u(t, {
+			modelValue: i(() => y.modelValue),
+			name: i(() => y.name),
+			disabled: i(() => y.disabled),
+			size: i(() => y.size),
+			setValue: x
+		}), (t, i) => (l(), o("div", {
+			role: "radiogroup",
+			"aria-disabled": y.disabled ? "true" : void 0
+		}, [t.$slots.default ? (l(), o(r, { key: 0 }, [y.variant === "button" ? (l(), a(e, { key: 0 }, {
+			default: m(() => [f(t.$slots, "default")]),
+			_: 3
+		})) : (l(), o("div", g, [f(t.$slots, "default")]))], 64)) : (l(), o(r, { key: 1 }, [y.variant === "button" ? (l(), a(e, { key: 0 }, {
+			default: m(() => [(l(!0), o(r, null, d(y.options ?? [], (e) => (l(), a(n, {
+				key: e.value,
+				value: e.value,
+				variant: "button",
+				size: y.size
+			}, {
+				default: m(() => [s(p(e.label), 1)]),
+				_: 2
+			}, 1032, ["value", "size"]))), 128))]),
+			_: 1
+		})) : (l(), o("div", _, [(l(!0), o(r, null, d(y.options ?? [], (e) => (l(), a(n, {
+			key: e.value,
+			value: e.value
+		}, {
+			default: m(() => [s(p(e.label), 1)]),
+			_: 2
+		}, 1032, ["value"]))), 128))]))], 64))], 8, h));
+	}
+});
+//#endregion
+export { v as t };

package/dist/chunks/DsSegmented-BwQ8VnOZ.js

@@ -0,0 +1,250 @@
+import { a as e, i as t, n, o as r, r as i, s as a } from "./config-CTGjkM7q.js";
+import { Fragment as o, computed as s, createBlock as ee, createCommentVNode as c, createElementBlock as l, createElementVNode as te, defineComponent as u, getCurrentInstance as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as ne, onMounted as re, openBlock as h, ref as g, renderList as _, renderSlot as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, watch as S } from "vue";
+//#region src/components/DsSegmented/DsSegmented.vue?vue&type=script&setup=true&lang.ts
+var C = [
+	"data-variant",
+	"aria-label",
+	"aria-disabled"
+], ie = [
+	"data-value",
+	"aria-checked",
+	"aria-disabled",
+	"disabled",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+], ae = [
+	"name",
+	"value",
+	"checked",
+	"disabled"
+], w = /* @__PURE__ */ u({
+	__name: "DsSegmented",
+	props: {
+		modelValue: {},
+		options: {},
+		variant: { default: "pills" },
+		size: { default: "md" },
+		indicatorDuration: { default: 300 },
+		block: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		name: { default: void 0 },
+		ariaLabel: { default: void 0 }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(u, { emit: w }) {
+		let T = {
+			position: "absolute",
+			opacity: "0",
+			width: "0",
+			height: "0",
+			pointerEvents: "none"
+		}, E = u, D = w, O = `ds-segmented-${d()?.uid ?? Math.random()}`, k = g(null), A = g(/* @__PURE__ */ new Map()), j = g(null), M = g(!1), N = null, P = null, F = null, I = !1, L = s(() => E.options.findIndex((e) => e.value === E.modelValue)), R = s(() => E.options[L.value] ?? null), z = s(() => E.options.filter((e) => !J(e))), B = s(() => Math.max(0, Math.round(E.indicatorDuration))), V = s(() => r({
+			variant: E.variant,
+			block: E.block,
+			disabled: E.disabled
+		})), H = s(() => ({
+			...a({
+				variant: E.variant,
+				size: E.size
+			}),
+			gridTemplateColumns: E.options.length > 0 ? E.options.map(() => E.block ? "minmax(0,1fr)" : "minmax(0,max-content)").join(" ") : "none"
+		})), U = s(() => n(E.variant)), W = s(() => E.name ?? O), G = s(() => L.value !== -1 && j.value !== null), K = s(() => {
+			let e = j.value;
+			return e ? {
+				opacity: M.value ? "1" : "0",
+				width: `${e.width}px`,
+				height: `${e.height}px`,
+				transitionDuration: `${B.value}ms`,
+				transform: `translate3d(${e.x}px, ${e.y}px, 0)`
+			} : {
+				opacity: "0",
+				width: "0px",
+				height: "0px",
+				transitionDuration: `${B.value}ms`,
+				transform: "translate3d(0px, 0px, 0px)"
+			};
+		});
+		function q(e) {
+			return String(e);
+		}
+		function J(e) {
+			return E.disabled || !!e.disabled;
+		}
+		function Y(e) {
+			return e.value === E.modelValue;
+		}
+		function oe(e) {
+			return !!e.icon && !e.label;
+		}
+		function se(e, t) {
+			return J(e) ? !1 : Y(e) ? !0 : L.value === -1 ? z.value[0]?.value === E.options[t]?.value : !1;
+		}
+		function ce(e, t) {
+			let n = q(e);
+			if (!(t instanceof HTMLElement)) {
+				A.value.delete(n);
+				return;
+			}
+			A.value.set(n, t);
+		}
+		function le(e, t) {
+			return e === t ? !0 : !e || !t ? !1 : e.width === t.width && e.height === t.height && e.x === t.x && e.y === t.y;
+		}
+		function ue() {
+			let e = k.value, t = R.value;
+			if (!e || !t) {
+				j.value !== null && (j.value = null), M.value &&= !1;
+				return;
+			}
+			let n = A.value.get(q(t.value));
+			if (!n) return;
+			let r = e.getBoundingClientRect(), i = n.getBoundingClientRect(), a = {
+				width: Math.max(Math.round(i.width), 0),
+				height: Math.max(Math.round(i.height), 0),
+				x: Math.round(i.left - r.left),
+				y: Math.max(Math.round(i.top - r.top) - 1, 0)
+			};
+			le(j.value, a) || (j.value = a);
+			let o = a.width > 0 && a.height > 0;
+			M.value !== o && (M.value = o);
+		}
+		function de() {
+			if (typeof ResizeObserver > "u") return;
+			let e = k.value, t = R.value, n = t ? A.value.get(q(t.value)) ?? null : null;
+			if (N ||= new ResizeObserver(() => X()), !e) {
+				N.disconnect(), P = null, F = null;
+				return;
+			}
+			P === e && F === n || (N.disconnect(), N.observe(e), n && N.observe(n), P = e, F = n);
+		}
+		function X() {
+			I || (I = !0, f(() => {
+				I = !1, ue(), de();
+			}));
+		}
+		function Z(e) {
+			J(e) || e.value === E.modelValue || (D("update:modelValue", e.value), D("change", e.value, e));
+		}
+		function Q(e, t) {
+			if (E.options.length === 0) return -1;
+			let n = e;
+			for (let e = 0; e < E.options.length; e += 1) {
+				n = (n + t + E.options.length) % E.options.length;
+				let e = E.options[n];
+				if (e && !J(e)) return n;
+			}
+			return -1;
+		}
+		function $(e) {
+			let t = E.options[e];
+			t && A.value.get(q(t.value))?.focus();
+		}
+		function fe(e, t) {
+			if (!E.disabled) {
+				if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+					e.preventDefault();
+					let n = Q(t, 1);
+					if (n === -1) return;
+					let r = E.options[n];
+					r && (Z(r), $(n));
+					return;
+				}
+				if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+					e.preventDefault();
+					let n = Q(t, -1);
+					if (n === -1) return;
+					let r = E.options[n];
+					r && (Z(r), $(n));
+					return;
+				}
+				if (e.key === "Home") {
+					e.preventDefault();
+					let t = z.value[0];
+					if (!t) return;
+					Z(t), $(E.options.findIndex((e) => e.value === t.value));
+					return;
+				}
+				if (e.key === "End") {
+					e.preventDefault();
+					let t = z.value.at(-1);
+					if (!t) return;
+					Z(t), $(E.options.findIndex((e) => e.value === t.value));
+					return;
+				}
+				if (e.key === " " || e.key === "Enter") {
+					e.preventDefault();
+					let n = E.options[t];
+					n && Z(n);
+				}
+			}
+		}
+		return S(() => E.modelValue, () => X()), S(() => E.options, () => X(), { deep: !0 }), S(() => E.variant, () => X()), S(() => E.size, () => X()), S(() => E.block, () => X()), re(() => X()), ne(() => {
+			N?.disconnect(), P = null, F = null;
+		}), (n, r) => (h(), l("div", {
+			ref_key: "rootRef",
+			ref: k,
+			"data-ds-segmented": "",
+			"data-variant": E.variant,
+			role: "radiogroup",
+			"aria-label": E.ariaLabel,
+			"aria-disabled": E.disabled ? "true" : void 0,
+			class: p(V.value),
+			style: m(H.value)
+		}, [G.value ? (h(), l("span", {
+			key: 0,
+			"data-ds-segmented-indicator": "",
+			"aria-hidden": "true",
+			class: p(U.value),
+			style: m(K.value)
+		}, null, 6)) : c("", !0), (h(!0), l(o, null, _(E.options, (r, a) => (h(), l("button", {
+			key: r.value,
+			ref_for: !0,
+			ref: (e) => ce(r.value, e),
+			"data-ds-segmented-item": "",
+			"data-value": String(r.value),
+			type: "button",
+			role: "radio",
+			"aria-checked": Y(r) ? "true" : "false",
+			"aria-disabled": J(r) ? "true" : void 0,
+			disabled: J(r),
+			tabindex: se(r, a) ? 0 : -1,
+			class: p(x(i)({
+				variant: E.variant,
+				selected: Y(r),
+				disabled: J(r),
+				iconOnly: oe(r)
+			})),
+			onClick: (e) => Z(r),
+			onKeydown: (e) => fe(e, a)
+		}, [te("input", {
+			type: "radio",
+			tabindex: "-1",
+			"aria-hidden": "true",
+			name: W.value,
+			value: r.value,
+			checked: Y(r),
+			disabled: J(r),
+			style: T
+		}, null, 8, ae), v(n.$slots, "default", {
+			option: r,
+			selected: Y(r),
+			disabled: J(r)
+		}, () => [r.icon ? (h(), ee(y(r.icon), {
+			key: 0,
+			"aria-hidden": "true",
+			class: p(x(t))
+		}, null, 8, ["class"])) : c("", !0), r.label ? (h(), l("span", {
+			key: 1,
+			class: p(x(e))
+		}, b(r.label), 3)) : c("", !0)])], 42, ie))), 128))], 14, C));
+	}
+});
+//#endregion
+export { w as t };