iryx-ui 0.5.0 → 0.7.0

package/dist/packages/iryx-ui/src/composables/date.js

@@ -0,0 +1,25 @@
+import { $ad063034c8620db8$export$aa8b41735afcabd2 as e, $ad063034c8620db8$export$d0bdf45af03a6ea3 as t } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/queries.js";
+import { $58246871e4652552$export$6b862160d295c8e as n } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/string.js";
+import "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/CalendarDate.js";
+import { $12a3c853105e5a70$export$ad991b66133851cf as r } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/DateFormatter.js";
+//#region src/composables/date.ts
+var i = /^\d{4}-\d{2}-\d{2}$/;
+function a(e) {
+	if (!(!e || !i.test(e))) try {
+		return n(e);
+	} catch {
+		return;
+	}
+}
+function o(e) {
+	return e ? `${e.year.toString().padStart(4, "0")}-${e.month.toString().padStart(2, "0")}-${e.day.toString().padStart(2, "0")}` : null;
+}
+function s() {
+	return o(t(e()));
+}
+function c(t, n, i = { dateStyle: "medium" }) {
+	let o = a(t);
+	return o ? new r(n ?? "en-US", i).format(o.toDate(e())) : "";
+}
+//#endregion
+export { c as formatIsoDate, s as isoToday, a as toCalendarDate, o as toIsoDate };

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-xl 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-lg 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"
 	}
 });

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

@@ -0,0 +1,62 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/banner.ts
+var t = e({
+	slots: {
+		root: "w-full border-b",
+		container: "mx-auto flex w-full items-center gap-3 px-4 py-2.5",
+		icon: "shrink-0 [&_svg]:size-4",
+		content: "min-w-0 flex-1 text-sm",
+		title: "font-medium",
+		actions: "flex shrink-0 items-center gap-2",
+		close: "-mr-1 shrink-0 rounded-lg p-1 opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/50 [&_svg]:size-4"
+	},
+	variants: {
+		variant: {
+			neutral: {
+				root: "border-border bg-muted text-foreground",
+				icon: "text-muted-foreground"
+			},
+			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"
+			},
+			primary: {
+				root: "border-transparent bg-linear-to-b from-primary-from to-primary-to text-primary-foreground",
+				icon: "text-primary-foreground"
+			}
+		},
+		position: {
+			static: {},
+			top: { root: "sticky top-0 z-30" },
+			bottom: { root: "fixed inset-x-0 bottom-0 z-30 border-t border-b-0" }
+		},
+		contained: {
+			true: { container: "max-w-5xl" },
+			false: {}
+		},
+		align: {
+			start: {},
+			center: { content: "text-center" }
+		}
+	},
+	defaultVariants: {
+		variant: "neutral",
+		position: "static",
+		contained: !1,
+		align: "start"
+	}
+});
+//#endregion
+export { t as bannerTheme };

package/dist/packages/iryx-ui/src/theme/date-picker.js

