iryx-ui 0.22.0 → 0.24.0

package/dist/component-names.d.ts

@@ -3,7 +3,7 @@
  * Consumed by the Vue plugin (global registration) and the Nuxt module
  * (auto-imports). Keep in sync with `src/components/index.ts`.
  */
-export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "AuthProviders", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Calendar", "Card", "Carousel", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DateField", "DatePicker", "DateRangePicker", "Dialog", "DonutChart", "Drawer", "DropdownMenu", "Editable", "EmptyState", "FileUpload", "Form", "FormField", "HoverCard", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "Rating", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
+export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "AuthProviders", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Calendar", "Card", "Carousel", "ChartLegend", "Checkbox", "Code", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ConfirmPopover", "ContextMenu", "DateField", "DatePicker", "DateRangePicker", "DescriptionList", "Dialog", "DonutChart", "Drawer", "DropdownMenu", "Editable", "EmptyState", "FileUpload", "Form", "FormField", "HoverCard", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "Rating", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
 export type ComponentName = (typeof componentNames)[number];
 /**
  * Names of every block exported from `iryx-ui/marketing`.

package/dist/component-names.js

@@ -1,5 +1,5 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.AuthProviders.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Calendar.Card.Carousel.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DateField.DatePicker.DateRangePicker.Dialog.DonutChart.Drawer.DropdownMenu.Editable.EmptyState.FileUpload.Form.FormField.HoverCard.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.Rating.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split("."), t = [
+var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.AuthProviders.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Calendar.Card.Carousel.ChartLegend.Checkbox.Code.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ConfirmPopover.ContextMenu.DateField.DatePicker.DateRangePicker.DescriptionList.Dialog.DonutChart.Drawer.DropdownMenu.Editable.EmptyState.FileUpload.Form.FormField.HoverCard.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.Rating.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split("."), t = [
 	"BrowserFrame",
 	"FeatureCard",
 	"Hero",

package/dist/components/Code.js

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

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

@@ -0,0 +1,38 @@
+import type { ClassValue } from '../class-value';
+export interface CodeProps {
+    /** The code itself. The default slot renders instead when it is absent. */
+    code?: string;
+    /** Render a `pre` block rather than an inline chip. */
+    block?: boolean;
+    /** Show a copy button. Defaults to on for a block, off inline. */
+    copy?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per element, e.g. `{ code: 'text-xs' }`. */
+    ui?: {
+        root?: string;
+        code?: string;
+        copy?: string;
+    };
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CodeProps> & Readonly<{}>, {
+    unstyled: boolean;
+    copy: boolean;
+    copyLabel: string;
+    copiedLabel: string;
+}, {}, {}, {}, 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/Code.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,66 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { codeTheme as n } from "../theme/code.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, onBeforeUnmount as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
+import { Copy01Icon as y, Tick02Icon as b } from "@hugeicons/core-free-icons";
+import { Primitive as x } from "reka-ui";
+//#region src/components/Code.vue?vue&type=script&setup=true&lang.ts
+var S = ["aria-label"], C = /*@__PURE__*/ u({
+	__name: "Code",
+	props: {
+		code: {},
+		block: { type: Boolean },
+		copy: {
+			type: Boolean,
+			default: void 0
+		},
+		copyLabel: { default: "Copy code" },
+		copiedLabel: { default: "Copied" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	},
+	setup(u) {
+		let C = u, w = e(), T = r(() => C.unstyled ?? w.unstyled), E = r(() => C.copy ?? C.block ?? !1), D = m(), O = m(!1), k;
+		async function A() {
+			let e = C.code ?? D.value?.textContent ?? "";
+			if (e) {
+				try {
+					await navigator.clipboard.writeText(e);
+				} catch {
+					return;
+				}
+				O.value = !0, clearTimeout(k), k = setTimeout(() => O.value = !1, 2e3);
+			}
+		}
+		f(() => clearTimeout(k));
+		let j = r(() => n({ block: C.block })), M = r(() => T.value ? [C.ui?.root, C.class] : j.value.root({ class: [C.ui?.root, C.class] })), N = r(() => T.value ? C.ui?.code : j.value.code({ class: C.ui?.code })), P = r(() => T.value ? C.ui?.copy : j.value.copy({ class: C.ui?.copy }));
+		return (e, n) => (p(), i(_(x), {
+			as: C.block ? "pre" : "span",
+			class: d(M.value)
+		}, {
+			default: v(() => [s("code", {
+				ref_key: "codeEl",
+				ref: D,
+				class: d(N.value)
+			}, [h(e.$slots, "default", {}, () => [c(g(C.code), 1)])], 2), E.value ? (p(), o("button", {
+				key: 0,
+				type: "button",
+				class: d(P.value),
+				"aria-label": O.value ? C.copiedLabel : C.copyLabel,
+				onClick: A
+			}, [l(t, { icon: O.value ? _(b) : _(y) }, null, 8, ["icon"])], 10, S)) : a("", !0)]),
+			_: 3
+		}, 8, ["as", "class"]));
+	}
+});
+//#endregion
+export { C as default };

package/dist/components/ConfirmPopover.js

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

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

@@ -0,0 +1,63 @@
+import type { ClassValue } from '../class-value';
+export interface ConfirmPopoverProps {
+    /** The question. */
+    title?: string;
+    /** Secondary detail under the question. */
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Style the confirming button as destructive. */
+    danger?: boolean;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    /** Render the little pointer against the trigger. */
+    arrow?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per element, e.g. `{ confirm: 'w-full' }`. */
+    ui?: {
+        content?: string;
+        title?: string;
+        description?: string;
+        actions?: string;
+        cancel?: string;
+        confirm?: string;
+    };
+}
+type __VLS_Props = ConfirmPopoverProps;
+type __VLS_ModelProps = {
+    'open'?: boolean | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_9) => any;
+} & {
+    description?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean | undefined) => any;
+    cancel: () => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    unstyled: boolean;
+    side: "top" | "right" | "bottom" | "left";
+    sideOffset: number;
+    confirmLabel: string;
+    cancelLabel: string;
+    arrow: 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/ConfirmPopover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,102 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Button.js";
+import { confirmPopoverTheme as n } from "../theme/confirm-popover.js";
+import r from "./Popover.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, openBlock as m, renderSlot as h, toDisplayString as g, useModel as _, withCtx as v } from "vue";
+//#region src/components/ConfirmPopover.vue?vue&type=script&setup=true&lang.ts
+var y = /*@__PURE__*/ d({
+	__name: "ConfirmPopover",
+	props: /*@__PURE__*/ f({
+		title: {},
+		description: {},
+		confirmLabel: { default: "Confirm" },
+		cancelLabel: { default: "Cancel" },
+		danger: { type: Boolean },
+		side: { default: "bottom" },
+		align: {},
+		sideOffset: { default: 6 },
+		arrow: {
+			type: Boolean,
+			default: !0
+		},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	}, {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f(["confirm", "cancel"], ["update:open"]),
+	setup(d, { emit: f }) {
+		let y = d, b = f, x = _(d, "open");
+		function S() {
+			b("confirm"), x.value = !1;
+		}
+		function C() {
+			b("cancel"), x.value = !1;
+		}
+		let w = e(), T = i(() => y.unstyled ?? w.unstyled), E = i(() => n()), D = i(() => T.value ? y.ui?.description : E.value.description({ class: y.ui?.description })), O = i(() => T.value ? y.ui?.actions : E.value.actions({ class: y.ui?.actions }));
+		return (e, n) => (m(), a(r, {
+			open: x.value,
+			"onUpdate:open": n[0] ||= (e) => x.value = e,
+			side: y.side,
+			align: y.align,
+			"side-offset": y.sideOffset,
+			arrow: y.arrow,
+			padding: "sm",
+			width: "sm",
+			title: y.title,
+			unstyled: y.unstyled,
+			class: p(y.class),
+			ui: {
+				content: y.ui?.content,
+				title: y.ui?.title
+			}
+		}, {
+			trigger: v(() => [h(e.$slots, "trigger")]),
+			default: v(() => [y.description || e.$slots.description ? (m(), s("p", {
+				key: 0,
+				class: p(D.value)
+			}, [h(e.$slots, "description", {}, () => [l(g(y.description), 1)])], 2)) : o("", !0), c("div", { class: p(O.value) }, [u(t, {
+				size: "sm",
+				variant: "outline",
+				class: p(y.ui?.cancel),
+				onClick: C
+			}, {
+				default: v(() => [l(g(y.cancelLabel), 1)]),
+				_: 1
+			}, 8, ["class"]), u(t, {
+				size: "sm",
+				class: p([y.danger && "bg-danger bg-none text-danger-foreground hover:brightness-110", y.ui?.confirm]),
+				onClick: S
+			}, {
+				default: v(() => [l(g(y.confirmLabel), 1)]),
+				_: 1
+			}, 8, ["class"])], 2)]),
+			_: 3
+		}, 8, [
+			"open",
+			"side",
+			"align",
+			"side-offset",
+			"arrow",
+			"title",
+			"unstyled",
+			"class",
+			"ui"
+		]));
+	}
+});
+//#endregion
+export { y as default };

package/dist/components/DescriptionList.js

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

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

@@ -0,0 +1,50 @@
+import type { ClassValue } from '../class-value';
+export interface DescriptionListItem {
+    term: string;
+    description?: string | number;
+    /** Passed to the slots, so a row can be rendered by name rather than by index. */
+    key?: string;
+}
+export interface DescriptionListProps {
+    items?: DescriptionListItem[];
+    /** `horizontal` puts the term and the description side by side on one row. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Separate the rows with a rule instead of whitespace. */
+    divided?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per element, e.g. `{ term: 'text-foreground' }`. */
+    ui?: {
+        root?: string;
+        item?: string;
+        term?: string;
+        description?: string;
+    };
+}
+declare var __VLS_8: {
+    item: DescriptionListItem;
+    index: number;
+}, __VLS_10: {
+    item: DescriptionListItem;
+    index: number;
+}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    term?: (props: typeof __VLS_8) => any;
+} & {
+    description?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DescriptionListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DescriptionListProps> & Readonly<{}>, {
+    items: DescriptionListItem[];
+    unstyled: 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/DescriptionList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,48 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { descriptionListTheme as t } from "../theme/description-list.js";
+import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderList as d, renderSlot as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
+import { Primitive as g } from "reka-ui";
+//#region src/components/DescriptionList.vue?vue&type=script&setup=true&lang.ts
+var _ = /*@__PURE__*/ c({
+	__name: "DescriptionList",
+	props: {
+		items: { default: () => [] },
+		orientation: {},
+		divided: { type: Boolean },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	},
+	setup(c) {
+		let _ = c, v = e(), y = r(() => _.unstyled ?? v.unstyled), b = r(() => t({
+			orientation: _.orientation,
+			divided: _.divided
+		})), x = r(() => y.value ? [_.ui?.root, _.class] : b.value.root({ class: [_.ui?.root, _.class] })), S = r(() => y.value ? _.ui?.item : b.value.item({ class: _.ui?.item })), C = r(() => y.value ? _.ui?.term : b.value.term({ class: _.ui?.term })), w = r(() => y.value ? _.ui?.description : b.value.description({ class: _.ui?.description }));
+		return (e, t) => (u(), i(m(g), {
+			as: "dl",
+			class: l(x.value)
+		}, {
+			default: h(() => [(u(!0), a(n, null, d(_.items, (t, n) => (u(), a("div", {
+				key: t.key ?? t.term,
+				class: l(S.value)
+			}, [o("dt", { class: l(C.value) }, [f(e.$slots, "term", {
+				item: t,
+				index: n
+			}, () => [s(p(t.term), 1)])], 2), o("dd", { class: l(w.value) }, [f(e.$slots, "description", {
+				item: t,
+				index: n
+			}, () => [s(p(t.description), 1)])], 2)], 2))), 128)), f(e.$slots, "default")]),
+			_: 3
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { _ as default };

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

@@ -19,8 +19,12 @@ export interface LineChartProps {
     /**
      * `area` adds a wash beneath the line. Ignored for multiple series, where
      * overlapping washes muddy into a colour that belongs to neither.
+     *
+     * `stacked` is the multi-series answer to that: each series sits on top of
+     * the one before it, so the bands abut instead of overlapping and the top
+     * edge reads as the total. It falls back to `area` for a single series.
      */
-    variant?: 'line' | 'area';
+    variant?: 'line' | 'area' | 'stacked';
     /**
      * How much to curve the line, from `0` (straight segments between
      * readings) to `1` (fully rounded). Straight by default: a curve claims the
@@ -66,7 +70,7 @@ export interface LineChartProps {
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: ClassValue;
-    ui?: Partial<Record<'root' | 'svg' | 'grid' | 'tick' | 'category' | 'line' | 'area' | 'crosshair' | 'marker' | 'markerRing' | 'tooltip' | 'tooltipLabel' | 'tooltipValue' | 'table', string>>;
+    ui?: Partial<Record<'root' | 'svg' | 'grid' | 'tick' | 'category' | 'line' | 'area' | 'band' | 'crosshair' | 'marker' | 'markerRing' | 'tooltip' | 'tooltipLabel' | 'tooltipValue' | 'table', string>>;
 }
 declare var __VLS_6: {
     orientation: import("..").ChartOrientation;
@@ -105,7 +109,7 @@ type __VLS_Slots = {} & {
     overlay?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LineChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LineChartProps> & Readonly<{}>, {
-    variant: "line" | "area";
+    variant: "line" | "area" | "stacked";
     unstyled: boolean;
     data: readonly LineChartDatum[];
     legend: boolean;