iryx-ui 0.13.0 → 0.15.0

package/dist/component-names.d.ts

@@ -3,5 +3,5 @@
  * 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", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DatePicker", "DateRangePicker", "Dialog", "Drawer", "DropdownMenu", "EmptyState", "FileUpload", "Form", "FormField", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "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", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DatePicker", "DateRangePicker", "Dialog", "Drawer", "DropdownMenu", "EmptyState", "FileUpload", "Form", "FormField", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "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];

package/dist/component-names.js

@@ -1,4 +1,4 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DatePicker.DateRangePicker.Dialog.Drawer.DropdownMenu.EmptyState.FileUpload.Form.FormField.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.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(".");
+var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DatePicker.DateRangePicker.Dialog.Drawer.DropdownMenu.EmptyState.FileUpload.Form.FormField.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.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(".");
 //#endregion
 export { e as componentNames };

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

@@ -7,6 +7,14 @@ export interface AppShellProps {
      */
     scroll?: 'main' | 'page';
     sidebarPosition?: 'left' | 'right';
+    /**
+     * Below `md`, move the sidebar into a drawer and put a trigger for it in
+     * the header. A sidebar narrow enough for a phone is not a sidebar, and
+     * one that simply squeezes takes the content column with it.
+     */
+    mobileNav?: boolean;
+    /** Accessible name for that trigger — override for non-English apps. */
+    navLabel?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: string;
@@ -16,25 +24,42 @@ export interface AppShellProps {
         header?: string;
         body?: string;
         sidebar?: string;
+        headerRow?: string;
+        headerContent?: string;
+        navTrigger?: string;
+        navDrawer?: string;
+        navDrawerBody?: string;
         main?: string;
         footer?: string;
     };
 }
-declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
+declare var __VLS_13: {
+    navOpen: boolean;
+    toggleNav: () => boolean;
+}, __VLS_21: {
+    inDrawer: boolean;
+}, __VLS_23: {}, __VLS_25: {}, __VLS_27: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_8) => any;
+    header?: (props: typeof __VLS_13) => any;
+} & {
+    sidebar?: (props: typeof __VLS_21) => any;
 } & {
-    sidebar?: (props: typeof __VLS_10) => any;
+    sidebar?: (props: typeof __VLS_23) => any;
 } & {
-    default?: (props: typeof __VLS_12) => any;
+    default?: (props: typeof __VLS_25) => any;
 } & {
-    footer?: (props: typeof __VLS_14) => any;
+    footer?: (props: typeof __VLS_27) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<AppShellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellProps> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<AppShellProps, {
+    /** Open or close the mobile navigation drawer from the outside. */
+    navOpen: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellProps> & Readonly<{}>, {
     unstyled: boolean;
     as: string;
     scroll: "main" | "page";
     sidebarPosition: "left" | "right";
+    mobileNav: boolean;
+    navLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/AppShell.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,23 @@
 import { useIryxUiConfig as e } from "../config.js";
-import { useElementSize as t } from "../composables/element-size.js";
-import { appShellTheme as n } from "../theme/app-shell.js";
-import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderSlot as p, unref as m, useSlots as h, withCtx as g } from "vue";
-import { Primitive as _ } from "reka-ui";
+import t from "./Icon.js";
+import { useElementSize as n } from "../composables/element-size.js";
+import { appShellTheme as r } from "../theme/app-shell.js";
+import i from "./Drawer.js";
+import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, normalizeStyle as p, openBlock as m, ref as h, renderSlot as g, unref as _, useSlots as v, withCtx as y } from "vue";
+import { Menu01Icon as b } from "@hugeicons/core-free-icons";
+import { Primitive as x } from "reka-ui";
 //#region src/components/AppShell.vue?vue&type=script&setup=true&lang.ts
-var v = /*@__PURE__*/ c({
+var S = ["aria-label", "aria-expanded"], C = /*@__PURE__*/ d({
 	__name: "AppShell",
 	props: {
 		as: { default: "div" },
 		scroll: { default: "main" },
 		sidebarPosition: { default: "left" },
+		mobileNav: {
+			type: Boolean,
+			default: !0
+		},
+		navLabel: { default: "Open navigation" },
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -17,35 +25,67 @@ var v = /*@__PURE__*/ c({
 		class: {},
 		ui: {}
 	},
-	setup(c) {
-		let v = c, y = h(), b = e(), x = r(() => v.unstyled ?? b.unstyled), S = f(), { height: C } = t(S), w = r(() => v.scroll === "page" && y.header ? { "--iryx-shell-header-height": `${C.value}px` } : void 0), T = r(() => n({
-			scroll: v.scroll,
-			sidebarPosition: v.sidebarPosition
+	setup(d, { expose: C }) {
+		let w = d, T = v(), E = e(), D = a(() => w.unstyled ?? E.unstyled), O = h(), { height: k } = n(O), A = a(() => w.scroll === "page" && T.header ? { "--iryx-shell-header-height": `${k.value}px` } : void 0), j = h(!1), M = a(() => w.mobileNav && !!T.sidebar), N = a(() => r({
+			scroll: w.scroll,
+			sidebarPosition: w.sidebarPosition,
+			mobileNav: M.value
 		}));
-		function E(e) {
-			let t = v.ui?.[e];
-			return x.value ? t : T.value[e]({ class: t });
+		C({ navOpen: j });
+		function P(e) {
+			let t = w.ui?.[e];
+			return D.value ? t : N.value[e]({ class: t });
 		}
-		return (e, t) => (d(), i(m(_), {
-			as: v.as,
-			style: u(w.value),
-			class: l(x.value ? [v.ui?.root, v.class] : T.value.root({ class: [v.ui?.root, v.class] }))
+		return (e, n) => (m(), o(_(x), {
+			as: w.as,
+			style: p(A.value),
+			class: f(D.value ? [w.ui?.root, w.class] : N.value.root({ class: [w.ui?.root, w.class] }))
 		}, {
-			default: g(() => [
-				e.$slots.header ? (d(), o("div", {
+			default: y(() => [
+				e.$slots.header ? (m(), c("div", {
 					key: 0,
 					ref_key: "header",
-					ref: S,
-					class: l(E("header"))
-				}, [p(e.$slots, "header")], 2)) : a("", !0),
-				s("div", { class: l(E("body")) }, [e.$slots.sidebar ? (d(), o("div", {
+					ref: O,
+					class: f(P("header"))
+				}, [l("div", { class: f(P("headerRow")) }, [M.value ? (m(), c("button", {
 					key: 0,
-					class: l(E("sidebar"))
-				}, [p(e.$slots, "sidebar")], 2)) : a("", !0), s("main", { class: l(E("main")) }, [p(e.$slots, "default")], 2)], 2),
-				e.$slots.footer ? (d(), o("div", {
+					type: "button",
+					"aria-label": w.navLabel,
+					"aria-expanded": j.value,
+					class: f(P("navTrigger")),
+					onClick: n[0] ||= (e) => j.value = !0
+				}, [u(t, { icon: _(b) }, null, 8, ["icon"])], 10, S)) : s("", !0), l("div", { class: f(P("headerContent")) }, [g(e.$slots, "header", {
+					navOpen: j.value,
+					toggleNav: () => j.value = !j.value
+				})], 2)], 2)], 2)) : s("", !0),
+				M.value ? (m(), o(i, {
 					key: 1,
-					class: l(E("footer"))
-				}, [p(e.$slots, "footer")], 2)) : a("", !0)
+					open: j.value,
+					"onUpdate:open": n[1] ||= (e) => j.value = e,
+					side: "left",
+					size: "sm",
+					class: f(P("navDrawer")),
+					ui: {
+						body: P("navDrawerBody"),
+						overlay: "md:hidden",
+						content: "md:hidden"
+					}
+				}, {
+					default: y(() => [g(e.$slots, "sidebar", { inDrawer: !0 })]),
+					_: 3
+				}, 8, [
+					"open",
+					"class",
+					"ui"
+				])) : s("", !0),
+				l("div", { class: f(P("body")) }, [e.$slots.sidebar ? (m(), c("div", {
+					key: 0,
+					class: f(P("sidebar"))
+				}, [g(e.$slots, "sidebar")], 2)) : s("", !0), l("main", { class: f(P("main")) }, [g(e.$slots, "default")], 2)], 2),
+				e.$slots.footer ? (m(), c("div", {
+					key: 2,
+					class: f(P("footer"))
+				}, [g(e.$slots, "footer")], 2)) : s("", !0)
 			]),
 			_: 3
 		}, 8, [
@@ -56,4 +96,4 @@ var v = /*@__PURE__*/ c({
 	}
 });
 //#endregion
-export { v as default };
+export { C as default };

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

@@ -65,9 +65,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onClose?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    label: string;
     unstyled: boolean;
     as: string;
-    label: string;
     closeLabel: string;
     contained: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -68,6 +68,7 @@ declare var __VLS_6: {
     bandWidth: number;
     labelStep: number;
     bandCentre: (index: number) => number;
+    pointAt: (index: number) => number;
 }, __VLS_8: {
     orientation: import("..").ChartOrientation;
     ticks: number[];
@@ -82,6 +83,7 @@ declare var __VLS_6: {
     bandWidth: number;
     labelStep: number;
     bandCentre: (index: number) => number;
+    pointAt: (index: number) => number;
 };
 type __VLS_Slots = {} & {
     underlay?: (props: typeof __VLS_6) => any;

package/dist/components/BarChart.vue_vue_type_script_setup_true_lang.js

@@ -285,14 +285,14 @@ var ee = ["role", "aria-label"], D = [
 					h("span", { class: v($("tooltipValue")) }, T(Z.value.total), 3)
 				])) : p("", !0)
 			], 6)) : p("", !0)], 2),
-			h("table", { class: v($("table")) }, [
+			h("div", { class: v($("table")) }, [h("table", null, [
 				h("caption", null, T(j.label), 1),
 				h("thead", null, [h("tr", null, [t[2] ||= h("th", { scope: "col" }, " Category ", -1), (x(!0), m(u, null, C(R.value, (e) => (x(), m("th", {
 					key: e.key,
 					scope: "col"
 				}, T(e.name ?? "Value"), 1))), 128))])]),
 				h("tbody", null, [(x(!0), m(u, null, C(j.data, (e, t) => (x(), m("tr", { key: `row-${e.label}-${t}` }, [h("th", ie, T(e.label), 1), (x(!0), m(u, null, C(R.value, (t) => (x(), m("td", { key: t.key }, T(B(e, t.key) == null ? "—" : L(B(e, t.key))), 1))), 128))]))), 128))])
-			], 2)
+			])], 2)
 		], 10, ee));
 	}
 });

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

@@ -32,8 +32,8 @@ type __VLS_Slots = {} & {
     separator?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<BreadcrumbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbProps> & Readonly<{}>, {
-    unstyled: boolean;
     label: string;
+    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;

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

@@ -21,8 +21,22 @@ export interface ComboboxProps extends ComboboxRootProps {
     /** Mark the field as invalid — styles the border and ring red. */
     invalid?: boolean;
     id?: string;
+    /**
+     * Hold several values. The model becomes an array and each choice is drawn
+     * as a removable chip inside the field.
+     */
+    multiple?: boolean;
     /** Shown when the query matches nothing. Override for non-English apps. */
     emptyText?: string;
+    /**
+     * Swap the dropdown arrow for a clear button once something is selected.
+     * Clearing empties the query too and returns focus to the input.
+     */
+    clearable?: boolean;
+    /** Accessible name for that button — override for non-English apps. */
+    clearLabel?: string;
+    /** Accessible name for a chip's remove button. Receives the chip's label. */
+    removeLabel?: (label: string) => string;
     /**
      * Offer a "create" row when the query matches no option's label, for
      * adding a client or item without leaving the field. Selecting it emits
@@ -49,6 +63,10 @@ export interface ComboboxProps extends ComboboxRootProps {
         anchor?: string;
         input?: string;
         trigger?: string;
+        clear?: string;
+        tag?: string;
+        tagText?: string;
+        tagDelete?: string;
         content?: string;
         viewport?: string;
         item?: string;
@@ -57,21 +75,26 @@ export interface ComboboxProps extends ComboboxRootProps {
         groupLabel?: string;
     };
 }
-declare var __VLS_50: {
+declare var __VLS_16: {
+    option: ComboboxItemOption;
+    remove: () => void;
+}, __VLS_70: {
     query: string;
-}, __VLS_58: {
+}, __VLS_78: {
     query: string;
-}, __VLS_60: {}, __VLS_139: {
+}, __VLS_80: {}, __VLS_159: {
     query: string;
 };
 type __VLS_Slots = {} & {
-    empty?: (props: typeof __VLS_50) => any;
+    tag?: (props: typeof __VLS_16) => any;
+} & {
+    empty?: (props: typeof __VLS_70) => any;
 } & {
-    empty?: (props: typeof __VLS_58) => any;
+    empty?: (props: typeof __VLS_78) => any;
 } & {
-    default?: (props: typeof __VLS_60) => any;
+    default?: (props: typeof __VLS_80) => any;
 } & {
-    create?: (props: typeof __VLS_139) => any;
+    create?: (props: typeof __VLS_159) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: AcceptableValue) => any;
@@ -90,12 +113,16 @@ declare const __VLS_base: import("vue").DefineComponent<ComboboxProps, {}, {}, {
     } | undefined) => any) | undefined;
     onCreate?: ((query: string) => any) | undefined;
 }>, {
+    multiple: boolean;
     disabled: boolean;
     unstyled: boolean;
     open: boolean;
     defaultOpen: boolean;
     invalid: boolean;
     emptyText: string;
+    clearable: boolean;
+    clearLabel: string;
+    removeLabel: (label: string) => string;
     create: boolean;
     createLabel: (query: string) => string;
     virtual: boolean;