iryx-ui 0.18.5 → 0.19.0

package/dist/marketing/PricingTable.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,57 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./PricingCard.js";
+import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, defineComponent as o, mergeProps as s, normalizeClass as c, openBlock as l, renderList as u, renderSlot as d, unref as f, withCtx as p } from "vue";
+import { Primitive as m } from "reka-ui";
+//#region src/marketing/PricingTable.vue?vue&type=script&setup=true&lang.ts
+var h = /*@__PURE__*/ o({
+	__name: "PricingTable",
+	props: {
+		as: { default: "div" },
+		plans: {},
+		badge: {},
+		columns: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] }
+	},
+	emits: ["select"],
+	setup(o, { emit: h }) {
+		let g = o, _ = h, v = e(), y = r(() => g.unstyled ?? v.unstyled), b = {
+			1: "",
+			2: "sm:grid-cols-2",
+			3: "lg:grid-cols-3",
+			4: "sm:grid-cols-2 lg:grid-cols-4"
+		}, x = r(() => {
+			let e = g.columns ?? Math.min(g.plans?.length ?? 1, 4);
+			return y.value ? g.class : [
+				"grid items-start gap-4",
+				b[e],
+				g.class
+			];
+		});
+		return (e, r) => (l(), i(f(m), {
+			as: g.as,
+			class: c(x.value)
+		}, {
+			default: p(() => [d(e.$slots, "default", {}, () => [(l(!0), a(n, null, u(g.plans, (e, n) => (l(), i(t, s({ key: e.id ?? e.name ?? n }, { ref_for: !0 }, e, {
+				badge: e.badge ?? g.badge,
+				unstyled: g.unstyled,
+				onSelect: (t) => _("select", e)
+			}), null, 16, [
+				"badge",
+				"unstyled",
+				"onSelect"
+			]))), 128))])]),
+			_: 3
+		}, 8, ["as", "class"]));
+	}
+});
+//#endregion
+export { h as default };

package/dist/marketing/Section.js

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

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

@@ -0,0 +1,53 @@
+import type { ClassValue } from '../class-value';
+export interface SectionProps {
+    /** Render as a different element or component. */
+    as?: string;
+    /** Small line above the heading, e.g. `Pricing`. */
+    eyebrow?: string;
+    heading?: string;
+    description?: string;
+    /** `muted` tints the band, to separate it from the sections either side. */
+    tone?: 'default' | 'muted';
+    /** Rule along the top edge. */
+    bordered?: 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-5xl' }`. */
+    ui?: {
+        root?: string;
+        container?: string;
+        header?: string;
+        eyebrow?: string;
+        heading?: string;
+        description?: string;
+        body?: string;
+    };
+}
+declare var __VLS_14: {}, __VLS_16: {}, __VLS_18: {}, __VLS_20: {};
+type __VLS_Slots = {} & {
+    eyebrow?: (props: typeof __VLS_14) => any;
+} & {
+    heading?: (props: typeof __VLS_16) => any;
+} & {
+    description?: (props: typeof __VLS_18) => any;
+} & {
+    default?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionProps> & Readonly<{}>, {
+    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;
+    };
+};

package/dist/marketing/Section.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,78 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "../components/Container.js";
+import { sectionTheme as n } from "../theme/section.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/Section.vue?vue&type=script&setup=true&lang.ts
+var v = /*@__PURE__*/ l({
+	__name: "Section",
+	props: {
+		as: { default: "section" },
+		eyebrow: {},
+		heading: {},
+		description: {},
+		tone: {},
+		bordered: { type: Boolean },
+		align: {},
+		padding: {},
+		size: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	},
+	setup(l) {
+		let v = l, y = h(), b = e(), x = r(() => v.unstyled ?? b.unstyled), S = r(() => !!(v.eyebrow ?? v.heading ?? v.description) || !!(y.eyebrow ?? y.heading ?? y.description)), C = r(() => n({
+			tone: v.tone,
+			bordered: v.bordered,
+			align: v.align,
+			padding: v.padding,
+			hasHeader: S.value
+		}));
+		function w(e, t) {
+			return x.value ? [v.ui?.[e], t] : C.value[e]({ class: [v.ui?.[e], t] });
+		}
+		let T = r(() => w("root", v.class));
+		return (e, n) => (d(), i(m(_), {
+			as: v.as,
+			class: u(T.value)
+		}, {
+			default: g(() => [c(t, {
+				size: v.size,
+				class: u(v.ui?.container)
+			}, {
+				default: g(() => [S.value ? (d(), o("div", {
+					key: 0,
+					class: u(w("header"))
+				}, [
+					v.eyebrow || m(y).eyebrow ? (d(), o("p", {
+						key: 0,
+						class: u(w("eyebrow"))
+					}, [f(e.$slots, "eyebrow", {}, () => [s(p(v.eyebrow), 1)])], 2)) : a("", !0),
+					v.heading || m(y).heading ? (d(), o("h2", {
+						key: 1,
+						class: u(w("heading"))
+					}, [f(e.$slots, "heading", {}, () => [s(p(v.heading), 1)])], 2)) : a("", !0),
+					v.description || m(y).description ? (d(), o("p", {
+						key: 2,
+						class: u(w("description"))
+					}, [f(e.$slots, "description", {}, () => [s(p(v.description), 1)])], 2)) : a("", !0)
+				], 2)) : a("", !0), m(y).default ? (d(), o("div", {
+					key: 1,
+					class: u(w("body"))
+				}, [f(e.$slots, "default")], 2)) : a("", !0)]),
+				_: 3
+			}, 8, ["size", "class"])]),
+			_: 3
+		}, 8, ["as", "class"]));
+	}
+});
+//#endregion
+export { v as default };

