iryx-ui 0.0.1 → 0.2.0

package/dist/theme/input.d.ts

@@ -0,0 +1,60 @@
+/** 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 inputTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    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", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    invalid: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    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>>;
+export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    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", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    invalid: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    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>>;
+export type InputVariants = Parameters<typeof inputTheme>[0];
+export type TextareaVariants = Parameters<typeof textareaTheme>[0];

package/dist/theme/input.js

@@ -0,0 +1,27 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/input.ts
+var t = "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", n = e({
+	base: `flex ${t}`,
+	variants: {
+		size: {
+			sm: "h-8 px-2.5 text-sm",
+			md: "h-9 px-3 text-sm",
+			lg: "h-10 px-4 text-base"
+		},
+		invalid: { true: "border-red-500 focus-visible:ring-red-500/40" }
+	},
+	defaultVariants: { size: "md" }
+}), r = e({
+	base: `block resize-y ${t}`,
+	variants: {
+		size: {
+			sm: "min-h-16 px-2.5 py-1.5 text-sm",
+			md: "min-h-20 px-3 py-2 text-sm",
+			lg: "min-h-24 px-4 py-2.5 text-base"
+		},
+		invalid: { true: "border-red-500 focus-visible:ring-red-500/40" }
+	},
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as fieldBase, n as inputTheme, r as textareaTheme };

package/dist/theme/label.d.ts

@@ -0,0 +1,14 @@
+export declare const labelTheme: import("tailwind-variants").TVReturnType<{
+    required: {
+        true: string;
+    };
+}, undefined, "inline-flex items-center gap-1 text-sm leading-none font-medium text-foreground select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50", {
+    required: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    required: {
+        true: string;
+    };
+}, undefined, "inline-flex items-center gap-1 text-sm leading-none font-medium text-foreground select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50", unknown, unknown, undefined>>;
+export type LabelVariants = Parameters<typeof labelTheme>[0];

package/dist/theme/label.js

@@ -0,0 +1,8 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/label.ts
+var t = e({
+	base: "inline-flex items-center gap-1 text-sm leading-none font-medium text-foreground select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+	variants: { required: { true: "after:text-red-500 after:content-['*']" } }
+});
+//#endregion
+export { t as labelTheme };

package/dist/theme/presets.d.ts

@@ -12,6 +12,26 @@ export interface ThemeColors {
     muted?: string;
     mutedForeground?: string;
     border?: string;
+    success?: string;
+    successForeground?: string;
+    successMuted?: string;
+    successMutedForeground?: string;
+    successBorder?: string;
+    warning?: string;
+    warningForeground?: string;
+    warningMuted?: string;
+    warningMutedForeground?: string;
+    warningBorder?: string;
+    danger?: string;
+    dangerForeground?: string;
+    dangerMuted?: string;
+    dangerMutedForeground?: string;
+    dangerBorder?: string;
+    info?: string;
+    infoForeground?: string;
+    infoMuted?: string;
+    infoMutedForeground?: string;
+    infoBorder?: string;
 }
 /** A theme provides token values per appearance mode. Omitted tokens keep the defaults from theme.css. */
 export interface Theme {

package/dist/theme/presets.js

@@ -10,7 +10,27 @@ var e = {
 	accentForeground: "--iryx-accent-foreground",
 	muted: "--iryx-muted",
 	mutedForeground: "--iryx-muted-foreground",
-	border: "--iryx-border"
+	border: "--iryx-border",
+	success: "--iryx-success",
+	successForeground: "--iryx-success-foreground",
+	successMuted: "--iryx-success-muted",
+	successMutedForeground: "--iryx-success-muted-foreground",
+	successBorder: "--iryx-success-border",
+	warning: "--iryx-warning",
+	warningForeground: "--iryx-warning-foreground",
+	warningMuted: "--iryx-warning-muted",
+	warningMutedForeground: "--iryx-warning-muted-foreground",
+	warningBorder: "--iryx-warning-border",
+	danger: "--iryx-danger",
+	dangerForeground: "--iryx-danger-foreground",
+	dangerMuted: "--iryx-danger-muted",
+	dangerMutedForeground: "--iryx-danger-muted-foreground",
+	dangerBorder: "--iryx-danger-border",
+	info: "--iryx-info",
+	infoForeground: "--iryx-info-foreground",
+	infoMuted: "--iryx-info-muted",
+	infoMutedForeground: "--iryx-info-muted-foreground",
+	infoBorder: "--iryx-info-border"
 }, t = {
 	violet: {
 		light: {

package/dist/theme/radio-group.d.ts

@@ -0,0 +1,71 @@
+export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            item: string;
+            indicator: string;
+        };
+        md: {
+            item: string;
+            indicator: string;
+        };
+        lg: {
+            item: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    item: string;
+    indicator: string;
+    content: string;
+    label: string;
+    description: string;
+}, undefined, {
+    size: {
+        sm: {
+            item: string;
+            indicator: string;
+        };
+        md: {
+            item: string;
+            indicator: string;
+        };
+        lg: {
+            item: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    item: string;
+    indicator: string;
+    content: string;
+    label: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            item: string;
+            indicator: string;
+        };
+        md: {
+            item: string;
+            indicator: string;
+        };
+        lg: {
+            item: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    item: string;
+    indicator: string;
+    content: string;
+    label: string;
+    description: string;
+}, undefined, unknown, unknown, undefined>>;
+export type RadioGroupSlots = keyof ReturnType<typeof radioGroupTheme>;

package/dist/theme/radio-group.js

@@ -0,0 +1,30 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/radio-group.ts
+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",
+		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",
+		description: "text-sm leading-snug text-muted-foreground"
+	},
+	variants: { size: {
+		sm: {
+			item: "mt-0.5 size-3.5",
+			indicator: "after:size-1.5"
+		},
+		md: {
+			item: "mt-0.5 size-4",
+			indicator: "after:size-2"
+		},
+		lg: {
+			item: "size-5",
+			indicator: "after:size-2.5"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as radioGroupTheme };

package/dist/theme/select.d.ts

@@ -0,0 +1,56 @@
+export declare const selectTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    content: string;
+    viewport: string;
+    item: string;
+    itemIndicator: string;
+}, undefined, {
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    content: string;
+    viewport: string;
+    item: string;
+    itemIndicator: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    content: string;
+    viewport: string;
+    item: string;
+    itemIndicator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SelectSlots = keyof ReturnType<typeof selectTheme>;

package/dist/theme/select.js

@@ -0,0 +1,20 @@
+import { fieldBase as e } from "./input.js";
+import { tv as t } from "tailwind-variants";
+//#region src/theme/select.ts
+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",
+		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"
+	},
+	variants: { size: {
+		sm: { trigger: "h-8 px-2.5 text-sm" },
+		md: { trigger: "h-9 px-3 text-sm" },
+		lg: { trigger: "h-10 px-4 text-base" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { n as selectTheme };

package/dist/theme/switch.d.ts

@@ -2,6 +2,10 @@ export declare const switchTheme: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
             thumb?: import("tailwind-variants").ClassValue;
         };
     };
@@ -9,24 +13,47 @@ export declare const switchTheme: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
             thumb?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
+    /** Only rendered when a `label` or `description` is provided. */
+    wrapper: string;
     root: string;
     thumb: string;
+    content: string;
+    label: string;
+    description: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
             thumb?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
+    /** Only rendered when a `label` or `description` is provided. */
+    wrapper: string;
     root: string;
     thumb: string;
+    content: string;
+    label: string;
+    description: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
+    /** Only rendered when a `label` or `description` is provided. */
+    wrapper: string;
     root: string;
     thumb: string;
+    content: string;
+    label: string;
+    description: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SwitchSlots = keyof ReturnType<typeof switchTheme>;

package/dist/theme/switch.js

@@ -1,8 +1,12 @@
 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",
-	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"
+	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",
+	description: "text-sm leading-snug text-muted-foreground"
 } });
 //#endregion
 export { t as switchTheme };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "description": "Iryx — an artful Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",
@@ -41,12 +41,6 @@
   "engines": {
     "node": ">=20"
   },
-  "scripts": {
-    "build": "vite build && vue-tsc -p tsconfig.build.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "typecheck": "vue-tsc --noEmit"
-  },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
@@ -66,5 +60,11 @@
     "vitest": "^4.1.8",
     "vue": "^3.5.35",
     "vue-tsc": "^3.3.4"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit"
   }
-}
+}

