iryx-ui 0.1.0 → 0.3.0

package/dist/theme/stepper.d.ts

@@ -0,0 +1,56 @@
+export declare const stepperTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {};
+        vertical: {
+            root: string;
+            item: string;
+            separator: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    trigger: string;
+    indicator: string;
+    content: string;
+    title: string;
+    description: string;
+    separator: string;
+}, undefined, {
+    orientation: {
+        horizontal: {};
+        vertical: {
+            root: string;
+            item: string;
+            separator: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    trigger: string;
+    indicator: string;
+    content: string;
+    title: string;
+    description: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {};
+        vertical: {
+            root: string;
+            item: string;
+            separator: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    trigger: string;
+    indicator: string;
+    content: string;
+    title: string;
+    description: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type StepperSlots = keyof ReturnType<typeof stepperTheme>;

package/dist/theme/switch.d.ts

@@ -1,22 +1,22 @@
 export declare const switchTheme: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            label?: import("tailwind-variants").ClassValue;
-            wrapper?: 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;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
-            label?: import("tailwind-variants").ClassValue;
-            wrapper?: 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;
         };
     };
@@ -31,11 +31,11 @@ export declare const switchTheme: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            label?: import("tailwind-variants").ClassValue;
-            wrapper?: 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;
         };
     };

package/dist/theme/tabs.d.ts

