iryx-ui 0.12.0 → 0.14.0

package/dist/theme/timeline.d.ts

@@ -0,0 +1,182 @@
+export declare const timelineTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            marker: string;
+            content: string;
+            title: string;
+        };
+        md: {
+            marker: string;
+            content: string;
+            title: string;
+        };
+    };
+    variant: {
+        neutral: {
+            marker: string;
+        };
+        primary: {
+            marker: string;
+        };
+        success: {
+            marker: string;
+        };
+        warning: {
+            marker: string;
+        };
+        danger: {
+            marker: string;
+        };
+        info: {
+            marker: string;
+        };
+    };
+    /**
+     * An icon needs a real box to sit in, so the marker grows from a dot to a
+     * ringed circle and the fill moves to a tint.
+     */
+    withIcon: {
+        true: {
+            marker: string;
+        };
+    };
+    /** The last item has nothing to connect to, so its spine is dropped. */
+    last: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    rail: string;
+    marker: string;
+    line: string;
+    content: string;
+    header: string;
+    title: string;
+    /** Timestamps are numeric, so they line up when they are tabular. */
+    time: string;
+    description: string;
+}, undefined, {
+    size: {
+        sm: {
+            marker: string;
+            content: string;
+            title: string;
+        };
+        md: {
+            marker: string;
+            content: string;
+            title: string;
+        };
+    };
+    variant: {
+        neutral: {
+            marker: string;
+        };
+        primary: {
+            marker: string;
+        };
+        success: {
+            marker: string;
+        };
+        warning: {
+            marker: string;
+        };
+        danger: {
+            marker: string;
+        };
+        info: {
+            marker: string;
+        };
+    };
+    /**
+     * An icon needs a real box to sit in, so the marker grows from a dot to a
+     * ringed circle and the fill moves to a tint.
+     */
+    withIcon: {
+        true: {
+            marker: string;
+        };
+    };
+    /** The last item has nothing to connect to, so its spine is dropped. */
+    last: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    rail: string;
+    marker: string;
+    line: string;
+    content: string;
+    header: string;
+    title: string;
+    /** Timestamps are numeric, so they line up when they are tabular. */
+    time: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            marker: string;
+            content: string;
+            title: string;
+        };
+        md: {
+            marker: string;
+            content: string;
+            title: string;
+        };
+    };
+    variant: {
+        neutral: {
+            marker: string;
+        };
+        primary: {
+            marker: string;
+        };
+        success: {
+            marker: string;
+        };
+        warning: {
+            marker: string;
+        };
+        danger: {
+            marker: string;
+        };
+        info: {
+            marker: string;
+        };
+    };
+    /**
+     * An icon needs a real box to sit in, so the marker grows from a dot to a
+     * ringed circle and the fill moves to a tint.
+     */
+    withIcon: {
+        true: {
+            marker: string;
+        };
+    };
+    /** The last item has nothing to connect to, so its spine is dropped. */
+    last: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    rail: string;
+    marker: string;
+    line: string;
+    content: string;
+    header: string;
+    title: string;
+    /** Timestamps are numeric, so they line up when they are tabular. */
+    time: string;
+    description: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TimelineSlots = keyof ReturnType<typeof timelineTheme>;

package/dist/theme/timeline.js

