iryx-ui 0.12.0 → 0.14.0

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

@@ -0,0 +1,75 @@
+export interface PopoverProps {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    /** Render the little pointer against the trigger. */
+    arrow?: boolean;
+    /**
+     * Trap focus and make the rest of the page inert, as a dialog does. For a
+     * popover holding a form rather than a passing detail.
+     */
+    modal?: boolean;
+    /** Show a close button in the corner. */
+    showClose?: boolean;
+    /** Names that close button, since it is an icon on its own. */
+    closeLabel?: string;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** `none` lets the content size itself — for a grid or a menu. */
+    width?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * Heading shown above the content. It is also the only row inset to clear
+     * the close button, so the body below can fill the panel's full width.
+     */
+    title?: string;
+    /** Names the panel for a screen reader. Without one it is an unnamed dialog. */
+    ariaLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ content: 'w-96' }`. */
+    ui?: {
+        content?: string;
+        title?: string;
+        arrow?: string;
+        close?: string;
+    };
+}
+/**
+ * A panel anchored to whatever opened it, for content too big for a tooltip
+ * and too small for a dialog. Unlike `ITooltip` it takes focus and can hold
+ * interactive content; unlike `IDialog` it leaves the page usable behind it.
+ */
+type __VLS_Props = PopoverProps;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {}, __VLS_28: {}, __VLS_30: {
+    close: () => boolean;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_14) => any;
+} & {
+    title?: (props: typeof __VLS_28) => any;
+} & {
+    default?: (props: typeof __VLS_30) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    closeLabel: string;
+    align: "start" | "center" | "end";
+    side: "top" | "right" | "bottom" | "left";
+    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/Popover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,99 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { popoverTheme as n } from "../theme/popover.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, openBlock as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, withCtx as _ } from "vue";
+import { Cancel01Icon as v } from "@hugeicons/core-free-icons";
+import { PopoverArrow as y, PopoverClose as b, PopoverContent as x, PopoverPortal as S, PopoverRoot as C, PopoverTrigger as w } from "reka-ui";
+//#region src/components/Popover.vue?vue&type=script&setup=true&lang.ts
+var T = /*@__PURE__*/ l({
+	__name: "Popover",
+	props: /*@__PURE__*/ u({
+		side: { default: "bottom" },
+		align: { default: "center" },
+		sideOffset: { default: 6 },
+		arrow: { type: Boolean },
+		modal: { type: Boolean },
+		showClose: { type: Boolean },
+		closeLabel: { default: "Close" },
+		padding: {},
+		width: {},
+		title: {},
+		ariaLabel: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(l) {
+		let u = l, T = g(l, "open"), E = e(), D = r(() => u.unstyled ?? E.unstyled), O = r(() => n({
+			padding: u.padding,
+			width: u.width,
+			withClose: u.showClose
+		})), k = r(() => D.value ? [u.ui?.content, u.class] : O.value.content({ class: [
+			u.showClose && "relative",
+			u.ui?.content,
+			u.class
+		] })), A = r(() => D.value ? u.ui?.arrow : O.value.arrow({ class: u.ui?.arrow })), j = r(() => D.value ? u.ui?.close : O.value.close({ class: u.ui?.close })), M = r(() => D.value ? u.ui?.title : O.value.title({ class: u.ui?.title }));
+		return (e, n) => (f(), i(h(C), {
+			open: T.value,
+			"onUpdate:open": n[0] ||= (e) => T.value = e,
+			modal: u.modal
+		}, {
+			default: _(() => [c(h(w), { "as-child": "" }, {
+				default: _(() => [p(e.$slots, "trigger")]),
+				_: 3
+			}), c(h(S), null, {
+				default: _(() => [c(h(x), {
+					side: u.side,
+					align: u.align,
+					"side-offset": u.sideOffset,
+					"aria-label": u.ariaLabel,
+					class: d(k.value)
+				}, {
+					default: _(() => [
+						u.title || e.$slots.title ? (f(), o("p", {
+							key: 0,
+							class: d(M.value)
+						}, [p(e.$slots, "title", {}, () => [s(m(u.title), 1)])], 2)) : a("", !0),
+						p(e.$slots, "default", { close: () => T.value = !1 }),
+						u.showClose ? (f(), i(h(b), {
+							key: 1,
+							"data-popover-close": "",
+							"aria-label": u.closeLabel,
+							class: d(j.value)
+						}, {
+							default: _(() => [c(t, { icon: h(v) }, null, 8, ["icon"])]),
+							_: 1
+						}, 8, ["aria-label", "class"])) : a("", !0),
+						u.arrow ? (f(), i(h(y), {
+							key: 2,
+							class: d(A.value),
+							width: 10,
+							height: 5
+						}, null, 8, ["class"])) : a("", !0)
+					]),
+					_: 3
+				}, 8, [
+					"side",
+					"align",
+					"side-offset",
+					"aria-label",
+					"class"
+				])]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, ["open", "modal"]));
+	}
+});
+//#endregion
+export { T as default };

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

@@ -1,8 +1,22 @@
+export type ProgressVariant = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+export interface ProgressSegment {
+    /** Amount this run covers, on the same scale as `max`. */
+    value: number;
+    /** Named in the legend. Without one, no legend row is rendered for it. */
+    label?: string;
+    variant?: ProgressVariant;
+}
 export interface ProgressProps {
     /** Current value. `null` (or `indeterminate`) means unknown duration. */
     modelValue?: number | null;
     max?: number;
-    variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    variant?: ProgressVariant;
+    /**
+     * Break the bar into runs that share one track — storage by file type, a
+     * budget by category. Given `segments`, `modelValue` is ignored and the
+     * accessible value becomes their sum.
+     */
+    segments?: ProgressSegment[];
     size?: 'sm' | 'md' | 'lg';
     /** Unknown duration — animates instead of tracking a value. */
     indeterminate?: boolean;
@@ -26,6 +40,11 @@ export interface ProgressProps {
         value?: string;
         track?: string;
         indicator?: string;
+        segment?: string;
+        legend?: string;
+        legendItem?: string;
+        legendSwatch?: string;
+        legendValue?: string;
     };
 }
 declare var __VLS_1: {}, __VLS_3: {

package/dist/components/Progress.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,19 @@
 import { useIryxUiConfig as e } from "../config.js";
 import { progressTheme as t } from "../theme/progress.js";
-import { computed as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m, useSlots as h, withCtx as g } from "vue";
-import { ProgressIndicator as _, ProgressRoot as v, useId as y } from "reka-ui";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useSlots as y, withCtx as b } from "vue";
+import { ProgressIndicator as x, ProgressRoot as S, useId as C } from "reka-ui";
 //#region src/components/Progress.vue?vue&type=script&setup=true&lang.ts
-var b = ["id"], x = /*@__PURE__*/ s({
+var w = ["id"], T = {
+	key: 0,
+	class: "flex h-full w-full"
+}, E = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "Progress",
 	props: {
 		modelValue: {},
 		max: { default: 100 },
 		variant: {},
+		segments: {},
 		size: {},
 		indeterminate: { type: Boolean },
 		label: {},
@@ -22,47 +26,83 @@ var b = ["id"], x = /*@__PURE__*/ s({
 		class: {},
 		ui: {}
 	},
-	setup(s) {
-		let x = s, S = h(), C = y(), w = n(() => !!(x.label || S.label)), T = n(() => x.indeterminate || x.modelValue == null), E = n(() => T.value ? null : Math.min(Math.max(x.modelValue ?? 0, 0), x.max)), D = n(() => E.value == null ? 0 : E.value / x.max * 100), O = n(() => {
-			if (E.value != null) return x.formatValue ? x.formatValue(E.value, x.max) : `${Math.round(D.value)}%`;
-		}), k = n(() => !!(x.label || x.showValue && O.value)), A = e(), j = n(() => x.unstyled ?? A.unstyled), M = n(() => t({
-			variant: x.variant,
-			size: x.size,
-			indeterminate: T.value
-		})), N = n(() => j.value ? [x.ui?.root, x.class] : M.value.root({ class: [x.ui?.root, x.class] })), P = n(() => j.value ? x.ui?.header : M.value.header({ class: x.ui?.header })), F = n(() => j.value ? x.ui?.label : M.value.label({ class: x.ui?.label })), I = n(() => j.value ? x.ui?.value : M.value.value({ class: x.ui?.value })), L = n(() => j.value ? x.ui?.track : M.value.track({ class: x.ui?.track })), R = n(() => j.value ? x.ui?.indicator : M.value.indicator({ class: x.ui?.indicator })), z = n(() => T.value ? void 0 : { transform: `translateX(-${100 - D.value}%)` });
-		return (e, t) => (d(), i("div", { class: l(N.value) }, [k.value ? (d(), i("div", {
-			key: 0,
-			class: l(P.value)
-		}, [w.value ? (d(), i("span", {
-			key: 0,
-			id: m(C),
-			class: l(F.value)
-		}, [f(e.$slots, "label", {}, () => [a(p(x.label), 1)])], 10, b)) : r("", !0), x.showValue && O.value ? (d(), i("span", {
-			key: 1,
-			class: l(I.value)
-		}, [f(e.$slots, "value", {
-			value: E.value,
-			percent: D.value,
-			formatted: O.value
-		}, () => [a(p(O.value), 1)])], 2)) : r("", !0)], 2)) : r("", !0), o(m(v), c({
-			"model-value": E.value,
-			max: x.max,
-			"get-value-label": () => O.value ?? "",
-			"aria-labelledby": w.value ? m(C) : void 0
-		}, e.$attrs, { class: L.value }), {
-			default: g(() => [o(m(_), {
-				class: l(R.value),
-				style: u(z.value)
-			}, null, 8, ["class", "style"])]),
-			_: 1
-		}, 16, [
-			"model-value",
-			"max",
-			"get-value-label",
-			"aria-labelledby",
-			"class"
-		])], 2));
+	setup(u) {
+		let E = u, D = y(), O = C(), k = r(() => !!(E.label || D.label)), A = r(() => (E.segments?.length ?? 0) > 0), j = r(() => !A.value && (E.indeterminate || E.modelValue == null)), M = r(() => {
+			let e = 0;
+			return (E.segments ?? []).map((t) => {
+				let n = Math.max(t.value, 0), r = Math.max(E.max - e, 0), i = Math.min(n, r);
+				return e += i, {
+					...t,
+					value: n,
+					percent: E.max > 0 ? i / E.max * 100 : 0
+				};
+			});
+		}), N = r(() => M.value.reduce((e, t) => e + t.value, 0)), P = r(() => M.value.filter((e) => e.label)), F = r(() => j.value ? null : A.value ? Math.min(N.value, E.max) : Math.min(Math.max(E.modelValue ?? 0, 0), E.max)), I = r(() => F.value == null ? 0 : F.value / E.max * 100), L = r(() => {
+			if (F.value != null) return E.formatValue ? E.formatValue(F.value, E.max) : `${Math.round(I.value)}%`;
+		}), R = r(() => !!(E.label || E.showValue && L.value)), z = e(), B = r(() => E.unstyled ?? z.unstyled), V = r(() => t({
+			variant: E.variant,
+			size: E.size,
+			indeterminate: j.value
+		})), H = r(() => B.value ? [E.ui?.root, E.class] : V.value.root({ class: [E.ui?.root, E.class] })), U = r(() => B.value ? E.ui?.header : V.value.header({ class: E.ui?.header })), W = r(() => B.value ? E.ui?.label : V.value.label({ class: E.ui?.label })), G = r(() => B.value ? E.ui?.value : V.value.value({ class: E.ui?.value })), K = r(() => B.value ? E.ui?.track : V.value.track({ class: E.ui?.track })), q = r(() => B.value ? E.ui?.indicator : V.value.indicator({ class: E.ui?.indicator })), J = r(() => B.value ? E.ui?.legend : V.value.legend({ class: E.ui?.legend })), Y = r(() => B.value ? E.ui?.legendItem : V.value.legendItem({ class: E.ui?.legendItem })), X = r(() => B.value ? E.ui?.legendValue : V.value.legendValue({ class: E.ui?.legendValue }));
+		function Z(e) {
+			return B.value ? E.ui?.segment : t({ variant: e ?? "neutral" }).segment({ class: E.ui?.segment });
+		}
+		function Q(e) {
+			return B.value ? E.ui?.legendSwatch : t({ variant: e ?? "neutral" }).legendSwatch({ class: E.ui?.legendSwatch });
+		}
+		let $ = r(() => j.value ? void 0 : { transform: `translateX(-${100 - I.value}%)` });
+		return (e, t) => (m(), o("div", { class: f(H.value) }, [
+			R.value ? (m(), o("div", {
+				key: 0,
+				class: f(U.value)
+			}, [k.value ? (m(), o("span", {
+				key: 0,
+				id: v(O),
+				class: f(W.value)
+			}, [g(e.$slots, "label", {}, () => [c(_(E.label), 1)])], 10, w)) : a("", !0), E.showValue && L.value ? (m(), o("span", {
+				key: 1,
+				class: f(G.value)
+			}, [g(e.$slots, "value", {
+				value: F.value,
+				percent: I.value,
+				formatted: L.value
+			}, () => [c(_(L.value), 1)])], 2)) : a("", !0)], 2)) : a("", !0),
+			l(v(S), d({
+				"model-value": F.value,
+				max: E.max,
+				"get-value-label": () => L.value ?? "",
+				"aria-labelledby": k.value ? v(O) : void 0
+			}, e.$attrs, { class: K.value }), {
+				default: b(() => [A.value ? (m(), o("div", T, [(m(!0), o(n, null, h(M.value, (e, t) => (m(), o("div", {
+					key: e.label ?? t,
+					class: f(Z(e.variant)),
+					style: p({ width: `${e.percent}%` })
+				}, null, 6))), 128))])) : (m(), i(v(x), {
+					key: 1,
+					class: f(q.value),
+					style: p($.value)
+				}, null, 8, ["class", "style"]))]),
+				_: 1
+			}, 16, [
+				"model-value",
+				"max",
+				"get-value-label",
+				"aria-labelledby",
+				"class"
+			]),
+			P.value.length ? (m(), o("ul", {
+				key: 1,
+				class: f(J.value)
+			}, [(m(!0), o(n, null, h(P.value, (e, t) => (m(), o("li", {
+				key: e.label ?? t,
+				class: f(Y.value)
+			}, [
+				s("span", { class: f(Q(e.variant)) }, null, 2),
+				s("span", null, _(e.label), 1),
+				s("span", { class: f(X.value) }, _(E.formatValue ? E.formatValue(e.value, E.max) : `${Math.round(e.value / E.max * 100)}%`), 3)
+			], 2))), 128))], 2)) : a("", !0)
+		], 2));
 	}
 });
 //#endregion
-export { x as default };
+export { E as default };

package/dist/components/RadioGroup.vue_vue_type_script_setup_true_lang.js

@@ -33,7 +33,10 @@ var T = ["id"], E = /*@__PURE__*/ u({
 		}), O), A = r(() => (D.items ?? []).map((e) => typeof e == "string" ? {
 			label: e,
 			value: e
-		} : e)), j = w(), M = e(), N = r(() => D.unstyled ?? M.unstyled), P = r(() => t({ size: D.size })), F = r(() => N.value ? [D.ui?.root, D.class] : P.value.root({ class: [D.ui?.root, D.class] })), I = r(() => N.value ? D.ui?.item : P.value.item({ class: D.ui?.item })), L = r(() => N.value ? D.ui?.label : P.value.label({ class: D.ui?.label })), R = r(() => N.value ? D.ui?.description : P.value.description({ class: D.ui?.description }));
+		} : e)), j = w(), M = e(), N = r(() => D.unstyled ?? M.unstyled), P = r(() => t({
+			size: D.size,
+			orientation: D.orientation ?? "vertical"
+		})), F = r(() => N.value ? [D.ui?.root, D.class] : P.value.root({ class: [D.ui?.root, D.class] })), I = r(() => N.value ? D.ui?.item : P.value.item({ class: D.ui?.item })), L = r(() => N.value ? D.ui?.label : P.value.label({ class: D.ui?.label })), R = r(() => N.value ? D.ui?.description : P.value.description({ class: D.ui?.description }));
 		return (e, t) => (p(), i(_(S), d(_(k), { class: F.value }), {
 			default: v(() => [h(e.$slots, "default", {}, () => [(p(!0), o(n, null, m(A.value, (e) => (p(), o("div", {
 				key: e.value,

package/dist/components/ScrollArea.js

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

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

@@ -0,0 +1,41 @@
+export interface ScrollAreaProps {
+    /**
+     * When the bars show. `hover` is the quietest and `always` the most
+     * discoverable; `auto` behaves like a native bar that appears only when
+     * there is something to scroll.
+     */
+    type?: 'auto' | 'always' | 'scroll' | 'hover';
+    /** Which axes get a bar. */
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    size?: 'sm' | 'md' | 'lg';
+    /** How long the bars linger after scrolling stops, for `scroll` and `hover`. */
+    scrollHideDelay?: number;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ thumb: 'bg-primary' }`. */
+    ui?: {
+        root?: string;
+        viewport?: string;
+        scrollbar?: string;
+        thumb?: string;
+        corner?: string;
+    };
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ScrollAreaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollAreaProps> & Readonly<{}>, {
+    type: "auto" | "always" | "scroll" | "hover";
+    unstyled: boolean;
+    orientation: "vertical" | "horizontal" | "both";
+}, {}, {}, {}, 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/ScrollArea.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,68 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { scrollAreaTheme as t } from "../theme/scroll-area.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, unref as u, withCtx as d } from "vue";
+import { ScrollAreaCorner as f, ScrollAreaRoot as p, ScrollAreaScrollbar as m, ScrollAreaThumb as h, ScrollAreaViewport as g } from "reka-ui";
+//#region src/components/ScrollArea.vue?vue&type=script&setup=true&lang.ts
+var _ = /*@__PURE__*/ o({
+	__name: "ScrollArea",
+	props: {
+		type: { default: "hover" },
+		orientation: { default: "vertical" },
+		size: {},
+		scrollHideDelay: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(o) {
+		let _ = o, v = n(() => _.orientation !== "horizontal"), y = n(() => _.orientation !== "vertical"), b = e(), x = n(() => _.unstyled ?? b.unstyled), S = n(() => t({
+			orientation: "vertical",
+			size: _.size
+		})), C = n(() => t({
+			orientation: "horizontal",
+			size: _.size
+		})), w = n(() => x.value ? [_.ui?.root, _.class] : S.value.root({ class: [_.ui?.root, _.class] })), T = n(() => x.value ? _.ui?.viewport : S.value.viewport({ class: _.ui?.viewport })), E = n(() => x.value ? _.ui?.thumb : S.value.thumb({ class: _.ui?.thumb })), D = n(() => x.value ? _.ui?.corner : S.value.corner({ class: _.ui?.corner }));
+		return (e, t) => (c(), r(u(p), {
+			type: _.type,
+			"scroll-hide-delay": _.scrollHideDelay,
+			class: s(w.value)
+		}, {
+			default: d(() => [
+				a(u(g), { class: s(T.value) }, {
+					default: d(() => [l(e.$slots, "default")]),
+					_: 3
+				}, 8, ["class"]),
+				v.value ? (c(), r(u(m), {
+					key: 0,
+					orientation: "vertical",
+					class: s(x.value ? _.ui?.scrollbar : S.value.scrollbar({ class: _.ui?.scrollbar }))
+				}, {
+					default: d(() => [a(u(h), { class: s(E.value) }, null, 8, ["class"])]),
+					_: 1
+				}, 8, ["class"])) : i("", !0),
+				y.value ? (c(), r(u(m), {
+					key: 1,
+					orientation: "horizontal",
+					class: s(x.value ? _.ui?.scrollbar : C.value.scrollbar({ class: _.ui?.scrollbar }))
+				}, {
+					default: d(() => [a(u(h), { class: s(E.value) }, null, 8, ["class"])]),
+					_: 1
+				}, 8, ["class"])) : i("", !0),
+				_.orientation === "both" ? (c(), r(u(f), {
+					key: 2,
+					class: s(D.value)
+				}, null, 8, ["class"])) : i("", !0)
+			]),
+			_: 3
+		}, 8, [
+			"type",
+			"scroll-hide-delay",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/components/ScrollFade.js

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

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

@@ -0,0 +1,36 @@
+export interface ScrollFadeProps {
+    /** Which way it scrolls. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Length of the fade, as any CSS length. */
+    size?: string;
+    /** Never fade the leading edge, e.g. under a sticky header that hides it. */
+    fadeStart?: boolean;
+    /** Never fade the trailing edge. */
+    fadeEnd?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+}
+type __VLS_Slots = {
+    /** Receives the live edge state, for a caller who wants to react to it. */
+    default: (props: {
+        atStart: boolean;
+        atEnd: boolean;
+        overflowing: boolean;
+    }) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ScrollFadeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollFadeProps> & Readonly<{}>, {
+    size: string;
+    unstyled: boolean;
+    orientation: "vertical" | "horizontal";
+    fadeStart: boolean;
+    fadeEnd: boolean;
+}, {}, {}, {}, 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/ScrollFade.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { scrollFadeMask as t, useScrollEdges as n } from "../composables/scroll-fade.js";
+import { scrollFadeTheme as r } from "../theme/scroll-fade.js";
+import { computed as i, createElementBlock as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, ref as u, renderSlot as d, toRef as f, unref as p } from "vue";
+//#region src/components/ScrollFade.vue?vue&type=script&setup=true&lang.ts
+var m = [
+	"data-at-start",
+	"data-at-end",
+	"data-overflowing"
+], h = /*@__PURE__*/ o({
+	__name: "ScrollFade",
+	props: {
+		orientation: { default: "vertical" },
+		size: { default: "2rem" },
+		fadeStart: {
+			type: Boolean,
+			default: !0
+		},
+		fadeEnd: {
+			type: Boolean,
+			default: !0
+		},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {}
+	},
+	setup(o) {
+		let h = o, g = u(), { atStart: _, atEnd: v, overflowing: y } = n(g, f(h, "orientation")), b = i(() => {
+			if (!y.value) return;
+			let e = t({
+				orientation: h.orientation,
+				size: h.size,
+				fadeStart: h.fadeStart && !_.value,
+				fadeEnd: h.fadeEnd && !v.value
+			});
+			return e ? {
+				maskImage: e,
+				WebkitMaskImage: e
+			} : void 0;
+		}), x = e(), S = i(() => h.unstyled ?? x.unstyled), C = i(() => r({ orientation: h.orientation })), w = i(() => S.value ? h.class : C.value.root({ class: h.class }));
+		return (e, t) => (l(), a("div", {
+			ref_key: "root",
+			ref: g,
+			class: s(w.value),
+			style: c(b.value),
+			"data-at-start": p(_) ? "" : void 0,
+			"data-at-end": p(v) ? "" : void 0,
+			"data-overflowing": p(y) ? "" : void 0
+		}, [d(e.$slots, "default", {
+			atStart: p(_),
+			atEnd: p(v),
+			overflowing: p(y)
+		})], 14, m));
+	}
+});
+//#endregion
+export { h as default };

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

@@ -35,11 +35,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_48) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<SelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
     "update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<SelectProps> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     unstyled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/Sidebar.js

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