@una-ui/nuxt 0.15.0-beta.1 → 0.16.0-beta.1

package/dist/module.d.mts

@@ -1,12 +1,9 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { UnaSettings } from '../dist/runtime/types/index.js';
 
-interface UnaOptions {
-    primary?: string;
-    gray?: string;
-}
 declare module '@nuxt/schema' {
     interface AppConfigInput {
-        una?: UnaOptions;
+        una?: UnaSettings;
     }
 }
 interface ModuleOptions {
@@ -30,6 +27,6 @@ interface ModuleOptions {
      */
     dev: boolean;
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -1,12 +1,9 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { UnaSettings } from '../dist/runtime/types/index.js';
 
-interface UnaOptions {
-    primary?: string;
-    gray?: string;
-}
 declare module '@nuxt/schema' {
     interface AppConfigInput {
-        una?: UnaOptions;
+        una?: UnaSettings;
     }
 }
 interface ModuleOptions {
@@ -30,6 +27,6 @@ interface ModuleOptions {
      */
     dev: boolean;
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.15.0-beta.1",
+  "version": "0.16.0-beta.1",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },

package/dist/module.mjs

@@ -7,7 +7,7 @@ import '@una-ui/preset/prefixes';
 import '@una-ui/extractor-vue-script';
 
 const name = "@una-ui/nuxt";
-const version = "0.15.0-beta.1";
+const version = "0.16.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {
@@ -29,7 +29,9 @@ const module = defineNuxtModule({
     nuxt.options.css.unshift("@una-ui/preset/una.css");
     nuxt.options.appConfig.una = {
       primary: "yellow",
-      gray: "stone"
+      gray: "stone",
+      radius: 0.5,
+      fontSize: 16
     };
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
@@ -62,6 +64,13 @@ const module = defineNuxtModule({
       watch: nuxt.options.dev,
       priority: 10
     });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components/elements", "popover"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev,
+      priority: 10
+    });
     addComponentsDir({
       path: resolve(runtimeDir, "components", "forms"),
       prefix: options.prefix,

package/dist/runtime/components/data/table/Table.vue

@@ -73,8 +73,8 @@ const columnsWithMisc = computed(() => {
           accessorKey: 'selection',
           header: props.enableMultiRowSelection
             ? ({ table }: any) => h(Checkbox, {
-                'modelValue': table.getIsAllPageRowsSelected() ?? false,
-                'onUpdate:modelValue': (value: boolean) => {
+                'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+                'onUpdate:checked': (value: boolean) => {
                   table.toggleAllPageRowsSelected(!!value)
                   emit('selectAll', table.getRowModel().rows)
                 },
@@ -82,8 +82,8 @@ const columnsWithMisc = computed(() => {
               })
             : '',
           cell: ({ row }: any) => h(Checkbox, {
-            'modelValue': row.getIsSelected() ?? false,
-            'onUpdate:modelValue': (value: boolean) => {
+            'checked': row.getIsSelected() ?? false,
+            'onUpdate:checked': (value: boolean) => {
               row.toggleSelected(!!value)
               emit('select', row)
             },

package/dist/runtime/components/elements/Accordion.vue

@@ -80,7 +80,7 @@ const isBaseVariant = computed(() => props.btn?.includes('~'))
       una?.accordion,
     ]"
   >
-    <DefineTemplate v-slot="{ item, close, index, open }">
+    <DefineTemplate v-slot="{ item, close, index, open }: any">
       <slot
         :name="item.content ? 'content' : index"
         :item="item" :index="index" :open="open" :close="close"

package/dist/runtime/components/elements/Label.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Label } from 'radix-vue'
+import { cn } from '../../utils'
+import type { NLabelProps } from '../../types'
+
+const props = defineProps<NLabelProps>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'label-base',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

package/dist/runtime/components/elements/Link.vue.d.ts

@@ -11,7 +11,309 @@ declare const _default: import("vue").DefineComponent<{}, {
         isActive: boolean;
         isExactActive: boolean;
     }) => any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}>, {} | {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {} | {
     [x: string]: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}>;
 export default _default;
+declare module 'vue' {
+    interface GlobalComponents {
+    }
+    interface GlobalDirectives {
+    }
+}
+declare global {
+    const __VLS_intrinsicElements: __VLS_IntrinsicElements;
+    const __VLS_directiveBindingRestFields: {
+        instance: null;
+        oldValue: null;
+        modifiers: any;
+        dir: any;
+    };
+    const __VLS_unref: typeof import('vue').unref;
+    const __VLS_nativeElements: {
+        a: HTMLAnchorElement;
+        abbr: HTMLElement;
+        address: HTMLElement;
+        area: HTMLAreaElement;
+        article: HTMLElement;
+        aside: HTMLElement;
+        audio: HTMLAudioElement;
+        b: HTMLElement;
+        base: HTMLBaseElement;
+        bdi: HTMLElement;
+        bdo: HTMLElement;
+        blockquote: HTMLQuoteElement;
+        body: HTMLBodyElement;
+        br: HTMLBRElement;
+        button: HTMLButtonElement;
+        canvas: HTMLCanvasElement;
+        caption: HTMLTableCaptionElement;
+        cite: HTMLElement;
+        code: HTMLElement;
+        col: HTMLTableColElement;
+        colgroup: HTMLTableColElement;
+        data: HTMLDataElement;
+        datalist: HTMLDataListElement;
+        dd: HTMLElement;
+        del: HTMLModElement;
+        details: HTMLDetailsElement;
+        dfn: HTMLElement;
+        dialog: HTMLDialogElement;
+        div: HTMLDivElement;
+        dl: HTMLDListElement;
+        dt: HTMLElement;
+        em: HTMLElement;
+        embed: HTMLEmbedElement;
+        fieldset: HTMLFieldSetElement;
+        figcaption: HTMLElement;
+        figure: HTMLElement;
+        footer: HTMLElement;
+        form: HTMLFormElement;
+        h1: HTMLHeadingElement;
+        h2: HTMLHeadingElement;
+        h3: HTMLHeadingElement;
+        h4: HTMLHeadingElement;
+        h5: HTMLHeadingElement;
+        h6: HTMLHeadingElement;
+        head: HTMLHeadElement;
+        header: HTMLElement;
+        hgroup: HTMLElement;
+        hr: HTMLHRElement;
+        html: HTMLHtmlElement;
+        i: HTMLElement;
+        iframe: HTMLIFrameElement;
+        img: HTMLImageElement;
+        input: HTMLInputElement;
+        ins: HTMLModElement;
+        kbd: HTMLElement;
+        label: HTMLLabelElement;
+        legend: HTMLLegendElement;
+        li: HTMLLIElement;
+        link: HTMLLinkElement;
+        main: HTMLElement;
+        map: HTMLMapElement;
+        mark: HTMLElement;
+        menu: HTMLMenuElement;
+        meta: HTMLMetaElement;
+        meter: HTMLMeterElement;
+        nav: HTMLElement;
+        noscript: HTMLElement;
+        object: HTMLObjectElement;
+        ol: HTMLOListElement;
+        optgroup: HTMLOptGroupElement;
+        option: HTMLOptionElement;
+        output: HTMLOutputElement;
+        p: HTMLParagraphElement;
+        picture: HTMLPictureElement;
+        pre: HTMLPreElement;
+        progress: HTMLProgressElement;
+        q: HTMLQuoteElement;
+        rp: HTMLElement;
+        rt: HTMLElement;
+        ruby: HTMLElement;
+        s: HTMLElement;
+        samp: HTMLElement;
+        script: HTMLScriptElement;
+        search: HTMLElement;
+        section: HTMLElement;
+        select: HTMLSelectElement;
+        slot: HTMLSlotElement;
+        small: HTMLElement;
+        source: HTMLSourceElement;
+        span: HTMLSpanElement;
+        strong: HTMLElement;
+        style: HTMLStyleElement;
+        sub: HTMLElement;
+        summary: HTMLElement;
+        sup: HTMLElement;
+        table: HTMLTableElement;
+        tbody: HTMLTableSectionElement;
+        td: HTMLTableCellElement;
+        template: HTMLTemplateElement;
+        textarea: HTMLTextAreaElement;
+        tfoot: HTMLTableSectionElement;
+        th: HTMLTableCellElement;
+        thead: HTMLTableSectionElement;
+        time: HTMLTimeElement;
+        title: HTMLTitleElement;
+        tr: HTMLTableRowElement;
+        track: HTMLTrackElement;
+        u: HTMLElement;
+        ul: HTMLUListElement;
+        var: HTMLElement;
+        video: HTMLVideoElement;
+        wbr: HTMLElement;
+        animate: SVGAnimateElement;
+        animateMotion: SVGAnimateMotionElement;
+        animateTransform: SVGAnimateTransformElement;
+        circle: SVGCircleElement;
+        clipPath: SVGClipPathElement;
+        defs: SVGDefsElement;
+        desc: SVGDescElement;
+        ellipse: SVGEllipseElement;
+        feBlend: SVGFEBlendElement;
+        feColorMatrix: SVGFEColorMatrixElement;
+        feComponentTransfer: SVGFEComponentTransferElement;
+        feComposite: SVGFECompositeElement;
+        feConvolveMatrix: SVGFEConvolveMatrixElement;
+        feDiffuseLighting: SVGFEDiffuseLightingElement;
+        feDisplacementMap: SVGFEDisplacementMapElement;
+        feDistantLight: SVGFEDistantLightElement;
+        feDropShadow: SVGFEDropShadowElement;
+        feFlood: SVGFEFloodElement;
+        feFuncA: SVGFEFuncAElement;
+        feFuncB: SVGFEFuncBElement;
+        feFuncG: SVGFEFuncGElement;
+        feFuncR: SVGFEFuncRElement;
+        feGaussianBlur: SVGFEGaussianBlurElement;
+        feImage: SVGFEImageElement;
+        feMerge: SVGFEMergeElement;
+        feMergeNode: SVGFEMergeNodeElement;
+        feMorphology: SVGFEMorphologyElement;
+        feOffset: SVGFEOffsetElement;
+        fePointLight: SVGFEPointLightElement;
+        feSpecularLighting: SVGFESpecularLightingElement;
+        feSpotLight: SVGFESpotLightElement;
+        feTile: SVGFETileElement;
+        feTurbulence: SVGFETurbulenceElement;
+        filter: SVGFilterElement;
+        foreignObject: SVGForeignObjectElement;
+        g: SVGGElement;
+        image: SVGImageElement;
+        line: SVGLineElement;
+        linearGradient: SVGLinearGradientElement;
+        marker: SVGMarkerElement;
+        mask: SVGMaskElement;
+        metadata: SVGMetadataElement;
+        mpath: SVGMPathElement;
+        path: SVGPathElement;
+        pattern: SVGPatternElement;
+        polygon: SVGPolygonElement;
+        polyline: SVGPolylineElement;
+        radialGradient: SVGRadialGradientElement;
+        rect: SVGRectElement;
+        set: SVGSetElement;
+        stop: SVGStopElement;
+        svg: SVGSVGElement;
+        switch: SVGSwitchElement;
+        symbol: SVGSymbolElement;
+        text: SVGTextElement;
+        textPath: SVGTextPathElement;
+        tspan: SVGTSpanElement;
+        use: SVGUseElement;
+        view: SVGViewElement;
+    };
+    type __VLS_IntrinsicElements = import('vue/jsx-runtime').JSX.IntrinsicElements;
+    type __VLS_Element = import('vue/jsx-runtime').JSX.Element;
+    type __VLS_GlobalComponents = import('vue').GlobalComponents & Pick<typeof import('vue'), 'Transition' | 'TransitionGroup' | 'KeepAlive' | 'Suspense' | 'Teleport'>;
+    type __VLS_GlobalDirectives = import('vue').GlobalDirectives;
+    type __VLS_IsAny<T> = 0 extends 1 & T ? true : false;
+    type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
+    type __VLS_unknownDirective = (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void;
+    type __VLS_WithComponent<N0 extends string, LocalComponents, N1 extends string, N2 extends string, N3 extends string> = N1 extends keyof LocalComponents ? N1 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
+        [K in N0]: LocalComponents[N1];
+    } : N2 extends keyof LocalComponents ? N2 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
+        [K in N0]: LocalComponents[N2];
+    } : N3 extends keyof LocalComponents ? N3 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
+        [K in N0]: LocalComponents[N3];
+    } : N1 extends keyof __VLS_GlobalComponents ? N1 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
+        [K in N0]: __VLS_GlobalComponents[N1];
+    } : N2 extends keyof __VLS_GlobalComponents ? N2 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
+        [K in N0]: __VLS_GlobalComponents[N2];
+    } : N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
+        [K in N0]: __VLS_GlobalComponents[N3];
+    } : {
+        [K in N0]: unknown;
+    };
+    type __VLS_FunctionalComponentProps<T, K> = '__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
+        __ctx?: {
+            props?: infer P;
+        };
+    } ? NonNullable<P> : never : T extends (props: infer P, ...args: any) => any ? P : {};
+    type __VLS_IsFunction<T, K> = K extends keyof T ? __VLS_IsAny<T[K]> extends false ? unknown extends T[K] ? false : true : false : false;
+    type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never;
+    type __VLS_OverloadUnionInner<T, U = unknown> = U & T extends (...args: infer A) => infer R ? U extends T ? never : __VLS_OverloadUnionInner<T, Pick<T, keyof T> & U & ((...args: A) => R)> | ((...args: A) => R) : never;
+    type __VLS_OverloadUnion<T> = Exclude<__VLS_OverloadUnionInner<(() => never) & T>, T extends () => never ? never : () => never>;
+    type __VLS_ConstructorOverloads<T> = __VLS_OverloadUnion<T> extends infer F ? F extends (event: infer E, ...args: infer A) => any ? {
+        [K in E & string]: (...args: A) => void;
+    } : never : never;
+    type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<__VLS_UnionToIntersection<__VLS_ConstructorOverloads<T> & {
+        [K in keyof T]: T[K] extends any[] ? {
+            (...args: T[K]): void;
+        } : never;
+    }>>;
+    type __VLS_PrettifyGlobal<T> = {
+        [K in keyof T]: T[K];
+    } & {};
+    function __VLS_getVForSourceType(source: number): [number, number, number][];
+    function __VLS_getVForSourceType(source: string): [string, number, number][];
+    function __VLS_getVForSourceType<T extends any[]>(source: T): [
+        item: T[number],
+        key: number,
+        index: number
+    ][];
+    function __VLS_getVForSourceType<T extends {
+        [Symbol.iterator](): Iterator<any>;
+    }>(source: T): [
+        item: T extends {
+            [Symbol.iterator](): Iterator<infer T1>;
+        } ? T1 : never,
+        key: number,
+        index: undefined
+    ][];
+    function __VLS_getVForSourceType<T extends number | {
+        [Symbol.iterator](): Iterator<any>;
+    }>(source: T): [
+        item: number | (Exclude<T, number> extends {
+            [Symbol.iterator](): Iterator<infer T1>;
+        } ? T1 : never),
+        key: number,
+        index: undefined
+    ][];
+    function __VLS_getVForSourceType<T>(source: T): [
+        item: T[keyof T],
+        key: keyof T,
+        index: number
+    ][];
+    function __VLS_getSlotParams<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>;
+    function __VLS_getSlotParam<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>[0];
+    function __VLS_directiveAsFunction<T extends import('vue').Directive>(dir: T): T extends (...args: any) => any ? T | __VLS_unknownDirective : NonNullable<(T & Record<string, __VLS_unknownDirective>)['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']>;
+    function __VLS_withScope<T, K>(ctx: T, scope: K): ctx is T & K;
+    function __VLS_makeOptional<T>(t: T): {
+        [K in keyof T]?: T[K];
+    };
+    function __VLS_nonNullable<T>(t: T): T extends null | undefined ? never : T;
+    function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K): T extends new (...args: any) => any ? (props: (K extends {
+        $props: infer Props;
+    } ? Props : any) & Record<string, unknown>, ctx?: any) => __VLS_Element & {
+        __ctx?: {
+            attrs?: any;
+            slots?: K extends {
+                $slots: infer Slots;
+            } ? Slots : any;
+            emit?: K extends {
+                $emit: infer Emit;
+            } ? Emit : any;
+        } & {
+            props?: (K extends {
+                $props: infer Props;
+            } ? Props : any) & Record<string, unknown>;
+            expose?(exposed: K): void;
+        };
+    } : T extends () => any ? (props: {}, ctx?: any) => ReturnType<T> : T extends (...args: any) => any ? T : (_: {} & Record<string, unknown>, ctx?: any) => {
+        __ctx?: {
+            attrs?: any;
+            expose?: any;
+            slots?: any;
+            emit?: any;
+            props?: {} & Record<string, unknown>;
+        };
+    };
+    function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T & Record<string, unknown>) => void;
+    function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
+    function __VLS_pickFunctionalComponentCtx<T, K>(comp: T, compInstance: K): NonNullable<__VLS_PickNotAny<'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
+        __ctx?: infer Ctx;
+    } ? Ctx : never : any, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any>>;
+    function __VLS_normalizeSlot<S>(s: S): S extends () => infer R ? (props: {}) => R : S;
+    function __VLS_tryAsConstant<const T>(t: T): T;
+}

