@una-ui/nuxt 0.28.0-beta.1 → 0.29.0-beta.1

package/dist/module.json

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

package/dist/module.mjs

@@ -7,7 +7,7 @@ import 'unocss';
 import 'unocss-preset-animations';
 
 const name = "@una-ui/nuxt";
-const version = "0.28.0-beta.1";
+const version = "0.29.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {

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

@@ -52,6 +52,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
     :type="to ? null : type"
     :class="cn(
       (square === '' || square === true) && 'btn-square',
+      block && 'btn-block',
       !rounded && 'btn-default-radius',
       !hasVariant && !isBaseVariant ? una?.btnDefaultVariant : null,
       reverse && 'btn-reverse',

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

@@ -14,8 +14,9 @@ const props = defineProps<NSkeletonProps>()
         props.una?.skeleton,
       )
     "
-    :skeleton="props.skeleton"
-    :size="props.size"
+    :skeleton
+    :size
+    :rounded
   >
     <slot />
   </div>

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

@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<NToggleProps>(), {
 const emits = defineEmits<ToggleEmits>()
 
 const delegatedProps = computed(() => {
-  const { class: _, size, ...delegated } = props
+  const { class: _, ...delegated } = props
 
   return delegated
 })

package/dist/runtime/components/elements/avatar/Avatar.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { NAvatarProps } from '../../../types'
+import { AvatarRoot } from 'radix-vue'
+import { cn } from '../../../utils'
+import AvatarFallback from './AvatarFallback.vue'
+import AvatarImage from './AvatarImage.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NAvatarProps>(), {
+  as: 'span',
+  size: 'md',
+  rounded: 'full',
+  square: '2.5em',
+  avatar: 'soft',
+})
+</script>
+
+<template>
+  <AvatarRoot
+    as-child
+  >
+    <component
+      :is="as"
+      :class="cn(
+        'avatar',
+        una?.avatarRoot,
+        props.class,
+      )"
+      :size
+      :rounded
+      :square
+      :avatar
+      v-bind="{ ..._avatarRoot, ...$attrs }"
+    >
+      <slot :props>
+        <AvatarImage
+          v-if="src"
+          :src
+          :una
+          v-bind="_avatarImage"
+        />
+      </slot>
+
+      <AvatarFallback
+        :avatar
+        :label="label || alt?.split(' ').map(word => word[0]).join('').slice(0, 2)"
+        :icon
+        v-bind="_avatarFallback"
+        :una
+      >
+        <slot name="fallback" />
+      </AvatarFallback>
+    </component>
+  </AvatarRoot>
+</template>

package/dist/runtime/components/elements/avatar/AvatarFallback.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { NAvatarAvatarFallbackProps } from '../../../types'
+import { AvatarFallback } from 'radix-vue'
+import { cn } from '../../../utils'
+import Icon from '../Icon.vue'
+
+const props = withDefaults(defineProps<NAvatarAvatarFallbackProps>(), {
+  as: 'span',
+})
+</script>
+
+<template>
+  <AvatarFallback
+    as-child
+  >
+    <component
+      :is="as"
+      v-bind="props"
+      :class="cn(
+        'avatar-fallback',
+        una?.avatarFallback,
+        props.class,
+      )"
+    >
+      <slot>
+        <span
+          v-if="label && !icon"
+          :class="cn(
+            'avatar-label',
+            una?.avatarLabel,
+          )"
+        >
+          {{ label }}
+        </span>
+        <Icon
+          v-else-if="icon"
+          :class="cn(
+            'avatar-icon',
+            una?.avatarIcon,
+          )"
+          :name="label"
+        />
+      </slot>
+    </component>
+  </AvatarFallback>
+</template>

package/dist/runtime/components/elements/avatar/AvatarImage.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { NAvatarImageProps } from '../../../types'
+import { AvatarImage } from 'radix-vue'
+import { cn } from '../../../utils'
+
+const props = defineProps<NAvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage
+    v-bind="props"
+    :src="src!"
+    :class="cn(
+      'avatar-image',
+      una?.avatarImage,
+      props.class,
+    )"
+  />
+</template>

package/dist/runtime/components/elements/dialog/DialogDescription.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <DialogDescription
     v-bind="forwardedProps"
     :class="cn(
-      'dialog-description',
+      'dialog-description data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-48%',
       props.una?.dialogDescription,
       props.class,
     )"

package/dist/runtime/components/elements/dialog/DialogOverlay.vue

@@ -9,6 +9,7 @@ const props = defineProps<NDialogOverlayProps>()
 <template>
   <DialogOverlay
     :class="cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       !props.scrollable ? 'dialog-overlay' : 'dialog-scroll-overlay',
       props.una?.dialogOverlay,
       props.class,

package/dist/runtime/components/elements/dropdown-menu/DropdownMenu.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DropdownMenuContentEmits, DropdownMenuRootEmits } from 'radix-vue'
 import type { NDropdownMenuProps } from '../../../types'