@@ -0,0 +1,83 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/timeline.ts
+var t = e({
+	slots: {
+		root: "flex flex-col",
+		item: "relative grid grid-cols-[auto_1fr] gap-x-3",
+		rail: "flex flex-col items-center",
+		marker: "z-10 flex shrink-0 items-center justify-center rounded-full",
+		line: "w-px flex-1 bg-border",
+		content: "min-w-0 pb-6",
+		header: "flex flex-wrap items-baseline gap-x-2",
+		title: "font-medium text-foreground",
+		time: "text-xs text-muted-foreground tabular-nums",
+		description: "mt-1 text-sm text-muted-foreground"
+	},
+	variants: {
+		size: {
+			sm: {
+				marker: "size-2.5",
+				content: "pb-4 text-sm",
+				title: "text-sm"
+			},
+			md: {
+				marker: "size-3",
+				content: "pb-6 text-sm",
+				title: "text-sm"
+			}
+		},
+		variant: {
+			neutral: { marker: "bg-muted-foreground" },
+			primary: { marker: "bg-primary" },
+			success: { marker: "bg-success" },
+			warning: { marker: "bg-warning" },
+			danger: { marker: "bg-danger" },
+			info: { marker: "bg-info" }
+		},
+		withIcon: { true: { marker: "border border-border bg-background text-muted-foreground" } },
+		last: { true: { content: "pb-0" } }
+	},
+	compoundVariants: [
+		{
+			withIcon: !0,
+			size: "sm",
+			class: { marker: "size-6 [&_svg]:size-3" }
+		},
+		{
+			withIcon: !0,
+			size: "md",
+			class: { marker: "size-7 [&_svg]:size-3.5" }
+		},
+		{
+			withIcon: !0,
+			variant: "primary",
+			class: { marker: "border-primary/30 bg-primary/10 text-primary" }
+		},
+		{
+			withIcon: !0,
+			variant: "success",
+			class: { marker: "border-success/30 bg-success/10 text-success" }
+		},
+		{
+			withIcon: !0,
+			variant: "warning",
+			class: { marker: "border-warning/30 bg-warning/10 text-warning" }
+		},
+		{
+			withIcon: !0,
+			variant: "danger",
+			class: { marker: "border-danger/30 bg-danger/10 text-danger" }
+		},
+		{
+			withIcon: !0,
+			variant: "info",
+			class: { marker: "border-info/30 bg-info/10 text-info" }
+		}
+	],
+	defaultVariants: {
+		size: "md",
+		variant: "neutral"
+	}
+});
+//#endregion
+export { t as timelineTheme };

package/dist/theme/toggle.d.ts

