iryx-ui 0.5.0 → 0.6.0

package/dist/composables/data-table.d.ts

@@ -0,0 +1,93 @@
+import type { ModelRef } from 'vue';
+/** Which way a column is sorted. */
+export type SortOrder = 'asc' | 'desc';
+/** The active sort, or `null` when nothing is sorted. */
+export interface TableSort {
+    /** A column's `sortKey`, falling back to its `key`. */
+    key: string;
+    order: SortOrder;
+}
+/**
+ * A column definition. Plain data, no render functions — anything beyond the
+ * raw accessor value is a `#cell-<key>` slot on the component.
+ */
+export interface TableColumn<T = any> {
+    /** Accessor path into the row, dot-notation for nested values. Also the slot suffix. */
+    key: string;
+    /** Header text. */
+    label?: string;
+    sortable?: boolean;
+    /** Sort by a different field than the one displayed, e.g. `'customer.name'` → `'customer_name'`. */
+    sortKey?: string;
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Render the column's cells with tabular figures, so digits line up down the
+     * column instead of wandering with the width of each glyph. Implies end
+     * alignment unless `align` says otherwise.
+     */
+    numeric?: boolean;
+    /** Inline width, e.g. `'12rem'` or `'1px'` to shrink to content. */
+    width?: string;
+    /** Extra classes on every cell in the column; a function receives the row. */
+    class?: string | ((row: T) => string);
+    /** Hide the column outright, or per row (the cell renders empty). */
+    hidden?: boolean | ((row: T) => boolean);
+}
+export interface UseDataTableOptions<T = any> {
+    rows: () => T[];
+    columns: () => TableColumn<T>[];
+    /**
+     * Total row count on the server. Providing it switches the table to server
+     * mode: sorting and pagination are emitted rather than applied locally,
+     * because the rows you passed are already the page the server returned.
+     */
+    total?: () => number | undefined;
+    /** Field identifying a row, used for selection and expansion. */
+    rowKey?: () => string;
+    /** Controlled models. Any left undefined falls back to internal state. */
+    sort?: ModelRef<TableSort | null | undefined>;
+    page?: ModelRef<number | undefined>;
+    perPage?: ModelRef<number | undefined>;
+    selection?: ModelRef<(string | number)[] | undefined>;
+    expanded?: ModelRef<(string | number)[] | undefined>;
+    /** Rows that cannot be selected are skipped by the header checkbox. */
+    isRowSelectable?: (row: T) => boolean;
+}
+/** Read a dot-notation path off a row. */
+export declare function getRowValue(row: any, path: string): unknown;
+/**
+ * Headless state and derivations behind `ITable` — usable on its own if you
+ * want the logic without the markup.
+ */
+export declare function useDataTable<T = any>(options: UseDataTableOptions<T>): {
+    sort: {
+        value: TableSort | null;
+    };
+    page: {
+        value: number;
+    };
+    perPage: {
+        value: number;
+    };
+    selection: {
+        value: (string | number)[];
+    };
+    expanded: {
+        value: (string | number)[];
+    };
+    isServerMode: import("vue").ComputedRef<boolean>;
+    visibleColumns: import("vue").ComputedRef<TableColumn<T>[]>;
+    pageRows: import("vue").ComputedRef<T[]>;
+    total: import("vue").ComputedRef<number>;
+    pageCount: import("vue").ComputedRef<number>;
+    keyOf: (row: T) => string | number;
+    toggleSort: (column: TableColumn<T>) => void;
+    sortOrderFor: (column: TableColumn<T>) => SortOrder | null;
+    headerSelection: import("vue").ComputedRef<boolean | "indeterminate">;
+    isSelected: (row: T) => boolean;
+    toggleRow: (row: T) => void;
+    toggleAll: (value: boolean | "indeterminate") => void;
+    isExpanded: (row: T) => boolean;
+    toggleExpanded: (row: T) => void;
+    getRowValue: typeof getRowValue;
+};

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from './components';
 export type { AlertProps } from './components/Alert.vue';
 export type { AppProps } from './components/App.vue';
 export type { BadgeProps } from './components/Badge.vue';
+export type { BannerProps } from './components/Banner.vue';
 export type { BreadcrumbItem, BreadcrumbProps } from './components/Breadcrumb.vue';
 export type { ButtonProps } from './components/Button.vue';
 export type { ButtonGroupProps } from './components/ButtonGroup.vue';
@@ -28,6 +29,7 @@ export type { SkeletonProps } from './components/Skeleton.vue';
 export type { StatProps } from './components/Stat.vue';
 export type { StepperItemOption, StepperProps } from './components/Stepper.vue';
 export type { SwitchProps } from './components/Switch.vue';
