iryx-ui 0.21.0 → 0.23.0

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/code.d.ts

@@ -0,0 +1,53 @@
+export declare const codeTheme: import("tailwind-variants").TVReturnType<{
+    block: {
+        true: {
+            root: string;
+            code: string;
+            copy: string;
+        };
+        false: {
+            root: string;
+            code: string;
+            copy: string;
+        };
+    };
+}, {
+    root: string;
+    code: string;
+    copy: string;
+}, undefined, {
+    block: {
+        true: {
+            root: string;
+            code: string;
+            copy: string;
+        };
+        false: {
+            root: string;
+            code: string;
+            copy: string;
+        };
+    };
+}, {
+    root: string;
+    code: string;
+    copy: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    block: {
+        true: {
+            root: string;
+            code: string;
+            copy: string;
+        };
+        false: {
+            root: string;
+            code: string;
+            copy: string;
+        };
+    };
+}, {
+    root: string;
+    code: string;
+    copy: string;
+}>>;
+export type CodeSlots = keyof ReturnType<typeof codeTheme>;

package/dist/theme/code.js

@@ -0,0 +1,24 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/code.ts
+var t = e({
+	slots: {
+		root: "",
+		code: "font-mono",
+		copy: "focus-visible:outline-ring inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 [&_svg]:size-4"
+	},
+	variants: { block: {
+		true: {
+			root: "relative overflow-hidden rounded-lg border border-border bg-muted",
+			code: "block overflow-x-auto py-4 pr-14 pl-4 text-sm text-foreground",
+			copy: "absolute top-2 right-2 size-7 border border-border bg-background"
+		},
+		false: {
+			root: "inline-flex items-center gap-1",
+			code: "rounded border border-current/25 bg-current/10 px-1.5 py-0.5 font-mono text-[0.875em] text-current/90",
+			copy: "size-5 [&_svg]:size-3.5"
+		}
+	} },
+	defaultVariants: { block: !1 }
+});
+//#endregion
+export { t as codeTheme };

package/dist/theme/description-list.d.ts

@@ -0,0 +1,62 @@
+export declare const descriptionListTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: {
+            root: string;
+            item: string;
+        };
+        horizontal: {
+            root: string;
+            item: string;
+        };
+    };
+    divided: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string;
+    item: string;
+    term: string;
+    description: string;
+}, undefined, {
+    orientation: {
+        vertical: {
+            root: string;
+            item: string;
+        };
+        horizontal: {
+            root: string;
+            item: string;
+        };
+    };
+    divided: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string;
+    item: string;
+    term: string;
+    description: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        vertical: {
+            root: string;
+            item: string;
+        };
+        horizontal: {
+            root: string;
+            item: string;
+        };
+    };
+    divided: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string;
+    item: string;
+    term: string;
+    description: string;
+}>>;
+export type DescriptionListSlots = keyof ReturnType<typeof descriptionListTheme>;

package/dist/theme/description-list.js

@@ -0,0 +1,48 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/description-list.ts
+var t = e({
+	slots: {
+		root: "text-sm",
+		item: "",
+		term: "font-medium text-muted-foreground",
+		description: "text-foreground"
+	},
+	variants: {
+		orientation: {
+			vertical: {
+				root: "flex flex-col",
+				item: "flex flex-col gap-1"
+			},
+			horizontal: {
+				root: "grid grid-cols-[minmax(0,1fr)_minmax(0,2fr)] gap-x-6",
+				item: "col-span-full grid grid-cols-subgrid items-baseline"
+			}
+		},
+		divided: {
+			true: {},
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			orientation: "vertical",
+			divided: !1,
+			class: { root: "gap-4" }
+		},
+		{
+			orientation: "horizontal",
+			divided: !1,
+			class: { root: "gap-y-4" }
+		},
+		{
+			divided: !0,
+			class: { item: "border-t border-border py-3 first:border-t-0 first:pt-0 last:pb-0" }
+		}
+	],
+	defaultVariants: {
+		orientation: "vertical",
+		divided: !1
+	}
+});
+//#endregion
+export { t as descriptionListTheme };

package/dist/theme/index.d.ts

@@ -13,6 +13,7 @@ export * from './calendar';
 export * from './card';
 export * from './chart-legend';
 export * from './checkbox';
+export * from './code';
 export * from './collapsible';
 export * from './color-picker';
 export * from './combobox';
@@ -20,6 +21,7 @@ export * from './command-palette';
 export * from './container';
 export * from './date-field';
 export * from './date-picker';
+export * from './description-list';
 export * from './dialog';
 export * from './donut-chart';
 export * from './drawer';

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();