@una-ui/nuxt 0.52.1 → 0.54.0

package/dist/module.d.mts

@@ -33,4 +33,5 @@ interface ModuleOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.d.ts

@@ -33,4 +33,5 @@ interface ModuleOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.52.1",
+  "version": "0.54.0",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },

package/dist/module.mjs

@@ -8,7 +8,7 @@ import 'unocss';
 import 'unocss-preset-animations';
 
 const name = "@una-ui/nuxt";
-const version = "0.52.1";
+const version = "0.54.0";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/alert-dialog/AlertDialog.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { AlertDialogEmits } from 'reka-ui'
+import type { NAlertDialogProps } from '../../types'
+import { reactivePick } from '@vueuse/core'
+import { AlertDialogRoot, useForwardPropsEmits, VisuallyHidden } from 'reka-ui'
+import { computed } from 'vue'
+import { randomId } from '../../utils'
+import AlertDialogAction from './AlertDialogAction.vue'
+import AlertDialogCancel from './AlertDialogCancel.vue'
+import AlertDialogContent from './AlertDialogContent.vue'
+import AlertDialogDescription from './AlertDialogDescription.vue'
+import AlertDialogFooter from './AlertDialogFooter.vue'
+import AlertDialogHeader from './AlertDialogHeader.vue'
+import AlertDialogTitle from './AlertDialogTitle.vue'
+import AlertDialogTrigger from './AlertDialogTrigger.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NAlertDialogProps>(), {
+  overlay: true,
+})
+const emits = defineEmits<AlertDialogEmits & {
+  cancel: [Event]
+  action: [Event]
+}>()
+const DEFAULT_TITLE = randomId('alert-dialog-title')
+const DEFAULT_DESCRIPTION = randomId('alert-dialog-description')
+
+const title = computed(() => props.title ?? DEFAULT_TITLE)
+const description = computed(() => props.description ?? DEFAULT_DESCRIPTION)
+
+const rootProps = reactivePick(props, [
+  'open',
+  'defaultOpen',
+])
+
+const forwarded = useForwardPropsEmits(rootProps, emits)
+</script>
+
+<template>
+  <AlertDialogRoot
+    v-slot="{ open }"
+    data-slot="alert-dialog"
+    v-bind="forwarded"
+  >
+    <slot>
+      <AlertDialogTrigger
+        v-bind="_alertDialogTrigger"
+        as-child
+      >
+        <slot name="trigger" :open />
+      </AlertDialogTrigger>
+
+      <AlertDialogContent
+        v-bind="_alertDialogContent"
+        :_alert-dialog-overlay
+        :prevent-close
+        :una
+      >
+        <VisuallyHidden v-if="(title === DEFAULT_TITLE || !!$slots.title) || (description === DEFAULT_DESCRIPTION || !!$slots.description)">
+          <AlertDialogTitle v-if="title === DEFAULT_TITLE || !!$slots.title">
+            {{ title }}
+          </AlertDialogTitle>
+
+          <AlertDialogDescription v-if="description === DEFAULT_DESCRIPTION || !!$slots.description">
+            {{ description }}
+          </AlertDialogDescription>
+        </VisuallyHidden>
+
+        <slot name="content">
+          <!-- Header -->
+          <AlertDialogHeader
+            v-if="!!$slots.header || (title !== DEFAULT_TITLE || !!$slots.title) || (description !== DEFAULT_DESCRIPTION || !!$slots.description)"
+            v-bind="_alertDialogHeader"
+            :una
+          >
+            <slot name="header">
+              <AlertDialogTitle
+                v-if="title !== DEFAULT_TITLE || !!$slots.title"
+                v-bind="_alertDialogTitle"
+                :una
+              >
+                <slot name="title">
+                  {{ title }}
+                </slot>
+              </AlertDialogTitle>
+
+              <AlertDialogDescription
+                v-if="description !== DEFAULT_DESCRIPTION || !!$slots.description"
+                v-bind="_alertDialogDescription"
+                :una
+              >
+                <slot name="description">
+                  {{ description }}
+                </slot>
+              </AlertDialogDescription>
+            </slot>
+          </AlertDialogHeader>
+
+          <!-- Footer -->
+          <AlertDialogFooter
+            v-bind="_alertDialogFooter"
+            :una
+          >
+            <slot name="footer">
+              <slot name="cancel-wrapper">
+                <AlertDialogCancel
+                  v-bind="_alertDialogCancel"
+                  @click="emits('cancel', $event)"
+                >
+                  <slot name="cancel" />
+                </AlertDialogCancel>
+              </slot>
+
+              <slot name="action-wrapper">
+                <AlertDialogAction
+                  v-bind="_alertDialogAction"
+                  @click="emits('action', $event)"
+                >
+                  <slot name="action" />
+                </AlertDialogAction>
+              </slot>
+            </slot>
+          </AlertDialogFooter>
+        </slot>
+      </AlertDialogContent>
+    </slot>
+  </AlertDialogRoot>
+</template>

