iryx-ui 0.5.0 → 0.6.0

package/dist/packages/iryx-ui/src/theme/banner.js

@@ -0,0 +1,62 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/banner.ts
+var t = e({
+	slots: {
+		root: "w-full border-b",
+		container: "mx-auto flex w-full items-center gap-3 px-4 py-2.5",
+		icon: "shrink-0 [&_svg]:size-4",
+		content: "min-w-0 flex-1 text-sm",
+		title: "font-medium",
+		actions: "flex shrink-0 items-center gap-2",
+		close: "-mr-1 shrink-0 rounded-lg p-1 opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/50 [&_svg]:size-4"
+	},
+	variants: {
+		variant: {
+			neutral: {
+				root: "border-border bg-muted text-foreground",
+				icon: "text-muted-foreground"
+			},
+			info: {
+				root: "border-info-border bg-info-muted text-info-muted-foreground",
+				icon: "text-info"
+			},
+			success: {
+				root: "border-success-border bg-success-muted text-success-muted-foreground",
+				icon: "text-success"
+			},
+			warning: {
+				root: "border-warning-border bg-warning-muted text-warning-muted-foreground",
+				icon: "text-warning"
+			},
+			danger: {
+				root: "border-danger-border bg-danger-muted text-danger-muted-foreground",
+				icon: "text-danger"
+			},
+			primary: {
+				root: "border-transparent bg-linear-to-b from-primary-from to-primary-to text-primary-foreground",
+				icon: "text-primary-foreground"
+			}
+		},
+		position: {
+			static: {},
+			top: { root: "sticky top-0 z-30" },
+			bottom: { root: "fixed inset-x-0 bottom-0 z-30 border-t border-b-0" }
+		},
+		contained: {
+			true: { container: "max-w-5xl" },
+			false: {}
+		},
+		align: {
+			start: {},
+			center: { content: "text-center" }
+		}
+	},
+	defaultVariants: {
+		variant: "neutral",
+		position: "static",
+		contained: !1,
+		align: "start"
+	}
+});
+//#endregion
+export { t as bannerTheme };

package/dist/packages/iryx-ui/src/theme/pagination.js

