@feugene/granularity 0.2.0 → 0.3.1

package/dist/{chunks/DsRadio-x2vmEUCv.js → components/DsRadio/chunks/DsRadio-DKbrUFUZ.js}

@@ -1,4 +1,4 @@
-import { a as e, i as t, n, o as r, r as i } from "./config-BS0vLD_L.js";
+import { a as e, i as t, o as n, r, s as i } from "../../../chunks/config-DGGgsQ-8.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"), _ = [
@@ -8,6 +8,7 @@ var g = Symbol("DS_RADIO_GROUP_CONTEXT"), _ = [
 	"tabindex",
 	"onKeydown"
 ], v = [
+	"id",
 	"checked",
 	"disabled",
 	"name",
@@ -21,6 +22,7 @@ var g = Symbol("DS_RADIO_GROUP_CONTEXT"), _ = [
 	"tabindex",
 	"onKeydown"
 ], b = [
+	"id",
 	"checked",
 	"disabled",
 	"name",
@@ -42,6 +44,7 @@ var g = Symbol("DS_RADIO_GROUP_CONTEXT"), _ = [
 			default: !1
 		},
 		form: { default: void 0 },
+		id: { default: void 0 },
 		size: { default: void 0 },
 		variant: { default: "radiobox" },
 		buttonVariant: { default: "outline" },
@@ -58,7 +61,7 @@ var g = Symbol("DS_RADIO_GROUP_CONTEXT"), _ = [
 			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({
+		}, 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(() => r({
 			checked: j.value,
 			disabled: O.value,
 			size: A.value,
@@ -66,7 +69,7 @@ var g = Symbol("DS_RADIO_GROUP_CONTEXT"), _ = [
 			buttonTone: w.buttonTone,
 			selectedButtonVariant: w.selectedButtonVariant,
 			selectedButtonTone: w.selectedButtonTone
-		})), N = a(() => r(O.value)), P = a(() => i(j.value)), F = a(() => e(j.value));
+		})), N = a(() => i(O.value)), P = a(() => t(j.value)), F = a(() => n(j.value));
 		function I(e) {
 			if (!O.value) {
 				if (w.modelValue !== void 0) {
@@ -79,35 +82,36 @@ var g = Symbol("DS_RADIO_GROUP_CONTEXT"), _ = [
 		function L() {
 			I(w.value);
 		}
-		return (e, n) => w.variant === "button" ? (d(), o("div", {
+		return (t, n) => c.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-label": c.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", {
+			id: c.id,
 			type: "radio",
 			checked: j.value,
 			disabled: O.value,
 			name: k.value,
-			value: w.value,
-			required: w.required,
-			form: w.form,
+			value: c.value,
+			required: c.required,
+			form: c.form,
 			tabindex: "-1",
 			"aria-hidden": "true",
 			style: C
-		}, null, 8, v), f(e.$slots, "default")], 42, _)) : (d(), o("div", {
+		}, null, 8, v), f(t.$slots, "default")], 42, _)) : (d(), o("div", {
 			key: 1,
 			"data-ds-radio": "",
 			role: "radio",
 			"aria-checked": j.value ? "true" : "false",
-			"aria-label": w.ariaLabel,
+			"aria-label": c.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]),
@@ -115,25 +119,27 @@ var g = Symbol("DS_RADIO_GROUP_CONTEXT"), _ = [
 			onKeydown: [m(h(L, ["prevent"]), ["space"]), m(h(L, ["prevent"]), ["enter"])]
 		}, [
 			s("input", {
+				id: c.id,
 				type: "radio",
 				checked: j.value,
 				disabled: O.value,
 				name: k.value,
-				value: w.value,
-				required: w.required,
-				form: w.form,
+				value: c.value,
+				required: c.required,
+				form: c.form,
 				tabindex: "-1",
 				"aria-hidden": "true",
 				style: C
 			}, null, 8, b),
 			s("span", {
+				"data-ds-radio-control": "",
 				"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])
+				class: u([p(e), F.value])
 			}, null, 2)], 2),
-			s("span", x, [f(e.$slots, "default")])
+			s("span", x, [f(t.$slots, "default")])
 		], 42, y));
 	}
 });

