iryx-ui 0.0.1 → 0.2.0

package/dist/theme/alert.d.ts

@@ -0,0 +1,98 @@
+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;
+        };
+    };
+    /** Tightens the title/description gap when both are present. */
+    withTitle: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: 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;
+        };
+    };
+    /** Tightens the title/description gap when both are present. */
+    withTitle: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: 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;
+        };
+    };
+    /** Tightens the title/description gap when both are present. */
+    withTitle: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AlertSlots = keyof ReturnType<typeof alertTheme>;

package/dist/theme/alert.js

@@ -0,0 +1,36 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/alert.ts
+var t = e({
+	slots: {
+		root: "flex w-full gap-3 rounded-lg border p-4",
+		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",
+		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: {
+			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"
+			}
+		},
+		withTitle: { true: { description: "mt-1" } }
+	},
+	defaultVariants: { variant: "info" }
+});
+//#endregion
+export { t as alertTheme };

package/dist/theme/badge.d.ts

@@ -0,0 +1,92 @@
+export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
+    variant: {
+        neutral: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+    };
+    /** `soft` is a tinted background; `solid` is a filled block of colour. */
+    tone: {
+        soft: {};
+        solid: {};
+    };
+    size: {
+        sm: {
+            root: string;
+            dot: string;
+        };
+        md: {
+            root: string;
+            dot: string;
+        };
+        lg: {
+            root: string;
+            dot: string;
+        };
+    };
+}, {
+    root: string;
+    dot: string;
+}, undefined, {
+    variant: {
+        neutral: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+    };
+    /** `soft` is a tinted background; `solid` is a filled block of colour. */
+    tone: {
+        soft: {};
+        solid: {};
+    };
+    size: {
+        sm: {
+            root: string;
+            dot: string;
+        };
+        md: {
+            root: string;
+            dot: string;
+        };
+        lg: {
+            root: string;
+            dot: string;
+        };
+    };
+}, {
+    root: string;
+    dot: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        neutral: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+    };
+    /** `soft` is a tinted background; `solid` is a filled block of colour. */
+    tone: {
+        soft: {};
+        solid: {};
+    };
+    size: {
+        sm: {
+            root: string;
+            dot: string;
+        };
+        md: {
+            root: string;
+            dot: string;
+        };
+        lg: {
+            root: string;
+            dot: string;
+        };
+    };
+}, {
+    root: string;
+    dot: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BadgeSlots = keyof ReturnType<typeof badgeTheme>;

package/dist/theme/badge.js

@@ -0,0 +1,94 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/badge.ts
+var t = e({
+	slots: {
+		root: "inline-flex shrink-0 items-center rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		dot: "rounded-full bg-current"
+	},
+	variants: {
+		variant: {
+			neutral: {},
+			success: {},
+			warning: {},
+			danger: {},
+			info: {}
+		},
+		tone: {
+			soft: {},
+			solid: {}
+		},
+		size: {
+			sm: {
+				root: "h-5 gap-1 px-2 text-xs [&_svg]:size-3",
+				dot: "size-1.5"
+			},
+			md: {
+				root: "h-6 gap-1.5 px-2.5 text-xs [&_svg]:size-3.5",
+				dot: "size-2"
+			},
+			lg: {
+				root: "h-7 gap-1.5 px-3 text-sm [&_svg]:size-4",
+				dot: "size-2"
+			}
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "neutral",
+			tone: "soft",
+			class: { root: "bg-muted text-muted-foreground" }
+		},
+		{
+			variant: "neutral",
+			tone: "solid",
+			class: { root: "bg-foreground text-background" }
+		},
+		{
+			variant: "success",
+			tone: "soft",
+			class: { root: "bg-success-muted text-success-muted-foreground" }
+		},
+		{
+			variant: "success",
+			tone: "solid",
+			class: { root: "bg-success text-success-foreground" }
+		},
+		{
+			variant: "warning",
+			tone: "soft",
+			class: { root: "bg-warning-muted text-warning-muted-foreground" }
+		},
+		{
+			variant: "warning",
+			tone: "solid",
+			class: { root: "bg-warning text-warning-foreground" }
+		},
+		{
+			variant: "danger",
+			tone: "soft",
+			class: { root: "bg-danger-muted text-danger-muted-foreground" }
+		},
+		{
+			variant: "danger",
+			tone: "solid",
+			class: { root: "bg-danger text-danger-foreground" }
+		},
+		{
+			variant: "info",
+			tone: "soft",
+			class: { root: "bg-info-muted text-info-muted-foreground" }
+		},
+		{
+			variant: "info",
+			tone: "solid",
+			class: { root: "bg-info text-info-foreground" }
+		}
+	],
+	defaultVariants: {
+		variant: "neutral",
+		tone: "soft",
+		size: "md"
+	}
+});
+//#endregion
+export { t as badgeTheme };

package/dist/theme/card.d.ts

@@ -0,0 +1,110 @@
+export declare const cardTheme: import("tailwind-variants").TVReturnType<{
+    variant: {
+        outline: {
+            root: string;
+        };
+        soft: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+        md: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+        lg: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+    };
+}, {
+    root: string;
+    /** Only rendered when a title, description or header slot is provided. */
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    /** Only rendered when a footer slot is provided. */
+    footer: string;
+}, undefined, {
+    variant: {
+        outline: {
+            root: string;
+        };
+        soft: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+        md: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+        lg: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+    };
+}, {
+    root: string;
+    /** Only rendered when a title, description or header slot is provided. */
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    /** Only rendered when a footer slot is provided. */
+    footer: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        outline: {
+            root: string;
+        };
+        soft: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+        md: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+        lg: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+    };
+}, {
+    root: string;
+    /** Only rendered when a title, description or header slot is provided. */
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    /** Only rendered when a footer slot is provided. */
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CardSlots = keyof ReturnType<typeof cardTheme>;

package/dist/theme/card.js

@@ -0,0 +1,42 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/card.ts
+var t = e({
+	slots: {
+		root: "rounded-xl text-foreground",
+		header: "flex flex-col gap-1",
+		title: "text-base leading-none font-semibold",
+		description: "text-sm text-muted-foreground",
+		body: "",
+		footer: "flex items-center gap-2"
+	},
+	variants: {
+		variant: {
+			outline: { root: "border border-border bg-background" },
+			soft: { root: "bg-muted" }
+		},
+		padding: {
+			none: {},
+			sm: {
+				root: "p-4",
+				header: "mb-3",
+				footer: "mt-3"
+			},
+			md: {
+				root: "p-6",
+				header: "mb-4",
+				footer: "mt-4"
+			},
+			lg: {
+				root: "p-8",
+				header: "mb-6",
+				footer: "mt-6"
+			}
+		}
+	},
+	defaultVariants: {
+		variant: "outline",
+		padding: "md"
+	}
+});
+//#endregion
+export { t as cardTheme };

package/dist/theme/checkbox.d.ts

@@ -0,0 +1,89 @@
+export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            indicator: string;
+        };
+        md: {
+            root: string;
+            indicator: string;
+        };
+        lg: {
+            root: string;
+            indicator: string;
+        };
+    };
+    /** Nudges the box down so it centres against the label's first line. */
+    withText: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    /** Only rendered when a `label` or `description` is provided. */
+    wrapper: string;
+    root: string;
+    indicator: string;
+    content: string;
+    label: string;
+    description: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+            indicator: string;
+        };
+        md: {
+            root: string;
+            indicator: string;
+        };
+        lg: {
+            root: string;
+            indicator: string;
+        };
+    };
+    /** Nudges the box down so it centres against the label's first line. */
+    withText: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    /** Only rendered when a `label` or `description` is provided. */
+    wrapper: string;
+    root: string;
+    indicator: string;
+    content: string;
+    label: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            indicator: string;
+        };
+        md: {
+            root: string;
+            indicator: string;
+        };
+        lg: {
+            root: string;
+            indicator: string;
+        };
+    };
+    /** Nudges the box down so it centres against the label's first line. */
+    withText: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    /** Only rendered when a `label` or `description` is provided. */
+    wrapper: string;
+    root: string;
+    indicator: string;
+    content: string;
+    label: string;
+    description: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CheckboxSlots = keyof ReturnType<typeof checkboxTheme>;

