iryx-ui 0.11.0 → 0.13.0

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

@@ -0,0 +1,161 @@
+export declare const navigationMenuTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            viewportWrapper: string;
+            viewport: string;
+        };
+        vertical: {
+            list: string;
+            link: string;
+            viewportWrapper: string;
+            viewport: string;
+        };
+    };
+    /** Panels wider than one column. Only affects the grid inside the viewport. */
+    columns: {
+        1: {
+            content: string;
+        };
+        2: {
+            content: string;
+        };
+        3: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    /**
+     * A plain link and a panel trigger share their chrome, so the two kinds of
+     * top-level entry read as one row. `group` is here for the chevron.
+     */
+    link: string;
+    triggerIcon: string;
+    /**
+     * Spans the root so the viewport has a stable origin; Reka's -left/-top
+     * vars then place it against the active trigger, so this must NOT also
+     * centre with flex — the two would fight and the panel would land off by
+     * half its own width.
+     */
+    viewportWrapper: string;
+    viewport: string;
+    /**
+     * Absolute inside the viewport so the viewport measures it without being
+     * sized by it. `w-max` lets the grid decide its own width.
+     */
+    content: string;
+    panelLink: string;
+    panelLabel: string;
+    panelDescription: string;
+    /** Sits under the icon so a bare glyph does not float in the row. */
+    panelIcon: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            viewportWrapper: string;
+            viewport: string;
+        };
+        vertical: {
+            list: string;
+            link: string;
+            viewportWrapper: string;
+            viewport: string;
+        };
+    };
+    /** Panels wider than one column. Only affects the grid inside the viewport. */
+    columns: {
+        1: {
+            content: string;
+        };
+        2: {
+            content: string;
+        };
+        3: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    /**
+     * A plain link and a panel trigger share their chrome, so the two kinds of
+     * top-level entry read as one row. `group` is here for the chevron.
+     */
+    link: string;
+    triggerIcon: string;
+    /**
+     * Spans the root so the viewport has a stable origin; Reka's -left/-top
+     * vars then place it against the active trigger, so this must NOT also
+     * centre with flex — the two would fight and the panel would land off by
+     * half its own width.
+     */
+    viewportWrapper: string;
+    viewport: string;
+    /**
+     * Absolute inside the viewport so the viewport measures it without being
+     * sized by it. `w-max` lets the grid decide its own width.
+     */
+    content: string;
+    panelLink: string;
+    panelLabel: string;
+    panelDescription: string;
+    /** Sits under the icon so a bare glyph does not float in the row. */
+    panelIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            viewportWrapper: string;
+            viewport: string;
+        };
+        vertical: {
+            list: string;
+            link: string;
+            viewportWrapper: string;
+            viewport: string;
+        };
+    };
+    /** Panels wider than one column. Only affects the grid inside the viewport. */
+    columns: {
+        1: {
+            content: string;
+        };
+        2: {
+            content: string;
+        };
+        3: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    /**
+     * A plain link and a panel trigger share their chrome, so the two kinds of
+     * top-level entry read as one row. `group` is here for the chevron.
+     */
+    link: string;
+    triggerIcon: string;
+    /**
+     * Spans the root so the viewport has a stable origin; Reka's -left/-top
+     * vars then place it against the active trigger, so this must NOT also
+     * centre with flex — the two would fight and the panel would land off by
+     * half its own width.
+     */
+    viewportWrapper: string;
+    viewport: string;
+    /**
+     * Absolute inside the viewport so the viewport measures it without being
+     * sized by it. `w-max` lets the grid decide its own width.
+     */
+    content: string;
+    panelLink: string;
+    panelLabel: string;
+    panelDescription: string;
+    /** Sits under the icon so a bare glyph does not float in the row. */
+    panelIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type NavigationMenuSlots = keyof ReturnType<typeof navigationMenuTheme>;

package/dist/theme/navigation-menu.js

@@ -0,0 +1,43 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/navigation-menu.ts
+var t = e({
+	slots: {
+		root: "relative z-10 flex max-w-max",
+		list: "flex list-none items-center gap-1",
+		item: "relative",
+		link: "group inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium whitespace-nowrap text-muted-foreground no-underline transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 data-[active]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+		triggerIcon: "transition-transform duration-200 group-data-[state=open]:rotate-180",
+		viewportWrapper: "absolute flex items-start",
+		viewport: "relative box-content h-(--reka-navigation-menu-viewport-height) w-(--reka-navigation-menu-viewport-width) shrink-0 origin-top overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-lg transition-[width,height,translate] duration-200 ease-out data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
+		content: "absolute top-0 left-0 grid w-max gap-1 p-2",
+		panelLink: "flex cursor-pointer items-start gap-3 rounded-lg p-2 text-sm no-underline transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[active]:bg-accent data-[active]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+		panelLabel: "block font-medium text-foreground",
+		panelDescription: "mt-0.5 block text-xs leading-snug text-muted-foreground",
+		panelIcon: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"
+	},
+	variants: {
+		orientation: {
+			horizontal: {
+				viewportWrapper: "top-full left-0 w-full pt-2",
+				viewport: "translate-x-(--reka-navigation-menu-viewport-left)"
+			},
+			vertical: {
+				list: "flex-col items-stretch",
+				link: "justify-start",
+				viewportWrapper: "top-0 left-full h-full pl-2",
+				viewport: "origin-left translate-y-(--reka-navigation-menu-viewport-top)"
+			}
+		},
+		columns: {
+			1: { content: "grid-cols-1" },
+			2: { content: "grid-cols-2" },
+			3: { content: "grid-cols-3" }
+		}
+	},
+	defaultVariants: {
+		orientation: "horizontal",
+		columns: 1
+	}
+});
+//#endregion
+export { t as navigationMenuTheme };

package/dist/theme/number-input.d.ts

@@ -25,7 +25,6 @@ export declare const numberInputTheme: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     input: string;
-    /** Stacked +/- controls pinned inside the trailing edge of the field. */
     stepper: string;
     step: string;
 }, undefined, {
@@ -55,7 +54,6 @@ export declare const numberInputTheme: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     input: string;
-    /** Stacked +/- controls pinned inside the trailing edge of the field. */
     stepper: string;
     step: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -85,7 +83,6 @@ export declare const numberInputTheme: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     input: string;
-    /** Stacked +/- controls pinned inside the trailing edge of the field. */
     stepper: string;
     step: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/theme/page-header.d.ts

@@ -0,0 +1,47 @@
+export declare const pageHeaderTheme: import("tailwind-variants").TVReturnType<{
+    bordered: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    top: string;
+    row: string;
+    heading: string;
+    title: string;
+    description: string;
+    /** `shrink-0` keeps the buttons at their natural width as the title grows. */
+    actions: string;
+}, undefined, {
+    bordered: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    top: string;
+    row: string;
+    heading: string;
+    title: string;
+    description: string;
+    /** `shrink-0` keeps the buttons at their natural width as the title grows. */
+    actions: string;
+}, import("tailwind-variants").TVReturnType<{
+    bordered: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    top: string;
+    row: string;
+    heading: string;
+    title: string;
+    description: string;
+    /** `shrink-0` keeps the buttons at their natural width as the title grows. */
+    actions: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PageHeaderSlots = keyof ReturnType<typeof pageHeaderTheme>;

package/dist/theme/page-header.js

@@ -0,0 +1,17 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/page-header.ts
+var t = e({
+	slots: {
+		root: "flex flex-col gap-4",
+		top: "",
+		row: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+		heading: "flex min-w-0 flex-col gap-1",
+		title: "truncate text-2xl font-semibold tracking-tight text-foreground",
+		description: "text-sm text-muted-foreground",
+		actions: "flex shrink-0 items-center gap-2"
+	},
+	variants: { bordered: { true: { root: "border-b border-border pb-4" } } },
+	defaultVariants: { bordered: !1 }
+});
+//#endregion
+export { t as pageHeaderTheme };

package/dist/theme/pagination.d.ts

@@ -28,7 +28,6 @@ export declare const paginationTheme: import("tailwind-variants").TVReturnType<{
     root: string;
     list: string;
     item: string;
-    /** The page the user is on. */
     active: string;
     inactive: string;
     ellipsis: string;
@@ -62,7 +61,6 @@ export declare const paginationTheme: import("tailwind-variants").TVReturnType<{
     root: string;
     list: string;
     item: string;
-    /** The page the user is on. */
     active: string;
     inactive: string;
     ellipsis: string;
@@ -96,7 +94,6 @@ export declare const paginationTheme: import("tailwind-variants").TVReturnType<{
     root: string;
     list: string;
     item: string;
-    /** The page the user is on. */
     active: string;
     inactive: string;
     ellipsis: string;

package/dist/theme/pin-input.d.ts

@@ -0,0 +1,86 @@
+export declare const pinInputTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            input: string;
+            separator: string;
+        };
+        md: {
+            root: string;
+            input: string;
+            separator: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+            separator: string;
+        };
+    };
+    invalid: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    input: string;
+    /** Sits between two groups of cells, e.g. 123–456. */
+    separator: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+            input: string;
+            separator: string;
+        };
+        md: {
+            root: string;
+            input: string;
+            separator: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+            separator: string;
+        };
+    };
+    invalid: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    input: string;
+    /** Sits between two groups of cells, e.g. 123–456. */
+    separator: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            input: string;
+            separator: string;
+        };
+        md: {
+            root: string;
+            input: string;
+            separator: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+            separator: string;
+        };
+    };
+    invalid: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    input: string;
+    /** Sits between two groups of cells, e.g. 123–456. */
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PinInputSlots = keyof ReturnType<typeof pinInputTheme>;

