iryx-ui 0.24.1 → 0.26.0

package/dist/theme/file-upload.d.ts

@@ -14,6 +14,11 @@ export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
             dropzone: string;
         };
     };
+    withStatus: {
+        true: {
+            details: string;
+        };
+    };
 }, {
     root: string;
     dropzone: string;
@@ -29,8 +34,11 @@ export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
     details: string;
     name: string;
     meta: string;
+    actions: string;
     remove: string;
     error: string;
+    progress: string;
+    retry: string;
 }, undefined, {
     dragging: {
         true: {
@@ -47,6 +55,11 @@ export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
             dropzone: string;
         };
     };
+    withStatus: {
+        true: {
+            details: string;
+        };
+    };
 }, {
     root: string;
     dropzone: string;
@@ -62,8 +75,11 @@ export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
     details: string;
     name: string;
     meta: string;
+    actions: string;
     remove: string;
     error: string;
+    progress: string;
+    retry: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     dragging: {
         true: {
@@ -80,6 +96,11 @@ export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
             dropzone: string;
         };
     };
+    withStatus: {
+        true: {
+            details: string;
+        };
+    };
 }, {
     root: string;
     dropzone: string;
@@ -95,7 +116,10 @@ export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
     details: string;
     name: string;
     meta: string;
+    actions: string;
     remove: string;
     error: string;
+    progress: string;
+    retry: string;
 }>>;
 export type FileUploadSlots = keyof ReturnType<typeof fileUploadTheme>;

package/dist/theme/file-upload.js

@@ -16,13 +16,17 @@ 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",
+		actions: "flex shrink-0 items-center gap-1",
 		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"
+		error: "text-xs text-danger",
+		progress: "mt-1.5",
+		retry: "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"
 	},
 	variants: {
 		dragging: { true: { dropzone: "border-primary bg-accent" } },
 		invalid: { true: { dropzone: "border-red-500 focus-within:ring-red-500/40" } },
-		disabled: { true: { dropzone: "pointer-events-none opacity-50" } }
+		disabled: { true: { dropzone: "pointer-events-none opacity-50" } },
+		withStatus: { true: { details: "min-h-11.5 justify-center" } }
 	}
 });
 //#endregion

package/dist/theme/input.d.ts

@@ -20,11 +20,17 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    nearLimit: {
+        true: {
+            count: string;
+        };
+    };
 }, {
     root: string;
     input: string;
     leading: string;
     trailing: string;
+    count: string;
     clear: string;
 }, undefined, {
     size: {
@@ -46,11 +52,17 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    nearLimit: {
+        true: {
+            count: string;
+        };
+    };
 }, {
     root: string;
     input: string;
     leading: string;
     trailing: string;
+    count: string;
     clear: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     size: {
@@ -72,11 +84,17 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    nearLimit: {
+        true: {
+            count: string;
+        };
+    };
 }, {
     root: string;
     input: string;
     leading: string;
     trailing: string;
+    count: string;
     clear: string;
 }>>;
 export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
@@ -116,6 +134,34 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
         true: "min-h-0 resize-none";
     };
 }, undefined>>;
+export declare const textareaCountTheme: import("tailwind-variants").TVReturnType<{
+    nearLimit: {
+        true: {
+            count: string;
+        };
+    };
+}, {
+    root: string;
+    count: string;
+}, undefined, {
+    nearLimit: {
+        true: {
+            count: string;
+        };
+    };
+}, {
+    root: string;
+    count: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    nearLimit: {
+        true: {
+            count: string;
+        };
+    };
+}, {
+    root: string;
+    count: string;
+}>>;
 export type InputVariants = Parameters<typeof inputTheme>[0];
 export type InputSlots = keyof ReturnType<typeof inputTheme>;
 export type TextareaVariants = Parameters<typeof textareaTheme>[0];

package/dist/theme/input.js

@@ -6,6 +6,7 @@ var t = "w-full rounded-xl border border-border bg-input text-foreground transit
 		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",
+		count: "text-xs tabular-nums",
 		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: {
@@ -23,7 +24,8 @@ var t = "w-full rounded-xl border border-border bg-input text-foreground transit
 				input: "text-base"
 			}
 		},
