iryx-ui 0.18.5 → 0.19.0

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: {

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

@@ -0,0 +1,62 @@
+export declare const pricingCardTheme: import("tailwind-variants").TVReturnType<{
+    featured: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    name: string;
+    price: string;
+    amount: string;
+    period: string;
+    description: string;
+    features: string;
+    feature: string;
+    featureIcon: string;
+}, undefined, {
+    featured: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    name: string;
+    price: string;
+    amount: string;
+    period: string;
+    description: string;
+    features: string;
+    feature: string;
+    featureIcon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    featured: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    name: string;
+    price: string;
+    amount: string;
+    period: string;
+    description: string;
+    features: string;
+    feature: string;
+    featureIcon: string;
+}>>;
+export type PricingCardSlots = keyof ReturnType<typeof pricingCardTheme>;

package/dist/theme/pricing-card.js

@@ -0,0 +1,23 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/pricing-card.ts
+var t = e({
+	slots: {
+		root: "",
+		header: "flex items-center justify-between gap-2",
+		name: "font-medium",
+		price: "flex items-baseline gap-1.5",
+		amount: "text-4xl font-semibold tracking-tight tabular-nums",
+		period: "text-sm text-muted-foreground",
+		description: "mt-2 text-sm text-pretty text-muted-foreground",
+		features: "mt-6 flex flex-col gap-2.5",
+		feature: "flex items-start gap-2 text-sm",
+		featureIcon: "mt-0.5 size-4 shrink-0 text-primary"
+	},
+	variants: { featured: {
+		true: { root: "border-primary shadow-md ring-1 ring-primary/20" },
+		false: { root: "shadow-xs" }
+	} },
+	defaultVariants: { featured: !1 }
+});
+//#endregion
+export { t as pricingCardTheme };

package/dist/theme/radio-group.js

@@ -4,7 +4,7 @@ var t = e({
 	slots: {
 		root: "",
 		wrapper: "flex items-start gap-2.5",
-		item: "aspect-square shrink-0 cursor-pointer rounded-full border border-border bg-background 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",
+		item: "aspect-square shrink-0 cursor-pointer rounded-full border border-border bg-background 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",
 		indicator: "flex size-full items-center justify-center after:block after:rounded-full after:bg-primary",
 		content: "grid gap-1",
 		label: "text-sm leading-5 text-foreground select-none",

package/dist/theme/section.d.ts

@@ -0,0 +1,140 @@
+export declare const sectionTheme: import("tailwind-variants").TVReturnType<{
+    tone: {
+        default: {};
+        muted: {
+            root: string;
+        };
+    };
+    bordered: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    align: {
+        start: {
+            header: string;
+        };
+        center: {
+            header: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            body: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    eyebrow: string;
+    heading: string;
+    description: string;
+    body: string;
+}, undefined, {
+    tone: {
+        default: {};
+        muted: {
+            root: string;
+        };
+    };
+    bordered: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    align: {
+        start: {
+            header: string;
+        };
+        center: {
+            header: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            body: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    eyebrow: string;
+    heading: string;
+    description: string;
+    body: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    tone: {
+        default: {};
+        muted: {
+            root: string;
+        };
+    };
+    bordered: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    align: {
+        start: {
+            header: string;
+        };
+        center: {
+            header: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            body: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    eyebrow: string;
+    heading: string;
+    description: string;
+    body: string;
+}>>;
+export type SectionSlots = keyof ReturnType<typeof sectionTheme>;

package/dist/theme/section.js

@@ -0,0 +1,48 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/section.ts
+var t = e({
+	slots: {
+		root: "w-full",
+		header: "flex flex-col gap-4",
+		eyebrow: "text-xs font-medium tracking-wide text-muted-foreground uppercase",
+		heading: "text-3xl font-semibold tracking-tight text-balance sm:text-4xl",
+		description: "text-pretty text-muted-foreground",
+		body: ""
+	},
+	variants: {
+		tone: {
+			default: {},
+			muted: { root: "bg-muted/20" }
+		},
+		bordered: {
+			true: { root: "border-t border-border" },
+			false: {}
+		},
+		align: {
+			start: { header: "items-start text-left" },
+			center: { header: "mx-auto max-w-2xl items-center text-center" }
+		},
+		padding: {
+			none: {},
+			sm: { root: "py-12 sm:py-16" },
+			md: { root: "py-20 sm:py-24" },
+			lg: { root: "py-24 sm:py-32" }
+		},
+		hasHeader: {
+			true: { body: "mt-12" },
+			false: {}
+		}
+	},
+	compoundVariants: [{
+		align: "start",
+		class: { description: "max-w-2xl" }
+	}],
+	defaultVariants: {
+		tone: "default",
+		bordered: !1,
+		align: "center",
+		padding: "md"
+	}
+});
+//#endregion
+export { t as sectionTheme };