iryx-ui 0.2.0 → 0.3.0

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

@@ -0,0 +1,33 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/progress.ts
+var t = e({
+	slots: {
+		root: "flex w-full flex-col gap-1.5",
+		header: "flex items-baseline justify-between gap-2 text-sm",
+		label: "font-medium text-foreground",
+		value: "text-muted-foreground tabular-nums",
+		track: "relative w-full overflow-hidden rounded-full bg-muted",
+		indicator: "h-full w-full flex-1 rounded-full transition-transform duration-300 ease-out"
+	},
+	variants: {
+		variant: {
+			primary: { indicator: "bg-linear-to-b from-primary-from to-primary-to" },
+			success: { indicator: "bg-success" },
+			warning: { indicator: "bg-warning" },
+			danger: { indicator: "bg-danger" },
+			info: { indicator: "bg-info" }
+		},
+		size: {
+			sm: { track: "h-1" },
+			md: { track: "h-2" },
+			lg: { track: "h-3" }
+		},
+		indeterminate: { true: { indicator: "w-1/3 animate-progress-indeterminate" } }
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+//#endregion
+export { t as progressTheme };

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

@@ -0,0 +1,22 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/separator.ts
+var t = e({
+	slots: {
+		root: "flex shrink-0 items-center",
+		line: "bg-border",
+		label: "shrink-0 text-xs text-muted-foreground"
+	},
+	variants: { orientation: {
+		horizontal: {
+			root: "w-full gap-3",
+			line: "h-px w-full"
+		},
+		vertical: {
+			root: "h-full flex-col gap-3",
+			line: "h-full w-px"
+		}
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+//#endregion
+export { t as separatorTheme };

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

@@ -0,0 +1,13 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/skeleton.ts
+var t = e({
+	base: "animate-pulse bg-muted",
+	variants: { variant: {
+		text: "h-[1em] w-full rounded",
+		rect: "rounded-lg",
+		circle: "aspect-square rounded-full"
+	} },
+	defaultVariants: { variant: "rect" }
+});
+//#endregion
+export { t as skeletonTheme };

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

@@ -0,0 +1,30 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/stat.ts
+var t = e({
+	slots: {
+		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",
+		hint: "text-xs text-muted-foreground",
+		row: "flex flex-col items-start gap-1.5"
+	},
+	variants: {
+		size: {
+			sm: { value: "text-2xl" },
+			md: { value: "text-3xl" },
+			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" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		trend: "neutral"
+	}
+});
+//#endregion
+export { t as statTheme };

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

@@ -0,0 +1,25 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/stepper.ts
+var t = e({
+	slots: {
+		root: "flex w-full",
+		item: "group relative flex flex-1 items-center gap-3",
+		trigger: "flex items-center gap-3 rounded-lg text-left outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50",
+		indicator: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-linear-to-b text-sm font-medium transition-[color,border-color] group-data-[state=active]:border-primary group-data-[state=active]:from-primary-from group-data-[state=active]:to-primary-to group-data-[state=active]:text-primary-foreground group-data-[state=completed]:border-primary group-data-[state=completed]:from-primary-from group-data-[state=completed]:to-primary-to group-data-[state=completed]:text-primary-foreground [&_svg]:size-4",
+		content: "flex flex-col gap-0.5",
+		title: "text-sm font-medium text-foreground",
+		description: "text-xs text-muted-foreground",
+		separator: "h-px flex-1 bg-border group-data-[state=completed]:bg-primary"
+	},
+	variants: { orientation: {
+		horizontal: {},
+		vertical: {
+			root: "flex-col gap-2",
+			item: "flex-none items-start",
+			separator: "ml-4 h-6 w-px flex-none"
+		}
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+//#endregion
+export { t as stepperTheme };

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

@@ -0,0 +1,52 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/tabs.ts
+var t = e({
+	slots: {
+		root: "flex flex-col gap-4",
+		list: "relative flex shrink-0 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-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+		content: "outline-none"
+	},
+	variants: {
+		variant: {
+			solid: {
+				list: "rounded-lg bg-muted p-1",
+				indicator: "top-1 h-[calc(100%---spacing(2))] rounded-md bg-background shadow-sm",
+				trigger: "rounded-md px-3 py-1.5 text-muted-foreground data-[state=active]:text-foreground"
+			},
+			line: {
+				list: "gap-4 border-b border-border",
+				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)" },
+			vertical: {
+				root: "flex-row",
+				list: "flex-col items-stretch",
+				indicator: "h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)"
+			}
+		}
+	},
+	compoundVariants: [{
+		variant: "solid",
+		orientation: "vertical",
+		class: { indicator: "top-0 left-1 w-[calc(100%---spacing(2))]" }
+	}, {
+		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"
+		}
+	}],
+	defaultVariants: {
+		variant: "solid",
+		orientation: "horizontal"
+	}
+});
+//#endregion
+export { t as tabsTheme };

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

@@ -0,0 +1,53 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/toast.ts
+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-lg 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",
+		content: "min-w-0 flex-1",
+		title: "text-sm font-medium",
+		description: "text-sm opacity-90",
+		action: "shrink-0 self-center rounded-md 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-md 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-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"
+			}
+		},
+		position: {
+			"top-left": { viewport: "top-0 left-0" },
+			"top-center": { viewport: "top-0 left-1/2 -translate-x-1/2" },
+			"top-right": { viewport: "top-0 right-0" },
+			"bottom-left": { viewport: "bottom-0 left-0 flex-col-reverse" },
+			"bottom-center": { viewport: "bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse" },
+			"bottom-right": { viewport: "right-0 bottom-0 flex-col-reverse" }
+		},
+		withTitle: { true: { description: "mt-1" } }
+	},
+	defaultVariants: {
+		variant: "neutral",
+		position: "bottom-right"
+	}
+});
+//#endregion
+export { t as toastTheme };

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

@@ -0,0 +1,8 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/tooltip.ts
+var t = e({ slots: {
+	content: "z-50 max-w-xs rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md data-[state=closed]:animate-fade-out data-[state=delayed-open]:animate-fade-in",
+	arrow: "fill-foreground"
+} });
+//#endregion
+export { t as tooltipTheme };

package/dist/theme/breadcrumb.d.ts

@@ -0,0 +1,59 @@
+export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            current?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            current?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+    /** The last crumb: current page, so not a link. */
+    current: string;
+    separator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            current?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+    /** The last crumb: current page, so not a link. */
+    current: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+    /** The last crumb: current page, so not a link. */
+    current: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BreadcrumbSlots = keyof ReturnType<typeof breadcrumbTheme>;

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

@@ -0,0 +1,29 @@
+export declare const buttonGroupTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** Stretch to fill the container, splitting the width between children. */
+    block: {
+        true: string;
+    };
+}, undefined, "isolate inline-flex [&>*]:relative [&>*:focus-visible]:z-10 [&>*:hover]:z-10", {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** Stretch to fill the container, splitting the width between children. */
+    block: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    /** Stretch to fill the container, splitting the width between children. */
+    block: {
+        true: string;
+    };
+}, undefined, "isolate inline-flex [&>*]:relative [&>*:focus-visible]:z-10 [&>*:hover]:z-10", unknown, unknown, undefined>>;
+export type ButtonGroupVariants = Parameters<typeof buttonGroupTheme>[0];

package/dist/theme/button.d.ts

@@ -12,10 +12,15 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
+    /** Icon-only: square, no horizontal padding. */
+    square: {
+        true: string;
+        false: string;
+    };
     block: {
         true: string;
     };
-}, undefined, "inline-flex shrink-0 items-center justify-center gap-2 rounded-lg font-medium transition-all outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+}, undefined, "inline-flex shrink-0 items-center justify-center gap-2 rounded-lg border border-transparent font-medium transition-[color,background-color,border-color,box-shadow,opacity,filter,translate] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
         solid: string;
         outline: string;
@@ -29,6 +34,11 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
+    /** Icon-only: square, no horizontal padding. */
+    square: {
+        true: string;
+        false: string;
+    };
     block: {
         true: string;
     };
@@ -46,8 +56,13 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
+    /** Icon-only: square, no horizontal padding. */
+    square: {
+        true: string;
+        false: string;
+    };
     block: {
         true: string;
     };
-}, undefined, "inline-flex shrink-0 items-center justify-center gap-2 rounded-lg font-medium transition-all outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+}, undefined, "inline-flex shrink-0 items-center justify-center gap-2 rounded-lg border border-transparent font-medium transition-[color,background-color,border-color,box-shadow,opacity,filter,translate] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
 export type ButtonVariants = Parameters<typeof buttonTheme>[0];

package/dist/theme/dialog.d.ts

@@ -0,0 +1,74 @@
+export declare const dialogTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+    close: string;
+}, undefined, {
+    size: {
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DialogSlots = keyof ReturnType<typeof dialogTheme>;

package/dist/theme/dropdown-menu.d.ts

@@ -0,0 +1,53 @@
+export declare const dropdownMenuTheme: import("tailwind-variants").TVReturnType<{
+    /** Destructive items read in the danger colour, including when highlighted. */
+    danger: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    label: string;
+    separator: string;
+    /** Same chrome as an item, plus a trailing chevron and an open state. */
+    subTrigger: string;
+    subContent: string;
+    /** Pushes the submenu chevron to the trailing edge. */
+    subTriggerIcon: string;
+}, undefined, {
+    /** Destructive items read in the danger colour, including when highlighted. */
+    danger: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    label: string;
+    separator: string;
+    /** Same chrome as an item, plus a trailing chevron and an open state. */
+    subTrigger: string;
+    subContent: string;
+    /** Pushes the submenu chevron to the trailing edge. */
+    subTriggerIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    /** Destructive items read in the danger colour, including when highlighted. */
+    danger: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    label: string;
+    separator: string;
+    /** Same chrome as an item, plus a trailing chevron and an open state. */
+    subTrigger: string;
+    subContent: string;
+    /** Pushes the submenu chevron to the trailing edge. */
+    subTriggerIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DropdownMenuSlots = keyof ReturnType<typeof dropdownMenuTheme>;

package/dist/theme/empty-state.d.ts

@@ -0,0 +1,86 @@
+export declare const emptyStateTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            icon: string;
+            title: string;
+            actions: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+            title: string;
+            actions: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+            title: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+    /** Only rendered when the actions slot is used. */
+    actions: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+            icon: string;
+            title: string;
+            actions: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+            title: string;
+            actions: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+            title: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+    /** Only rendered when the actions slot is used. */
+    actions: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            icon: string;
+            title: string;
+            actions: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+            title: string;
+            actions: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+            title: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+    /** Only rendered when the actions slot is used. */
+    actions: string;
+}, undefined, unknown, unknown, undefined>>;
+export type EmptyStateSlots = keyof ReturnType<typeof emptyStateTheme>;