-import { createReusableTemplate } from '@vueuse/core'
+import { createReusableTemplate, reactivePick } from '@vueuse/core'
 import { DropdownMenuPortal, useForwardPropsEmits } from 'radix-vue'
-import { omitProps, pickProps } from '../../../utils'
+import { omitProps } from '../../../utils'
 import DropdownMenuContent from './DropdownMenuContent.vue'
 import DropdownMenuGroup from './DropdownMenuGroup.vue'
 import DropdownMenuItem from './DropdownMenuItem.vue'
@@ -24,88 +24,86 @@ const [DefineMenuSub, ReuseMenuSub] = createReusableTemplate<NDropdownMenuProps>
 
 <template>
   <DropdownMenuRoot
-    v-bind="pickProps(forwarded, ['defaultOpen', 'open', 'modal', 'dir'])"
+    v-bind="reactivePick(forwarded, ['defaultOpen', 'open', 'modal', 'dir'])"
   >
-    <slot>
-      <slot name="trigger">
-        <DropdownMenuTrigger
-          v-bind="omitProps({ ...forwarded, ...forwarded._dropdownMenuTrigger }, [
-            'dropdownMenuItem',
-            'items',
-            'menuLabel',
-
-            '_dropdownMenuItem',
-            '_dropdownMenuContent',
-            '_dropdownMenuLabel',
-            '_dropdownMenuSeparator',
-            '_dropdownMenuGroup',
-            '_dropdownMenuSubTrigger',
-            '_dropdownMenuSubContent',
-          ])"
-        />
-      </slot>
+    <DropdownMenuTrigger
+      v-bind="omitProps({ ...forwarded, ...forwarded._dropdownMenuTrigger }, [
+        'dropdownMenuItem',
+        'items',
+        'menuLabel',
+        '_dropdownMenuItem',
+        '_dropdownMenuContent',
+        '_dropdownMenuLabel',
+        '_dropdownMenuSeparator',
+        '_dropdownMenuGroup',
+        '_dropdownMenuTrigger',
+        '_dropdownMenuSubTrigger',
+        '_dropdownMenuSubContent',
+      ])"
+    >
+      <slot />
+    </DropdownMenuTrigger>
 
-      <DropdownMenuContent
-        v-bind="forwarded._dropdownMenuContent"
-      >
-        <slot name="content">
-          <template
-            v-if="menuLabel || $slots['menu-label']"
+    <DropdownMenuContent
+      v-bind="forwarded._dropdownMenuContent"
+    >
+      <slot name="content">
+        <template
+          v-if="menuLabel || $slots['menu-label']"
+        >
+          <DropdownMenuLabel
+            :size
+            :inset
+            :una="forwarded.una?.dropdownMenuLabel"
+            v-bind="forwarded._dropdownMenuLabel"
           >
-            <DropdownMenuLabel
-              :size
-              :inset
-              :una="forwarded.una?.dropdownMenuLabel"
-              v-bind="forwarded._dropdownMenuLabel"
-            >
-              <slot name="menu-label">
-                {{ menuLabel }}
-              </slot>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator
-              :una="forwarded.una?.dropdownMenuSeparator"
-              v-bind="forwarded._dropdownMenuSeparator"
-            />
-          </template>
+            <slot name="menu-label">
+              {{ menuLabel }}
+            </slot>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator
+            :una="forwarded.una?.dropdownMenuSeparator"
+            v-bind="forwarded._dropdownMenuSeparator"
+          />
+        </template>
 
-          <slot name="items" :items>
-            <DropdownMenuGroup
-              :una="forwarded.una?.dropdownMenuGroup"
-              v-bind="forwarded._dropdownMenuGroup"
+        <slot name="items" :items>
+          <DropdownMenuGroup
+            :una="forwarded.una?.dropdownMenuGroup"
+            v-bind="forwarded._dropdownMenuGroup"
+          >
+            <template
+              v-for="item in items"
+              :key="item.label"
             >
-              <template
-                v-for="item in items"
-                :key="item.label"
+              <slot
+                v-if="!item.items && item.label"
+                :name="`item-${item.label}`"
               >
-                <slot
-                  v-if="!item.items && item.label"
-                  :name="`item-${item.label}`"
-                >
-                  <DropdownMenuItem
-                    :size
-                    :inset
-                    :dropdown-menu-item
-                    :una="forwarded.una?.dropdownMenuItem"
-                    v-bind="{ ...item, ...forwarded._dropdownMenuItem, ...item._dropdownMenuItem }"
-                  />
-                </slot>
-
-                <DropdownMenuSeparator
-                  v-else-if="!item.label && !item.items"
-                  :una="forwarded.una?.dropdownMenuSeparator"
-                  v-bind="{ ...forwarded._dropdownMenuSeparator, ...item._dropdownMenuSeparator }"
+                <DropdownMenuItem
+                  :size
+                  :inset
+                  :dropdown-menu-item
+                  :una="forwarded.una?.dropdownMenuItem"
+                  v-bind="{ ...item, ...forwarded._dropdownMenuItem, ...item._dropdownMenuItem }"
                 />
