@feugene/granularity 0.2.0 → 0.3.0

package/dist/components/DsSelect/chunks/DsSelect-DN-vZIEG.js

@@ -0,0 +1,314 @@
+import { a as e } from "../../../chunks/directives-K8Vo0VhP.js";
+import { t } from "../../DsInput/chunks/DsInput-B8RhHkKQ.js";
+import { a as n, i as r, n as ee, r as te, t as ne } from "../../../chunks/dsSelectStyles-BCrj5Fty.js";
+import { Fragment as i, Teleport as a, Transition as re, computed as o, createBlock as ie, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onUnmounted as ae, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as oe, vShow as se, watch as ce, withCtx as le, withDirectives as b, withKeys as ue, withModifiers as x } from "vue";
+//#region src/components/DsSelect/DsSelect.vue?vue&type=script&setup=true&lang.ts
+var de = [
+	"value",
+	"multiple",
+	"disabled",
+	"aria-label"
+], S = {
+	key: 0,
+	value: ""
+}, C = ["value"], fe = ["value"], pe = {
+	key: 0,
+	"data-testid": "ds-select-chevron",
+	class: "absolute top-1/2 -translate-y-1/2 right-3 text-[var(--muted-fg)] pointer-events-none"
+}, me = [
+	"disabled",
+	"aria-label",
+	"aria-expanded"
+], he = { class: "min-w-0 flex-1" }, ge = {
+	key: 0,
+	class: "shrink-0 h-4 w-4",
+	"aria-hidden": "true"
+}, _e = {
+	key: 1,
+	"data-testid": "ds-select-chevron",
+	class: "shrink-0 text-[var(--muted-fg)] pointer-events-none"
+}, ve = ["disabled", "aria-label"], ye = {
+	key: 0,
+	class: "p-2 border-b border-[var(--brd)]"
+}, be = ["aria-multiselectable"], xe = ["aria-selected", "onClick"], Se = { class: "flex items-center gap-2 min-w-0" }, Ce = { class: "truncate" }, w = /* @__PURE__ */ d({
+	__name: "DsSelect",
+	props: {
+		modelValue: {},
+		options: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: { default: void 0 },
+		view: { default: "default" },
+		size: { default: "md" },
+		placeholder: { default: void 0 },
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		optionsView: { default: "native" },
+		allowCustomValue: {
+			type: Boolean,
+			default: !1
+		},
+		customValuePlaceholder: { default: "Add value…" },
+		dropdownMaxHeight: { default: 280 },
+		closeOnSelect: {
+			type: Boolean,
+			default: !0
+		},
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		clearLabel: { default: "Clear" },
+		variant: { default: "primary" },
+		underline: { default: "auto" }
+	},
+	emits: ["update:modelValue"],
+	setup(d, { emit: w }) {
+		let T = d, E = o(() => T.view === "link" ? n : ne), D = o(() => T.view === "link" ? "relative inline-block align-baseline" : "relative w-full"), O = w, k = o(() => T.options ?? []);
+		function A(e) {
+			return Array.isArray(e) ? e : e ? [e] : [];
+		}
+		let j = o(() => Array.isArray(T.modelValue) ? T.modelValue[0] ?? "" : T.modelValue), M = o(() => A(T.modelValue)), N = o(() => T.multiple ? M.value : j.value ? [j.value] : []), P = o(() => N.value.length > 0), we = o(() => {
+			let e = new Map(k.value.map((e) => [e.value, e]));
+			return N.value.map((t) => e.get(t) ?? {
+				value: t,
+				label: t
+			});
+		}), F = o(() => T.multiple ? !1 : k.value.some((e) => e.value === j.value)), I = o(() => T.multiple ? N.value.length ? N.value.map((e) => k.value.find((t) => t.value === e)?.label ?? e).join(", ") : "" : k.value.find((e) => e.value === j.value)?.label ?? j.value), Te = o(() => P.value ? I.value : T.placeholder ?? ""), Ee = o(() => !T.allowCustomValue || T.optionsView !== "native" || T.multiple || !T.options || j.value === "" ? !1 : !F.value), L = g(""), R = g(!1), z = g(null), B = g(null), V = g(null), De = [() => B.value], H = g({
+			left: "0px",
+			top: "0px",
+			width: "0px",
+			zIndex: "2147483647"
+		});
+		function U() {
+			if (typeof window > "u") return;
+			let e = z.value;
+			if (!e) return;
+			let t = e.getBoundingClientRect();
+			H.value = {
+				left: `${t.left}px`,
+				top: `${t.bottom + 8}px`,
+				width: `${t.width}px`,
+				zIndex: "2147483647"
+			};
+		}
+		function Oe() {
+			typeof window > "u" || (window.addEventListener("resize", U), window.addEventListener("scroll", U, !0));
+		}
+		function W() {
+			typeof window > "u" || (window.removeEventListener("resize", U), window.removeEventListener("scroll", U, !0));
+		}
+		function G() {
+			R.value = !1;
+		}
+		function ke() {
+			T.disabled || (R.value = !R.value);
+		}
+		function K(e) {
+			e.key === "Escape" && G();
+		}
+		ce(R, async (e) => {
+			if (!(typeof document > "u")) {
+				if (document.removeEventListener("keydown", K), W(), e && document.addEventListener("keydown", K), !e) {
+					L.value = "";
+					return;
+				}
+				Oe(), await f(), U(), T.allowCustomValue && V.value?.focus();
+			}
+		}, { immediate: !0 }), ae(() => {
+			typeof document > "u" || (document.removeEventListener("keydown", K), W());
+		});
+		let Ae = o(() => te), je = o(() => {
+			let e = k.value, t = !T.allowCustomValue || T.multiple || j.value === "" || F.value ? e : [{
+				value: j.value,
+				label: j.value
+			}, ...e];
+			if (!T.allowCustomValue) return t;
+			let n = L.value.trim().toLowerCase();
+			return n ? t.filter((e) => e.label.toLowerCase().includes(n) || e.value.toLowerCase().includes(n)) : t;
+		}), Me = o(() => {
+			if (!T.allowCustomValue || T.optionsView !== "panel") return !1;
+			let e = L.value.trim();
+			return e ? T.multiple ? N.value.includes(e) ? !1 : !k.value.some((t) => t.value === e) : e === j.value ? !1 : !k.value.some((t) => t.value === e) : !1;
+		});
+		function q(e) {
+			O("update:modelValue", e);
+		}
+		function J(e) {
+			return N.value.includes(e);
+		}
+		function Ne(e) {
+			q(e), T.closeOnSelect && G();
+		}
+		function Y(e) {
+			if (!T.multiple) {
+				Ne(e);
+				return;
+			}
+			let t = N.value.slice(), n = t.indexOf(e);
+			n >= 0 ? t.splice(n, 1) : t.push(e), q(t), T.closeOnSelect && G();
+		}
+		function X() {
+			let e = L.value.trim();
+			e && Y(e);
+		}
+		let Z = o(() => T.optionsView === "native" && T.view !== "link" && !T.multiple), Pe = o(() => !T.clearable || T.optionsView !== "native" || T.multiple ? !1 : T.options ? !T.options.some((e) => e.value === "") : !0), Q = o(() => !T.clearable || T.optionsView !== "panel" || T.view === "link" ? !1 : P.value), Fe = o(() => ee({
+			view: T.view,
+			size: T.size,
+			disabled: T.disabled,
+			variant: T.variant,
+			underline: T.underline,
+			showNativeChevron: Z.value
+		})), Ie = o(() => r({
+			view: T.view,
+			optionsView: T.optionsView,
+			size: T.size,
+			disabled: T.disabled,
+			variant: T.variant,
+			underline: T.underline
+		}));
+		function Le(e) {
+			let t = e.target;
+			if (T.multiple) {
+				O("update:modelValue", Array.from(t.selectedOptions, (e) => e.value));
+				return;
+			}
+			O("update:modelValue", t.value);
+		}
+		function $() {
+			T.disabled || q(T.multiple ? [] : "");
+		}
+		return (n, r) => d.optionsView === "native" ? (h(), c("div", {
+			key: 0,
+			"data-ds-select": "",
+			class: p(D.value)
+		}, [l("select", {
+			"data-ds-select-native": "",
+			value: d.multiple ? M.value : j.value,
+			multiple: d.multiple,
+			disabled: d.disabled,
+			"aria-label": d.ariaLabel,
+			class: p([E.value, Fe.value]),
+			onChange: Le
+		}, [Pe.value ? (h(), c("option", S)) : s("", !0), v(n.$slots, "default", {}, () => [Ee.value ? (h(), c("option", {
+			key: 0,
+			value: j.value
+		}, y(j.value), 9, C)) : s("", !0), (h(!0), c(i, null, _(d.options, (e) => (h(), c("option", {
+			key: e.value,
+			value: e.value
+		}, y(e.label), 9, fe))), 128))])], 42, de), Z.value ? (h(), c("span", pe, [...r[1] ||= [l("span", {
+			class: "i-lucide-chevron-down h-4 w-4",
+			"aria-hidden": "true"
+		}, null, -1)]])) : s("", !0)], 2)) : b((h(), c("div", {
+			key: 1,
+			ref_key: "rootEl",
+			ref: z,
+			"data-ds-select": "",
+			class: p(D.value)
+		}, [
+			l("button", {
+				"data-testid": "ds-select-trigger",
+				"data-ds-select-trigger": "",
+				type: "button",
+				disabled: d.disabled,
+				"aria-label": d.ariaLabel,
+				role: "combobox",
+				"aria-readonly": "true",
+				"aria-expanded": R.value ? "true" : "false",
+				class: p([E.value, Ie.value]),
+				onClick: ke
+			}, [l("span", he, [v(n.$slots, "value", {
+				selectedOptions: we.value,
+				selectedValues: N.value,
+				displayLabel: I.value,
+				placeholder: d.placeholder,
+				hasSelection: P.value
+			}, () => [l("span", { class: p(["block truncate", P.value ? "" : "text-[var(--muted-fg)]"]) }, y(Te.value), 3)])]), Q.value ? (h(), c("span", ge)) : (h(), c("span", _e, [...r[2] ||= [l("span", {
+				class: "i-lucide-chevron-down h-4 w-4",
+				"aria-hidden": "true"
+			}, null, -1)]]))], 10, me),
+			Q.value ? (h(), c("button", {
+				key: 0,
+				"data-testid": "ds-select-clear",
+				"data-ds-select-clear": "",
+				type: "button",
+				class: "absolute top-1/2 -translate-y-1/2 right-3 h-6 w-6 inline-flex items-center justify-center rounded-md text-[var(--muted-fg)] hover:text-[var(--fg)] hover:bg-[color-mix(in_srgb,var(--muted)_25%,transparent)] disabled:opacity-50",
+				disabled: d.disabled,
+				"aria-label": d.clearLabel,
+				onClick: x($, ["stop"])
+			}, [...r[3] ||= [l("span", {
+				class: "i-lucide-x h-4 w-4",
+				"aria-hidden": "true"
+			}, null, -1)]], 8, ve)) : s("", !0),
+			(h(), ie(a, { to: "body" }, [u(re, {
+				"enter-active-class": "transition ease-out duration-150",
+				"enter-from-class": "transform opacity-0 scale-95",
+				"enter-to-class": "transform opacity-100 scale-100",
+				"leave-active-class": "transition ease-in duration-100",
+				"leave-from-class": "transform opacity-100 scale-100",
+				"leave-to-class": "transform opacity-0 scale-95"
+			}, {
+				default: le(() => [b(l("div", {
+					ref_key: "panelEl",
+					ref: B,
+					"data-testid": "ds-select-panel",
+					"data-ds-select-panel": "",
+					class: "fixed w-full",
+					style: m(H.value)
+				}, [l("div", { class: p(Ae.value) }, [d.allowCustomValue ? (h(), c("div", ye, [u(t, {
+					ref_key: "customInputRef",
+					ref: V,
+					modelValue: L.value,
+					"onUpdate:modelValue": r[0] ||= (e) => L.value = e,
+					"data-testid": "ds-select-custom-input",
+					type: "text",
+					placeholder: d.customValuePlaceholder,
+					size: "sm",
+					onKeydown: ue(x(X, ["prevent"]), ["enter"])
+				}, null, 8, [
+					"modelValue",
+					"placeholder",
+					"onKeydown"
+				])])) : s("", !0), l("div", {
+					"data-ds-select-listbox": "",
+					class: "p-1 overflow-auto",
+					style: m({ maxHeight: `${d.dropdownMaxHeight}px` }),
+					role: "listbox",
+					"aria-multiselectable": d.multiple ? "true" : void 0
+				}, [Me.value ? (h(), c("button", {
+					key: 0,
+					"data-testid": "ds-select-add-option",
+					"data-ds-select-add-option": "",
+					type: "button",
+					class: "w-full rounded-[10px] px-3 py-2 text-left text-[13px] hover:bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]",
+					onClick: X
+				}, " Add “" + y(L.value.trim()) + "” ", 1)) : s("", !0), (h(!0), c(i, null, _(je.value, (e) => (h(), c("button", {
+					key: e.value,
+					"data-ds-select-option": "",
+					type: "button",
+					role: "option",
+					"aria-selected": J(e.value) ? "true" : "false",
+					class: "w-full rounded-[10px] px-3 py-2 text-left text-[13px] hover:bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]",
+					onClick: (t) => Y(e.value)
+				}, [v(n.$slots, "option", {
+					option: e,
+					selected: J(e.value)
+				}, () => [l("span", Se, [l("span", {
+					class: p(["h-4 w-4 shrink-0", J(e.value) ? "i-lucide-check text-[var(--primary)]" : ""]),
+					"aria-hidden": "true"
+				}, null, 2), l("span", Ce, y(e.label), 1)])])], 8, xe))), 128))], 12, be)], 2)], 4), [[se, R.value]])]),
+				_: 3
+			})]))
+		], 2)), [[oe(e), {
+			handler: G,
+			enabled: R.value,
+			exclude: De
+		}]]);
+	}
+});
+//#endregion
+export { w as t };