@@ -9,21 +9,31 @@ var t = e({
 		inactive: "text-foreground hover:bg-accent hover:text-accent-foreground",
 		ellipsis: "inline-flex items-center justify-center text-sm text-muted-foreground"
 	},
-	variants: { size: {
-		sm: {
-			item: "h-8 min-w-8 px-2",
-			ellipsis: "h-8 min-w-8"
+	variants: {
+		size: {
+			sm: {
+				item: "h-8 min-w-8 px-2",
+				ellipsis: "h-8 min-w-8"
+			},
+			md: {
+				item: "h-9 min-w-9 px-2.5",
+				ellipsis: "h-9 min-w-9"
+			},
+			lg: {
+				item: "h-10 min-w-10 px-3",
+				ellipsis: "h-10 min-w-10"
+			}
 		},
-		md: {
-			item: "h-9 min-w-9 px-2.5",
-			ellipsis: "h-9 min-w-9"
-		},
-		lg: {
-			item: "h-10 min-w-10 px-3",
-			ellipsis: "h-10 min-w-10"
+		align: {
+			start: { root: "justify-start" },
+			center: { root: "justify-center" },
+			end: { root: "justify-end" }
 		}
-	} },
-	defaultVariants: { size: "md" }
+	},
+	defaultVariants: {
+		size: "sm",
+		align: "center"
+	}
 });
 //#endregion
 export { t as paginationTheme };

package/dist/packages/iryx-ui/src/theme/stat.js

@@ -5,7 +5,7 @@ var t = e({
 		root: "flex flex-col gap-2",
 		label: "text-xs font-medium tracking-wide text-muted-foreground uppercase",
 		value: "font-semibold tracking-tight text-foreground tabular-nums",
-		delta: "inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-xs font-medium tabular-nums has-[[data-icon=inline-end]]:pe-1 has-[[data-icon=inline-start]]:ps-1 [&_svg]:size-3.5",
+		delta: "inline-flex items-center gap-0.5 text-xs font-medium tabular-nums [&_svg]:size-3.5",
 		hint: "text-xs text-muted-foreground",
 		row: "flex flex-col items-start gap-1.5"
 	},
@@ -16,9 +16,9 @@ var t = e({
 			lg: { value: "text-4xl" }
 		},
 		trend: {
-			up: { delta: "bg-success-muted text-success-muted-foreground" },
-			down: { delta: "bg-danger-muted text-danger-muted-foreground" },
-			neutral: { delta: "bg-muted text-muted-foreground" }
+			up: { delta: "text-success" },
+			down: { delta: "text-danger" },
+			neutral: { delta: "text-muted-foreground" }
 		}
 	},
 	defaultVariants: {

package/dist/packages/iryx-ui/src/theme/table.js

@@ -0,0 +1,62 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/table.ts
+var t = e({
+	slots: {
+		root: "relative w-full overflow-x-auto",
+		table: "w-full caption-bottom border-collapse text-sm",
+		thead: "",
+		tbody: "",
+		tr: "border-b border-border transition-colors last:border-b-0",
+		th: "border-b border-border px-3 py-3 text-start align-middle text-xs font-semibold tracking-wide text-muted-foreground uppercase",
+		sortButton: "inline-flex cursor-pointer items-center gap-1.5 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-3.5 [&_svg]:shrink-0",
+		sortIcon: "text-muted-foreground/70 transition-colors",
+		td: "px-3 py-3 align-middle text-foreground",
+		gutter: "w-px px-3 py-3 align-middle",
+		headGutter: "w-px border-b border-border px-3 py-3 align-middle",
+		expandButton: "inline-flex size-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-[transform,color,background-color] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
+		expandedRow: "bg-muted/30",
+		expandedCell: "p-0",
+		empty: "px-3 py-10 text-center text-sm text-muted-foreground",
+		caption: "mt-3 text-sm text-muted-foreground"
+	},
+	variants: {
+		striped: { true: { tr: "even:bg-muted/30" } },
+		hoverable: { true: { tr: "hover:bg-muted/50" } },
+		clickable: { true: { tr: "cursor-pointer" } },
+		stickyHeader: { true: { th: "sticky top-0 z-10 bg-background" } },
+		selected: { true: { tr: "bg-primary/5" } },
+		size: {
+			sm: {
+				th: "py-2",
+				td: "py-2",
+				gutter: "py-2"
+			},
+			md: {},
+			lg: {
+				th: "py-4",
+				td: "py-4",
+				gutter: "py-4"
+			}
+		},
+		align: {
+			start: {
+				th: "text-start",
+				td: "text-start"
+			},
+			center: {
+				th: "text-center",
+				td: "text-center"
+			},
+			end: {
+				th: "text-end",
+				td: "text-end"
+			}
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		hoverable: !0
+	}
+});
+//#endregion
+export { t as tableTheme };

package/dist/packages/iryx-ui/src/theme/toast.js

@@ -3,36 +3,21 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		viewport: "fixed z-50 flex max-h-screen w-full flex-col gap-2 p-4 outline-none sm:max-w-sm",
-		root: "flex items-start gap-3 rounded-xl border p-4 shadow-lg data-[state=closed]:animate-fade-out data-[state=open]:animate-toast-in",
-		icon: "mt-0.5 shrink-0 [&_svg]:size-5",
+		root: "flex items-start gap-3 rounded-xl border border-border bg-background p-4 text-foreground shadow-lg data-[state=closed]:animate-fade-out data-[state=open]:animate-toast-in",
+		icon: "mt-px shrink-0 [&_svg]:size-4.5",
 		content: "min-w-0 flex-1",
-		title: "text-sm font-medium",
-		description: "text-sm opacity-90",
-		action: "shrink-0 self-center rounded-lg px-2 py-1 text-sm font-medium underline-offset-4 transition-colors outline-none hover:underline focus-visible:ring-2 focus-visible:ring-current/50",
-		close: "-m-1 shrink-0 self-start rounded-lg p-1 opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/50 [&_svg]:size-4"
+		title: "text-sm font-medium text-foreground",
+		description: "text-sm text-muted-foreground",
+		action: "shrink-0 self-center rounded-lg border border-border px-2.5 py-1 text-xs font-medium transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50",
+		close: "-m-1 shrink-0 self-start rounded-lg p-1 text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
 	},
 	variants: {
 		variant: {
-			neutral: {
-				root: "border-border bg-background text-foreground",
-				icon: "text-muted-foreground"
-			},
-			success: {
-				root: "border-success-border bg-success-muted text-success-muted-foreground",
-				icon: "text-success"
-			},
-			warning: {
-				root: "border-warning-border bg-warning-muted text-warning-muted-foreground",
-				icon: "text-warning"
-			},
-			danger: {
-				root: "border-danger-border bg-danger-muted text-danger-muted-foreground",
-				icon: "text-danger"
-			},
-			info: {
-				root: "border-info-border bg-info-muted text-info-muted-foreground",
-				icon: "text-info"
-			}
+			neutral: { icon: "text-muted-foreground" },
+			success: { icon: "text-success" },
+			warning: { icon: "text-warning" },
+			danger: { icon: "text-danger" },
+			info: { icon: "text-info" }
 		},
 		position: {
 			"top-left": { viewport: "top-0 left-0" },

package/dist/theme/alert.d.ts

@@ -1,19 +1,15 @@
 export declare const alertTheme: import("tailwind-variants").TVReturnType<{
     variant: {
         info: {
-            root: string;
             icon: string;
         };
         success: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
     };
@@ -29,23 +25,21 @@ export declare const alertTheme: import("tailwind-variants").TVReturnType<{
     content: string;
     title: string;
     description: string;
+    /** Buttons or links under the body — "Retry", "Undo", "View invoice". */
+    actions: string;
     close: string;
 }, undefined, {
     variant: {
         info: {
-            root: string;
             icon: string;
         };
         success: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
     };
@@ -61,23 +55,21 @@ export declare const alertTheme: import("tailwind-variants").TVReturnType<{
     content: string;
     title: string;
     description: string;
+    /** Buttons or links under the body — "Retry", "Undo", "View invoice". */
+    actions: string;
     close: string;
 }, import("tailwind-variants").TVReturnType<{
     variant: {
         info: {
-            root: string;
             icon: string;
         };
         success: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
     };
@@ -93,6 +85,8 @@ export declare const alertTheme: import("tailwind-variants").TVReturnType<{
     content: string;
     title: string;
     description: string;
+    /** Buttons or links under the body — "Retry", "Undo", "View invoice". */
+    actions: string;
     close: string;
 }, undefined, unknown, unknown, undefined>>;
 export type AlertSlots = keyof ReturnType<typeof alertTheme>;

package/dist/theme/badge.d.ts

@@ -6,10 +6,11 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
         danger: {};
         info: {};
     };
-    /** `soft` is a tinted background; `solid` is a filled block of colour. */
-    tone: {
-        soft: {};
-        solid: {};
+    withDot: {
+        true: {
+            root: string;
+        };
+        false: {};
     };
     size: {
         sm: {
@@ -36,10 +37,11 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
         danger: {};
         info: {};
     };
-    /** `soft` is a tinted background; `solid` is a filled block of colour. */
-    tone: {
-        soft: {};
-        solid: {};
+    withDot: {
+        true: {
+            root: string;
+        };
+        false: {};
     };
     size: {
         sm: {
@@ -66,10 +68,11 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
         danger: {};
         info: {};
     };
-    /** `soft` is a tinted background; `solid` is a filled block of colour. */
-    tone: {
-        soft: {};
-        solid: {};
+    withDot: {
+        true: {
+            root: string;
+        };
+        false: {};
     };
     size: {
         sm: {

package/dist/theme/banner.d.ts

@@ -0,0 +1,185 @@
+export declare const bannerTheme: import("tailwind-variants").TVReturnType<{
+    variant: {
+        neutral: {
+            root: string;
+            icon: string;
+        };
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+        /** Brand-coloured, for announcements rather than status. */
+        primary: {
+            root: string;
+            icon: string;
+        };
+    };
+    position: {
+        static: {};
+        /** Sticks under the top of the scroll container. */
+        top: {
+            root: string;
+        };
+        /** Pinned to the bottom of the viewport; the rule moves to the top edge. */
+        bottom: {
+            root: string;
+        };
+    };
+    /** Constrains the text while the fill still spans the viewport. */
+    contained: {
+        true: {
+            container: string;
+        };
+        false: {};
+    };
+    align: {
+        start: {};
+        center: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    /** Keeps the text off the viewport edge without constraining the fill. */
+    container: string;
+    icon: string;
+    content: string;
+    title: string;
+    actions: string;
+    close: string;
+}, undefined, {
+    variant: {
+        neutral: {
+            root: string;
+            icon: string;
+        };
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+        /** Brand-coloured, for announcements rather than status. */
+        primary: {
+            root: string;
+            icon: string;
+        };
+    };
+    position: {
+        static: {};
+        /** Sticks under the top of the scroll container. */
+        top: {
+            root: string;
+        };
+        /** Pinned to the bottom of the viewport; the rule moves to the top edge. */
+        bottom: {
+            root: string;
+        };
+    };
+    /** Constrains the text while the fill still spans the viewport. */
+    contained: {
+        true: {
+            container: string;
+        };
+        false: {};
+    };
+    align: {
+        start: {};
+        center: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    /** Keeps the text off the viewport edge without constraining the fill. */
+    container: string;
+    icon: string;
+    content: string;
+    title: string;
+    actions: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        neutral: {
+            root: string;
+            icon: string;
+        };
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+        /** Brand-coloured, for announcements rather than status. */
+        primary: {
+            root: string;
+            icon: string;
+        };
+    };
+    position: {
+        static: {};
+        /** Sticks under the top of the scroll container. */
+        top: {
+            root: string;
+        };
+        /** Pinned to the bottom of the viewport; the rule moves to the top edge. */
+        bottom: {
+            root: string;
+        };
+    };
+    /** Constrains the text while the fill still spans the viewport. */
+    contained: {
+        true: {
+            container: string;
+        };
+        false: {};
+    };
+    align: {
+        start: {};
+        center: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    /** Keeps the text off the viewport edge without constraining the fill. */
+    container: string;
+    icon: string;
+    content: string;
+    title: string;
+    actions: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BannerSlots = keyof ReturnType<typeof bannerTheme>;

package/dist/theme/index.d.ts

@@ -1,5 +1,6 @@
 export * from './alert';
 export * from './badge';
+export * from './banner';
 export * from './breadcrumb';
 export * from './button';
 export * from './button-group';
@@ -22,6 +23,7 @@ export * from './skeleton';
 export * from './stat';
 export * from './stepper';
 export * from './switch';
+export * from './table';
 export * from './tabs';
 export * from './toast';
 export * from './tooltip';

package/dist/theme/pagination.d.ts

@@ -13,6 +13,17 @@ export declare const paginationTheme: import("tailwind-variants").TVReturnType<{
             ellipsis: string;
         };
     };
+    align: {
+        start: {
+            root: string;
+        };
+        center: {
+            root: string;
+        };
+        end: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     list: string;
@@ -36,6 +47,17 @@ export declare const paginationTheme: import("tailwind-variants").TVReturnType<{
             ellipsis: string;
         };
     };
+    align: {
+        start: {
+            root: string;
+        };
+        center: {
+            root: string;
+        };
+        end: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     list: string;
@@ -59,6 +81,17 @@ export declare const paginationTheme: import("tailwind-variants").TVReturnType<{
             ellipsis: string;
         };
     };
+    align: {
+        start: {
+            root: string;
+        };
+        center: {
+            root: string;
+        };
+        end: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     list: string;

package/dist/theme/stat.d.ts

@@ -32,7 +32,6 @@ export declare const statTheme: import("tailwind-variants").TVReturnType<{
     value: string;
     delta: string;
     hint: string;
-    /** Column, so the delta always sits on its own line under the value. */
     row: string;
 }, undefined, {
     size: {
@@ -68,7 +67,6 @@ export declare const statTheme: import("tailwind-variants").TVReturnType<{
     value: string;
     delta: string;
     hint: string;
-    /** Column, so the delta always sits on its own line under the value. */
     row: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
@@ -104,7 +102,6 @@ export declare const statTheme: import("tailwind-variants").TVReturnType<{
     value: string;
     delta: string;
     hint: string;
-    /** Column, so the delta always sits on its own line under the value. */
     row: string;
 }, undefined, unknown, unknown, undefined>>;
 export type StatSlots = keyof ReturnType<typeof statTheme>;