+              </slot>
 
-                <ReuseMenuSub
-                  v-else
-                  v-bind="item"
-                />
-              </template>
-            </DropdownMenuGroup>
-          </slot>
+              <DropdownMenuSeparator
+                v-else-if="!item.label && !item.items"
+                :una="forwarded.una?.dropdownMenuSeparator"
+                v-bind="{ ...forwarded._dropdownMenuSeparator, ...item._dropdownMenuSeparator }"
+              />
+
+              <ReuseMenuSub
+                v-else
+                v-bind="item"
+              />
+            </template>
+          </DropdownMenuGroup>
         </slot>
-      </DropdownMenuContent>
-    </slot>
+      </slot>
+    </DropdownMenuContent>
   </DropdownMenuRoot>
 
   <DefineMenuSub

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuContent.vue

@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DropdownMenuContent
       v-bind="forwarded"
       :class="cn(
-        'dropdown-menu-content',
+        'dropdown-menu-content  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
         props.una?.dropdownMenuContent,
       )"

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuSubContent.vue

@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuSubContent
     v-bind="forwarded"
     :class="cn(
-      'dropdown-menu-sub-content',
+      'dropdown-menu-sub-content data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       props.class,
       forwarded.una?.dropdownMenuSubContent,
     )"

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -25,25 +25,23 @@ const forwardedProps = useForwardProps(delegatedProps)
   <DropdownMenuSubTrigger
     as-child
   >
-    <Button
-      v-bind="forwardedProps"
-      :dropdown-menu-item
-      :class="cn(
-        'dropdown-menu-sub-trigger w-full justify-start font-normal rounded-sm px-2',
-        forwardedProps.inset && !(forwardedProps.leading || $slots.leading) && 'pl-8',
-        props.class,
-      )"
-      btn="~"
-      :una="{
-        btnLeading: cn('dropdown-menu-sub-trigger-leading', forwardedProps.una?.btnLeading),
-        btnTrailing: cn('dropdown-menu-sub-trigger-trailing', forwardedProps.una?.btnTrailing),
-        ...forwardedProps.una,
-      }"
-      trailing="i-radix-icons-chevron-right"
-    >
-      <template v-for="(_, name) in $slots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </Button>
+    <slot>
+      <Button
+        v-bind="forwardedProps"
+        :dropdown-menu-item
+        :class="cn(
+          'dropdown-menu-sub-trigger w-full justify-start font-normal rounded-sm px-2',
+          forwardedProps.inset && !(forwardedProps.leading || $slots.leading) && 'pl-8',
+          props.class,
+        )"
+        btn="~"
+        :una="{
+          btnLeading: cn('dropdown-menu-sub-trigger-leading', forwardedProps.una?.btnLeading),
+          btnTrailing: cn('dropdown-menu-sub-trigger-trailing', forwardedProps.una?.btnTrailing),
+          ...forwardedProps.una,
+        }"
+        trailing="dropdown-menu-sub-trigger-trailing-icon"
+      />
+    </slot>
   </dropdownmenusubtrigger>
 </template>

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuTrigger.vue

@@ -13,23 +13,21 @@ const forwardedProps = useForwardProps(props)
   <DropdownMenuTrigger
     as-child
   >
-    <Button
-      v-bind="forwardedProps"
-      :id="randomId('dropdown-menu-trigger')"
-      :class="cn(
-        'dropdown-menu-trigger justify-start font-normal',
-        props.class,
-      )"
-      :una="{
-        btnDefaultVariant: 'dropdown-menu-default-variant',
-        btnLeading: cn('dropdown-menu-trigger-leading', forwardedProps.una?.btnLeading),
-        btnTrailing: cn('dropdown-menu-trigger-trailing', forwardedProps.una?.btnTrailing),
-        ...forwardedProps.una,
-      }"
-    >
-      <template v-for="(_, name) in $slots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </Button>
+    <slot>
+      <Button
+        v-bind="forwardedProps"
+        :id="randomId('dropdown-menu-trigger')"
+        :class="cn(
+          'dropdown-menu-trigger',
+          props.class,
+        )"
+        :una="{
+          btnDefaultVariant: 'dropdown-menu-default-variant',
+          btnLeading: cn('dropdown-menu-trigger-leading', forwardedProps.una?.btnLeading),
+          btnTrailing: cn('dropdown-menu-trigger-trailing', forwardedProps.una?.btnTrailing),
+          ...props.una,
+        }"
+      />
+    </slot>
   </DropdownMenuTrigger>
 </template>

package/dist/runtime/components/elements/tooltip/Tooltip.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { TooltipRootEmits } from 'radix-vue'
 import type { NTooltipProps } from '../../../types'
+import { reactivePick } from '@vueuse/core'
 import { useForwardPropsEmits } from 'radix-vue'
-
 import TooltipContent from './TooltipContent.vue'
 import TooltipProvider from './TooltipProvider.vue'
 import TooltipRoot from './TooltipRoot.vue'