package/dist/theme/pin-input.js

@@ -0,0 +1,32 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/pin-input.ts
+var t = e({
+	slots: {
+		root: "flex items-center",
+		input: "rounded-xl border border-border bg-input text-center font-medium text-foreground tabular-nums transition-colors outline-none focus-visible:z-10 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50",
+		separator: "text-muted-foreground select-none"
+	},
+	variants: {
+		size: {
+			sm: {
+				root: "gap-1.5",
+				input: "size-8 text-sm",
+				separator: "px-0.5 text-sm"
+			},
+			md: {
+				root: "gap-2",
+				input: "size-10 text-base",
+				separator: "px-1 text-base"
+			},
+			lg: {
+				root: "gap-2.5",
+				input: "size-12 text-lg",
+				separator: "px-1 text-lg"
+			}
+		},
+		invalid: { true: { input: "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/40" } }
+	},
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as pinInputTheme };

package/dist/theme/popover.d.ts

@@ -0,0 +1,119 @@
+export declare const popoverTheme: import("tailwind-variants").TVReturnType<{
+    /** Insets the heading alone, leaving the body free to fill the panel. */
+    withClose: {
+        true: {
+            title: string;
+        };
+    };
+    padding: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    width: {
+        none: {};
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    content: string;
+    arrow: string;
+    close: string;
+    /** Heading line. The only row that has to make way for the close button. */
+    title: string;
+}, undefined, {
+    /** Insets the heading alone, leaving the body free to fill the panel. */
+    withClose: {
+        true: {
+            title: string;
+        };
+    };
+    padding: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    width: {
+        none: {};
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    content: string;
+    arrow: string;
+    close: string;
+    /** Heading line. The only row that has to make way for the close button. */
+    title: string;
+}, import("tailwind-variants").TVReturnType<{
+    /** Insets the heading alone, leaving the body free to fill the panel. */
+    withClose: {
+        true: {
+            title: string;
+        };
+    };
+    padding: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    width: {
+        none: {};
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    content: string;
+    arrow: string;
+    close: string;
+    /** Heading line. The only row that has to make way for the close button. */
+    title: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PopoverSlots = keyof ReturnType<typeof popoverTheme>;

package/dist/theme/popover.js

@@ -0,0 +1,31 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/popover.ts
+var t = e({
+	slots: {
+		content: "z-50 rounded-xl border border-border bg-background text-foreground shadow-lg outline-none data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
+		arrow: "fill-background stroke-border",
+		close: "absolute top-2 right-2 rounded-lg p-1 text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
+		title: "mb-2 text-sm font-medium text-foreground"
+	},
+	variants: {
+		withClose: { true: { title: "pr-6" } },
+		padding: {
+			none: { content: "p-0" },
+			sm: { content: "p-3" },
+			md: { content: "p-4" },
+			lg: { content: "p-6" }
+		},
+		width: {
+			none: {},
+			sm: { content: "w-56" },
+			md: { content: "w-72" },
+			lg: { content: "w-88" }
+		}
+	},
+	defaultVariants: {
+		padding: "md",
+		width: "md"
+	}
+});
+//#endregion
+export { t as popoverTheme };

package/dist/theme/presets.d.ts

@@ -3,9 +3,7 @@ export interface ThemeColors {
     foreground?: string;
     primary?: string;
     primaryForeground?: string;
-    /** Top stop of the solid button's vertical gradient. */
     primaryFrom?: string;
-    /** Bottom stop of the solid button's vertical gradient. */
     primaryTo?: string;
     accent?: string;
     accentForeground?: string;