+export type { TableProps } from './components/Table.vue';
 export type { TabsItem, TabsProps } from './components/Tabs.vue';
 export type { TextareaProps } from './components/Textarea.vue';
 export type { ToasterProps } from './components/Toaster.vue';
@@ -35,6 +37,7 @@ export type { TooltipProps } from './components/Tooltip.vue';
 export * from './composables/appearance';
 export * from './composables/button-group';
 export * from './composables/confirm';
+export * from './composables/data-table';
 export * from './composables/decimal';
 export * from './composables/dropdown-menu';
 export * from './composables/form';

package/dist/index.js

@@ -7,63 +7,68 @@ import { applyTheme as c, clearTheme as l, themes as u } from "./packages/iryx-u
 import d from "./packages/iryx-ui/src/components/App.js";
 import { badgeTheme as f } from "./packages/iryx-ui/src/theme/badge.js";
 import p from "./packages/iryx-ui/src/components/Badge.js";
-import { breadcrumbTheme as m } from "./packages/iryx-ui/src/theme/breadcrumb.js";
-import h from "./packages/iryx-ui/src/components/Breadcrumb.js";
-import { buttonGroupContextKey as g, useButtonGroup as _ } from "./packages/iryx-ui/src/composables/button-group.js";
-import { buttonTheme as v } from "./packages/iryx-ui/src/theme/button.js";
-import y from "./packages/iryx-ui/src/components/Button.js";
-import { buttonGroupTheme as b } from "./packages/iryx-ui/src/theme/button-group.js";
-import x from "./packages/iryx-ui/src/components/ButtonGroup.js";
-import { cardTheme as S } from "./packages/iryx-ui/src/theme/card.js";
-import C from "./packages/iryx-ui/src/components/Card.js";
-import { checkboxTheme as w } from "./packages/iryx-ui/src/theme/checkbox.js";
-import T from "./packages/iryx-ui/src/components/Checkbox.js";
-import { formContextKey as E, formFieldContextKey as D, getByPath as O, isStandardSchema as k, issuePath as A, useForm as j, useFormField as M } from "./packages/iryx-ui/src/composables/form.js";
-import { fieldBase as N, inputTheme as P, textareaTheme as F } from "./packages/iryx-ui/src/theme/input.js";
-import { comboboxTheme as I } from "./packages/iryx-ui/src/theme/combobox.js";
-import L from "./packages/iryx-ui/src/components/Combobox.js";
-import { resolveConfirm as R, useConfirm as z, useConfirmState as B } from "./packages/iryx-ui/src/composables/confirm.js";
-import { dialogTheme as V } from "./packages/iryx-ui/src/theme/dialog.js";
-import H from "./packages/iryx-ui/src/components/Dialog.js";
-import U from "./packages/iryx-ui/src/components/ConfirmDialog.js";
-import { dropdownMenuTheme as W } from "./packages/iryx-ui/src/theme/dropdown-menu.js";
-import { isSeparator as G, isSubmenu as K } from "./packages/iryx-ui/src/composables/dropdown-menu.js";
-import q from "./packages/iryx-ui/src/components/DropdownMenu.js";
-import { emptyStateTheme as J } from "./packages/iryx-ui/src/theme/empty-state.js";
-import Y from "./packages/iryx-ui/src/components/EmptyState.js";
-import X from "./packages/iryx-ui/src/components/Form.js";
-import { labelTheme as Z } from "./packages/iryx-ui/src/theme/label.js";
-import Q from "./packages/iryx-ui/src/components/Label.js";
-import $ from "./packages/iryx-ui/src/components/FormField.js";
-import ee from "./packages/iryx-ui/src/components/Input.js";
-import { addDecimals as te, clampDecimal as ne, compareDecimals as re, formatDecimal as ie, formatForLocale as ae, isDecimal as oe, localeSeparators as se, parseDecimal as ce, parseFromLocale as le, roundDecimal as ue, toEditable as de } from "./packages/iryx-ui/src/composables/decimal.js";
-import { numberInputTheme as fe } from "./packages/iryx-ui/src/theme/number-input.js";
-import pe from "./packages/iryx-ui/src/components/NumberInput.js";
-import { paginationTheme as me } from "./packages/iryx-ui/src/theme/pagination.js";
-import he from "./packages/iryx-ui/src/components/Pagination.js";
-import { progressTheme as ge } from "./packages/iryx-ui/src/theme/progress.js";
-import _e from "./packages/iryx-ui/src/components/Progress.js";
-import { radioGroupTheme as ve } from "./packages/iryx-ui/src/theme/radio-group.js";
-import ye from "./packages/iryx-ui/src/components/RadioGroup.js";
-import { selectTheme as be } from "./packages/iryx-ui/src/theme/select.js";
-import xe from "./packages/iryx-ui/src/components/Select.js";
-import { separatorTheme as Se } from "./packages/iryx-ui/src/theme/separator.js";
-import Ce from "./packages/iryx-ui/src/components/Separator.js";
-import { skeletonTheme as we } from "./packages/iryx-ui/src/theme/skeleton.js";
-import Te from "./packages/iryx-ui/src/components/Skeleton.js";
-import { statTheme as Ee } from "./packages/iryx-ui/src/theme/stat.js";
-import De from "./packages/iryx-ui/src/components/Stat.js";
-import { stepperTheme as Oe } from "./packages/iryx-ui/src/theme/stepper.js";
-import ke from "./packages/iryx-ui/src/components/Stepper.js";
-import { switchTheme as Ae } from "./packages/iryx-ui/src/theme/switch.js";
-import je from "./packages/iryx-ui/src/components/Switch.js";
-import { tabsTheme as Me } from "./packages/iryx-ui/src/theme/tabs.js";
-import Ne from "./packages/iryx-ui/src/components/Tabs.js";
-import Pe from "./packages/iryx-ui/src/components/Textarea.js";
-import { useToast as Fe, useToastState as Ie } from "./packages/iryx-ui/src/composables/toast.js";
-import { toastTheme as Le } from "./packages/iryx-ui/src/theme/toast.js";
-import Re from "./packages/iryx-ui/src/components/Toaster.js";
-import { tooltipTheme as ze } from "./packages/iryx-ui/src/theme/tooltip.js";
-import Be from "./packages/iryx-ui/src/components/Tooltip.js";
-import { IryxUi as Ve, createIryxUi as He } from "./packages/iryx-ui/src/plugin.js";
-export { a as Alert, d as App, p as Badge, h as Breadcrumb, y as Button, x as ButtonGroup, C as Card, T as Checkbox, L as Combobox, U as ConfirmDialog, H as Dialog, q as DropdownMenu, Y as EmptyState, X as Form, $ as FormField, ee as Input, Ve as IryxUi, Q as Label, pe as NumberInput, he as Pagination, _e as Progress, ye as RadioGroup, xe as Select, Ce as Separator, Te as Skeleton, De as Stat, ke as Stepper, je as Switch, Ne as Tabs, Pe as Textarea, Re as Toaster, Be as Tooltip, te as addDecimals, i as alertTheme, c as applyTheme, f as badgeTheme, m as breadcrumbTheme, g as buttonGroupContextKey, b as buttonGroupTheme, v as buttonTheme, S as cardTheme, w as checkboxTheme, ne as clampDecimal, l as clearTheme, I as comboboxTheme, re as compareDecimals, e as componentNames, He as createIryxUi, t as defaultConfig, V as dialogTheme, W as dropdownMenuTheme, J as emptyStateTheme, N as fieldBase, E as formContextKey, D as formFieldContextKey, ie as formatDecimal, ae as formatForLocale, O as getByPath, o as initAppearance, P as inputTheme, n as iryxUiConfigKey, oe as isDecimal, G as isSeparator, k as isStandardSchema, K as isSubmenu, A as issuePath, Z as labelTheme, se as localeSeparators, fe as numberInputTheme, me as paginationTheme, ce as parseDecimal, le as parseFromLocale, ge as progressTheme, ve as radioGroupTheme, R as resolveConfirm, ue as roundDecimal, be as selectTheme, Se as separatorTheme, we as skeletonTheme, Ee as statTheme, Oe as stepperTheme, Ae as switchTheme, Me as tabsTheme, F as textareaTheme, u as themes, de as toEditable, Le as toastTheme, ze as tooltipTheme, s as useAppearance, _ as useButtonGroup, z as useConfirm, B as useConfirmState, j as useForm, M as useFormField, r as useIryxUiConfig, Fe as useToast, Ie as useToastState };
+import { bannerTheme as m } from "./packages/iryx-ui/src/theme/banner.js";
+import h from "./packages/iryx-ui/src/components/Banner.js";
+import { breadcrumbTheme as g } from "./packages/iryx-ui/src/theme/breadcrumb.js";
+import _ from "./packages/iryx-ui/src/components/Breadcrumb.js";
+import { buttonGroupContextKey as v, useButtonGroup as y } from "./packages/iryx-ui/src/composables/button-group.js";
+import { buttonTheme as b } from "./packages/iryx-ui/src/theme/button.js";
+import x from "./packages/iryx-ui/src/components/Button.js";
+import { buttonGroupTheme as S } from "./packages/iryx-ui/src/theme/button-group.js";
+import C from "./packages/iryx-ui/src/components/ButtonGroup.js";
+import { cardTheme as w } from "./packages/iryx-ui/src/theme/card.js";
+import T from "./packages/iryx-ui/src/components/Card.js";
+import { checkboxTheme as E } from "./packages/iryx-ui/src/theme/checkbox.js";
+import D from "./packages/iryx-ui/src/components/Checkbox.js";
+import { formContextKey as O, formFieldContextKey as k, getByPath as A, isStandardSchema as j, issuePath as M, useForm as N, useFormField as P } from "./packages/iryx-ui/src/composables/form.js";
+import { fieldBase as F, inputTheme as I, textareaTheme as L } from "./packages/iryx-ui/src/theme/input.js";
+import { comboboxTheme as R } from "./packages/iryx-ui/src/theme/combobox.js";
+import z from "./packages/iryx-ui/src/components/Combobox.js";
+import { resolveConfirm as B, useConfirm as V, useConfirmState as H } from "./packages/iryx-ui/src/composables/confirm.js";
+import { dialogTheme as U } from "./packages/iryx-ui/src/theme/dialog.js";
+import W from "./packages/iryx-ui/src/components/Dialog.js";
+import G from "./packages/iryx-ui/src/components/ConfirmDialog.js";
+import { dropdownMenuTheme as K } from "./packages/iryx-ui/src/theme/dropdown-menu.js";
+import { isSeparator as q, isSubmenu as J } from "./packages/iryx-ui/src/composables/dropdown-menu.js";
+import Y from "./packages/iryx-ui/src/components/DropdownMenu.js";
+import { emptyStateTheme as X } from "./packages/iryx-ui/src/theme/empty-state.js";
+import Z from "./packages/iryx-ui/src/components/EmptyState.js";
+import Q from "./packages/iryx-ui/src/components/Form.js";
+import { labelTheme as $ } from "./packages/iryx-ui/src/theme/label.js";
+import ee from "./packages/iryx-ui/src/components/Label.js";
+import te from "./packages/iryx-ui/src/components/FormField.js";
+import ne from "./packages/iryx-ui/src/components/Input.js";
+import { addDecimals as re, clampDecimal as ie, compareDecimals as ae, formatDecimal as oe, formatForLocale as se, isDecimal as ce, localeSeparators as le, parseDecimal as ue, parseFromLocale as de, roundDecimal as fe, toEditable as pe } from "./packages/iryx-ui/src/composables/decimal.js";
+import { numberInputTheme as me } from "./packages/iryx-ui/src/theme/number-input.js";
+import he from "./packages/iryx-ui/src/components/NumberInput.js";
+import { paginationTheme as ge } from "./packages/iryx-ui/src/theme/pagination.js";
+import _e from "./packages/iryx-ui/src/components/Pagination.js";
+import { progressTheme as ve } from "./packages/iryx-ui/src/theme/progress.js";
+import ye from "./packages/iryx-ui/src/components/Progress.js";
+import { radioGroupTheme as be } from "./packages/iryx-ui/src/theme/radio-group.js";
+import xe from "./packages/iryx-ui/src/components/RadioGroup.js";
+import { selectTheme as Se } from "./packages/iryx-ui/src/theme/select.js";
+import Ce from "./packages/iryx-ui/src/components/Select.js";
+import { separatorTheme as we } from "./packages/iryx-ui/src/theme/separator.js";
+import Te from "./packages/iryx-ui/src/components/Separator.js";
+import { skeletonTheme as Ee } from "./packages/iryx-ui/src/theme/skeleton.js";
+import De from "./packages/iryx-ui/src/components/Skeleton.js";
+import { statTheme as Oe } from "./packages/iryx-ui/src/theme/stat.js";
+import ke from "./packages/iryx-ui/src/components/Stat.js";
+import { stepperTheme as Ae } from "./packages/iryx-ui/src/theme/stepper.js";
+import je from "./packages/iryx-ui/src/components/Stepper.js";
+import { switchTheme as Me } from "./packages/iryx-ui/src/theme/switch.js";
+import Ne from "./packages/iryx-ui/src/components/Switch.js";
+import { getRowValue as Pe, useDataTable as Fe } from "./packages/iryx-ui/src/composables/data-table.js";
+import { tableTheme as Ie } from "./packages/iryx-ui/src/theme/table.js";
+import Le from "./packages/iryx-ui/src/components/Table.js";
+import { tabsTheme as Re } from "./packages/iryx-ui/src/theme/tabs.js";
+import ze from "./packages/iryx-ui/src/components/Tabs.js";
+import Be from "./packages/iryx-ui/src/components/Textarea.js";
+import { useToast as Ve, useToastState as He } from "./packages/iryx-ui/src/composables/toast.js";
+import { toastTheme as Ue } from "./packages/iryx-ui/src/theme/toast.js";
+import We from "./packages/iryx-ui/src/components/Toaster.js";
+import { tooltipTheme as Ge } from "./packages/iryx-ui/src/theme/tooltip.js";
+import Ke from "./packages/iryx-ui/src/components/Tooltip.js";
+import { IryxUi as qe, createIryxUi as Je } from "./packages/iryx-ui/src/plugin.js";
+export { a as Alert, d as App, p as Badge, h as Banner, _ as Breadcrumb, x as Button, C as ButtonGroup, T as Card, D as Checkbox, z as Combobox, G as ConfirmDialog, W as Dialog, Y as DropdownMenu, Z as EmptyState, Q as Form, te as FormField, ne as Input, qe as IryxUi, ee as Label, he as NumberInput, _e as Pagination, ye as Progress, xe as RadioGroup, Ce as Select, Te as Separator, De as Skeleton, ke as Stat, je as Stepper, Ne as Switch, Le as Table, ze as Tabs, Be as Textarea, We as Toaster, Ke as Tooltip, re as addDecimals, i as alertTheme, c as applyTheme, f as badgeTheme, m as bannerTheme, g as breadcrumbTheme, v as buttonGroupContextKey, S as buttonGroupTheme, b as buttonTheme, w as cardTheme, E as checkboxTheme, ie as clampDecimal, l as clearTheme, R as comboboxTheme, ae as compareDecimals, e as componentNames, Je as createIryxUi, t as defaultConfig, U as dialogTheme, K as dropdownMenuTheme, X as emptyStateTheme, F as fieldBase, O as formContextKey, k as formFieldContextKey, oe as formatDecimal, se as formatForLocale, A as getByPath, Pe as getRowValue, o as initAppearance, I as inputTheme, n as iryxUiConfigKey, ce as isDecimal, q as isSeparator, j as isStandardSchema, J as isSubmenu, M as issuePath, $ as labelTheme, le as localeSeparators, me as numberInputTheme, ge as paginationTheme, ue as parseDecimal, de as parseFromLocale, ve as progressTheme, be as radioGroupTheme, B as resolveConfirm, fe as roundDecimal, Se as selectTheme, we as separatorTheme, Ee as skeletonTheme, Oe as statTheme, Ae as stepperTheme, Me as switchTheme, Ie as tableTheme, Re as tabsTheme, L as textareaTheme, u as themes, pe as toEditable, Ue as toastTheme, Ge as tooltipTheme, s as useAppearance, y as useButtonGroup, V as useConfirm, H as useConfirmState, Fe as useDataTable, N as useForm, P as useFormField, r as useIryxUiConfig, Ve as useToast, He as useToastState };