-		invalid: { true: { root: "border-red-500 focus-within:ring-red-500/40" } }
+		invalid: { true: { root: "border-red-500 focus-within:ring-red-500/40" } },
+		nearLimit: { true: { count: "text-danger" } }
 	},
 	defaultVariants: { size: "md" }
 }), r = e({
@@ -38,6 +40,12 @@ var t = "w-full rounded-xl border border-border bg-input text-foreground transit
 		autosize: { true: "min-h-0 resize-none" }
 	},
 	defaultVariants: { size: "md" }
+}), i = e({
+	slots: {
+		root: "grid gap-1.5",
+		count: "justify-self-end text-xs text-muted-foreground tabular-nums"
+	},
+	variants: { nearLimit: { true: { count: "text-danger" } } }
 });
 //#endregion
-export { t as fieldBase, n as inputTheme, r as textareaTheme };
+export { t as fieldBase, n as inputTheme, i as textareaCountTheme, r as textareaTheme };

package/dist/theme/line-chart.d.ts

@@ -7,12 +7,12 @@ export declare const lineChartTheme: import("tailwind-variants").TVReturnType<{
             table?: import("tailwind-variants").ClassValue;
             line?: import("tailwind-variants").ClassValue;
             marker?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
             plot?: import("tailwind-variants").ClassValue;
             grid?: import("tailwind-variants").ClassValue;
             tick?: import("tailwind-variants").ClassValue;
             category?: import("tailwind-variants").ClassValue;
             hit?: import("tailwind-variants").ClassValue;
-            tooltip?: import("tailwind-variants").ClassValue;
             tooltipLabel?: import("tailwind-variants").ClassValue;
             tooltipValue?: import("tailwind-variants").ClassValue;
             band?: import("tailwind-variants").ClassValue;
@@ -29,12 +29,12 @@ export declare const lineChartTheme: import("tailwind-variants").TVReturnType<{
             table?: import("tailwind-variants").ClassValue;
             line?: import("tailwind-variants").ClassValue;
             marker?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
             plot?: import("tailwind-variants").ClassValue;
             grid?: import("tailwind-variants").ClassValue;
             tick?: import("tailwind-variants").ClassValue;
             category?: import("tailwind-variants").ClassValue;
             hit?: import("tailwind-variants").ClassValue;
-            tooltip?: import("tailwind-variants").ClassValue;
             tooltipLabel?: import("tailwind-variants").ClassValue;
             tooltipValue?: import("tailwind-variants").ClassValue;
             band?: import("tailwind-variants").ClassValue;
@@ -69,12 +69,12 @@ export declare const lineChartTheme: import("tailwind-variants").TVReturnType<{
             table?: import("tailwind-variants").ClassValue;
             line?: import("tailwind-variants").ClassValue;
             marker?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
             plot?: import("tailwind-variants").ClassValue;
             grid?: import("tailwind-variants").ClassValue;
             tick?: import("tailwind-variants").ClassValue;
             category?: import("tailwind-variants").ClassValue;
             hit?: import("tailwind-variants").ClassValue;
-            tooltip?: import("tailwind-variants").ClassValue;
             tooltipLabel?: import("tailwind-variants").ClassValue;
             tooltipValue?: import("tailwind-variants").ClassValue;
             band?: import("tailwind-variants").ClassValue;

package/dist/theme/tabs.d.ts

@@ -1,11 +1,12 @@
 export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
     variant: {
         solid: {
-            list: string;
+            frame: string;
             indicator: string;
             trigger: string;
         };
         line: {
+            frame: string;
             list: string;
             indicator: string;
             trigger: string;
@@ -13,16 +14,20 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
     };
     orientation: {
         horizontal: {
+            list: string;
             indicator: string;
         };
         vertical: {
             root: string;
+            frame: string;
             list: string;
             indicator: string;
+            trigger: string;
         };
     };
 }, {
     root: string;
+    frame: string;
     list: string;
     indicator: string;
     trigger: string;
@@ -30,11 +35,12 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     variant: {
         solid: {
-            list: string;
+            frame: string;
             indicator: string;
             trigger: string;
         };
         line: {
+            frame: string;
             list: string;
             indicator: string;
             trigger: string;
@@ -42,16 +48,20 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
     };
     orientation: {
         horizontal: {
+            list: string;
             indicator: string;
         };
         vertical: {
             root: string;
+            frame: string;
             list: string;
             indicator: string;
+            trigger: string;
         };
     };
 }, {
     root: string;
+    frame: string;
     list: string;
     indicator: string;
     trigger: string;
@@ -59,11 +69,12 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
 }, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         solid: {
-            list: string;
+            frame: string;
             indicator: string;
             trigger: string;
         };
         line: {
+            frame: string;
             list: string;
             indicator: string;
             trigger: string;
@@ -71,16 +82,20 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
     };
     orientation: {
         horizontal: {
+            list: string;
             indicator: string;
         };
         vertical: {
             root: string;
+            frame: string;
             list: string;
             indicator: string;
+            trigger: string;
         };
     };
 }, {
     root: string;
+    frame: string;
     list: string;
     indicator: string;
     trigger: string;

package/dist/theme/tabs.js

@@ -3,44 +3,52 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		root: "flex flex-col gap-4",
-		list: "relative flex shrink-0 items-center gap-1",
+		frame: "flex min-w-0 shrink-0",
+		list: "relative flex min-w-0 flex-1 items-center gap-1",
 		indicator: "absolute left-0 transition-[translate,width,height] duration-200 ease-out",
-		trigger: "relative z-10 inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+		trigger: "relative z-10 inline-flex shrink-0 items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
 		content: "outline-none"
 	},
 	variants: {
 		variant: {
 			solid: {
-				list: "rounded-xl bg-muted p-1",
-				indicator: "top-1 h-[calc(100%---spacing(2))] rounded-lg bg-background shadow-sm",
+				frame: "rounded-xl bg-muted p-1",
+				indicator: "top-0 h-full rounded-lg bg-background shadow-sm",
 				trigger: "rounded-lg px-3 py-1.5 text-muted-foreground data-[state=active]:text-foreground"
 			},
 			line: {
-				list: "gap-4 border-b border-border",
+				frame: "border-b border-border",
+				list: "gap-4",
 				indicator: "bottom-0 h-0.5 rounded-none bg-primary",
 				trigger: "rounded-none px-1 py-2 text-muted-foreground data-[state=active]:text-foreground"
 			}
 		},
 		orientation: {
-			horizontal: { indicator: "w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)" },
+			horizontal: {
+				list: "[scrollbar-width:none] overflow-x-auto scroll-smooth [&::-webkit-scrollbar]:hidden",
+				indicator: "w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)"
+			},
 			vertical: {
 				root: "flex-row",
-				list: "flex-col items-stretch",
-				indicator: "h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)"
+				frame: "min-h-0 flex-col",
+				list: "[scrollbar-width:none] flex-col items-stretch overflow-y-auto scroll-smooth [&::-webkit-scrollbar]:hidden",
+				indicator: "h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)",
+				trigger: "justify-start"
 			}
 		}
 	},
 	compoundVariants: [{
 		variant: "solid",
 		orientation: "vertical",
-		class: { indicator: "top-0 left-1 w-[calc(100%---spacing(2))]" }
+		class: { indicator: "top-0 left-0 w-full" }
 	}, {
 		variant: "line",
 		orientation: "vertical",
 		class: {
-			list: "border-r border-b-0",
-			indicator: "right-0 bottom-auto h-(--reka-tabs-indicator-size) w-0.5",
-			trigger: "text-left"
+			frame: "border-r border-b-0",
+			list: "gap-0.5",
+			indicator: "right-0 bottom-auto left-auto h-(--reka-tabs-indicator-size) w-0.5",
+			trigger: "px-3"
 		}
 	}],
 	defaultVariants: {

package/dist/theme/toast.d.ts

@@ -15,6 +15,9 @@ export declare const toastTheme: import("tailwind-variants").TVReturnType<{
         info: {
             icon: string;
         };
+        loading: {
+            icon: string;
+        };
     };
     position: {
         'top-left': {
@@ -67,6 +70,9 @@ export declare const toastTheme: import("tailwind-variants").TVReturnType<{
         info: {
             icon: string;
         };
+        loading: {
+            icon: string;
+        };
     };
     position: {
         'top-left': {
@@ -119,6 +125,9 @@ export declare const toastTheme: import("tailwind-variants").TVReturnType<{
         info: {
             icon: string;
         };
+        loading: {
+            icon: string;
+        };
     };
     position: {
         'top-left': {

package/dist/theme/toast.js

@@ -17,7 +17,8 @@ var t = e({
 			success: { icon: "text-success" },
 			warning: { icon: "text-warning" },
 			danger: { icon: "text-danger" },
-			info: { icon: "text-info" }
+			info: { icon: "text-info" },
+			loading: { icon: "text-muted-foreground [&_svg]:animate-spin" }
 		},
 		position: {
 			"top-left": { viewport: "top-0 left-0" },

package/package.json

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