iryx-ui 0.4.0 → 0.6.0

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

@@ -0,0 +1,217 @@
+import { ArrowDown01Icon as e, ArrowRight01Icon as t, ArrowUp01Icon as n, UnfoldMoreIcon as r } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
+import { useIryxUiConfig as i } from "../config.js";
+import a from "./Icon.js";
+import o from "./Checkbox.js";
+import s from "./Skeleton.js";
+import { useDataTable as c } from "../composables/data-table.js";
+import { tableTheme as l } from "../theme/table.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, mergeModels as y, normalizeClass as b, normalizeStyle as x, openBlock as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useModel as D, withModifiers as O } from "vue";
+//#region src/components/Table.vue?vue&type=script&setup=true&lang.ts
+var k = ["aria-label", "aria-busy"], A = ["aria-sort"], j = ["onClick"], M = { key: 1 }, N = ["colspan"], ee = ["data-selected", "onClick"], P = ["aria-expanded", "onClick"], F = ["colspan"], I = /*@__PURE__*/ v({
+	__name: "Table",
+	props: /*@__PURE__*/ y({
+		rows: { default: () => [] },
+		columns: { default: () => [] },
+		total: { default: void 0 },
+		rowKey: { default: "id" },
+		loading: { type: Boolean },
+		loadingRows: { default: 5 },
+		selectable: { type: Boolean },
+		isRowSelectable: {},
+		expandable: { type: Boolean },
+		canExpandRow: {},
+		clickableRows: { type: Boolean },
+		striped: { type: Boolean },
+		hoverable: {
+			type: Boolean,
+			default: void 0
+		},
+		stickyHeader: { type: Boolean },
+		size: {},
+		emptyText: { default: "No results." },
+		label: {},
+		caption: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		sort: { default: null },
+		sortModifiers: {},
+		page: { default: 1 },
+		pageModifiers: {},
+		perPage: { default: 10 },
+		perPageModifiers: {},
+		selection: { default: () => [] },
+		selectionModifiers: {},
+		expanded: { default: () => [] },
+		expandedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ y(["rowClick"], [
+		"update:sort",
+		"update:page",
+		"update:perPage",
+		"update:selection",
+		"update:expanded"
+	]),
+	setup(v, { expose: y, emit: I }) {
+		let L = v, R = I, z = D(v, "sort"), B = D(v, "page"), V = D(v, "perPage"), H = D(v, "selection"), U = D(v, "expanded"), W = c({
+			rows: () => L.rows,
+			columns: () => L.columns,
+			total: () => L.total,
+			rowKey: () => L.rowKey,
+			isRowSelectable: L.isRowSelectable,
+			sort: z,
+			page: B,
+			perPage: V,
+			selection: H,
+			expanded: U
+		}), G = i(), K = d(() => L.unstyled ?? G.unstyled), q = d(() => l({
+			size: L.size,
+			striped: L.striped,
+			hoverable: L.hoverable ?? !0,
+			stickyHeader: L.stickyHeader,
+			clickable: L.clickableRows
+		}));
+		function J(e, t) {
+			let n = L.ui?.[e];
+			return K.value ? [n, t] : q.value[e]({ class: [n, t] });
+		}
+		function Y(e) {
+			return K.value ? void 0 : q.value[e]();
+		}
+		let X = d(() => K.value ? [L.ui?.root, L.class] : q.value.root({ class: [L.ui?.root, L.class] }));
+		function Z(e) {
+			if (K.value) return;
+			let t = e.align ?? (e.numeric ? "end" : "start");
+			if (t !== "start") return t === "end" ? "text-end" : "text-center";
+		}
+		function Q(e) {
+			return !K.value && e.numeric ? "tabular-nums" : void 0;
+		}
+		function te(e, t) {
+			return typeof t.class == "function" ? t.class(e) : t.class;
+		}
+		function ne(e, t) {
+			return typeof t.hidden == "function" ? t.hidden(e) : !1;
+		}
+		let $ = d(() => W.visibleColumns.value.length + +!!L.selectable + +!!L.expandable), re = d(() => L.loading && W.pageRows.value.length === 0), ie = d(() => !L.loading && W.pageRows.value.length === 0);
+		function ae(e) {
+			if (!e.sortable) return;
+			let t = W.sortOrderFor(e);
+			return t === "asc" ? "ascending" : t === "desc" ? "descending" : "none";
+		}
+		function oe(e) {
+			L.clickableRows && R("rowClick", e);
+		}
+		return y({ table: W }), (i, c) => (S(), m("div", { class: b(X.value) }, [h("table", {
+			class: b(J("table")),
+			"aria-label": L.label,
+			"aria-busy": L.loading || void 0
+		}, [
+			L.caption || i.$slots.caption ? (S(), m("caption", {
+				key: 0,
+				class: b(J("caption"))
+			}, [w(i.$slots, "caption", {}, () => [g(T(L.caption), 1)])], 2)) : p("", !0),
+			h("thead", { class: b(J("thead")) }, [h("tr", null, [
+				L.expandable ? (S(), m("th", {
+					key: 0,
+					class: b(Y("headGutter"))
+				}, null, 2)) : p("", !0),
+				L.selectable ? (S(), m("th", {
+					key: 1,
+					class: b(Y("headGutter"))
+				}, [_(o, {
+					"model-value": E(W).headerSelection.value,
+					"aria-label": "Select all rows on this page",
+					"onUpdate:modelValue": E(W).toggleAll
+				}, null, 8, ["model-value", "onUpdate:modelValue"])], 2)) : p("", !0),
+				(S(!0), m(u, null, C(E(W).visibleColumns.value, (t) => (S(), m("th", {
+					key: t.key,
+					class: b(J("th", Z(t))),
+					style: x(t.width ? { width: t.width } : void 0),
+					"aria-sort": ae(t),
+					scope: "col"
+				}, [w(i.$slots, `header-${t.key}`, { column: t }, () => [t.sortable ? (S(), m("button", {
+					key: 0,
+					type: "button",
+					class: b(Y("sortButton")),
+					onClick: (e) => E(W).toggleSort(t)
+				}, [g(T(t.label ?? t.key) + " ", 1), _(a, {
+					icon: E(W).sortOrderFor(t) === "asc" ? E(n) : E(W).sortOrderFor(t) === "desc" ? E(e) : E(r),
+					class: b(Y("sortIcon"))
+				}, null, 8, ["icon", "class"])], 10, j)) : (S(), m(u, { key: 1 }, [g(T(t.label ?? t.key), 1)], 64))])], 14, A))), 128))
+			])], 2),
+			h("tbody", { class: b(J("tbody")) }, [re.value ? (S(!0), m(u, { key: 0 }, C(L.loadingRows, (e) => (S(), m("tr", {
+				key: `skeleton-${e}`,
+				class: b(J("tr"))
+			}, [
+				L.expandable ? (S(), m("td", {
+					key: 0,
+					class: b(Y("gutter"))
+				}, [_(s, { class: "size-4" })], 2)) : p("", !0),
+				L.selectable ? (S(), m("td", {
+					key: 1,
+					class: b(Y("gutter"))
+				}, [_(s, { class: "size-4" })], 2)) : p("", !0),
+				(S(!0), m(u, null, C(E(W).visibleColumns.value, (e) => (S(), m("td", {
+					key: e.key,
+					class: b(J("td"))
+				}, [_(s, { class: "h-4 w-24" })], 2))), 128))
+			], 2))), 128)) : ie.value ? (S(), m("tr", M, [h("td", {
+				colspan: $.value,
+				class: b(J("empty"))
+			}, [w(i.$slots, "empty", {}, () => [g(T(L.emptyText), 1)])], 10, N)])) : (S(!0), m(u, { key: 2 }, C(E(W).pageRows.value, (e) => (S(), m(u, { key: E(W).keyOf(e) }, [h("tr", {
+				class: b([J("tr"), !K.value && E(W).isSelected(e) ? "bg-primary/5" : void 0]),
+				"data-selected": E(W).isSelected(e) || void 0,
+				onClick: (t) => oe(e)
+			}, [
+				L.expandable ? (S(), m("td", {
+					key: 0,
+					class: b(Y("gutter")),
+					onClick: c[0] ||= O(() => {}, ["stop"])
+				}, [!L.canExpandRow || L.canExpandRow(e) ? (S(), m("button", {
+					key: 0,
+					type: "button",
+					class: b([Y("expandButton"), E(W).isExpanded(e) && !K.value ? "rotate-90" : void 0]),
+					"aria-expanded": E(W).isExpanded(e),
+					"aria-label": "Toggle row details",
+					onClick: (t) => E(W).toggleExpanded(e)
+				}, [_(a, { icon: E(t) }, null, 8, ["icon"])], 10, P)) : p("", !0)], 2)) : p("", !0),
+				L.selectable ? (S(), m("td", {
+					key: 1,
+					class: b(Y("gutter")),
+					onClick: c[1] ||= O(() => {}, ["stop"])
+				}, [!L.isRowSelectable || L.isRowSelectable(e) ? (S(), f(o, {
+					key: 0,
+					"model-value": E(W).isSelected(e),
+					"aria-label": "Select row",
+					"onUpdate:modelValue": (t) => E(W).toggleRow(e)
+				}, null, 8, ["model-value", "onUpdate:modelValue"])) : p("", !0)], 2)) : p("", !0),
+				(S(!0), m(u, null, C(E(W).visibleColumns.value, (t) => (S(), m("td", {
+					key: t.key,
+					class: b(J("td", [
+						Z(t),
+						Q(t),
+						te(e, t)
+					].filter(Boolean).join(" ") || void 0))
+				}, [ne(e, t) ? p("", !0) : w(i.$slots, `cell-${t.key}`, {
+					key: 0,
+					row: e,
+					column: t,
+					value: E(W).getRowValue(e, t.key)
+				}, () => [g(T(E(W).getRowValue(e, t.key)), 1)])], 2))), 128))
+			], 10, ee), L.expandable && E(W).isExpanded(e) ? (S(), m("tr", {
+				key: 0,
+				class: b([J("tr"), Y("expandedRow")])
+			}, [h("td", {
+				colspan: $.value,
+				class: b(Y("expandedCell"))
+			}, [w(i.$slots, "expanded", { row: e })], 10, F)], 2)) : p("", !0)], 64))), 128))], 2)
+		], 10, k)], 2));
+	}
+});
+//#endregion
+export { I as default };

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

@@ -2,65 +2,71 @@ import { __exportAll as e } from "../../../../_virtual/_rolldown/runtime.js";
 import t from "./Alert.js";
 import n from "./App.js";
 import r from "./Badge.js";
-import i from "./Breadcrumb.js";
-import a from "./Button.js";
-import o from "./ButtonGroup.js";
-import s from "./Card.js";
-import c from "./Checkbox.js";
-import l from "./Dialog.js";
-import u from "./ConfirmDialog.js";
-import d from "./DropdownMenu.js";
-import f from "./EmptyState.js";
-import p from "./Form.js";
-import m from "./Label.js";
-import h from "./FormField.js";
-import g from "./Input.js";
-import _ from "./NumberInput.js";
-import v from "./Pagination.js";
-import y from "./Progress.js";
-import b from "./RadioGroup.js";
-import x from "./Select.js";
-import S from "./Separator.js";
-import C from "./Skeleton.js";
-import w from "./Stat.js";
-import T from "./Stepper.js";
-import E from "./Switch.js";
-import D from "./Tabs.js";
-import O from "./Textarea.js";
-import k from "./Toaster.js";
-import A from "./Tooltip.js";
+import i from "./Banner.js";
+import a from "./Breadcrumb.js";
+import o from "./Button.js";
+import s from "./ButtonGroup.js";
+import c from "./Card.js";
+import l from "./Checkbox.js";
+import u from "./Combobox.js";
+import d from "./Dialog.js";
+import f from "./ConfirmDialog.js";
+import p from "./DropdownMenu.js";
+import m from "./EmptyState.js";
+import h from "./Form.js";
+import g from "./Label.js";
+import _ from "./FormField.js";
+import v from "./Input.js";
+import y from "./NumberInput.js";
+import b from "./Pagination.js";
+import x from "./Progress.js";
+import S from "./RadioGroup.js";
+import C from "./Select.js";
+import w from "./Separator.js";
+import T from "./Skeleton.js";
+import E from "./Stat.js";
+import D from "./Stepper.js";
+import O from "./Switch.js";
+import k from "./Table.js";
+import A from "./Tabs.js";
+import j from "./Textarea.js";
+import M from "./Toaster.js";
+import N from "./Tooltip.js";
 //#region src/components/index.ts
-var j = /* @__PURE__ */ e({
+var P = /* @__PURE__ */ e({
 	Alert: () => t,
 	App: () => n,
 	Badge: () => r,
-	Breadcrumb: () => i,
-	Button: () => a,
-	ButtonGroup: () => o,
-	Card: () => s,
-	Checkbox: () => c,
-	ConfirmDialog: () => u,
-	Dialog: () => l,
-	DropdownMenu: () => d,
-	EmptyState: () => f,
-	Form: () => p,
-	FormField: () => h,
-	Input: () => g,
-	Label: () => m,
-	NumberInput: () => _,
-	Pagination: () => v,
-	Progress: () => y,
-	RadioGroup: () => b,
-	Select: () => x,
-	Separator: () => S,
-	Skeleton: () => C,
-	Stat: () => w,
-	Stepper: () => T,
-	Switch: () => E,
-	Tabs: () => D,
-	Textarea: () => O,
-	Toaster: () => k,
-	Tooltip: () => A
+	Banner: () => i,
+	Breadcrumb: () => a,
+	Button: () => o,
+	ButtonGroup: () => s,
+	Card: () => c,
+	Checkbox: () => l,
+	Combobox: () => u,
+	ConfirmDialog: () => f,
+	Dialog: () => d,
+	DropdownMenu: () => p,
+	EmptyState: () => m,
+	Form: () => h,
+	FormField: () => _,
+	Input: () => v,
+	Label: () => g,
+	NumberInput: () => y,
+	Pagination: () => b,
+	Progress: () => x,
+	RadioGroup: () => S,
+	Select: () => C,
+	Separator: () => w,
+	Skeleton: () => T,
+	Stat: () => E,
+	Stepper: () => D,
+	Switch: () => O,
+	Table: () => k,
+	Tabs: () => A,
+	Textarea: () => j,
+	Toaster: () => M,
+	Tooltip: () => N
 });
 //#endregion
-export { j as components_exports };
+export { P as components_exports };

package/dist/packages/iryx-ui/src/composables/data-table.js

@@ -0,0 +1,106 @@
+import { computed as e, ref as t } from "vue";
+//#region src/composables/data-table.ts
+function n(e, n) {
+	return e || t(n);
+}
+function r(e) {
+	return e == null || e === "";
+}
+function i(e, t) {
+	return t.split(".").reduce((e, t) => e?.[t], e);
+}
+function a(e, t) {
+	return typeof e == "number" && typeof t == "number" ? e - t : typeof e == "boolean" && typeof t == "boolean" ? Number(e) - Number(t) : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : String(e).localeCompare(String(t), void 0, {
+		numeric: !0,
+		sensitivity: "base"
+	});
+}
+function o(t) {
+	let o = n(t.sort, null), s = n(t.page, 1), c = n(t.perPage, 10), l = n(t.selection, []), u = n(t.expanded, []), d = e(() => t.total?.() !== void 0), f = e(() => t.rowKey?.() ?? "id"), p = e(() => t.columns().filter((e) => e.hidden !== !0)), m = e(() => {
+		let e = t.rows(), n = o.value;
+		if (d.value || !n) return e;
+		let s = t.columns().find((e) => (e.sortKey ?? e.key) === n.key)?.key ?? n.key, c = n.order === "asc" ? 1 : -1;
+		return [...e].sort((e, t) => {
+			let n = i(e, s), o = i(t, s);
+			return r(n) || r(o) ? r(n) && r(o) ? 0 : r(n) ? 1 : -1 : a(n, o) * c;
+		});
+	}), h = e(() => t.total?.() ?? m.value.length), g = e(() => Math.max(1, Math.ceil(h.value / Math.max(1, c.value)))), _ = e(() => {
+		if (d.value) return m.value;
+		let e = (s.value - 1) * c.value;
+		return m.value.slice(e, e + c.value);
+	});
+	function v(e) {
+		return i(e, f.value);
+	}
+	function y(e) {
+		if (!e.sortable) return;
+		let t = e.sortKey ?? e.key, n = o.value;
+		n?.key === t ? n.order === "asc" ? o.value = {
+			key: t,
+			order: "desc"
+		} : o.value = null : o.value = {
+			key: t,
+			order: "asc"
+		}, s.value = 1;
+	}
+	function b(e) {
+		let t = e.sortKey ?? e.key;
+		return o.value?.key === t ? o.value.order : null;
+	}
+	let x = e(() => _.value.filter((e) => !t.isRowSelectable || t.isRowSelectable(e)));
+	function S(e) {
+		return l.value.includes(v(e));
+	}
+	function C(e) {
+		if (t.isRowSelectable && !t.isRowSelectable(e)) return;
+		let n = v(e);
+		l.value = S(e) ? l.value.filter((e) => e !== n) : [...l.value, n];
+	}
+	let w = e(() => {
+		let e = x.value;
+		if (e.length === 0) return !1;
+		let t = e.filter(S).length;
+		return t === 0 ? !1 : t === e.length ? !0 : "indeterminate";
+	});
+	function T(e) {
+		let t = x.value.map(v);
+		if (e === !0) {
+			let e = new Set(l.value);
+			t.forEach((t) => e.add(t)), l.value = [...e];
+		} else {
+			let e = new Set(t);
+			l.value = l.value.filter((t) => !e.has(t));
+		}
+	}
+	function E(e) {
+		return u.value.includes(v(e));
+	}
+	function D(e) {
+		let t = v(e);
+		u.value = E(e) ? u.value.filter((e) => e !== t) : [...u.value, t];
+	}
+	return {
+		sort: o,
+		page: s,
+		perPage: c,
+		selection: l,
+		expanded: u,
+		isServerMode: d,
+		visibleColumns: p,
+		pageRows: _,
+		total: h,
+		pageCount: g,
+		keyOf: v,
+		toggleSort: y,
+		sortOrderFor: b,
+		headerSelection: w,
+		isSelected: S,
+		toggleRow: C,
+		toggleAll: T,
+		isExpanded: E,
+		toggleExpanded: D,
+		getRowValue: i
+	};
+}
+//#endregion
+export { i as getRowValue, o as useDataTable };

package/dist/packages/iryx-ui/src/theme/alert.js

@@ -2,31 +2,20 @@ import { tv as e } from "tailwind-variants";
 //#region src/theme/alert.ts
 var t = e({
 	slots: {
-		root: "flex w-full gap-3 rounded-lg border p-4",
-		icon: "mt-0.5 shrink-0 [&_svg]:size-5",
+		root: "flex w-full gap-3 rounded-xl border border-border bg-background p-4 shadow-xs",
+		icon: "mt-px shrink-0 [&_svg]:size-4.5",
 		content: "min-w-0 flex-1",
-		title: "text-sm font-medium",
-		description: "text-sm opacity-90",
-		close: "-m-1 shrink-0 self-start rounded-md p-1 opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/50 [&_svg]:size-4"
+		title: "text-sm font-medium text-foreground",
+		description: "text-sm text-muted-foreground",
+		actions: "mt-3 flex flex-wrap items-center gap-2",
+		close: "-m-1 shrink-0 self-start rounded-lg p-1 text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
 	},
 	variants: {
 		variant: {
-			info: {
-				root: "border-info-border bg-info-muted text-info-muted-foreground",
-				icon: "text-info"
-			},
-			success: {
-				root: "border-success-border bg-success-muted text-success-muted-foreground",
-				icon: "text-success"
-			},
-			warning: {
-				root: "border-warning-border bg-warning-muted text-warning-muted-foreground",
-				icon: "text-warning"
-			},
-			danger: {
-				root: "border-danger-border bg-danger-muted text-danger-muted-foreground",
-				icon: "text-danger"
-			}
+			info: { icon: "text-info" },
+			success: { icon: "text-success" },
+			warning: { icon: "text-warning" },
+			danger: { icon: "text-danger" }
 		},
 		withTitle: { true: { description: "mt-1" } }
 	},

package/dist/packages/iryx-ui/src/theme/badge.js

@@ -2,8 +2,8 @@ import { tv as e } from "tailwind-variants";
 //#region src/theme/badge.ts
 var t = e({
 	slots: {
-		root: "inline-flex shrink-0 items-center rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		dot: "rounded-full bg-current"
+		root: "inline-flex shrink-0 items-center rounded-md border font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		dot: "rounded-full"
 	},
 	variants: {
 		variant: {
@@ -13,21 +13,21 @@ var t = e({
 			danger: {},
 			info: {}
 		},
-		tone: {
-			soft: {},
-			solid: {}
+		withDot: {
+			true: { root: "border-border bg-background text-foreground" },
+			false: {}
 		},
 		size: {
 			sm: {
-				root: "h-5 gap-1 px-2 text-xs has-[[data-icon=inline-end]]:pr-1.5 has-[[data-icon=inline-start]]:pl-1.5 [&_svg]:size-3",
+				root: "h-5 gap-1 px-1.5 text-xs has-[[data-icon=inline-end]]:pr-1 has-[[data-icon=inline-start]]:pl-1 [&_svg]:size-3",
 				dot: "size-1.5"
 			},
 			md: {
-				root: "h-6 gap-1.5 px-2.5 text-xs has-[[data-icon=inline-end]]:pr-2 has-[[data-icon=inline-start]]:pl-2 [&_svg]:size-3.5",
+				root: "h-6 gap-1.5 px-2 text-xs has-[[data-icon=inline-end]]:pr-1.5 has-[[data-icon=inline-start]]:pl-1.5 [&_svg]:size-3.5",
 				dot: "size-2"
 			},
 			lg: {
-				root: "h-7 gap-1.5 px-3 text-sm has-[[data-icon=inline-end]]:pr-2.5 has-[[data-icon=inline-start]]:pl-2.5 [&_svg]:size-4",
+				root: "h-7 gap-1.5 px-2.5 text-sm has-[[data-icon=inline-end]]:pr-2 has-[[data-icon=inline-start]]:pl-2 [&_svg]:size-4",
 				dot: "size-2"
 			}
 		}
@@ -35,58 +35,58 @@ var t = e({
 	compoundVariants: [
 		{
 			variant: "neutral",
-			tone: "soft",
-			class: { root: "bg-muted text-muted-foreground" }
+			withDot: !1,
+			class: { root: "border-border bg-muted text-muted-foreground" }
 		},
 		{
-			variant: "neutral",
-			tone: "solid",
-			class: { root: "bg-foreground text-background" }
+			variant: "success",
+			withDot: !1,
+			class: { root: "border-success-border bg-success-muted text-success-muted-foreground" }
 		},
 		{
-			variant: "success",
-			tone: "soft",
-			class: { root: "bg-success-muted text-success-muted-foreground" }
+			variant: "warning",
+			withDot: !1,
+			class: { root: "border-warning-border bg-warning-muted text-warning-muted-foreground" }
 		},
 		{
-			variant: "success",
-			tone: "solid",
-			class: { root: "bg-success text-success-foreground" }
+			variant: "danger",
+			withDot: !1,
+			class: { root: "border-danger-border bg-danger-muted text-danger-muted-foreground" }
 		},
 		{
-			variant: "warning",
-			tone: "soft",
-			class: { root: "bg-warning-muted text-warning-muted-foreground" }
+			variant: "info",
+			withDot: !1,
+			class: { root: "border-info-border bg-info-muted text-info-muted-foreground" }
 		},
 		{
-			variant: "warning",
-			tone: "solid",
-			class: { root: "bg-warning text-warning-foreground" }
+			variant: "neutral",
+			withDot: !0,
+			class: { dot: "bg-muted-foreground" }
 		},
 		{
-			variant: "danger",
-			tone: "soft",
-			class: { root: "bg-danger-muted text-danger-muted-foreground" }
+			variant: "success",
+			withDot: !0,
+			class: { dot: "bg-success" }
 		},
 		{
-			variant: "danger",
-			tone: "solid",
-			class: { root: "bg-danger text-danger-foreground" }
+			variant: "warning",
+			withDot: !0,
+			class: { dot: "bg-warning" }
 		},
 		{
-			variant: "info",
-			tone: "soft",
-			class: { root: "bg-info-muted text-info-muted-foreground" }
+			variant: "danger",
+			withDot: !0,
+			class: { dot: "bg-danger" }
 		},
 		{
 			variant: "info",
-			tone: "solid",
-			class: { root: "bg-info text-info-foreground" }
+			withDot: !0,
+			class: { dot: "bg-info" }
 		}
 	],
 	defaultVariants: {
 		variant: "neutral",
-		tone: "soft",
+		withDot: !1,
 		size: "md"
 	}
 });