package/dist/components/DsSelect/index.js

@@ -1,4 +1,3 @@
-import { r as e } from "../../chunks/dsSelectStyles-Bym0uW4f.js";
-import { t } from "../../chunks/DsSelect-DEHGeICn.js";
-import { t as n } from "../../chunks/config-BEzNFZ_R.js";
-export { t as DsSelect, t as default, n as dsSelectConfig, e as dsSelectSafelist };
+import { t as e } from "./chunks/DsSelect-DN-vZIEG.js";
+import { n as t, t as n } from "../../chunks/config-DoJaEy4X.js";
+export { e as DsSelect, e as default, n as dsSelectConfig, t as dsSelectSafelist };

package/dist/components/DsSidebar/chunks/DsSidebar-DdofI1lo.js

@@ -0,0 +1,29 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createTextVNode as r, defineComponent as i, openBlock as a, renderSlot as o, toDisplayString as s } from "vue";
+//#region src/components/DsSidebar/DsSidebar.vue?vue&type=script&setup=true&lang.ts
+var c = {
+	"data-ds-sidebar": "",
+	class: "border-r border-[var(--sidebar-brd)] bg-[var(--sidebar)] text-[var(--sidebar-fg)]"
+}, l = {
+	key: 0,
+	"data-ds-sidebar-header": "",
+	class: "border-b border-[var(--sidebar-brd)] px-4 py-4"
+}, u = {
+	key: 0,
+	"data-ds-sidebar-subtitle": "",
+	class: "text-[14px] text-[var(--muted-fg)]"
+}, d = {
+	key: 1,
+	"data-ds-sidebar-title": "",
+	class: "text-[18px] font-700"
+}, f = { class: "p-3" }, p = /* @__PURE__ */ i({
+	__name: "DsSidebar",
+	props: {
+		title: { default: void 0 },
+		subtitle: { default: void 0 }
+	},
+	setup(i) {
+		return (p, m) => (a(), t("aside", c, [p.$slots.title || i.title || p.$slots.subtitle || i.subtitle ? (a(), t("div", l, [p.$slots.subtitle || i.subtitle ? (a(), t("div", u, [o(p.$slots, "subtitle", {}, () => [r(s(i.subtitle), 1)])])) : e("", !0), p.$slots.title || i.title ? (a(), t("div", d, [o(p.$slots, "title", {}, () => [r(s(i.title), 1)])])) : e("", !0)])) : e("", !0), n("div", f, [o(p.$slots, "default")])]));
+	}
+});
+//#endregion
+export { p as t };