@@ -14,17 +14,24 @@ defineOptions({
 
 const props = defineProps<NTooltipProps>()
 const emits = defineEmits<TooltipRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
+const rootProps = reactivePick(props, [
+  'defaultOpen',
+  'delayDuration',
+  'disableClosingTrigger',
+  'disabled',
+  'disableHoverableContent',
+  'ignoreNonKeyboardFocus',
+  'open',
+])
+const forwarded = useForwardPropsEmits(rootProps, emits)
 </script>
 
 <template>
   <TooltipProvider
     v-bind="_tooltipProvider"
-    :disabled
   >
     <TooltipRoot
-      v-bind="_tooltipRoot"
+      v-bind="forwarded"
     >
       <TooltipTrigger
         as-child
@@ -35,11 +42,11 @@ const forwarded = useForwardPropsEmits(props, emits)
 
       <TooltipContent
         v-if="$slots.content || content"
-        v-bind="forwarded._tooltipContent"
+        v-bind="_tooltipContent"
         :size
         :tooltip
         :disabled
-        :una="forwarded.una?.tooltipContent"
+        :una="una?.tooltipContent"
       >
         <slot name="content">
           {{ content }}

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits } from 'radix-vue'
 import type { NCheckboxProps } from '../../types'
+import { reactivePick } from '@vueuse/core'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
 import { cn, randomId } from '../../utils'
@@ -12,11 +13,16 @@ const props = withDefaults(defineProps<NCheckboxProps>(), {
 })
 const emits = defineEmits<CheckboxRootEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactivePick(props, [
+  'checked',
+  'defaultChecked',
+  'disabled',
+  'id',
+  'name',
+  'required',
+  'value',
+  'size',
+])
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
@@ -25,13 +31,11 @@ const id = computed(() => props.id ?? randomId('checkbox'))
 
 <template>
   <div
-    checkbox="wrapper"
-    :class="[
+    :class="cn(
+      'checkbox-wrapper flex',
       una?.checkboxWrapper,
-      {
-        'checkbox-reverse': reverse,
-      },
-    ]"
+      reverse && 'checkbox-reverse',
+    )"
   >
     <CheckboxRoot
       v-bind="forwarded"

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NInputProps } from '../../types'
 import { computed, onMounted, ref } from 'vue'
-import { randomId } from '../../utils'
+import { cn, randomId } from '../../utils'
 import NIcon from '../elements/Icon.vue'
 
 defineOptions({
@@ -143,11 +143,12 @@ onMounted(() => {
       :value="modelValue"
       :type="props.type !== 'textarea' ? props.type : undefined"
       class="input"
-      :class="[
+      :class="cn(
+        type === 'textarea' ? 'input-textarea' : 'input-input',
         statusClassVariants.input,
         reverseClassVariants.input,
         una?.input,
-      ]"
+      )"
       :input="input"
       :resize="type === 'textarea' ? resize : undefined"
       :rows="type === 'textarea' ? rows : undefined"
@@ -158,11 +159,11 @@ onMounted(() => {
 
     <div
       v-if="isTrailing"
-      :class="[
+      :class="cn(
         una?.inputTrailingWrapper,
         reverseClassVariants.trailingWrapper,
         statusClassVariants.text,
-      ]"
+      )"
     >
       <NIcon
         v-if="loading"

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

@@ -5,7 +5,9 @@ import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits
 import { computed } from 'vue'
 import { cn } from '../../utils'
 
-const props = defineProps<NSliderProps>()
+const props = withDefaults(defineProps<NSliderProps>(), {
+  slider: 'primary',
+})
 const emits = defineEmits<SliderRootEmits>()
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -26,6 +28,7 @@ const isVertical = computed(() => props.orientation === 'vertical')
       disabled && 'slider-disabled',
     )"
     v-bind="forwarded"
+    :slider="slider"
   >
     <slot name="slider-track">
       <SliderTrack

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NSwitchProps } from '../../types'
+import { reactivePick } from '@vueuse/core'
 import {
   SwitchRoot,
   type SwitchRootEmits,
@@ -11,19 +12,19 @@ import NIcon from '../elements/Icon.vue'
 
 const props = withDefaults(defineProps<NSwitchProps>(), {
   size: 'md',
-  switchChecked: 'primary',
-  switchUnchecked: 'gray',
+  switchChecked: '~',
+  switchUnchecked: '~',
 })
 
 const emit = defineEmits<SwitchRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emit)
+const rootPropsEmits = useForwardPropsEmits(reactivePick(props, 'as', 'asChild', 'checked', 'defaultChecked', 'disabled', 'id', 'name', 'required', 'value'), emit)
 </script>
 
 <template>
   <SwitchRoot
     v-slot="{ checked }"
-    v-bind="forwarded"
+    v-bind="rootPropsEmits"
     :class="cn(
       'peer switch',
       una?.switch,
@@ -32,8 +33,8 @@ const forwarded = useForwardPropsEmits(props, emit)
         : una?.switchUnchecked,
     )"
     :disabled="disabled || loading"
