@auronui/vue 1.0.14 → 1.0.16

package/dist/cjs/index.cjs

@@ -252,12 +252,12 @@ function useListData(options) {
 //#region src/utils/composeClassName.ts
 /**
 * Merges Tailwind CSS classes, resolving conflicts via tailwind-merge.
-* Uses cx() from tailwind-variants to join classes, then twMerge() to
-* deduplicate conflicting utilities (e.g. "p-4 p-2" → "p-2").
+* Accepts strings, objects ({ 'p-4': true }), arrays, and falsy values —
+* matching the full set of values Vue's :class binding accepts.
 *
 * Requires tailwind-merge 3.5.0 (Tailwind 4 compatible).
 *
-* @param classes - Class strings, undefined, null, or false values
+* @param classes - Any combination of ClassValue inputs
 * @returns Merged class string with conflicts resolved
 */
 function composeClassName(...classes) {
@@ -374,7 +374,7 @@ function createContext(contextName) {
 //#endregion
 //#region src/components/spinner/Spinner.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$61 = ["aria-label"];
-var _hoisted_2$32 = {
+var _hoisted_2$31 = {
 	"data-slot": "spinner-icon",
 	viewBox: "0 0 24 24",
 	"aria-hidden": "true",
@@ -408,7 +408,7 @@ var Spinner_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)(classes.value),
 				role: "status",
 				"aria-label": __props.label
-			}, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$32, [(0, vue.createElementVNode)("defs", null, [(0, vue.createElementVNode)("linearGradient", {
+			}, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$31, [(0, vue.createElementVNode)("defs", null, [(0, vue.createElementVNode)("linearGradient", {
 				id: gradId1,
 				x1: "50%",
 				x2: "50%",
@@ -499,12 +499,19 @@ var Skeleton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "Skeleton",
 	props: {
 		animationType: { default: "shimmer" },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.skeletonVariants)({ animationType: props.animationType }));
-		const classes = (0, vue.computed)(() => composeClassName(slotFns.value.base(), props.class));
+		const classes = (0, vue.computed)(() => composeClassName(slotFns.value.base(), props.class, props.classNames?.base));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				class: (0, vue.normalizeClass)(classes.value),
@@ -622,16 +629,23 @@ var Kbd_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "Kbd",
 	props: {
 		variant: { default: "default" },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.kbdVariants)({ variant: props.variant }));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)) }, [_ctx.$slots.abbr ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("abbr", {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [_ctx.$slots.abbr ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("abbr", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.abbr())
-			}, [(0, vue.renderSlot)(_ctx.$slots, "abbr")], 2)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.content()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)], 2);
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.abbr(), props.classNames?.abbr))
+			}, [(0, vue.renderSlot)(_ctx.$slots, "abbr")], 2)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.classNames?.content)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)], 2);
 		};
 	}
 });
@@ -644,7 +658,14 @@ var Badge_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		size: { default: "md" },
 		variant: { default: "primary" },
 		placement: { default: "top-right" },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -655,7 +676,7 @@ var Badge_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			placement: props.placement
 		}));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)(slotFns.value.anchor()) }, [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)) }, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.label()) }, [(0, vue.renderSlot)(_ctx.$slots, "label")], 2)], 2)], 2);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.anchor(), props.classNames?.anchor)) }, [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label)) }, [(0, vue.renderSlot)(_ctx.$slots, "label")], 2)], 2)], 2);
 		};
 	}
 });
@@ -679,7 +700,14 @@ var Chip_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		closeAriaLabel: { default: "Remove" },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	emits: ["close"],
 	setup(__props, { emit: __emit }) {
@@ -691,27 +719,27 @@ var Chip_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			variant: props.variant
 		}));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)) }, [
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [
 				__props.dot ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
-					class: (0, vue.normalizeClass)(slotFns.value.dot()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.dot(), props.classNames?.dot)),
 					"aria-hidden": "true"
 				}, null, 2)) : (0, vue.createCommentVNode)("", true),
 				_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 1,
-					class: (0, vue.normalizeClass)(slotFns.value.startContent()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent)),
 					"aria-hidden": "true"
 				}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
-				(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.label()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
+				(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
 				_ctx.$slots.endContent && !__props.isClosable ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 2,
-					class: (0, vue.normalizeClass)(slotFns.value.endContent()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent)),
 					"aria-hidden": "true"
 				}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true),
 				__props.isClosable ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: 3,
 					type: "button",
-					class: (0, vue.normalizeClass)(slotFns.value.closeButton()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.closeButton(), props.classNames?.closeButton)),
 					"aria-label": __props.closeAriaLabel,
 					onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
 				}, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("svg", {
@@ -797,7 +825,14 @@ var Card_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	emits: ["press"],
 	setup(__props, { emit: __emit }) {
@@ -836,7 +871,7 @@ var Card_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				role: role.value,
 				tabindex: tabindex.value,
 				"aria-disabled": __props.isDisabled || void 0,
@@ -856,7 +891,14 @@ var CardHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -871,7 +913,7 @@ var CardHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.cardVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), __props.divider && "card__header--divided", props.class)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), __props.divider && "card__header--divided", props.class, props.classNames?.header)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
 	}
 });
@@ -879,7 +921,16 @@ var CardHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/card/CardBody.vue
 var CardBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "CardBody",
-	props: { class: {} },
+	props: {
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useCardInject({
@@ -893,7 +944,7 @@ var CardBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.cardVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.class)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.class, props.classNames?.content)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
 	}
 });
@@ -906,7 +957,14 @@ var CardFooter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -921,7 +979,7 @@ var CardFooter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.cardVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.footer(), __props.divider && "card__footer--divided", props.class)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.footer(), __props.divider && "card__footer--divided", props.class, props.classNames?.footer)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
 	}
 });
@@ -986,7 +1044,14 @@ var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		as: { default: "button" },
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {},
 		value: { default: void 0 }
 	},
 	setup(__props) {
@@ -1026,7 +1091,7 @@ var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.Primitive), (0, vue.mergeProps)({
 				as: props.as,
-				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class),
+				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base),
 				disabled: isDisabled.value || props.isLoading || void 0,
 				"data-disabled": isDisabled.value || void 0,
 				"data-loading": props.isLoading || void 0,
@@ -1036,16 +1101,16 @@ var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				default: (0, vue.withCtx)(() => [
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 0,
-						class: (0, vue.normalizeClass)(slotFns.value.startContent())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent))
 					}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
-					(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.label()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
+					(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
 					_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
-						class: (0, vue.normalizeClass)(slotFns.value.endContent())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent))
 					}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true),
 					props.isLoading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 2,
-						class: (0, vue.normalizeClass)(slotFns.value.spinner()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.spinner(), props.classNames?.spinner)),
 						"aria-hidden": "true",
 						"data-slot": "spinner"
 					}, [(0, vue.createVNode)(Spinner_default, {
@@ -1085,7 +1150,14 @@ var ButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		orientation: { default: "horizontal" },
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {},
 		selectionMode: { default: "single" },
 		modelValue: { default: void 0 }
 	},
@@ -1130,7 +1202,7 @@ var ButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": props.orientation,
 				role: "group"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$55);
@@ -1312,7 +1384,14 @@ var ToggleButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		selectionMode: { default: "multiple" },
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -1352,7 +1431,7 @@ var ToggleButtonGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": props.orientation,
 				role: "group"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$53);
@@ -1378,7 +1457,14 @@ var Link_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		color: {},
 		underline: {},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -1400,12 +1486,12 @@ var Link_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				href: props.href,
 				target: resolvedTarget.value,
 				rel: resolvedRel.value,
-				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class),
+				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base),
 				"aria-disabled": props.disabled || void 0
 			}, _ctx.$attrs), {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default"), props.isExternal ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
-					class: (0, vue.normalizeClass)(slotFns.value.icon()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.icon(), props.classNames?.icon)),
 					"aria-hidden": "true"
 				}, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("svg", {
 					xmlns: "http://www.w3.org/2000/svg",
@@ -1852,7 +1938,7 @@ var _hoisted_1$52 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$31 = ["for"];
+var _hoisted_2$30 = ["for"];
 var _hoisted_3$19 = {
 	key: 0,
 	"aria-hidden": "true"
@@ -1943,7 +2029,14 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		label: {},
 		description: {},
 		errorMessage: {},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {}
@@ -2003,7 +2096,7 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const showInsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement === "inside");
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadonly || void 0,
@@ -2013,19 +2106,19 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [showOutsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 				key: 0,
 				for: inputId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$19, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$31)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createElementVNode)("div", {
-				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$19, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$30)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createElementVNode)("div", {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? isFilled.value || void 0 : void 0
 			}, [
 				showInsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 					key: 0,
 					for: inputId.value,
-					class: (0, vue.normalizeClass)(slotFns.value.label())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
 				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6$6, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_5$8)) : (0, vue.createCommentVNode)("", true),
 				_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 1,
-					class: (0, vue.normalizeClass)(slotFns.value.startContent())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.withDirectives)((0, vue.createElementVNode)("input", (0, vue.mergeProps)(inputAttrs.value, {
 					id: inputId.value,
@@ -2040,17 +2133,17 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					required: __props.isRequired || void 0,
 					"aria-invalid": __props.isInvalid || void 0,
 					"aria-describedby": ariaDescribedBy.value,
-					class: slotFns.value.input()
+					class: (0, vue.unref)(composeClassName)(slotFns.value.input(), props.classNames?.input)
 				}), null, 16, _hoisted_7$4), [[vue.vModelDynamic, modelValue.value]]),
 				_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 2,
-					class: (0, vue.normalizeClass)(slotFns.value.endContent())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true),
 				showClearButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: 3,
 					type: "button",
 					tabindex: "-1",
-					class: (0, vue.normalizeClass)(slotFns.value.clearButton()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.clearButton(), props.classNames?.clearButton)),
 					"aria-label": "Clear input",
 					onClick: handleClear
 				}, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("svg", {
@@ -2084,7 +2177,7 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				showPasswordToggleButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: 4,
 					type: "button",
-					class: (0, vue.normalizeClass)(slotFns.value.passwordToggle()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.passwordToggle(), props.classNames?.passwordToggle)),
 					"aria-label": isPasswordVisible.value ? "Hide password" : "Show password",
 					"aria-pressed": isPasswordVisible.value,
 					onClick: togglePasswordVisibility
@@ -2100,15 +2193,15 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, null, -1)])]))], 10, _hoisted_8$1)) : (0, vue.createCommentVNode)("", true)
 			], 10, _hoisted_4$12), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_11)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_12)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$52);
 		};
 	}
@@ -2123,7 +2216,7 @@ var _hoisted_1$51 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$30 = ["for"];
+var _hoisted_2$29 = ["for"];
 var _hoisted_3$18 = {
 	key: 0,
 	"aria-hidden": "true"
@@ -2191,7 +2284,14 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {}
@@ -2243,7 +2343,7 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const showInsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement === "inside");
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadonly || void 0,
@@ -2253,19 +2353,19 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [showOutsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 				key: 0,
 				for: inputId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$18, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$30)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createElementVNode)("div", {
-				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$18, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$29)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createElementVNode)("div", {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? isFilled.value || void 0 : void 0
 			}, [
 				showInsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 					key: 0,
 					for: inputId.value,
-					class: (0, vue.normalizeClass)(slotFns.value.label())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
 				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6$5, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_5$7)) : (0, vue.createCommentVNode)("", true),
 				_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 1,