package/dist/components/DsSidebar/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../chunks/DsSidebar-BNLaBCYD.js";
-import { n as t, t as n } from "../../chunks/config-CLyDbB2M.js";
-export { e as DsSidebar, e as default, n as dsSidebarConfig, t as dsSidebarSafelist };
+import { t as e } from "./chunks/DsSidebar-DdofI1lo.js";
+import { t } from "../../chunks/config-BPuskn3r.js";
+export { e as DsSidebar, e as default, t as dsSidebarConfig };

package/dist/{chunks/DsSkeleton-BcXabaQ7.js → components/DsSkeleton/chunks/DsSkeleton-DJSQ4gGR.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, defineComponent as t, normalizeStyle as n, openBlock as r } from "vue";
-//#endregion
+import '../../../DsSkeleton.css';//#endregion
 //#region src/components/DsSkeleton/DsSkeleton.vue
 var i = /* @__PURE__ */ t({
 	__name: "DsSkeleton",
@@ -9,15 +9,15 @@ var i = /* @__PURE__ */ t({
 		rounded: { default: "9999px" }
 	},
 	setup(t) {
-		let i = t;
-		return (t, a) => (r(), e("div", {
-			class: "animate-pulse bg-[var(--muted)] border border-[var(--brd)]",
+		return (i, a) => (r(), e("div", {
+			"data-ds-skeleton": "",
+			"aria-hidden": "true",
+			class: "bg-[var(--muted)] border border-[var(--brd)]",
 			style: n({
-				height: i.height,
-				width: i.width,
-				borderRadius: i.rounded
-			}),
-			"aria-hidden": "true"
+				height: t.height,
+				width: t.width,
+				borderRadius: t.rounded
+			})
 		}, null, 4));
 	}
 });

package/dist/components/DsSkeleton/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../chunks/DsSkeleton-BcXabaQ7.js";
-import { n as t, t as n } from "../../chunks/config-BKpHj94n.js";
-export { e as DsSkeleton, e as default, n as dsSkeletonConfig, t as dsSkeletonSafelist };
+import { t as e } from "./chunks/DsSkeleton-DJSQ4gGR.js";
+import { t } from "../../chunks/config-DO9E5iXl2.js";
+export { e as DsSkeleton, e as default, t as dsSkeletonConfig };

package/dist/{chunks/DsSwitch-DBdjltGz.js → components/DsSwitch/chunks/DsSwitch-Dh4_bd6e.js}

@@ -1,4 +1,4 @@
-import { a as e, i as t, n } from "./config-B-tMv4PT.js";
+import { a as e, i as t, r as n } from "../../../chunks/config-BscZj6l42.js";
 import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderSlot as d } from "vue";
 //#region src/components/DsSwitch/DsSwitch.vue?vue&type=script&setup=true&lang.ts
 var f = [
@@ -37,21 +37,25 @@ var f = [
 		return (e, t) => (u(), a("button", {
 			type: "button",
 			role: "switch",
-			"aria-checked": h.modelValue ? "true" : "false",
-			"aria-label": h.ariaLabel,
-			disabled: h.disabled,
+			"data-ds-switch": "",
+			"aria-checked": s.modelValue ? "true" : "false",
+			"aria-label": s.ariaLabel,
+			disabled: s.disabled,
 			class: "inline-flex items-center gap-2 select-none disabled:opacity-50 disabled:cursor-not-allowed",
 			onClick: x
 		}, [o("span", {
 			"data-testid": "ds-switch-track",
+			"data-ds-switch-track": "",
 			class: c(_.value),
 			style: l(v.value)
 		}, [o("span", {
 			"data-testid": "ds-switch-thumb",
+			"data-ds-switch-thumb": "",
 			class: c(y.value),
 			"aria-hidden": "true"
 		}, null, 2)], 6), e.$slots.default ? (u(), a("span", {
 			key: 0,
+			"data-ds-switch-label": "",
 			class: c(b.value)
 		}, [d(e.$slots, "default")], 2)) : i("", !0)], 8, f));
 	}

package/dist/components/DsSwitch/index.js

@@ -1,3 +1,3 @@
-import { r as e, t } from "../../chunks/config-B-tMv4PT.js";
-import { t as n } from "../../chunks/DsSwitch-DBdjltGz.js";
+import { n as e, t } from "../../chunks/config-BscZj6l42.js";
+import { t as n } from "./chunks/DsSwitch-Dh4_bd6e.js";
 export { n as DsSwitch, n as default, t as dsSwitchConfig, e as dsSwitchSafelist };

package/dist/components/DsTable/chunks/DsTable-C27_FR_h.js

@@ -0,0 +1,44 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, toDisplayString as l, unref as u, useSlots as d } from "vue";
+//#region src/components/DsTable/DsTable.vue?vue&type=script&setup=true&lang.ts
+var f = [
+	"role",
+	"aria-label",
+	"tabindex"
+], p = ["aria-label", "aria-labelledby"], m = {
+	key: 0,
+	class: "sr-only"
+}, h = { class: "bg-[var(--muted)] text-[var(--muted-fg)]" }, g = { class: "text-[var(--fg)]" }, _ = {
+	key: 1,
+	class: "text-[var(--fg)]"
+}, v = /* @__PURE__ */ a({
+	__name: "DsTable",
+	props: {
+		density: { default: "regular" },
+		caption: { default: void 0 },
+		ariaLabel: { default: void 0 },
+		ariaLabelledby: { default: void 0 },
+		regionLabel: { default: void 0 }
+	},
+	setup(a) {
+		let v = a, y = d(), b = e(() => v.density === "compact" ? "text-[13px]" : "text-sm"), x = e(() => !!y.caption || !!v.caption);
+		return (e, d) => (s(), n("div", {
+			"data-ds-table-scroll": "",
+			role: a.regionLabel ? "region" : void 0,
+			"aria-label": a.regionLabel,
+			tabindex: a.regionLabel ? 0 : void 0,
+			class: "overflow-x-auto rounded-[var(--ds-radius-lg)] border border-[var(--brd)] bg-[var(--card)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
+		}, [r("table", {
+			"data-ds-table": "",
+			class: o(["min-w-full", b.value]),
+			"aria-label": a.ariaLabelledby ? void 0 : a.ariaLabel,
+			"aria-labelledby": a.ariaLabelledby
+		}, [
+			x.value ? (s(), n("caption", m, [c(e.$slots, "caption", {}, () => [i(l(a.caption), 1)])])) : t("", !0),
+			r("thead", h, [c(e.$slots, "head")]),
+			r("tbody", g, [c(e.$slots, "default")]),
+			u(y).foot ? (s(), n("tfoot", _, [c(e.$slots, "foot")])) : t("", !0)
+		], 10, p)], 8, f));
+	}
+});
+//#endregion
+export { v as t };

package/dist/components/DsTable/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../chunks/DsTable-apqrsbxV.js";
-import { n as t, t as n } from "../../chunks/config-DSFnRpu82.js";
-export { e as DsTable, e as default, n as dsTableConfig, t as dsTableSafelist };
+import { t as e } from "./chunks/DsTable-C27_FR_h.js";
+import { t } from "../../chunks/config-CvuvJeih.js";
+export { e as DsTable, e as default, t as dsTableConfig };

package/dist/components/DsTabs/chunks/DsTabs-FLWaGtbo.js

@@ -0,0 +1,98 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, nextTick as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, toDisplayString as d } from "vue";
+//#region src/components/DsTabs/DsTabs.vue?vue&type=script&setup=true&lang.ts
+var f = [
+	"aria-selected",
+	"aria-disabled",
+	"disabled",
+	"tabindex",
+	"onClick"
+], p = { class: "inline-flex items-center gap-2" }, m = {
+	key: 0,
+	class: "text-[11px] px-1.5 py-0.5 rounded-full bg-[var(--secondary)] text-[var(--secondary-fg)]"
+}, h = /* @__PURE__ */ a({
+	__name: "DsTabs",
+	props: {
+		modelValue: {},
+		tabs: {}
+	},
+	emits: ["update:modelValue"],
+	setup(a, { emit: h }) {
+		let g = a, _ = h, v = l([]);
+		function y(e, t) {
+			e instanceof HTMLButtonElement && (v.value[t] = e);
+		}
+		let b = t(() => g.tabs.findIndex((e) => e.value === g.modelValue));
+		function x(e) {
+			return !e.disabled;
+		}
+		async function S(e, t = !1) {
+			let n = g.tabs[e];
+			!n || !x(n) || (n.value !== g.modelValue && _("update:modelValue", n.value), t && (await o(), v.value[e]?.focus()));
+		}
+		function C(e, t) {
+			let n = g.tabs.length;
+			if (n === 0) return -1;
+			let r = e;
+			for (let e = 0; e < n; e++) {
+				r = (r + t + n) % n;
+				let e = g.tabs[r];
+				if (e && x(e)) return r;
+			}
+			return -1;
+		}
+		function w() {
+			return g.tabs.findIndex(x);
+		}
+		function T() {
+			for (let e = g.tabs.length - 1; e >= 0; e--) {
+				let t = g.tabs[e];
+				if (t && x(t)) return e;
+			}
+			return -1;
+		}
+		function E(e) {
+			if (g.tabs.length === 0) return;
+			let t = b.value < 0 ? 0 : b.value, n = -1;
+			switch (e.key) {
+				case "ArrowRight":
+					n = C(t, 1);
+					break;
+				case "ArrowLeft":
+					n = C(t, -1);
+					break;
+				case "Home":
+					n = w();
+					break;
+				case "End":
+					n = T();
+					break;
+				default: return;
+			}
+			n < 0 || (e.preventDefault(), S(n, !0));
+		}
+		function D(e) {
+			x(e) && e.value !== g.modelValue && _("update:modelValue", e.value);
+		}
+		return (t, o) => (c(), r("div", {
+			role: "tablist",
+			"data-ds-tabs": "",
+			class: "inline-flex flex-wrap gap-1 rounded-[var(--ds-radius-lg)] border border-[var(--brd)] bg-[var(--muted)] p-1",
+			onKeydown: E
+		}, [(c(!0), r(e, null, u(a.tabs, (e, t) => (c(), r("button", {
+			key: e.value,
+			ref_for: !0,
+			ref: (e) => y(e, t),
+			type: "button",
+			role: "tab",
+			"data-ds-tab": "",
+			"aria-selected": e.value === a.modelValue ? "true" : "false",
+			"aria-disabled": e.disabled ? "true" : void 0,
+			disabled: e.disabled,
+			tabindex: e.value === a.modelValue ? 0 : -1,
+			class: s(["h-9 px-3 rounded-[10px] text-sm font-600 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:opacity-60 disabled:cursor-not-allowed", e.value === a.modelValue ? "bg-[var(--card)] text-[var(--fg)] border border-[var(--brd)]" : "text-[var(--muted-fg)] hover:text-[var(--fg)] hover:bg-[color-mix(in_srgb,var(--card)_70%,transparent)]"]),
+			onClick: (t) => D(e)
+		}, [i("span", p, [i("span", null, d(e.label), 1), e.badge ? (c(), r("span", m, d(e.badge), 1)) : n("", !0)])], 10, f))), 128))], 32));
+	}
+});
+//#endregion
+export { h as t };