-    :switch-unchecked
     :switch-checked
+    :switch-unchecked
     :size
   >
     <SwitchThumb

package/dist/runtime/components/forms/select/Select.vue

@@ -47,7 +47,7 @@ provide('selectModelValue', modelValue)
 
 <template>
   <SelectRoot
-    v-bind="omitProps(forwarded, ['items', 'multipleGroup', 'itemAttribute', 'placeholder', 'label', 'id', 'select'])"
+    v-bind="omitProps(forwarded, ['items', 'groupItems', 'itemAttribute', 'placeholder', 'label', 'id', 'select'])"
     :model-value="transformerValue"
   >
     <SelectTrigger
@@ -62,7 +62,7 @@ provide('selectModelValue', modelValue)
           v-bind="forwarded._selectValue"
           :placeholder="forwarded._selectValue?.placeholder || forwarded.placeholder"
         >
-          <slot :value="modelValue">
+          <slot name="value" :value="modelValue">
             {{ transformerValue }}
           </slot>
         </SelectValue>
@@ -80,7 +80,7 @@ provide('selectModelValue', modelValue)
     >
       <slot name="content" :items="forwarded.items">
         <!--  single-group -->
-        <template v-if="!forwarded.multipleGroup">
+        <template v-if="!groupItems">
           <SelectLabel
             v-if="forwarded.label"
             v-bind="forwarded._selectLabel"
@@ -115,18 +115,18 @@ provide('selectModelValue', modelValue)
           <SelectGroup
             v-for="(groupItems, i) in items"
             :key="i"
-            v-bind="forwarded._selectGroup"
+            v-bind="props._selectGroup"
           >
             <SelectSeparator
               v-if="i > 0"
-              v-bind="forwarded._selectSeparator"
+              v-bind="props._selectSeparator"
             />
 
             <slot name="group" :items="groupItems">
               <SelectLabel
                 v-if="groupItems.label"
-                :size="forwarded.size"
-                v-bind="{ ...forwarded._selectLabel, ...groupItems._selectLabel }"
+                :size
+                v-bind="{ ...props._selectLabel, ...groupItems._selectLabel }"
               >
                 <slot name="label" :label="groupItems.label">
                   {{ groupItems.label }}
@@ -138,8 +138,8 @@ provide('selectModelValue', modelValue)
                 :key="groupItem"
               >
                 <SelectItem
-                  :value="groupItem "
-                  :size="forwarded.size"
+                  :value="groupItem"
+                  :size
                   v-bind="{ ...forwarded._selectItem, ...groupItems?._selectItem, ...groupItem._selectItem }"
                   :is-selected="groupItem === transformerValue"
                 >

package/dist/runtime/components/misc/ThemeSwitcher.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useColorMode } from '#imports'
 import { useToggle } from '@vueuse/core'
-import { computed } from 'vue'
+import { capitalize, computed } from 'vue'
 import { useUnaSettings } from '../../composables/useUnaSettings'
 import { useUnaThemes } from '../../composables/useUnaThemes'
 import { RADIUS } from '../../constants'
