@feugene/granularity 0.1.0

package/dist/chunks/DsDrawer-gmVF_0I0.js

@@ -0,0 +1,112 @@
+import { t as e } from "./x-dGjszOU2.js";
+import { t } from "./DsButton-CA18Fha-.js";
+import { a as n, i as r, n as i, r as a, t as o } from "./transition-CT9vsWnT.js";
+import { n as s, r as c } from "./config-G7h6ftb62.js";
+import { Teleport as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, openBlock as y, renderSlot as b, toDisplayString as x, unref as S, withCtx as C, withKeys as w, withModifiers as T } from "vue";
+//#region src/components/DsDrawer/DsDrawer.vue?vue&type=script&setup=true&lang.ts
+var E = { class: "fixed inset-0" }, D = { class: "px-5 py-4 border-b border-[var(--brd)] flex items-center justify-between gap-4" }, O = { class: "flex-1 overflow-y-auto" }, k = { class: "p-5" }, A = {
+	key: 0,
+	class: "px-5 py-4 border-t border-[var(--brd)]"
+}, j = /* @__PURE__ */ _({
+	__name: "DsDrawer",
+	props: {
+		modelValue: { type: Boolean },
+		title: { default: void 0 },
+		closeOnBackdrop: {
+			type: Boolean,
+			default: !0
+		},
+		side: { default: "right" },
+		size: { default: "md" }
+	},
+	emits: ["update:modelValue"],
+	setup(_, { emit: j }) {
+		let M = _, N = j, P = u(() => M.modelValue), F = u(() => s({
+			side: M.side,
+			size: M.size
+		})), I = u(() => c(M.side));
+		function L() {
+			N("update:modelValue", !1);
+		}
+		function R() {
+			M.closeOnBackdrop && L();
+		}
+		function z() {
+			M.closeOnBackdrop && L();
+		}
+		return (s, c) => (y(), d(l, { to: "body" }, [g(S(o), {
+			show: P.value,
+			as: "template"
+		}, {
+			default: C(() => [g(S(n), {
+				as: "div",
+				class: "fixed inset-0 z-50",
+				static: !0,
+				onClose: R,
+				onKeydown: w(T(L, ["stop", "prevent"]), ["esc"])
+			}, {
+				default: C(() => [m("div", E, [g(S(i), {
+					as: "template",
+					enter: "duration-200 ease-out",
+					"enter-from": "opacity-0",
+					"enter-to": "opacity-100",
+					leave: "duration-150 ease-in",
+					"leave-from": "opacity-100",
+					"leave-to": "opacity-0"
+				}, {
+					default: C(() => [m("div", {
+						"data-ds-drawer-overlay": "",
+						class: "fixed inset-0 bg-black/40",
+						"aria-hidden": "true",
+						onClick: z
+					})]),
+					_: 1
+				}), g(S(i), {
+					as: "template",
+					enter: "duration-200 ease-out",
+					"enter-from": I.value,
+					"enter-to": "translate-x-0",
+					leave: "duration-150 ease-in",
+					"leave-from": "translate-x-0",
+					"leave-to": I.value
+				}, {
+					default: C(() => [g(S(a), {
+						"data-ds-drawer-panel": "",
+						tabindex: "-1",
+						class: v(["fixed inset-y-0 flex flex-col", F.value])
+					}, {
+						default: C(() => [
+							m("div", D, [g(S(r), {
+								as: "div",
+								class: "text-[14px] font-700 min-w-0 truncate"
+							}, {
+								default: C(() => [b(s.$slots, "title", {}, () => [h(x(M.title ?? "Drawer"), 1)])]),
+								_: 3
+							}), g(t, {
+								variant: "ghost",
+								size: "sm",
+								square: "",
+								"aria-label": "Close",
+								onClick: L
+							}, {
+								default: C(() => [g(S(e), {
+									class: "h-4 w-4",
+									"aria-hidden": "true"
+								})]),
+								_: 1
+							})]),
+							m("div", O, [m("div", k, [b(s.$slots, "default")])]),
+							s.$slots.footer ? (y(), p("div", A, [b(s.$slots, "footer")])) : f("", !0)
+						]),
+						_: 3
+					}, 8, ["class"])]),
+					_: 3
+				}, 8, ["enter-from", "leave-to"])])]),
+				_: 3
+			}, 8, ["onKeydown"])]),
+			_: 3
+		}, 8, ["show"])]));
+	}
+});
+//#endregion
+export { j as t };

