iryx-ui 0.1.0 → 0.3.0

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/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/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/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/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/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>;