iryx-ui 0.20.0 → 0.22.0

package/dist/theme/carousel.js

@@ -0,0 +1,22 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/carousel.ts
+var t = e({
+	slots: {
+		root: "relative",
+		track: "flex snap-x snap-mandatory [scrollbar-width:none] overflow-x-auto scroll-smooth outline-none focus-visible:ring-2 focus-visible:ring-primary/50 motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden",
+		item: "shrink-0 snap-start px-px",
+		viewport: "relative",
+		control: "absolute inset-y-0 z-10 flex items-center",
+		dots: "mt-4 flex items-center justify-center gap-2",
+		dot: "h-2 w-2 rounded-full bg-border transition-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 data-[state=active]:w-6 data-[state=active]:bg-primary"
+	},
+	variants: { gap: {
+		none: {},
+		sm: { track: "gap-2" },
+		md: { track: "gap-4" },
+		lg: { track: "gap-6" }
+	} },
+	defaultVariants: { gap: "md" }
+});
+//#endregion
+export { t as carouselTheme };

package/dist/theme/checkbox.d.ts

@@ -1,96 +1,99 @@
 export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: {
+    variant: {
+        checkbox: {
             root: string;
-            indicator: string;
         };
-        md: {
+        card: {
             root: string;
-            indicator: string;
         };
-        lg: {
+        tile: {
             root: string;
-            indicator: string;
+            content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
     withText: {
-        true: {
-            root: string;
-        };
+        true: {};
     };
     invalid: {
-        true: {
-            root: string;
-        };
+        true: {};
     };
 }, {
     wrapper: string;
     root: string;
+    mark: string;
     indicator: string;
+    icon: string;
     content: string;
     label: string;
     description: string;
 }, undefined, {
-    size: {
-        sm: {
+    variant: {
+        checkbox: {
             root: string;
-            indicator: string;
         };
-        md: {
+        card: {
             root: string;
-            indicator: string;
         };
-        lg: {
+        tile: {
             root: string;
-            indicator: string;
+            content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
     withText: {
-        true: {
-            root: string;
-        };
+        true: {};
     };
     invalid: {
-        true: {
-            root: string;
-        };
+        true: {};
     };
 }, {
     wrapper: string;
     root: string;
+    mark: string;
     indicator: string;
+    icon: string;
     content: string;
     label: string;
     description: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        sm: {
+    variant: {
+        checkbox: {
             root: string;
-            indicator: string;
         };
-        md: {
+        card: {
             root: string;
-            indicator: string;
         };
-        lg: {
+        tile: {
             root: string;
-            indicator: string;
+            content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
     withText: {
-        true: {
-            root: string;
-        };
+        true: {};
     };
     invalid: {
-        true: {
-            root: string;
-        };
+        true: {};
     };
 }, {
     wrapper: string;
     root: string;
+    mark: string;
     indicator: string;
+    icon: string;
     content: string;
     label: string;
     description: string;

package/dist/theme/checkbox.js

@@ -3,36 +3,138 @@ 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-[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",
+		root: "peer cursor-pointer 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",
+		mark: "flex shrink-0 items-center justify-center rounded border border-border bg-background text-primary-foreground transition-[color,background-color,border-color] group-data-[state=checked]/item:border-primary group-data-[state=checked]/item:bg-primary group-data-[state=indeterminate]/item:border-primary group-data-[state=indeterminate]/item:bg-primary",
 		indicator: "flex items-center justify-center text-current",
+		icon: "text-muted-foreground transition-colors",
 		content: "grid gap-1",
 		label: "text-sm leading-5 font-medium text-foreground select-none",
 		description: "text-sm leading-snug text-muted-foreground"
 	},
 	variants: {
+		variant: {
+			checkbox: { root: "flex shrink-0 items-center justify-center rounded border border-border bg-background text-primary-foreground data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary" },
+			card: { root: "flex w-full items-start gap-3 rounded-lg border border-border bg-background text-left hover:bg-accent/50 data-[state=checked]:border-primary data-[state=checked]:bg-primary/5 data-[state=indeterminate]:border-primary" },
+			tile: {
+				root: "flex w-full flex-col items-center gap-2 rounded-lg border border-border bg-background text-center hover:bg-accent/50 data-[state=checked]:border-primary data-[state=checked]:bg-primary/5 data-[state=checked]:[&_[data-slot=icon]]:text-primary",
+				content: "justify-items-center gap-0.5"
+			}
+		},
 		size: {
-			sm: {
+			sm: {},
+			md: {},
+			lg: {}
+		},
+		withText: { true: {} },
+		invalid: { true: {} }
+	},
+	compoundVariants: [
+		{
+			variant: "checkbox",
+			size: "sm",
+			class: {
 				root: "size-3.5",
 				indicator: "[&_svg]:size-2.5"
-			},
-			md: {
+			}
+		},
+		{
+			variant: "checkbox",
+			size: "md",
+			class: {
 				root: "size-4",
 				indicator: "[&_svg]:size-3"
-			},
-			lg: {
+			}
+		},
+		{
+			variant: "checkbox",
+			size: "lg",
+			class: {
 				root: "size-5",
 				indicator: "[&_svg]:size-3.5"
 			}
 		},
-		withText: { true: { root: "mt-0.5" } },
-		invalid: { true: { root: "border-red-500 focus-visible:ring-red-500/40" } }
-	},
-	compoundVariants: [{
-		size: "lg",
-		withText: !0,
-		class: { root: "mt-0" }
-	}],
-	defaultVariants: { size: "md" }
+		{
+			variant: "checkbox",
+			withText: !0,
+			class: { root: "mt-0.5" }
+		},
+		{
+			variant: "checkbox",
+			size: "lg",
+			withText: !0,
+			class: { root: "mt-0" }
+		},
+		{
+			variant: "checkbox",
+			invalid: !0,
+			class: { root: "border-red-500 focus-visible:ring-red-500/40" }
+		},
+		{
+			variant: "card",
+			size: "sm",
+			class: {
+				root: "p-3",
+				mark: "mt-0.5 size-3.5",
+				indicator: "[&_svg]:size-2.5"
+			}
+		},
+		{
+			variant: "card",
+			size: "md",
+			class: {
+				root: "p-4",
+				mark: "mt-0.5 size-4",
+				indicator: "[&_svg]:size-3"
+			}
+		},
+		{
+			variant: "card",
+			size: "lg",
+			class: {
+				root: "p-5",
+				mark: "size-5",
+				indicator: "[&_svg]:size-3.5"
+			}
+		},
+		{
+			variant: "card",
+			invalid: !0,
+			class: { root: "border-red-500 focus-visible:ring-red-500/40" }
+		},
+		{
+			variant: "tile",
+			size: "sm",
+			class: {
+				root: "p-3",
+				icon: "size-5"
+			}
+		},
+		{
+			variant: "tile",
+			size: "md",
+			class: {
+				root: "p-4",
+				icon: "size-6"
+			}
+		},
+		{
+			variant: "tile",
+			size: "lg",
+			class: {
+				root: "p-5",
+				icon: "size-7"
+			}
+		},
+		{
+			variant: "tile",
+			invalid: !0,
+			class: { root: "border-red-500 focus-visible:ring-red-500/40" }
+		}
+	],
+	defaultVariants: {
+		variant: "checkbox",
+		size: "md"
+	}
 });
 //#endregion
 export { t as checkboxTheme };

package/dist/theme/form.d.ts

@@ -5,8 +5,8 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             header?: import("tailwind-variants").ClassValue;
             label?: import("tailwind-variants").ClassValue;
             description?: import("tailwind-variants").ClassValue;
-            control?: import("tailwind-variants").ClassValue;
             error?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
             hint?: import("tailwind-variants").ClassValue;
             help?: import("tailwind-variants").ClassValue;
         };
@@ -18,8 +18,8 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             header?: import("tailwind-variants").ClassValue;
             label?: import("tailwind-variants").ClassValue;
             description?: import("tailwind-variants").ClassValue;
-            control?: import("tailwind-variants").ClassValue;
             error?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
             hint?: import("tailwind-variants").ClassValue;
             help?: import("tailwind-variants").ClassValue;
         };
@@ -40,8 +40,8 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             header?: import("tailwind-variants").ClassValue;
             label?: import("tailwind-variants").ClassValue;
             description?: import("tailwind-variants").ClassValue;
-            control?: import("tailwind-variants").ClassValue;
             error?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
             hint?: import("tailwind-variants").ClassValue;
             help?: import("tailwind-variants").ClassValue;
         };

package/dist/theme/presets.d.ts

@@ -33,8 +33,14 @@ export interface ThemeColors {
 }
 /** A theme provides token values per appearance mode. Omitted tokens keep the defaults from theme.css. */
 export interface Theme {
-    light: ThemeColors;
-    dark: ThemeColors;
+    light?: ThemeColors;
+    dark?: ThemeColors;
+    /**
+     * Corner radius for the whole library — what `rounded-lg` resolves to, with
+     * the rest of the scale derived from it. One value rather than one per mode:
+     * corners do not change between light and dark.
+     */
+    radius?: string;
 }
 /**
  * Built-in theme presets. Each swaps only the brand primary (solid colour +

package/dist/theme/presets.js

@@ -66,8 +66,8 @@ function r(t) {
 }
 function i(e) {
 	if (typeof document > "u") return;
-	let i = typeof e == "string" ? t[e] : e, a = document.getElementById(n);
-	a || (a = document.createElement("style"), a.id = n, document.head.appendChild(a)), a.textContent = `:root { ${r(i.light)} }\n.dark { ${r(i.dark)} }`;
+	let i = typeof e == "string" ? t[e] : e, a = i.radius == null ? "" : `--iryx-radius: ${i.radius}; `, o = document.getElementById(n);
+	o || (o = document.createElement("style"), o.id = n, document.head.appendChild(o)), o.textContent = `:root { ${a}${r(i.light ?? {})} }\n.dark { ${r(i.dark ?? {})} }`;
 }
 function a() {
 	typeof document > "u" || document.getElementById(n)?.remove();

package/dist/theme/progress.d.ts

@@ -1,50 +1,69 @@
 export declare const progressTheme: import("tailwind-variants").TVReturnType<{
+    shape: {
+        linear: {};
+        circle: {
+            root: string;
+        };
+    };
     variant: {
         primary: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         success: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         warning: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         danger: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         info: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         neutral: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
     };
     size: {
         sm: {
             track: string;
+            ring: string;
+            ringValue: string;
         };
         md: {
             track: string;
+            ring: string;
+            ringValue: string;
         };
         lg: {
             track: string;
+            ring: string;
+            ringValue: string;
         };
     };
     indeterminate: {
         true: {
             indicator: string;
+            ring: string;
         };
     };
 }, {
@@ -59,53 +78,78 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
     legendItem: string;
     legendSwatch: string;
     legendValue: string;
+    ring: string;
+    ringTrack: string;
+    ringIndicator: string;
+    ringContent: string;
+    ringValue: string;
+    ringLabel: string;
 }, undefined, {
+    shape: {
+        linear: {};
+        circle: {
+            root: string;
+        };
+    };
     variant: {
         primary: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         success: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         warning: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         danger: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         info: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         neutral: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
     };
     size: {
         sm: {
             track: string;
+            ring: string;
+            ringValue: string;
         };
         md: {
             track: string;
+            ring: string;
+            ringValue: string;
         };
         lg: {
             track: string;
+            ring: string;
+            ringValue: string;
         };
     };
     indeterminate: {
         true: {
             indicator: string;
+            ring: string;
         };
     };
 }, {
@@ -120,53 +164,78 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
     legendItem: string;
     legendSwatch: string;
     legendValue: string;
+    ring: string;
+    ringTrack: string;
+    ringIndicator: string;
+    ringContent: string;
+    ringValue: string;
+    ringLabel: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    shape: {
+        linear: {};
+        circle: {
+            root: string;
+        };
+    };
     variant: {
         primary: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         success: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         warning: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         danger: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         info: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
         neutral: {
             indicator: string;
             segment: string;
             legendSwatch: string;
+            ringIndicator: string;
         };
     };
     size: {
         sm: {
             track: string;
+            ring: string;
+            ringValue: string;
         };
         md: {
             track: string;
+            ring: string;
+            ringValue: string;
         };
         lg: {
             track: string;
+            ring: string;
+            ringValue: string;
         };
     };
     indeterminate: {
         true: {
             indicator: string;
+            ring: string;
         };
     };
 }, {
@@ -181,5 +250,11 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
     legendItem: string;
     legendSwatch: string;
     legendValue: string;
+    ring: string;
+    ringTrack: string;
+    ringIndicator: string;
+    ringContent: string;
+    ringValue: string;
+    ringLabel: string;
 }>>;
 export type ProgressSlots = keyof ReturnType<typeof progressTheme>;