package/dist/marketing/TestimonialCard.js

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

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

@@ -0,0 +1,41 @@
+import type { ClassValue } from '../class-value';
+export interface TestimonialCardProps {
+    /** What they said. Curly quotes are added around it. */
+    quote?: string;
+    /** Who said it. Also derives the avatar's initials. */
+    name?: string;
+    /** Their job, company, or both. */
+    role?: string;
+    /** Their photo. Initials stand in without one. */
+    avatar?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per slot, e.g. `{ quote: 'italic' }`. */
+    ui?: {
+        root?: string;
+        quote?: string;
+        author?: string;
+        identity?: string;
+        name?: string;
+        role?: string;
+    };
+}
+declare var __VLS_8: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    author?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TestimonialCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TestimonialCardProps> & 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/TestimonialCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,61 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "../components/Avatar.js";
+import n from "../components/Card.js";
+import { testimonialCardTheme as r } from "../theme/testimonial-card.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, useSlots as v, withCtx as y } from "vue";
+//#region src/marketing/TestimonialCard.vue?vue&type=script&setup=true&lang.ts
+var b = /*@__PURE__*/ f({
+	__name: "TestimonialCard",
+	props: {
+		quote: {},
+		name: {},
+		role: {},
+		avatar: {},
+		size: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	},
+	setup(f) {
+		let b = f, x = v(), S = e(), C = i(() => b.unstyled ?? S.unstyled), w = i(() => r({ size: b.size }));
+		function T(e, t) {
+			return C.value ? [b.ui?.[e], t] : w.value[e]({ class: [b.ui?.[e], t] });
+		}
+		let E = i(() => !!(b.name ?? b.role) || !!x.author);
+		return (e, r) => (m(), a(n, {
+			unstyled: b.unstyled,
+			class: p(T("root", b.class))
+		}, l({
+			default: y(() => [b.quote || _(x).default ? (m(), s("blockquote", {
+				key: 0,
+				class: p(T("quote"))
+			}, [h(e.$slots, "default", {}, () => [u(" “" + g(b.quote) + "” ", 1)])], 2)) : o("", !0)]),
+			_: 2
+		}, [E.value ? {
+			name: "footer",
+			fn: y(() => [h(e.$slots, "author", {}, () => [c("div", { class: p(T("author")) }, [d(t, {
+				src: b.avatar,
+				name: b.name,
+				alt: "",
+				size: "sm"
+			}, null, 8, ["src", "name"]), c("div", { class: p(T("identity")) }, [b.name ? (m(), s("p", {
+				key: 0,
+				class: p(T("name"))
+			}, g(b.name), 3)) : o("", !0), b.role ? (m(), s("p", {
+				key: 1,
+				class: p(T("role"))
+			}, g(b.role), 3)) : o("", !0)], 2)], 2)])]),
+			key: "0"
+		} : void 0]), 1032, ["unstyled", "class"]));
+	}
+});
+//#endregion
+export { b as default };

package/dist/marketing/index.d.ts

@@ -0,0 +1,7 @@
+export { default as BrowserFrame } from './BrowserFrame.vue';
+export { default as FeatureCard } from './FeatureCard.vue';
+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 TestimonialCard } from './TestimonialCard.vue';