package/dist/node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js

@@ -196,6 +196,20 @@ var e = [
 	strokeLinejoin: "round",
 	strokeWidth: "1.5",
 	key: "0"
+}]], f = [["path", {
+	d: "M18 14C18 14 13.5811 19 12 19C10.4188 19 6 14 6 14",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: "1.5",
+	key: "0"
+}], ["path", {
+	d: "M18 9.99996C18 9.99996 13.5811 5.00001 12 5C10.4188 4.99999 6 10 6 10",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: "1.5",
+	key: "1"
 }]];
 //#endregion
-export { e as Alert02Icon, t as AlertCircleIcon, n as ArrowDown01Icon, r as ArrowLeft01Icon, i as ArrowRight01Icon, a as ArrowUp01Icon, o as Cancel01Icon, s as CheckmarkCircle02Icon, c as InformationCircleIcon, l as Loading03Icon, u as MinusSignIcon, d as Tick02Icon };
+export { e as Alert02Icon, t as AlertCircleIcon, n as ArrowDown01Icon, r as ArrowLeft01Icon, i as ArrowRight01Icon, a as ArrowUp01Icon, o as Cancel01Icon, s as CheckmarkCircle02Icon, c as InformationCircleIcon, l as Loading03Icon, u as MinusSignIcon, d as Tick02Icon, f as UnfoldMoreIcon };