package/dist/components/DsRadio/index.js

@@ -1,3 +1,3 @@
-import { s as e, t } from "../../chunks/config-BS0vLD_L.js";
-import { n, t as r } from "../../chunks/DsRadio-x2vmEUCv.js";
+import { n as e, t } from "../../chunks/config-DGGgsQ-8.js";
+import { n, t as r } from "./chunks/DsRadio-DKbrUFUZ.js";
 export { n as DS_RADIO_GROUP_CONTEXT, r as DsRadio, r as default, t as dsRadioConfig, e as dsRadioSafelist };

package/dist/{chunks/DsRadioGroup-CzlzJF2E.js → components/DsRadioGroup/chunks/DsRadioGroup-BQo7Nc5-.js}

@@ -1,8 +1,8 @@
-import { t as e } from "./DsButtonGroup-Ceat9ADe.js";
-import { n as t, t as n } from "./DsRadio-x2vmEUCv.js";
+import { t as e } from "../../DsButtonGroup/chunks/DsButtonGroup-DPK1W3Hk.js";
+import { n as t, t as n } from "../../DsRadio/chunks/DsRadio-DKbrUFUZ.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 = {
+var h = ["aria-label", "aria-disabled"], g = {
 	key: 1,
 	class: "grid gap-2"
 }, _ = {
@@ -19,7 +19,8 @@ var h = ["aria-disabled"], g = {
 			default: !1
 		},
 		variant: { default: "radiobox" },
-		size: { default: "md" }
+		size: { default: "md" },
+		ariaLabel: { default: void 0 }
 	},
 	emits: ["update:modelValue"],
 	setup(c, { emit: v }) {
@@ -34,23 +35,25 @@ var h = ["aria-disabled"], g = {
 			size: i(() => y.size),
 			setValue: x
 		}), (t, i) => (l(), o("div", {
+			"data-ds-radio-group": "",
 			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 }, {
+			"aria-label": c.ariaLabel,
+			"aria-disabled": c.disabled ? "true" : void 0
+		}, [t.$slots.default ? (l(), o(r, { key: 0 }, [c.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, {
+		})) : (l(), o("div", g, [f(t.$slots, "default")]))], 64)) : (l(), o(r, { key: 1 }, [c.variant === "button" ? (l(), a(e, { key: 0 }, {
+			default: m(() => [(l(!0), o(r, null, d(c.options ?? [], (e) => (l(), a(n, {
 				key: e.value,
 				value: e.value,
 				variant: "button",
-				size: y.size
+				size: c.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, {
+		})) : (l(), o("div", _, [(l(!0), o(r, null, d(c.options ?? [], (e) => (l(), a(n, {
 			key: e.value,
 			value: e.value
 		}, {

package/dist/components/DsRadioGroup/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../chunks/DsRadioGroup-CzlzJF2E.js";
-import { n as t, t as n } from "../../chunks/config-B98-jCfY.js";
-export { e as DsRadioGroup, e as default, n as dsRadioGroupConfig, t as dsRadioGroupSafelist };
+import { t as e } from "./chunks/DsRadioGroup-BQo7Nc5-.js";
+import { t } from "../../chunks/config-BNQb1Tdk.js";
+export { e as DsRadioGroup, e as default, t as dsRadioGroupConfig };

package/dist/components/DsSegmented/chunks/DsSegmented-SbqzdCNX.js

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

package/dist/components/DsSegmented/index.js

@@ -1,3 +1,3 @@
-import { c as e, t } from "../../chunks/config-CTGjkM7q.js";
-import { t as n } from "../../chunks/DsSegmented-BwQ8VnOZ.js";
+import { n as e, t } from "../../chunks/config-D-soL_Ul.js";
+import { t as n } from "./chunks/DsSegmented-SbqzdCNX.js";
 export { n as DsSegmented, n as default, t as dsSegmentedConfig, e as dsSegmentedSafelist };