iryx-ui 0.11.0 → 0.13.0

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

@@ -0,0 +1,64 @@
+import type { IconLike } from '../composables/icon';
+import type { ToggleGroupVariant } from '../theme/toggle';
+export interface ToggleGroupItemOption {
+    label: string;
+    /** Identifies the item. Defaults to the label. */
+    value?: string;
+    icon?: IconLike;
+    disabled?: boolean;
+    /**
+     * Names the item when `iconOnly` hides its label. Without one, an icon-only
+     * item reaches a screen reader as an unnamed button.
+     */
+    ariaLabel?: string;
+}
+export interface ToggleGroupProps {
+    items?: (ToggleGroupItemOption | string)[];
+    /**
+     * `single` behaves like a segmented control — one item on at a time, and
+     * the model is that item's value. `multiple` lets any number be on, and the
+     * model is an array.
+     */
+    type?: 'single' | 'multiple';
+    modelValue?: string | string[];
+    variant?: ToggleGroupVariant;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    orientation?: 'horizontal' | 'vertical';
+    /** Hide the labels and square the items, leaving only the icons. */
+    iconOnly?: boolean;
+    /** Stretch to fill the container, splitting the width between items. */
+    block?: boolean;
+    disabled?: boolean;
+    /** Wrap from the last item back to the first when arrowing past the end. */
+    loop?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ item: 'px-6' }`. */
+    ui?: {
+        root?: string;
+        item?: string;
+    };
+}
+declare var __VLS_16: {
+    item: ToggleGroupItemOption;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ToggleGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<ToggleGroupProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+}>, {
+    type: "single" | "multiple";
+    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/ToggleGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,78 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { toggleGroupTheme as n, toggleTheme as r } from "../theme/toggle.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, defineComponent as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+import { ToggleGroupItem as _, ToggleGroupRoot as v } from "reka-ui";
+//#region src/components/ToggleGroup.vue?vue&type=script&setup=true&lang.ts
+var y = { key: 1 }, b = /*@__PURE__*/ l({
+	__name: "ToggleGroup",
+	props: {
+		items: {},
+		type: { default: "single" },
+		modelValue: {},
+		variant: {},
+		size: {},
+		orientation: {},
+		iconOnly: { type: Boolean },
+		block: { type: Boolean },
+		disabled: { type: Boolean },
+		loop: { type: Boolean },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	emits: ["update:modelValue"],
+	setup(l, { emit: b }) {
+		let x = l, S = b, C = a(() => (x.items ?? []).map((e) => typeof e == "string" ? { label: e } : e)), w = (e) => e.value ?? e.label, T = e(), E = a(() => x.unstyled ?? T.unstyled), D = a(() => n({
+			variant: x.variant,
+			orientation: x.orientation,
+			block: x.block
+		})), O = a(() => E.value ? [x.ui?.root, x.class] : D.value.root({ class: [x.ui?.root, x.class] })), k = a(() => E.value ? x.ui?.item : r({
+			size: x.size,
+			square: x.iconOnly,
+			class: D.value.item({ class: x.ui?.item })
+		}));
+		return (e, n) => (d(), o(h(v), {
+			type: x.type,
+			"model-value": x.modelValue,
+			disabled: x.disabled,
+			orientation: x.orientation,
+			loop: x.loop,
+			class: u(O.value),
+			"onUpdate:modelValue": n[0] ||= (e) => S("update:modelValue", e)
+		}, {
+			default: g(() => [(d(!0), c(i, null, f(C.value, (n) => (d(), o(h(_), {
+				key: w(n),
+				value: w(n),
+				disabled: n.disabled,
+				"aria-label": n.ariaLabel ?? (x.iconOnly ? n.label : void 0),
+				class: u(k.value)
+			}, {
+				default: g(() => [p(e.$slots, "item", { item: n }, () => [n.icon ? (d(), o(t, {
+					key: 0,
+					icon: n.icon,
+					"data-icon": x.iconOnly ? void 0 : "inline-start"
+				}, null, 8, ["icon", "data-icon"])) : s("", !0), x.iconOnly ? s("", !0) : (d(), c("span", y, m(n.label), 1))])]),
+				_: 2
+			}, 1032, [
+				"value",
+				"disabled",
+				"aria-label",
+				"class"
+			]))), 128))]),
+			_: 3
+		}, 8, [
+			"type",
+			"model-value",
+			"disabled",
+			"orientation",
+			"loop",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/Toolbar.js

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

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

@@ -0,0 +1,52 @@
+import type { IconLike } from '../composables/icon';
+export interface ToolbarButtonOption {
+    label: string;
+    icon?: IconLike;
+    /** Run when the control is pressed. Ignored on a link. */
+    onSelect?: () => void;
+    /** Renders a link instead of a button. */
+    href?: string;
+    disabled?: boolean;
+    /** Hide the label, leaving only the icon. The label becomes its name. */
+    iconOnly?: boolean;
+    /** Overrides that name when the label is too terse to stand alone. */
+    ariaLabel?: string;
+}
+/** `'-'` renders a separator between groups of controls. */
+export type ToolbarEntry = ToolbarButtonOption | '-';
+export interface ToolbarProps {
+    items?: ToolbarEntry[];
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Drop the container so the controls sit directly on the page. */
+    bare?: boolean;
+    /** Wrap from the last control back to the first when arrowing past the end. */
+    loop?: boolean;
+    /** Names the bar, e.g. "Formatting". A toolbar with no name is unlabelled chrome. */
+    ariaLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ button: 'px-3' }`. */
+    ui?: {
+        root?: string;
+        button?: string;
+        separator?: string;
+    };
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarProps> & Readonly<{}>, {
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    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/Toolbar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,94 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { buttonTheme as n } from "../theme/button.js";
+import { toolbarTheme as r } from "../theme/toolbar.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, defineComponent as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+import { ToolbarButton as _, ToolbarLink as v, ToolbarRoot as y, ToolbarSeparator as b } from "reka-ui";
+//#region src/components/Toolbar.vue?vue&type=script&setup=true&lang.ts
+var x = { key: 1 }, S = { key: 1 }, C = /*@__PURE__*/ l({
+	__name: "Toolbar",
+	props: {
+		items: {},
+		orientation: {},
+		size: { default: "sm" },
+		bare: { type: Boolean },
+		loop: { type: Boolean },
+		ariaLabel: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(l) {
+		let C = l, w = a(() => C.items ?? []), T = (e) => e === "-", E = e(), D = a(() => C.unstyled ?? E.unstyled), O = a(() => r({
+			orientation: C.orientation,
+			bare: C.bare
+		})), k = a(() => D.value ? [C.ui?.root, C.class] : O.value.root({ class: [C.ui?.root, C.class] })), A = a(() => D.value ? C.ui?.separator : O.value.separator({ class: C.ui?.separator }));
+		function j(e) {
+			return D.value ? C.ui?.button : n({
+				variant: "ghost",
+				size: C.size,
+				square: e.iconOnly,
+				class: C.ui?.button
+			});
+		}
+		function M(e) {
+			return e.ariaLabel ?? (e.iconOnly ? e.label : void 0);
+		}
+		return (e, n) => (d(), o(h(y), {
+			orientation: C.orientation,
+			loop: C.loop,
+			"aria-label": C.ariaLabel,
+			class: u(k.value)
+		}, {
+			default: g(() => [p(e.$slots, "default", {}, () => [(d(!0), c(i, null, f(w.value, (e, n) => (d(), c(i, { key: n }, [T(e) ? (d(), o(h(b), {
+				key: 0,
+				class: u(A.value)
+			}, null, 8, ["class"])) : e.href ? (d(), o(h(v), {
+				key: 1,
+				href: e.href,
+				"aria-label": M(e),
+				class: u(j(e))
+			}, {
+				default: g(() => [e.icon ? (d(), o(t, {
+					key: 0,
+					icon: e.icon,
+					"data-icon": e.iconOnly ? void 0 : "inline-start"
+				}, null, 8, ["icon", "data-icon"])) : s("", !0), e.iconOnly ? s("", !0) : (d(), c("span", x, m(e.label), 1))]),
+				_: 2
+			}, 1032, [
+				"href",
+				"aria-label",
+				"class"
+			])) : (d(), o(h(_), {
+				key: 2,
+				disabled: e.disabled,
+				"aria-label": M(e),
+				class: u(j(e)),
+				onClick: (t) => e.onSelect?.()
+			}, {
+				default: g(() => [e.icon ? (d(), o(t, {
+					key: 0,
+					icon: e.icon,
+					"data-icon": e.iconOnly ? void 0 : "inline-start"
+				}, null, 8, ["icon", "data-icon"])) : s("", !0), e.iconOnly ? s("", !0) : (d(), c("span", S, m(e.label), 1))]),
+				_: 2
+			}, 1032, [
+				"disabled",
+				"aria-label",
+				"class",
+				"onClick"
+			]))], 64))), 128))])]),
+			_: 3
+		}, 8, [
+			"orientation",
+			"loop",
+			"aria-label",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { C as default };

package/dist/components/Tree.js

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

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

@@ -0,0 +1,70 @@
+import type { IconLike } from '../composables/icon';
+export interface TreeItemOption {
+    label: string;
+    /** Identifies the node. Defaults to the label. */
+    value?: string;
+    icon?: IconLike;
+    disabled?: boolean;
+    /**
+     * Number shown against the row's trailing edge — how many files are in a
+     * folder, how many results are under a category.
+     */
+    count?: number;
+    /** Nested nodes. A node with children can be expanded. */
+    children?: TreeItemOption[];
+}
+export interface TreeProps {
+    items?: TreeItemOption[];
+    /** Selected node values. Always an array, whether or not `multiple` is set. */
+    modelValue?: string[];
+    /** Which nodes start open, by value. Two-way via `v-model:expanded`. */
+    expanded?: string[];
+    multiple?: boolean;
+    /** Selecting a parent selects everything under it. Needs `multiple`. */
+    propagateSelect?: boolean;
+    size?: 'sm' | 'md';
+    /** Indent added per level of depth, in pixels. */
+    indent?: number;
+    disabled?: boolean;
+    /** Names the tree, e.g. "Project files". */
+    ariaLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ item: 'py-2' }`. */
+    ui?: {
+        root?: string;
+        item?: string;
+        expander?: string;
+        spacer?: string;
+        icon?: string;
+        label?: string;
+        count?: string;
+    };
+}
+declare var __VLS_16: {
+    item: TreeItemOption;
+    level: number;
+    expanded: boolean;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TreeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+    "update:expanded": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<TreeProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    indent: 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/Tree.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,112 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { treeTheme as n } from "../theme/tree.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, mergeProps as u, normalizeClass as d, openBlock as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
+import { ArrowRight01Icon as v } from "@hugeicons/core-free-icons";
+import { TreeItem as y, TreeRoot as b } from "reka-ui";
+//#region src/components/Tree.vue?vue&type=script&setup=true&lang.ts
+var x = 8, S = /*@__PURE__*/ l({
+	__name: "Tree",
+	props: {
+		items: {},
+		modelValue: {},
+		expanded: {},
+		multiple: { type: Boolean },
+		propagateSelect: { type: Boolean },
+		size: {},
+		indent: { default: 16 },
+		disabled: { type: Boolean },
+		ariaLabel: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	emits: ["update:modelValue", "update:expanded"],
+	setup(l, { emit: S }) {
+		let C = l, w = S, T = i(() => C.items ?? []), E = (e) => e.value ?? e.label, D = (e) => !!e.children?.length, O = (e) => `${x + (e - 1) * C.indent}px`, k = i(() => {
+			let e = /* @__PURE__ */ new Map(), t = (n) => {
+				for (let r of n) e.set(E(r), r), r.children?.length && t(r.children);
+			};
+			return t(T.value), e;
+		}), A = i(() => (C.modelValue ?? []).map((e) => k.value.get(e)).filter(Boolean));
+		function j(e) {
+			return (Array.isArray(e) ? e : [e]).filter(Boolean).map((e) => E(e));
+		}
+		let M = e(), N = i(() => C.unstyled ?? M.unstyled), P = i(() => n({ size: C.size }));
+		function F(e, t) {
+			let n = [C.ui?.[e], t].filter(Boolean).join(" ");
+			return N.value ? n : P.value[e]({ class: n });
+		}
+		return (e, n) => (f(), a(g(b), {
+			items: T.value,
+			"model-value": C.multiple ? A.value : A.value[0],
+			expanded: C.expanded,
+			"get-key": E,
+			"get-children": (e) => e.children,
+			multiple: C.multiple,
+			"propagate-select": C.propagateSelect,
+			disabled: C.disabled,
+			"aria-label": C.ariaLabel,
+			class: d(F("root", C.class)),
+			"onUpdate:modelValue": n[0] ||= (e) => w("update:modelValue", j(e)),
+			"onUpdate:expanded": n[1] ||= (e) => w("update:expanded", e)
+		}, {
+			default: _(({ flattenItems: n }) => [(f(!0), s(r, null, p(n, (n) => (f(), a(g(y), u({ key: n._id }, { ref_for: !0 }, n.bind, {
+				disabled: n.value.disabled,
+				class: F("item"),
+				style: { paddingLeft: O(n.level) }
+			}), {
+				default: _(({ isExpanded: r }) => [m(e.$slots, "item", {
+					item: n.value,
+					level: n.level,
+					expanded: r
+				}, () => [
+					D(n.value) ? (f(), a(t, {
+						key: 0,
+						icon: g(v),
+						"data-expanded": r ? "" : void 0,
+						class: d(F("expander"))
+					}, null, 8, [
+						"icon",
+						"data-expanded",
+						"class"
+					])) : (f(), s("span", {
+						key: 1,
+						class: d(F("spacer"))
+					}, null, 2)),
+					n.value.icon ? (f(), a(t, {
+						key: 2,
+						icon: n.value.icon,
+						class: d(F("icon"))
+					}, null, 8, ["icon", "class"])) : o("", !0),
+					c("span", { class: d(F("label")) }, h(n.value.label), 3),
+					n.value.count === void 0 ? o("", !0) : (f(), s("span", {
+						key: 3,
+						class: d(F("count"))
+					}, h(n.value.count), 3))
+				])]),
+				_: 2
+			}, 1040, [
+				"disabled",
+				"class",
+				"style"
+			]))), 128))]),
+			_: 3
+		}, 8, [
+			"items",
+			"model-value",
+			"expanded",
+			"get-children",
+			"multiple",
+			"propagate-select",
+			"disabled",
+			"aria-label",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { S as default };

package/dist/components/index.d.ts

@@ -1,5 +1,10 @@
+export { default as Accordion } from './Accordion.vue';
 export { default as Alert } from './Alert.vue';
 export { default as App } from './App.vue';
+export { default as AppShell } from './AppShell.vue';
+export { default as AspectRatio } from './AspectRatio.vue';
+export { default as Avatar } from './Avatar.vue';
+export { default as AvatarGroup } from './AvatarGroup.vue';
 export { default as Badge } from './Badge.vue';
 export { default as Banner } from './Banner.vue';
 export { default as BarChart } from './BarChart.vue';
@@ -9,33 +14,58 @@ export { default as ButtonGroup } from './ButtonGroup.vue';
 export { default as Card } from './Card.vue';
 export { default as ChartLegend } from './ChartLegend.vue';
 export { default as Checkbox } from './Checkbox.vue';
+export { default as Collapsible } from './Collapsible.vue';
+export { default as ColorPicker } from './ColorPicker.vue';
 export { default as Combobox } from './Combobox.vue';
+export { default as CommandPalette } from './CommandPalette.vue';
 export { default as ConfirmDialog } from './ConfirmDialog.vue';
+export { default as Container } from './Container.vue';
+export { default as ContextMenu } from './ContextMenu.vue';
 export { default as DatePicker } from './DatePicker.vue';
 export { default as DateRangePicker } from './DateRangePicker.vue';
 export { default as Dialog } from './Dialog.vue';
+export { default as Drawer } from './Drawer.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';
 export { default as EmptyState } from './EmptyState.vue';
 export { default as FileUpload } from './FileUpload.vue';
 export { default as Form } from './Form.vue';
 export { default as FormField } from './FormField.vue';
 export { default as Input } from './Input.vue';
+export { default as Kbd } from './Kbd.vue';
 export { default as Label } from './Label.vue';
 export { default as LineChart } from './LineChart.vue';
+export { default as Menubar } from './Menubar.vue';
+export { default as NavigationMenu } from './NavigationMenu.vue';
 export { default as NumberInput } from './NumberInput.vue';
+export { default as PageHeader } from './PageHeader.vue';
 export { default as Pagination } from './Pagination.vue';
 export { default as PasswordInput } from './PasswordInput.vue';
+export { default as PinInput } from './PinInput.vue';
+export { default as Popover } from './Popover.vue';
 export { default as Progress } from './Progress.vue';
 export { default as RadioGroup } from './RadioGroup.vue';
+export { default as ScrollArea } from './ScrollArea.vue';
+export { default as ScrollFade } from './ScrollFade.vue';
 export { default as Select } from './Select.vue';
 export { default as Separator } from './Separator.vue';
+export { default as Sidebar } from './Sidebar.vue';
+export { default as SignaturePad } from './SignaturePad.vue';
 export { default as Skeleton } from './Skeleton.vue';
+export { default as Slider } from './Slider.vue';
 export { default as Sparkline } from './Sparkline.vue';
+export { default as Splitter } from './Splitter.vue';
 export { default as Stat } from './Stat.vue';
 export { default as Stepper } from './Stepper.vue';
 export { default as Switch } from './Switch.vue';
 export { default as Table } from './Table.vue';
 export { default as Tabs } from './Tabs.vue';
+export { default as TagsInput } from './TagsInput.vue';
 export { default as Textarea } from './Textarea.vue';
+export { default as TimeField } from './TimeField.vue';
+export { default as Timeline } from './Timeline.vue';
 export { default as Toaster } from './Toaster.vue';
+export { default as Toggle } from './Toggle.vue';
+export { default as ToggleGroup } from './ToggleGroup.vue';
+export { default as Toolbar } from './Toolbar.vue';
 export { default as Tooltip } from './Tooltip.vue';
+export { default as Tree } from './Tree.vue';