@@ -0,0 +1,145 @@
+export declare const toggleTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    square: {
+        true: string;
+        false: string;
+    };
+    block: {
+        true: string;
+    };
+}, undefined, "inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-border bg-input font-medium whitespace-nowrap text-foreground transition-[color,background-color,border-color,box-shadow,opacity] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    square: {
+        true: string;
+        false: string;
+    };
+    block: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    square: {
+        true: string;
+        false: string;
+    };
+    block: {
+        true: string;
+    };
+}, undefined, "inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-border bg-input font-medium whitespace-nowrap text-foreground transition-[color,background-color,border-color,box-shadow,opacity] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+export type ToggleVariants = Parameters<typeof toggleTheme>[0];
+/**
+ * The group is the container; each item is a {@link toggleTheme} button. With
+ * a single toggle look, the group's variant only decides how the items are
+ * spaced — whether they touch or stand apart.
+ */
+export declare const toggleGroupTheme: import("tailwind-variants").TVReturnType<{
+    variant: {
+        /**
+         * Squared off where they meet and pulled together by a pixel, so
+         * adjacent borders collapse into one — the same trick `IButtonGroup`
+         * uses. The raised z-index keeps a focus ring from being clipped by
+         * the neighbour that overlaps it.
+         */
+        joined: {
+            item: string;
+        };
+        plain: {
+            root: string;
+        };
+    };
+    orientation: {
+        horizontal: {};
+        vertical: {
+            root: string;
+        };
+    };
+    block: {
+        true: {
+            root: string;
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, undefined, {
+    variant: {
+        /**
+         * Squared off where they meet and pulled together by a pixel, so
+         * adjacent borders collapse into one — the same trick `IButtonGroup`
+         * uses. The raised z-index keeps a focus ring from being clipped by
+         * the neighbour that overlaps it.
+         */
+        joined: {
+            item: string;
+        };
+        plain: {
+            root: string;
+        };
+    };
+    orientation: {
+        horizontal: {};
+        vertical: {
+            root: string;
+        };
+    };
+    block: {
+        true: {
+            root: string;
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        /**
+         * Squared off where they meet and pulled together by a pixel, so
+         * adjacent borders collapse into one — the same trick `IButtonGroup`
+         * uses. The raised z-index keeps a focus ring from being clipped by
+         * the neighbour that overlaps it.
+         */
+        joined: {
+            item: string;
+        };
+        plain: {
+            root: string;
+        };
+    };
+    orientation: {
+        horizontal: {};
+        vertical: {
+            root: string;
+        };
+    };
+    block: {
+        true: {
+            root: string;
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ToggleGroupSlots = keyof ReturnType<typeof toggleGroupTheme>;
+export type ToggleGroupVariant = 'joined' | 'plain';

package/dist/theme/toggle.js

@@ -0,0 +1,84 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/toggle.ts
+var t = e({
+	base: "inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-border bg-input font-medium whitespace-nowrap text-foreground transition-[color,background-color,border-color,box-shadow,opacity] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	variants: {
+		size: {
+			xs: "h-7 gap-1.5 px-2 text-xs has-[[data-icon=inline-end]]:pr-1.5 has-[[data-icon=inline-start]]:pl-1.5 [&_svg]:size-3.5",
+			sm: "h-8 px-3 text-sm has-[[data-icon=inline-end]]:pr-2 has-[[data-icon=inline-start]]:pl-2 [&_svg]:size-4",
+			md: "h-9 px-4 text-sm has-[[data-icon=inline-end]]:pr-3 has-[[data-icon=inline-start]]:pl-3 [&_svg]:size-4",
+			lg: "h-10 px-5 text-base has-[[data-icon=inline-end]]:pr-4 has-[[data-icon=inline-start]]:pl-4 [&_svg]:size-5",
+			xl: "h-12 px-6 text-base has-[[data-icon=inline-end]]:pr-5 has-[[data-icon=inline-start]]:pl-5 [&_svg]:size-5"
+		},
+		square: {
+			true: "",
+			false: ""
+		},
+		block: { true: "w-full" }
+	},
+	compoundVariants: [
+		{
+			square: !0,
+			size: "xs",
+			class: "w-7 px-0 has-[[data-icon]]:px-0"
+		},
+		{
+			square: !0,
+			size: "sm",
+			class: "w-8 px-0 has-[[data-icon]]:px-0"
+		},
+		{
+			square: !0,
+			size: "md",
+			class: "w-9 px-0 has-[[data-icon]]:px-0"
+		},
+		{
+			square: !0,
+			size: "lg",
+			class: "w-10 px-0 has-[[data-icon]]:px-0"
+		},
+		{
+			square: !0,
+			size: "xl",
+			class: "w-12 px-0 has-[[data-icon]]:px-0"
+		}
+	],
+	defaultVariants: {
+		size: "md",
+		square: !1
+	}
+}), n = e({
+	slots: {
+		root: "isolate inline-flex items-center",
+		item: ""
+	},
+	variants: {
+		variant: {
+			joined: { item: "relative hover:z-10 focus-visible:z-10" },
+			plain: { root: "gap-1" }
+		},
+		orientation: {
+			horizontal: {},
+			vertical: { root: "flex-col items-stretch" }
+		},
+		block: { true: {
+			root: "flex w-full",
+			item: "flex-1"
+		} }
+	},
+	compoundVariants: [{
+		variant: "joined",
+		orientation: "horizontal",
+		class: { item: "[&:not(:first-child)]:-ml-px [&:not(:first-child)]:rounded-l-none [&:not(:last-child)]:rounded-r-none" }
+	}, {
+		variant: "joined",
+		orientation: "vertical",
+		class: { item: "[&:not(:first-child)]:-mt-px [&:not(:first-child)]:rounded-t-none [&:not(:last-child)]:rounded-b-none" }
+	}],
+	defaultVariants: {
+		variant: "joined",
+		orientation: "horizontal"
+	}
+});
+//#endregion
+export { n as toggleGroupTheme, t as toggleTheme };

package/dist/theme/toolbar.d.ts

@@ -0,0 +1,56 @@
+export declare const toolbarTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            separator: string;
+        };
+        vertical: {
+            root: string;
+            separator: string;
+        };
+    };
+    bare: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    separator: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            separator: string;
+        };
+        vertical: {
+            root: string;
+            separator: string;
+        };
+    };
+    bare: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            separator: string;
+        };
+        vertical: {
+            root: string;
+            separator: string;
+        };
+    };
+    bare: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ToolbarSlots = keyof ReturnType<typeof toolbarTheme>;

