iryx-ui 0.17.1 → 0.18.0

package/README.md

@@ -84,6 +84,24 @@ Components are auto-imported with the `I` prefix.
 <IDialog unstyled />
 ```
 
+## TypeScript
+
+The plugin registers every component under the `I` prefix, and the package declares
+them on Vue's `GlobalComponents`, so their props are checked in templates without an
+import. A project that passes a different `prefix` declares its own augmentation:
+
+```ts
+import type { IryxUiGlobalComponents } from 'iryx-ui'
+
+declare module 'vue' {
+  interface GlobalComponents extends IryxUiGlobalComponents {}
+}
+```
+
+Every `class` prop takes the exported `ClassValue` — a string, or an array of strings
+and falsy values. Object syntax is not accepted: `tailwind-merge` cannot merge it, so
+it would lose to a built-in class rather than replace it.
+
 ## Requirements
 
 - Vue 3.5 or newer

package/dist/class-value.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What every component's `class` prop accepts: the subset of Vue's class
+ * binding that `tailwind-merge` can also merge. Object syntax
+ * (`:class="{ active: on }"`) is excluded on purpose — tailwind-merge does not
+ * understand it, so it would pass through unmerged and silently lose to a
+ * built-in class.
+ */
+export type ClassValue = string | false | null | undefined | ClassValue[];

package/dist/component-names.d.ts

@@ -3,5 +3,5 @@
  * Consumed by the Vue plugin (global registration) and the Nuxt module
  * (auto-imports). Keep in sync with `src/components/index.ts`.
  */
-export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "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 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];

package/dist/component-names.js

@@ -1,4 +1,4 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.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(".");
 //#endregion
 export { e as componentNames };

package/dist/components/Accordion.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 import type { IconLike } from '../composables/icon';
 export interface AccordionItemData {
     /** Row heading, and the fallback value when none is given. */
@@ -22,7 +23,7 @@ export interface AccordionProps {
     disabled?: boolean;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
-    class?: string;
+    class?: ClassValue;
     ui?: Partial<Record<'root' | 'item' | 'header' | 'trigger' | 'icon' | 'content' | 'contentInner', string>>;
 }
 type __VLS_Props = AccordionProps;

package/dist/components/Accordion.vue_vue_type_script_setup_true_lang.js

@@ -20,7 +20,12 @@ var D = { class: "flex min-w-0 items-center gap-2" }, O = { class: "truncate" },
 			type: Boolean,
 			default: void 0
 		},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
 		ui: {}
 	}, {
 		modelValue: {},

package/dist/components/Alert.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 import type { IconLike } from '../composables/icon';
 export interface AlertProps {
     /** Render as a different element or component. */
@@ -18,7 +19,7 @@ export interface AlertProps {
     closeLabel?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
-    class?: string;
+    class?: ClassValue;
     /** Override classes per slot, e.g. `{ title: 'text-base' }`. */
     ui?: {
         root?: string;

package/dist/components/Alert.vue_vue_type_script_setup_true_lang.js

@@ -22,7 +22,12 @@ var T = ["aria-label"], E = /*@__PURE__*/ u({
 			type: Boolean,
 			default: void 0
 		},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
 		ui: {}
 	}, {
 		open: {

package/dist/components/App.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ConfigProviderProps } from 'reka-ui';
+import type { ClassValue } from '../class-value';
 import type { Appearance } from '../composables/appearance';
 import type { Theme, ThemePresetName } from '../theme/presets';
 export interface AppProps extends /* @vue-ignore */ ConfigProviderProps {
@@ -16,7 +17,7 @@ export interface AppProps extends /* @vue-ignore */ ConfigProviderProps {
      * pass `div` (with `class`) if you want App to own your page shell.
      */
     as?: string;
-    class?: string;
+    class?: ClassValue;
 }
 declare var __VLS_14: {};
 type __VLS_Slots = {} & {

package/dist/components/App.vue_vue_type_script_setup_true_lang.js

@@ -14,7 +14,12 @@ var S = /*@__PURE__*/ l({
 		theme: {},
 		appearance: {},
 		as: { default: "template" },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] }
 	},
 	setup(l) {
 		let S = l;

package/dist/components/AppShell.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 export interface AppShellProps {
     /** Render as a different element or component. */
     as?: string;
@@ -17,7 +18,7 @@ export interface AppShellProps {
     navLabel?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
-    class?: string;
+    class?: ClassValue;
     /** Override classes per slot, e.g. `{ main: 'p-8' }`. */
     ui?: {
         root?: string;
@@ -38,7 +39,9 @@ declare var __VLS_13: {
     toggleNav: () => boolean;
 }, __VLS_21: {
     inDrawer: boolean;
-}, __VLS_23: {}, __VLS_25: {}, __VLS_27: {};
+}, __VLS_23: {
+    inDrawer: boolean;
+}, __VLS_25: {}, __VLS_27: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_13) => any;
 } & {

package/dist/components/AppShell.vue_vue_type_script_setup_true_lang.js

@@ -22,7 +22,12 @@ var S = ["aria-label", "aria-expanded"], C = /*@__PURE__*/ d({
 			type: Boolean,
 			default: void 0
 		},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
 		ui: {}
 	},
 	setup(d, { expose: C }) {
@@ -81,7 +86,7 @@ var S = ["aria-label", "aria-expanded"], C = /*@__PURE__*/ d({
 				l("div", { class: f(P("body")) }, [e.$slots.sidebar ? (m(), c("div", {
 					key: 0,
 					class: f(P("sidebar"))
-				}, [g(e.$slots, "sidebar")], 2)) : s("", !0), l("main", { class: f(P("main")) }, [g(e.$slots, "default")], 2)], 2),
+				}, [g(e.$slots, "sidebar", { inDrawer: !1 })], 2)) : s("", !0), l("main", { class: f(P("main")) }, [g(e.$slots, "default")], 2)], 2),
 				e.$slots.footer ? (m(), c("div", {
 					key: 2,
 					class: f(P("footer"))

package/dist/components/AspectRatio.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 export interface AspectRatioProps {
     /**
      * Width divided by height — `16 / 9`, `1`, `4 / 3`. Given as a number so
@@ -6,7 +7,7 @@ export interface AspectRatioProps {
     ratio?: number;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
-    class?: string;
+    class?: ClassValue;
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {

package/dist/components/AspectRatio.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,12 @@ var u = /*@__PURE__*/ r({
 			type: Boolean,
 			default: void 0
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] }
 	},
 	setup(r) {
 		let u = r, d = e(), f = t(() => u.unstyled ?? d.unstyled), p = t(() => f.value ? u.class : ["overflow-hidden rounded-xl", u.class]);

package/dist/components/AuthProviders.js

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

package/dist/components/AuthProviders.vue.d.ts

@@ -0,0 +1,67 @@
+import type { ClassValue } from '../class-value';
+import type { IconLike } from '../composables/icon';
+export interface AuthProvider {
+    /** Identifies the provider in the `select` event. */
+    id: string;
+    /** Button text, e.g. `'Continue with Google'`. Hidden when `compact`. */
+    label: string;
+    /**
+     * The provider's mark. Deliberately yours to supply: the sign-in branding
+     * of Google, Apple and the rest comes with rules about the mark, the
+     * wording and the colours, and those are the caller's to meet.
+     */
+    icon?: IconLike;
+    /** Render as a link instead of a button. */
+    href?: string;
+    disabled?: boolean;
+    /** Swap the mark for a spinner while the redirect is in flight. */
+    loading?: boolean;
+}
+export interface AuthProvidersProps {
+    providers?: AuthProvider[];
+    /** Full-width rows, or one equal-width column each. */
+    layout?: 'stack' | 'inline';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'outline' | 'ghost' | 'solid';
+    /** Drop the labels and show the marks alone. `label` becomes the a11y name. */
+    compact?: boolean;
+    /** Disable every provider, e.g. while the form it sits beside is submitting. */
+    disabled?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per slot, e.g. `{ provider: 'rounded-full' }`. */
+    ui?: {
+        root?: string;
+        provider?: string;
+        icon?: string;
+        label?: string;
+    };
+}
+declare var __VLS_14: {
+    provider: AuthProvider;
+}, __VLS_21: {
+    provider: AuthProvider;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AuthProvidersProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (provider: AuthProvider) => any;
+}, string, import("vue").PublicProps, Readonly<AuthProvidersProps> & Readonly<{
+    onSelect?: ((provider: AuthProvider) => any) | undefined;
+}>, {
+    variant: "outline" | "ghost" | "solid";
+    unstyled: boolean;
+    providers: AuthProvider[];
+}, {}, {}, {}, 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/components/AuthProviders.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,83 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { authProvidersTheme as n } from "../theme/auth-providers.js";
+import r from "./Button.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
+import { Loading03Icon as v } from "@hugeicons/core-free-icons";
+//#region src/components/AuthProviders.vue?vue&type=script&setup=true&lang.ts
+var y = /*@__PURE__*/ u({
+	__name: "AuthProviders",
+	props: {
+		providers: { default: () => [] },
+		layout: {},
+		size: {},
+		variant: { default: "outline" },
+		compact: { type: Boolean },
+		disabled: { type: Boolean },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	},
+	emits: ["select"],
+	setup(u, { emit: y }) {
+		let b = u, x = y, S = e(), C = a(() => b.unstyled ?? S.unstyled), w = a(() => n({
+			layout: b.layout,
+			size: b.size,
+			compact: b.compact
+		}));
+		function T(e, t) {
+			let n = [b.ui?.[e], t].filter(Boolean).join(" ");
+			return C.value ? n : w.value[e]({ class: n });
+		}
+		return (e, n) => (f(), c("div", { class: d(T("root", b.class)) }, [(f(!0), c(i, null, p(b.providers, (n) => (f(), o(r, {
+			key: n.id,
+			as: n.href ? "a" : "button",
+			href: n.href,
+			variant: b.variant,
+			size: b.size,
+			square: b.compact,
+			disabled: n.disabled || n.loading || b.disabled,
+			"aria-label": b.compact ? n.label : void 0,
+			class: d(T("provider")),
+			onClick: (e) => x("select", n)
+		}, {
+			default: _(() => [n.loading || n.icon || e.$slots.icon ? (f(), c("span", {
+				key: 0,
+				class: d(T("icon"))
+			}, [n.loading ? (f(), o(t, {
+				key: 0,
+				icon: g(v),
+				class: "animate-spin",
+				"data-icon": ""
+			}, null, 8, ["icon"])) : m(e.$slots, "icon", { provider: n }, () => [n.icon ? (f(), o(t, {
+				key: 0,
+				icon: n.icon,
+				"data-icon": ""
+			}, null, 8, ["icon"])) : s("", !0)], void 0, 1)], 2)) : s("", !0), b.compact ? s("", !0) : (f(), c("span", {
+				key: 1,
+				class: d(T("label"))
+			}, [m(e.$slots, "default", { provider: n }, () => [l(h(n.label), 1)])], 2))]),
+			_: 2
+		}, 1032, [
+			"as",
+			"href",
+			"variant",
+			"size",
+			"square",
+			"disabled",
+			"aria-label",
+			"class",
+			"onClick"
+		]))), 128))], 2));
+	}
+});
+//#endregion
+export { y as default };

package/dist/components/Avatar.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 export interface AvatarProps {
     src?: string;
     /**
@@ -26,7 +27,7 @@ export interface AvatarProps {
     delayMs?: number;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
-    class?: string;
+    class?: ClassValue;
     /** Override classes per slot, e.g. `{ fallback: 'bg-primary' }`. */
     ui?: {
         root?: string;

package/dist/components/Avatar.vue_vue_type_script_setup_true_lang.js

@@ -19,7 +19,12 @@ var v = ["title", "aria-label"], y = /*@__PURE__*/ c({
 			type: Boolean,
 			default: void 0
 		},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
 		ui: {}
 	},
 	setup(c) {

package/dist/components/AvatarGroup.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 import type { AvatarProps } from './Avatar.vue';
 /** One member of the stack — an `IAvatar`'s own props, minus the shared ones. */
 export type AvatarGroupItem = Omit<AvatarProps, 'size' | 'shape' | 'unstyled' | 'class' | 'ui'>;
@@ -12,7 +13,7 @@ export interface AvatarGroupProps {
     shape?: 'circle' | 'square';
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
-    class?: string;
+    class?: ClassValue;
     /** Override classes per slot, e.g. `{ overflow: 'bg-primary' }`. */
     ui?: {
         root?: string;

package/dist/components/AvatarGroup.vue_vue_type_script_setup_true_lang.js

@@ -14,7 +14,12 @@ var g = /*@__PURE__*/ l({
 			type: Boolean,
 			default: void 0
 		},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
 		ui: {}
 	},
 	setup(l) {

package/dist/components/Badge.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 export interface BadgeProps {
     /** Render as a different element or component. */
     as?: string;
@@ -14,7 +15,7 @@ export interface BadgeProps {
     label?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
-    class?: string;
+    class?: ClassValue;
     /** Override classes per slot, e.g. `{ dot: 'size-3' }`. */
     ui?: {
         root?: string;

package/dist/components/Badge.vue_vue_type_script_setup_true_lang.js

@@ -16,7 +16,12 @@ var h = /*@__PURE__*/ s({
 			type: Boolean,
 			default: void 0
 		},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
 		ui: {}
 	},
 	setup(s) {

package/dist/components/Banner.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 import type { IconLike } from '../composables/icon';
 export interface BannerProps {
     /** Render as a different element or component. */
@@ -28,7 +29,7 @@ export interface BannerProps {
     label?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
-    class?: string;
+    class?: ClassValue;
     /** Override classes per slot, e.g. `{ container: 'max-w-3xl' }`. */
     ui?: {
         root?: string;

package/dist/components/Banner.vue_vue_type_script_setup_true_lang.js

@@ -26,7 +26,12 @@ var x = ["aria-label"], S = /*@__PURE__*/ u({
 			type: Boolean,
 			default: void 0
 		},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
 		ui: {}
 	}, {
 		open: {

package/dist/components/BarChart.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 import type { ChartSeries } from '../composables/cartesian';
 import type { ChartAnimate } from '../composables/chart-reveal';
 import type { SparseValue } from '../composables/scale';
@@ -58,7 +59,7 @@ export interface BarChartProps {
     label?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
-    class?: string;
+    class?: ClassValue;
     ui?: Partial<Record<'root' | 'svg' | 'grid' | 'tick' | 'category' | 'bar' | 'tooltip' | 'tooltipLabel' | 'tooltipValue' | 'table', string>>;
 }
 declare var __VLS_6: {

package/dist/components/BarChart.vue_vue_type_script_setup_true_lang.js

@@ -63,7 +63,12 @@ var ee = ["role", "aria-label"], te = [
 			type: Boolean,
 			default: void 0
 		},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
 		ui: {}
 	},
 	setup(v) {

package/dist/components/Breadcrumb.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 import type { IconLike } from '../composables/icon';
 export interface BreadcrumbItem {
     label: string;
@@ -16,7 +17,7 @@ export interface BreadcrumbProps {
     label?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
-    class?: string;
+    class?: ClassValue;
     /** Override classes per slot, e.g. `{ current: 'text-primary' }`. */
     ui?: {
         root?: string;

package/dist/components/Breadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -14,7 +14,12 @@ var S = /*@__PURE__*/ d({
 			type: Boolean,
 			default: void 0
 		},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
 		ui: {}
 	},
 	setup(d) {

package/dist/components/Button.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 export interface ButtonProps {
     /** Render as a different element or component. */
     as?: string;
@@ -21,7 +22,7 @@ export interface ButtonProps {
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     type?: 'button' | 'submit' | 'reset';
-    class?: string;
+    class?: ClassValue;
 }
 declare var __VLS_13: {};
 type __VLS_Slots = {} & {

package/dist/components/Button.vue_vue_type_script_setup_true_lang.js

@@ -22,7 +22,12 @@ var h = /*@__PURE__*/ s({
 			default: void 0
 		},
 		type: { default: "button" },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] }
 	},
 	setup(s) {
 		let h = s, g = e(), _ = i(() => h.unstyled ?? g.unstyled), v = n(), y = i(() => h.size ?? v?.size.value), b = i(() => _.value ? h.class : r({

package/dist/components/ButtonGroup.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 import type { ButtonSize } from '../composables/button-group';
 export interface ButtonGroupProps {
     /** Render as a different element or component. */
@@ -12,7 +13,7 @@ export interface ButtonGroupProps {
     block?: boolean;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
-    class?: string;
+    class?: ClassValue;
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {

package/dist/components/ButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -15,7 +15,12 @@ var p = /*@__PURE__*/ a({
 			type: Boolean,
 			default: void 0
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] }
 	},
 	setup(a) {
 		let p = a;

package/dist/components/Calendar.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from '../class-value';
 export interface CalendarProps {
     /** Earliest selectable date, as an ISO `YYYY-MM-DD` string. */
     min?: string;
@@ -40,7 +41,7 @@ export interface CalendarProps {
     nextLabel?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
-    class?: string;
+    class?: ClassValue;
     /** Override classes per slot, e.g. `{ cellTrigger: 'rounded-full' }`. */
     ui?: Partial<Record<'root' | 'header' | 'heading' | 'nav' | 'months' | 'grid' | 'headCell' | 'cell' | 'cellTrigger', string>>;
 }

package/dist/components/Calendar.vue_vue_type_script_setup_true_lang.js

@@ -33,7 +33,12 @@ var I = /*@__PURE__*/ p({
 			type: Boolean,
 			default: void 0
 		},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
 		ui: {}
 	}, {
 		modelValue: { default: null },