@@ -0,0 +1,45 @@
+import { fieldBase as e } from "./input.js";
+import { tv as t } from "tailwind-variants";
+//#region src/theme/date-picker.ts
+var n = t({
+	slots: {
+		trigger: `flex items-center justify-between gap-2 ${e} cursor-pointer [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:opacity-60`,
+		placeholder: "text-muted-foreground",
+		content: "z-50 rounded-xl border border-border bg-background p-3 text-foreground shadow-md",
+		header: "flex items-center justify-between gap-2 pb-3",
+		heading: "text-sm font-medium",
+		nav: "flex size-7 items-center justify-center rounded-lg text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
+		months: "flex items-start gap-4",
+		grid: "w-full border-collapse select-none",
+		headCell: "pb-1 text-xs font-normal text-muted-foreground",
+		cell: "p-0 transition-colors",
+		cellTrigger: "flex h-8 w-full min-w-8 items-center justify-center rounded-lg text-sm transition-colors outline-none not-data-[selected]:hover:bg-accent not-data-[selected]:hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:pointer-events-none data-[disabled]:opacity-30 data-[outside-view]:text-muted-foreground/50 data-[today]:font-semibold data-[today]:text-primary data-[unavailable]:pointer-events-none data-[unavailable]:line-through data-[unavailable]:opacity-40",
+		footer: "flex items-center justify-between gap-2 pt-3",
+		action: "rounded-lg px-2 py-1 text-sm text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50"
+	},
+	variants: {
+		size: {
+			sm: { trigger: "h-8 px-2.5 text-sm" },
+			md: { trigger: "h-9 px-3 text-sm" },
+			lg: { trigger: "h-10 px-4 text-base" }
+		},
+		invalid: { true: { trigger: "border-red-500 focus-visible:ring-red-500/40" } },
+		range: {
+			false: { cellTrigger: "data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:data-[today]:text-primary-foreground" },
+			true: {
+				cell: [
+					"has-data-[selected]:bg-primary/15",
+					"has-data-[selection-start]:rounded-s-lg",
+					"has-data-[selection-end]:rounded-e-lg"
+				].join(" "),
+				cellTrigger: ["data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary", "data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary"].join(" ")
+			}
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		range: !1
+	}
+});
+//#endregion
+export { n as datePickerTheme };

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

@@ -1,14 +1,29 @@
 import { tv as e } from "tailwind-variants";
 //#region src/theme/input.ts
 var t = "w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", n = e({
-	base: `flex ${t}`,
+	slots: {
+		root: `flex items-center ${t} focus-within:ring-2 focus-within:ring-primary/50 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50`,
+		input: "w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+		leading: "flex shrink-0 items-center text-muted-foreground [&_svg]:size-4",
+		trailing: "flex shrink-0 items-center gap-1.5 text-muted-foreground [&_svg]:size-4",
+		clear: "flex items-center rounded-md text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-3.5"
+	},
 	variants: {
 		size: {
-			sm: "h-8 px-2.5 text-sm",
-			md: "h-9 px-3 text-sm",
-			lg: "h-10 px-4 text-base"
+			sm: {
+				root: "h-8 gap-1.5 px-2.5",
+				input: "text-sm"
+			},
+			md: {
+				root: "h-9 gap-2 px-3",
+				input: "text-sm"
+			},
+			lg: {
+				root: "h-10 gap-2 px-4",
+				input: "text-base"
+			}
 		},
-		invalid: { true: "border-red-500 focus-visible:ring-red-500/40" }
+		invalid: { true: { root: "border-red-500 focus-within:ring-red-500/40" } }
 	},
 	defaultVariants: { size: "md" }
 }), r = e({
@@ -19,7 +34,8 @@ var t = "w-full rounded-xl border border-border bg-input text-foreground transit
 			md: "min-h-20 px-3 py-2 text-sm",
 			lg: "min-h-24 px-4 py-2.5 text-base"
 		},
-		invalid: { true: "border-red-500 focus-visible:ring-red-500/40" }
+		invalid: { true: "border-red-500 focus-visible:ring-red-500/40" },
+		autosize: { true: "min-h-0 resize-none" }
 	},
 	defaultVariants: { size: "md" }
 });

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

