iryx-ui 0.18.4 → 0.19.0

package/dist/plugin.d.ts

@@ -1,8 +1,13 @@
-import type { Plugin } from 'vue';
+import type { Component, Plugin } from 'vue';
 import type { Appearance } from './composables/appearance';
 import type { IryxUiConfig } from './config';
 import type { Theme, ThemePresetName } from './theme/presets';
 export interface IryxUiPluginOptions extends Partial<IryxUiConfig> {
+    /**
+     * Extra components to register globally, keyed by name. Used by the optional
+     * subpaths, e.g. `import { marketingComponents } from 'iryx-ui/marketing'`.
+     */
+    components?: Record<string, Component>;
     /** Prefix for globally registered components. Defaults to `I` (IButton, ISwitch…). */
     prefix?: string;
     /** Startup appearance. A preference the user already stored wins over this. */

package/dist/plugin.js

@@ -5,13 +5,14 @@ import { applyTheme as i } from "./theme/presets.js";
 import { components_exports as a } from "./components/index.js";
 //#region src/plugin.ts
 function o(o = {}) {
-	let { prefix: s = "I", appearance: c, theme: l, ...u } = o;
+	let { prefix: s = "I", appearance: c, theme: l, components: u, ...d } = o;
 	return { install(o) {
 		o.provide(n, {
 			...t,
-			...u
+			...d
 		});
 		for (let t of e) o.component(`${s}${t}`, a[t]);
+		for (let [e, t] of Object.entries(u ?? {})) o.component(`${s}${e}`, t);
 		l && i(l), c && r(c);
 	} };
 }

package/dist/theme/accordion.js

@@ -5,7 +5,7 @@ var t = e({
 		root: "w-full",
 		item: "border-b border-border last:border-b-0",
 		header: "flex",
-		trigger: "group/trigger flex flex-1 items-center justify-between gap-4 py-4 text-left text-sm font-medium transition-colors outline-none hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50",
+		trigger: "group/trigger flex flex-1 items-center justify-between gap-4 py-4 text-left text-sm font-medium transition-[color,background-color,border-color,box-shadow] outline-none hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50",
 		icon: "size-4 shrink-0 text-muted-foreground transition-[rotate] duration-200 ease-out group-data-[state=open]/trigger:rotate-180",
 		content: "overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-collapsible-down",
 		contentInner: "pb-4"

package/dist/theme/alert.js

@@ -8,7 +8,7 @@ var t = e({
 		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"
+		close: "-m-1 shrink-0 self-start rounded-lg p-1 text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
 	},
 	variants: {
 		variant: {

package/dist/theme/app-shell.js

@@ -6,7 +6,7 @@ var t = e({
 		header: "z-30 shrink-0",
 		headerRow: "flex w-full items-center",
 		headerContent: "min-w-0 flex-1",
-		navTrigger: "ms-2 inline-flex size-9 shrink-0 cursor-pointer 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 [&_svg]:size-5",
+		navTrigger: "ms-2 inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-5",
 		body: "flex min-h-0 w-full flex-1",
 		sidebar: "shrink-0",
 		main: "flex min-w-0 flex-1 flex-col",

package/dist/theme/banner.js

@@ -8,7 +8,7 @@ var t = e({
 		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"
+		close: "-mr-1 shrink-0 rounded-lg p-1 opacity-70 transition-opacity transition-shadow outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/50 [&_svg]:size-4"
 	},
 	variants: {
 		variant: {

package/dist/theme/breadcrumb.js

@@ -4,7 +4,7 @@ var t = e({ slots: {
 	root: "text-sm",
 	list: "flex flex-wrap items-center gap-1.5",
 	item: "inline-flex items-center gap-1.5",
-	link: "inline-flex items-center gap-1.5 rounded text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4 [&_svg]:shrink-0",
+	link: "inline-flex items-center gap-1.5 rounded text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4 [&_svg]:shrink-0",
 	current: "inline-flex items-center gap-1.5 font-medium text-foreground [&_svg]:size-4 [&_svg]:shrink-0",
 	separator: "text-muted-foreground [&_svg]:size-3.5"
 } });

package/dist/theme/browser-frame.d.ts

@@ -0,0 +1,59 @@
+export declare const browserFrameTheme: import("tailwind-variants").TVReturnType<{
+    shadow: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    bar: string;
+    dot: string;
+    url: string;
+    body: string;
+}, undefined, {
+    shadow: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    bar: string;
+    dot: string;
+    url: string;
+    body: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    shadow: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    bar: string;
+    dot: string;
+    url: string;
+    body: string;
+}>>;
+export type BrowserFrameSlots = keyof ReturnType<typeof browserFrameTheme>;

package/dist/theme/browser-frame.js

@@ -0,0 +1,20 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/browser-frame.ts
+var t = e({
+	slots: {
+		root: "overflow-hidden text-left",
+		bar: "flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-3",
+		dot: "size-2.5 rounded-full bg-muted-foreground/25",
+		url: "ml-3 truncate rounded-md bg-background px-2.5 py-1 text-xs text-muted-foreground",
+		body: ""
+	},
+	variants: { shadow: {
+		none: {},
+		sm: { root: "shadow-xs" },
+		md: { root: "shadow-md" },
+		lg: { root: "shadow-lg" }
+	} },
+	defaultVariants: { shadow: "lg" }
+});
+//#endregion
+export { t as browserFrameTheme };

package/dist/theme/calendar.js

@@ -5,12 +5,12 @@ var t = e({
 		root: "w-fit text-foreground",
 		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",
+		nav: "flex size-7 items-center justify-center rounded-lg text-muted-foreground transition-[color,background-color,border-color,box-shadow] 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 tabular-nums 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"
+		cellTrigger: "flex h-8 w-full min-w-8 items-center justify-center rounded-lg text-sm tabular-nums transition-[color,background-color,border-color,box-shadow] 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"
 	},
 	variants: { range: {
 		false: { cellTrigger: "data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:data-[today]:text-primary-foreground" },

package/dist/theme/checkbox.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		wrapper: "flex items-start gap-2.5",
-		root: "peer flex shrink-0 cursor-pointer items-center justify-center rounded border border-border bg-background text-primary-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
+		root: "peer flex shrink-0 cursor-pointer items-center justify-center rounded border border-border bg-background text-primary-foreground transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
 		indicator: "flex items-center justify-center text-current",
 		content: "grid gap-1",
 		label: "text-sm leading-5 font-medium text-foreground select-none",

package/dist/theme/collapsible.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		root: "w-full",
-		trigger: "flex w-full items-center gap-2 rounded-lg text-sm font-medium text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+		trigger: "flex w-full items-center gap-2 rounded-lg text-sm font-medium text-foreground transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
 		content: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
 		icon: "shrink-0 text-muted-foreground transition-transform duration-200"
 	},

package/dist/theme/color-picker.js

@@ -4,7 +4,7 @@ import { tv as t } from "tailwind-variants";
 var n = t({ slots: {
 	root: "flex w-64 flex-col gap-3",
 	area: "relative h-40 w-full rounded-xl",
-	thumb: "size-4 rounded-full border-2 border-gray-300 bg-white outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
+	thumb: "size-4 rounded-full border-2 border-gray-300 bg-white transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
 	sliderThumb: "absolute top-1/2 -mt-2",
 	slider: "relative h-3 w-full rounded-full",
 	checkerboard: "absolute inset-0 rounded-full bg-[repeating-conic-gradient(theme(colors.gray.400)_0_25%,transparent_0_50%)] bg-[length:8px_8px]",
@@ -13,7 +13,7 @@ var n = t({ slots: {
 	input: "w-full min-w-0 flex-1 bg-transparent font-mono text-sm uppercase outline-none",
 	preview: "relative size-5 shrink-0 overflow-hidden rounded-md border border-border",
 	swatches: "flex flex-wrap gap-1.5",
-	swatch: "size-6 rounded-md border border-border outline-none focus-visible:ring-2 focus-visible:ring-primary/50 data-[state=checked]:ring-2 data-[state=checked]:ring-primary"
+	swatch: "size-6 rounded-md border border-border transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-primary/50 data-[state=checked]:ring-2 data-[state=checked]:ring-primary"
 } });
 //#endregion
 export { n as colorPickerTheme };

package/dist/theme/combobox.js

@@ -6,10 +6,10 @@ var n = t({
 		anchor: `flex items-center gap-2 ${e} focus-within:ring-2 focus-within:ring-primary/50`,
 		input: "min-w-0 grow bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
 		trigger: "flex shrink-0 cursor-pointer items-center text-muted-foreground disabled:cursor-not-allowed [&_svg]:size-4",
-		clear: "flex shrink-0 cursor-pointer 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",
+		clear: "flex shrink-0 cursor-pointer items-center rounded-md text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-3.5",
 		tag: "inline-flex shrink-0 items-center rounded-md border border-border bg-background font-medium whitespace-nowrap text-foreground data-[state=active]:border-primary data-[state=active]:bg-accent",
 		tagText: "truncate",
-		tagDelete: "flex shrink-0 cursor-pointer items-center rounded-sm text-muted-foreground transition-colors outline-none hover:text-danger focus-visible:ring-2 focus-visible:ring-primary/50",
+		tagDelete: "flex shrink-0 cursor-pointer items-center rounded-sm text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:text-danger focus-visible:ring-2 focus-visible:ring-primary/50",
 		content: "z-50 max-h-64 w-(--reka-combobox-trigger-width) min-w-32 overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-md",
 		viewport: "max-h-64 overflow-y-auto p-1",
 		item: "relative flex w-full cursor-pointer items-center rounded-lg py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",

package/dist/theme/date-picker.js

@@ -7,7 +7,7 @@ var n = t({
 		placeholder: "text-muted-foreground",
 		content: "z-50 rounded-xl border border-border bg-background p-3 text-foreground shadow-md",
 		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"
+		action: "rounded-lg px-2 py-1 text-sm text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50"
 	},
 	variants: {
 		size: {

package/dist/theme/dialog.js

@@ -9,7 +9,7 @@ var t = e({
 		description: "text-sm text-muted-foreground",
 		body: "-m-1 min-h-0 flex-1 overflow-y-auto p-1",
 		footer: "flex flex-wrap items-center justify-end gap-2",
-		close: "absolute top-4 right-4 rounded-lg p-1 text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
+		close: "absolute top-4 right-4 rounded-lg p-1 text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
 	},
 	variants: { size: {
 		sm: { content: "sm:max-w-sm" },

package/dist/theme/drawer.js

@@ -10,7 +10,7 @@ var t = e({
 		description: "text-sm text-muted-foreground",
 		body: "-m-1 min-h-0 flex-1 touch-auto overflow-y-auto p-1",
 		footer: "flex flex-wrap items-center justify-end gap-2",
-		close: "absolute top-4 right-4 rounded-lg p-1 text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
+		close: "absolute top-4 right-4 rounded-lg p-1 text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
 	},
 	variants: {
 		side: {

package/dist/theme/editable.js

@@ -7,7 +7,7 @@ var t = e({
 		preview: "-mx-1 w-full cursor-text truncate rounded-md px-1 text-left text-foreground transition-colors outline-none hover:bg-accent/60 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent",
 		placeholder: "text-muted-foreground",
 		input: "-mx-1 w-full bg-transparent px-1 [letter-spacing:inherit] text-foreground outline-none [font:inherit] placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-		control: "flex size-7 shrink-0 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 [&_svg]:size-4"
+		control: "flex size-7 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
 	},
 	variants: {
 		size: {

package/dist/theme/feature-card.d.ts

@@ -0,0 +1,41 @@
+export declare const featureCardTheme: import("tailwind-variants").TVReturnType<{
+    align: {
+        start: {};
+        center: {
+            root: string;
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+}, undefined, {
+    align: {
+        start: {};
+        center: {
+            root: string;
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    align: {
+        start: {};
+        center: {
+            root: string;
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+}>>;
+export type FeatureCardSlots = keyof ReturnType<typeof featureCardTheme>;

package/dist/theme/feature-card.js

@@ -0,0 +1,20 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/feature-card.ts
+var t = e({
+	slots: {
+		root: "shadow-xs",
+		icon: "mb-4 flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary [&_svg]:size-5",
+		title: "font-medium",
+		description: "mt-2 text-sm text-pretty text-muted-foreground"
+	},
+	variants: { align: {
+		start: {},
+		center: {
+			root: "text-center",
+			icon: "mx-auto"
+		}
+	} },
+	defaultVariants: { align: "start" }
+});
+//#endregion
+export { t as featureCardTheme };

package/dist/theme/file-upload.js

@@ -16,7 +16,7 @@ var t = e({
 		details: "flex min-w-0 flex-1 flex-col",
 		name: "truncate text-sm text-foreground",
 		meta: "text-xs text-muted-foreground tabular-nums",
-		remove: "flex size-8 shrink-0 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 [&_svg]:size-4",
+		remove: "flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
 		error: "text-xs text-danger"
 	},
 	variants: {

package/dist/theme/hero.d.ts

@@ -0,0 +1,98 @@
+export declare const heroTheme: import("tailwind-variants").TVReturnType<{
+    align: {
+        start: {};
+        center: {
+            container: string;
+            heading: string;
+            description: string;
+            actions: string;
+            media: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            container: string;
+        };
+        md: {
+            container: string;
+        };
+        lg: {
+            container: string;
+        };
+    };
+}, {
+    root: string;
+    container: string;
+    badge: string;
+    heading: string;
+    description: string;
+    actions: string;
+    note: string;
+    media: string;
+}, undefined, {
+    align: {
+        start: {};
+        center: {
+            container: string;
+            heading: string;
+            description: string;
+            actions: string;
+            media: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            container: string;
+        };
+        md: {
+            container: string;
+        };
+        lg: {
+            container: string;
+        };
+    };
+}, {
+    root: string;
+    container: string;
+    badge: string;
+    heading: string;
+    description: string;
+    actions: string;
+    note: string;
+    media: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    align: {
+        start: {};
+        center: {
+            container: string;
+            heading: string;
+            description: string;
+            actions: string;
+            media: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            container: string;
+        };
+        md: {
+            container: string;
+        };
+        lg: {
+            container: string;
+        };
+    };
+}, {
+    root: string;
+    container: string;
+    badge: string;
+    heading: string;
+    description: string;
+    actions: string;
+    note: string;
+    media: string;
+}>>;
+export type HeroSlots = keyof ReturnType<typeof heroTheme>;

package/dist/theme/hero.js

@@ -0,0 +1,45 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/hero.ts
+var t = e({
+	slots: {
+		root: "iryx-hero w-full",
+		container: "",
+		badge: "mb-6",
+		heading: "text-4xl font-semibold tracking-tight text-balance sm:text-5xl md:text-6xl",
+		description: "mt-6 text-lg text-pretty text-muted-foreground",
+		actions: "mt-9 flex flex-wrap items-center gap-3",
+		note: "mt-4 text-sm text-muted-foreground",
+		media: "mt-16"
+	},
+	variants: {
+		align: {
+			start: {},
+			center: {
+				container: "text-center",
+				heading: "mx-auto max-w-3xl",
+				description: "mx-auto max-w-2xl",
+				actions: "justify-center",
+				media: "mx-auto"
+			}
+		},
+		padding: {
+			none: {},
+			sm: { container: "py-12 sm:py-16" },
+			md: { container: "py-20 sm:py-28" },
+			lg: { container: "py-28 sm:py-36" }
+		}
+	},
+	compoundVariants: [{
+		align: "start",
+		class: {
+			heading: "max-w-3xl",
+			description: "max-w-2xl"
+		}
+	}],
+	defaultVariants: {
+		align: "center",
+		padding: "md"
+	}
+});
+//#endregion
+export { t as heroTheme };

package/dist/theme/input.d.ts

@@ -1,5 +1,5 @@
 /** Shared field chrome for Input, Textarea and the Select trigger. */
-export declare const fieldBase = "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";
+export declare const fieldBase = "w-full rounded-xl border border-border bg-input text-foreground transition-[color,background-color,border-color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50";
 export declare const inputTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
@@ -91,7 +91,7 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
     autosize: {
         true: "min-h-0 resize-none";
     };
-}, undefined, "block resize-y 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", {
+}, undefined, "block resize-y w-full rounded-xl border border-border bg-input text-foreground transition-[color,background-color,border-color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", {
     size: {
         sm: "min-h-16 px-2.5 py-1.5 text-sm";
         md: "min-h-20 px-3 py-2 text-sm";

package/dist/theme/input.js

@@ -1,12 +1,12 @@
 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({
+var t = "w-full rounded-xl border border-border bg-input text-foreground transition-[color,background-color,border-color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", n = e({
 	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"
+		clear: "flex items-center rounded-md text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-3.5"
 	},
 	variants: {
 		size: {

package/dist/theme/menubar.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		root: "flex items-center gap-0.5 rounded-xl border border-border bg-background p-1",
-		trigger: "flex cursor-default items-center rounded-lg px-2.5 py-1.5 text-sm font-medium text-foreground outline-none select-none focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+		trigger: "flex cursor-default items-center rounded-lg px-2.5 py-1.5 text-sm font-medium text-foreground transition-shadow outline-none select-none focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
 	},
 	variants: { bare: { true: { root: "rounded-none border-0 bg-transparent p-0" } } }
 });

package/dist/theme/navigation-menu.js

@@ -5,7 +5,7 @@ var t = e({
 		root: "relative z-10 flex max-w-max",
 		list: "flex list-none items-center gap-1",
 		item: "relative",
-		link: "group inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium whitespace-nowrap text-muted-foreground no-underline transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 data-[active]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+		link: "group inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium whitespace-nowrap text-muted-foreground no-underline transition-[color,background-color,border-color,box-shadow] outline-none select-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 data-[active]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
 		triggerIcon: "transition-transform duration-200 group-data-[state=open]:rotate-180",
 		viewportWrapper: "absolute flex items-start",
 		viewport: "relative box-content h-(--reka-navigation-menu-viewport-height) w-(--reka-navigation-menu-viewport-width) shrink-0 origin-top overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-lg transition-[width,height,translate] duration-200 ease-out data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",

package/dist/theme/password-input.js

@@ -4,7 +4,7 @@ var t = e({
 	slots: {
 		root: "flex w-full flex-col gap-2",
 		input: "[&::-ms-clear]:hidden [&::-ms-reveal]:hidden",
-		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",
+		toggle: "flex items-center rounded-md text-muted-foreground transition-[color,background-color,border-color,box-shadow] 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",

package/dist/theme/pin-input.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		root: "flex items-center",
-		input: "rounded-xl border border-border bg-input text-center font-medium text-foreground tabular-nums transition-colors outline-none focus-visible:z-10 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50",
+		input: "rounded-xl border border-border bg-input text-center font-medium text-foreground tabular-nums transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:z-10 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50",
 		separator: "text-muted-foreground select-none"
 	},
 	variants: {

package/dist/theme/popover.js

@@ -4,7 +4,7 @@ var t = e({
 	slots: {
 		content: "z-50 rounded-xl border border-border bg-background text-foreground shadow-lg outline-none data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
 		arrow: "fill-background stroke-border",
-		close: "absolute top-2 right-2 rounded-lg p-1 text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
+		close: "absolute top-2 right-2 rounded-lg p-1 text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
 		title: "mb-2 text-sm font-medium text-foreground"
 	},
 	variants: {