-					class: (0, vue.normalizeClass)(slotFns.value.startContent())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.withDirectives)((0, vue.createElementVNode)("textarea", (0, vue.mergeProps)(inputAttrs.value, {
 					id: inputId.value,
@@ -2280,17 +2380,17 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					required: __props.isRequired || void 0,
 					"aria-invalid": __props.isInvalid || void 0,
 					"aria-describedby": ariaDescribedBy.value,
-					class: slotFns.value.input()
+					class: (0, vue.unref)(composeClassName)(slotFns.value.input(), props.classNames?.input)
 				}), null, 16, _hoisted_7$3), [[vue.vModelText, modelValue.value]]),
 				_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 2,
-					class: (0, vue.normalizeClass)(slotFns.value.endContent())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true),
 				showClearButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: 3,
 					type: "button",
 					tabindex: "-1",
-					class: (0, vue.normalizeClass)(slotFns.value.clearButton()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.clearButton(), props.classNames?.clearButton)),
 					"aria-label": "Clear textarea",
 					onClick: handleClear
 				}, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("svg", {
@@ -2323,15 +2423,15 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				], -1)])], 2)) : (0, vue.createCommentVNode)("", true)
 			], 10, _hoisted_4$11), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_8)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_9)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$51);
 		};
 	}
@@ -2373,7 +2473,14 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		placeholder: {},
 		label: { default: void 0 },
 		ariaLabel: { default: void 0 },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -2408,7 +2515,7 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"format-options": props.formatOptions,
 				locale: props.locale,
 				name: props.name,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": props.isInvalid || void 0,
 				"data-disabled": props.isDisabled || void 0,
 				"data-readonly": props.isReadonly || void 0
@@ -2419,10 +2526,10 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					class: (0, vue.normalizeClass)(isLabelVisible.value ? void 0 : "sr-only"),
 					"data-slot": "label"
 				}, (0, vue.toDisplayString)(props.label || props.ariaLabel), 11, _hoisted_1$50)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", {
-					class: (0, vue.normalizeClass)(slotFns.value.group()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.group(), props.classNames?.group)),
 					"data-slot": "group"
 				}, [
-					(0, vue.createVNode)((0, vue.unref)(reka_ui.NumberFieldDecrement), { class: (0, vue.normalizeClass)(slotFns.value.decrementButton()) }, {
+					(0, vue.createVNode)((0, vue.unref)(reka_ui.NumberFieldDecrement), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.decrementButton(), props.classNames?.decrementButton)) }, {
 						default: (0, vue.withCtx)(() => [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("svg", {
 							"aria-hidden": "true",
 							xmlns: "http://www.w3.org/2000/svg",
@@ -2439,10 +2546,10 @@ var NumberField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						_: 1
 					}, 8, ["class"]),
 					(0, vue.createVNode)((0, vue.unref)(reka_ui.NumberFieldInput), {
-						class: (0, vue.normalizeClass)(slotFns.value.input()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.input(), props.classNames?.input)),
 						placeholder: props.placeholder
 					}, null, 8, ["class", "placeholder"]),
-					(0, vue.createVNode)((0, vue.unref)(reka_ui.NumberFieldIncrement), { class: (0, vue.normalizeClass)(slotFns.value.incrementButton()) }, {
+					(0, vue.createVNode)((0, vue.unref)(reka_ui.NumberFieldIncrement), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.incrementButton(), props.classNames?.incrementButton)) }, {
 						default: (0, vue.withCtx)(() => [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("svg", {
 							"aria-hidden": "true",
 							xmlns: "http://www.w3.org/2000/svg",
@@ -2530,7 +2637,7 @@ var _hoisted_1$48 = {
 	"stroke-linecap": "round",
 	"aria-hidden": "true"
 };
-var _hoisted_2$29 = {
+var _hoisted_2$28 = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "12",
@@ -2568,7 +2675,14 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		name: { default: void 0 },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -2601,18 +2715,18 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				disabled: isDisabled.value,
 				name: props.name ?? (0, vue.unref)(groupCtx).name.value,
 				value: props.value,
-				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class),
+				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base),
 				"onUpdate:modelValue": handleUpdate
 			}), {
-				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.control()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.CheckboxIndicator), { class: (0, vue.normalizeClass)(slotFns.value.indicator()) }, {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.control(), props.classNames?.control)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.CheckboxIndicator), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)) }, {
 					default: (0, vue.withCtx)(() => [props.isIndeterminate ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$48, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("line", {
 						x1: "5",
 						y1: "12",
 						x2: "19",
 						y2: "12"
-					}, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$29, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" }, null, -1)])]))]),
+					}, null, -1)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$28, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" }, null, -1)])]))]),
 					_: 1
-				}, 8, ["class"])], 2), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.content()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
+				}, 8, ["class"])], 2), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.classNames?.content)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
 				_: 3
 			}, 16, [
 				"model-value",
@@ -2627,7 +2741,7 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/checkbox/CheckboxGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$47 = ["aria-labelledby", "data-orientation"];
-var _hoisted_2$28 = { class: "checkbox-group__wrapper" };
+var _hoisted_2$27 = { class: "checkbox-group__wrapper" };
 var _hoisted_3$17 = {
 	key: 1,
 	class: "checkbox-group__description"
@@ -2682,7 +2796,7 @@ var CheckboxGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					id: labelId,
 					class: "checkbox-group__label"
 				}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
-				(0, vue.createElementVNode)("div", _hoisted_2$28, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				(0, vue.createElementVNode)("div", _hoisted_2$27, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$17, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
 			], 10, _hoisted_1$47);
 		};
@@ -2703,7 +2817,17 @@ var Radio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
@@ -2720,9 +2844,9 @@ var Radio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				value: props.value,
 				disabled: isDisabled.value,
 				"data-variant": finalVariant.value,
-				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)
+				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)
 			}), {
-				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.control()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.RadioGroupIndicator), { class: (0, vue.normalizeClass)(slotFns.value.indicator()) }, null, 8, ["class"])], 2), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.content()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.control(), props.classNames?.control)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.RadioGroupIndicator), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)) }, null, 8, ["class"])], 2), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.classNames?.content)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
 				_: 3
 			}, 16, [
 				"value",
@@ -2736,7 +2860,7 @@ var Radio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/radio/RadioGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$46 = { class: "radio-group__wrapper" };
-var _hoisted_2$27 = {
+var _hoisted_2$26 = {
 	key: 1,
 	class: "radio-group__description"
 };
@@ -2786,7 +2910,7 @@ var RadioGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						class: "radio-group__label"
 					}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createElementVNode)("div", _hoisted_1$46, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
-					props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$27, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
+					props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$26, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
 				]),
 				_: 3
 			}, 8, [
@@ -2825,7 +2949,14 @@ var Switch_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		name: { default: void 0 },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -2857,12 +2988,12 @@ var Switch_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				disabled: isDisabled.value,
 				name: props.name ?? (0, vue.unref)(groupCtx).name.value,
 				value: props.value,
-				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class),
+				class: (0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base),
 				"onUpdate:modelValue": handleUpdate
 			}), {
-				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.control()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SwitchThumb), { class: (0, vue.normalizeClass)(slotFns.value.thumb()) }, null, 8, ["class"])], 2), _ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.control(), props.classNames?.control)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SwitchThumb), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.thumb(), props.classNames?.thumb)) }, null, 8, ["class"])], 2), _ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
-					class: (0, vue.normalizeClass)(slotFns.value.content())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.classNames?.content))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)) : (0, vue.createCommentVNode)("", true)]),
 				_: 3
 			}, 16, [
@@ -2878,7 +3009,7 @@ var Switch_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/switch/SwitchGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$45 = ["aria-labelledby", "data-orientation"];
-var _hoisted_2$26 = {
+var _hoisted_2$25 = {
 	key: 1,
 	class: "switch-group__description"
 };
@@ -2933,7 +3064,7 @@ var SwitchGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					class: "switch-group__label"
 				}, (0, vue.toDisplayString)(props.label), 1)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(groupSlots.value.items()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
-				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$26, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
+				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$25, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
 			], 10, _hoisted_1$45);
 		};
 	}
@@ -2962,7 +3093,17 @@ var InputOTP_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		defaultValue: { default: void 0 },
 		name: { default: void 0 },
 		variant: { default: "primary" },
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
 	},
 	emits: ["update:modelValue", "complete"],
 	setup(__props, { emit: __emit }) {
@@ -2981,15 +3122,15 @@ var InputOTP_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				otp: __props.otp,
 				mask: __props.mask,
 				name: __props.name,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"onUpdate:modelValue": handleUpdate,
 				onComplete: handleComplete
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.group()) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.length, (i) => {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.group(), props.classNames?.group)) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.length, (i) => {
 					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.PinInputInput), {
 						key: i - 1,
 						index: i - 1,
-						class: (0, vue.normalizeClass)(slotFns.value.slot())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.slot(), props.classNames?.slot))
 					}, null, 8, ["index", "class"]);
 				}), 128))], 2)]),
 				_: 1
@@ -12941,7 +13082,7 @@ var _hoisted_1$43 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_2$25 = {
+var _hoisted_2$24 = {
 	key: 1,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -13001,7 +13142,7 @@ var AlertDialogIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, null, -1),
 				(0, vue.createElementVNode)("path", { d: "m9 9 6 6" }, null, -1),
 				(0, vue.createElementVNode)("path", { d: "m15 9-6 6" }, null, -1)
-			])])) : resolvedStatus() === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$25, [..._cache[1] || (_cache[1] = [
+			])])) : resolvedStatus() === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$24, [..._cache[1] || (_cache[1] = [
 				(0, vue.createElementVNode)("path", { d: "M12 3.5 2.8 19.5a1.2 1.2 0 0 0 1 1.8h16.4a1.2 1.2 0 0 0 1-1.8L12 3.5Z" }, null, -1),
 				(0, vue.createElementVNode)("path", { d: "M12 10v4" }, null, -1),
 				(0, vue.createElementVNode)("path", { d: "M12 17.5h.01" }, null, -1)
@@ -13028,7 +13169,14 @@ var AlertDialogAction_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		variant: { default: "danger" },
 		size: { default: "md" },
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {},
 		asChild: {
 			type: Boolean,
 			default: false
@@ -13043,7 +13191,7 @@ var AlertDialogAction_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AlertDialogAction), {
 				"as-child": props.asChild,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).base(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).base(), props.class, props.classNames?.base))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13058,7 +13206,14 @@ var AlertDialogCancel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		variant: { default: "secondary" },
 		size: { default: "md" },
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {},
 		asChild: {
 			type: Boolean,
 			default: false
@@ -13073,7 +13228,7 @@ var AlertDialogCancel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AlertDialogCancel), {
 				"as-child": props.asChild,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).base(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).base(), props.class, props.classNames?.base))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13337,7 +13492,14 @@ var Tabs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		orientation: { default: "horizontal" },
 		variant: { default: "primary" },
 		activationMode: { default: "automatic" },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -13363,7 +13525,7 @@ var Tabs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"model-value": internalValue.value,
 				orientation: props.orientation,
 				"activation-mode": props.activationMode,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": props.orientation,
 				"onUpdate:modelValue": changeTab
 			}, {
@@ -13393,7 +13555,14 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		loop: { type: Boolean },
 		overflow: {},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -13534,7 +13703,7 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return !props.overflow ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsList), {
 				key: 0,
 				loop: props.loop ?? true,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), props.class, props.classNames?.tabList))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13576,7 +13745,7 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					class: "tabs__scroll-wrapper"
 				}, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TabsList), {
 					loop: props.loop ?? true,
-					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), "tabs__list--scroll", props.class))
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), "tabs__list--scroll", props.class, props.classNames?.tabList))
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					_: 3
@@ -13613,7 +13782,7 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: "tabs__list-container tabs__list-container--dropdown"
 			}, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TabsList), {
 				loop: props.loop ?? true,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), "tabs__list--clipped", props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabList(), "tabs__list--clipped", props.class, props.classNames?.tabList))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13668,7 +13837,14 @@ var Tab_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		value: {},
 		disabled: { type: Boolean },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -13678,7 +13854,7 @@ var Tab_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				value: props.value,
 				disabled: props.disabled,
 				"data-tab-value": props.value,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tab(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tab(), props.class, props.classNames?.tab))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13698,7 +13874,14 @@ var TabPanel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		value: {},
 		forceMount: { type: Boolean },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -13707,7 +13890,7 @@ var TabPanel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsContent), {
 				value: props.value,
 				"force-mount": props.forceMount,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabPanel(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabPanel(), props.class, props.classNames?.tabPanel))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13723,12 +13906,21 @@ var TabPanel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/tabs/TabIndicator.vue
 var TabIndicator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TabIndicator",
