iryx-ui 0.2.0 → 0.4.0

package/dist/theme/stat.d.ts

@@ -0,0 +1,110 @@
+export declare const statTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            value: string;
+        };
+        md: {
+            value: string;
+        };
+        lg: {
+            value: string;
+        };
+    };
+    /**
+     * Direction of change. `neutral` is used when the delta is zero, so a flat
+     * result does not read as either good or bad.
+     */
+    trend: {
+        up: {
+            delta: string;
+        };
+        down: {
+            delta: string;
+        };
+        neutral: {
+            delta: string;
+        };
+    };
+}, {
+    root: string;
+    /** Small, uppercase and tracked out, so the value carries the weight. */
+    label: string;
+    value: string;
+    delta: string;
+    hint: string;
+    /** Column, so the delta always sits on its own line under the value. */
+    row: string;
+}, undefined, {
+    size: {
+        sm: {
+            value: string;
+        };
+        md: {
+            value: string;
+        };
+        lg: {
+            value: string;
+        };
+    };
+    /**
+     * Direction of change. `neutral` is used when the delta is zero, so a flat
+     * result does not read as either good or bad.
+     */
+    trend: {
+        up: {
+            delta: string;
+        };
+        down: {
+            delta: string;
+        };
+        neutral: {
+            delta: string;
+        };
+    };
+}, {
+    root: string;
+    /** Small, uppercase and tracked out, so the value carries the weight. */
+    label: string;
+    value: string;
+    delta: string;
+    hint: string;
+    /** Column, so the delta always sits on its own line under the value. */
+    row: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            value: string;
+        };
+        md: {
+            value: string;
+        };
+        lg: {
+            value: string;
+        };
+    };
+    /**
+     * Direction of change. `neutral` is used when the delta is zero, so a flat
+     * result does not read as either good or bad.
+     */
+    trend: {
+        up: {
+            delta: string;
+        };
+        down: {
+            delta: string;
+        };
+        neutral: {
+            delta: string;
+        };
+    };
+}, {
+    root: string;
+    /** Small, uppercase and tracked out, so the value carries the weight. */
+    label: string;
+    value: string;
+    delta: string;
+    hint: string;
+    /** Column, so the delta always sits on its own line under the value. */
+    row: string;
+}, undefined, unknown, unknown, undefined>>;
+export type StatSlots = keyof ReturnType<typeof statTheme>;

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/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.2.0",
-  "description": "Iryx — an artful Vue 3 component library built on Reka UI and Tailwind CSS v4.",
+  "version": "0.4.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

@@ -128,4 +128,59 @@
   --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,19 +0,0 @@
-//#region src/component-names.ts
-var e = [
-	"Alert",
-	"App",
-	"Badge",
-	"Button",
-	"Card",
-	"Checkbox",
-	"Form",
-	"FormField",
-	"Input",
-	"Label",
-	"RadioGroup",
-	"Select",
-	"Switch",
-	"Textarea"
-];
-//#endregion
-export { e as componentNames };

package/dist/components/Alert.vue_vue_type_script_setup_true_lang.js

@@ -1,74 +0,0 @@
-import { useIryxUiConfig as e } from "../config.js";
-import { alertTheme as t } from "../theme/alert.js";
-import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
-import { CircleAlert as _, CircleCheck as v, Info as y, TriangleAlert as b, X as x } from "lucide-vue-next";
-import { Primitive as S } from "reka-ui";
-//#region src/components/Alert.vue?vue&type=script&setup=true&lang.ts
-var C = ["aria-label"], w = /*@__PURE__*/ l({
-	__name: "Alert",
-	props: {
-		as: { default: "div" },
-		variant: {},
-		title: {},
-		description: {},
-		icon: {
-			type: Boolean,
-			default: void 0
-		},
-		closable: { type: Boolean },
-		closeLabel: { default: "Close" },
-		unstyled: {
-			type: Boolean,
-			default: void 0
-		},
-		class: {},
-		ui: {}
-	},
-	emits: ["close"],
-	setup(l) {
-		let w = l, T = {
-			info: y,
-			success: v,
-			warning: b,
-			danger: _
-		}, E = n(() => {
-			if (w.icon !== !1) return w.icon ?? T[w.variant ?? "info"];
-		}), D = n(() => w.variant === "danger" || w.variant === "warning" ? "alert" : "status"), O = e(), k = n(() => w.unstyled ?? O.unstyled), A = n(() => t({
-			variant: w.variant,
-			withTitle: !!w.title
-		})), j = n(() => k.value ? [w.ui?.root, w.class] : A.value.root({ class: [w.ui?.root, w.class] })), M = n(() => k.value ? w.ui?.icon : A.value.icon({ class: w.ui?.icon })), N = n(() => k.value ? w.ui?.content : A.value.content({ class: w.ui?.content })), P = n(() => k.value ? w.ui?.title : A.value.title({ class: w.ui?.title })), F = n(() => k.value ? w.ui?.description : A.value.description({ class: w.ui?.description })), I = n(() => k.value ? w.ui?.close : A.value.close({ class: w.ui?.close }));
-		return (e, t) => (d(), r(h(S), {
-			as: w.as,
-			role: D.value,
-			class: u(j.value)
-		}, {
-			default: g(() => [
-				E.value || e.$slots.icon ? (d(), a("div", {
-					key: 0,
-					class: u(M.value)
-				}, [f(e.$slots, "icon", {}, () => [(d(), r(p(E.value), { "aria-hidden": "true" }))])], 2)) : i("", !0),
-				o("div", { class: u(N.value) }, [w.title || e.$slots.title ? (d(), a("p", {
-					key: 0,
-					class: u(P.value)
-				}, [f(e.$slots, "title", {}, () => [s(m(w.title), 1)])], 2)) : i("", !0), w.description || e.$slots.default ? (d(), a("div", {
-					key: 1,
-					class: u(F.value)
-				}, [f(e.$slots, "default", {}, () => [s(m(w.description), 1)])], 2)) : i("", !0)], 2),
-				w.closable ? (d(), a("button", {
-					key: 1,
-					type: "button",
-					"aria-label": w.closeLabel,
-					class: u(I.value),
-					onClick: t[0] ||= (t) => e.$emit("close")
-				}, [f(e.$slots, "close", {}, () => [c(h(x), { "aria-hidden": "true" })])], 10, C)) : i("", !0)
-			]),
-			_: 3
-		}, 8, [
-			"as",
-			"role",
-			"class"
-		]));
-	}
-});
-//#endregion
-export { w as default };

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 { LoaderCircle as d } from "lucide-vue-next";
-import { Primitive as f } from "reka-ui";
-//#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(f), {
-			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(d), {
-				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 };