package/theme.css

@@ -32,6 +32,31 @@
   --iryx-primary-foreground: oklch(0.985 0.005 248);
   --iryx-primary-from: oklch(0.59 0.2 277.19);
   --iryx-primary-to: oklch(0.51 0.23 276.99);
+  /*
+   * Status colours. Each has five roles: the solid fill, text on that fill,
+   * a tinted surface, text on that surface, and a border. Components reference
+   * these instead of raw palette classes, so a theme can restyle them.
+   */
+  --iryx-success: oklch(0.596 0.145 163.225);
+  --iryx-success-foreground: oklch(1 0 0);
+  --iryx-success-muted: oklch(0.979 0.021 166.113);
+  --iryx-success-muted-foreground: oklch(0.508 0.118 165.612);
+  --iryx-success-border: oklch(0.905 0.093 164.15);
+  --iryx-warning: oklch(0.666 0.179 58.318);
+  --iryx-warning-foreground: oklch(0.279 0.077 45.635);
+  --iryx-warning-muted: oklch(0.987 0.022 95.277);
+  --iryx-warning-muted-foreground: oklch(0.555 0.163 48.998);
+  --iryx-warning-border: oklch(0.924 0.12 95.746);
+  --iryx-danger: oklch(0.577 0.245 27.325);
+  --iryx-danger-foreground: oklch(1 0 0);
+  --iryx-danger-muted: oklch(0.971 0.013 17.38);
+  --iryx-danger-muted-foreground: oklch(0.505 0.213 27.518);
+  --iryx-danger-border: oklch(0.885 0.062 18.334);
+  --iryx-info: oklch(0.546 0.245 262.881);
+  --iryx-info-foreground: oklch(1 0 0);
+  --iryx-info-muted: oklch(0.97 0.014 254.604);
+  --iryx-info-muted-foreground: oklch(0.488 0.243 264.376);
+  --iryx-info-border: oklch(0.882 0.059 254.128);
 }
 
 .dark {
@@ -48,6 +73,27 @@
   --iryx-primary-foreground: oklch(0.985 0.005 248);
   --iryx-primary-from: oklch(0.62 0.22 293);
   --iryx-primary-to: oklch(0.54 0.24 293);
+  /* Status colours — lighter fills, deep tinted surfaces. */
+  --iryx-success: oklch(0.696 0.17 162.48);
+  --iryx-success-foreground: oklch(0.262 0.051 172.552);
+  --iryx-success-muted: oklch(0.262 0.051 172.552);
+  --iryx-success-muted-foreground: oklch(0.845 0.143 164.978);
+  --iryx-success-border: oklch(0.378 0.077 168.94);
+  --iryx-warning: oklch(0.828 0.189 84.429);
+  --iryx-warning-foreground: oklch(0.279 0.077 45.635);
+  --iryx-warning-muted: oklch(0.279 0.077 45.635);
+  --iryx-warning-muted-foreground: oklch(0.879 0.169 91.605);
+  --iryx-warning-border: oklch(0.414 0.112 45.904);
+  --iryx-danger: oklch(0.637 0.237 25.331);
+  --iryx-danger-foreground: oklch(0.258 0.092 26.042);
+  --iryx-danger-muted: oklch(0.258 0.092 26.042);
+  --iryx-danger-muted-foreground: oklch(0.808 0.114 19.571);
+  --iryx-danger-border: oklch(0.396 0.141 25.723);
+  --iryx-info: oklch(0.623 0.214 259.815);
+  --iryx-info-foreground: oklch(0.282 0.091 267.935);
+  --iryx-info-muted: oklch(0.282 0.091 267.935);
+  --iryx-info-muted-foreground: oklch(0.809 0.105 251.813);
+  --iryx-info-border: oklch(0.379 0.146 265.522);
 }
 
 @theme inline {
@@ -62,4 +108,24 @@
   --color-muted: var(--iryx-muted);
   --color-muted-foreground: var(--iryx-muted-foreground);
   --color-border: var(--iryx-border);
+  --color-success: var(--iryx-success);
+  --color-success-foreground: var(--iryx-success-foreground);
+  --color-success-muted: var(--iryx-success-muted);
+  --color-success-muted-foreground: var(--iryx-success-muted-foreground);
+  --color-success-border: var(--iryx-success-border);
+  --color-warning: var(--iryx-warning);
+  --color-warning-foreground: var(--iryx-warning-foreground);
+  --color-warning-muted: var(--iryx-warning-muted);
+  --color-warning-muted-foreground: var(--iryx-warning-muted-foreground);
+  --color-warning-border: var(--iryx-warning-border);
+  --color-danger: var(--iryx-danger);
+  --color-danger-foreground: var(--iryx-danger-foreground);
+  --color-danger-muted: var(--iryx-danger-muted);
+  --color-danger-muted-foreground: var(--iryx-danger-muted-foreground);
+  --color-danger-border: var(--iryx-danger-border);
+  --color-info: var(--iryx-info);
+  --color-info-foreground: var(--iryx-info-foreground);
+  --color-info-muted: var(--iryx-info-muted);
+  --color-info-muted-foreground: var(--iryx-info-muted-foreground);
+  --color-info-border: var(--iryx-info-border);
 }