-	props: { class: {} },
+	props: {
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useTabsInject();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsIndicator), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabIndicator(), props.class)) }, null, 8, ["class"]);
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TabsIndicator), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.tabIndicator(), props.class, props.classNames?.tabIndicator)) }, null, 8, ["class"]);
 		};
 	}
 });
@@ -13753,7 +13945,14 @@ var Accordion_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		variant: { default: "default" },
 		size: { default: "md" },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -13771,7 +13970,7 @@ var Accordion_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"default-value": props.defaultValue,
 				collapsible: props.collapsible,
 				disabled: props.disabled,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => {
 					if (v !== void 0) emit("update:modelValue", v);
 				})
@@ -13799,7 +13998,14 @@ var AccordionItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		value: {},
 		disabled: { type: Boolean },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -13811,7 +14017,7 @@ var AccordionItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				ref: "reka",
 				value: props.value,
 				disabled: props.disabled,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.item(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.item(), props.class, props.classNames?.item))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
@@ -13827,12 +14033,21 @@ var AccordionItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/accordion/AccordionHeader.vue
 var AccordionHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AccordionHeader",
-	props: { class: {} },
+	props: {
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useAccordionInject();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AccordionHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.heading(), props.class)) }, {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AccordionHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.heading(), props.class, props.classNames?.heading)) }, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
 			}, 8, ["class"]);
@@ -13843,15 +14058,24 @@ var AccordionHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/accordion/AccordionTrigger.vue
 var AccordionTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AccordionTrigger",
-	props: { class: {} },
+	props: {
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useAccordionInject();
 		const item = useAccordionItemInject();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AccordionTrigger), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.trigger(), props.class)) }, {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AccordionTrigger), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.trigger(), props.class, props.classNames?.trigger)) }, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createElementVNode)("span", {
-					class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.indicator()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.indicator(), props.classNames?.indicator)),
 					"aria-hidden": "true"
 				}, [(0, vue.renderSlot)(_ctx.$slots, "indicator", { open: (0, vue.unref)(item).open.value }, () => [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("svg", {
 					xmlns: "http://www.w3.org/2000/svg",
@@ -13874,7 +14098,16 @@ var AccordionTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/accordion/AccordionContent.vue
 var AccordionContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AccordionContent",
-	props: { class: {} },
+	props: {
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useAccordionInject();
@@ -13882,7 +14115,7 @@ var AccordionContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AccordionContent), {
 				"force-mount": true,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.body(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.body(), props.class, props.classNames?.body))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(motion).div, {
 					initial: false,
@@ -13904,7 +14137,7 @@ var AccordionContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					},
 					style: { "overflow": "hidden" }
 				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.bodyInner()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.bodyInner(), props.classNames?.bodyInner)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
 					_: 3
 				}, 8, ["animate"])]),
 				_: 3
@@ -13941,7 +14174,14 @@ var Collapsible_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
@@ -13979,7 +14219,7 @@ var Collapsible_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				open: isControlled.value ? internalOpen.value : void 0,
 				"default-open": !isControlled.value ? props.defaultOpen : void 0,
 				disabled: props.disabled,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"onUpdate:open": onUpdateOpen
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
@@ -14000,14 +14240,23 @@ var _hoisted_1$41 = ["data-state"];
 //#region src/components/collapsible/CollapsibleTrigger.vue
 var CollapsibleTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "CollapsibleTrigger",
-	props: { class: {} },
+	props: {
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useCollapsibleInject();
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.CollapsibleTrigger), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.trigger(), props.class)) }, {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.CollapsibleTrigger), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.trigger(), props.class, props.classNames?.trigger)) }, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createElementVNode)("span", {
-					class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.indicator()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.indicator(), props.classNames?.indicator)),
 					"data-state": (0, vue.unref)(ctx).isOpen.value ? "open" : "closed",
 					"aria-hidden": "true"
 				}, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("svg", {
@@ -14032,7 +14281,16 @@ var CollapsibleTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/collapsible/CollapsibleContent.vue
 var CollapsibleContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "CollapsibleContent",
-	props: { class: {} },
+	props: {
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useCollapsibleInject();
@@ -14061,9 +14319,9 @@ var CollapsibleContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							ease: "easeOut"
 						},
 						style: { "overflow": "hidden" },
-						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.body())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.body(), props.classNames?.body))
 					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.bodyInner()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
+						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.bodyInner(), props.classNames?.bodyInner)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
 						_: 3
 					}, 8, ["class"])) : (0, vue.createCommentVNode)("", true)]),
 					_: 3
@@ -14082,7 +14340,14 @@ var CollapsibleGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -14103,7 +14368,7 @@ var CollapsibleGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.collapsibleGroupVariants)({}));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
 	}
 });
@@ -14116,7 +14381,14 @@ var Breadcrumbs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "Breadcrumbs",
 	props: {
 		maxItems: {},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -14139,7 +14411,7 @@ var Breadcrumbs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				list = [
 					first,
 					(0, vue.h)("li", {
-						class: slotFns.value.item(),
+						class: composeClassName(slotFns.value.item(), props.classNames?.item),
 						"aria-hidden": "true"
 					}, "…"),
 					...last
@@ -14160,7 +14432,7 @@ var Breadcrumbs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("nav", {
 				"aria-label": "Breadcrumb",
 				class: (0, vue.normalizeClass)(props.class)
-			}, [(0, vue.createElementVNode)("ol", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), void 0)) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(renderedChildren.value, (child, idx) => {
+			}, [(0, vue.createElementVNode)("ol", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(renderedChildren.value, (child, idx) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(child), { key: idx });
 			}), 128))], 2)], 2);
 		};
@@ -14169,7 +14441,7 @@ var Breadcrumbs_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/breadcrumbs/BreadcrumbItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$40 = ["aria-current"];
-var _hoisted_2$24 = ["href"];
+var _hoisted_2$23 = ["href"];
 var _hoisted_3$15 = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
@@ -14191,7 +14463,14 @@ var BreadcrumbItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -14199,18 +14478,18 @@ var BreadcrumbItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const SeparatorRenderer = (0, vue.computed)(() => ctx.separatorSlot ? () => (0, vue.h)(() => ctx.separatorSlot()) : null);
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
-				class: (0, vue.normalizeClass)([(0, vue.unref)(ctx).slotFns.value.item(), props.class]),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.item(), props.class, props.classNames?.item)),
 				"aria-current": props.isLast ? "page" : void 0
 			}, [props.href && !props.isLast ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("a", {
 				key: 0,
 				href: props.href,
-				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.link())
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_2$24)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.link(), props.classNames?.link))
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_2$23)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				key: 1,
-				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.link())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.link(), props.classNames?.link))
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)), !props.isLast ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				key: 2,
-				class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slotFns.value.separator()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.separator(), props.classNames?.separator)),
 				"aria-hidden": "true"
 			}, [SeparatorRenderer.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(SeparatorRenderer.value), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$15, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("polyline", { points: "9 6 15 12 9 18" }, null, -1)])]))], 2)) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$40);
 		};
@@ -14415,7 +14694,7 @@ var _hoisted_1$39 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_2$23 = {
+var _hoisted_2$22 = {
 	key: 1,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -14508,7 +14787,7 @@ var Alert_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, null, -1),
 							(0, vue.createElementVNode)("path", { d: "M12 8h.01" }, null, -1),
 							(0, vue.createElementVNode)("path", { d: "M11 12h1v4h1" }, null, -1)
-						])])) : __props.severity === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$23, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("circle", {
+						])])) : __props.severity === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$22, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("circle", {
 							cx: "12",
 							cy: "12",
 							r: "9"
@@ -14989,7 +15268,17 @@ var ListBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -15011,7 +15300,7 @@ var ListBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				disabled: props.isDisabled,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", props.selectionMode === "single" ? Array.isArray($event) ? $event[0] : $event : $event))
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ListboxContent), (0, vue.mergeProps)((0, vue.unref)(attrs), { class: (0, vue.unref)(composeClassName)(slotFns.value, props.class) }), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ListboxContent), (0, vue.mergeProps)((0, vue.unref)(attrs), { class: (0, vue.unref)(composeClassName)(slotFns.value, props.class, props.classNames?.base) }), {
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					_: 3
 				}, 16, ["class"])]),
@@ -15038,7 +15327,17 @@ var ListBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		variant: { default: void 0 },
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
@@ -15055,13 +15354,13 @@ var ListBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				value: props.value,
 				disabled: finalDisabled.value,
 				"text-value": props.textValue ?? props.value,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.item(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.item(), props.class, props.classNames?.item))
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
 					(0, vue.renderSlot)(_ctx.$slots, "default"),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent"),
-					(0, vue.createVNode)((0, vue.unref)(reka_ui.ListboxItemIndicator), { class: (0, vue.normalizeClass)(slotFns.value.indicator()) }, {
+					(0, vue.createVNode)((0, vue.unref)(reka_ui.ListboxItemIndicator), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)) }, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "12",
@@ -15156,7 +15455,7 @@ function hasSlotComponent(nodes, components) {
 //#endregion
 //#region src/components/select/SelectTrigger.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$37 = ["for"];
-var _hoisted_2$22 = {
+var _hoisted_2$21 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -15191,7 +15490,7 @@ var SelectTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						for: (0, vue.unref)(ctx).triggerId.value,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.label())
-					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$22, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$37)) : (0, vue.createCommentVNode)("", true),
+					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$21, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$37)) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.startContent()),
@@ -15474,7 +15773,7 @@ var _hoisted_1$35 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$21 = ["for"];
+var _hoisted_2$20 = ["for"];
 var _hoisted_3$13 = {
 	key: 0,
 	"aria-hidden": "true"
@@ -15516,7 +15815,14 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		label: {},
 		description: {},
 		errorMessage: {},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {},
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
 		multiple: {
@@ -15595,7 +15901,7 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadonly || void 0,
@@ -15605,8 +15911,8 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [showOutsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 				key: 0,
 				for: triggerId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$13, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$21)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectRoot), {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$13, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$20)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectRoot), {
 				"model-value": props.modelValue,
 				"default-value": props.defaultValue,
 				multiple: props.multiple,
@@ -15651,15 +15957,15 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"name"
 			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_4$8)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$6)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$35);
 		};
 	}