package/dist/theme/toolbar.js

@@ -0,0 +1,21 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/toolbar.ts
+var t = e({
+	slots: {
+		root: "flex items-center gap-1 rounded-xl border border-border bg-background p-1",
+		separator: "shrink-0 bg-border"
+	},
+	variants: {
+		orientation: {
+			horizontal: { separator: "mx-1 h-5 w-px" },
+			vertical: {
+				root: "flex-col items-stretch",
+				separator: "my-1 h-px w-full"
+			}
+		},
+		bare: { true: { root: "rounded-none border-0 bg-transparent p-0" } }
+	},
+	defaultVariants: { orientation: "horizontal" }
+});
+//#endregion
+export { t as toolbarTheme };

package/dist/theme/tree.d.ts

@@ -0,0 +1,68 @@
+export declare const treeTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            item: string;
+            expander: string;
+            spacer: string;
+        };
+        md: {
+            item: string;
+            expander: string;
+            spacer: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    expander: string;
+    /** Keeps a leaf's label aligned with its siblings that do have a chevron. */
+    spacer: string;
+    icon: string;
+    label: string;
+    count: string;
+}, undefined, {
+    size: {
+        sm: {
+            item: string;
+            expander: string;
+            spacer: string;
+        };
+        md: {
+            item: string;
+            expander: string;
+            spacer: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    expander: string;
+    /** Keeps a leaf's label aligned with its siblings that do have a chevron. */
+    spacer: string;
+    icon: string;
+    label: string;
+    count: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            item: string;
+            expander: string;
+            spacer: string;
+        };
+        md: {
+            item: string;
+            expander: string;
+            spacer: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    expander: string;
+    /** Keeps a leaf's label aligned with its siblings that do have a chevron. */
+    spacer: string;
+    icon: string;
+    label: string;
+    count: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TreeSlots = keyof ReturnType<typeof treeTheme>;

package/dist/theme/tree.js

@@ -0,0 +1,28 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/tree.ts
+var t = e({
+	slots: {
+		root: "flex w-full list-none flex-col gap-0.5 outline-none select-none",
+		item: "flex cursor-pointer items-center gap-1.5 rounded-lg py-1.5 pr-2 text-sm text-foreground outline-none hover:bg-accent/60 focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-accent data-[selected]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+		expander: "shrink-0 text-muted-foreground transition-transform duration-200 data-[expanded]:rotate-90",
+		spacer: "shrink-0",
+		icon: "shrink-0 text-muted-foreground",
+		label: "truncate",
+		count: "ml-auto shrink-0 pr-1 pl-2 text-xs text-muted-foreground tabular-nums"
+	},
+	variants: { size: {
+		sm: {
+			item: "py-1 text-xs",
+			expander: "size-3.5",
+			spacer: "size-3.5"
+		},
+		md: {
+			item: "py-1.5 text-sm",
+			expander: "size-4",
+			spacer: "size-4"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as treeTheme };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",
-  "homepage": "https://github.com/therok1/iryx-ui#readme",
+  "homepage": "https://iryx-ui.com",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/therok1/iryx-ui.git"