package/dist/runtime/components/elements/popover/Popover.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+import type { PopoverRootEmits } from 'radix-vue'
+import type { NPopoverProps } from '../../../types'
+
+const props = defineProps<NPopoverProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>

package/dist/runtime/components/elements/popover/PopoverContent.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NPopoverContentProps } from '../../../types'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<NPopoverContentProps>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'popover',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

package/dist/runtime/components/forms/Checkbox.vue

@@ -1,86 +1,75 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue'
-import { useVModel } from '@vueuse/core'
-import NIcon from '../elements/Icon.vue'
-import { randomId } from '../../utils'
-import type { NCheckboxProps } from '../../types/checkbox'
+import { computed } from 'vue'
+import type { CheckboxRootEmits } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { cn, randomId } from '../../utils'
+import Icon from '../elements/Icon.vue'
+import type { NCheckboxProps } from '../../types'
+import Label from '../elements/Label.vue'
 
-defineOptions({
-  inheritAttrs: false,
+const props = withDefaults(defineProps<NCheckboxProps>(), {
+  forceMount: true,
 })
+const emits = defineEmits<CheckboxRootEmits>()
 
-const props = withDefaults(
-  defineProps<NCheckboxProps>(),
-  {
-    modelValue: false,
-    disabled: false,
-  },
-)
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
 
-const emit = defineEmits<{ (...args: any): void }>()
+  return delegated
+})
 