@@ -15781,7 +16087,7 @@ var DropdownMenu_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/dropdown/DropdownItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$34 = { class: "flex flex-1 flex-col" };
-var _hoisted_2$20 = { "data-slot": "label" };
+var _hoisted_2$19 = { "data-slot": "label" };
 var _hoisted_3$12 = {
 	key: 0,
 	"data-slot": "description"
@@ -15820,7 +16126,7 @@ var DropdownItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
-					(0, vue.createElementVNode)("div", _hoisted_1$34, [(0, vue.createElementVNode)("span", _hoisted_2$20, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$12, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
+					(0, vue.createElementVNode)("div", _hoisted_1$34, [(0, vue.createElementVNode)("span", _hoisted_2$19, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$12, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
 					props.shortcut ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", _hoisted_4$7, (0, vue.toDisplayString)(props.shortcut), 1)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent")
 				]),
@@ -16404,7 +16710,7 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/combo-box/ComboBox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$33 = ["aria-invalid"];
-var _hoisted_2$19 = ["id"];
+var _hoisted_2$18 = ["id"];
 var _hoisted_3$11 = {
 	key: 0,
 	"aria-hidden": "true"
@@ -16466,7 +16772,17 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Function,
 			default: void 0
 		},
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
 	},
 	emits: ["update:modelValue", "update:open"],
 	setup(__props, { emit: __emit }) {
@@ -16529,7 +16845,7 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"aria-invalid": props.isInvalid || void 0,
 				"data-slot": "combo-box"
 			}, [
@@ -16537,7 +16853,7 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					key: 0,
 					id: (0, vue.unref)(labelId),
 					"data-slot": "label"
-				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.label) + " ", 1), props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$11, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$19)) : (0, vue.createCommentVNode)("", true),
+				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.label) + " ", 1), props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$11, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$18)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxRoot), {
 					modelValue: internalValue.value,
 					"onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => internalValue.value = $event), _cache[1] || (_cache[1] = ($event) => handleModelValueUpdate($event))],
@@ -16683,7 +16999,7 @@ var AutocompleteOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)
 //#endregion
 //#region src/components/autocomplete/AutocompleteInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$31 = ["for"];
-var _hoisted_2$18 = {
+var _hoisted_2$17 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -16719,7 +17035,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						for: (0, vue.unref)(ctx).inputId.value,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.label())
-					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$18, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$31)) : (0, vue.createCommentVNode)("", true),
+					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$17, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$31)) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.startContent()),
@@ -16967,7 +17283,7 @@ var _hoisted_1$29 = {
 	class: "autocomplete-item__text",
 	"data-slot": "item-text"
 };
-var _hoisted_2$17 = {
+var _hoisted_2$16 = {
 	key: 1,
 	class: "list-box-item__indicator",
 	"data-slot": "list-box-item-indicator"
@@ -17046,7 +17362,7 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"aria-hidden": "true"
 						}, [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					})) : isChecked.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$17, [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
+					})) : isChecked.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$16, [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						width: "12",
 						height: "12",
@@ -17082,7 +17398,7 @@ var _hoisted_1$28 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$16 = ["for"];
+var _hoisted_2$15 = ["for"];
 var _hoisted_3$10 = {
 	key: 0,
 	"aria-hidden": "true"
@@ -17124,7 +17440,14 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		label: {},
 		description: {},
 		errorMessage: {},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {},
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
 		multiple: {
@@ -17396,7 +17719,7 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadonly || void 0,
@@ -17406,8 +17729,8 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [showOutsideLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
 				key: 0,
 				for: inputId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$10, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$16)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteRoot), {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$10, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$15)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteRoot), {
 				"model-value": searchTerm.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
 				open: props.multiple ? internalOpen.value : singleOpen.value,
@@ -17443,15 +17766,15 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"ignore-filter"
 			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_4$5)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$4)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$28);
 		};
 	}
@@ -17612,7 +17935,7 @@ var Pagination_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/pagination/PaginationContent.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$26 = ["disabled", "data-disabled"];
-var _hoisted_2$15 = ["disabled", "data-disabled"];
+var _hoisted_2$14 = ["disabled", "data-disabled"];
 //#endregion
 //#region src/components/pagination/PaginationContent.vue
 var PaginationContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -17653,7 +17976,7 @@ var PaginationContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"data-disabled": !hasNextPage.value || (0, vue.unref)(ctx).disabled.value || void 0,
 					"aria-label": "After page",
 					onClick: _cache[1] || (_cache[1] = ($event) => (0, vue.unref)(ctx).onCursorChange(null, (0, vue.unref)(ctx).afterCursor.value))
-				}, [(0, vue.renderSlot)(_ctx.$slots, "after", {}, () => [_cache[3] || (_cache[3] = (0, vue.createTextVNode)(" After ", -1))])], 10, _hoisted_2$15)
+				}, [(0, vue.renderSlot)(_ctx.$slots, "after", {}, () => [_cache[3] || (_cache[3] = (0, vue.createTextVNode)(" After ", -1))])], 10, _hoisted_2$14)
 			], 2));
 		};
 	}
@@ -20447,7 +20770,9 @@ var _hoisted_1$25 = [
 //#region src/components/table/TableHeader.vue
 var TableHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TableHeader",
+	props: { classNames: {} },
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tableVariants)({ variant: ctx.variant.value }));
 		function getAriaSort(header) {
@@ -20469,16 +20794,16 @@ var TableHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			onHeaderActivate(header, event);
 		}
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("thead", { class: (0, vue.normalizeClass)(slotFns.value.header()) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(ctx).table.getHeaderGroups(), (headerGroup) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("thead", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(ctx).table.getHeaderGroups(), (headerGroup) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
 					key: headerGroup.id,
 					role: "row",
-					class: (0, vue.normalizeClass)(slotFns.value.row())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.row(), props.classNames?.row))
 				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(headerGroup.headers, (header, colIndex) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("th", {
 						key: header.id,
 						role: "columnheader",
-						class: (0, vue.normalizeClass)(slotFns.value.column()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.column(), props.classNames?.column)),
 						"data-col-index": colIndex,
 						"data-row-index": -1,
 						"aria-sort": getAriaSort(header),
@@ -20505,7 +20830,7 @@ var _hoisted_1$24 = [
 	"onClick",
 	"onKeydown"
 ];
-var _hoisted_2$14 = [
+var _hoisted_2$13 = [
 	"data-row-index",
 	"data-col-index",
 	"tabindex"
@@ -20514,7 +20839,9 @@ var _hoisted_2$14 = [
 //#region src/components/table/TableBody.vue
 var TableBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TableBody",
+	props: { classNames: {} },
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tableVariants)({ variant: ctx.variant.value }));
 		function onRowKeydown(row, event) {
@@ -20527,11 +20854,11 @@ var TableBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			else row.toggleSelected();
 		}
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tbody", { class: (0, vue.normalizeClass)(slotFns.value.body()) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(ctx).table.getRowModel().rows, (row, rowIndex) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tbody", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.body(), props.classNames?.body)) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(ctx).table.getRowModel().rows, (row, rowIndex) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
 					key: row.id,
 					role: "row",
-					class: (0, vue.normalizeClass)(slotFns.value.row()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.row(), props.classNames?.row)),
 					"aria-rowindex": rowIndex + 1,
 					"aria-selected": (0, vue.unref)(ctx).selectionMode.value !== "none" ? row.getIsSelected() : void 0,
 					"data-state": row.getIsSelected() ? "checked" : void 0,
@@ -20541,7 +20868,7 @@ var TableBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", {
 						key: cell.id,
 						role: "gridcell",
-						class: (0, vue.normalizeClass)(slotFns.value.cell()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cell(), props.classNames?.cell)),
 						"data-row-index": rowIndex,
 						"data-col-index": colIndex,
 						tabindex: (0, vue.unref)(ctx).activeCell.value && (0, vue.unref)(ctx).activeCell.value.rowIndex === rowIndex && (0, vue.unref)(ctx).activeCell.value.columnIndex === colIndex ? 0 : (0, vue.unref)(ctx).activeCell.value === null && rowIndex === 0 && colIndex === 0 ? 0 : -1
@@ -20553,7 +20880,7 @@ var TableBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}, () => [(0, vue.createVNode)((0, vue.unref)(FlexRender), {
 						render: cell.column.columnDef.cell,
 						props: cell.getContext()
-					}, null, 8, ["render", "props"])])], 10, _hoisted_2$14);
+					}, null, 8, ["render", "props"])])], 10, _hoisted_2$13);
 				}), 128))], 42, _hoisted_1$24);
 			}), 128))], 2);
 		};
@@ -21350,7 +21677,7 @@ var _hoisted_1$23 = {
 	key: 0,
 	"aria-hidden": "true"
 };
-var _hoisted_2$13 = ["colspan"];
+var _hoisted_2$12 = ["colspan"];
 var _hoisted_3$9 = [
 	"aria-rowindex",
 	"aria-selected",
@@ -21375,7 +21702,8 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		scrollElement: {},
 		estimatedRowHeight: {},
-		overscan: {}
+		overscan: {},
+		classNames: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -21413,7 +21741,7 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}
 		__expose({ scrollToIndex: (index) => virtualizer.value.scrollToIndex(index, { align: "auto" }) });
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tbody", { class: (0, vue.normalizeClass)(slotFns.value.body()) }, [
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tbody", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.body(), props.classNames?.body)) }, [
 				paddingTop.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", _hoisted_1$23, [(0, vue.createElementVNode)("td", {
 					colspan: columnCount.value,
 					style: (0, vue.normalizeStyle)({
@@ -21421,12 +21749,12 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						padding: 0,
 						border: "none"
 					})
-				}, null, 12, _hoisted_2$13)])) : (0, vue.createCommentVNode)("", true),
+				}, null, 12, _hoisted_2$12)])) : (0, vue.createCommentVNode)("", true),
 				((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(virtualItems.value, (vItem) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
 						key: rows.value[vItem.index].id,
 						role: "row",
-						class: (0, vue.normalizeClass)(slotFns.value.row()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.row(), props.classNames?.row)),
 						"aria-rowindex": vItem.index + 1,
 						"aria-selected": (0, vue.unref)(ctx).selectionMode.value !== "none" ? rows.value[vItem.index].getIsSelected() : void 0,
 						"data-state": rows.value[vItem.index].getIsSelected() ? "checked" : void 0,
@@ -21436,7 +21764,7 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", {
 							key: cell.id,
 							role: "gridcell",
-							class: (0, vue.normalizeClass)(slotFns.value.cell()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cell(), props.classNames?.cell)),
 							"data-row-index": vItem.index,
 							"data-col-index": colIndex,
 							tabindex: (0, vue.unref)(ctx).activeCell.value !== null && (0, vue.unref)(ctx).activeCell.value.rowIndex === vItem.index && (0, vue.unref)(ctx).activeCell.value.columnIndex === colIndex ? 0 : (0, vue.unref)(ctx).activeCell.value === null && vItem.index === 0 && colIndex === 0 ? 0 : -1
@@ -21462,11 +21790,13 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/table/TableFooter.vue
 var TableFooter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TableFooter",
+	props: { classNames: {} },
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tableVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tfoot", { class: (0, vue.normalizeClass)(slotFns.value.footer()) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tfoot", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.footer(), props.classNames?.footer)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
 	}
 });
