iryx-ui 0.11.0 → 0.13.0

package/dist/components/Kbd.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,41 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { parseHotkey as t, useApplePlatform as n } from "../composables/kbd.js";
+import { kbdTheme as r } from "../theme/kbd.js";
+import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderList as p, renderSlot as m, toDisplayString as h } from "vue";
+//#region src/components/Kbd.vue?vue&type=script&setup=true&lang.ts
+var g = ["aria-label"], _ = /*@__PURE__*/ u({
+	__name: "Kbd",
+	props: {
+		keys: { default: () => [] },
+		size: {},
+		joined: { type: Boolean },
+		ariaLabel: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(u) {
+		let _ = u, v = n(), y = a(() => t(_.keys, v.value)), b = a(() => _.ariaLabel ?? y.value.map((e) => e.spoken).join(" ")), x = e(), S = a(() => _.unstyled ?? x.unstyled), C = a(() => r({ size: _.size }));
+		function w(e, t) {
+			let n = [_.ui?.[e], t].filter(Boolean).join(" ");
+			return S.value ? n : C.value[e]({ class: n });
+		}
+		return (e, t) => (f(), s("span", {
+			class: d(w("root", _.class)),
+			role: "img",
+			"aria-label": b.value
+		}, [(f(!0), s(i, null, p(y.value, (t, n) => (f(), s(i, { key: n }, [_.joined && n > 0 ? (f(), s("span", {
+			key: 0,
+			class: d(w("separator")),
+			"aria-hidden": "true"
+		}, "+", 2)) : o("", !0), c("kbd", {
+			class: d(w("key")),
+			"aria-hidden": "true"
+		}, [m(e.$slots, "key", { item: t }, () => [l(h(t.symbol), 1)])], 2)], 64))), 128))], 10, g));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/components/LineChart.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { useIryxUiConfig as e } from "../config.js";
-import { cartesianLayout as t, clampTooltip as n, seriesColor as r, slotOf as i, warnOnSlotOverflow as a } from "../composables/cartesian.js";
-import { useElementSize as o } from "../composables/element-size.js";
+import { useElementSize as t } from "../composables/element-size.js";
+import { cartesianLayout as n, clampTooltip as r, seriesColor as i, slotOf as a, warnOnSlotOverflow as o } from "../composables/cartesian.js";
 import ee from "./ChartLegend.js";
 import { lineChartTheme as s } from "../theme/line-chart.js";
 import { Fragment as c, computed as l, createBlock as te, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, guardReactiveProps as m, normalizeClass as h, normalizeProps as g, normalizeStyle as _, openBlock as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, unref as C } from "vue";
@@ -56,19 +56,19 @@ var w = ["role", "aria-label"], T = [
 		ui: {}
 	},
 	setup(p) {
-		let N = p, ae = e(), P = l(() => N.unstyled ?? ae.unstyled), F = y(), { width: I } = o(F), L = l(() => new Intl.NumberFormat(N.locale, N.format));
+		let N = p, ae = e(), P = l(() => N.unstyled ?? ae.unstyled), F = y(), { width: I } = t(F), L = l(() => new Intl.NumberFormat(N.locale, N.format));
 		function R(e) {
 			return L.value.format(e);
 		}
 		let z = l(() => {
 			let e = N.series?.length ? [...N.series] : [{ key: "value" }];
-			return a(e.length), e;
+			return o(e.length), e;
 		}), B = l(() => z.value.length > 1), V = l(() => B.value || N.legend && z.value[0].name != null);
 		function H(e, t) {
 			let n = e[t];
 			return typeof n == "number" && Number.isFinite(n) ? n : null;
 		}
-		let U = l(() => t({
+		let U = l(() => n({
 			values: N.data.flatMap((e) => z.value.map((t) => H(e, t.key))),
 			categories: N.data.length,
 			longestLabel: Math.max(...N.data.map((e) => e.label.length), 1),
@@ -83,21 +83,21 @@ var w = ["role", "aria-label"], T = [
 			return Math.round(e * 100) / 100;
 		}
 		let G = l(() => I.value ? z.value.map((e, t) => {
-			let n = [], a = [];
-			return N.data.forEach((t, r) => {
-				let i = H(t, e.key);
-				if (i == null) {
-					a.length && n.push(a), a = [];
+			let n = [], r = [];
+			return N.data.forEach((t, i) => {
+				let a = H(t, e.key);
+				if (a == null) {
+					r.length && n.push(r), r = [];
 					return;
 				}
-				a.push({
-					x: W(U.value.bandCentre(r)),
-					y: W(U.value.y(i)),
-					index: r
+				r.push({
+					x: W(U.value.bandCentre(i)),
+					y: W(U.value.y(a)),
+					index: i
 				});
-			}), a.length && n.push(a), {
+			}), r.length && n.push(r), {
 				runs: n,
-				color: r(i(e, t)),
+				color: i(a(e, t)),
 				seriesIndex: t
 			};
 		}) : []), K = l(() => N.variant === "area" && !B.value && G.value.length > 0);
@@ -123,19 +123,19 @@ var w = ["role", "aria-label"], T = [
 			if (!e) return;
 			let t = z.value.map((t, n) => ({
 				name: t.name ?? t.key,
-				color: r(i(t, n)),
+				color: i(a(t, n)),
 				value: H(e, t.key)
 			})).filter((e) => e.value != null).map((e) => ({
 				...e,
 				value: R(e.value)
 			}));
 			if (!t.length) return;
-			let a = B.value ? Math.max(e.label.length, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2;
+			let n = B.value ? Math.max(e.label.length, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2;
 			return {
 				label: e.label,
 				rows: t,
 				multi: B.value,
-				x: n(U.value.bandCentre(J.value), "x".repeat(a), I.value),
+				x: r(U.value.bandCentre(J.value), "x".repeat(n), I.value),
 				y: Math.min(...Y.value.map((e) => e.y), U.value.plot.top + U.value.plot.height)
 			};
 		}), Q = l(() => s());

package/dist/components/Menubar.js

@@ -0,0 +1,5 @@
+import e from "./Menubar.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/Menubar.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/Menubar.vue.d.ts

@@ -0,0 +1,62 @@
+import type { DropdownMenuEntry } from '../composables/dropdown-menu';
+export interface MenubarMenuOption {
+    label: string;
+    /** Identifies the menu. Defaults to the label. */
+    value?: string;
+    disabled?: boolean;
+    /** The menu's entries, in the same shape `IDropdownMenu` takes. */
+    items?: DropdownMenuEntry[];
+}
+export interface MenubarProps {
+    menus?: MenubarMenuOption[];
+    /** Drop the container so the triggers sit directly on the page. */
+    bare?: boolean;
+    /** Wrap from the last menu back to the first when arrowing past the end. */
+    loop?: boolean;
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ trigger: 'px-4' }`. */
+    ui?: {
+        root?: string;
+        trigger?: string;
+        content?: string;
+        item?: string;
+        label?: string;
+        separator?: string;
+        subTrigger?: string;
+        subContent?: string;
+    };
+}
+/** Menus share the entry shape, renderer and panel styling with `IDropdownMenu`. */
+type __VLS_Props = MenubarProps;
+type __VLS_ModelProps = {
+    /** Which menu is open, by value. Empty string means none. */
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_20: {
+    menu: MenubarMenuOption;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    align: "start" | "center" | "end";
+    sideOffset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Menubar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,79 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { dropdownMenuTheme as t } from "../theme/dropdown-menu.js";
+import n from "./DropdownMenuItems.js";
+import { menubarTheme as r } from "../theme/menubar.js";
+import { Fragment as i, computed as a, createBlock as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, useModel as v, withCtx as y } from "vue";
+import { MenubarContent as b, MenubarMenu as x, MenubarPortal as S, MenubarRoot as C, MenubarTrigger as w } from "reka-ui";
+//#region src/components/Menubar.vue?vue&type=script&setup=true&lang.ts
+var T = /*@__PURE__*/ u({
+	__name: "Menubar",
+	props: /*@__PURE__*/ d({
+		menus: {},
+		bare: { type: Boolean },
+		loop: { type: Boolean },
+		align: { default: "start" },
+		sideOffset: { default: 6 },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		modelValue: { default: void 0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(u) {
+		let d = u, T = v(u, "modelValue"), E = a(() => d.menus ?? []), D = (e) => e.value ?? e.label, O = e(), k = a(() => d.unstyled ?? O.unstyled), A = a(() => r({ bare: d.bare })), j = a(() => k.value ? [d.ui?.root, d.class] : A.value.root({ class: [d.ui?.root, d.class] })), M = a(() => k.value ? d.ui?.trigger : A.value.trigger({ class: d.ui?.trigger })), N = a(() => k.value ? d.ui?.content : t().content({ class: d.ui?.content }));
+		return (e, t) => (p(), o(_(C), {
+			modelValue: T.value,
+			"onUpdate:modelValue": t[0] ||= (e) => T.value = e,
+			loop: d.loop,
+			class: f(j.value)
+		}, {
+			default: y(() => [(p(!0), s(i, null, m(E.value, (t) => (p(), o(_(x), {
+				key: D(t),
+				value: D(t)
+			}, {
+				default: y(() => [l(_(w), {
+					disabled: t.disabled,
+					class: f(M.value)
+				}, {
+					default: y(() => [h(e.$slots, "trigger", { menu: t }, () => [c(g(t.label), 1)])]),
+					_: 2
+				}, 1032, ["disabled", "class"]), l(_(S), null, {
+					default: y(() => [l(_(b), {
+						align: d.align,
+						"side-offset": d.sideOffset,
+						class: f(N.value)
+					}, {
+						default: y(() => [l(n, {
+							entries: t.items ?? [],
+							unstyled: k.value,
+							ui: d.ui
+						}, null, 8, [
+							"entries",
+							"unstyled",
+							"ui"
+						])]),
+						_: 2
+					}, 1032, [
+						"align",
+						"side-offset",
+						"class"
+					])]),
+					_: 2
+				}, 1024)]),
+				_: 2
+			}, 1032, ["value"]))), 128))]),
+			_: 3
+		}, 8, [
+			"modelValue",
+			"loop",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { T as default };

package/dist/components/NavigationMenu.js

@@ -0,0 +1,5 @@
+import e from "./NavigationMenu.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/NavigationMenu.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/NavigationMenu.vue.d.ts

@@ -0,0 +1,75 @@
+import type { NavigationMenuEntry, NavigationMenuGroupItem, NavigationMenuLinkItem } from '../composables/navigation-menu';
+export interface NavigationMenuProps {
+    /** Top-level entries. An entry with `items` opens a panel. */
+    items?: NavigationMenuEntry[];
+    orientation?: 'horizontal' | 'vertical';
+    /** Columns in a panel. An entry can override this with its own `columns`. */
+    columns?: 1 | 2 | 3;
+    /**
+     * Accessible name for the navigation landmark — override for non-English
+     * apps.
+     */
+    label?: string;
+    /** Milliseconds a pointer must rest on a trigger before its panel opens. */
+    delayDuration?: number;
+    /** Open panels on click only, for touch-first apps. */
+    disableHoverTrigger?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ viewport: 'w-96' }`. */
+    ui?: {
+        root?: string;
+        list?: string;
+        item?: string;
+        link?: string;
+        triggerIcon?: string;
+        viewportWrapper?: string;
+        viewport?: string;
+        content?: string;
+        panelLink?: string;
+        panelLabel?: string;
+        panelDescription?: string;
+        panelIcon?: string;
+    };
+}
+type __VLS_Props = NavigationMenuProps;
+type __VLS_ModelProps = {
+    /** Which panel is open, by entry value. Empty string means none. */
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {}, __VLS_28: {
+    item: NavigationMenuGroupItem;
+}, __VLS_46: {
+    item: NavigationMenuGroupItem;
+}, __VLS_81: {
+    item: NavigationMenuLinkItem;
+};
+type __VLS_Slots = {} & {
+    list?: (props: typeof __VLS_14) => any;
+} & {
+    trigger?: (props: typeof __VLS_28) => any;
+} & {
+    panel?: (props: typeof __VLS_46) => any;
+} & {
+    item?: (props: typeof __VLS_81) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    orientation: "horizontal" | "vertical";
+    label: string;
+    columns: 1 | 2 | 3;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NavigationMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,167 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { isNavigationGroup as n } from "../composables/navigation-menu.js";
+import { navigationMenuTheme as r } from "../theme/navigation-menu.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, normalizeClass as m, openBlock as h, renderList as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useModel as x, withCtx as S } from "vue";
+import { ArrowDown01Icon as C } from "@hugeicons/core-free-icons";
+import { NavigationMenuContent as w, NavigationMenuItem as T, NavigationMenuLink as E, NavigationMenuList as D, NavigationMenuRoot as O, NavigationMenuTrigger as k, NavigationMenuViewport as A } from "reka-ui";
+//#region src/components/NavigationMenu.vue?vue&type=script&setup=true&lang.ts
+var j = /*@__PURE__*/ f({
+	__name: "NavigationMenu",
+	props: /*@__PURE__*/ p({
+		items: {},
+		orientation: { default: "horizontal" },
+		columns: { default: 1 },
+		label: { default: "Main" },
+		delayDuration: {},
+		disableHoverTrigger: { type: Boolean },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		modelValue: { default: void 0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(f) {
+		let p = f, j = x(f, "modelValue"), M = e(), N = a(() => p.unstyled ?? M.unstyled), P = a(() => p.items ?? []), F = (e) => e.label, I = a(() => P.value.some(n)), L = a(() => r({ orientation: p.orientation }));
+		function R(e) {
+			let t = p.ui?.[e];
+			return N.value ? t : L.value[e]({ class: t });
+		}
+		function z(e) {
+			let t = p.ui?.content;
+			return N.value ? t : r({
+				orientation: p.orientation,
+				columns: e.columns ?? p.columns
+			}).content({ class: t });
+		}
+		let B = (e) => e.href ? "a" : "button";
+		function V(e, t) {
+			if (e.disabled) {
+				t.preventDefault();
+				return;
+			}
+			e.onSelect?.();
+		}
+		return (e, r) => (h(), o(b(O), {
+			modelValue: j.value,
+			"onUpdate:modelValue": r[0] ||= (e) => j.value = e,
+			orientation: p.orientation,
+			"delay-duration": p.delayDuration,
+			"disable-hover-trigger": p.disableHoverTrigger,
+			"aria-label": p.label,
+			class: m(N.value ? [p.ui?.root, p.class] : L.value.root({ class: [p.ui?.root, p.class] }))
+		}, {
+			default: S(() => [d(b(D), { class: m(R("list")) }, {
+				default: S(() => [_(e.$slots, "list", {}, () => [(h(!0), c(i, null, g(P.value, (r) => (h(), o(b(T), {
+					key: F(r),
+					value: F(r),
+					class: m(R("item"))
+				}, {
+					default: S(() => [b(n)(r) ? (h(), c(i, { key: 0 }, [d(b(k), {
+						disabled: r.disabled,
+						class: m(R("link"))
+					}, {
+						default: S(() => [_(e.$slots, "trigger", { item: r }, () => [
+							r.icon ? (h(), o(t, {
+								key: 0,
+								icon: r.icon
+							}, null, 8, ["icon"])) : s("", !0),
+							u(" " + y(r.label) + " ", 1),
+							d(t, {
+								icon: b(C),
+								class: m(R("triggerIcon"))
+							}, null, 8, ["icon", "class"])
+						])]),
+						_: 2
+					}, 1032, ["disabled", "class"]), d(b(w), { class: m(z(r)) }, {
+						default: S(() => [_(e.$slots, "panel", { item: r }, () => [(h(!0), c(i, null, g(r.items, (e) => (h(), o(b(E), {
+							key: e.label,
+							"as-child": "",
+							active: e.active,
+							onSelect: (t) => V(e, t)
+						}, {
+							default: S(() => [(h(), o(v(B(e)), {
+								href: e.href,
+								target: e.target,
+								type: e.href ? void 0 : "button",
+								"aria-current": e.active ? "page" : void 0,
+								"aria-disabled": e.disabled || void 0,
+								"data-disabled": e.disabled ? "" : void 0,
+								class: m(R("panelLink"))
+							}, {
+								default: S(() => [e.icon ? (h(), c("span", {
+									key: 0,
+									class: m(R("panelIcon"))
+								}, [d(t, { icon: e.icon }, null, 8, ["icon"])], 2)) : s("", !0), l("span", null, [l("span", { class: m(R("panelLabel")) }, y(e.label), 3), e.description ? (h(), c("span", {
+									key: 0,
+									class: m(R("panelDescription"))
+								}, y(e.description), 3)) : s("", !0)])]),
+								_: 2
+							}, 1032, [
+								"href",
+								"target",
+								"type",
+								"aria-current",
+								"aria-disabled",
+								"data-disabled",
+								"class"
+							]))]),
+							_: 2
+						}, 1032, ["active", "onSelect"]))), 128))])]),
+						_: 2
+					}, 1032, ["class"])], 64)) : (h(), o(b(E), {
+						key: 1,
+						"as-child": "",
+						active: r.active,
+						onSelect: (e) => V(r, e)
+					}, {
+						default: S(() => [(h(), o(v(B(r)), {
+							href: r.href,
+							target: r.target,
+							type: r.href ? void 0 : "button",
+							"aria-current": r.active ? "page" : void 0,
+							"aria-disabled": r.disabled || void 0,
+							"data-disabled": r.disabled ? "" : void 0,
+							class: m(R("link"))
+						}, {
+							default: S(() => [_(e.$slots, "item", { item: r }, () => [r.icon ? (h(), o(t, {
+								key: 0,
+								icon: r.icon
+							}, null, 8, ["icon"])) : s("", !0), u(" " + y(r.label), 1)])]),
+							_: 2
+						}, 1032, [
+							"href",
+							"target",
+							"type",
+							"aria-current",
+							"aria-disabled",
+							"data-disabled",
+							"class"
+						]))]),
+						_: 2
+					}, 1032, ["active", "onSelect"]))]),
+					_: 2
+				}, 1032, ["value", "class"]))), 128))])]),
+				_: 3
+			}, 8, ["class"]), I.value ? (h(), c("div", {
+				key: 0,
+				class: m(R("viewportWrapper"))
+			}, [d(b(A), { class: m(R("viewport")) }, null, 8, ["class"])], 2)) : s("", !0)]),
+			_: 3
+		}, 8, [
+			"modelValue",
+			"orientation",
+			"delay-duration",
+			"disable-hover-trigger",
+			"aria-label",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { j as default };