package/dist/runtime/components/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { NAlertDialogActionProps } from '../../types'
+import { AlertDialogAction } from 'reka-ui'
+import Button from '../elements/Button.vue'
+
+const props = withDefaults(defineProps<NAlertDialogActionProps>(), {
+  btn: 'solid-primary',
+  label: 'Continue',
+})
+</script>
+
+<template>
+  <AlertDialogAction
+    as-child
+  >
+    <Button
+      v-bind="props"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </Button>
+  </AlertDialogAction>
+</template>

package/dist/runtime/components/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { NAlertDialogCancelProps } from '../../types'
+import { AlertDialogCancel } from 'reka-ui'
+import { cn } from '../../utils'
+import Button from '../elements/Button.vue'
+
+const props = withDefaults(defineProps<NAlertDialogCancelProps>(), {
+  btn: 'solid-gray',
+  label: 'Cancel',
+})
+</script>
+
+<template>
+  <AlertDialogCancel
+    as-child
+  >
+    <Button
+      v-bind="props"
+      :class="cn(
+        'alert-dialog-cancel',
+        props.class,
+      )"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </Button>
+  </AlertDialogCancel>
+</template>

package/dist/runtime/components/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits } from 'reka-ui'
+import type { NAlertDialogContentProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  AlertDialogContent,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../utils'
+import AlertDialogOverlay from './AlertDialogOverlay.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NAlertDialogContentProps>(), {
+  overlay: true,
+})
+const emits = defineEmits<AlertDialogContentEmits>()
+const delegatedProps = reactiveOmit(props, ['class', 'una', '_alertDialogOverlay'])
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const contentEvents = computed(() => {
+  if (props.preventClose) {
+    return {
+      pointerDownOutside: (e: Event) => e.preventDefault(),
+      interactOutside: (e: Event) => e.preventDefault(),
+      escapeKeyDown: (e: Event) => e.preventDefault(),
+      closeAutoFocus: (e: Event) => e.preventDefault(),
+    }
+  }
+
+  return {
+    closeAutoFocus: (e: Event) => e.preventDefault(),
+  }
+})
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      v-if="overlay"
+      v-bind="_alertDialogOverlay"
+      :una
+    />
+
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn(
+        '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%',
+        'alert-dialog-content',
+        props.una?.alertDialogContent,
+        props.class,
+      )"
+      v-on="contentEvents"
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

package/dist/runtime/components/alert-dialog/AlertDialogDescription.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { NAlertDialogDescriptionProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { AlertDialogDescription } from 'reka-ui'
+import { cn } from '../../utils'
+
+const props = defineProps<NAlertDialogDescriptionProps>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'una')
+</script>
+
+<template>
+  <AlertDialogDescription
+    data-slot="alert-dialog-description"
+    v-bind="delegatedProps"
+    :class="cn(
+      'alert-dialog-description',
+      props.una?.alertDialogDescription,
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>

