iryx-ui 0.18.5 → 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/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 };

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

@@ -0,0 +1,70 @@
+import type { ClassValue } from '../class-value';
+export interface PricingCardProps {
+    name?: string;
+    /**
+     * The price, already formatted — `'€19'`, `'Free'`, `'Custom'`. A string
+     * rather than a number: the card never formats currency, because it does not
+     * know the locale and half the plans in the world do not name a figure.
+     */
+    price?: string;
+    /** What the price is per, e.g. `'/ month'`. */
+    period?: string;
+    description?: string;
+    /** One line each. Every line gets a tick. */
+    features?: string[];
+    /** Label for the button. Leave out and no button renders. */
+    cta?: string;
+    /**
+     * The plan being pushed: a ring, a heavier shadow and a solid button. One
+     * card in a row should carry it.
+     */
+    featured?: boolean;
+    /** Text of the badge shown on the featured card. */
+    badge?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per slot, e.g. `{ amount: 'text-5xl' }`. */
+    ui?: {
+        root?: string;
+        header?: string;
+        name?: string;
+        price?: string;
+        amount?: string;
+        period?: string;
+        description?: string;
+        features?: string;
+        feature?: string;
+        featureIcon?: string;
+    };
+}
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_19: {}, __VLS_21: {}, __VLS_28: {}, __VLS_31: {};
+type __VLS_Slots = {} & {
+    name?: (props: typeof __VLS_9) => any;
+} & {
+    badge?: (props: typeof __VLS_11) => any;
+} & {
+    price?: (props: typeof __VLS_19) => any;
+} & {
+    description?: (props: typeof __VLS_21) => any;
+} & {
+    default?: (props: typeof __VLS_28) => any;
+} & {
+    footer?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<PricingCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<PricingCardProps> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {
+    unstyled: boolean;
+    badge: 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/PricingCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,94 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "../components/Icon.js";
+import n from "../components/Button.js";
+import r from "../components/Badge.js";
+import i from "../components/Card.js";
+import { pricingCardTheme as a } from "../theme/pricing-card.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, openBlock as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useSlots as S, withCtx as C } from "vue";
+import { Tick02Icon as w } from "@hugeicons/core-free-icons";
+//#region src/marketing/PricingCard.vue?vue&type=script&setup=true&lang.ts
+var T = /*@__PURE__*/ h({
+	__name: "PricingCard",
+	props: {
+		name: {},
+		price: {},
+		period: {},
+		description: {},
+		features: {},
+		cta: {},
+		featured: { type: Boolean },
+		badge: { default: "Most popular" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	},
+	emits: ["select"],
+	setup(h, { emit: T }) {
+		let E = h, D = T, O = S(), k = e(), A = s(() => E.unstyled ?? k.unstyled), j = s(() => a({ featured: E.featured }));
+		function M(e, t) {
+			return A.value ? [E.ui?.[e], t] : j.value[e]({ class: [E.ui?.[e], t] });
+		}
+		let N = s(() => !!(E.name ?? O.name) || !!(E.featured && E.badge)), P = s(() => !!(E.cta ?? O.footer));
+		return (e, a) => (_(), c(i, {
+			unstyled: E.unstyled,
+			class: g(M("root", E.class))
+		}, f({
+			default: C(() => [
+				E.price != null || x(O).price ? (_(), u("p", {
+					key: 0,
+					class: g(M("price"))
+				}, [y(e.$slots, "price", {}, () => [d("span", { class: g(M("amount")) }, b(E.price), 3), E.period ? (_(), u("span", {
+					key: 0,
+					class: g(M("period"))
+				}, b(E.period), 3)) : l("", !0)])], 2)) : l("", !0),
+				E.description || x(O).description ? (_(), u("p", {
+					key: 1,
+					class: g(M("description"))
+				}, [y(e.$slots, "description", {}, () => [p(b(E.description), 1)])], 2)) : l("", !0),
+				E.features?.length ? (_(), u("ul", {
+					key: 2,
+					class: g(M("features"))
+				}, [(_(!0), u(o, null, v(E.features, (e) => (_(), u("li", {
+					key: e,
+					class: g(M("feature"))
+				}, [m(t, {
+					icon: x(w),
+					class: g(M("featureIcon"))
+				}, null, 8, ["icon", "class"]), p(" " + b(e), 1)], 2))), 128))], 2)) : l("", !0),
+				y(e.$slots, "default")
+			]),
+			_: 2
+		}, [N.value ? {
+			name: "header",
+			fn: C(() => [d("div", { class: g(M("header")) }, [d("h3", { class: g(M("name")) }, [y(e.$slots, "name", {}, () => [p(b(E.name), 1)])], 2), y(e.$slots, "badge", {}, () => [E.featured && E.badge ? (_(), c(r, {
+				key: 0,
+				size: "sm"
+			}, {
+				default: C(() => [p(b(E.badge), 1)]),
+				_: 1
+			})) : l("", !0)])], 2)]),
+			key: "0"
+		} : void 0, P.value ? {
+			name: "footer",
+			fn: C(() => [y(e.$slots, "footer", {}, () => [m(n, {
+				variant: E.featured ? "solid" : "outline",
+				block: "",
+				onClick: a[0] ||= (e) => D("select")
+			}, {
+				default: C(() => [p(b(E.cta), 1)]),
+				_: 1
+			}, 8, ["variant"])])]),
+			key: "1"
+		} : void 0]), 1032, ["unstyled", "class"]));
+	}
+});
+//#endregion
+export { T as default };

package/dist/marketing/PricingTable.js

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

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

@@ -0,0 +1,41 @@
+import type { ClassValue } from '../class-value';
+import type { PricingCardProps } from './PricingCard.vue';
+export interface PricingPlan extends PricingCardProps {
+    /** Identity for the list and for the `select` event. */
+    id?: string | number;
+}
+export interface PricingTableProps {
+    /** Render as a different element or component. */
+    as?: string;
+    plans?: PricingPlan[];
+    /** Badge for the featured plan. A plan's own `badge` wins over it. */
+    badge?: string;
+    /**
+     * Columns from `lg` up. Defaults to one per plan, which is right until there
+     * are more than four — past that, set it and let them wrap.
+     */
+    columns?: 1 | 2 | 3 | 4;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<PricingTableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (plan: PricingPlan) => any;
+}, string, import("vue").PublicProps, Readonly<PricingTableProps> & Readonly<{
+    onSelect?: ((plan: PricingPlan) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    as: 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;
+    };
+};