package/dist/chunks/DsDropdown-BcFjxaMe.js

@@ -0,0 +1,106 @@
+import { vClickOutside as e } from "../directives/clickOutside.js";
+import { i as t, n, t as r } from "./dsDropdownStyles-DXGN-A-d.js";
+import { Teleport as i, Transition as a, computed as o, createBlock as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, normalizeStyle as p, onUnmounted as m, openBlock as h, ref as g, renderSlot as _, unref as v, vShow as y, watch as b, withCtx as x, withDirectives as S } from "vue";
+//#endregion
+//#region src/components/DsDropdown/DsDropdown.vue
+var C = /* @__PURE__ */ d({
+	__name: "DsDropdown",
+	props: {
+		align: { default: "right" },
+		width: { default: "48" },
+		closeOnContentClick: {
+			type: Boolean,
+			default: !0
+		},
+		contentClass: { default: "" },
+		teleportTo: { default: "body" }
+	},
+	setup(d) {
+		let C = d, w = g(!1), T = g(null), E = g(null), D = [() => E.value], O = g({
+			left: "0px",
+			top: "0px",
+			zIndex: "2147483647"
+		}), k = 0;
+		function A() {
+			typeof window > "u" || (k &&= (window.cancelAnimationFrame(k), 0));
+		}
+		function j() {
+			if (typeof window > "u") return;
+			let e = T.value;
+			if (!e) return;
+			let t = e.getBoundingClientRect();
+			O.value = {
+				left: `${C.align === "right" ? t.right : C.align === "center" ? t.left + t.width / 2 : t.left}px`,
+				top: `${t.bottom + 8}px`,
+				zIndex: "2147483647"
+			};
+		}
+		function M() {
+			typeof window > "u" || (k ||= window.requestAnimationFrame(() => {
+				k = 0, w.value && j();
+			}));
+		}
+		function N() {
+			typeof window > "u" || (window.addEventListener("resize", M), window.addEventListener("scroll", M, !0));
+		}
+		function P() {
+			typeof window > "u" || (window.removeEventListener("resize", M), window.removeEventListener("scroll", M, !0));
+		}
+		function F() {
+			w.value = !w.value;
+		}
+		function I() {
+			w.value = !1;
+		}
+		function L(e) {
+			e.key === "Escape" && I();
+		}
+		b(w, (e) => {
+			typeof document > "u" || (document.removeEventListener("keydown", L), P(), A(), e && document.addEventListener("keydown", L), e && (N(), j()));
+		}, { immediate: !0 }), b(() => C.align, () => {
+			w.value && M();
+		}), m(() => {
+			typeof document > "u" || (document.removeEventListener("keydown", L), P(), A());
+		});
+		let R = o(() => t(C.width)), z = o(() => n(C.contentClass)), B = o(() => [
+			"fixed z-50",
+			R.value,
+			r(C.align)
+		].filter(Boolean));
+		function V() {
+			C.closeOnContentClick && I();
+		}
+		return (t, n) => (h(), c("div", null, [S((h(), c("div", {
+			ref_key: "rootEl",
+			ref: T,
+			class: "inline-block max-w-full",
+			onClick: F
+		}, [_(t.$slots, "trigger", {
+			open: w.value,
+			toggle: F,
+			close: I
+		})])), [[v(e), {
+			handler: I,
+			enabled: w.value,
+			exclude: D
+		}]]), (h(), s(i, { to: C.teleportTo }, [u(a, {
+			"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: x(() => [S(l("div", {
+				ref_key: "panelEl",
+				ref: E,
+				class: f(B.value),
+				style: p(O.value),
+				onClick: V
+			}, [l("div", { class: f(z.value) }, [_(t.$slots, "content", { close: I })], 2)], 6), [[y, w.value]])]),
+			_: 3
+		})], 8, ["to"]))]));
+	}
+});
+//#endregion
+export { C as t };

package/dist/chunks/DsDropdownMenu-CA7259h5.js