@@ -48,7 +48,7 @@ function shuffleTheme(): void {
 </script>
 
 <template>
-  <Popover :_popover-content="{ align: 'end', class: 'z-100 w-73 bg-muted' }">
+  <Popover :_popover-content="{ align: 'end', class: 'w-73 bg-muted' }">
     <template #trigger>
       <slot name="trigger">
         <Button
@@ -79,11 +79,14 @@ function shuffleTheme(): void {
             <button
               v-for="[key, theme] in primaryThemes"
               :key="key"
+              :title="capitalize(key)"
               :style="{ background: theme['--una-primary-hex'] }"
-              class="h-6.5 w-6.5 rounded-full transition-all"
+              class="transition-all"
+              rounded="full"
+              square="6.5"
               :class="[currentPrimaryThemeName === key ? 'ring-2' : 'scale-93']"
               ring="primary offset-4 offset-base"
-              aria-label="Primary Color"
+              :aria-label="`Primary Color: ${key}`"
               @click="updatePrimaryTheme(key)"
             />
           </div>
@@ -97,10 +100,13 @@ function shuffleTheme(): void {
             <button
               v-for="[key, theme] in grayThemes"
               :key="key"
+              :title="capitalize(key)"
               :style="{ background: theme['--una-gray-hex'] }"
               :class="currentGrayThemeName === key ? 'ring-2' : 'scale-93'"
-              class="h-6.5 w-6.5 rounded-full transition-all"
-              aria-label="Gray Color"
+              class="transition-all"
+              rounded="full"
+              square="6.5"
+              :aria-label="`Gray Color: ${key}`"
               ring="gray offset-4 offset-base"
               @click="updateGrayTheme(key)"
             />

package/dist/runtime/components/slots/AvatarGroupDefault.js

@@ -1,5 +1,5 @@
 import { cloneVNode, computed, defineComponent, h } from "vue";
-import NAvatar from "../elements/Avatar.vue";
+import Avatar from "../elements/avatar/Avatar.vue";
 export default defineComponent({
   props: {
     max: {
@@ -29,7 +29,7 @@ export default defineComponent({
     const label = computed(() => {
       if (countChildren.value <= props.max)
         return null;
-      return h(NAvatar, {
+      return h(Avatar, {
         // TODO: add `more` configuration
         class: "avatar-(soft group-margin)",
         label: `+${countChildren.value - props.max}`,

package/dist/runtime/types/avatar.d.ts

@@ -1,75 +1,69 @@
-export interface NAvatarProps {
+import type { AvatarFallbackProps, AvatarImageProps, AvatarRootProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+interface BaseProps {
+    class?: HTMLAttributes['class'];
     /**
-     * Allows you to add `UnaUI` avatar preset properties,
-     * Think of it as a shortcut for adding options or variants to the preset if available.
-     *
-     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/avatar.ts
-     * @example
-     * avatar="solid-green"
-     */
-    avatar?: string;
-    /**
-     * Add icon instead of image.
-     *
-     * @example
-     * icon="i-heroicons-information-circle"
-     */
-    icon?: string;
-    /**
-     * Add a label to the avatar.
-     *
-     * @example
-     * label="PR"
+     * Set the size of the avatar.
      */
-    label?: string;
+    size?: HTMLAttributes['class'];
     /**
-     * Set the size of the avatar.
+     * Set the height and width of the avatar.
      */
-    size?: string;
+    square?: HTMLAttributes['class'];
     /**
-     * Add src of the image.
-     *
-     * @example
-     * src="https://i.pravatar.cc/300"
+     * Set the border radius of the avatar.
      */
-    src?: string;
+    rounded?: HTMLAttributes['class'];
+}
+export interface NAvatarProps extends BaseProps, NAvatarRootProps, NAvatarAvatarFallbackProps, NAvatarImageProps {
+    _avatarRoot?: NAvatarRootProps;
+    _avatarImage?: NAvatarImageProps;
+    _avatarFallback?: NAvatarAvatarFallbackProps;
     /**
-     * Add alt of the image.
+     * `UnaUI` preset configuration
      *
-     * @example
-     * alt="Profile"
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/avatar.ts
      */
-    alt?: string;
+    una?: NAvatarUnaProps;
+}
+export interface NAvatarRootProps extends AvatarRootProps, BaseProps {
     /**
-     * Add fallback of the image.
+     * Allows you to add `UnaUI` avatar preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
      *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/avatar.ts
      * @example
-     * fallback="https://i.pravatar.cc/300"
+     * avatar="solid-green"
      */
-    fallback?: string;
+    avatar?: HTMLAttributes['class'];
+    una?: NAvatarUnaProps['avatarRoot'];
+}
+export interface NAvatarAvatarFallbackProps extends AvatarFallbackProps, BaseProps {
     /**
-     * Add a delay before showing the avatar.
-     *
-     * @default 0
+     * Add a label to the fallback.
      */
-    delay?: number;
+    label?: string;
     /**
-     * Add a skeleton effect to the avatar.
+     * Convert `label` prop to icon component.
      *
      * @default false
+     * @example
+     * icon
+     * label="i-lucide-user"
      */
-    skeleton?: boolean;
-    /**
-     * `UnaUI` preset configuration
-     *
-     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/avatar.ts
-     */
-    una?: {
-        avatar?: string;
-        avatarLabel?: string;
-        avatarSrc?: string;
-        avatarFallback?: string;
-        avatarIconBase?: string;
-        avatarFallbackIcon?: string;
-    };
+    icon?: boolean;
+    una?: NAvatarUnaProps['avatarFallback'];
+}
+export interface NAvatarImageProps extends Omit<AvatarImageProps, 'src'>, BaseProps {
+    src?: string;
+    alt?: string;
+    una?: NAvatarUnaProps['avatarImage'];
+}
+export interface NAvatarUnaProps {
+    avatarRoot?: HTMLAttributes['class'];
+    avatarImage?: HTMLAttributes['class'];
+    avatarFallback?: HTMLAttributes['class'];
+    avatarLabel?: HTMLAttributes['class'];
+    avatarIcon?: HTMLAttributes['class'];
 }
+export {};

package/dist/runtime/types/button.d.ts

@@ -51,6 +51,12 @@ export interface NButtonProps extends BaseExtensionProps {
      * @default false
      */
     loading?: boolean;
+    /**
+     * Make the button full width.
+     *
+     * @default false
+     */
+    block?: boolean;
     /**
      * Change the button tag to `NuxtLink` component,
      * This allows you to use `NuxtLink` available props.

package/dist/runtime/types/checkbox.d.ts

@@ -5,32 +5,11 @@ interface BaseExtensions {
     class?: HTMLAttributes['class'];
 }
 export interface NCheckboxProps extends CheckboxRootProps, NLabelProps, BaseExtensions {
-    /**
-     * Disable the checkbox.
-     */
-    disabled?: boolean;
-    /**
-     * Switch the position of label and checkbox.
-     */
-    reverse?: boolean;
     /**
      * Allows you to add `UnaUI` checkbox preset properties,
      * Think of it as a shortcut for adding options or variants to the preset if available.
      */
     checkbox?: string;
-    /**
-     * Add name attribute to the checkbox.
-     *
-     * @default null
-     */
-    name?: string;
-    /**
-     * Manually set the id attribute.
-     * By default, the id attribute is generated randomly for accessibility reasons.
-     *
-     * @default randomId
-     */
-    id?: string;
     /**
      * Display label text.
      *
@@ -46,6 +25,10 @@ export interface NCheckboxProps extends CheckboxRootProps, NLabelProps, BaseExte
      * size="sm" | size="2cm" | size="2rem" | size="2px"
      */
     size?: string;
+    /**
+     * Switch the position of label and checkbox.
+     */
+    reverse?: boolean;
     /**
      * `UnaUI` preset configuration
      *

package/dist/runtime/types/select.d.ts

@@ -22,12 +22,6 @@ export interface NSelectProps extends SelectExtensions {
      * The unique id of the select.
      */
     id?: string;
-    /**
-     * Enable multiple group items.
-     *
-     * @default false
-     */
-    multipleGroup?: boolean;
     /**
      * The attribute name to use to display in the select items.
      *
@@ -51,10 +45,21 @@ export interface NSelectProps extends SelectExtensions {
      * @default []
      */
     items: any[];
+    /**
+     * Allows for multiple groups within the select.
+     *
+     * @default false
+     * @example
+     * items: [
+     *  { label: 'Group 1', items: [1, 2, 3] },
+     * ]
+     */
+    groupItems?: boolean;
     _selectScrollUpButton?: Partial<NSelectScrollUpButtonProps>;
     _selectItemText?: Partial<NSelectItemTextProps>;
     _selectScrollDownButton?: Partial<NSelectScrollDownButtonProps>;
     _selectGroup?: Partial<NSelectGroupProps>;
+    _selectSeparator?: Partial<NSelectSeparator>;
     _selectContent?: Partial<NSelectContentProps>;
     _selectValue?: Partial<NSelectValueProps>;
     _selectTrigger?: Partial<NSelectTriggerProps>;

package/dist/runtime/types/separator.d.ts

@@ -13,7 +13,7 @@ export interface NSeparatorProps extends Extensions {
      * @example
      * separator="solid-green"
      */
-    separator?: string;
+    separator?: HTMLAttributes['class'];
     /**
      * Allows you to change the orientation and position of the separator.
      *
@@ -28,7 +28,7 @@ export interface NSeparatorProps extends Extensions {
      * @example
      * size="sm" | size="2cm" | size="2rem" | size="2px"
      */
-    size?: string;
+    size?: HTMLAttributes['class'];
     /**
      * `UnaUI` preset configuration
      *

package/dist/runtime/types/skeleton.d.ts

@@ -11,7 +11,7 @@ export interface NSkeletonProps extends Extensions {
      * @example
      * skeleton="green""
      */
-    skeleton?: string;
+    skeleton?: HTMLAttributes['class'];
     /**
      * Allows you to change the size of the skeleton.
      *
@@ -20,7 +20,15 @@ export interface NSkeletonProps extends Extensions {
      * @example
      * size="sm" | size="2cm" | size="2rem" | size="2px"
      */
-    size?: string;
+    size?: HTMLAttributes['class'];
+    /**
+     * Allows you to change the shape of the skeleton.
+     * @default rounded
+     *
+     * @example
+     * rounded="none" | rounded="sm" | rounded="md" | rounded="lg" | rounded="full"
+     */
+    rounded?: HTMLAttributes['class'];
     /**
      * `UnaUI` preset configuration
      *

package/dist/runtime/types/tooltip.d.ts

@@ -7,11 +7,7 @@ interface BaseExtensions {
 }
 type TriggerExtensions = NButtonProps & TooltipTriggerProps;
 type ContentExtensions = BaseExtensions & TooltipContentProps;
-export interface NTooltipProps extends BaseExtensions {
-    /**
-     * Disable the tooltip.
-     */
-    disabled?: boolean;
+export interface NTooltipProps extends BaseExtensions, TooltipRootProps {
     /**
      * Add a content of the tooltip.
      */
@@ -26,16 +22,14 @@ export interface NTooltipProps extends BaseExtensions {
      */
     tooltip?: HTMLAttributes['class'];
     _tooltipProvider?: Partial<NTooltipProviderProps>;
-    _tooltipRoot?: Partial<NTooltipRootProps>;
     _tooltipTrigger?: Partial<NTooltipTriggerProps>;
     _tooltipContent?: Partial<NTooltipContentProps>;
     una?: NTooltipUnaProps;
 }
-export interface NTooltipRootProps extends TooltipRootProps {
-    'onUpdate:open'?: (value: boolean) => void;
-}
 export interface NTooltipProviderProps extends TooltipProviderProps {
 }
+export interface NTooltipRootProps extends TooltipRootProps {
+}
 export interface NTooltipTriggerProps extends TriggerExtensions {
 }
 export interface NTooltipContentProps extends ContentExtensions {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.28.0-beta.1",
+  "version": "0.29.0-beta.1",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -28,33 +28,33 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
     "@iconify-json/heroicons": "^1.2.1",
-    "@iconify-json/lucide": "^1.2.8",
+    "@iconify-json/lucide": "^1.2.15",
     "@iconify-json/radix-icons": "^1.2.1",
-    "@iconify-json/tabler": "^1.2.5",
-    "@nuxt/kit": "^3.13.2",
-    "@nuxtjs/color-mode": "^3.5.1",
+    "@iconify-json/tabler": "^1.2.8",
+    "@nuxt/kit": "^3.14.159",
+    "@nuxtjs/color-mode": "^3.5.2",
     "@tanstack/vue-table": "^8.20.5",
-    "@unocss/core": "^0.63.4",
-    "@unocss/nuxt": "^0.63.4",
-    "@unocss/preset-attributify": "^0.63.4",
-    "@unocss/preset-icons": "^0.63.4",
-    "@vueuse/core": "^11.1.0",
-    "@vueuse/integrations": "^11.1.0",
-    "@vueuse/nuxt": "^11.1.0",
+    "@unocss/core": "^0.63.6",
+    "@unocss/nuxt": "^0.63.6",
+    "@unocss/preset-attributify": "^0.63.6",
+    "@unocss/preset-icons": "^0.63.6",
+    "@vueuse/core": "^11.3.0",
+    "@vueuse/integrations": "^11.3.0",
+    "@vueuse/nuxt": "^11.3.0",
     "clsx": "^2.1.1",
     "ohash": "^1.1.4",
     "radix-vue": "^1.9.7",
-    "tailwind-merge": "^2.5.3",
+    "tailwind-merge": "^2.5.4",
     "typescript": "^5.6.3",
-    "unocss": "^0.63.4",
+    "unocss": "^0.63.6",
     "unocss-preset-animations": "^1.1.0",
-    "@una-ui/extractor-vue-script": "^0.28.0-beta.1",
-    "@una-ui/preset": "^0.28.0-beta.1"
+    "@una-ui/extractor-vue-script": "^0.29.0-beta.1",
+    "@una-ui/preset": "^0.29.0-beta.1"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/schema": "^3.13.2",
-    "nuxt": "^3.13.2"
+    "@nuxt/schema": "^3.14.159",
+    "nuxt": "^3.14.159"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import type { NAvatarProps } from '../../types'
-import { useImage } from '@vueuse/core'
-import { computed } from 'vue'
-import NIcon from './Icon.vue'
-
-const props = withDefaults(defineProps<NAvatarProps>(), {
-  delay: 0,
-})
-
-const { isLoading, error, isReady } = useImage({ src: props?.src ?? '' }, { delay: props.delay })
-
-// TODO: sync with NAvatarProps
-const avatarVariants = ['solid', 'soft', 'outline'] as const
-const hasVariant = computed(() => avatarVariants.some(avatarVariants => props.avatar?.includes(avatarVariants)))
-const isBaseVariant = computed(() => props.avatar?.includes('~'))
-
-const placeholder = computed(() => {
-  if (props.label)
-    return props.label
-
-  return props.alt?.split(' ').map(word => word[0]).join('').slice(0, 2)
-})
-</script>
-
-<template>
-  <span
-    :avatar="avatar"
-    :size="size"
-    class="avatar"
-    :class="[
-      { 'avatar-default-variant': !hasVariant && !isBaseVariant },
-      { 'animate-pulse': isLoading && skeleton && src },
-      una?.avatar,
-    ]"
-  >
-    <template v-if="!icon">
-      <slot
-        v-if="!skeleton"
-        v-bind="{ isLoading, error, isReady, ...props }"
-      >
-        <img
-          v-if="isReady && !error"
-          avatar="src"
-          :src="src"
-          :alt="alt"
-          :class="una?.avatarSrc"
-        >
-
-        <img
-          v-else-if="fallback"
-          avatar="src"
-          :src="fallback"
-          :alt="alt ?? 'avatar'"
-          :class="una?.avatarFallback"
-        >
-
-        <span
-          v-else-if="placeholder"
-          avatar="label"
-          :class="una?.avatarLabel"
-        >
-          {{ placeholder }}
-        </span>
-
-        <NIcon
-          v-else
-          avatar="fallback-icon-base"
-          :name="una?.avatarFallbackIcon ?? 'avatar-fallback-icon'"
-          :class="una?.avatarFallbackIcon"
-        />
-      </slot>
-    </template>
-
-    <template v-else>
-      <NIcon
-        avatar="icon-base"
-        :class="una?.avatarIconBase"
-        :name="icon"
-      />
-    </template>
-  </span>
-</template>