@vifui/core 0.4.0-alpha.6 → 0.6.0-alpha.8

package/dist/components/avatar/avatar-fallback.vue.d.ts

@@ -1,7 +1,7 @@
 import { type AvatarFallbackProps as RekaAvatarFallbackProps } from "reka-ui";
-import { type Slot } from "vue";
+import { type HTMLAttributes, type Slot } from "vue";
 export interface AvatarFallbackProps extends RekaAvatarFallbackProps {
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarFallbackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarFallbackProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default: Slot;

package/dist/components/avatar/avatar-fallback.vue.js

@@ -5,7 +5,7 @@ import { avatarVariants } from './avatar.styles.js';
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "avatar-fallback",
   props: {
-    class: { type: String, required: false },
+    class: { type: null, required: false },
     delayMs: { type: Number, required: false },
     asChild: { type: Boolean, required: false },
     as: { type: null, required: false }

package/dist/components/avatar/avatar-group.vue.d.ts

@@ -1,7 +1,7 @@
 import { type PrimitiveProps } from "reka-ui";
-import { type Slot } from "vue";
+import { type HTMLAttributes, type Slot } from "vue";
 export interface AvatarGroupProps extends PrimitiveProps {
-    class?: string;
+    class?: HTMLAttributes["class"];
     /**
      * Limits the number of avatars displayed The rest is displayed as an `+n` avatar
      */

package/dist/components/avatar/avatar-group.vue.js

@@ -7,7 +7,7 @@ import _sfc_main$2 from './avatar-fallback.vue.js';
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "avatar-group",
   props: {
-    class: { type: String, required: false },
+    class: { type: null, required: false },
     max: { type: Number, required: false },
     asChild: { type: Boolean, required: false },
     as: { type: null, required: false, default: "div" }

package/dist/components/avatar/avatar-image.vue.d.ts

@@ -1,7 +1,7 @@
 import { type AvatarImageProps as RekaAvatarImageProps } from "reka-ui";
-import { type Slot } from "vue";
+import { type HTMLAttributes, type Slot } from "vue";
 export interface AvatarImageProps extends RekaAvatarImageProps {
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default: Slot;

package/dist/components/avatar/avatar-image.vue.js

@@ -5,7 +5,7 @@ import { avatarVariants } from './avatar.styles.js';
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "avatar-image",
   props: {
-    class: { type: String, required: false },
+    class: { type: null, required: false },
     src: { type: String, required: true },
     referrerPolicy: { type: null, required: false },
     crossOrigin: { type: null, required: false },

package/dist/components/avatar/avatar-root.vue.d.ts

@@ -1,6 +1,6 @@
 import { type AvatarRootProps as RekaAvatarRootProps } from "reka-ui";
 import type { Sizes, Colors } from "src/components/types/shared-types";
-import { type Slot } from "vue";
+import { type HTMLAttributes, type Slot } from "vue";
 import { type SpinnerProps } from "../spinner";
 export interface AvatarRootProps extends RekaAvatarRootProps {
     /**
@@ -13,7 +13,7 @@ export interface AvatarRootProps extends RekaAvatarRootProps {
      * @default 'flat'
      */
     variant?: "flat" | "ringed";
-    class?: string;
+    class?: HTMLAttributes["class"];
     /** The ring color of the avatar if `variant` prop is `ring`
      * @default 'neutral'
      */

package/dist/components/avatar/avatar-root.vue.js

@@ -8,7 +8,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     size: { type: String, required: false, default: "md" },
     variant: { type: String, required: false, default: "flat" },
-    class: { type: String, required: false },
+    class: { type: null, required: false },
     ringColor: { type: String, required: false, default: "neutral" },
     shape: { type: String, required: false, default: "circle" },
     loading: { type: Boolean, required: false, default: false },

package/dist/components/avatar/index.d.ts

@@ -1,9 +1,9 @@
-export { default as AvatarRoot } from './avatar-root.vue';
-export { default as AvatarImage } from './avatar-image.vue';
-export { default as AvatarFallback } from './avatar-fallback.vue';
-export { default as AvatarGroup } from './avatar-group.vue';
-export { avatarVariants, type AvatarVariantProps } from './avatar.styles';
-export type { AvatarRootProps } from './avatar-root.vue';
-export type { AvatarImageProps } from './avatar-image.vue';
-export type { AvatarFallbackProps } from './avatar-fallback.vue';
-export type { AvatarGroupProps } from './avatar-group.vue';
+export { default as AvatarRoot } from "./avatar-root.vue";
+export { default as AvatarImage } from "./avatar-image.vue";
+export { default as AvatarFallback } from "./avatar-fallback.vue";
+export { default as AvatarGroup } from "./avatar-group.vue";
+export { avatarVariants, type AvatarVariantProps } from "./avatar.styles";
+export type { AvatarRootProps } from "./avatar-root.vue";
+export type { AvatarImageProps } from "./avatar-image.vue";
+export type { AvatarFallbackProps } from "./avatar-fallback.vue";
+export type { AvatarGroupProps } from "./avatar-group.vue";

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

@@ -1,3 +1,4 @@
+import { type HTMLAttributes } from "vue";
 import type { Colors, Sizes } from "../types/shared-types";
 /**
  * Props for the VifUI Badge component.
@@ -70,7 +71,7 @@ export interface BadgeProps {
      * <Badge class="uppercase">Custom</Badge>
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
     /**
      * Icon to display before the badge content.
      * Should be a component (e.g., from lucide-vue-next or @iconify/vue).

package/dist/components/badge/badge.vue.js

@@ -16,7 +16,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     rounded: { type: Boolean, required: false, default: false },
     dot: { type: Boolean, required: false, default: false },
     removable: { type: Boolean, required: false, default: false },
-    class: { type: String, required: false },
+    class: { type: null, required: false },
     startIcon: { type: null, required: false },
     endIcon: { type: null, required: false }
   },

package/dist/components/badge/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Badge } from './badge.vue';
-export { badgeVariants, type BadgeVariantProps } from './badge.styles';
-export type { BadgeProps } from './badge.vue';
+export { default as Badge } from "./badge.vue";
+export { badgeVariants, type BadgeVariantProps } from "./badge.styles";
+export type { BadgeProps } from "./badge.vue";

package/dist/components/breadcrumb/breadcrumb-current-link.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 /**
  * Props for the VifUI BreadcrumbCurrentLink component.
  * Represents the current page/item in the breadcrumb and renders
@@ -13,7 +14,7 @@ export interface BreadcrumbCurrentLinkProps {
      * <BreadcrumbCurrentLink class="text-gray-900" />
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/breadcrumb/breadcrumb-current-link.vue.js

@@ -3,7 +3,7 @@ import { defineComponent, inject, createElementBlock, openBlock, normalizeClass,
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "breadcrumb-current-link",
   props: {
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/breadcrumb/breadcrumb-item.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 /**
  * Props for the VifUI BreadcrumbItem component.
  * Represents a single `<li>` wrapper for breadcrumb content.
@@ -12,7 +13,7 @@ export interface BreadcrumbItemProps {
      * <BreadcrumbItem class="font-medium" />
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/breadcrumb/breadcrumb-item.vue.js

@@ -3,7 +3,7 @@ import { defineComponent, inject, createElementBlock, openBlock, normalizeClass,
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "breadcrumb-item",
   props: {
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/breadcrumb/breadcrumb-link.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 /**
  * Props for the VifUI BreadcrumbLink component.
  * Renders an interactive breadcrumb link (`<a>`) when `href` is provided,
@@ -35,7 +36,7 @@ export interface BreadcrumbLinkProps {
      * <BreadcrumbLink class="text-brand-600" />
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {

package/dist/components/breadcrumb/breadcrumb-link.vue.js

@@ -5,7 +5,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     href: { type: String, required: false },
     disabled: { type: Boolean, required: false, default: false },
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/breadcrumb/breadcrumb-list.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 /**
  * Props for the VifUI BreadcrumbList component.
  * Represents the `<ol>` container that holds breadcrumb items.
@@ -12,7 +13,7 @@ export interface BreadcrumbListProps {
      * <BreadcrumbList class="gap-3" />
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/breadcrumb/breadcrumb-list.vue.js

@@ -3,7 +3,7 @@ import { defineComponent, inject, createElementBlock, openBlock, normalizeClass,
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "breadcrumb-list",
   props: {
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/breadcrumb/breadcrumb-root.vue.d.ts

@@ -1,3 +1,4 @@
+import { type HTMLAttributes } from "vue";
 import type { Colors, Sizes } from "../types/shared-types";
 /**
  * Props for the VifUI Breadcrumb root component.
@@ -58,7 +59,7 @@ export interface BreadcrumbRootProps {
      * <Breadcrumb class="mb-4 text-sm" />
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/breadcrumb/breadcrumb-root.vue.js

@@ -7,7 +7,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     size: { type: String, required: false, default: "md" },
     color: { type: String, required: false, default: "neutral" },
     align: { type: String, required: false, default: "left" },
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/breadcrumb/breadcrumb-separator.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 /**
  * Props for the VifUI BreadcrumbSeparator component.
  * Renders the visual separator between breadcrumb items, typically an icon.
@@ -23,7 +24,7 @@ export interface BreadcrumbSeparatorProps {
      * <BreadcrumbSeparator class="text-gray-400" />
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/breadcrumb/breadcrumb-separator.vue.js

@@ -5,7 +5,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "breadcrumb-separator",
   props: {
     icon: { type: String, required: false, default: "lucide:chevron-right" },
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/breadcrumb/index.d.ts

@@ -4,7 +4,7 @@ export { default as BreadcrumbItem } from "./breadcrumb-item.vue";
 export { default as BreadcrumbLink } from "./breadcrumb-link.vue";
 export { default as BreadcrumbCurrentLink } from "./breadcrumb-current-link.vue";
 export { default as BreadcrumbSeparator } from "./breadcrumb-separator.vue";
-export { breadcrumbVariants, type BreadcrumbVariantProps } from "./breadcrumb.styles";
+export { breadcrumbVariants, type BreadcrumbVariantProps, } from "./breadcrumb.styles";
 export type { BreadcrumbRootProps } from "./breadcrumb-root.vue";
 export type { BreadcrumbListProps } from "./breadcrumb-list.vue";
 export type { BreadcrumbItemProps } from "./breadcrumb-item.vue";

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

@@ -1,3 +1,4 @@
+import { type HTMLAttributes } from "vue";
 import type { Colors, Sizes, Spinners, Variants } from "../types/shared-types";
 /**
  * Props for the VifUI Button component.
@@ -51,7 +52,7 @@ export interface ButtonProps {
      * <Button class="rounded-full">Rounded Button</Button>
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
     /**
      * Disables the button, preventing interaction.
      * Also sets `aria-disabled` for accessibility.
@@ -90,7 +91,7 @@ export interface ButtonProps {
      *
      * @example
      * ```vue
-     * <Button href="https://veroui.com" target="_blank">Visit Site</Button>
+     * <Button href="https://vif.com" target="_blank">Visit Site</Button>
      * ```
      */
     href?: string;

package/dist/components/button/button.vue.js

@@ -14,7 +14,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     color: { type: String, required: false, default: "brand" },
     size: { type: String, required: false, default: "md" },
     isIconOnly: { type: Boolean, required: false, default: false },
-    class: { type: String, required: false },
+    class: { type: null, required: false },
     disabled: { type: Boolean, required: false, default: false },
     isPending: { type: Boolean, required: false, default: false },
     type: { type: String, required: false, default: "button" },
@@ -63,16 +63,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const isDisabled = computed(() => props.disabled || props.isPending);
     const componentTag = computed(() => props.href ? "a" : "button");
     const spinnerSize = computed(() => props.size || "sm");
-    const spinnerContainerSize = computed(() => {
-      const sizeMap = {
-        xs: "h-3.5 w-3.5",
-        sm: "h-3.5 w-3.5",
-        md: "h-4 w-4",
-        lg: "h-5 w-5",
-        xl: "h-5 w-5"
-      };
-      return sizeMap[props.size || "md"];
-    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(componentTag.value), {
         ref_key: "buttonRef",
@@ -90,21 +80,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           __props.isPending ? (openBlock(), createElementBlock("span", _hoisted_1, [
-            createElementVNode(
-              "div",
-              {
-                class: normalizeClass(spinnerContainerSize.value)
-              },
-              [
-                createVNode(unref(_sfc_main$1), {
-                  size: spinnerSize.value,
-                  type: __props.spinnerType,
-                  color: "current"
-                }, null, 8, ["size", "type"])
-              ],
-              2
-              /* CLASS */
-            )
+            createVNode(unref(_sfc_main$1), {
+              size: spinnerSize.value,
+              type: __props.spinnerType,
+              color: "current"
+            }, null, 8, ["size", "type"])
           ])) : createCommentVNode("v-if", true),
           createElementVNode(
             "span",

package/dist/components/button/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Button } from './button.vue';
-export { buttonVariants, type ButtonVariantProps } from './button.styles';
-export type { ButtonProps } from './button.vue';
+export { default as Button } from "./button.vue";
+export { buttonVariants, type ButtonVariantProps } from "./button.styles";
+export type { ButtonProps } from "./button.vue";

package/dist/components/card/card-body.vue.d.ts

@@ -1,3 +1,4 @@
+import { type HTMLAttributes } from "vue";
 /**
  * Props for the VifUI CardBody component.
  * Wraps the main content area of a card, typically used for
@@ -13,7 +14,7 @@ export interface CardBodyProps {
      * <CardBody class="p-4 text-gray-700" />
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/card/card-body.vue.js

@@ -3,7 +3,7 @@ import { defineComponent, inject, createElementBlock, openBlock, normalizeClass,
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "card-body",
   props: {
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/card/card-footer.vue.d.ts

@@ -1,3 +1,4 @@
+import { type HTMLAttributes } from "vue";
 /**
  * Props for the VifUI CardFooter component.
  * Wraps the bottom section of a card, typically used for
@@ -13,7 +14,7 @@ export interface CardFooterProps {
      * <CardFooter class="flex justify-end p-4 gap-2" />
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/card/card-footer.vue.js

@@ -3,7 +3,7 @@ import { defineComponent, inject, createElementBlock, openBlock, normalizeClass,
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "card-footer",
   props: {
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/card/card-header.vue.d.ts

@@ -1,3 +1,4 @@
+import { type HTMLAttributes } from "vue";
 /**
  * Props for the VifUI CardHeader component.
  * Wraps the top section of a card, typically used for titles,
@@ -13,7 +14,7 @@ export interface CardHeaderProps {
      * <CardHeader class="flex justify-between items-center p-4" />
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/card/card-header.vue.js

@@ -3,7 +3,7 @@ import { defineComponent, inject, createElementBlock, openBlock, normalizeClass,
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "card-header",
   props: {
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/card/card-media.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 /**
  * Props for the VifUI CardMedia component.
  * Displays media content Displays media content (images or videos) within a card.
@@ -24,7 +25,7 @@ export interface CardMediaProps {
      */
     objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
     loading?: "lazy" | "eager";
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/card/card-media.vue.js

@@ -9,7 +9,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     ratio: { type: String, required: false, default: "auto" },
     objectFit: { type: String, required: false, default: "cover" },
     loading: { type: String, required: false, default: "lazy" },
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/card/card-root.vue.d.ts

@@ -1,3 +1,4 @@
+import { type HTMLAttributes } from "vue";
 import type { Colors, Sizes } from "../types/shared-types";
 /**
  * Props for the VifUI Card component.
@@ -92,7 +93,7 @@ export interface CardRootProps {
      * <Card class="rounded-xl p-6" />
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
     /**
      * Make entire card clickable
      */

package/dist/components/card/card-root.vue.js

@@ -11,7 +11,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     fullHeight: { type: Boolean, required: false, default: false },
     disabled: { type: Boolean, required: false, default: false },
     loading: { type: Boolean, required: false, default: false },
-    class: { type: String, required: false },
+    class: { type: null, required: false },
     href: { type: String, required: false },
     target: { type: String, required: false }
   },

package/dist/components/checkbox/checkbox-group-item.vue.d.ts

@@ -1,3 +1,4 @@
+import { type HTMLAttributes } from "vue";
 /**
  * Props for the VifUI CheckboxGroupItem component.
  * Wrapper for individual checkbox items within a CheckboxGroup.
@@ -6,7 +7,7 @@ export interface CheckboxGroupItemProps {
     /**
      * Custom class names for the item wrapper.
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/checkbox/checkbox-group-item.vue.js

@@ -3,7 +3,7 @@ import { defineComponent, inject, createElementBlock, openBlock, normalizeClass,
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "checkbox-group-item",
   props: {
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/checkbox/checkbox-group.vue.d.ts

@@ -1,4 +1,5 @@
 import { type CheckboxGroupRootProps as RekaCheckboxGroupRootProps } from "reka-ui";
+import { type HTMLAttributes } from "vue";
 /**
  * Props for the VifUI CheckboxGroup component.
  * Wraps Reka UI's CheckboxGroupRoot for managing multiple checkboxes.
@@ -12,7 +13,7 @@ export interface CheckboxGroupProps extends RekaCheckboxGroupRootProps {
     /**
      * Custom class names for the group wrapper.
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {

package/dist/components/checkbox/checkbox-group.vue.js

@@ -6,7 +6,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "checkbox-group",
   props: {
     orientation: { type: String, required: false, default: "vertical" },
-    class: { type: String, required: false },
+    class: { type: null, required: false },
     defaultValue: { type: Array, required: false },
     modelValue: { type: Array, required: false },
     rovingFocus: { type: Boolean, required: false },

package/dist/components/checkbox/checkbox-indicator.vue.d.ts

@@ -1,4 +1,5 @@
 import { type CheckboxIndicatorProps as RekaCheckboxIndicatorProps } from "reka-ui";
+import { type HTMLAttributes } from "vue";
 /**
  * Props for the VifUI CheckboxIndicator component.
  * Wraps Reka UI's CheckboxIndicator with icon support.
@@ -17,7 +18,7 @@ export interface CheckboxIndicatorProps extends RekaCheckboxIndicatorProps {
     /**
      * Custom class names for the indicator wrapper.
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_5: {
     checkedIcon: string;

package/dist/components/checkbox/checkbox-indicator.vue.js

@@ -7,7 +7,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     checkedIcon: { type: String, required: false, default: "lucide:check" },
     indeterminateIcon: { type: String, required: false, default: "lucide:minus" },
-    class: { type: String, required: false },
+    class: { type: null, required: false },
     forceMount: { type: Boolean, required: false },
     asChild: { type: Boolean, required: false },
     as: { type: null, required: false, default: "span" }

package/dist/components/checkbox/checkbox-label.vue.d.ts

@@ -1,3 +1,4 @@
+import { type HTMLAttributes } from "vue";
 /**
  * Props for the VifUI CheckboxLabel component.
  * Provides accessible label for checkbox.
@@ -11,7 +12,7 @@ export interface CheckboxLabelProps {
     /**
      * Custom class names for the label.
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/checkbox/checkbox-label.vue.js

@@ -5,7 +5,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "checkbox-label",
   props: {
     for: { type: String, required: false },
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/checkbox/checkbox-root.vue.d.ts

@@ -1,4 +1,5 @@
 import { type CheckboxRootProps as RekaCheckboxRootProps } from "reka-ui";
+import { type HTMLAttributes } from "vue";
 import type { Colors, Sizes } from "../types/shared-types";
 /**
  * Props for the VifUI CheckboxRoot component.
@@ -18,7 +19,7 @@ export interface CheckboxRootProps extends RekaCheckboxRootProps {
     /**
      * Custom class names for the checkbox wrapper.
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {