iryx-ui 0.2.0 → 0.3.0

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.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

@@ -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 };

package/dist/components/Checkbox.vue_vue_type_script_setup_true_lang.js

@@ -1,79 +0,0 @@
-import { useIryxUiConfig as e } from "../config.js";
-import { checkboxTheme as t } from "../theme/checkbox.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, mergeProps as u, normalizeClass as d, openBlock as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
-import { Check as _, Minus as v } from "lucide-vue-next";
-import { CheckboxIndicator as y, CheckboxRoot as b, Label as x, useForwardPropsEmits as S, useId as C } from "reka-ui";
-//#region src/components/Checkbox.vue?vue&type=script&setup=true&lang.ts
-var w = ["id"], T = /*@__PURE__*/ l({
-	__name: "Checkbox",
-	props: {
-		label: {},
-		description: {},
-		size: {},
-		id: {},
-		unstyled: {
-			type: Boolean,
-			default: void 0
-		},
-		class: {},
-		ui: {},
-		defaultValue: {},
-		modelValue: {},
-		disabled: { type: Boolean },
-		value: {},
-		trueValue: {},
-		falseValue: {},
-		asChild: { type: Boolean },
-		as: {},
-		name: {},
-		required: { type: Boolean }
-	},
-	emits: ["update:modelValue"],
-	setup(l, { emit: T }) {
-		let E = l, D = T, O = S(n(() => {
-			let { label: e, description: t, size: n, id: r, unstyled: i, class: a, ui: o, ...s } = E;
-			return s;
-		}), D), k = C(), A = n(() => E.id ?? k), j = n(() => !!(E.label || E.description)), M = e(), N = n(() => E.unstyled ?? M.unstyled), P = n(() => t({
-			size: E.size,
-			withText: j.value
-		})), F = n(() => N.value ? E.ui?.wrapper : P.value.wrapper({ class: E.ui?.wrapper })), I = n(() => N.value ? [E.ui?.root, E.class] : P.value.root({ class: [E.ui?.root, E.class] })), L = n(() => N.value ? E.ui?.indicator : P.value.indicator({ class: E.ui?.indicator })), R = n(() => N.value ? E.ui?.content : P.value.content({ class: E.ui?.content })), z = n(() => N.value ? E.ui?.label : P.value.label({ class: E.ui?.label })), B = n(() => N.value ? E.ui?.description : P.value.description({ class: E.ui?.description }));
-		return (e, t) => j.value ? (f(), a("div", {
-			key: 0,
-			class: d(F.value)
-		}, [c(h(b), u({ id: A.value }, h(O), {
-			"aria-describedby": E.description ? `${A.value}-description` : void 0,
-			class: I.value
-		}), {
-			default: g(() => [c(h(y), { class: d(L.value) }, {
-				default: g(() => [p(e.$slots, "default", {}, () => [E.modelValue === "indeterminate" ? (f(), r(h(v), { key: 0 })) : (f(), r(h(_), { key: 1 }))])]),
-				_: 3
-			}, 8, ["class"])]),
-			_: 3
-		}, 16, [
-			"id",
-			"aria-describedby",
-			"class"
-		]), o("div", { class: d(R.value) }, [c(h(x), {
-			for: A.value,
-			class: d(z.value)
-		}, {
-			default: g(() => [p(e.$slots, "label", {}, () => [s(m(E.label), 1)])]),
-			_: 3
-		}, 8, ["for", "class"]), E.description || e.$slots.description ? (f(), a("p", {
-			key: 0,
-			id: `${A.value}-description`,
-			class: d(B.value)
-		}, [p(e.$slots, "description", {}, () => [s(m(E.description), 1)])], 10, w)) : i("", !0)], 2)], 2)) : (f(), r(h(b), u({
-			key: 1,
-			id: E.id
-		}, h(O), { class: I.value }), {
-			default: g(() => [c(h(y), { class: d(L.value) }, {
-				default: g(() => [p(e.$slots, "default", {}, () => [E.modelValue === "indeterminate" ? (f(), r(h(v), { key: 0 })) : (f(), r(h(_), { key: 1 }))])]),
-				_: 3
-			}, 8, ["class"])]),
-			_: 3
-		}, 16, ["id", "class"]));
-	}
-});
-//#endregion
-export { T as default };