@@ -0,0 +1,218 @@
+import { t as e } from "./DsDropdown-BcFjxaMe.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, mergeProps as u, normalizeClass as d, normalizeProps as f, openBlock as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, useAttrs as v, useSlots as y, withCtx as b } from "vue";
+//#endregion
+//#region src/components/DsDropdownMenu/DsDropdownMenuList.vue
+var x = /* @__PURE__ */ c({
+	__name: "DsDropdownMenuList",
+	props: {
+		dividers: {
+			type: Boolean,
+			default: !1
+		},
+		borderTop: {
+			type: Boolean,
+			default: !1
+		},
+		borderBottom: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let n = e, r = t(() => [
+			"w-full",
+			n.dividers ? "divide-y divide-[var(--brd)]" : "",
+			n.borderTop ? "border-t border-[var(--brd)]" : "",
+			n.borderBottom ? "border-b border-[var(--brd)]" : ""
+		].filter(Boolean).join(" "));
+		return (e, t) => (p(), i("div", { class: d(r.value) }, [m(e.$slots, "default")], 2));
+	}
+}), S = /* @__PURE__ */ c({
+	__name: "DsDropdownMenu",
+	props: {
+		align: { default: "right" },
+		width: { default: "48" },
+		closeOnContentClick: {
+			type: Boolean,
+			default: !0
+		},
+		contentClass: { default: "p-0" },
+		dividers: {
+			type: Boolean,
+			default: !1
+		},
+		borderTop: {
+			type: Boolean,
+			default: !1
+		},
+		borderBottom: {
+			type: Boolean,
+			default: !1
+		},
+		listClass: { default: "" }
+	},
+	setup(t) {
+		let r = t;
+		return (t, i) => (p(), n(e, {
+			align: r.align,
+			width: r.width,
+			"close-on-content-click": r.closeOnContentClick,
+			"content-class": r.contentClass
+		}, {
+			trigger: b((e) => [m(t.$slots, "trigger", f(l(e)))]),
+			content: b((e) => [s(x, {
+				dividers: r.dividers,
+				"border-top": r.borderTop,
+				"border-bottom": r.borderBottom,
+				class: d(r.listClass)
+			}, {
+				default: b(() => [m(t.$slots, "default", f(l(e)))]),
+				_: 2
+			}, 1032, [
+				"dividers",
+				"border-top",
+				"border-bottom",
+				"class"
+			])]),
+			_: 3
+		}, 8, [
+			"align",
+			"width",
+			"close-on-content-click",
+			"content-class"
+		]));
+	}
+}), C = /* @__PURE__ */ c({
+	__name: "DsDropdownMenuColumn",
+	props: { align: { default: "center" } },
+	setup(e) {
+		let t = {
+			left: "justify-start text-left",
+			center: "justify-center text-center",
+			right: "justify-end text-right"
+		};
+		return (n, r) => (p(), i("div", { class: d(["px-3 py-2 flex items-center", t[e.align]]) }, [m(n.$slots, "default")], 2));
+	}
+}), w = /* @__PURE__ */ c({
+	__name: "DsDropdownMenuColumns",
+	props: { cols: { default: 2 } },
+	setup(e) {
+		let n = e, r = t(() => ({
+			2: "grid-cols-2",
+			3: "grid-cols-3",
+			4: "grid-cols-4"
+		})[n.cols]);
+		return (e, t) => (p(), i("div", { class: d(["w-full grid divide-x divide-[var(--brd)]", r.value]) }, [m(e.$slots, "default")], 2));
+	}
+}), T = /* @__PURE__ */ c({
+	__name: "DsDropdownMenuDivider",
+	props: { inset: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(e) {
+		return (t, n) => (p(), i("div", {
+			role: "separator",
+			class: d(["border-t border-[var(--brd)]", e.inset ? "mx-2" : ""])
+		}, null, 2));
+	}
+}), E = /* @__PURE__ */ c({
+	__name: "DsDropdownMenuHeader",
+	props: {
+		title: { default: void 0 },
+		align: { default: "left" },
+		uppercase: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		let n = e, a = y(), s = t(() => !!n.title || !!a.default), c = t(() => ({
+			left: "text-left",
+			center: "text-center",
+			right: "text-right"
+		})[n.align]);
+		return (e, t) => s.value ? (p(), i("div", {
+			key: 0,
+			class: d(["px-4 py-2 text-[11px] tracking-wide text-[var(--muted-fg)]", [c.value, { uppercase: n.uppercase }]])
+		}, [m(e.$slots, "default", {}, () => [o(g(n.title), 1)])], 2)) : r("", !0);
+	}
+}), D = { class: "w-full" }, O = /* @__PURE__ */ c({
+	__name: "DsDropdownMenuGroup",
+	props: {
+		title: { default: void 0 },
+		titleAlign: { default: "left" },
+		dividers: {
+			type: Boolean,
+			default: !1
+		},
+		uppercase: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		let o = e, s = t(() => ["w-full", o.dividers ? "divide-y divide-[var(--brd)]" : ""].filter(Boolean).join(" "));
+		return (e, t) => (p(), i("div", D, [o.title ? (p(), n(E, {
+			key: 0,
+			title: o.title,
+			align: o.titleAlign,
+			uppercase: o.uppercase
+		}, null, 8, [
+			"title",
+			"align",
+			"uppercase"
+		])) : r("", !0), a("div", { class: d(s.value) }, [m(e.$slots, "default")], 2)]));
+	}
+}), k = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "DsDropdownMenuItem",
+	props: {
+		as: { default: "button" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		align: { default: "left" },
+		variant: { default: "default" }
+	},
+	setup(e) {
+		let r = e, i = v(), a = t(() => r.as === "button" || r.as === void 0), o = t(() => ({
+			left: "justify-start text-left",
+			center: "justify-center text-center",
+			right: "justify-end text-right"
+		})[r.align]), s = t(() => r.variant === "danger" ? "text-[var(--ds-danger)]" : "text-[var(--fg)]"), c = t(() => r.disabled ? "cursor-not-allowed opacity-60 pointer-events-none" : ""), l = t(() => r.disabled ? "" : "hover:bg-[var(--accent)] hover:text-[var(--accent-fg)]"), d = t(() => [
+			"w-full min-h-[40px] px-4 py-2.5",
+			"flex items-center gap-2",
+			"text-[13px]",
+			"transition-colors duration-150",
+			"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
+			o.value,
+			s.value,
+			l.value,
+			c.value
+		].filter(Boolean).join(" "));
+		function f(e) {
+			r.disabled && (e.preventDefault(), e.stopPropagation());
+		}
+		return (e, t) => (p(), n(h(r.as), u(_(i), {
+			class: d.value,
+			type: a.value ? _(i).type ?? "button" : void 0,
+			disabled: a.value ? r.disabled : void 0,
+			"aria-disabled": r.disabled ? "true" : void 0,
+			tabindex: r.disabled ? -1 : _(i).tabindex,
+			onClickCapture: f
+		}), {
+			default: b(() => [m(e.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"class",
+			"type",
+			"disabled",
+			"aria-disabled",
+			"tabindex"
+		]));
+	}
+});
+//#endregion
+export { w as a, x as c, T as i, O as n, C as o, E as r, S as s, k as t };

package/dist/chunks/DsEmptyState-BdLoQ0-z.js

@@ -0,0 +1,46 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, markRaw as a, openBlock as o, renderSlot as s, toDisplayString as c, unref as l } from "vue";
+//#region ~icons/lucide/inbox
+var u = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function d(e, r) {
+	return o(), t("svg", u, [...r[0] ||= [n("g", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2"
+	}, [n("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }), n("path", { d: "M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11" })], -1)]]);
+}
+var f = a({
+	name: "lucide-inbox",
+	render: d
+}), p = { class: "rounded-[var(--ds-radius-lg)] border border-[var(--brd)] bg-[var(--card)] p-6 text-center" }, m = { class: "flex justify-center" }, h = { class: "h-12 w-12 rounded-[12px] bg-[var(--muted)] border border-[var(--brd)] flex items-center justify-center" }, g = { class: "mt-4 text-[14px] font-700" }, _ = {
+	key: 0,
+	class: "mt-1 text-[13px] text-[var(--muted-fg)]"
+}, v = {
+	key: 1,
+	class: "mt-4 flex justify-center"
+}, y = /* @__PURE__ */ i({
+	__name: "DsEmptyState",
+	props: {
+		title: {},
+		description: { default: void 0 }
+	},
+	setup(i) {
+		let a = i;
+		return (i, u) => (o(), t("div", p, [
+			n("div", m, [n("div", h, [r(l(f), {
+				class: "h-6 w-6 text-[var(--muted-fg)]",
+				"aria-hidden": "true"
+			})])]),
+			n("div", g, c(a.title), 1),
+			a.description ? (o(), t("div", _, c(a.description), 1)) : e("", !0),
+			i.$slots.default ? (o(), t("div", v, [s(i.$slots, "default")])) : e("", !0)
+		]));
+	}
+});
+//#endregion
+export { y as t };