package/dist/packages/iryx-ui/src/component-names.js

@@ -1,4 +1,4 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Alert.App.Badge.Breadcrumb.Button.ButtonGroup.Card.Checkbox.Combobox.ConfirmDialog.Dialog.DropdownMenu.EmptyState.Form.FormField.Input.Label.NumberInput.Pagination.Progress.RadioGroup.Select.Separator.Skeleton.Stat.Stepper.Switch.Tabs.Textarea.Toaster.Tooltip".split(".");
+var e = /* @__PURE__ */ "Alert.App.Badge.Banner.Breadcrumb.Button.ButtonGroup.Card.Checkbox.Combobox.ConfirmDialog.Dialog.DropdownMenu.EmptyState.Form.FormField.Input.Label.NumberInput.Pagination.Progress.RadioGroup.Select.Separator.Skeleton.Stat.Stepper.Switch.Table.Tabs.Textarea.Toaster.Tooltip".split(".");
 //#endregion
 export { e as componentNames };

package/dist/packages/iryx-ui/src/components/Alert.vue_vue_type_script_setup_true_lang.js

@@ -2,12 +2,12 @@ import { Alert02Icon as e, AlertCircleIcon as t, Cancel01Icon as n, CheckmarkCir
 import { useIryxUiConfig as a } from "../config.js";
 import { alertTheme as o } from "../theme/alert.js";
 import s from "./Icon.js";
-import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
-import { Primitive as S } from "reka-ui";
+import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, openBlock as v, renderSlot as y, toDisplayString as b, unref as x, useModel as S, withCtx as C } from "vue";
+import { Primitive as w } from "reka-ui";
 //#region src/components/Alert.vue?vue&type=script&setup=true&lang.ts