@@ -0,0 +1,104 @@
+export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** Pill sliding along a muted track. */
+        solid: {
+            list: string;
+            indicator: string;
+            trigger: string;
+        };
+        /**
+         * Underline for page-level navigation. The trigger is square: a rounded
+         * corner would bend the bar that sits under it.
+         */
+        line: {
+            list: string;
+            indicator: string;
+            trigger: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            indicator: string;
+        };
+        vertical: {
+            root: string;
+            list: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    indicator: string;
+    trigger: string;
+    content: string;
+}, undefined, {
+    variant: {
+        /** Pill sliding along a muted track. */
+        solid: {
+            list: string;
+            indicator: string;
+            trigger: string;
+        };
+        /**
+         * Underline for page-level navigation. The trigger is square: a rounded
+         * corner would bend the bar that sits under it.
+         */
+        line: {
+            list: string;
+            indicator: string;
+            trigger: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            indicator: string;
+        };
+        vertical: {
+            root: string;
+            list: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    indicator: string;
+    trigger: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** Pill sliding along a muted track. */
+        solid: {
+            list: string;
+            indicator: string;
+            trigger: string;
+        };
+        /**
+         * Underline for page-level navigation. The trigger is square: a rounded
+         * corner would bend the bar that sits under it.
+         */
+        line: {
+            list: string;
+            indicator: string;
+            trigger: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            indicator: string;
+        };
+        vertical: {
+            root: string;
+            list: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    indicator: string;
+    trigger: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TabsSlots = keyof ReturnType<typeof tabsTheme>;

package/dist/theme/toast.d.ts

@@ -0,0 +1,176 @@
+export declare const toastTheme: import("tailwind-variants").TVReturnType<{
+    variant: {
+        neutral: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+        info: {
+            root: string;
+            icon: string;
+        };
+    };
+    position: {
+        'top-left': {
+            viewport: string;
+        };
+        'top-center': {
+            viewport: string;
+        };
+        'top-right': {
+            viewport: string;
+        };
+        'bottom-left': {
+            viewport: string;
+        };
+        'bottom-center': {
+            viewport: string;
+        };
+        'bottom-right': {
+            viewport: string;
+        };
+    };
+    /** Tightens the title/description gap when both are present. */
+    withTitle: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    viewport: string;
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    action: string;
+    close: string;
+}, undefined, {
+    variant: {
+        neutral: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+        info: {
+            root: string;
+            icon: string;
+        };
+    };
+    position: {
+        'top-left': {
+            viewport: string;
+        };
+        'top-center': {
+            viewport: string;
+        };
+        'top-right': {
+            viewport: string;
+        };
+        'bottom-left': {
+            viewport: string;
+        };
+        'bottom-center': {
+            viewport: string;
+        };
+        'bottom-right': {
+            viewport: string;
+        };
+    };
+    /** Tightens the title/description gap when both are present. */
+    withTitle: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    viewport: string;
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    action: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        neutral: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+        info: {
+            root: string;
+            icon: string;
+        };
+    };
+    position: {
+        'top-left': {
+            viewport: string;
+        };
+        'top-center': {
+            viewport: string;
+        };
+        'top-right': {
+            viewport: string;
+        };
+        'bottom-left': {
+            viewport: string;
+        };
+        'bottom-center': {
+            viewport: string;
+        };
+        'bottom-right': {
+            viewport: string;
+        };
+    };
+    /** Tightens the title/description gap when both are present. */
+    withTitle: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    viewport: string;
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    action: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ToastSlots = keyof ReturnType<typeof toastTheme>;

package/dist/theme/tooltip.d.ts

@@ -0,0 +1,32 @@
+export declare const tooltipTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    content: string;
+    arrow: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    content: string;
+    arrow: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    content: string;
+    arrow: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TooltipSlots = keyof ReturnType<typeof tooltipTheme>;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.1.0",
-  "description": "Iryx — an artful Vue 3 component library built on Reka UI and Tailwind CSS v4.",
+  "version": "0.3.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",
@@ -45,8 +45,9 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
+    "@hugeicons/core-free-icons": "^4.2.3",
+    "@hugeicons/vue": "^1.0.7",
     "@nuxt/kit": "^4.4.8",
-    "lucide-vue-next": "^1.0.0",
     "reka-ui": "^2.9.10",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2"

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,79 @@
   --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);
+  --animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out infinite;
+  --animate-fade-in: fade-in 150ms ease-out;
+  --animate-fade-out: fade-out 150ms ease-in;
+  --animate-dialog-in: dialog-in 150ms ease-out;
+  --animate-dialog-out: dialog-out 150ms ease-in;
+  --animate-toast-in: toast-in 150ms ease-out;
+}
+
+/* Indeterminate Progress: slide a short bar back and forth across the track. */
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(300%);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+/*
+ * Dialog enter/exit. Centring uses Tailwind's `translate` property, which is
+ * applied independently of `transform` — so these keyframes must only touch
+ * scale. Adding a translate here would compose with the centring one and slide
+ * the dialog in from the top-left.
+ */
+@keyframes dialog-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@keyframes dialog-out {
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
 }

package/dist/component-names.js

@@ -1,16 +0,0 @@
-//#region src/component-names.ts
-var e = [
-	"App",
-	"Button",
-	"Checkbox",
-	"Form",
-	"FormField",
-	"Input",
-	"Label",
-	"RadioGroup",
-	"Select",
-	"Switch",
-	"Textarea"
-];
-//#endregion
-export { e as componentNames };

package/dist/components/Button.vue_vue_type_script_setup_true_lang.js

@@ -1,54 +0,0 @@
-import { useIryxUiConfig as e } from "../config.js";
-import { buttonTheme as t } from "../theme/button.js";
-import { computed as n, createBlock as r, createCommentVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, unref as l, withCtx as u } from "vue";
-import { Primitive as d } from "reka-ui";
-import { LoaderCircle as f } from "lucide-vue-next";
-//#region src/components/Button.vue?vue&type=script&setup=true&lang.ts
-var p = /*@__PURE__*/ a({
-	__name: "Button",
-	props: {
-		as: { default: "button" },
-		asChild: { type: Boolean },
-		variant: {},
-		size: {},
-		block: { type: Boolean },
-		loading: { type: Boolean },
-		disabled: { type: Boolean },
-		unstyled: {
-			type: Boolean,
-			default: void 0
-		},
-		type: { default: "button" },
-		class: {}
-	},
-	setup(a) {
-		let p = a, m = e(), h = n(() => p.unstyled ?? m.unstyled), g = n(() => h.value ? p.class : t({
-			variant: p.variant,
-			size: p.size,
-			block: p.block,
-			class: p.class
-		}));
-		return (e, t) => (s(), r(l(d), {
-			as: p.as,
-			"as-child": p.asChild,
-			type: p.as === "button" ? p.type : void 0,
-			disabled: p.disabled || p.loading || void 0,
-			class: o(g.value)
-		}, {
-			default: u(() => [p.loading ? (s(), r(l(f), {
-				key: 0,
-				class: "animate-spin",
-				"aria-hidden": "true"
-			})) : i("", !0), c(e.$slots, "default")]),
-			_: 3
-		}, 8, [
-			"as",
-			"as-child",
-			"type",
-			"disabled",
-			"class"
-		]));
-	}
-});
-//#endregion
-export { p as default };