iryx-ui 0.19.1 → 0.20.0

package/dist/marketing/SiteFooter.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,87 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "../components/Container.js";
+import { siteFooterTheme as n } from "../theme/site-footer.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderList as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, useSlots as v, withCtx as y } from "vue";
+import { Primitive as b } from "reka-ui";
+//#region src/marketing/SiteFooter.vue?vue&type=script&setup=true&lang.ts
+var x = [
+	"href",
+	"aria-current",
+	"target",
+	"rel"
+], S = /*@__PURE__*/ u({
+	__name: "SiteFooter",
+	props: {
+		as: { default: "footer" },
+		name: {},
+		href: {},
+		links: {},
+		note: {},
+		bordered: {
+			type: Boolean,
+			default: void 0
+		},
+		padding: {},
+		size: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	},
+	setup(u) {
+		let S = u, C = v(), w = e(), T = i(() => S.unstyled ?? w.unstyled), E = i(() => n({
+			bordered: S.bordered ?? !0,
+			padding: S.padding
+		}));
+		function D(e, t) {
+			return T.value ? [S.ui?.[e], t] : E.value[e]({ class: [S.ui?.[e], t] });
+		}
+		return (e, n) => (f(), a(_(b), {
+			as: S.as,
+			class: d(D("root", S.class))
+		}, {
+			default: y(() => [l(t, {
+				size: S.size,
+				class: d(D("container"))
+			}, {
+				default: y(() => [
+					S.name || _(C).brand ? (f(), a(h(S.href ? "a" : "span"), {
+						key: 0,
+						href: S.href,
+						class: d(D("brand"))
+					}, {
+						default: y(() => [m(e.$slots, "brand", {}, () => [c(g(S.name), 1)])]),
+						_: 3
+					}, 8, ["href", "class"])) : o("", !0),
+					S.links?.length || _(C).links ? (f(), s("nav", {
+						key: 1,
+						class: d(D("nav"))
+					}, [m(e.$slots, "links", {}, () => [(f(!0), s(r, null, p(S.links, (e) => (f(), s("a", {
+						key: e.href,
+						href: e.href,
+						"aria-current": e.current ? "page" : void 0,
+						target: e.external ? "_blank" : void 0,
+						rel: e.external ? "noreferrer" : void 0,
+						class: d(D("link"))
+					}, g(e.label), 11, x))), 128))])], 2)) : o("", !0),
+					S.note || _(C).note ? (f(), s("p", {
+						key: 2,
+						class: d(D("note"))
+					}, [m(e.$slots, "note", {}, () => [c(g(S.note), 1)])], 2)) : o("", !0),
+					m(e.$slots, "default")
+				]),
+				_: 3
+			}, 8, ["size", "class"])]),
+			_: 3
+		}, 8, ["as", "class"]));
+	}
+});
+//#endregion
+export { S as default };

package/dist/marketing/SiteHeader.js

@@ -0,0 +1,5 @@
+import e from "./SiteHeader.vue_vue_type_script_setup_true_lang.js";
+//#region src/marketing/SiteHeader.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/marketing/SiteHeader.vue.d.ts