package/dist/runtime/components/alert-dialog/AlertDialogFooter.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NAlertDialogFooterProps } from '../../types'
+import { cn } from '../../utils'
+
+const props = defineProps<NAlertDialogFooterProps>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-dialog-footer"
+    :class="
+      cn(
+        'alert-dialog-footer',
+        props.una?.alertDialogFooter,
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/alert-dialog/AlertDialogHeader.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { NAlertDialogHeaderProps } from '../../types'
+import { cn } from '../../utils'
+
+const props = defineProps<NAlertDialogHeaderProps>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-dialog-header"
+    :class="cn(
+      'alert-dialog-header',
+      props.una?.alertDialogHeader,
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/alert-dialog/AlertDialogOverlay.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { NAlertDialogOverlayProps } from '../../types'
+import { DialogOverlay } from 'reka-ui'
+import { cn } from '../../utils'
+
+const props = defineProps<NAlertDialogOverlayProps>()
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="alert-dialog-overlay"
+    :class="cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ',
+      'alert-dialog-overlay',
+      props.una?.alertDialogOverlay,
+      props.class,
+    )"
+  >
+    <slot />
+  </DialogOverlay>
+</template>

package/dist/runtime/components/alert-dialog/AlertDialogTitle.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { NAlertDialogTitleProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { AlertDialogTitle } from 'reka-ui'
+import { cn } from '../../utils'
+
+const props = defineProps<NAlertDialogTitleProps>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'una')
+</script>
+
+<template>
+  <AlertDialogTitle
+    data-slot="alert-dialog-title"
+    v-bind="delegatedProps"
+    :class="cn(
+      'alert-dialog-title',
+      props.una?.alertDialogTitle,
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>

package/dist/runtime/components/alert-dialog/AlertDialogTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { NAlertDialogTriggerProps } from '../../types'
+import { AlertDialogTrigger } from 'reka-ui'
+
+const props = defineProps<NAlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger
+    data-slot="alert-dialog-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </AlertDialogTrigger>
+</template>

package/dist/runtime/components/combobox/Combobox.vue

@@ -2,6 +2,7 @@
 import type { AcceptableValue, ComboboxRootEmits } from 'reka-ui'
 import type { ExtractItemType, NComboboxGroupProps, NComboboxProps } from '../../types'
 import { reactiveOmit } from '@vueuse/core'
+import { defu } from 'defu'
 import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { cn } from '../../utils'
 </script>
@@ -21,7 +22,7 @@ import ComboboxViewport from './ComboboxViewport.vue'
 
 const props = withDefaults(defineProps<NComboboxProps<T>>(), {
   textEmpty: 'No items found.',
-  size: 'md',
+  size: 'sm',
 })
 const emits = defineEmits<ComboboxRootEmits<ExtractItemType<T>>>()
 
@@ -162,7 +163,6 @@ function isItemSelected(item: ExtractItemType<T> | null | undefined): boolean {
                 :id
                 :status
                 :class="cn(
-                  'text-0.875em',
                   props._comboboxTrigger?.class,
                 )"
                 :size
@@ -179,6 +179,15 @@ function isItemSelected(item: ExtractItemType<T> | null | undefined): boolean {
                 :display-value="(val: unknown) => getDisplayValue(val)"
                 name="frameworks"
                 :status
+                :class="cn(
+                  'text-1em',
+                  props._comboboxInput?.class,
+                )"
+                :una="defu(props._comboboxInput?.una, {
+                  inputLeading: 'text-1.1428571428571428em',
+                  inputTrailing: 'text-1.1428571428571428em',
+                  inputStatusIconBase: 'text-1.1428571428571428em',
+                })"
                 :size
                 v-bind="props._comboboxInput"
               />
@@ -197,11 +206,16 @@ function isItemSelected(item: ExtractItemType<T> | null | undefined): boolean {
           <slot name="input-wrapper" :model-value :open>
             <ComboboxInput
               v-if="$slots.trigger || $slots.triggerRoot"
-              :size
               :class="cn(
-                'border-0 border-b-1 rounded-none focus-visible:ring-0',
+                'border-0 border-b-1 rounded-none text-1em focus-visible:ring-0',
                 props._comboboxInput?.class,
               )"
+              :una="defu(props._comboboxInput?.una, {
+                inputLeading: 'text-1.1428571428571428em',
+                inputTrailing: 'text-1.1428571428571428em',
+                inputStatusIconBase: 'text-1.1428571428571428em',
+              })"
+              :size
               v-bind="props._comboboxInput"
             />
           </slot>
@@ -215,6 +229,9 @@ function isItemSelected(item: ExtractItemType<T> | null | undefined): boolean {
             >
               <ComboboxEmpty
                 v-bind="props._comboboxEmpty"
+                :class="cn(
+                  props._comboboxEmpty?.class,
+                )"
                 :una
               >
                 <slot name="empty">
