iryx-ui 0.18.4 → 0.19.0

package/README.md

@@ -71,6 +71,43 @@ Components are auto-imported with the `I` prefix.
 </template>
 ```
 
+## Blocks
+
+Whole page sections — a hero, a banded section, a framed screenshot — on their own
+import path, so an app that never uses them never carries them:
+
+```ts
+import { createIryxUi } from 'iryx-ui'
+import { marketingComponents } from 'iryx-ui/marketing'
+
+app.use(createIryxUi({ components: marketingComponents }))
+```
+
+In Nuxt, the module auto-imports them once `blocks` is on:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['iryx-ui/nuxt'],
+  iryxUi: { blocks: true },
+})
+```
+
+```vue
+<IHero grid heading="Invoicing that chases the money for you">
+  <template #actions>
+    <IButton size="lg">Start free</IButton>
+  </template>
+</IHero>
+
+<ISection tone="muted" bordered heading="Everything the money side needs">
+  <!-- … -->
+</ISection>
+```
+
+Seven so far: `IHero`, `ISection`, `IPricingTable`, `IPricingCard`, `IFeatureCard`,
+`ITestimonialCard` and `IBrowserFrame`. Importing the subpath also declares
+them on Vue's `GlobalComponents`; a project that never imports it is untouched.
+
 ## Three ways to take the styling back
 
 ```vue

package/dist/component-names.d.ts

@@ -5,3 +5,11 @@
  */
 export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "AuthProviders", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Calendar", "Card", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DateField", "DatePicker", "DateRangePicker", "Dialog", "DonutChart", "Drawer", "DropdownMenu", "Editable", "EmptyState", "FileUpload", "Form", "FormField", "HoverCard", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
 export type ComponentName = (typeof componentNames)[number];
+/**
+ * Names of every block exported from `iryx-ui/marketing`.
+ * A list of strings rather than the modules themselves, because the Nuxt module
+ * runs at build time and must not pull `.vue` files into Node.
+ * Keep in sync with `src/marketing/index.ts`.
+ */
+export declare const marketingComponentNames: readonly ["BrowserFrame", "FeatureCard", "Hero", "PricingCard", "PricingTable", "Section", "TestimonialCard"];
+export type MarketingComponentName = (typeof marketingComponentNames)[number];

package/dist/component-names.js

@@ -1,4 +1,12 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.AuthProviders.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Calendar.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DateField.DatePicker.DateRangePicker.Dialog.DonutChart.Drawer.DropdownMenu.Editable.EmptyState.FileUpload.Form.FormField.HoverCard.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split(".");
+var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.AuthProviders.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Calendar.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DateField.DatePicker.DateRangePicker.Dialog.DonutChart.Drawer.DropdownMenu.Editable.EmptyState.FileUpload.Form.FormField.HoverCard.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split("."), t = [
+	"BrowserFrame",
+	"FeatureCard",
+	"Hero",
+	"PricingCard",
+	"PricingTable",
+	"Section",
+	"TestimonialCard"
+];
 //#endregion
-export { e as componentNames };
+export { e as componentNames, t as marketingComponentNames };

package/dist/components/ColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -40,7 +40,13 @@ var M = /*@__PURE__*/ l({
 				};
 			}
 		}
-		let L = (e) => k(e, "hex"), R = p(I(N.modelValue)), z = (e) => e.s === 0 || e.b === 0;
+		let L = (e) => k(e, "hex"), R = p(I(N.modelValue)), z = (e) => e.s === 0 || e.b === 0, B = r(() => {
+			try {
+				return j(N.modelValue), N.modelValue;
+			} catch {
+				return L(R.value);
+			}
+		});
 		g(() => N.modelValue, (e) => {
 			if (L(R.value) === e) return;
 			let t = I(e);
@@ -49,48 +55,48 @@ var M = /*@__PURE__*/ l({
 				h: R.value.h
 			} : t;
 		});
-		function B(e) {
+		function V(e) {
 			R.value = e, F(L(e));
 		}
-		function V(e) {
-			return B({
+		function H(e) {
+			return V({
 				...A(e),
 				h: R.value.h,
 				alpha: R.value.alpha
 			});
 		}
-		function H(e) {
-			return B({
+		function U(e) {
+			return V({
 				...R.value,
 				h: A(e).h
 			});
 		}
-		function U(e) {
-			return B({
+		function W(e) {
+			return V({
 				...R.value,
 				alpha: A(e).alpha
 			});
 		}
-		let W = e(), G = r(() => N.unstyled ?? W.unstyled), K = r(() => t());
-		function q(e, t) {
+		let G = e(), K = r(() => N.unstyled ?? G.unstyled), q = r(() => t());
+		function J(e, t) {
 			let n = [N.ui?.[e], t].filter(Boolean).join(" ");
-			return G.value ? n : K.value[e]({ class: n });
+			return K.value ? n : q.value[e]({ class: n });
 		}
-		return (e, t) => (f(), o("div", { class: u(q("root", N.class)) }, [
+		return (e, t) => (f(), o("div", { class: u(J("root", N.class)) }, [
 			c(h(y), {
 				"color-space": "hsb",
 				"x-channel": "saturation",
 				"y-channel": "brightness",
 				"model-value": R.value,
 				disabled: N.disabled,
-				class: u(q("area")),
-				"onUpdate:color": V
+				class: u(J("area")),
+				"onUpdate:color": H
 			}, {
 				default: _(({ style: e }) => [c(h(v), {
 					class: "size-full rounded-[inherit]",
 					style: d(e)
 				}, {
-					default: _(() => [c(h(b), { class: u(q("thumb")) }, null, 8, ["class"])]),
+					default: _(() => [c(h(b), { class: u(J("thumb")) }, null, 8, ["class"])]),
 					_: 1
 				}, 8, ["style"])]),
 				_: 1
@@ -104,10 +110,10 @@ var M = /*@__PURE__*/ l({
 				channel: "hue",
 				"model-value": R.value,
 				disabled: N.disabled,
-				class: u(q("slider")),
-				"onUpdate:color": H
+				class: u(J("slider")),
+				"onUpdate:color": U
 			}, {
-				default: _(() => [c(h(T), { class: u(q("track")) }, null, 8, ["class"]), c(h(w), { class: u([q("thumb"), q("sliderThumb")]) }, null, 8, ["class"])]),
+				default: _(() => [c(h(T), { class: u(J("track")) }, null, 8, ["class"]), c(h(w), { class: u([J("thumb"), J("sliderThumb")]) }, null, 8, ["class"])]),
 				_: 1
 			}, 8, [
 				"model-value",
@@ -120,13 +126,13 @@ var M = /*@__PURE__*/ l({
 				channel: "alpha",
 				"model-value": R.value,
 				disabled: N.disabled,
-				class: u(q("slider")),
-				"onUpdate:color": U
+				class: u(J("slider")),
+				"onUpdate:color": W
 			}, {
 				default: _(() => [
-					s("span", { class: u(q("checkerboard")) }, null, 2),
-					c(h(T), { class: u(q("track")) }, null, 8, ["class"]),
-					c(h(w), { class: u([q("thumb"), q("sliderThumb")]) }, null, 8, ["class"])
+					s("span", { class: u(J("checkerboard")) }, null, 2),
+					c(h(T), { class: u(J("track")) }, null, 8, ["class"]),
+					c(h(w), { class: u([J("thumb"), J("sliderThumb")]) }, null, 8, ["class"])
 				]),
 				_: 1
 			}, 8, [
@@ -136,17 +142,17 @@ var M = /*@__PURE__*/ l({
 			])) : a("", !0),
 			N.hideField ? a("", !0) : (f(), i(h(S), {
 				key: 1,
-				"model-value": N.modelValue,
+				"model-value": B.value,
 				disabled: N.disabled,
-				class: u(q("field")),
+				class: u(J("field")),
 				"onUpdate:modelValue": F
 			}, {
-				default: _(() => [s("span", { class: u(q("preview")) }, [s("span", { class: u(q("checkerboard", "rounded-none")) }, null, 2), s("span", {
+				default: _(() => [s("span", { class: u(J("preview")) }, [s("span", { class: u(J("checkerboard", "rounded-none")) }, null, 2), s("span", {
 					class: "absolute inset-0",
-					style: d({ background: N.modelValue })
+					style: d({ background: B.value })
 				}, null, 4)], 2), c(h(x), {
 					"aria-label": N.fieldLabel,
-					class: u(q("input"))
+					class: u(J("input"))
 				}, null, 8, ["aria-label", "class"])]),
 				_: 1
 			}, 8, [
@@ -156,14 +162,14 @@ var M = /*@__PURE__*/ l({
 			])),
 			N.swatches?.length ? (f(), i(h(O), {
 				key: 2,
-				"model-value": N.modelValue,
-				class: u(q("swatches")),
-				"onUpdate:modelValue": t[0] ||= (e) => F(String(e))
+				"model-value": B.value,
+				class: u(J("swatches")),
+				"onUpdate:modelValue": t[0] ||= (e) => e && F(String(e))
 			}, {
 				default: _(() => [(f(!0), o(n, null, m(N.swatches, (e) => (f(), i(h(E), {
 					key: e,
 					value: e,
-					class: u(q("swatch"))
+					class: u(J("swatch"))
 				}, {
 					default: _(() => [c(h(D), { class: "size-full rounded-[inherit] bg-[var(--reka-color-swatch-color)]" })]),
 					_: 1

package/dist/marketing/BrowserFrame.js

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

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

@@ -0,0 +1,40 @@
+import type { ClassValue } from '../class-value';
+export interface BrowserFrameProps {
+    /** Address shown in the bar. Decorative — nothing is fetched. */
+    url?: string;
+    /**
+     * Hold the body at a fixed ratio, e.g. `16 / 10`. Leave it out when the
+     * content sizes itself, and set it when the content is an image that has
+     * not loaded yet — a reserved box is what stops the page jumping.
+     */
+    ratio?: number;
+    shadow?: 'none' | 'sm' | 'md' | 'lg';
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per slot, e.g. `{ bar: 'py-2' }`. */
+    ui?: {
+        root?: string;
+        bar?: string;
+        dot?: string;
+        url?: string;
+        body?: string;
+    };
+}
+declare var __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BrowserFrameProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BrowserFrameProps> & Readonly<{}>, {
+    unstyled: boolean;
+}, {}, {}, {}, 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/BrowserFrame.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,57 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "../components/AspectRatio.js";
+import n from "../components/Card.js";
+import { browserFrameTheme as r } from "../theme/browser-frame.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderList as p, renderSlot as m, toDisplayString as h, withCtx as g } from "vue";
+//#region src/marketing/BrowserFrame.vue?vue&type=script&setup=true&lang.ts
+var _ = /*@__PURE__*/ u({
+	__name: "BrowserFrame",
+	props: {
+		url: {},
+		ratio: {},
+		shadow: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	},
+	setup(u) {
+		let _ = u, v = e(), y = a(() => _.unstyled ?? v.unstyled), b = a(() => r({ shadow: _.shadow }));
+		function x(e, t) {
+			return y.value ? [_.ui?.[e], t] : b.value[e]({ class: [_.ui?.[e], t] });
+		}
+		return (e, r) => (f(), o(n, {
+			padding: "none",
+			unstyled: _.unstyled,
+			class: d(x("root", _.class))
+		}, {
+			default: g(() => [l("div", { class: d(x("bar")) }, [(f(), c(i, null, p(3, (e) => l("span", {
+				key: e,
+				class: d(x("dot"))
+			}, null, 2)), 64)), _.url ? (f(), c("span", {
+				key: 0,
+				class: d(x("url"))
+			}, h(_.url), 3)) : s("", !0)], 2), _.ratio ? (f(), o(t, {
+				key: 0,
+				ratio: _.ratio,
+				class: d(["rounded-t-none", [_.ui?.body]])
+			}, {
+				default: g(() => [m(e.$slots, "default")]),
+				_: 3
+			}, 8, ["ratio", "class"])) : (f(), c("div", {
+				key: 1,
+				class: d(x("body"))
+			}, [m(e.$slots, "default")], 2))]),
+			_: 3
+		}, 8, ["unstyled", "class"]));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/marketing/FeatureCard.js

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

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

@@ -0,0 +1,40 @@
+import type { ClassValue } from '../class-value';
+import type { IconLike } from '../composables/icon';
+export interface FeatureCardProps {
+    /** A Hugeicons export, or any component that renders an SVG. */
+    icon?: IconLike;
+    title?: string;
+    description?: string;
+    align?: 'start' | 'center';
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per slot, e.g. `{ icon: 'bg-success/10' }`. */
+    ui?: {
+        root?: string;
+        icon?: string;
+        title?: string;
+        description?: string;
+    };
+}
+declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_8) => any;
+} & {
+    title?: (props: typeof __VLS_15) => any;
+} & {
+    description?: (props: typeof __VLS_17) => any;
+} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FeatureCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FeatureCardProps> & Readonly<{}>, {
+    unstyled: boolean;
+}, {}, {}, {}, 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/FeatureCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,55 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "../components/Icon.js";
+import n from "../components/Card.js";
+import { featureCardTheme as r } from "../theme/feature-card.js";
+import { 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, renderSlot as p, toDisplayString as m, unref as h, useSlots as g, withCtx as _ } from "vue";
+//#region src/marketing/FeatureCard.vue?vue&type=script&setup=true&lang.ts
+var v = /*@__PURE__*/ u({
+	__name: "FeatureCard",
+	props: {
+		icon: {},
+		title: {},
+		description: {},
+		align: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	},
+	setup(u) {
+		let v = u, y = g(), b = e(), x = i(() => v.unstyled ?? b.unstyled), S = i(() => r({ align: v.align }));
+		function C(e, t) {
+			return x.value ? [v.ui?.[e], t] : S.value[e]({ class: [v.ui?.[e], t] });
+		}
+		return (e, r) => (f(), a(n, {
+			unstyled: v.unstyled,
+			class: d(C("root", v.class))
+		}, {
+			default: _(() => [
+				v.icon || h(y).icon ? (f(), s("div", {
+					key: 0,
+					class: d(C("icon"))
+				}, [p(e.$slots, "icon", {}, () => [l(t, { icon: v.icon }, null, 8, ["icon"])])], 2)) : o("", !0),
+				v.title || h(y).title ? (f(), s("h3", {
+					key: 1,
+					class: d(C("title"))
+				}, [p(e.$slots, "title", {}, () => [c(m(v.title), 1)])], 2)) : o("", !0),
+				v.description || h(y).description ? (f(), s("p", {
+					key: 2,
+					class: d(C("description"))
+				}, [p(e.$slots, "description", {}, () => [c(m(v.description), 1)])], 2)) : o("", !0),
+				p(e.$slots, "default")
+			]),
+			_: 3
+		}, 8, ["unstyled", "class"]));
+	}
+});
+//#endregion
+export { v as default };

package/dist/marketing/Hero.js

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

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

@@ -0,0 +1,64 @@
+import type { ClassValue } from '../class-value';
+export interface HeroProps {
+    /** Render as a different element or component. */
+    as?: string;
+    heading?: string;
+    description?: string;
+    /** Line under the calls to action, e.g. pricing small print. */
+    note?: string;
+    /**
+     * The moving wash behind the content. `aurora` turns, `bloom` drifts; both
+     * stop under `prefers-reduced-motion`.
+     */
+    backdrop?: 'none' | 'aurora' | 'bloom';
+    /** Faint ruled grid over the backdrop. */
+    grid?: boolean;
+    align?: 'start' | 'center';
+    /** Vertical rhythm. `none` leaves it to you. */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Maximum content width, passed to the container. */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per slot, e.g. `{ heading: 'text-7xl' }`. */
+    ui?: {
+        root?: string;
+        container?: string;
+        badge?: string;
+        heading?: string;
+        description?: string;
+        actions?: string;
+        note?: string;
+        media?: string;
+    };
+}
+declare var __VLS_14: {}, __VLS_16: {}, __VLS_18: {}, __VLS_20: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {};
+type __VLS_Slots = {} & {
+    badge?: (props: typeof __VLS_14) => any;
+} & {
+    heading?: (props: typeof __VLS_16) => any;
+} & {
+    description?: (props: typeof __VLS_18) => any;
+} & {
+    actions?: (props: typeof __VLS_20) => any;
+} & {
+    note?: (props: typeof __VLS_22) => any;
+} & {
+    media?: (props: typeof __VLS_24) => any;
+} & {
+    default?: (props: typeof __VLS_26) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<HeroProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeroProps> & Readonly<{}>, {
+    unstyled: boolean;
+    as: string;
+    backdrop: "none" | "aurora" | "bloom";
+}, {}, {}, {}, 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/Hero.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,94 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "../components/Container.js";
+import { heroTheme as n } from "../theme/hero.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m, useSlots as h, withCtx as g } from "vue";
+import { Primitive as _ } from "reka-ui";
+//#region src/marketing/Hero.vue?vue&type=script&setup=true&lang.ts
+var v = {
+	key: 1,
+	class: "iryx-hero-grid",
+	"aria-hidden": "true"
+}, y = /*@__PURE__*/ l({
+	__name: "Hero",
+	props: {
+		as: { default: "section" },
+		heading: {},
+		description: {},
+		note: {},
+		backdrop: { default: "aurora" },
+		grid: { type: Boolean },
+		align: {},
+		padding: {},
+		size: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	},
+	setup(l) {
+		let y = l, b = h(), x = e(), S = r(() => y.unstyled ?? x.unstyled), C = r(() => n({
+			align: y.align,
+			padding: y.padding
+		}));
+		function w(e, t) {
+			return S.value ? [y.ui?.[e], t] : C.value[e]({ class: [y.ui?.[e], t] });
+		}
+		let T = r(() => w("root", y.class));
+		return (e, n) => (d(), i(m(_), {
+			as: y.as,
+			class: u(T.value)
+		}, {
+			default: g(() => [
+				y.backdrop !== "none" && !S.value ? (d(), o("div", {
+					key: 0,
+					class: u(`iryx-hero-${y.backdrop}`),
+					"aria-hidden": "true"
+				}, null, 2)) : a("", !0),
+				y.grid && !S.value ? (d(), o("div", v)) : a("", !0),
+				c(t, {
+					size: y.size,
+					class: u(w("container"))
+				}, {
+					default: g(() => [
+						m(b).badge ? (d(), o("div", {
+							key: 0,
+							class: u(w("badge"))
+						}, [f(e.$slots, "badge")], 2)) : a("", !0),
+						y.heading || m(b).heading ? (d(), o("h1", {
+							key: 1,
+							class: u(w("heading"))
+						}, [f(e.$slots, "heading", {}, () => [s(p(y.heading), 1)])], 2)) : a("", !0),
+						y.description || m(b).description ? (d(), o("p", {
+							key: 2,
+							class: u(w("description"))
+						}, [f(e.$slots, "description", {}, () => [s(p(y.description), 1)])], 2)) : a("", !0),
+						m(b).actions ? (d(), o("div", {
+							key: 3,
+							class: u(w("actions"))
+						}, [f(e.$slots, "actions")], 2)) : a("", !0),
+						y.note || m(b).note ? (d(), o("p", {
+							key: 4,
+							class: u(w("note"))
+						}, [f(e.$slots, "note", {}, () => [s(p(y.note), 1)])], 2)) : a("", !0),
+						m(b).media ? (d(), o("div", {
+							key: 5,
+							class: u(w("media"))
+						}, [f(e.$slots, "media")], 2)) : a("", !0),
+						f(e.$slots, "default")
+					]),
+					_: 3
+				}, 8, ["size", "class"])
+			]),
+			_: 3
+		}, 8, ["as", "class"]));
+	}
+});
+//#endregion
+export { y as default };

package/dist/marketing/PricingCard.js

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