package/dist/components/DsTabs/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../chunks/DsTabs-B1kkklFS.js";
-import { n as t, t as n } from "../../chunks/config-BusLdkqX.js";
-export { e as DsTabs, e as default, n as dsTabsConfig, t as dsTabsSafelist };
+import { t as e } from "./chunks/DsTabs-FLWaGtbo.js";
+import { t } from "../../chunks/config-B36QoWkx2.js";
+export { e as DsTabs, e as default, t as dsTabsConfig };

package/dist/{chunks/DsTextarea-DVSsoqi3.js → components/DsTextarea/chunks/DsTextarea-D61wwTwK.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./config-B75oSW74.js";
+import { r as e } from "../../../chunks/config-CzEeKJ6F2.js";
 import { computed as t, createElementBlock as n, defineComponent as r, normalizeClass as i, openBlock as a } from "vue";
 //#region src/components/DsTextarea/DsTextarea.vue?vue&type=script&setup=true&lang.ts
 var o = [
@@ -39,14 +39,15 @@ var o = [
 			l("update:modelValue", e.target.value);
 		}
 		return (e, t) => (a(), n("textarea", {
-			id: c.id,
-			name: c.name,
-			rows: c.rows,
-			autocomplete: c.autocomplete,
-			placeholder: c.placeholder,
-			disabled: c.disabled,
-			value: c.modelValue,
-			"aria-invalid": c.invalid ? "true" : void 0,
+			id: r.id,
+			"data-ds-textarea": "",
+			name: r.name,
+			rows: r.rows,
+			autocomplete: r.autocomplete,
+			placeholder: r.placeholder,
+			disabled: r.disabled,
+			value: r.modelValue,
+			"aria-invalid": r.invalid ? "true" : void 0,
 			class: i(["w-full rounded-md border bg-[var(--bg)] px-3 py-2 text-[14px] text-[var(--fg)] placeholder:text-[var(--muted-fg)] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:opacity-50 disabled:cursor-not-allowed", u.value]),
 			onInput: d
 		}, null, 42, o));

package/dist/components/DsTextarea/index.js

@@ -1,3 +1,3 @@
-import { r as e, t } from "../../chunks/config-B75oSW74.js";
-import { t as n } from "../../chunks/DsTextarea-DVSsoqi3.js";
+import { n as e, t } from "../../chunks/config-CzEeKJ6F2.js";
+import { t as n } from "./chunks/DsTextarea-D61wwTwK.js";
 export { n as DsTextarea, n as default, t as dsTextareaConfig, e as dsTextareaSafelist };