-const slots = defineSlots<{
-  default?: void
-  icon?: any
-}>()
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 const id = computed(() => props.id ?? randomId('checkbox'))
-const checked = useVModel(props, 'modelValue', emit, { passive: true })
-
-watch(checked, (value) => {
-  emit('onUpdate', value)
-})
 </script>
 
 <template>
-  <label
+  <div
     checkbox="wrapper"
-    role="checkbox"
-    :for="props.for ?? id"
     :class="[
       una?.checkboxWrapper,
       {
         'checkbox-reverse': reverse,
-        'checkbox-disabled': disabled,
       },
     ]"
-    :checked="checked || null"
-    :disabled="disabled || null"
   >
-    <input
+    <CheckboxRoot
+      v-bind="forwarded"
       :id="id"
-      :value="checked"
-      :checked="!!checked"
-      type="checkbox"
-      class="peer"
-      checkbox="input"
-      :disabled="disabled"
-      :name="name"
-      @keypress.enter="checked = !checked"
-      @click="checked = !checked"
+      :class="
+        cn(
+          'peer checkbox',
+          props.class,
+        )"
     >
-    <span
-      :checkbox="checkbox"
-      :size="size"
-      class="checkbox checkbox-peer-focus"
-      v-bind="$attrs"
-    >
-      <slot name="icon">
-        <NIcon
-          checkbox="icon-base icon-checked"
-          :name="una?.checkboxIcon ?? 'checkbox-icon'"
-          :class="una?.checkboxIconBase"
-        />
-      </slot>
-    </span>
-    <div
-      v-if="slots.default || label"
-      checkbox="label"
-      :class="una?.checkboxLabel"
+      <CheckboxIndicator
+        :force-mount
+        :size
+        :class="cn('checkbox-indicator', una?.checkboxIndicator)"
+        v-bind="props._checkboxIndicator"
+      >
+        <slot name="icon">
+          <Icon
+            :name="props.checked === 'indeterminate'
+              ? props.una?.checkboxIndeterminateIcon ?? 'checkbox-indeterminate-icon'
+              : props.checked
+                ? props.una?.checkboxCheckedIcon ?? 'checkbox-checked-icon'
+                : props.una?.checkboxUncheckedIcon ?? 'checkbox-unchecked-icon'"
+            :class="cn('checkbox-icon-base', una?.checkboxIconBase)"
+          />
+        </slot>
+      </CheckboxIndicator>
+    </CheckboxRoot>
+
+    <Label
+      v-if="$slots.default || label"
+      :for="props.for || id"
+      :class="cn('checkbox-label', una?.checkboxLabel)"
+      v-bind="props._label"
     >
       <slot>
         {{ label }}
       </slot>
-    </div>
-  </label>
+    </Label>
+  </div>
 </template>