iryx-ui 0.4.0 → 0.5.0

package/dist/packages/iryx-ui/src/theme/pagination.js

@@ -4,7 +4,7 @@ var t = e({
 	slots: {
 		root: "flex items-center gap-2",
 		list: "flex items-center gap-1",
-		item: "inline-flex items-center justify-center rounded-lg border border-transparent text-sm font-medium transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
+		item: "inline-flex items-center justify-center rounded-xl border border-transparent text-sm font-medium transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
 		active: "bg-linear-to-b from-primary-from to-primary-to text-primary-foreground hover:brightness-110",
 		inactive: "text-foreground hover:bg-accent hover:text-accent-foreground",
 		ellipsis: "inline-flex items-center justify-center text-sm text-muted-foreground"

package/dist/packages/iryx-ui/src/theme/presets.js

@@ -46,20 +46,6 @@ var e = {
 			primaryTo: "oklch(0.54 0.24 293)"
 		}
 	},
-	emerald: {
-		light: {
-			primary: "oklch(0.596 0.145 163)",
-			primaryForeground: "oklch(0.985 0.005 248)",
-			primaryFrom: "oklch(0.596 0.145 163)",
-			primaryTo: "oklch(0.52 0.155 163)"
-		},
-		dark: {
-			primary: "oklch(0.7 0.15 162)",
-			primaryForeground: "oklch(0.17 0.04 165)",
-			primaryFrom: "oklch(0.7 0.15 162)",
-			primaryTo: "oklch(0.62 0.16 162)"
-		}
-	},
 	rose: {
 		light: {
 			primary: "oklch(0.586 0.222 17)",
@@ -73,34 +59,6 @@ var e = {
 			primaryFrom: "oklch(0.65 0.22 16)",
 			primaryTo: "oklch(0.57 0.235 16)"
 		}
-	},
-	amber: {
-		light: {
-			primary: "oklch(0.666 0.157 58)",
-			primaryForeground: "oklch(0.16 0.03 80)",
-			primaryFrom: "oklch(0.666 0.157 58)",
-			primaryTo: "oklch(0.59 0.165 56)"
-		},
-		dark: {
-			primary: "oklch(0.77 0.16 70)",
-			primaryForeground: "oklch(0.18 0.04 75)",
-			primaryFrom: "oklch(0.77 0.16 70)",
-			primaryTo: "oklch(0.7 0.17 68)"
-		}
-	},
-	sky: {
-		light: {
-			primary: "oklch(0.588 0.13 242)",
-			primaryForeground: "oklch(0.985 0.005 248)",
-			primaryFrom: "oklch(0.588 0.13 242)",
-			primaryTo: "oklch(0.51 0.14 242)"
-		},
-		dark: {
-			primary: "oklch(0.685 0.14 237)",
-			primaryForeground: "oklch(0.15 0.04 240)",
-			primaryFrom: "oklch(0.685 0.14 237)",
-			primaryTo: "oklch(0.6 0.15 237)"
-		}
 	}
 }, n = "iryx-ui-theme";
 function r(t) {

package/dist/packages/iryx-ui/src/theme/radio-group.js

@@ -4,7 +4,7 @@ var t = e({
 	slots: {
 		root: "grid gap-2",
 		wrapper: "flex items-start gap-2.5",
-		item: "aspect-square shrink-0 cursor-pointer rounded-full border border-border bg-background 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",
+		item: "aspect-square shrink-0 cursor-pointer rounded-full border border-border bg-background transition-colors outline-none focus:ring-2 focus:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary",
 		indicator: "flex size-full items-center justify-center after:block after:rounded-full after:bg-primary",
 		content: "grid gap-1",
 		label: "text-sm leading-5 text-foreground select-none",

package/dist/packages/iryx-ui/src/theme/select.js

@@ -4,10 +4,12 @@ import { tv as t } from "tailwind-variants";
 var n = t({
 	slots: {
 		trigger: `flex items-center justify-between gap-2 ${e} cursor-pointer data-[placeholder]:text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:opacity-60`,
-		content: "z-50 min-w-32 overflow-hidden rounded-lg border border-border bg-background text-foreground shadow-md",
+		content: "z-50 min-w-32 overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-md",
 		viewport: "p-1",
-		item: "relative flex cursor-pointer items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
-		itemIndicator: "absolute left-2 flex items-center justify-center text-primary [&_svg]:size-4"
+		item: "relative flex cursor-pointer items-center rounded-lg py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+		itemIndicator: "absolute left-2 flex items-center justify-center text-primary [&_svg]:size-4",
+		group: "not-first:mt-1",
+		groupLabel: "px-2 py-1.5 text-xs font-medium text-muted-foreground"
 	},
 	variants: { size: {
 		sm: { trigger: "h-8 px-2.5 text-sm" },

package/dist/packages/iryx-ui/src/theme/skeleton.js

@@ -4,7 +4,7 @@ var t = e({
 	base: "animate-pulse bg-muted",
 	variants: { variant: {
 		text: "h-[1em] w-full rounded",
-		rect: "rounded-lg",
+		rect: "rounded-xl",
 		circle: "aspect-square rounded-full"
 	} },
 	defaultVariants: { variant: "rect" }

package/dist/packages/iryx-ui/src/theme/stepper.js

@@ -4,7 +4,7 @@ var t = e({
 	slots: {
 		root: "flex w-full",
 		item: "group relative flex flex-1 items-center gap-3",
-		trigger: "flex items-center gap-3 rounded-lg text-left outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50",
+		trigger: "flex items-center gap-3 rounded-xl text-left outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50",
 		indicator: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-linear-to-b text-sm font-medium transition-[color,border-color] group-data-[state=active]:border-primary group-data-[state=active]:from-primary-from group-data-[state=active]:to-primary-to group-data-[state=active]:text-primary-foreground group-data-[state=completed]:border-primary group-data-[state=completed]:from-primary-from group-data-[state=completed]:to-primary-to group-data-[state=completed]:text-primary-foreground [&_svg]:size-4",
 		content: "flex flex-col gap-0.5",
 		title: "text-sm font-medium text-foreground",

package/dist/packages/iryx-ui/src/theme/switch.js

@@ -2,7 +2,7 @@ import { tv as e } from "tailwind-variants";
 //#region src/theme/switch.ts
 var t = e({ slots: {
 	wrapper: "flex items-start gap-2.5",
-	root: "inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
+	root: "inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors outline-none focus:ring-2 focus:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
 	thumb: "pointer-events-none block size-4 rounded-full bg-background shadow-sm transition-transform data-[state=checked]:translate-x-4.5 data-[state=unchecked]:translate-x-0.5",
 	content: "grid gap-1",
 	label: "text-sm leading-5 font-medium text-foreground select-none",

package/dist/packages/iryx-ui/src/theme/tabs.js

@@ -11,9 +11,9 @@ var t = e({
 	variants: {
 		variant: {
 			solid: {
-				list: "rounded-lg bg-muted p-1",
-				indicator: "top-1 h-[calc(100%---spacing(2))] rounded-md bg-background shadow-sm",
-				trigger: "rounded-md px-3 py-1.5 text-muted-foreground data-[state=active]:text-foreground"
+				list: "rounded-xl bg-muted p-1",
+				indicator: "top-1 h-[calc(100%---spacing(2))] rounded-lg bg-background shadow-sm",
+				trigger: "rounded-lg px-3 py-1.5 text-muted-foreground data-[state=active]:text-foreground"
 			},
 			line: {
 				list: "gap-4 border-b border-border",

package/dist/packages/iryx-ui/src/theme/toast.js

@@ -3,13 +3,13 @@ import { tv as e } from "tailwind-variants";
 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",
+		root: "flex items-start gap-3 rounded-xl 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"
+		action: "shrink-0 self-center rounded-lg 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-lg 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: {

package/dist/packages/iryx-ui/src/theme/tooltip.js

@@ -1,7 +1,7 @@
 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",
+	content: "z-50 max-w-xs rounded-lg 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

package/dist/plugin.d.ts

@@ -7,7 +7,7 @@ export interface IryxUiPluginOptions extends Partial<IryxUiConfig> {
     prefix?: string;
     /** Startup appearance. A preference the user already stored wins over this. */
     appearance?: Appearance;
-    /** Color theme: a preset name (`'emerald'`, `'rose'`…) or a custom theme. */
+    /** Color theme: a preset name (`'violet'`, `'rose'`) or a custom theme. */
     theme?: Theme | ThemePresetName;
 }
 /**

package/dist/theme/button.d.ts

@@ -20,7 +20,7 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
     block: {
         true: string;
     };
-}, 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", {
+}, undefined, "inline-flex shrink-0 items-center justify-center gap-2 rounded-xl 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;
@@ -64,5 +64,5 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
     block: {
         true: string;
     };
-}, 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>>;
+}, undefined, "inline-flex shrink-0 items-center justify-center gap-2 rounded-xl 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/combobox.d.ts

@@ -0,0 +1,101 @@
+export declare const comboboxTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            anchor: string;
+        };
+        md: {
+            anchor: string;
+        };
+        lg: {
+            anchor: string;
+        };
+    };
+    invalid: {
+        true: {
+            anchor: string;
+        };
+    };
+    disabled: {
+        true: {
+            anchor: string;
+        };
+    };
+}, {
+    anchor: string;
+    input: string;
+    trigger: string;
+    content: string;
+    viewport: string;
+    item: string;
+    itemIndicator: string;
+    empty: string;
+    group: string;
+    groupLabel: string;
+}, undefined, {
+    size: {
+        sm: {
+            anchor: string;
+        };
+        md: {
+            anchor: string;
+        };
+        lg: {
+            anchor: string;
+        };
+    };
+    invalid: {
+        true: {
+            anchor: string;
+        };
+    };
+    disabled: {
+        true: {
+            anchor: string;
+        };
+    };
+}, {
+    anchor: string;
+    input: string;
+    trigger: string;
+    content: string;
+    viewport: string;
+    item: string;
+    itemIndicator: string;
+    empty: string;
+    group: string;
+    groupLabel: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            anchor: string;
+        };
+        md: {
+            anchor: string;
+        };
+        lg: {
+            anchor: string;
+        };
+    };
+    invalid: {
+        true: {
+            anchor: string;
+        };
+    };
+    disabled: {
+        true: {
+            anchor: string;
+        };
+    };
+}, {
+    anchor: string;
+    input: string;
+    trigger: string;
+    content: string;
+    viewport: string;
+    item: string;
+    itemIndicator: string;
+    empty: string;
+    group: string;
+    groupLabel: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ComboboxSlots = keyof ReturnType<typeof comboboxTheme>;

package/dist/theme/index.d.ts

@@ -5,6 +5,7 @@ export * from './button';
 export * from './button-group';
 export * from './card';
 export * from './checkbox';
+export * from './combobox';
 export * from './dialog';
 export * from './dropdown-menu';
 export * from './empty-state';

package/dist/theme/input.d.ts

@@ -1,5 +1,5 @@
 /** Shared field chrome for Input, Textarea and the Select trigger. */
-export declare const fieldBase = "w-full rounded-lg border border-border bg-background text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50";
+export declare const fieldBase = "w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50";
 export declare const inputTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
@@ -9,7 +9,7 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
     invalid: {
         true: string;
     };
-}, undefined, "flex w-full rounded-lg border border-border bg-background text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", {
+}, undefined, "flex w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", {
     size: {
         sm: string;
         md: string;
@@ -27,7 +27,7 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
     invalid: {
         true: string;
     };
-}, undefined, "flex w-full rounded-lg border border-border bg-background text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", unknown, unknown, undefined>>;
+}, undefined, "flex w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", unknown, unknown, undefined>>;
 export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
@@ -37,7 +37,7 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
     invalid: {
         true: string;
     };
-}, undefined, "block resize-y w-full rounded-lg border border-border bg-background text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", {
+}, undefined, "block resize-y w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", {
     size: {
         sm: string;
         md: string;
@@ -55,6 +55,6 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
     invalid: {
         true: string;
     };
-}, undefined, "block resize-y w-full rounded-lg border border-border bg-background text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", unknown, unknown, undefined>>;
+}, undefined, "block resize-y w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", unknown, unknown, undefined>>;
 export type InputVariants = Parameters<typeof inputTheme>[0];
 export type TextareaVariants = Parameters<typeof textareaTheme>[0];

package/dist/theme/presets.d.ts

@@ -58,20 +58,6 @@ export declare const themes: {
             primaryTo: string;
         };
     };
-    emerald: {
-        light: {
-            primary: string;
-            primaryForeground: string;
-            primaryFrom: string;
-            primaryTo: string;
-        };
-        dark: {
-            primary: string;
-            primaryForeground: string;
-            primaryFrom: string;
-            primaryTo: string;
-        };
-    };
     rose: {
         light: {
             primary: string;
@@ -86,34 +72,6 @@ export declare const themes: {
             primaryTo: string;
         };
     };
-    amber: {
-        light: {
-            primary: string;
-            primaryForeground: string;
-            primaryFrom: string;
-            primaryTo: string;
-        };
-        dark: {
-            primary: string;
-            primaryForeground: string;
-            primaryFrom: string;
-            primaryTo: string;
-        };
-    };
-    sky: {
-        light: {
-            primary: string;
-            primaryForeground: string;
-            primaryFrom: string;
-            primaryTo: string;
-        };
-        dark: {
-            primary: string;
-            primaryForeground: string;
-            primaryFrom: string;
-            primaryTo: string;
-        };
-    };
 };
 export type ThemePresetName = keyof typeof themes;
 /**

package/dist/theme/select.d.ts

@@ -16,6 +16,8 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
     viewport: string;
     item: string;
     itemIndicator: string;
+    group: string;
+    groupLabel: string;
 }, undefined, {
     size: {
         sm: {
@@ -34,6 +36,8 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
     viewport: string;
     item: string;
     itemIndicator: string;
+    group: string;
+    groupLabel: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
@@ -52,5 +56,7 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
     viewport: string;
     item: string;
     itemIndicator: string;
+    group: string;
+    groupLabel: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SelectSlots = keyof ReturnType<typeof selectTheme>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",

package/theme.css

@@ -27,6 +27,17 @@
   --iryx-muted: oklch(0.97 0 0);
   --iryx-muted-foreground: oklch(0.556 0 0);
   --iryx-border: oklch(0.922 0 0);
+  /*
+   * Fill for controls that read as recessed — the fields and the outline
+   * button. Its own token rather than `--iryx-muted`, since how raised a
+   * control looks is a separate decision from how a muted surface reads.
+   *
+   * Flat in light and raised in dark, which is where the lift is legible;
+   * shadcn does the same with `bg-transparent dark:bg-input/30`. Expressed as
+   * two token values rather than a `dark:` variant, so components never carry
+   * mode-specific classes.
+   */
+  --iryx-input: oklch(1 0 0);
   /* Brand primary — kept as a violet gradient. */
   --iryx-primary: oklch(0.59 0.2 277.19);
   --iryx-primary-foreground: oklch(0.985 0.005 248);
@@ -68,6 +79,8 @@
   --iryx-muted: oklch(0.269 0 0);
   --iryx-muted-foreground: oklch(0.708 0 0);
   --iryx-border: oklch(1 0 0 / 10%);
+  /* Lifted just off the background — `--iryx-muted` reads as a panel here. */
+  --iryx-input: oklch(0.205 0 0);
   /* Brand primary — kept as a violet gradient. */
   --iryx-primary: oklch(0.62 0.22 293);
   --iryx-primary-foreground: oklch(0.985 0.005 248);
@@ -108,6 +121,7 @@
   --color-muted: var(--iryx-muted);
   --color-muted-foreground: var(--iryx-muted-foreground);
   --color-border: var(--iryx-border);
+  --color-input: var(--iryx-input);
   --color-success: var(--iryx-success);
   --color-success-foreground: var(--iryx-success-foreground);
   --color-success-muted: var(--iryx-success-muted);