@@ -0,0 +1,86 @@
+import type { ClassValue } from '../class-value';
+export interface SiteLink {
+    label: string;
+    href: string;
+    /** Marks the entry as the page being viewed. */
+    current?: boolean;
+    /** Opens in a new tab, with the `rel` that needs. */
+    external?: boolean;
+}
+export interface SiteHeaderProps {
+    /** Render as a different element or component. */
+    as?: string;
+    /** The product's name, beside the logo. */
+    name?: string;
+    /** Where the brand links to. */
+    href?: string;
+    links?: SiteLink[];
+    /** Stick to the top of the viewport, with a blur over what scrolls under it. */
+    sticky?: boolean;
+    bordered?: boolean;
+    /** Maximum content width, passed to the container. */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /**
+     * Below `md`, move the links into a drawer behind a menu button. Turn it off
+     * for a header with no links, or one whose actions are the whole navigation.
+     */
+    mobileMenu?: boolean;
+    /** Accessible name for the menu button — override for non-English sites. */
+    menuLabel?: string;
+    /** Heading inside the drawer. */
+    menuTitle?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per element, e.g. `{ container: 'h-20' }`. */
+    ui?: {
+        root?: string;
+        container?: string;
+        brand?: string;
+        nav?: string;
+        link?: string;
+        actions?: string;
+        menu?: string;
+        menuLink?: string;
+    };
+}
+type __VLS_Props = SiteHeaderProps;
+type __VLS_ModelProps = {
+    /** Open state of the mobile drawer, so a page can close it from the outside. */
+    'menuOpen'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {}, __VLS_16: {}, __VLS_18: {}, __VLS_38: {
+    close: () => boolean;
+};
+type __VLS_Slots = {} & {
+    brand?: (props: typeof __VLS_14) => any;
+} & {
+    links?: (props: typeof __VLS_16) => any;
+} & {
+    actions?: (props: typeof __VLS_18) => any;
+} & {
+    menu?: (props: typeof __VLS_38) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:menuOpen": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:menuOpen"?: ((value: boolean) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    as: string;
+    href: string;
+    sticky: boolean;
+    bordered: boolean;
+    mobileMenu: boolean;
+    menuLabel: string;
+    menuTitle: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/marketing/SiteHeader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,122 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "../components/Icon.js";
+import n from "../components/Drawer.js";
+import r from "../components/Button.js";
+import i from "../components/Container.js";
+import { siteHeaderTheme as a } from "../theme/site-header.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, normalizeClass as _, openBlock as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useModel as C, useSlots as w, withCtx as T } from "vue";
+import { Menu01Icon as E } from "@hugeicons/core-free-icons";
+import { Primitive as D } from "reka-ui";
+//#region src/marketing/SiteHeader.vue?vue&type=script&setup=true&lang.ts
+var O = ["href"], k = /*@__PURE__*/ m({
+	__name: "SiteHeader",
+	props: /*@__PURE__*/ h({
+		as: { default: "header" },
+		name: {},
+		href: { default: "/" },
+		links: {},
+		sticky: {
+			type: Boolean,
+			default: void 0
+		},
+		bordered: {
+			type: Boolean,
+			default: void 0
+		},
+		size: {},
+		mobileMenu: {
+			type: Boolean,
+			default: void 0
+		},
+		menuLabel: { default: "Open the menu" },
+		menuTitle: { default: "Menu" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	}, {
+		menuOpen: {
+			type: Boolean,
+			default: !1
+		},
+		menuOpenModifiers: {}
+	}),
+	emits: ["update:menuOpen"],
+	setup(m) {
+		let h = m, k = C(m, "menuOpen"), A = w(), j = e(), M = s(() => h.unstyled ?? j.unstyled), N = s(() => a({
+			sticky: h.sticky ?? !0,
+			bordered: h.bordered ?? !0
+		}));
+		function P(e, t) {
+			return M.value ? [h.ui?.[e], t] : N.value[e]({ class: [h.ui?.[e], t] });
+		}
+		let F = s(() => (h.mobileMenu ?? !0) && !!(h.links?.length || A.menu));
+		function I(e) {
+			return {
+				href: e.href,
+				"aria-current": e.current ? "page" : void 0,
+				target: e.external ? "_blank" : void 0,
+				rel: e.external ? "noreferrer" : void 0
+			};
+		}
+		return (e, a) => (v(), c(S(D), {
+			as: h.as,
+			class: _(P("root", h.class))
+		}, {
+			default: T(() => [p(i, {
+				size: h.size,
+				class: _(P("container"))
+			}, {
+				default: T(() => [
+					h.name || S(A).brand ? (v(), u("a", {
+						key: 0,
+						href: h.href,
+						class: _(P("brand"))
+					}, [b(e.$slots, "brand", {}, () => [f(x(h.name), 1)])], 10, O)) : l("", !0),
+					h.links?.length || S(A).links ? (v(), u("nav", {
+						key: 1,
+						class: _(P("nav"))
+					}, [b(e.$slots, "links", {}, () => [(v(!0), u(o, null, y(h.links, (e) => (v(), u("a", g({ key: e.href }, { ref_for: !0 }, I(e), { class: P("link") }), x(e.label), 17))), 128))])], 2)) : l("", !0),
+					d("div", { class: _(P("actions")) }, [b(e.$slots, "actions"), F.value ? (v(), c(n, {
+						key: 0,
+						open: k.value,
+						"onUpdate:open": a[1] ||= (e) => k.value = e,
+						side: "right",
+						title: h.menuTitle,
+						class: "md:hidden"
+					}, {
+						trigger: T(() => [p(r, {
+							variant: "ghost",
+							size: "sm",
+							square: "",
+							"aria-label": h.menuLabel,
+							class: "md:hidden"
+						}, {
+							default: T(() => [p(t, {
+								icon: S(E),
+								"data-icon": ""
+							}, null, 8, ["icon"])]),
+							_: 1
+						}, 8, ["aria-label"])]),
+						default: T(() => [d("nav", { class: _(P("menu")) }, [b(e.$slots, "menu", { close: () => k.value = !1 }, () => [(v(!0), u(o, null, y(h.links, (e) => (v(), u("a", g({ key: e.href }, { ref_for: !0 }, I(e), {
+							class: P("menuLink"),
+							onClick: a[0] ||= (e) => k.value = !1
+						}), x(e.label), 17))), 128))])], 2)]),
+						_: 3
+					}, 8, ["open", "title"])) : l("", !0)], 2)
+				]),
+				_: 3
+			}, 8, ["size", "class"])]),
+			_: 3
+		}, 8, ["as", "class"]));
+	}
+});
+//#endregion
+export { k as default };

package/dist/marketing/index.d.ts

@@ -4,4 +4,6 @@ export { default as Hero } from './Hero.vue';
 export { default as PricingCard } from './PricingCard.vue';
 export { default as PricingTable } from './PricingTable.vue';
 export { default as Section } from './Section.vue';
+export { default as SiteFooter } from './SiteFooter.vue';
+export { default as SiteHeader } from './SiteHeader.vue';
 export { default as TestimonialCard } from './TestimonialCard.vue';

package/dist/marketing/index.js

@@ -5,16 +5,20 @@ import r from "./Hero.js";
 import i from "./PricingCard.js";
 import a from "./PricingTable.js";
 import o from "./Section.js";
-import s from "./TestimonialCard.js";
+import s from "./SiteFooter.js";
+import c from "./SiteHeader.js";
+import l from "./TestimonialCard.js";
 //#region src/marketing/index.ts
-var c = /* @__PURE__ */ e({
+var u = /* @__PURE__ */ e({
 	BrowserFrame: () => t,
 	FeatureCard: () => n,
 	Hero: () => r,
 	PricingCard: () => i,
 	PricingTable: () => a,
 	Section: () => o,
-	TestimonialCard: () => s
+	SiteFooter: () => s,
+	SiteHeader: () => c,
+	TestimonialCard: () => l
 });
 //#endregion
-export { c as marketing_exports };
+export { u as marketing_exports };

package/dist/marketing.d.ts

@@ -6,6 +6,8 @@ export * from './marketing/index';
 export type { PricingCardProps } from './marketing/PricingCard.vue';
 export type { PricingPlan, PricingTableProps } from './marketing/PricingTable.vue';
 export type { SectionProps } from './marketing/Section.vue';
+export type { SiteFooterProps } from './marketing/SiteFooter.vue';
+export type { SiteHeaderProps, SiteLink } from './marketing/SiteHeader.vue';
 export type { TestimonialCardProps } from './marketing/TestimonialCard.vue';
 /**
  * Every marketing component, keyed by name. Pass to the plugin's `components`

package/dist/marketing.js

@@ -4,6 +4,8 @@ import n from "./marketing/Hero.js";
 import r from "./marketing/PricingCard.js";
 import i from "./marketing/PricingTable.js";
 import a from "./marketing/Section.js";
-import o from "./marketing/TestimonialCard.js";
-import { marketing_exports as s } from "./marketing/index.js";
-export { e as BrowserFrame, t as FeatureCard, n as Hero, r as PricingCard, i as PricingTable, a as Section, o as TestimonialCard, s as marketingComponents };
+import o from "./marketing/SiteFooter.js";
+import s from "./marketing/SiteHeader.js";
+import c from "./marketing/TestimonialCard.js";
+import { marketing_exports as l } from "./marketing/index.js";
+export { e as BrowserFrame, t as FeatureCard, n as Hero, r as PricingCard, i as PricingTable, a as Section, o as SiteFooter, s as SiteHeader, c as TestimonialCard, l as marketingComponents };

package/dist/theme/rating.d.ts

@@ -0,0 +1,122 @@
+export declare const ratingTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            item: string;
+            empty: string;
+            fill: string;
+        };
+        md: {
+            item: string;
+            empty: string;
+            fill: string;
+        };
+        lg: {
+            item: string;
+            empty: string;
+            fill: string;
+        };
+    };
+    interactive: {
+        true: {
+            item: string;
+            items: string;
+        };
+        false: {
+            items: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    items: string;
+    item: string;
+    empty: string;
+    fill: string;
+    label: string;
+}, undefined, {
+    size: {
+        sm: {
+            item: string;
+            empty: string;
+            fill: string;
+        };
+        md: {
+            item: string;
+            empty: string;
+            fill: string;
+        };
+        lg: {
+            item: string;
+            empty: string;
+            fill: string;
+        };
+    };
+    interactive: {
+        true: {
+            item: string;
+            items: string;
+        };
+        false: {
+            items: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    items: string;
+    item: string;
+    empty: string;
+    fill: string;
+    label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            item: string;
+            empty: string;
+            fill: string;
+        };
+        md: {
+            item: string;
+            empty: string;
+            fill: string;
+        };
+        lg: {
+            item: string;
+            empty: string;
+            fill: string;
+        };
+    };
+    interactive: {
+        true: {
+            item: string;
+            items: string;
+        };
+        false: {
+            items: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    items: string;
+    item: string;
+    empty: string;
+    fill: string;
+    label: string;
+}>>;
+export type RatingSlots = keyof ReturnType<typeof ratingTheme>;

package/dist/theme/rating.js

@@ -0,0 +1,49 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/rating.ts
+var t = e({
+	slots: {
+		root: "inline-flex items-center gap-2",
+		items: "flex items-center",
+		item: "relative isolate shrink-0 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
+		empty: "text-muted-foreground/40",
+		fill: "absolute inset-y-0 left-0 overflow-hidden text-warning",
+		label: "text-sm text-muted-foreground tabular-nums"
+	},
+	variants: {
+		size: {
+			sm: {
+				item: "size-4",
+				empty: "size-4",
+				fill: "[&_svg]:size-4"
+			},
+			md: {
+				item: "size-5",
+				empty: "size-5",
+				fill: "[&_svg]:size-5"
+			},
+			lg: {
+				item: "size-6",
+				empty: "size-6",
+				fill: "[&_svg]:size-6"
+			}
+		},
+		interactive: {
+			true: {
+				item: "cursor-pointer transition-transform hover:scale-110 active:scale-95",
+				items: "gap-0.5"
+			},
+			false: { items: "gap-0.5" }
+		},
+		disabled: {
+			true: { root: "pointer-events-none opacity-50" },
+			false: {}
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		interactive: !1,
+		disabled: !1
+	}
+});
+//#endregion
+export { t as ratingTheme };

package/dist/theme/site-footer.d.ts

@@ -0,0 +1,80 @@
+export declare const siteFooterTheme: import("tailwind-variants").TVReturnType<{
+    bordered: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    container: string;
+    brand: string;
+    nav: string;
+    link: string;
+    note: string;
+}, undefined, {
+    bordered: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    container: string;
+    brand: string;
+    nav: string;
+    link: string;
+    note: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    bordered: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    container: string;
+    brand: string;
+    nav: string;
+    link: string;
+    note: string;
+}>>;
+export type SiteFooterSlots = keyof ReturnType<typeof siteFooterTheme>;

package/dist/theme/site-footer.js

@@ -0,0 +1,30 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/site-footer.ts
+var t = e({
+	slots: {
+		root: "w-full",
+		container: "flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between",
+		brand: "flex items-center gap-2.5 text-sm font-medium",
+		nav: "flex flex-wrap gap-x-6 gap-y-2",
+		link: "rounded-sm text-sm text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50",
+		note: "text-sm text-muted-foreground"
+	},
+	variants: {
+		bordered: {
+			true: { root: "border-t border-border" },
+			false: {}
+		},
+		padding: {
+			none: {},
+			sm: { root: "py-8" },
+			md: { root: "py-12" },
+			lg: { root: "py-16" }
+		}
+	},
+	defaultVariants: {
+		bordered: !0,
+		padding: "md"
+	}
+});
+//#endregion
+export { t as siteFooterTheme };