iryx-ui 0.11.0 → 0.13.0

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.11.0",
+  "version": "0.13.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"
@@ -55,13 +55,14 @@
     "@hugeicons/vue": "^1.0.7",
     "@internationalized/date": "^3.12.3",
     "@nuxt/kit": "^4.4.8",
-    "reka-ui": "^2.9.10",
+    "reka-ui": "~2.10.3",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/test-utils": "^2.4.11",
+    "axe-core": "^4.13.0",
     "happy-dom": "^20.10.2",
     "typescript": "^6.0.3",
     "vite": "^8.0.16",