@@ -21538,7 +21868,8 @@ var Table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		estimatedRowHeight: { default: 44 },
-		virtualizerOverscan: { default: 8 }
+		virtualizerOverscan: { default: 8 },
+		classNames: {}
 	},
 	emits: ["update:rowSelection"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -21653,10 +21984,10 @@ var Table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			handleRowClick
 		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), _ctx.$attrs.class)) }, [(0, vue.createElementVNode)("div", {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), _ctx.$attrs.class, props.classNames?.base)) }, [(0, vue.createElementVNode)("div", {
 				ref_key: "scrollContainerRef",
 				ref: scrollContainerRef,
-				class: (0, vue.normalizeClass)(slotFns.value.scrollContainer()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.scrollContainer(), props.classNames?.scrollContainer)),
 				style: (0, vue.normalizeStyle)(useVirtual.value ? {
 					height: "400px",
 					overflow: "auto"
@@ -21698,13 +22029,24 @@ var Table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/table/TableRow.vue
 var TableRow_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TableRow",
+	props: {
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
+	},
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tableVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
 				role: "row",
-				class: (0, vue.normalizeClass)(slotFns.value.row())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.row(), props.class, props.classNames?.row))
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
 	}
@@ -21718,15 +22060,17 @@ var TableCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TableCell",
 	props: {
 		rowIndex: {},
-		columnIndex: {}
+		columnIndex: {},
+		classNames: {}
 	},
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tableVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", {
 				role: "gridcell",
-				class: (0, vue.normalizeClass)(slotFns.value.cell()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cell(), props.classNames?.cell)),
 				"data-row-index": __props.rowIndex,
 				"data-col-index": __props.columnIndex
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$21);
@@ -21742,15 +22086,17 @@ var TableHeaderCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "TableHeaderCell",
 	props: {
 		columnIndex: {},
-		sortDirection: {}
+		sortDirection: {},
+		classNames: {}
 	},
 	setup(__props) {
+		const props = __props;
 		const ctx = useTableInject();
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.tableVariants)({ variant: ctx.variant.value }));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("th", {
 				role: "columnheader",
-				class: (0, vue.normalizeClass)(slotFns.value.column()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.column(), props.classNames?.column)),
 				"data-col-index": __props.columnIndex,
 				"aria-sort": __props.sortDirection
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$20);
@@ -21766,7 +22112,7 @@ var _hoisted_1$19 = {
 	key: 0,
 	class: /* @__PURE__ */ (0, vue.normalizeClass)("avatar__name text-xs font-medium leading-none")
 };
-var _hoisted_2$12 = {
+var _hoisted_2$11 = {
 	key: 1,
 	class: "avatar__icon size-4/5",
 	"aria-hidden": "true",
@@ -21797,7 +22143,14 @@ var Avatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -21827,7 +22180,7 @@ var Avatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const inGroupClass = (0, vue.computed)(() => isInGroup.value ? "-me-2" : void 0);
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AvatarRoot), {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), borderedClass.value, inGroupClass.value, props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), borderedClass.value, inGroupClass.value, props.class, props.classNames?.base)),
 				"data-disabled": isDisabled.value || void 0,
 				"data-bordered": finalIsBordered.value || void 0
 			}, {
@@ -21835,13 +22188,13 @@ var Avatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					key: 0,
 					src: props.src,
 					alt: props.alt ?? props.name ?? "",
-					class: (0, vue.normalizeClass)(slotFns.value.image())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.image(), props.classNames?.image))
 				}, null, 8, [
 					"src",
 					"alt",
 					"class"
-				])) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)((0, vue.unref)(reka_ui.AvatarFallback), (0, vue.mergeProps)({ class: slotFns.value.fallback() }, props.src && !props.showFallback ? { "delay-ms": 600 } : {}), {
-					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "fallback", {}, () => [initials.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$19, (0, vue.toDisplayString)(initials.value), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$12, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" }, null, -1)])]))])]),
+				])) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)((0, vue.unref)(reka_ui.AvatarFallback), (0, vue.mergeProps)({ class: (0, vue.unref)(composeClassName)(slotFns.value.fallback(), props.classNames?.fallback) }, props.src && !props.showFallback ? { "delay-ms": 600 } : {}), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "fallback", {}, () => [initials.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$19, (0, vue.toDisplayString)(initials.value), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$11, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" }, null, -1)])]))])]),
 					_: 3
 				}, 16, ["class"])]),
 				_: 3
@@ -21921,7 +22274,17 @@ var AspectRatio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "AspectRatio",
 	props: {
 		ratio: { default: 1 },
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -21929,7 +22292,7 @@ var AspectRatio_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AspectRatio), {
 				ratio: __props.ratio,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-slot": "aspect-ratio"
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
@@ -21949,7 +22312,17 @@ var SplitterGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		id: { default: void 0 },
 		direction: { default: "horizontal" },
 		autoSaveId: { default: void 0 },
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
@@ -21960,7 +22333,7 @@ var SplitterGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				id: __props.id,
 				direction: __props.direction ?? "horizontal",
 				"auto-save-id": __props.autoSaveId,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.group(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.group(), props.class, props.classNames?.group)),
 				"data-slot": "splitter-group"
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
@@ -21989,7 +22362,17 @@ var SplitterPanel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		collapsedSize: { default: void 0 },
 		order: { default: void 0 },
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
 	},
 	emits: ["collapse", "expand"],
 	setup(__props) {
@@ -22004,7 +22387,7 @@ var SplitterPanel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				collapsible: __props.collapsible,
 				"collapsed-size": __props.collapsedSize,
 				order: __props.order,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.panel(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.panel(), props.class, props.classNames?.panel)),
 				"data-slot": "splitter-panel",
 				onCollapse: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("collapse")),
 				onExpand: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("expand"))
@@ -22034,7 +22417,17 @@ var SplitterResizeHandle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
 	},
 	emits: ["dragging"],
 	setup(__props) {
@@ -22045,11 +22438,11 @@ var SplitterResizeHandle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SplitterResizeHandle), {
 				id: __props.id,
 				disabled: __props.disabled,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.handle(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.handle(), props.class, props.classNames?.handle)),
 				"data-slot": "splitter-handle",
 				onDragging: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("dragging", $event))
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.handleBar()) }, null, 2)])]),
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.handleBar(), props.classNames?.handleBar)) }, null, 2)])]),
 				_: 3
 			}, 8, [
 				"id",
@@ -22076,7 +22469,17 @@ var Stepper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		orientation: { default: "horizontal" },
 		size: { default: "md" },
 		color: { default: "accent" },
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -22111,7 +22514,7 @@ var Stepper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"aria-label": `Step ${currentStep.value} of ${__props.totalSteps}`,
 				"data-slot": "stepper"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$18);
@@ -22127,7 +22530,17 @@ var StepperItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "StepperItem",
 	props: {
 		step: {},
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
@@ -22140,7 +22553,7 @@ var StepperItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.item(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.item(), props.class, props.classNames?.item)),
 				"data-status": status.value,
 				"data-step": __props.step,
 				"data-slot": "stepper-item"
@@ -22158,7 +22571,19 @@ var StepperItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/stepper/StepperIndicator.vue
 var StepperIndicator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "StepperIndicator",
-	props: { class: { default: void 0 } },
+	props: {
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = (0, vue.inject)(stepperContextKey);
@@ -22168,7 +22593,7 @@ var StepperIndicator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.class, props.classNames?.indicator)),
 				"aria-hidden": "true",
 				"data-slot": "stepper-indicator"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
@@ -22179,14 +22604,26 @@ var StepperIndicator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/stepper/StepperTitle.vue
 var StepperTitle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "StepperTitle",
-	props: { class: { default: void 0 } },
+	props: {
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = (0, vue.inject)(stepperContextKey);
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.stepperVariants)({ size: ctx?.size.value }));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("p", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.title(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.title(), props.class, props.classNames?.title)),
 				"data-slot": "stepper-title"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
@@ -22196,13 +22633,25 @@ var StepperTitle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/stepper/StepperDescription.vue
 var StepperDescription_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "StepperDescription",
-	props: { class: { default: void 0 } },
+	props: {
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
+	},
 	setup(__props) {
 		const props = __props;
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.stepperVariants)());
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("p", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.class, props.classNames?.description)),
 				"data-slot": "stepper-description"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
@@ -22212,13 +22661,25 @@ var StepperDescription_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/stepper/StepperContent.vue
 var StepperContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "StepperContent",
-	props: { class: { default: void 0 } },
+	props: {
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.stepperVariants)());
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.content(), props.class, props.classNames?.content)),
 				"data-slot": "stepper-content"
 			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
 		};
@@ -22228,14 +22689,26 @@ var StepperContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/stepper/StepperSeparator.vue
 var StepperSeparator_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "StepperSeparator",
-	props: { class: { default: void 0 } },
+	props: {
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = (0, vue.inject)(stepperContextKey);
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.stepperVariants)({ orientation: ctx?.orientation.value }));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.separator(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.separator(), props.class, props.classNames?.separator)),
 				role: "none",
 				"data-slot": "stepper-separator"
 			}, null, 2);
@@ -22270,7 +22743,17 @@ var Tree_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		size: { default: "md" },
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: {}
 	},
 	emits: ["update:modelValue", "update:expanded"],
 	setup(__props, { emit: __emit }) {
@@ -22293,7 +22776,7 @@ var Tree_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				multiple: __props.multiple,
 				"selection-behavior": __props.selectionBehavior,
 				"propagate-select": __props.propagateSelect,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.root(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.root(), props.class, props.classNames?.root)),
 				"data-slot": "tree",
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => emit("update:modelValue", v)),
 				"onUpdate:expanded": _cache[1] || (_cache[1] = (v) => emit("update:expanded", v))
@@ -22326,7 +22809,17 @@ var TreeItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		value: {},
 		level: {},
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
 	},
 	emits: ["select", "toggle"],
 	setup(__props) {
@@ -22342,13 +22835,13 @@ var TreeItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TreeItem), {
 				value: __props.value,
 				level: __props.level,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.item(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.item(), props.class, props.classNames?.item)),
 				"data-slot": "tree-item",
 				onSelect: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("select")),
 				onToggle: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("toggle"))
 			}, {
 				default: (0, vue.withCtx)((s) => [(0, vue.createElementVNode)("div", {
-					class: (0, vue.normalizeClass)(slotFns.value.itemContent()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.itemContent(), props.classNames?.itemContent)),
 					style: (0, vue.normalizeStyle)(indentStyle.value),
 					"data-selected": s.isSelected ? "" : void 0,
 					"data-expanded": s.isExpanded ? "" : void 0
@@ -22387,7 +22880,17 @@ var TreeItemToggle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: true
 		},
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -22395,7 +22898,7 @@ var TreeItemToggle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 				type: "button",
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).itemToggle(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(slotFns).itemToggle(), props.class, props.classNames?.itemToggle)),
 				"data-expanded": __props.isExpanded ? "" : void 0,
 				"data-no-children": !__props.hasChildren ? "" : void 0,
 				tabindex: "-1",
@@ -22416,7 +22919,7 @@ var TreeItemToggle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/slider/Slider.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$14 = ["data-orientation", "data-disabled"];
-var _hoisted_2$11 = {
+var _hoisted_2$10 = {
 	key: 0,
 	"data-slot": "label"
 };
@@ -22459,7 +22962,14 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -22507,12 +23017,12 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const positionAxis = (0, vue.computed)(() => props.orientation === "vertical" ? "bottom" : "left");
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": __props.orientation,
 				"data-disabled": __props.disabled || void 0
-			}, [showLabelWrapper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", _hoisted_2$11, (0, vue.toDisplayString)(__props.label), 1)) : (0, vue.createCommentVNode)("", true), !__props.hideValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("output", {
+			}, [showLabelWrapper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", _hoisted_2$10, (0, vue.toDisplayString)(__props.label), 1)) : (0, vue.createCommentVNode)("", true), !__props.hideValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("output", {
 				key: 1,
-				class: (0, vue.normalizeClass)(slotFns.value.output())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.output(), props.classNames?.output))
 			}, (0, vue.toDisplayString)(formatted.value), 3)) : (0, vue.createCommentVNode)("", true)], 64)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_3$8, [
 				(0, vue.renderSlot)(_ctx.$slots, "startContent"),
 				(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderRoot), {
@@ -22528,9 +23038,9 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					class: "relative flex items-center select-none touch-none w-full",
 					"data-orientation": __props.orientation
 				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderTrack), { class: (0, vue.normalizeClass)(slotFns.value.track()) }, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderTrack), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.track(), props.classNames?.track)) }, {
 						default: (0, vue.withCtx)(() => [
-							(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderRange), { class: (0, vue.normalizeClass)(slotFns.value.fill()) }, null, 8, ["class"]),
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderRange), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.fill(), props.classNames?.fill)) }, null, 8, ["class"]),
 							((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(tickPositions.value, (pct, i) => {
 								return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 									key: `tick-${i}`,
@@ -22543,7 +23053,7 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.marks || [], (mark) => {
 								return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 									key: `mark-${mark.value}`,
-									class: (0, vue.normalizeClass)([slotFns.value.marks(), "absolute"]),
+									class: (0, vue.normalizeClass)([(0, vue.unref)(composeClassName)(slotFns.value.marks(), props.classNames?.marks), "absolute"]),
 									style: (0, vue.normalizeStyle)({ [positionAxis.value]: toPercent(mark.value) + "%" }),
 									"data-slider-mark": ""
 								}, (0, vue.toDisplayString)(mark.label), 7);
@@ -22553,7 +23063,7 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}, 8, ["class"]), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(internalValue.value, (_, idx) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.SliderThumb), {
 							key: idx,
-							class: (0, vue.normalizeClass)(slotFns.value.thumb()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.thumb(), props.classNames?.thumb)),
 							"aria-label": __props.label || "Value"
 						}, null, 8, ["class", "aria-label"]);
 					}), 128))]),
