iryx-ui 0.24.1 → 0.26.0

package/dist/components/index.js

@@ -9,78 +9,78 @@ import s from "./AspectRatio.js";
 import c from "./Button.js";
 import l from "./AuthProviders.js";
 import u from "./Avatar.js";
-import d from "./AvatarGroup.js";
-import f from "./Badge.js";
-import p from "./Banner.js";
-import m from "./ChartLegend.js";
-import h from "./BarChart.js";
-import g from "./Breadcrumb.js";
-import _ from "./ButtonGroup.js";
-import v from "./Calendar.js";
-import y from "./Card.js";
-import b from "./Carousel.js";
-import x from "./Checkbox.js";
-import S from "./Code.js";
-import C from "./Collapsible.js";
-import w from "./ColorPicker.js";
-import T from "./Combobox.js";
-import E from "./Kbd.js";
-import D from "./CommandPalette.js";
-import O from "./Dialog.js";
-import k from "./ConfirmDialog.js";
-import A from "./Popover.js";
-import j from "./ConfirmPopover.js";
-import M from "./Container.js";
-import N from "./ContextMenu.js";
-import P from "./DateField.js";
-import F from "./DatePicker.js";
-import I from "./DateRangePicker.js";
-import L from "./DescriptionList.js";
-import R from "./DonutChart.js";
-import z from "./DropdownMenu.js";
-import B from "./Editable.js";
-import V from "./EmptyState.js";
-import H from "./FileUpload.js";
-import U from "./Form.js";
-import W from "./Label.js";
-import G from "./FormField.js";
-import K from "./HoverCard.js";
-import q from "./Input.js";
-import J from "./LineChart.js";
-import Y from "./Menubar.js";
-import X from "./NavigationMenu.js";
-import Z from "./NumberInput.js";
-import Q from "./PageHeader.js";
-import $ from "./Pagination.js";
-import ee from "./PasswordInput.js";
-import te from "./PinInput.js";
-import ne from "./Progress.js";
-import re from "./RadioGroup.js";
-import ie from "./Rating.js";
-import ae from "./ScrollArea.js";
-import oe from "./ScrollFade.js";
-import se from "./Select.js";
-import ce from "./Separator.js";
-import le from "./Sidebar.js";
-import ue from "./SignaturePad.js";
-import de from "./Skeleton.js";
-import fe from "./Slider.js";
-import pe from "./Sparkline.js";
-import me from "./Splitter.js";
-import he from "./Stat.js";
-import ge from "./Stepper.js";
-import _e from "./Switch.js";
-import ve from "./Table.js";
-import ye from "./Tabs.js";
-import be from "./TagsInput.js";
-import xe from "./Textarea.js";
-import Se from "./TimeField.js";
-import Ce from "./Timeline.js";
-import we from "./Toaster.js";
-import Te from "./Toggle.js";
-import Ee from "./ToggleGroup.js";
-import De from "./Toolbar.js";
-import Oe from "./Tooltip.js";
+import d from "./Tooltip.js";
+import f from "./AvatarGroup.js";
+import p from "./Badge.js";
+import m from "./Banner.js";
+import h from "./ChartLegend.js";
+import g from "./BarChart.js";
+import _ from "./DropdownMenu.js";
+import v from "./Breadcrumb.js";
+import y from "./ButtonGroup.js";
+import b from "./Calendar.js";
+import x from "./Card.js";
+import S from "./Carousel.js";
+import C from "./Checkbox.js";
+import w from "./Code.js";
+import T from "./Collapsible.js";
+import E from "./ColorPicker.js";
+import D from "./Combobox.js";
+import O from "./Kbd.js";
+import k from "./CommandPalette.js";
+import A from "./Dialog.js";
+import j from "./ConfirmDialog.js";
+import M from "./Popover.js";
+import N from "./ConfirmPopover.js";
+import P from "./Container.js";
+import F from "./ContextMenu.js";
+import I from "./DateField.js";
+import L from "./DatePicker.js";
+import R from "./DateRangePicker.js";
+import z from "./DescriptionList.js";
+import B from "./DonutChart.js";
+import V from "./Editable.js";
+import H from "./EmptyState.js";
+import U from "./Progress.js";
+import W from "./FileUpload.js";
+import G from "./Form.js";
+import K from "./Label.js";
+import q from "./FormField.js";
+import J from "./HoverCard.js";
+import Y from "./Input.js";
+import X from "./LineChart.js";
+import Z from "./Menubar.js";
+import Q from "./NavigationMenu.js";
+import $ from "./NumberInput.js";
+import ee from "./PageHeader.js";
+import te from "./Pagination.js";
+import ne from "./PasswordInput.js";
+import re from "./PinInput.js";
+import ie from "./RadioGroup.js";
+import ae from "./Rating.js";
+import oe from "./ScrollArea.js";
+import se from "./ScrollFade.js";
+import ce from "./Select.js";
+import le from "./Separator.js";
+import ue from "./Sidebar.js";
+import de from "./SignaturePad.js";
+import fe from "./Skeleton.js";
+import pe from "./Slider.js";
+import me from "./Sparkline.js";
+import he from "./Splitter.js";
+import ge from "./Stat.js";
+import _e from "./Stepper.js";
+import ve from "./Switch.js";
+import ye from "./Table.js";
+import be from "./Tabs.js";
+import xe from "./TagsInput.js";
+import Se from "./Textarea.js";
+import Ce from "./TimeField.js";
+import we from "./Timeline.js";
+import Te from "./Toaster.js";
+import Ee from "./Toggle.js";
+import De from "./ToggleGroup.js";
+import Oe from "./Toolbar.js";
 import ke from "./Tree.js";
 //#region src/components/index.ts
 var Ae = /* @__PURE__ */ e({
@@ -91,81 +91,81 @@ var Ae = /* @__PURE__ */ e({
 	AspectRatio: () => s,
 	AuthProviders: () => l,
 	Avatar: () => u,
-	AvatarGroup: () => d,
-	Badge: () => f,
-	Banner: () => p,
-	BarChart: () => h,
-	Breadcrumb: () => g,
+	AvatarGroup: () => f,
+	Badge: () => p,
+	Banner: () => m,
+	BarChart: () => g,
+	Breadcrumb: () => v,
 	Button: () => c,
-	ButtonGroup: () => _,
-	Calendar: () => v,
-	Card: () => y,
-	Carousel: () => b,
-	ChartLegend: () => m,
-	Checkbox: () => x,
-	Code: () => S,
-	Collapsible: () => C,
-	ColorPicker: () => w,
-	Combobox: () => T,
-	CommandPalette: () => D,
-	ConfirmDialog: () => k,
-	ConfirmPopover: () => j,
-	Container: () => M,
-	ContextMenu: () => N,
-	DateField: () => P,
-	DatePicker: () => F,
-	DateRangePicker: () => I,
-	DescriptionList: () => L,
-	Dialog: () => O,
-	DonutChart: () => R,
+	ButtonGroup: () => y,
+	Calendar: () => b,
+	Card: () => x,
+	Carousel: () => S,
+	ChartLegend: () => h,
+	Checkbox: () => C,
+	Code: () => w,
+	Collapsible: () => T,
+	ColorPicker: () => E,
+	Combobox: () => D,
+	CommandPalette: () => k,
+	ConfirmDialog: () => j,
+	ConfirmPopover: () => N,
+	Container: () => P,
+	ContextMenu: () => F,
+	DateField: () => I,
+	DatePicker: () => L,
+	DateRangePicker: () => R,
+	DescriptionList: () => z,
+	Dialog: () => A,
+	DonutChart: () => B,
 	Drawer: () => a,
-	DropdownMenu: () => z,
-	Editable: () => B,
-	EmptyState: () => V,
-	FileUpload: () => H,
-	Form: () => U,
-	FormField: () => G,
-	HoverCard: () => K,
+	DropdownMenu: () => _,
+	Editable: () => V,
+	EmptyState: () => H,
+	FileUpload: () => W,
+	Form: () => G,
+	FormField: () => q,
+	HoverCard: () => J,
 	Icon: () => t,
-	Input: () => q,
-	Kbd: () => E,
-	Label: () => W,
-	LineChart: () => J,
-	Menubar: () => Y,
-	NavigationMenu: () => X,
-	NumberInput: () => Z,
-	PageHeader: () => Q,
-	Pagination: () => $,
-	PasswordInput: () => ee,
-	PinInput: () => te,
-	Popover: () => A,
-	Progress: () => ne,
-	RadioGroup: () => re,
-	Rating: () => ie,
-	ScrollArea: () => ae,
-	ScrollFade: () => oe,
-	Select: () => se,
-	Separator: () => ce,
-	Sidebar: () => le,
-	SignaturePad: () => ue,
-	Skeleton: () => de,
-	Slider: () => fe,
-	Sparkline: () => pe,
-	Splitter: () => me,
-	Stat: () => he,
-	Stepper: () => ge,
-	Switch: () => _e,
-	Table: () => ve,
-	Tabs: () => ye,
-	TagsInput: () => be,
-	Textarea: () => xe,
-	TimeField: () => Se,
-	Timeline: () => Ce,
-	Toaster: () => we,
-	Toggle: () => Te,
-	ToggleGroup: () => Ee,
-	Toolbar: () => De,
-	Tooltip: () => Oe,
+	Input: () => Y,
+	Kbd: () => O,
+	Label: () => K,
+	LineChart: () => X,
+	Menubar: () => Z,
+	NavigationMenu: () => Q,
+	NumberInput: () => $,
+	PageHeader: () => ee,
+	Pagination: () => te,
+	PasswordInput: () => ne,
+	PinInput: () => re,
+	Popover: () => M,
+	Progress: () => U,
+	RadioGroup: () => ie,
+	Rating: () => ae,
+	ScrollArea: () => oe,
+	ScrollFade: () => se,
+	Select: () => ce,
+	Separator: () => le,
+	Sidebar: () => ue,
+	SignaturePad: () => de,
+	Skeleton: () => fe,
+	Slider: () => pe,
+	Sparkline: () => me,
+	Splitter: () => he,
+	Stat: () => ge,
+	Stepper: () => _e,
+	Switch: () => ve,
+	Table: () => ye,
+	Tabs: () => be,
+	TagsInput: () => xe,
+	Textarea: () => Se,
+	TimeField: () => Ce,
+	Timeline: () => we,
+	Toaster: () => Te,
+	Toggle: () => Ee,
+	ToggleGroup: () => De,
+	Toolbar: () => Oe,
+	Tooltip: () => d,
 	Tree: () => ke
 });
 //#endregion

package/dist/composables/character-count.d.ts

@@ -0,0 +1,6 @@
+export declare function defaultCountLabel(remaining: number): string;
+export declare function useCharacterCount(value: () => string | number | null | undefined, max: () => number | undefined): {
+    remaining: import("vue").ComputedRef<number | undefined>;
+    nearLimit: import("vue").ComputedRef<boolean>;
+    text: import("vue").ComputedRef<string>;
+};

package/dist/composables/character-count.js

@@ -0,0 +1,18 @@
+import { computed as e } from "vue";
+//#region src/composables/character-count.ts
+function t(e) {
+	return `${e} ${e === 1 ? "character" : "characters"} left`;
+}
+function n(t, n) {
+	let r = e(() => String(t() ?? "").length), i = e(() => {
+		let e = n();
+		return e == null ? void 0 : e - r.value;
+	});
+	return {
+		remaining: i,
+		nearLimit: e(() => i.value != null && i.value <= Math.ceil(n() * .1)),
+		text: e(() => n() == null ? `${r.value}` : `${r.value}/${n()}`)
+	};
+}
+//#endregion
+export { t as defaultCountLabel, n as useCharacterCount };

package/dist/composables/command-palette.d.ts

@@ -2,6 +2,11 @@ import type { IconLike } from './icon';
 export interface CommandItem {
     /** What the reader searches for and reads. */
     label: string;
+    /**
+     * Stable identity for the recent list. Falls back to the group and label,
+     * so set it when a label can change (a translated app, a renamed page).
+     */
+    id?: string;
     icon?: IconLike;
     /**
      * Displayed at the trailing edge, split on spaces into separate keys.
@@ -27,6 +32,8 @@ export type CommandEntry = CommandItem | CommandGroup;
 export declare function isCommandGroup(entry: CommandEntry): entry is CommandGroup;
 /** Normalise to groups, so the template has a single path to render. */
 export declare function toCommandGroups(entries: CommandEntry[] | undefined): CommandGroup[];
+export declare function commandId(item: CommandItem, group: string): string;
+export declare function pushRecent(recent: string[], id: string, limit: number): string[];
 /**
  * Everything a query should match against: the label, the group it sits in,
  * and any keywords. Joined rather than tested separately so a query spanning

package/dist/composables/command-palette.js

@@ -18,15 +18,21 @@ function n(e) {
 	return n;
 }
 function r(e, t) {
+	return e.id ?? `${t}/${e.label}`;
+}
+function i(e, t, n) {
+	return [t, ...e.filter((e) => e !== t)].slice(0, Math.max(0, n));
+}
+function a(e, t) {
 	return [
 		e.label,
 		t,
 		...e.keywords ?? []
 	].join(" ");
 }
-function i(t, n) {
+function o(t, n) {
 	let r = n.toLowerCase().split("+").map((e) => e.trim()), i = r.at(-1) ?? "", a = r.includes("mod"), o = r.includes("ctrl") || r.includes("control"), s = r.includes("meta") || r.includes("cmd"), c = r.includes("shift"), l = r.includes("alt") || r.includes("option"), u = e() ? t.metaKey : t.ctrlKey;
 	return a && !u || o && !t.ctrlKey || s && !t.metaKey || c !== t.shiftKey || l !== t.altKey ? !1 : t.key.toLowerCase() === i;
 }
 //#endregion
-export { r as commandHaystack, t as isCommandGroup, i as matchesHotkey, n as toCommandGroups };
+export { a as commandHaystack, r as commandId, t as isCommandGroup, o as matchesHotkey, i as pushRecent, n as toCommandGroups };

package/dist/composables/date.d.ts

@@ -12,6 +12,31 @@ export declare function toCalendarDate(iso: string | null | undefined): Calendar
 export declare function toIsoDate(date: DateValue | null | undefined): string | null;
 /** Today in the viewer's own zone, as an ISO date string. */
 export declare function isoToday(): string;
+/** One shortcut in `IDateRangePicker`'s preset list. */
+export interface DateRangePreset {
+    label: string;
+    /** A function is re-run each time the picker opens, so "Today" stays today. */
+    range: {
+        start: string | null;
+        end: string | null;
+    } | (() => {
+        start: string | null;
+        end: string | null;
+    });
+}
+export interface CommonDateRangePresetLabels {
+    today: string;
+    yesterday: string;
+    last7Days: string;
+    last30Days: string;
+    thisMonth: string;
+    lastMonth: string;
+}
+/**
+ * The usual dashboard shortcuts, relative to today in the viewer's zone.
+ * Pass `labels` to translate them.
+ */
+export declare function commonDateRangePresets(labels?: Partial<CommonDateRangePresetLabels>): DateRangePreset[];
 /**
  * Render an ISO date for display. Returns `''` for absent or malformed input
  * so a caller can fall back to a placeholder.

package/dist/composables/date.js

@@ -1,33 +1,76 @@
-import { CalendarDate as e, DateFormatter as t, Time as n, getLocalTimeZone as r, parseDate as i, today as a } from "@internationalized/date";
+import { CalendarDate as e, DateFormatter as t, Time as n, endOfMonth as r, getLocalTimeZone as i, parseDate as a, startOfMonth as o, today as s } from "@internationalized/date";
 //#region src/composables/date.ts
-var o = /^\d{4}-\d{2}-\d{2}$/;
-function s(e) {
-	if (!(!e || !o.test(e))) try {
-		return i(e);
+var c = /^\d{4}-\d{2}-\d{2}$/;
+function l(e) {
+	if (!(!e || !c.test(e))) try {
+		return a(e);
 	} catch {
 		return;
 	}
 }
-function c(e) {
+function u(e) {
 	return e ? `${e.year.toString().padStart(4, "0")}-${e.month.toString().padStart(2, "0")}-${e.day.toString().padStart(2, "0")}` : null;
 }
-function l() {
-	return c(a(r()));
+function d() {
+	return u(s(i()));
 }
-function u(e, n, i = { dateStyle: "medium" }) {
-	let a = s(e);
-	return a ? new t(n ?? "en-US", i).format(a.toDate(r())) : "";
+function f(e = {}) {
+	let t = {
+		today: "Today",
+		yesterday: "Yesterday",
+		last7Days: "Last 7 days",
+		last30Days: "Last 30 days",
+		thisMonth: "This month",
+		lastMonth: "Last month",
+		...e
+	}, n = () => s(i()), a = (e, t) => ({
+		start: u(e),
+		end: u(t)
+	});
+	return [
+		{
+			label: t.today,
+			range: () => a(n(), n())
+		},
+		{
+			label: t.yesterday,
+			range: () => a(n().subtract({ days: 1 }), n().subtract({ days: 1 }))
+		},
+		{
+			label: t.last7Days,
+			range: () => a(n().subtract({ days: 6 }), n())
+		},
+		{
+			label: t.last30Days,
+			range: () => a(n().subtract({ days: 29 }), n())
+		},
+		{
+			label: t.thisMonth,
+			range: () => a(o(n()), r(n()))
+		},
+		{
+			label: t.lastMonth,
+			range: () => {
+				let e = o(n()).subtract({ months: 1 });
+				return a(e, r(e));
+			}
+		}
+	];
 }
-var d = /^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d)?$/;
-function f(e) {
-	if (!e || !d.test(e)) return;
+function p(e, n, r = { dateStyle: "medium" }) {
+	let a = l(e);
+	return a ? new t(n ?? "en-US", r).format(a.toDate(i())) : "";
+}
+var m = /^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d)?$/;
+function h(e) {
+	if (!e || !m.test(e)) return;
 	let [t, r, i] = e.split(":").map(Number);
 	return new n(t, r, i ?? 0);
 }
-function p(e) {
+function g(e) {
 	if (!e) return null;
 	let t = (e) => String(e).padStart(2, "0"), n = `${t(e.hour)}:${t(e.minute)}`;
 	return e.second ? `${n}:${t(e.second)}` : n;
 }
 //#endregion
-export { e as CalendarDate, n as Time, u as formatIsoDate, l as isoToday, s as toCalendarDate, c as toIsoDate, p as toIsoTime, f as toTime };
+export { e as CalendarDate, n as Time, f as commonDateRangePresets, p as formatIsoDate, d as isoToday, l as toCalendarDate, u as toIsoDate, g as toIsoTime, h as toTime };

package/dist/composables/scroll-fade.d.ts

@@ -15,7 +15,7 @@ export interface ScrollEdges {
  * panel that fits on a desktop overflows on a phone. A fade painted on a
  * container that does not actually scroll is a lie about what is there.
  */
-export declare function useScrollEdges(target: Ref<HTMLElement | undefined>, axis: Ref<'vertical' | 'horizontal'>): ScrollEdges;
+export declare function useScrollEdges(target: Readonly<Ref<HTMLElement | undefined>>, axis: Readonly<Ref<'vertical' | 'horizontal'>>): ScrollEdges;
 /**
  * The mask that fades the edges with something past them.
  *

package/dist/composables/toast.d.ts

@@ -1,4 +1,4 @@
-export type ToastVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+export type ToastVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'loading';
 export interface ToastOptions {
     title?: string;
     description?: string;
@@ -11,6 +11,12 @@ export interface ToastOptions {
         onClick: () => void;
     };
 }
+type Message<T> = ToastOptions | string | ((value: T) => ToastOptions | string);
+export interface ToastPromiseMessages<T> {
+    loading: ToastOptions | string;
+    success: Message<T>;
+    error: Message<unknown>;
+}
 export interface ToastRecord extends ToastOptions {
     id: number;
 }
@@ -23,6 +29,14 @@ export interface ToastApi {
     warning: (options: ToastOptions | string) => number;
     danger: (options: ToastOptions | string) => number;
     info: (options: ToastOptions | string) => number;
+    /** Replace an open toast's content in place. Does nothing once it has closed. */
+    update: (id: number, options: ToastOptions | string) => void;
+    /**
+     * One toast for a piece of async work: a spinner while the promise is
+     * pending, then the success or error message. Returns the toast's id; await
+     * your own promise for its result.
+     */
+    promise: <T>(promise: Promise<T>, messages: ToastPromiseMessages<T>) => number;
     /** Dismiss one toast by id. */
     dismiss: (id: number) => void;
     /** Dismiss every open toast. */
@@ -40,3 +54,4 @@ export interface ToastApi {
  * ```
  */
 export declare function useToast(): ToastApi;
+export {};

package/dist/composables/toast.js

@@ -21,7 +21,26 @@ function a() {
 			variant: t
 		});
 	}
-	function a(e) {
+	function a(e, n) {
+		t.value = t.value.map((t) => t.id === e ? {
+			...i(n),
+			id: e
+		} : t);
+	}
+	function o(t, n) {
+		let r = e({
+			duration: 0,
+			...i(n.loading),
+			variant: "loading"
+		}), o = (e, t, n) => {
+			a(r, {
+				variant: n,
+				...i(typeof e == "function" ? e(t) : e)
+			});
+		};
+		return t.then((e) => o(n.success, e, "success"), (e) => o(n.error, e, "danger")), r;
+	}
+	function s(e) {
 		t.value = t.value.filter((t) => t.id !== e);
 	}
 	return {
@@ -30,7 +49,9 @@ function a() {
 		warning: r("warning"),
 		danger: r("danger"),
 		info: r("info"),
-		dismiss: a,
+		update: a,
+		promise: o,
+		dismiss: s,
 		clear: () => t.value = []
 	};
 }

package/dist/index.d.ts

@@ -40,7 +40,7 @@ export type { DrawerProps, DrawerSide, DrawerSnapPoint } from './components/Draw
 export type { DropdownMenuProps } from './components/DropdownMenu.vue';
 export type { EditableProps } from './components/Editable.vue';
 export type { EmptyStateProps } from './components/EmptyState.vue';
-export type { FileRejection, FileUploadProps } from './components/FileUpload.vue';
+export type { FileRejection, FileUploadProps, FileUploadStatus } from './components/FileUpload.vue';
 export type { FormProps } from './components/Form.vue';
 export type { FormFieldProps } from './components/FormField.vue';
 export type { HoverCardProps } from './components/HoverCard.vue';