-var C = ["aria-label"], w = /*@__PURE__*/ h({
+var T = ["aria-label"], E = /*@__PURE__*/ h({
 	__name: "Alert",
-	props: {
+	props: /*@__PURE__*/ g({
 		as: { default: "div" },
 		variant: {},
 		title: {},
@@ -24,52 +24,68 @@ var C = ["aria-label"], w = /*@__PURE__*/ h({
 		},
 		class: {},
 		ui: {}
-	},
-	emits: ["close"],
+	}, {
+		open: {
+			type: Boolean,
+			default: !0
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ g(["close"], ["update:open"]),
 	setup(h) {
-		let w = h, T = {
+		let g = h, E = S(h, "open"), D = {
 			info: i,
 			success: r,
 			warning: e,
 			danger: t
-		}, E = c(() => {
-			if (w.icon !== !1) return w.icon ?? T[w.variant ?? "info"];
-		}), D = c(() => w.variant === "danger" || w.variant === "warning" ? "alert" : "status"), O = a(), k = c(() => w.unstyled ?? O.unstyled), A = c(() => o({
-			variant: w.variant,
-			withTitle: !!w.title
-		})), j = c(() => k.value ? [w.ui?.root, w.class] : A.value.root({ class: [w.ui?.root, w.class] })), M = c(() => k.value ? w.ui?.icon : A.value.icon({ class: w.ui?.icon })), N = c(() => k.value ? w.ui?.content : A.value.content({ class: w.ui?.content })), P = c(() => k.value ? w.ui?.title : A.value.title({ class: w.ui?.title })), F = c(() => k.value ? w.ui?.description : A.value.description({ class: w.ui?.description })), I = c(() => k.value ? w.ui?.close : A.value.close({ class: w.ui?.close }));
-		return (e, t) => (_(), l(b(S), {
-			as: w.as,
-			role: D.value,
-			class: g(j.value)
+		}, O = c(() => {
+			if (g.icon !== !1) return g.icon ?? D[g.variant ?? "info"];
+		}), k = c(() => g.variant === "danger" || g.variant === "warning" ? "alert" : "status"), A = a(), j = c(() => g.unstyled ?? A.unstyled), M = c(() => o({
+			variant: g.variant,
+			withTitle: !!g.title
+		})), N = c(() => j.value ? [g.ui?.root, g.class] : M.value.root({ class: [g.ui?.root, g.class] })), P = c(() => j.value ? g.ui?.icon : M.value.icon({ class: g.ui?.icon })), F = c(() => j.value ? g.ui?.content : M.value.content({ class: g.ui?.content })), I = c(() => j.value ? g.ui?.title : M.value.title({ class: g.ui?.title })), L = c(() => j.value ? g.ui?.description : M.value.description({ class: g.ui?.description })), R = c(() => j.value ? g.ui?.actions : M.value.actions({ class: g.ui?.actions })), z = c(() => j.value ? g.ui?.close : M.value.close({ class: g.ui?.close }));
+		return (e, t) => E.value ? (v(), l(x(w), {
+			key: 0,
+			as: g.as,
+			role: k.value,
+			class: _(N.value)
 		}, {
-			default: x(() => [
-				E.value || e.$slots.icon ? (_(), d("div", {
+			default: C(() => [
+				O.value || e.$slots.icon ? (v(), d("div", {
 					key: 0,
-					class: g(M.value)
-				}, [v(e.$slots, "icon", {}, () => [m(s, { icon: E.value }, null, 8, ["icon"])])], 2)) : u("", !0),
-				f("div", { class: g(N.value) }, [w.title || e.$slots.title ? (_(), d("p", {
-					key: 0,
-					class: g(P.value)
-				}, [v(e.$slots, "title", {}, () => [p(y(w.title), 1)])], 2)) : u("", !0), w.description || e.$slots.default ? (_(), d("div", {
-					key: 1,
-					class: g(F.value)
-				}, [v(e.$slots, "default", {}, () => [p(y(w.description), 1)])], 2)) : u("", !0)], 2),
-				w.closable ? (_(), d("button", {
+					class: _(P.value)
+				}, [y(e.$slots, "icon", {}, () => [m(s, { icon: O.value }, null, 8, ["icon"])])], 2)) : u("", !0),
+				f("div", { class: _(F.value) }, [
+					g.title || e.$slots.title ? (v(), d("p", {
+						key: 0,
+						class: _(I.value)
+					}, [y(e.$slots, "title", {}, () => [p(b(g.title), 1)])], 2)) : u("", !0),
+					g.description || e.$slots.default ? (v(), d("div", {
+						key: 1,
+						class: _(L.value)
+					}, [y(e.$slots, "default", {}, () => [p(b(g.description), 1)])], 2)) : u("", !0),
+					e.$slots.actions ? (v(), d("div", {
+						key: 2,
+						class: _(R.value)
+					}, [y(e.$slots, "actions")], 2)) : u("", !0)
+				], 2),
+				g.closable ? (v(), d("button", {
 					key: 1,
 					type: "button",
-					"aria-label": w.closeLabel,
-					class: g(I.value),
-					onClick: t[0] ||= (t) => e.$emit("close")
-				}, [v(e.$slots, "close", {}, () => [m(s, { icon: b(n) }, null, 8, ["icon"])])], 10, C)) : u("", !0)
+					"aria-label": g.closeLabel,
+					class: _(z.value),
+					onClick: t[0] ||= (t) => {
+						E.value = !1, e.$emit("close");
+					}
+				}, [y(e.$slots, "close", {}, () => [m(s, { icon: x(n) }, null, 8, ["icon"])])], 10, T)) : u("", !0)
 			]),
 			_: 3
 		}, 8, [
 			"as",
 			"role",
 			"class"
-		]));
+		])) : u("", !0);
 	}
 });
 //#endregion
-export { w as default };
+export { E as default };

package/dist/packages/iryx-ui/src/components/Badge.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,6 @@ var h = /*@__PURE__*/ s({
 		as: { default: "span" },
 		asChild: { type: Boolean },
 		variant: {},
-		tone: {},
 		size: {},
 		dot: { type: Boolean },
 		label: {},
@@ -23,7 +22,7 @@ var h = /*@__PURE__*/ s({
 	setup(s) {
 		let h = s, g = e(), _ = n(() => h.unstyled ?? g.unstyled), v = n(() => t({
 			variant: h.variant,
-			tone: h.tone,
+			withDot: h.dot ?? !1,
 			size: h.size
 		})), y = n(() => _.value ? [h.ui?.root, h.class] : v.value.root({ class: [h.ui?.root, h.class] })), b = n(() => _.value ? h.ui?.dot : v.value.dot({ class: h.ui?.dot }));
 		return (e, t) => (l(), r(f(m), {

package/dist/packages/iryx-ui/src/components/Banner.js

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

package/dist/packages/iryx-ui/src/components/Banner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,93 @@
+import { Cancel01Icon as e } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
+import { useIryxUiConfig as t } from "../config.js";
+import n from "./Icon.js";
+import { bannerTheme as r } from "../theme/banner.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, unref as _, useModel as v, withCtx as y } from "vue";
+import { Primitive as b } from "reka-ui";
+//#region src/components/Banner.vue?vue&type=script&setup=true&lang.ts
+var x = ["aria-label"], S = /*@__PURE__*/ d({
+	__name: "Banner",
+	props: /*@__PURE__*/ f({
+		as: { default: "div" },
+		variant: {},
+		position: {},
+		title: {},
+		description: {},
+		icon: {},
+		contained: {
+			type: Boolean,
+			default: void 0
+		},
+		align: {},
+		closable: { type: Boolean },
+		closeLabel: { default: "Dismiss" },
+		label: { default: "Announcement" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		open: {
+			type: Boolean,
+			default: !0
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f(["close"], ["update:open"]),
+	setup(d) {
+		let f = d, S = v(d, "open"), C = t(), w = i(() => f.unstyled ?? C.unstyled), T = i(() => r({
+			variant: f.variant,
+			position: f.position,
+			contained: f.contained ?? !1,
+			align: f.align
+		})), E = i(() => w.value ? [f.ui?.root, f.class] : T.value.root({ class: [f.ui?.root, f.class] }));
+		function D(e) {
+			let t = f.ui?.[e];
+			return w.value ? t : T.value[e]({ class: t });
+		}
+		return (t, r) => S.value ? (m(), a(_(b), {
+			key: 0,
+			as: f.as,
+			role: "region",
+			"aria-label": f.label,
+			class: p(E.value)
+		}, {
+			default: y(() => [c("div", { class: p(D("container")) }, [
+				f.icon || t.$slots.icon ? (m(), s("span", {
+					key: 0,
+					class: p(D("icon"))
+				}, [h(t.$slots, "icon", {}, () => [u(n, { icon: f.icon }, null, 8, ["icon"])])], 2)) : o("", !0),
+				c("p", { class: p(D("content")) }, [
+					f.title || t.$slots.title ? (m(), s("strong", {
+						key: 0,
+						class: p(D("title"))
+					}, [h(t.$slots, "title", {}, () => [l(g(f.title), 1)])], 2)) : o("", !0),
+					r[1] ||= l(" " + g(" ") + " ", -1),
+					h(t.$slots, "default", {}, () => [l(g(f.description), 1)])
+				], 2),
+				t.$slots.actions ? (m(), s("span", {
+					key: 1,
+					class: p(D("actions"))
+				}, [h(t.$slots, "actions")], 2)) : o("", !0),
+				f.closable ? (m(), s("button", {
+					key: 2,
+					type: "button",
+					"aria-label": f.closeLabel,
+					class: p(D("close")),
+					onClick: r[0] ||= (e) => {
+						S.value = !1, t.$emit("close");
+					}
+				}, [h(t.$slots, "close", {}, () => [u(n, { icon: _(e) }, null, 8, ["icon"])])], 10, x)) : o("", !0)
+			], 2)]),
+			_: 3
+		}, 8, [
+			"as",
+			"aria-label",
+			"class"
+		])) : o("", !0);
+	}
+});
+//#endregion
+export { S as default };

package/dist/packages/iryx-ui/src/components/Pagination.vue_vue_type_script_setup_true_lang.js

@@ -16,6 +16,7 @@ var D = /*@__PURE__*/ d({
 			default: !0
 		},
 		size: {},
+		align: {},
 		prevLabel: { default: "Previous page" },
 		nextLabel: { default: "Next page" },
 		label: { default: "Pagination" },
@@ -31,7 +32,10 @@ var D = /*@__PURE__*/ d({
 	}),
 	emits: ["update:page"],
 	setup(d) {
-		let f = d, D = y(d, "page"), O = n(), k = o(() => f.unstyled ?? O.unstyled), A = o(() => i({ size: f.size })), j = o(() => k.value ? [f.ui?.root, f.class] : A.value.root({ class: [f.ui?.root, f.class] })), M = o(() => k.value ? f.ui?.list : A.value.list({ class: f.ui?.list })), N = o(() => k.value ? f.ui?.ellipsis : A.value.ellipsis({ class: f.ui?.ellipsis }));
+		let f = d, D = y(d, "page"), O = n(), k = o(() => f.unstyled ?? O.unstyled), A = o(() => i({
+			size: f.size,
+			align: f.align
+		})), j = o(() => k.value ? [f.ui?.root, f.class] : A.value.root({ class: [f.ui?.root, f.class] })), M = o(() => k.value ? f.ui?.list : A.value.list({ class: f.ui?.list })), N = o(() => k.value ? f.ui?.ellipsis : A.value.ellipsis({ class: f.ui?.ellipsis }));
 		function P(e) {
 			return k.value ? f.ui?.item : [A.value.item({ class: f.ui?.item }), e ? A.value.active() : A.value.inactive()];
 		}

package/dist/packages/iryx-ui/src/components/Table.js

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