@@ -237,7 +254,6 @@ function isItemSelected(item: ExtractItemType<T> | null | undefined): boolean {
                       :size
                       v-bind="props._comboboxItem"
                       :class="cn(
-                        'text-0.875em',
                         props._comboboxItem?.class,
                       )"
                       :una
@@ -284,7 +300,6 @@ function isItemSelected(item: ExtractItemType<T> | null | undefined): boolean {
                       :size
                       v-bind="{ ...props._comboboxItem, ...group._comboboxItem }"
                       :class="cn(
-                        'text-0.875em',
                         props._comboboxItem?.class,
                       )"
                       :una

package/dist/runtime/components/combobox/ComboboxInput.vue

@@ -10,9 +10,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<NComboboxInputProps>(), {
-  leading: 'combobox-input-leading-icon',
-})
+const props = defineProps<NComboboxInputProps>()
 
 const emits = defineEmits<ComboboxInputEmits>()
 

package/dist/runtime/components/combobox/ComboboxItem.vue

@@ -5,7 +5,9 @@ import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 import { cn } from '../../utils'
 
-const props = defineProps<NComboboxItemProps<T>>()
+const props = withDefaults(defineProps<NComboboxItemProps<T>>(), {
+  size: 'sm',
+})
 const emits = defineEmits<ComboboxItemEmits>()
 
 const delegatedProps = computed(() => {

package/dist/runtime/components/combobox/ComboboxTrigger.vue

@@ -45,7 +45,7 @@ const status = computed(() => props.status ?? 'default')
     v-bind="forwardedProps"
     as-child
   >
-    <slot name="root">
+    <slot name="wrapper">
       <Button
         :id
         :btn="statusClassVariants.btn ? undefined : props.btn"
@@ -56,6 +56,7 @@ const status = computed(() => props.status ?? 'default')
           props.class,
         )"
         tabindex="0"
+        :size
         :una="{
           ...props.una,
           btn: props.una?.comboboxTrigger,

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

@@ -11,6 +11,7 @@ const rootProps = reactiveOmit(props, ['label', 'class'])
 
 <template>
   <Label
+    data-slot="label"
     v-bind="rootProps"
     :class="
       cn(

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

@@ -24,6 +24,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <ProgressRoot
+    v-slot="{ modelValue }"
     v-bind="delegatedProps"
     :class="
       cn(
@@ -35,14 +36,14 @@ const delegatedProps = computed(() => {
     :rounded
     :progress
   >
-    <slot>
+    <slot :model-value>
       <ProgressIndicator
-        v-if="props.modelValue !== undefined || props.modelValue === null"
+        v-if="modelValue !== undefined || modelValue === null"
         :class="cn(
           'progress-indicator',
           props.una?.progressIndicator,
         )"
-        :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+        :style="`transform: translateX(-${100 - (modelValue ?? 0)}%);`"
       />
       <template
         v-else

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

@@ -42,6 +42,7 @@ const id = computed(() => props.id ?? randomId('checkbox'))
     <CheckboxRoot
       v-bind="{ ...forwarded, ...$attrs }"
       :id="id"
+      v-slot="{ ...slotProps }"
       :class="
         cn(
           'peer checkbox',
@@ -58,9 +59,9 @@ const id = computed(() => props.id ?? randomId('checkbox'))
       >
         <slot name="icon">
           <Icon
-            :name="props.modelValue === 'indeterminate'
+            :name="slotProps.modelValue === 'indeterminate'
               ? props.una?.checkboxIndeterminateIcon ?? 'checkbox-indeterminate-icon'
-              : props.modelValue
+              : slotProps.modelValue
                 ? props.una?.checkboxCheckedIcon ?? 'checkbox-checked-icon'
                 : props.una?.checkboxUncheckedIcon ?? 'checkbox-unchecked-icon'"
             :class="cn('checkbox-icon-base', una?.checkboxIconBase)"

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

@@ -130,11 +130,11 @@ defineExpose({
   >
     <div
       v-if="isLeading"
-      :class="[
+      :class="cn(
         una?.inputLeadingWrapper,
         reverseClassVariants.leadingWrapper,
         statusClassVariants.text,
-      ]"
+      )"
     >
       <slot name="leading">
         <NIcon
@@ -192,6 +192,7 @@ defineExpose({
         :name="statusClassVariants.icon"
         :class="cn(
           'input-status-icon-base',
+          una?.inputStatusIconBase,
         )"
       />
 

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SliderRootEmits } from 'reka-ui'
 import type { NSliderProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 import { cn } from '../../utils'
@@ -9,17 +10,14 @@ const props = withDefaults(defineProps<NSliderProps>(), {
   slider: 'primary',
 })
 const emits = defineEmits<SliderRootEmits>()
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const rootProps = reactiveOmit(props, ['class', 'una', 'slider', 'una'])
+const forwarded = useForwardPropsEmits(rootProps, emits)
 const isVertical = computed(() => props.orientation === 'vertical')
 </script>
 
 <template>
   <SliderRoot
+    v-slot="{ modelValue }"
     :class="cn(
       'slider-root',
       isVertical && 'slider-root-vertical',

package/dist/runtime/components/forms/radio-group/RadioGroup.vue

@@ -67,6 +67,7 @@ function getItemDescription(item: NonNullable<T | NRadioGroupItemProps>): string
 
 <template>
   <RadioGroupRoot
+    v-slot="{ modelValue }"
     :class="cn(
       'radio-group',
       orientation === 'horizontal' ? 'radio-group-orientation-horizontal' : 'radio-group-orientation-vertical',
@@ -75,7 +76,7 @@ function getItemDescription(item: NonNullable<T | NRadioGroupItemProps>): string
     )"
     v-bind="forwarded"
   >
-    <slot>
+    <slot :model-value>
       <template v-if="items?.length">
         <RadioGroupItem
           v-for="item in items"

package/dist/runtime/components/resizable/ResizableHandle.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits } from 'reka-ui'
+import type { NResizableHandleProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { SplitterResizeHandle, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../utils'
+import Icon from '../elements/Icon.vue'
+
+const props = withDefaults(defineProps<NResizableHandleProps>(), {
+  resizableHandle: 'solid-gray',
+})
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = reactiveOmit(props, ['class', 'una', 'icon'])
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const icon = computed(() =>
+  typeof props.icon === 'string'
+    ? props.icon
+    : props.icon === true
+      ? 'resizable-handle-icon-name'
+      : false,
+)
+</script>
+
+<template>
+  <SplitterResizeHandle
+    v-bind="forwarded"
+    data-slot="resizable-handle"
+    :resizable-handle
+    :class="
+      cn(
+        'resizable-handle',
+        props.una?.resizableHandle,
+        props.class,
+      )"
+  >
+    <slot>
+      <template v-if="icon">
+        <div
+          :class="cn(
+            'resizable-handle-icon-wrapper',
+            props.una?.resizableHandleIconWrapper,
+          )"
+        >
+          <slot name="icon">
+            <Icon
+              :name="icon"
+              :class="cn(
+                'resizable-handle-icon',
+                props.una?.resizableHandleIcon,
+              )"
+            />
+          </slot>
+        </div>
+      </template>
+    </slot>
+  </SplitterResizeHandle>
+</template>

package/dist/runtime/components/resizable/ResizablePanel.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SplitterPanelEmits } from 'reka-ui'
+import type { NResizablePanelProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { SplitterPanel, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '../../utils'
+
+const props = defineProps<NResizablePanelProps>()
+const emits = defineEmits<SplitterPanelEmits>()
+
+const delegatedProps = reactiveOmit(props, ['class', 'una'])
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterPanel
+    v-slot="{ ...slotProps }"
+    data-slot="resizable-panel"
+    v-bind="forwarded"
+    :class="cn(
+      'resizable-panel',
+      props.una?.resizablePanel,
+      props.class,
+    )"
+  >
+    <slot v-bind="slotProps" />
+  </SplitterPanel>
+</template>

package/dist/runtime/components/resizable/ResizablePanelGroup.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits } from 'reka-ui'
+import type { NResizablePanelGroupProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { SplitterGroup, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '../../utils'
+
+const props = defineProps<NResizablePanelGroupProps>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = reactiveOmit(props, ['class', 'una'])
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup
+    v-slot="{ ...slotProps }"
+    data-slot="resizable-panel-group"
+    v-bind="forwarded"
+    :class="cn(
+      'resizable-panel-group',
+      props.una?.resizablePanelGroup,
+      props.class,
+    )"
+  >
+    <slot v-bind="slotProps" />
+  </SplitterGroup>
+</template>

package/dist/runtime/types/alert-dialog.d.ts

@@ -0,0 +1,98 @@
+import type { AlertDialogActionProps, AlertDialogCancelProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogOverlayProps, AlertDialogProps, AlertDialogTitleProps, AlertDialogTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { NButtonProps } from './button.js';
+export interface NAlertDialogProps extends AlertDialogProps, Pick<NAlertDialogContentProps, 'preventClose' | 'overlay' | '_alertDialogCancel' | '_alertDialogAction' | '_alertDialogOverlay'> {
+    /**
+     * The title of the dialog.
+     */
+    title?: string;
+    /**
+     * The description of the dialog.
+     */
+    description?: string;
+    _alertDialogTitle?: NAlertDialogTitleProps;
+    _alertDialogDescription?: NAlertDialogDescriptionProps;
+    _alertDialogContent?: NAlertDialogContentProps;
+    _alertDialogTrigger?: NAlertDialogTriggerProps;
+    _alertDialogHeader?: NAlertDialogHeaderProps;
+    _alertDialogFooter?: NAlertDialogFooterProps;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/alert-dialog.ts
+     */
+    una?: NAlertDialogUnaProps;
+}
+interface BaseExtensions {
+    class?: HTMLAttributes['class'];
+}
+export interface NAlertDialogTitleProps extends AlertDialogTitleProps, BaseExtensions {
+    una?: Pick<NAlertDialogUnaProps, 'alertDialogTitle'>;
+}
+export interface NAlertDialogDescriptionProps extends AlertDialogDescriptionProps, BaseExtensions {
+    una?: Pick<NAlertDialogUnaProps, 'alertDialogDescription'>;
+}
+export interface NAlertDialogTriggerProps extends AlertDialogTriggerProps {
+}
+export interface NAlertDialogContentProps extends AlertDialogContentProps, BaseExtensions {
+    /**
+     * Prevent close.
+     *
+     * @default true
+     */
+    preventClose?: boolean;
+    /**
+     * Show overlay.
+     *
+     * @default true
+     */
+    overlay?: boolean;
+    /**
+     * The cancel button props.
+     */
+    _alertDialogCancel?: NAlertDialogCancelProps;
+    /**
+     * The action button props.
+     */
+    _alertDialogAction?: NAlertDialogActionProps;
+    /**
+     * The overlay props.
+     */
+    _alertDialogOverlay?: NAlertDialogOverlayProps;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/alert-dialog.ts
+     */
+    una?: Pick<NAlertDialogUnaProps, 'alertDialogContent' | 'alertDialogOverlay'>;
+}
+export interface NAlertDialogOverlayProps extends BaseExtensions, AlertDialogOverlayProps {
+    una?: Pick<NAlertDialogUnaProps, 'alertDialogOverlay'>;
+}
+export interface NAlertDialogCancelProps extends AlertDialogCancelProps, NButtonProps {
+    /**
+     * The cancel callback, triggered when the cancel button is clicked.
+     */
+    onClick?: (e: Event) => void;
+}
+export interface NAlertDialogActionProps extends AlertDialogActionProps, NButtonProps {
+    /**
+     * The action callback, triggered when the action button is clicked.
+     */
+    onClick?: (e: Event) => void;
+}
+export interface NAlertDialogHeaderProps extends BaseExtensions {
+    una?: Pick<NAlertDialogUnaProps, 'alertDialogHeader'>;
+}
+export interface NAlertDialogFooterProps extends BaseExtensions {
+    una?: Pick<NAlertDialogUnaProps, 'alertDialogFooter'>;
+}
+export interface NAlertDialogUnaProps {
+    alertDialogTitle?: HTMLAttributes['class'];
+    alertDialogDescription?: HTMLAttributes['class'];
+    alertDialogOverlay?: HTMLAttributes['class'];
+    alertDialogContent?: HTMLAttributes['class'];
+    alertDialogHeader?: HTMLAttributes['class'];
+    alertDialogFooter?: HTMLAttributes['class'];
+}
+export {};

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

@@ -1,5 +1,6 @@
 export * from './accordion.js';
 export * from './alert.js';
+export * from './alert-dialog.js';
 export * from './aspect-ratio.js';
 export * from './avatar.js';
 export * from './avatar-group.js';
@@ -25,6 +26,7 @@ export * from './pagination.js';
 export * from './popover.js';
 export * from './progress.js';
 export * from './radio-group.js';
+export * from './resizable.js';
 export * from './scroll-area.js';
 export * from './select.js';
 export * from './separator.js';

package/dist/runtime/types/index.js

@@ -1,5 +1,6 @@
 export * from "./accordion.js";
 export * from "./alert.js";
+export * from "./alert-dialog.js";
 export * from "./aspect-ratio.js";
 export * from "./avatar.js";
 export * from "./avatar-group.js";
@@ -25,6 +26,7 @@ export * from "./pagination.js";
 export * from "./popover.js";
 export * from "./progress.js";
 export * from "./radio-group.js";
+export * from "./resizable.js";
 export * from "./scroll-area.js";
 export * from "./select.js";
 export * from "./separator.js";

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

@@ -106,6 +106,7 @@ export interface NInputProps {
     una?: {
         input?: string;
         inputLoading?: string;
+        inputStatusIconBase?: string;
         inputTrailing?: string;
         inputLeading?: string;
         inputWrapper?: string;

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

@@ -0,0 +1,46 @@
+import type { SplitterGroupProps, SplitterPanelProps, SplitterResizeHandleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+interface BaseExtension {
+    /** CSS class for the component */
+    class?: HTMLAttributes['class'];
+}
+export interface NResizablePanelGroupProps extends SplitterGroupProps, BaseExtension {
+    /** Additional properties for the una component */
+    una?: Pick<NResizableUnaProps, 'resizablePanelGroup'>;
+}
+export interface NResizablePanelProps extends SplitterPanelProps, BaseExtension {
+    /** Additional properties for the una component */
+    una?: Pick<NResizableUnaProps, 'resizablePanel'>;
+}
+export interface NResizableHandleProps extends SplitterResizeHandleProps, BaseExtension {
+    /**
+     * Allows you to add `UnaUI` resizable handle 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/resizable.ts
+     * @example
+     * resizable-handle="outline-yellow"
+     */
+    resizableHandle?: string;
+    /**
+     * Custom handle icon
+     * @example
+     * icon="i-lucide-grip-vertical"
+     */
+    icon?: boolean | HTMLAttributes['class'];
+    /** Additional properties for the una component */
+    una?: Pick<NResizableUnaProps, 'resizableHandle' | 'resizableHandleIconWrapper' | 'resizableHandleIcon'>;
+}
+interface NResizableUnaProps {
+    /** CSS class for the resizable panel */
+    resizablePanel?: HTMLAttributes['class'];
+    /** CSS class for the resizable panel group */
+    resizablePanelGroup?: HTMLAttributes['class'];
+    /** CSS class for the resizable handle */
+    resizableHandle?: HTMLAttributes['class'];
+    /** CSS class for the resizable handle icon wrapper */
+    resizableHandleIconWrapper?: HTMLAttributes['class'];
+    /** CSS class for the resizable handle icon */
+    resizableHandleIcon?: HTMLAttributes['class'];
+}
+export {};

package/dist/types.d.mts

@@ -1 +1,7 @@
-export { type ModuleOptions, default } from './module.js'
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.js'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.js'

package/dist/types.d.ts

@@ -1 +1,7 @@
-export { type ModuleOptions, default } from './module'
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.52.1",
+  "version": "0.54.0",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -59,8 +59,8 @@
     "typescript": "5.6.3",
     "unocss": "^66.0.0",
     "unocss-preset-animations": "^1.2.1",
-    "@una-ui/extractor-vue-script": "^0.52.1",
-    "@una-ui/preset": "^0.52.1"
+    "@una-ui/extractor-vue-script": "^0.54.0",
+    "@una-ui/preset": "^0.54.0"
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.39",