@@ -9,21 +9,31 @@ var t = e({
 		inactive: "text-foreground hover:bg-accent hover:text-accent-foreground",
 		ellipsis: "inline-flex items-center justify-center text-sm text-muted-foreground"
 	},
-	variants: { size: {
-		sm: {
-			item: "h-8 min-w-8 px-2",
-			ellipsis: "h-8 min-w-8"
+	variants: {
+		size: {
+			sm: {
+				item: "h-8 min-w-8 px-2",
+				ellipsis: "h-8 min-w-8"
+			},
+			md: {
+				item: "h-9 min-w-9 px-2.5",
+				ellipsis: "h-9 min-w-9"
+			},
+			lg: {
+				item: "h-10 min-w-10 px-3",
+				ellipsis: "h-10 min-w-10"
+			}
 		},
-		md: {
-			item: "h-9 min-w-9 px-2.5",
-			ellipsis: "h-9 min-w-9"
-		},
-		lg: {
-			item: "h-10 min-w-10 px-3",
-			ellipsis: "h-10 min-w-10"
+		align: {
+			start: { root: "justify-start" },
+			center: { root: "justify-center" },
+			end: { root: "justify-end" }
 		}
-	} },
-	defaultVariants: { size: "md" }
+	},
+	defaultVariants: {
+		size: "sm",
+		align: "center"
+	}
 });
 //#endregion
 export { t as paginationTheme };

package/dist/packages/iryx-ui/src/theme/password-input.js

@@ -0,0 +1,22 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/password-input.ts
+var t = e({
+	slots: {
+		root: "flex w-full flex-col gap-2",
+		toggle: "flex items-center rounded-md text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
+		meter: "flex items-center gap-2",
+		track: "flex h-1 flex-1 gap-1",
+		segment: "h-full flex-1 rounded-full bg-muted transition-colors",
+		label: "shrink-0 text-xs text-muted-foreground tabular-nums"
+	},
+	variants: { score: {
+		0: {},
+		1: { segment: "data-[filled]:bg-danger" },
+		2: { segment: "data-[filled]:bg-warning" },
+		3: { segment: "data-[filled]:bg-info" },
+		4: { segment: "data-[filled]:bg-success" }
+	} },
+	defaultVariants: { score: 0 }
+});
+//#endregion
+export { t as passwordInputTheme };

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

@@ -5,7 +5,7 @@ var t = e({
 		root: "flex flex-col gap-2",
 		label: "text-xs font-medium tracking-wide text-muted-foreground uppercase",
 		value: "font-semibold tracking-tight text-foreground tabular-nums",
-		delta: "inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-xs font-medium tabular-nums has-[[data-icon=inline-end]]:pe-1 has-[[data-icon=inline-start]]:ps-1 [&_svg]:size-3.5",
+		delta: "inline-flex items-center gap-0.5 text-xs font-medium tabular-nums [&_svg]:size-3.5",
 		hint: "text-xs text-muted-foreground",
 		row: "flex flex-col items-start gap-1.5"
 	},
@@ -16,9 +16,9 @@ var t = e({
 			lg: { value: "text-4xl" }
 		},
 		trend: {
-			up: { delta: "bg-success-muted text-success-muted-foreground" },
-			down: { delta: "bg-danger-muted text-danger-muted-foreground" },
-			neutral: { delta: "bg-muted text-muted-foreground" }
+			up: { delta: "text-success" },
+			down: { delta: "text-danger" },
+			neutral: { delta: "text-muted-foreground" }
 		}
 	},
 	defaultVariants: {

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

@@ -0,0 +1,62 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/table.ts
+var t = e({
+	slots: {
+		root: "relative w-full overflow-x-auto",
+		table: "w-full caption-bottom border-collapse text-sm",
+		thead: "",
+		tbody: "",
+		tr: "border-b border-border transition-colors last:border-b-0",
+		th: "border-b border-border px-3 py-3 text-start align-middle text-xs font-semibold tracking-wide text-muted-foreground uppercase",
+		sortButton: "inline-flex cursor-pointer items-center gap-1.5 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-3.5 [&_svg]:shrink-0",
+		sortIcon: "text-muted-foreground/70 transition-colors",
+		td: "px-3 py-3 align-middle text-foreground",
+		gutter: "w-px px-3 py-3 align-middle",
+		headGutter: "w-px border-b border-border px-3 py-3 align-middle",
+		expandButton: "inline-flex size-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-[transform,color,background-color] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
+		expandedRow: "bg-muted/30",
+		expandedCell: "p-0",
+		empty: "px-3 py-10 text-center text-sm text-muted-foreground",
+		caption: "mt-3 text-sm text-muted-foreground"
+	},
+	variants: {
+		striped: { true: { tr: "even:bg-muted/30" } },
+		hoverable: { true: { tr: "hover:bg-muted/50" } },
+		clickable: { true: { tr: "cursor-pointer" } },
+		stickyHeader: { true: { th: "sticky top-0 z-10 bg-background" } },
+		selected: { true: { tr: "bg-primary/5" } },
+		size: {
+			sm: {
+				th: "py-2",
+				td: "py-2",
+				gutter: "py-2"
+			},
+			md: {},
+			lg: {
+				th: "py-4",
+				td: "py-4",
+				gutter: "py-4"
+			}
+		},
+		align: {
+			start: {
+				th: "text-start",
+				td: "text-start"
+			},
+			center: {
+				th: "text-center",
+				td: "text-center"
+			},
+			end: {
+				th: "text-end",
+				td: "text-end"
+			}
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		hoverable: !0
+	}
+});
+//#endregion
+export { t as tableTheme };

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

@@ -3,36 +3,21 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		viewport: "fixed z-50 flex max-h-screen w-full flex-col gap-2 p-4 outline-none sm:max-w-sm",
-		root: "flex items-start gap-3 rounded-xl border p-4 shadow-lg data-[state=closed]:animate-fade-out data-[state=open]:animate-toast-in",
-		icon: "mt-0.5 shrink-0 [&_svg]:size-5",
+		root: "flex items-start gap-3 rounded-xl border border-border bg-background p-4 text-foreground shadow-lg data-[state=closed]:animate-fade-out data-[state=open]:animate-toast-in",
+		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",
-		action: "shrink-0 self-center rounded-lg px-2 py-1 text-sm font-medium underline-offset-4 transition-colors outline-none hover:underline focus-visible:ring-2 focus-visible:ring-current/50",
-		close: "-m-1 shrink-0 self-start rounded-lg 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",
+		action: "shrink-0 self-center rounded-lg border border-border px-2.5 py-1 text-xs font-medium transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50",
+		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: {
-			neutral: {
-				root: "border-border bg-background text-foreground",
-				icon: "text-muted-foreground"
-			},
-			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: {
-				root: "border-info-border bg-info-muted text-info-muted-foreground",
-				icon: "text-info"
-			}
+			neutral: { icon: "text-muted-foreground" },
+			success: { icon: "text-success" },
+			warning: { icon: "text-warning" },
+			danger: { icon: "text-danger" },
+			info: { icon: "text-info" }
 		},
 		position: {
 			"top-left": { viewport: "top-0 left-0" },

package/dist/theme/alert.d.ts

@@ -1,19 +1,15 @@
 export declare const alertTheme: import("tailwind-variants").TVReturnType<{
     variant: {
         info: {
-            root: string;
             icon: string;
         };
         success: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
     };
@@ -29,23 +25,21 @@ export declare const alertTheme: import("tailwind-variants").TVReturnType<{
     content: string;
     title: string;
     description: string;
+    /** Buttons or links under the body — "Retry", "Undo", "View invoice". */
+    actions: string;
     close: string;
 }, undefined, {
     variant: {
         info: {
-            root: string;
             icon: string;
         };
         success: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
     };
@@ -61,23 +55,21 @@ export declare const alertTheme: import("tailwind-variants").TVReturnType<{
     content: string;
     title: string;
     description: string;
+    /** Buttons or links under the body — "Retry", "Undo", "View invoice". */
+    actions: string;
     close: string;
 }, import("tailwind-variants").TVReturnType<{
     variant: {
         info: {
-            root: string;
             icon: string;
         };
         success: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
     };
@@ -93,6 +85,8 @@ export declare const alertTheme: import("tailwind-variants").TVReturnType<{
     content: string;
     title: string;
     description: string;
+    /** Buttons or links under the body — "Retry", "Undo", "View invoice". */
+    actions: string;
     close: string;
 }, undefined, unknown, unknown, undefined>>;
 export type AlertSlots = keyof ReturnType<typeof alertTheme>;