package/dist/marketing/index.js

@@ -0,0 +1,20 @@
+import { __exportAll as e } from "../_virtual/_rolldown/runtime.js";
+import t from "./BrowserFrame.js";
+import n from "./FeatureCard.js";
+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";
+//#region src/marketing/index.ts
+var c = /* @__PURE__ */ e({
+	BrowserFrame: () => t,
+	FeatureCard: () => n,
+	Hero: () => r,
+	PricingCard: () => i,
+	PricingTable: () => a,
+	Section: () => o,
+	TestimonialCard: () => s
+});
+//#endregion
+export { c as marketing_exports };

package/dist/marketing.d.ts

@@ -0,0 +1,30 @@
+import * as marketingComponents from './marketing/index';
+export type { BrowserFrameProps } from './marketing/BrowserFrame.vue';
+export type { FeatureCardProps } from './marketing/FeatureCard.vue';
+export type { HeroProps } from './marketing/Hero.vue';
+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 { TestimonialCardProps } from './marketing/TestimonialCard.vue';
+/**
+ * Every marketing component, keyed by name. Pass to the plugin's `components`
+ * option to register them globally alongside the core set:
+ *
+ * ```ts
+ * app.use(createIryxUi({ components: marketingComponents }))
+ * ```
+ */
+export { marketingComponents };
+/**
+ * Marketing components under the default `I` prefix. Declared only when this
+ * subpath is imported, so a project that never uses it keeps the core
+ * `GlobalComponents` untouched.
+ */
+export type IryxUiMarketingGlobalComponents = {
+    [K in keyof typeof marketingComponents as `I${K}`]: (typeof marketingComponents)[K];
+};
+declare module 'vue' {
+    interface GlobalComponents extends IryxUiMarketingGlobalComponents {
+    }
+}

package/dist/marketing.js

@@ -0,0 +1,9 @@
+import e from "./marketing/BrowserFrame.js";
+import t from "./marketing/FeatureCard.js";
+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 };

package/dist/nuxt.d.ts

