iryx-ui 0.20.0 → 0.22.0

package/dist/theme/progress.js

@@ -12,49 +12,81 @@ var t = e({
 		legend: "flex flex-wrap items-center gap-x-4 gap-y-1",
 		legendItem: "flex items-center gap-1.5 text-xs text-muted-foreground",
 		legendSwatch: "size-2 shrink-0 rounded-full",
-		legendValue: "text-foreground tabular-nums"
+		legendValue: "text-foreground tabular-nums",
+		ring: "",
+		ringTrack: "fill-none stroke-muted",
+		ringIndicator: "fill-none transition-[stroke-dasharray] duration-300 ease-out",
+		ringContent: "absolute inset-0 flex flex-col items-center justify-center gap-0.5 text-center",
+		ringValue: "font-semibold text-foreground tabular-nums",
+		ringLabel: "text-xs text-muted-foreground"
 	},
 	variants: {
+		shape: {
+			linear: {},
+			circle: { root: "relative w-auto items-center" }
+		},
 		variant: {
 			primary: {
 				indicator: "bg-linear-to-b from-primary-from to-primary-to",
 				segment: "bg-linear-to-b from-primary-from to-primary-to",
-				legendSwatch: "bg-primary"
+				legendSwatch: "bg-primary",
+				ringIndicator: "stroke-primary"
 			},
 			success: {
 				indicator: "bg-success",
 				segment: "bg-success",
-				legendSwatch: "bg-success"
+				legendSwatch: "bg-success",
+				ringIndicator: "stroke-success"
 			},
 			warning: {
 				indicator: "bg-warning",
 				segment: "bg-warning",
-				legendSwatch: "bg-warning"
+				legendSwatch: "bg-warning",
+				ringIndicator: "stroke-warning"
 			},
 			danger: {
 				indicator: "bg-danger",
 				segment: "bg-danger",
-				legendSwatch: "bg-danger"
+				legendSwatch: "bg-danger",
+				ringIndicator: "stroke-danger"
 			},
 			info: {
 				indicator: "bg-info",
 				segment: "bg-info",
-				legendSwatch: "bg-info"
+				legendSwatch: "bg-info",
+				ringIndicator: "stroke-info"
 			},
 			neutral: {
 				indicator: "bg-muted-foreground",
 				segment: "bg-muted-foreground",
-				legendSwatch: "bg-muted-foreground"
+				legendSwatch: "bg-muted-foreground",
+				ringIndicator: "stroke-muted-foreground"
 			}
 		},
 		size: {
-			sm: { track: "h-1" },
-			md: { track: "h-2" },
-			lg: { track: "h-3" }
+			sm: {
+				track: "h-1",
+				ring: "size-16",
+				ringValue: "text-xs"
+			},
+			md: {
+				track: "h-2",
+				ring: "size-24",
+				ringValue: "text-sm"
+			},
+			lg: {
+				track: "h-3",
+				ring: "size-32",
+				ringValue: "text-base"
+			}
 		},
-		indeterminate: { true: { indicator: "iryx-progress-indeterminate w-1/3 animate-progress-indeterminate" } }
+		indeterminate: { true: {
+			indicator: "iryx-progress-indeterminate w-1/3 animate-progress-indeterminate",
+			ring: "motion-safe:animate-spin"
+		} }
 	},
 	defaultVariants: {
+		shape: "linear",
 		variant: "primary",
 		size: "md"
 	}

package/dist/theme/radio-group.d.ts

@@ -1,18 +1,23 @@
 export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: {
+    variant: {
+        radio: {
             item: string;
-            indicator: string;
         };
-        md: {
+        card: {
             item: string;
-            indicator: string;
+            mark: string;
         };
-        lg: {
+        tile: {
             item: string;
-            indicator: string;
+            content: string;
+            label: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
     orientation: {
         vertical: {
             root: string;
@@ -22,33 +27,38 @@ export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     invalid: {
-        true: {
-            item: string;
-        };
+        true: {};
     };
 }, {
     root: string;
     wrapper: string;
     item: string;
+    mark: string;
     indicator: string;
+    icon: string;
     content: string;
     label: string;
     description: string;
 }, undefined, {
-    size: {
-        sm: {
+    variant: {
+        radio: {
             item: string;
-            indicator: string;
         };
-        md: {
+        card: {
             item: string;
-            indicator: string;
+            mark: string;
         };
-        lg: {
+        tile: {
             item: string;
-            indicator: string;
+            content: string;
+            label: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
     orientation: {
         vertical: {
             root: string;
@@ -58,33 +68,38 @@ export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     invalid: {
-        true: {
-            item: string;
-        };
+        true: {};
     };
 }, {
     root: string;
     wrapper: string;
     item: string;
+    mark: string;
     indicator: string;
+    icon: string;
     content: string;
     label: string;
     description: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        sm: {
+    variant: {
+        radio: {
             item: string;
-            indicator: string;
         };
-        md: {
+        card: {
             item: string;
-            indicator: string;
+            mark: string;
         };
-        lg: {
+        tile: {
             item: string;
-            indicator: string;
+            content: string;
+            label: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
     orientation: {
         vertical: {
             root: string;
@@ -94,15 +109,15 @@ export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     invalid: {
-        true: {
-            item: string;
-        };
+        true: {};
     };
 }, {
     root: string;
     wrapper: string;
     item: string;
+    mark: string;
     indicator: string;
+    icon: string;
     content: string;
     label: string;
     description: string;

package/dist/theme/radio-group.js

@@ -4,34 +4,141 @@ 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-[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",
+		item: "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: "grid aspect-square shrink-0 place-items-center rounded-full border border-border bg-background transition-[border-color,box-shadow]",
 		indicator: "flex size-full items-center justify-center after:block after:rounded-full after:bg-primary",
+		icon: "text-muted-foreground transition-colors",
 		content: "grid gap-1",
 		label: "text-sm leading-5 text-foreground select-none",
 		description: "text-sm leading-snug text-muted-foreground"
 	},
 	variants: {
+		variant: {
+			radio: { item: "aspect-square shrink-0 rounded-full border border-border bg-background data-[state=checked]:border-primary" },
+			card: {
+				item: "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",
+				mark: "mt-0.5"
+			},
+			tile: {
+				item: "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",
+				label: "font-medium"
+			}
+		},
 		size: {
-			sm: {
+			sm: {},
+			md: {},
+			lg: {}
+		},
+		orientation: {
+			vertical: { root: "grid gap-2" },
+			horizontal: { root: "flex flex-wrap items-start gap-x-6 gap-y-2" }
+		},
+		invalid: { true: {} }
+	},
+	compoundVariants: [
+		{
+			variant: "radio",
+			size: "sm",
+			class: {
 				item: "mt-0.5 size-3.5",
 				indicator: "after:size-1.5"
-			},
-			md: {
+			}
+		},
+		{
+			variant: "radio",
+			size: "md",
+			class: {
 				item: "mt-0.5 size-4",
 				indicator: "after:size-2"
-			},
-			lg: {
+			}
+		},
+		{
+			variant: "radio",
+			size: "lg",
+			class: {
 				item: "size-5",
 				indicator: "after:size-2.5"
 			}
 		},
-		orientation: {
-			vertical: { root: "grid gap-2" },
-			horizontal: { root: "flex flex-wrap items-start gap-x-6 gap-y-2" }
+		{
+			variant: "radio",
+			invalid: !0,
+			class: { item: "border-red-500 focus-visible:ring-red-500/40" }
 		},
-		invalid: { true: { item: "border-red-500 focus-visible:ring-red-500/40" } }
-	},
+		{
+			variant: "card",
+			size: "sm",
+			class: {
+				item: "p-3",
+				mark: "size-3.5",
+				indicator: "after:size-1.5"
+			}
+		},
+		{
+			variant: "card",
+			size: "md",
+			class: {
+				item: "p-4",
+				mark: "size-4",
+				indicator: "after:size-2"
+			}
+		},
+		{
+			variant: "card",
+			size: "lg",
+			class: {
+				item: "p-5",
+				mark: "size-5",
+				indicator: "after:size-2.5"
+			}
+		},
+		{
+			variant: "card",
+			class: { mark: "group-data-[state=checked]/item:border-primary" }
+		},
+		{
+			variant: "card",
+			invalid: !0,
+			class: { item: "border-red-500 focus-visible:ring-red-500/40" }
+		},
+		{
+			variant: "tile",
+			size: "sm",
+			class: {
+				item: "p-3",
+				icon: "size-5"
+			}
+		},
+		{
+			variant: "tile",
+			size: "md",
+			class: {
+				item: "p-4",
+				icon: "size-6"
+			}
+		},
+		{
+			variant: "tile",
+			size: "lg",
+			class: {
+				item: "p-5",
+				icon: "size-7"
+			}
+		},
+		{
+			variant: "tile",
+			invalid: !0,
+			class: { item: "border-red-500 focus-visible:ring-red-500/40" }
+		},
+		{
+			variant: "tile",
+			orientation: "horizontal",
+			class: { root: "grid auto-cols-fr grid-flow-col items-stretch gap-2" }
+		}
+	],
 	defaultVariants: {
+		variant: "radio",
 		size: "md",
 		orientation: "vertical"
 	}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",

package/theme.css

@@ -30,6 +30,17 @@
    */
   --iryx-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
+  /*
+   * Corner radius. One knob for the whole scale: this is `rounded-lg`, and
+   * every other step is derived from it, so an app squares itself off or
+   * rounds itself up in a line:
+   *
+   *   :root { --iryx-radius: 0; }
+   *
+   * `rounded-full` is left alone — a pill is a shape, not a radius.
+   */
+  --iryx-radius: 0.5rem;
+
   /* Neutral surfaces — shadcn/ui "zinc" palette. */
   --iryx-background: oklch(1 0 0);
   --iryx-foreground: oklch(0.145 0 0);
@@ -158,6 +169,20 @@
 
 @theme inline {
   --font-sans: var(--iryx-font-sans);
+  /*
+   * Tailwind's own radius scale, rebuilt as multiples of the base. At the
+   * default `0.5rem` every step comes out at exactly the value Tailwind ships,
+   * so nothing moves until someone changes the knob — and `0` squares the app
+   * off completely, which offsets from the base cannot do.
+   */
+  --radius: calc(var(--iryx-radius) * 0.5);
+  --radius-xs: calc(var(--iryx-radius) * 0.25);
+  --radius-sm: calc(var(--iryx-radius) * 0.5);
+  --radius-md: calc(var(--iryx-radius) * 0.75);
+  --radius-lg: var(--iryx-radius);
+  --radius-xl: calc(var(--iryx-radius) * 1.5);
+  --radius-2xl: calc(var(--iryx-radius) * 2);
+  --radius-3xl: calc(var(--iryx-radius) * 3);
   --color-background: var(--iryx-background);
   --color-foreground: var(--iryx-foreground);
   --color-primary: var(--iryx-primary);