package/dist/theme/checkbox.js

@@ -0,0 +1,37 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/checkbox.ts
+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-colors 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",
+		indicator: "flex items-center justify-center text-current",
+		content: "grid gap-1",
+		label: "text-sm leading-5 font-medium text-foreground select-none",
+		description: "text-sm leading-snug text-muted-foreground"
+	},
+	variants: {
+		size: {
+			sm: {
+				root: "size-3.5",
+				indicator: "[&_svg]:size-2.5"
+			},
+			md: {
+				root: "size-4",
+				indicator: "[&_svg]:size-3"
+			},
+			lg: {
+				root: "size-5",
+				indicator: "[&_svg]:size-3.5"
+			}
+		},
+		withText: { true: { root: "mt-0.5" } }
+	},
+	compoundVariants: [{
+		size: "lg",
+		withText: !0,
+		class: { root: "mt-0" }
+	}],
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as checkboxTheme };

package/dist/theme/form.d.ts

@@ -0,0 +1,68 @@
+export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
+            hint?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
+            help?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
+            hint?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
+            help?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    label: string;
+    hint: string;
+    description: string;
+    control: string;
+    error: string;
+    help: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
+            hint?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
+            help?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    label: string;
+    hint: string;
+    description: string;
+    control: string;
+    error: string;
+    help: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    header: string;
+    label: string;
+    hint: string;
+    description: string;
+    control: string;
+    error: string;
+    help: string;
+}, undefined, unknown, unknown, undefined>>;
+export type FormFieldSlots = keyof ReturnType<typeof formFieldTheme>;

package/dist/theme/form.js

@@ -0,0 +1,14 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/form.ts
+var t = e({ slots: {
+	root: "space-y-1.5",
+	header: "flex items-center justify-between gap-2",
+	label: "",
+	hint: "text-sm leading-none text-muted-foreground",
+	description: "text-sm leading-snug text-muted-foreground",
+	control: "",
+	error: "text-sm leading-snug text-red-500",
+	help: "text-sm leading-snug text-muted-foreground"
+} });
+//#endregion
+export { t as formFieldTheme };

package/dist/theme/index.d.ts

@@ -1,3 +1,11 @@
+export * from './alert';
+export * from './badge';
 export * from './button';
+export * from './card';
+export * from './checkbox';
+export * from './input';
+export * from './label';
 export * from './presets';
+export * from './radio-group';
+export * from './select';
 export * from './switch';