@@ -22607,7 +23117,14 @@ var ProgressBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -22632,25 +23149,25 @@ var ProgressBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-disabled": __props.isDisabled ? "" : void 0
 			}, [__props.label || __props.showValueLabel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.labelWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.labelWrapper(), props.classNames?.labelWrapper))
 			}, [__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
 			}, (0, vue.toDisplayString)(__props.label), 3)) : (0, vue.createCommentVNode)("", true), __props.showValueLabel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 				key: 1,
-				class: (0, vue.normalizeClass)(slotFns.value.value())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.value(), props.classNames?.value))
 			}, (0, vue.toDisplayString)(formattedValue.value), 3)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)((0, vue.unref)(reka_ui.ProgressRoot), {
 				"model-value": isInd.value ? null : props.value,
 				max: __props.maxValue,
-				class: (0, vue.normalizeClass)(slotFns.value.track()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.track(), props.classNames?.track)),
 				"aria-label": __props.label || "Progress"
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ProgressIndicator), {
-					class: (0, vue.normalizeClass)(slotFns.value.indicator()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)),
 					style: (0, vue.normalizeStyle)(isInd.value ? {} : { transform: `translateX(-${100 - percentage.value}%)` })
 				}, null, 8, ["class", "style"])]),
 				_: 1
@@ -22666,7 +23183,7 @@ var ProgressBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region src/components/progress-circle/ProgressCircle.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$12 = ["r", "stroke-width"];
-var _hoisted_2$10 = [
+var _hoisted_2$9 = [
 	"r",
 	"stroke-width",
 	"stroke-dasharray",
@@ -22698,7 +23215,14 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -22726,24 +23250,24 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ProgressRoot), {
 				"model-value": isInd.value ? null : __props.value,
 				max: __props.maxValue,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"aria-label": __props.label || "Progress",
 				"data-disabled": __props.isDisabled ? "" : void 0
 			}, {
 				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-					class: (0, vue.normalizeClass)(slotFns.value.svg()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.svg(), props.classNames?.svg)),
 					viewBox: "0 0 32 32",
 					fill: "none",
 					"aria-hidden": "true"
 				}, [(0, vue.createElementVNode)("circle", {
-					class: (0, vue.normalizeClass)(slotFns.value.track()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.track(), props.classNames?.track)),
 					cx: "16",
 					cy: "16",
 					r: radius.value,
 					"stroke-width": __props.strokeWidth,
 					fill: "none"
 				}, null, 10, _hoisted_1$12), (0, vue.createElementVNode)("circle", {
-					class: (0, vue.normalizeClass)(slotFns.value.indicator()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)),
 					cx: "16",
 					cy: "16",
 					r: radius.value,
@@ -22754,9 +23278,9 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"stroke-dashoffset": offset.value,
 					transform: "rotate(-90 16 16)",
 					style: { "transition": "stroke-dashoffset 300ms ease-out" }
-				}, null, 10, _hoisted_2$10)], 2)), __props.showValueLabel || __props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				}, null, 10, _hoisted_2$9)], 2)), __props.showValueLabel || __props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
-					class: (0, vue.normalizeClass)(slotFns.value.value())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.value(), props.classNames?.value))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(formattedValue.value), 1)])], 2)) : (0, vue.createCommentVNode)("", true)]),
 				_: 3
 			}, 8, [
@@ -22771,11 +23295,7 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/meter/Meter.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$11 = {
-	key: 0,
-	"data-slot": "label"
-};
-var _hoisted_2$9 = [
+var _hoisted_1$11 = [
 	"aria-valuenow",
 	"aria-valuemin",
 	"aria-valuemax",
@@ -22799,7 +23319,14 @@ var Meter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		formatOptions: {},
 		size: {},
 		color: {},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -22817,11 +23344,15 @@ var Meter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			color: props.color
 		}));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)) }, [
-				__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$11, (0, vue.toDisplayString)(__props.label), 1)) : (0, vue.createCommentVNode)("", true),
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [
+				__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 0,
+					"data-slot": "label",
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+				}, (0, vue.toDisplayString)(__props.label), 3)) : (0, vue.createCommentVNode)("", true),
 				__props.showValueLabel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("output", {
 					key: 1,
-					class: (0, vue.normalizeClass)(slotFns.value.output())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.output(), props.classNames?.output))
 				}, (0, vue.toDisplayString)(formattedValue.value), 3)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.createElementVNode)("div", {
 					role: "meter",
@@ -22830,11 +23361,11 @@ var Meter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"aria-valuemax": __props.maxValue,
 					"aria-valuetext": formattedValue.value,
 					"aria-label": __props.label || "Meter",
-					class: (0, vue.normalizeClass)(slotFns.value.track())
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.track(), props.classNames?.track))
 				}, [(0, vue.createElementVNode)("div", {
-					class: (0, vue.normalizeClass)(slotFns.value.fill()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.fill(), props.classNames?.fill)),
 					style: (0, vue.normalizeStyle)({ width: percentage.value + "%" })
-				}, null, 6)], 10, _hoisted_2$9)
+				}, null, 6)], 10, _hoisted_1$11)
 			], 2);
 		};
 	}
@@ -22861,7 +23392,14 @@ var ScrollShadow_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		size: { default: 40 },
 		offset: { default: 0 },
 		visibility: { default: "auto" },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -22879,7 +23417,7 @@ var ScrollShadow_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				ref_key: "container",
 				ref: container,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": __props.orientation,
 				"data-top-scroll": topScroll.value ? "true" : void 0,
 				"data-bottom-scroll": bottomScroll.value ? "true" : void 0,
@@ -23645,7 +24183,14 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		calendarLabel: {},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {},
@@ -23676,16 +24221,16 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				readonly: __props.readonly,
 				disabled: __props.disabled,
 				"calendar-label": __props.calendarLabel,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class))
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base))
 			}, {
-				default: (0, vue.withCtx)(({ grid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeader), { class: (0, vue.normalizeClass)(slotFns.value.header()) }, {
+				default: (0, vue.withCtx)(({ grid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 					default: (0, vue.withCtx)(() => [
 						(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerPrev), {
-							class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 							"aria-label": "Previous years"
 						}, {
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-								class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 								xmlns: "http://www.w3.org/2000/svg",
 								width: "16",
 								height: "16",
@@ -23699,16 +24244,16 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 							_: 1
 						}, 8, ["class"]),
-						(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeading), { class: (0, vue.normalizeClass)(slotFns.value.heading()) }, {
+						(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeading), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 							default: (0, vue.withCtx)(({ headingValue }) => [(0, vue.renderSlot)(_ctx.$slots, "heading", { headingValue }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(headingValue), 1)])]),
 							_: 3
 						}, 8, ["class"]),
 						(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerNext), {
-							class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 							"aria-label": "Next years"
 						}, {
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-								class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 								xmlns: "http://www.w3.org/2000/svg",
 								width: "16",
 								height: "16",
@@ -23724,12 +24269,12 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						}, 8, ["class"])
 					]),
 					_: 3
-				}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGrid), { class: (0, vue.normalizeClass)(slotFns.value.yearGrid()) }, {
-					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGridBody), { class: (0, vue.normalizeClass)(slotFns.value.yearGridBody()) }, {
+				}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGrid), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearGrid(), props.classNames?.yearGrid)) }, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGridBody), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearGridBody(), props.classNames?.yearGridBody)) }, {
 						default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(grid.rows, (row, rowIndex) => {
 							return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.YearPickerGridRow), {
 								key: rowIndex,
-								class: (0, vue.normalizeClass)(slotFns.value.yearGridRow())
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearGridRow(), props.classNames?.yearGridRow))
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row, (yearValue) => {
 									return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.YearPickerCell), {
@@ -23739,7 +24284,7 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 										default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerCellTrigger), {
 											year: yearValue,
 											as: "button",
-											class: (0, vue.normalizeClass)(slotFns.value.yearCell())
+											class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearCell(), props.classNames?.yearCell))
 										}, null, 8, ["year", "class"])]),
 										_: 2
 									}, 1032, ["date"]);
@@ -23813,7 +24358,14 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		calendarLabel: {},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -23866,16 +24418,16 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					readonly: __props.readonly,
 					disabled: __props.disabled,
 					"calendar-label": __props.calendarLabel,
-					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class))
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base))
 				}, {
-					default: (0, vue.withCtx)(({ grid, weekDays }) => [view.value === "date" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarHeader), { class: (0, vue.normalizeClass)(slotFns.value.header()) }, {
+					default: (0, vue.withCtx)(({ grid, weekDays }) => [view.value === "date" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: (0, vue.withCtx)(() => [
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarPrev), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous month"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -23889,21 +24441,21 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								}, [..._cache[4] || (_cache[4] = [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarHeading), { class: (0, vue.normalizeClass)(slotFns.value.heading()) }, {
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarHeading), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
 									type: "button",
-									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
 								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_1$9)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarNext), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next month"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -23922,14 +24474,14 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}, 8, ["class"]), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(grid, (month) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.CalendarGrid), {
 							key: month.value.toString(),
-							class: (0, vue.normalizeClass)(slotFns.value.grid())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.grid(), props.classNames?.grid))
 						}, {
-							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarGridHead), { class: (0, vue.normalizeClass)(slotFns.value.gridHeader()) }, {
-								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarGridRow), { class: (0, vue.normalizeClass)(slotFns.value.gridRow()) }, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarGridHead), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridHeader(), props.classNames?.gridHeader)) }, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarGridRow), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridRow(), props.classNames?.gridRow)) }, {
 									default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(weekDays, (day) => {
 										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.CalendarHeadCell), {
 											key: day,
-											class: (0, vue.normalizeClass)(slotFns.value.headerCell())
+											class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headerCell(), props.classNames?.headerCell))
 										}, {
 											default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(day), 1)]),
 											_: 2
@@ -23938,22 +24490,22 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									_: 2
 								}, 1032, ["class"])]),
 								_: 2