@@ -5,6 +5,11 @@ export interface ModuleOptions {
     prefix: string;
     /** Render bare Reka UI primitives without Iryx's Tailwind classes. */
     unstyled: boolean;
+    /**
+     * Also auto-import the blocks from `iryx-ui/marketing`. Off by default, so an
+     * app that has no use for a hero never pulls one into its bundle.
+     */
+    blocks: boolean;
     /** Startup appearance. A preference the user already stored wins over this. */
     appearance?: Appearance;
     /** Color theme: a preset name (`'violet'`, `'rose'`) or a custom theme. */

package/dist/nuxt.js

@@ -1,7 +1,7 @@
-import { componentNames as e } from "./component-names.js";
-import { addComponent as t, addPluginTemplate as n, defineNuxtModule as r } from "@nuxt/kit";
+import { componentNames as e, marketingComponentNames as t } from "./component-names.js";
+import { addComponent as n, addPluginTemplate as r, defineNuxtModule as i } from "@nuxt/kit";
 //#region src/nuxt.ts
-var i = r({
+var a = i({
 	meta: {
 		name: "iryx-ui",
 		configKey: "iryxUi",
@@ -9,25 +9,31 @@ var i = r({
 	},
 	defaults: {
 		prefix: "I",
-		unstyled: !1
+		unstyled: !1,
+		blocks: !1
 	},
-	setup(r) {
-		for (let n of e) t({
-			name: `${r.prefix}${n}`,
-			export: n,
+	setup(i) {
+		for (let t of e) n({
+			name: `${i.prefix}${t}`,
+			export: t,
 			filePath: "iryx-ui"
 		});
-		n({
+		if (i.blocks) for (let e of t) n({
+			name: `${i.prefix}${e}`,
+			export: e,
+			filePath: "iryx-ui/marketing"
+		});
+		r({
 			filename: "iryx-ui.config.mjs",
 			getContents: () => `
 import { applyTheme, initAppearance, iryxUiConfigKey } from 'iryx-ui'
 import { defineNuxtPlugin } from '#app'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.provide(iryxUiConfigKey, ${JSON.stringify({ unstyled: r.unstyled })})
+  nuxtApp.vueApp.provide(iryxUiConfigKey, ${JSON.stringify({ unstyled: i.unstyled })})
   if (import.meta.client) {
-    ${r.theme ? `applyTheme(${JSON.stringify(r.theme)})` : ""}
-    ${r.appearance ? `initAppearance(${JSON.stringify(r.appearance)})` : ""}
+    ${i.theme ? `applyTheme(${JSON.stringify(i.theme)})` : ""}
+    ${i.appearance ? `initAppearance(${JSON.stringify(i.appearance)})` : ""}
   }
 })
 `
@@ -35,4 +41,4 @@ export default defineNuxtPlugin((nuxtApp) => {
 	}
 });
 //#endregion
-export { i as default };
+export { a as default };

package/dist/plugin.d.ts

@@ -1,8 +1,13 @@
-import type { Plugin } from 'vue';
+import type { Component, Plugin } from 'vue';
 import type { Appearance } from './composables/appearance';
 import type { IryxUiConfig } from './config';
 import type { Theme, ThemePresetName } from './theme/presets';
 export interface IryxUiPluginOptions extends Partial<IryxUiConfig> {
+    /**
+     * Extra components to register globally, keyed by name. Used by the optional
+     * subpaths, e.g. `import { marketingComponents } from 'iryx-ui/marketing'`.
+     */
+    components?: Record<string, Component>;
     /** Prefix for globally registered components. Defaults to `I` (IButton, ISwitch…). */
     prefix?: string;
     /** Startup appearance. A preference the user already stored wins over this. */

package/dist/plugin.js

@@ -5,13 +5,14 @@ import { applyTheme as i } from "./theme/presets.js";
 import { components_exports as a } from "./components/index.js";
 //#region src/plugin.ts
 function o(o = {}) {
-	let { prefix: s = "I", appearance: c, theme: l, ...u } = o;
+	let { prefix: s = "I", appearance: c, theme: l, components: u, ...d } = o;
 	return { install(o) {
 		o.provide(n, {
 			...t,
-			...u
+			...d
 		});
 		for (let t of e) o.component(`${s}${t}`, a[t]);
+		for (let [e, t] of Object.entries(u ?? {})) o.component(`${s}${e}`, t);
 		l && i(l), c && r(c);
 	} };
 }

package/dist/theme/accordion.js

@@ -5,7 +5,7 @@ var t = e({
 		root: "w-full",
 		item: "border-b border-border last:border-b-0",
 		header: "flex",
-		trigger: "group/trigger flex flex-1 items-center justify-between gap-4 py-4 text-left text-sm font-medium transition-colors outline-none hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50",
+		trigger: "group/trigger flex flex-1 items-center justify-between gap-4 py-4 text-left text-sm font-medium transition-[color,background-color,border-color,box-shadow] outline-none hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50",
 		icon: "size-4 shrink-0 text-muted-foreground transition-[rotate] duration-200 ease-out group-data-[state=open]/trigger:rotate-180",
 		content: "overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-collapsible-down",
 		contentInner: "pb-4"

package/dist/theme/alert.js

@@ -8,7 +8,7 @@ var t = e({
 		title: "text-sm font-medium text-foreground",
 		description: "text-sm text-muted-foreground",
 		actions: "mt-3 flex flex-wrap items-center gap-2",
-		close: "-m-1 shrink-0 self-start rounded-lg p-1 text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
+		close: "-m-1 shrink-0 self-start rounded-lg p-1 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 [&_svg]:size-4"
 	},
 	variants: {
 		variant: {

package/dist/theme/app-shell.js

@@ -6,7 +6,7 @@ var t = e({
 		header: "z-30 shrink-0",
 		headerRow: "flex w-full items-center",
 		headerContent: "min-w-0 flex-1",
-		navTrigger: "ms-2 inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-5",
+		navTrigger: "ms-2 inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-5",
 		body: "flex min-h-0 w-full flex-1",
 		sidebar: "shrink-0",
 		main: "flex min-w-0 flex-1 flex-col",

package/dist/theme/banner.js

@@ -8,7 +8,7 @@ var t = e({
 		content: "min-w-0 flex-1 text-sm",
 		title: "font-medium",
 		actions: "flex shrink-0 items-center gap-2",
-		close: "-mr-1 shrink-0 rounded-lg p-1 opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/50 [&_svg]:size-4"
+		close: "-mr-1 shrink-0 rounded-lg p-1 opacity-70 transition-opacity transition-shadow outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/50 [&_svg]:size-4"
 	},
 	variants: {
 		variant: {

package/dist/theme/breadcrumb.js

@@ -4,7 +4,7 @@ var t = e({ slots: {
 	root: "text-sm",
 	list: "flex flex-wrap items-center gap-1.5",
 	item: "inline-flex items-center gap-1.5",
-	link: "inline-flex items-center gap-1.5 rounded text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4 [&_svg]:shrink-0",
+	link: "inline-flex items-center gap-1.5 rounded 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 [&_svg]:size-4 [&_svg]:shrink-0",
 	current: "inline-flex items-center gap-1.5 font-medium text-foreground [&_svg]:size-4 [&_svg]:shrink-0",
 	separator: "text-muted-foreground [&_svg]:size-3.5"
 } });

package/dist/theme/browser-frame.d.ts

@@ -0,0 +1,59 @@
+export declare const browserFrameTheme: import("tailwind-variants").TVReturnType<{
+    shadow: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    bar: string;
+    dot: string;
+    url: string;
+    body: string;
+}, undefined, {
+    shadow: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    bar: string;
+    dot: string;
+    url: string;
+    body: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    shadow: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    bar: string;
+    dot: string;
+    url: string;
+    body: string;
+}>>;
+export type BrowserFrameSlots = keyof ReturnType<typeof browserFrameTheme>;

package/dist/theme/browser-frame.js

@@ -0,0 +1,20 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/browser-frame.ts
+var t = e({
+	slots: {
+		root: "overflow-hidden text-left",
+		bar: "flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-3",
+		dot: "size-2.5 rounded-full bg-muted-foreground/25",
+		url: "ml-3 truncate rounded-md bg-background px-2.5 py-1 text-xs text-muted-foreground",
+		body: ""
+	},
+	variants: { shadow: {
+		none: {},
+		sm: { root: "shadow-xs" },
+		md: { root: "shadow-md" },
+		lg: { root: "shadow-lg" }
+	} },
+	defaultVariants: { shadow: "lg" }
+});
+//#endregion
+export { t as browserFrameTheme };

package/dist/theme/calendar.js

@@ -5,12 +5,12 @@ var t = e({
 		root: "w-fit text-foreground",
 		header: "flex items-center justify-between gap-2 pb-3",
 		heading: "text-sm font-medium",
-		nav: "flex size-7 items-center justify-center rounded-lg text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
+		nav: "flex size-7 items-center justify-center rounded-lg text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
 		months: "flex items-start gap-4",
 		grid: "w-full border-collapse select-none",
 		headCell: "pb-1 text-xs font-normal text-muted-foreground",
 		cell: "p-0 transition-colors",
-		cellTrigger: "flex h-8 w-full min-w-8 items-center justify-center rounded-lg text-sm tabular-nums transition-colors outline-none not-data-[selected]:hover:bg-accent not-data-[selected]:hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:pointer-events-none data-[disabled]:opacity-30 data-[outside-view]:text-muted-foreground/50 data-[today]:font-semibold data-[today]:text-primary data-[unavailable]:pointer-events-none data-[unavailable]:line-through data-[unavailable]:opacity-40"
+		cellTrigger: "flex h-8 w-full min-w-8 items-center justify-center rounded-lg text-sm tabular-nums transition-[color,background-color,border-color,box-shadow] outline-none not-data-[selected]:hover:bg-accent not-data-[selected]:hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:pointer-events-none data-[disabled]:opacity-30 data-[outside-view]:text-muted-foreground/50 data-[today]:font-semibold data-[today]:text-primary data-[unavailable]:pointer-events-none data-[unavailable]:line-through data-[unavailable]:opacity-40"
 	},
 	variants: { range: {
 		false: { cellTrigger: "data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:data-[today]:text-primary-foreground" },

package/dist/theme/checkbox.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		wrapper: "flex items-start gap-2.5",
-		root: "peer flex shrink-0 cursor-pointer items-center justify-center rounded border border-border bg-background text-primary-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
+		root: "peer flex shrink-0 cursor-pointer items-center justify-center rounded border border-border bg-background text-primary-foreground transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
 		indicator: "flex items-center justify-center text-current",
 		content: "grid gap-1",
 		label: "text-sm leading-5 font-medium text-foreground select-none",

package/dist/theme/collapsible.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		root: "w-full",
-		trigger: "flex w-full items-center gap-2 rounded-lg text-sm font-medium text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+		trigger: "flex w-full items-center gap-2 rounded-lg text-sm font-medium text-foreground transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
 		content: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
 		icon: "shrink-0 text-muted-foreground transition-transform duration-200"
 	},