-							}, 1032, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarGridBody), { class: (0, vue.normalizeClass)(slotFns.value.gridBody()) }, {
+							}, 1032, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarGridBody), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridBody(), props.classNames?.gridBody)) }, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(month.rows, (week, weekIndex) => {
 									return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.CalendarGridRow), {
 										key: weekIndex,
-										class: (0, vue.normalizeClass)(slotFns.value.gridRow())
+										class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridRow(), props.classNames?.gridRow))
 									}, {
 										default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(week, (day) => {
 											return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.CalendarCell), {
 												key: day.toString(),
 												date: day,
-												class: (0, vue.normalizeClass)(slotFns.value.cell())
+												class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cell(), props.classNames?.cell))
 											}, {
 												default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarCellTrigger), {
 													day,
 													month: month.value,
-													class: (0, vue.normalizeClass)(slotFns.value.cellButton())
+													class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cellButton(), props.classNames?.cellButton))
 												}, null, 8, [
 													"day",
 													"month",
@@ -24000,20 +24552,20 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"max-value": __props.maxValue,
 					readonly: __props.readonly,
 					disabled: __props.disabled,
-					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 					"onUpdate:modelValue": onMonthSelect,
 					"onUpdate:placeholder": _cache[2] || (_cache[2] = (val) => {
 						if (val) placeholder.value = val;
 					})
 				}, {
-					default: (0, vue.withCtx)(({ grid: monthGrid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeader), { class: (0, vue.normalizeClass)(slotFns.value.header()) }, {
+					default: (0, vue.withCtx)(({ grid: monthGrid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: (0, vue.withCtx)(() => [
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerPrev), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous year"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24027,21 +24579,21 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								}, [..._cache[6] || (_cache[6] = [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeading), { class: (0, vue.normalizeClass)(slotFns.value.heading()) }, {
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeading), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
 									type: "button",
-									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
 								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$8)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerNext), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next year"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24057,12 +24609,12 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, 8, ["class"])
 						]),
 						_: 1
-					}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGrid), { class: (0, vue.normalizeClass)(slotFns.value.monthGrid()) }, {
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGridBody), { class: (0, vue.normalizeClass)(slotFns.value.monthGridBody()) }, {
+					}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGrid), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthGrid(), props.classNames?.monthGrid)) }, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGridBody), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthGridBody(), props.classNames?.monthGridBody)) }, {
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(monthGrid.rows, (row, i) => {
 								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.MonthPickerGridRow), {
 									key: i,
-									class: (0, vue.normalizeClass)(slotFns.value.monthGridRow())
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthGridRow(), props.classNames?.monthGridRow))
 								}, {
 									default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row, (monthValue) => {
 										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.MonthPickerCell), {
@@ -24072,7 +24624,7 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 											default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerCellTrigger), {
 												month: monthValue,
 												as: "button",
-												class: (0, vue.normalizeClass)(slotFns.value.monthCell())
+												class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthCell(), props.classNames?.monthCell))
 											}, null, 8, ["month", "class"])]),
 											_: 2
 										}, 1032, ["date"]);
@@ -24103,12 +24655,12 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"max-value": __props.maxValue,
 					readonly: __props.readonly,
 					disabled: __props.disabled,
-					class: (0, vue.normalizeClass)(props.class),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(props.class, props.classNames?.base)),
 					"onUpdate:modelValue": onYearSelect
 				}, {
 					heading: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
 						type: "button",
-						class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 						"aria-label": `Switch to ${nextViewLabel.value} view`,
 						onClick: cycleView
 					}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$7)]),
@@ -24171,7 +24723,14 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		calendarLabel: {},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -24225,16 +24784,16 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					readonly: __props.readonly,
 					disabled: __props.disabled,
 					"calendar-label": __props.calendarLabel,
-					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class))
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base))
 				}, {
-					default: (0, vue.withCtx)(({ grid, weekDays }) => [view.value === "date" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarHeader), { class: (0, vue.normalizeClass)(slotFns.value.header()) }, {
+					default: (0, vue.withCtx)(({ grid, weekDays }) => [view.value === "date" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: (0, vue.withCtx)(() => [
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarPrev), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous month"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24248,21 +24807,21 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								}, [..._cache[4] || (_cache[4] = [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarHeading), { class: (0, vue.normalizeClass)(slotFns.value.heading()) }, {
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarHeading), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
 									type: "button",
-									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
 								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_1$8)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarNext), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next month"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24281,14 +24840,14 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}, 8, ["class"]), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(grid, (month) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.RangeCalendarGrid), {
 							key: month.value.toString(),
-							class: (0, vue.normalizeClass)(slotFns.value.grid())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.grid(), props.classNames?.grid))
 						}, {
-							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarGridHead), { class: (0, vue.normalizeClass)(slotFns.value.gridHeader()) }, {
-								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarGridRow), { class: (0, vue.normalizeClass)(slotFns.value.gridRow()) }, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarGridHead), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridHeader(), props.classNames?.gridHeader)) }, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarGridRow), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridRow(), props.classNames?.gridRow)) }, {
 									default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(weekDays, (day) => {
 										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.RangeCalendarHeadCell), {
 											key: day,
-											class: (0, vue.normalizeClass)(slotFns.value.headerCell())
+											class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headerCell(), props.classNames?.headerCell))
 										}, {
 											default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(day), 1)]),
 											_: 2
@@ -24297,22 +24856,22 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									_: 2
 								}, 1032, ["class"])]),
 								_: 2
-							}, 1032, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarGridBody), { class: (0, vue.normalizeClass)(slotFns.value.gridBody()) }, {
+							}, 1032, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarGridBody), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridBody(), props.classNames?.gridBody)) }, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(month.rows, (week, weekIndex) => {
 									return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.RangeCalendarGridRow), {
 										key: weekIndex,
-										class: (0, vue.normalizeClass)(slotFns.value.gridRow())
+										class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.gridRow(), props.classNames?.gridRow))
 									}, {
 										default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(week, (day) => {
 											return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.RangeCalendarCell), {
 												key: day.toString(),
 												date: day,
-												class: (0, vue.normalizeClass)(slotFns.value.cell())
+												class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cell(), props.classNames?.cell))
 											}, {
 												default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarCellTrigger), {
 													day,
 													month: month.value,
-													class: (0, vue.normalizeClass)(slotFns.value.cellButton())
+													class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cellButton(), props.classNames?.cellButton))
 												}, null, 8, [
 													"day",
 													"month",
@@ -24360,20 +24919,20 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"max-value": __props.maxValue,
 					readonly: __props.readonly,
 					disabled: __props.disabled,
-					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 					"onUpdate:modelValue": onMonthSelect,
 					"onUpdate:placeholder": _cache[2] || (_cache[2] = (val) => {
 						if (val) placeholder.value = val;
 					})
 				}, {
-					default: (0, vue.withCtx)(({ grid: monthGrid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeader), { class: (0, vue.normalizeClass)(slotFns.value.header()) }, {
+					default: (0, vue.withCtx)(({ grid: monthGrid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: (0, vue.withCtx)(() => [
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerPrev), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous year"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24387,21 +24946,21 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								}, [..._cache[6] || (_cache[6] = [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeading), { class: (0, vue.normalizeClass)(slotFns.value.heading()) }, {
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerHeading), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
 									type: "button",
-									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
 								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$7)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerNext), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next year"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24417,12 +24976,12 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, 8, ["class"])
 						]),
 						_: 1
-					}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGrid), { class: (0, vue.normalizeClass)(slotFns.value.monthGrid()) }, {
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGridBody), { class: (0, vue.normalizeClass)(slotFns.value.monthGridBody()) }, {
+					}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGrid), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthGrid(), props.classNames?.monthGrid)) }, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerGridBody), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthGridBody(), props.classNames?.monthGridBody)) }, {
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(monthGrid.rows, (row, i) => {
 								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.MonthPickerGridRow), {
 									key: i,
-									class: (0, vue.normalizeClass)(slotFns.value.monthGridRow())
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthGridRow(), props.classNames?.monthGridRow))
 								}, {
 									default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row, (monthValue) => {
 										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.MonthPickerCell), {
@@ -24432,7 +24991,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 											default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerCellTrigger), {
 												month: monthValue,
 												as: "button",
-												class: (0, vue.normalizeClass)(slotFns.value.monthCell())
+												class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.monthCell(), props.classNames?.monthCell))
 											}, null, 8, ["month", "class"])]),
 											_: 2
 										}, 1032, ["date"]);
@@ -24462,20 +25021,20 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"max-value": __props.maxValue,
 					readonly: __props.readonly,
 					disabled: __props.disabled,
-					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 					"onUpdate:modelValue": onYearSelect,
 					"onUpdate:placeholder": _cache[3] || (_cache[3] = (val) => {
 						if (val) placeholder.value = val;
 					})
 				}, {
-					default: (0, vue.withCtx)(({ grid: yearGrid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeader), { class: (0, vue.normalizeClass)(slotFns.value.header()) }, {
+					default: (0, vue.withCtx)(({ grid: yearGrid }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeader), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: (0, vue.withCtx)(() => [
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerPrev), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous decade"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24489,21 +25048,21 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								}, [..._cache[8] || (_cache[8] = [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeading), { class: (0, vue.normalizeClass)(slotFns.value.heading()) }, {
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerHeading), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: (0, vue.withCtx)(({ headingValue }) => [(0, vue.createElementVNode)("button", {
 									type: "button",
-									class: (0, vue.normalizeClass)(slotFns.value.headingButton()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
 								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$6)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerNext), {
-								class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+								class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next decade"
 							}, {
 								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-									class: (0, vue.normalizeClass)(slotFns.value.navButtonIcon()),
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -24519,12 +25078,12 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, 8, ["class"])
 						]),
 						_: 1
-					}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGrid), { class: (0, vue.normalizeClass)(slotFns.value.yearGrid()) }, {
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGridBody), { class: (0, vue.normalizeClass)(slotFns.value.yearGridBody()) }, {
+					}, 8, ["class"]), (0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGrid), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearGrid(), props.classNames?.yearGrid)) }, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerGridBody), { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearGridBody(), props.classNames?.yearGridBody)) }, {
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(yearGrid.rows, (row, i) => {
 								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.YearPickerGridRow), {
 									key: i,
-									class: (0, vue.normalizeClass)(slotFns.value.yearGridRow())
+									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearGridRow(), props.classNames?.yearGridRow))
 								}, {
 									default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row, (yearValue) => {
 										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.YearPickerCell), {
@@ -24534,7 +25093,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 											default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerCellTrigger), {
 												year: yearValue,
 												as: "button",
-												class: (0, vue.normalizeClass)(slotFns.value.yearCell())
+												class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.yearCell(), props.classNames?.yearCell))
 											}, null, 8, ["year", "class"])]),
 											_: 2
 										}, 1032, ["date"]);
@@ -24615,7 +25174,14 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		label: {},
 		description: {},
 		errorMessage: {},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {},
 		defaultValue: {},
 		placeholderValue: {},
 		minValue: {},
@@ -24757,7 +25323,7 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const showInsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement === "inside");
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadOnly || void 0,
@@ -24768,8 +25334,8 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				id: labelId.value,
 				for: fieldId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$5, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$6)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateFieldRoot), {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$5, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$6)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -24790,7 +25356,7 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"aria-describedby": ariaDescribedBy.value,
 				"aria-required": __props.isRequired || void 0,
 				"aria-invalid": __props.isInvalid || void 0,
-				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? effectiveFilled.value || void 0 : void 0,
 				"data-focused": isFocused.value || void 0,
 				"data-invalid": __props.isInvalid || void 0,
@@ -24803,21 +25369,21 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						id: labelId.value,
 						for: fieldId.value,
-						class: (0, vue.normalizeClass)(slotFns.value.label())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
 					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$2, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_4$3)) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
-						class: (0, vue.normalizeClass)(slotFns.value.startContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent)),
 						"data-slot": "start-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)(slotFns.value.segmentList()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segmentList(), props.classNames?.segmentList)),
 						"data-slot": "segment-list"
 					}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(segments, (segment, _i) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.DateFieldInput), {
 							key: _i,
 							part: segment.part,
-							class: (0, vue.normalizeClass)(slotFns.value.segment())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segment(), props.classNames?.segment))
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(segment.value), 1)]),
 							_: 2
@@ -24825,7 +25391,7 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}), 128))], 2),
 					_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 2,
-						class: (0, vue.normalizeClass)(slotFns.value.endContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent)),
 						"data-slot": "end-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true)
 				]),
@@ -24856,16 +25422,16 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-readonly"
 			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage)),
 				role: "alert"
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_6$2)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7$2)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$7);
 		};
 	}
@@ -24925,7 +25491,14 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		label: {},
 		description: {},
 		errorMessage: {},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {},
 		defaultValue: {},
 		placeholderValue: {},
 		minValue: {},
@@ -25067,7 +25640,7 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const showInsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement === "inside");
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadOnly || void 0,
@@ -25079,8 +25652,8 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				id: labelId.value,
 				for: fieldId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$4, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$5)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateRangeFieldRoot), {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$4, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$5)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateRangeFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -25101,7 +25674,7 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"aria-describedby": ariaDescribedBy.value,
 				"aria-required": __props.isRequired || void 0,
 				"aria-invalid": __props.isInvalid || void 0,
-				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? effectiveFilled.value || void 0 : void 0,
 				"data-focused": isFocused.value || void 0,
 				"data-invalid": __props.isInvalid || void 0,
@@ -25114,15 +25687,15 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						id: labelId.value,
 						for: fieldId.value,
-						class: (0, vue.normalizeClass)(slotFns.value.label())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
 					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$1, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_4$2)) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
-						class: (0, vue.normalizeClass)(slotFns.value.startContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent)),
 						"data-slot": "start-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)(slotFns.value.segmentList()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segmentList(), props.classNames?.segmentList)),
 						"data-slot": "segment-list",
 						"data-type": "start"
 					}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(segments.start, (segment, _i) => {
@@ -25130,19 +25703,19 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							key: `start-${_i}`,
 							part: segment.part,
 							type: "start",
-							class: (0, vue.normalizeClass)(slotFns.value.segment())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segment(), props.classNames?.segment))
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(segment.value), 1)]),
 							_: 2
 						}, 1032, ["part", "class"]);
 					}), 128))], 2),
 					(0, vue.createElementVNode)("span", {
-						class: (0, vue.normalizeClass)(slotFns.value.separator()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.separator(), props.classNames?.separator)),
 						"aria-hidden": "true",
 						"data-slot": "separator"
 					}, "–", 2),
 					(0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)(slotFns.value.segmentList()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segmentList(), props.classNames?.segmentList)),
 						"data-slot": "segment-list",
 						"data-type": "end"
 					}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(segments.end, (segment, _i) => {
@@ -25150,7 +25723,7 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							key: `end-${_i}`,
 							part: segment.part,
 							type: "end",
-							class: (0, vue.normalizeClass)(slotFns.value.segment())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segment(), props.classNames?.segment))
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(segment.value), 1)]),
 							_: 2
@@ -25158,7 +25731,7 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}), 128))], 2),
 					_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 2,
-						class: (0, vue.normalizeClass)(slotFns.value.endContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent)),
 						"data-slot": "end-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true)
 				]),
@@ -25189,16 +25762,16 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-readonly"
 			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage)),
 				role: "alert"
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_6$1)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7$1)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$6);
 		};
 	}
@@ -25258,7 +25831,14 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		label: {},
 		description: {},
 		errorMessage: {},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {},
 		defaultValue: {},
 		placeholderValue: {},
 		minValue: {},
@@ -25401,7 +25981,7 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const showInsideLabel = (0, vue.computed)(() => hasLabel.value && props.labelPlacement === "inside");
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadOnly || void 0,
@@ -25412,8 +25992,8 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				id: labelId.value,
 				for: fieldId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.label())
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$3, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$4)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(slotFns.value.mainWrapper()) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TimeFieldRoot), {
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$3, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$4)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TimeFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -25434,7 +26014,7 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"aria-describedby": ariaDescribedBy.value,
 				"aria-required": __props.isRequired || void 0,
 				"aria-invalid": __props.isInvalid || void 0,
-				class: (0, vue.normalizeClass)(slotFns.value.inputWrapper()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? effectiveFilled.value || void 0 : void 0,
 				"data-focused": isFocused.value || void 0,
 				"data-invalid": __props.isInvalid || void 0,
@@ -25447,21 +26027,21 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						id: labelId.value,
 						for: fieldId.value,
-						class: (0, vue.normalizeClass)(slotFns.value.label())
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
 					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_4$1)) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
-						class: (0, vue.normalizeClass)(slotFns.value.startContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent)),
 						"data-slot": "start-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "startContent")], 2)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)(slotFns.value.segmentList()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segmentList(), props.classNames?.segmentList)),
 						"data-slot": "segment-list"
 					}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(segments, (segment, _i) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TimeFieldInput), {
 							key: _i,
 							part: segment.part,
-							class: (0, vue.normalizeClass)(slotFns.value.segment())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.segment(), props.classNames?.segment))
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(segment.value), 1)]),
 							_: 2
@@ -25469,7 +26049,7 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}), 128))], 2),
 					_ctx.$slots.endContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 2,
-						class: (0, vue.normalizeClass)(slotFns.value.endContent()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent)),
 						"data-slot": "end-content"
 					}, [(0, vue.renderSlot)(_ctx.$slots, "endContent")], 2)) : (0, vue.createCommentVNode)("", true)
 				]),
@@ -25500,16 +26080,16 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-readonly"
 			]), hasHelper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
-				class: (0, vue.normalizeClass)(slotFns.value.helperWrapper())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.errorMessage()),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage)),
 				role: "alert"
 			}, (0, vue.toDisplayString)(__props.errorMessage), 11, _hoisted_6)) : showDescription.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: (0, vue.normalizeClass)(slotFns.value.description())
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$5);
 		};
 	}
@@ -25574,7 +26154,14 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {},
@@ -25619,7 +26206,7 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				readonly: __props.isReadOnly,
 				name: __props.name,
 				"number-of-months": __props.visibleMonths,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-slot": "date-picker"
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(DateInput_default, {
@@ -25648,12 +26235,12 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"hide-time-zone": __props.hideTimeZone
 				}, {
 					endContent: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerTrigger), {
-						class: (0, vue.normalizeClass)(slotFns.value.trigger()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.trigger(), props.classNames?.trigger)),
 						"aria-label": "Open date picker",
 						onMousedown: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"]))
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectorIcon", {}, () => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-							class: (0, vue.normalizeClass)(slotFns.value.triggerIndicator()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.triggerIndicator(), props.classNames?.triggerIndicator)),
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "16",
 							height: "16",
@@ -25720,7 +26307,7 @@ var DatePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"name",
 					"hide-time-zone"
 				]), (0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerContent), {
-					class: (0, vue.normalizeClass)(slotFns.value.popover()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
 					"data-slot": "popover",
 					"side-offset": 8
 				}, {
@@ -25839,7 +26426,14 @@ var DateRangePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {},
@@ -25879,7 +26473,7 @@ var DateRangePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				readonly: __props.isReadOnly,
 				name: __props.name,
 				"number-of-months": __props.visibleMonths,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-slot": "date-range-picker"
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(DateRangeField_default, {
@@ -25908,12 +26502,12 @@ var DateRangePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"hide-time-zone": __props.hideTimeZone
 				}, {
 					endContent: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateRangePickerTrigger), {
-						class: (0, vue.normalizeClass)(slotFns.value.trigger()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.trigger(), props.classNames?.trigger)),
 						"aria-label": "Open date range picker",
 						onMousedown: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"]))
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectorIcon", {}, () => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-							class: (0, vue.normalizeClass)(slotFns.value.triggerIndicator()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.triggerIndicator(), props.classNames?.triggerIndicator)),
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "16",
 							height: "16",
@@ -25980,7 +26574,7 @@ var DateRangePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"name",
 					"hide-time-zone"
 				]), (0, vue.createVNode)((0, vue.unref)(reka_ui.DateRangePickerContent), {
-					class: (0, vue.normalizeClass)(slotFns.value.popover()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
 					"data-slot": "popover",
 					"side-offset": 8
 				}, {
@@ -26242,7 +26836,14 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		name: {},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {},
 		granularity: { default: "minute" },
 		hourCycle: {},
 		hideTimeZone: {
@@ -26365,7 +26966,7 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				disabled: __props.isDisabled,
 				readonly: __props.isReadOnly,
 				name: __props.name,
-				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class)),
+				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-slot": "date-time-picker"
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(DateInput_default, {
@@ -26391,12 +26992,12 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"onUpdate:modelValue": onInputChange
 				}, {
 					endContent: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerTrigger), {
-						class: (0, vue.normalizeClass)(slotFns.value.trigger()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.trigger(), props.classNames?.trigger)),
 						"aria-label": "Open date time picker",
 						onMousedown: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"]))
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "selectorIcon", {}, () => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
-							class: (0, vue.normalizeClass)(slotFns.value.triggerIndicator()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.triggerIndicator(), props.classNames?.triggerIndicator)),
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "16",
 							height: "16",
@@ -26460,17 +27061,17 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"name",
 					"hide-time-zone"
 				]), (0, vue.createVNode)((0, vue.unref)(reka_ui.DatePickerContent), {
-					class: (0, vue.normalizeClass)(slotFns.value.popover()),
+					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
 					"data-slot": "popover",
 					"side-offset": 8
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)(slotFns.value.stepHeader()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.stepHeader(), props.classNames?.stepHeader)),
 						"data-slot": "step-header"
 					}, [
 						(0, vue.createElementVNode)("button", {
 							type: "button",
-							class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 							"data-hidden": activeStep.value === "date" ? "true" : void 0,
 							"aria-label": "Previous step",
 							"data-slot": "back-button",
@@ -26486,19 +27087,19 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"stroke-linejoin": "round",
 							"aria-hidden": "true"
 						}, [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" })], -1)])], 10, _hoisted_1$3),
-						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(slotFns.value.stepTitle()) }, (0, vue.toDisplayString)(STEP_TITLES[activeStep.value]), 3),
+						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.stepTitle(), props.classNames?.stepTitle)) }, (0, vue.toDisplayString)(STEP_TITLES[activeStep.value]), 3),
 						(0, vue.createElementVNode)("button", {
 							type: "button",
-							class: (0, vue.normalizeClass)(slotFns.value.navButton()),
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 							"aria-label": activeStep.value === "time" ? "Done" : "Next step",
 							"data-slot": "forward-button",
 							onClick: goForward
 						}, [activeStep.value === "time" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 							key: 0,
-							class: (0, vue.normalizeClass)(slotFns.value.doneLabel())
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.doneLabel(), props.classNames?.doneLabel))
 						}, "Done", 2)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$2, [..._cache[6] || (_cache[6] = [(0, vue.createElementVNode)("polyline", { points: "9 18 15 12 9 6" }, null, -1)])]))], 10, _hoisted_2$2)
 					], 2), (0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)(slotFns.value.panelWrap()),
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.panelWrap(), props.classNames?.panelWrap)),
 						style: { "overflow": "hidden" }
 					}, [(0, vue.createVNode)((0, vue.unref)(AnimatePresence_default), { mode: "popLayout" }, {
 						default: (0, vue.withCtx)(() => [activeStep.value === "date" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(motion).div, {