@una-ui/nuxt 0.55.4 → 0.56.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.55.4",
+  "version": "0.56.1",
   "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.55.4";
+const version = "0.56.1";
 
 const module = defineNuxtModule({
   meta: {

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

@@ -29,6 +29,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

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

@@ -30,6 +30,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

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

@@ -34,6 +34,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

package/dist/runtime/components/drawer/DrawerClose.vue

@@ -27,6 +27,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

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

@@ -42,6 +42,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

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

@@ -31,6 +31,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }
@@ -45,6 +47,8 @@ const mergeVariants = computed(() => {
     "dropdown-menu": props.dropdownMenu,
     "toggle-on": props.toggleOn,
     "toggle-off": props.toggleOff,
+    "tabs-active": props.tabsActive,
+    "tabs-inactive": props.tabsInactive,
     "navigation-menu": props.navigationMenu,
     "navigation-menu-link": props.navigationMenuLink
   };

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

@@ -34,6 +34,8 @@ const props = defineProps({
   paginationSelected: { type: String, required: false },
   paginationUnselected: { type: String, required: false },
   dropdownMenu: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

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

@@ -28,6 +28,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

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

@@ -54,6 +54,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false },

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

@@ -40,6 +40,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

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

@@ -33,6 +33,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false },

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

@@ -27,6 +27,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false },

package/dist/runtime/components/elements/pagination/PaginationFirst.vue

@@ -30,6 +30,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

package/dist/runtime/components/elements/pagination/PaginationLast.vue

@@ -30,6 +30,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

package/dist/runtime/components/elements/pagination/PaginationListItem.vue

@@ -33,6 +33,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

package/dist/runtime/components/elements/pagination/PaginationNext.vue

@@ -30,6 +30,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

package/dist/runtime/components/elements/pagination/PaginationPrev.vue

@@ -30,6 +30,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

package/dist/runtime/components/elements/tabs/Tabs.vue

@@ -1,15 +1,16 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { useForwardPropsEmits } from "reka-ui";
+import { TabsRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../../../utils";
 import TabsContent from "./TabsContent.vue";
 import TabsList from "./TabsList.vue";
-import TabsRoot from "./TabsRoot.vue";
 import TabsTrigger from "./TabsTrigger.vue";
 const props = defineProps({
-  items: { type: Array, required: true },
+  items: { type: Array, required: false },
   _tabsContent: { type: Object, required: false },
   _tabsTrigger: { type: Object, required: false },
   _tabsList: { type: Object, required: false },
+  una: { type: Object, required: false },
   defaultValue: { type: null, required: false },
   orientation: { type: String, required: false },
   dir: { type: String, required: false },
@@ -19,51 +20,68 @@ const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },
-  size: { type: null, required: false },
-  tabs: { type: String, required: false },
+  size: { type: null, required: false, default: "sm" },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   disabled: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:modelValue"]);
-const delegatedProps = reactiveOmit(props, ["class", "items", "tabs", "disabled", "size"]);
+const delegatedProps = reactiveOmit(props, ["class", "items", "tabsActive", "tabsInactive", "disabled", "size", "una"]);
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <TabsRoot
     v-bind="forwarded"
-    :default-value="defaultValue"
+    :class="cn(
+  'tabs',
+  props.una?.tabs,
+  props.class
+)"
   >
-    <TabsList v-bind="forwarded._tabsList">
-      <slot name="list" :items="items">
-        <template
-          v-for="item in items"
-          :key="item.value"
-        >
-          <TabsTrigger
-            :tabs="item?._tabsTrigger?.tabs || item.tabs || props.tabs"
-            :disabled="item?._tabsTrigger?.disabled || item.disabled || props.disabled"
-            :value="item.value"
-            :size="item?._tabsTrigger?.size ?? props.size"
-            v-bind="{ ...forwarded._tabsTrigger, ...item?._tabsTrigger }"
+    <slot>
+      <TabsList
+        v-bind="forwarded._tabsList"
+        :una
+        :size
+      >
+        <slot name="list" :items="items">
+          <template
+            v-for="item in items"
+            :key="item.value"
           >
-            <slot name="trigger" :item="item" :disabled="item?._tabsTrigger?.disabled || item.disabled || props.disabled">
-              {{ item.name }}
-            </slot>
-          </TabsTrigger>
-        </template>
-      </slot>
-    </TabsList>
-    <template
-      v-for="item in items"
-      :key="item.value"
-    >
-      <TabsContent v-bind="forwarded._tabsContent" :value="item.value">
-        <slot name="content" :item="item">
-          <component :is="typeof item.content === 'string' ? 'span' : item.content">
-            {{ typeof item.content === "string" ? item.content : "" }}
-          </component>
+            <TabsTrigger
+              :tabs-active="item?._tabsTrigger?.tabsActive || item.tabsActive || props.tabsActive"
+              :tabs-inactive="item?._tabsTrigger?.tabsInactive || item.tabsInactive || props.tabsInactive"
+              :disabled="item?._tabsTrigger?.disabled || item.disabled || props.disabled"
+              :value="item.value"
+              :size
+              v-bind="{ ...forwarded._tabsTrigger, ...item?._tabsTrigger }"
+              :una
+            >
+              <slot name="trigger" :item="item" :disabled="item?._tabsTrigger?.disabled || item.disabled || props.disabled">
+                {{ item.name }}
+              </slot>
+            </TabsTrigger>
+          </template>
         </slot>
-      </TabsContent>
-    </template>
+      </TabsList>
+      <template
+        v-for="item in items"
+        :key="item.value"
+      >
+        <TabsContent
+          v-bind="forwarded._tabsContent"
+          :value="item.value"
+          :una
+        >
+          <slot name="content" :item="item">
+            <component :is="typeof item.content === 'string' ? 'span' : item.content">
+              {{ typeof item.content === "string" ? item.content : "" }}
+            </component>
+          </slot>
+        </TabsContent>
+      </template>
+    </slot>
   </TabsRoot>
 </template>

package/dist/runtime/components/elements/tabs/Tabs.vue.d.ts

@@ -1,24 +1,28 @@
 import type { NTabsProps } from '../../../types/tabs.js';
-declare var __VLS_8: {
-    items: any[];
-}, __VLS_13: {
+declare var __VLS_6: {}, __VLS_11: {
+    items: any[] | undefined;
+}, __VLS_16: {
     item: any;
     disabled: any;
-}, __VLS_18: {
+}, __VLS_21: {
     item: any;
 };
 type __VLS_Slots = {} & {
-    list?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_6) => any;
 } & {
-    trigger?: (props: typeof __VLS_13) => any;
+    list?: (props: typeof __VLS_11) => any;
 } & {
-    content?: (props: typeof __VLS_18) => any;
+    trigger?: (props: typeof __VLS_16) => any;
+} & {
+    content?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NTabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (payload: string | number) => any;
 }, string, import("vue").PublicProps, Readonly<NTabsProps> & Readonly<{
     "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    size: import("vue").HTMLAttributes["class"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/elements/tabs/TabsContent.vue

@@ -1,6 +1,6 @@
 <script setup>
+import { reactiveOmit } from "@vueuse/core";
 import { TabsContent } from "reka-ui";
-import { computed } from "vue";
 import { cn } from "../../../utils";
 defineOptions({
   inheritAttrs: false
@@ -14,14 +14,12 @@ const props = defineProps({
   class: { type: null, required: false },
   size: { type: null, required: false }
 });
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
-});
+const delegatedProps = reactiveOmit(props, ["class"]);
 </script>
 
 <template>
   <TabsContent
+    data-slot="tabs-content"
     v-bind="{ ...delegatedProps, ...$attrs }"
     :class="cn(
   'tabs-content',

package/dist/runtime/components/elements/tabs/TabsList.vue

@@ -1,6 +1,6 @@
 <script setup>
+import { reactiveOmit } from "@vueuse/core";
 import { TabsList } from "reka-ui";
-import { computed } from "vue";
 import { cn } from "../../../utils";
 const props = defineProps({
   una: { type: Object, required: false },
@@ -8,21 +8,20 @@ const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },
-  size: { type: null, required: false }
-});
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
+  size: { type: null, required: false, default: "sm" }
 });
+const delegatedProps = reactiveOmit(props, ["class", "size"]);
 </script>
 
 <template>
   <TabsList
+    data-slot="tabs-list"
+    :size
     v-bind="delegatedProps"
     :class="cn(
   'tabs-list',
-  props.class,
-  props.una?.tabsList
+  props.una?.tabsList,
+  props.class
 )"
   >
     <slot />

package/dist/runtime/components/elements/tabs/TabsList.vue.d.ts

@@ -3,7 +3,9 @@ declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<NTabsListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NTabsListProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<NTabsListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NTabsListProps> & Readonly<{}>, {
+    size: import("vue").HTMLAttributes["class"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/elements/tabs/TabsTrigger.vue

@@ -1,10 +1,9 @@
 <script setup>
+import { reactiveOmit } from "@vueuse/core";
 import { TabsTrigger } from "reka-ui";
-import { computed } from "vue";
 import { cn } from "../../../utils";
 import Button from "../Button.vue";
 const props = defineProps({
-  tabs: { type: String, required: false },
   una: { type: Object, required: false },
   value: { type: [String, Number], required: true },
   disabled: { type: Boolean, required: false },
@@ -21,6 +20,7 @@ const props = defineProps({
   btn: { type: String, required: false },
   leading: { type: String, required: false },
   trailing: { type: String, required: false },
+  size: { type: String, required: false, default: "sm" },
   square: { type: null, required: false },
   rounded: { type: null, required: false },
   class: { type: null, required: false },
@@ -31,30 +31,29 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false, default: "soft-black" },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
-  ariaLabel: { type: String, required: false },
-  size: { type: null, required: false }
-});
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
+  ariaLabel: { type: String, required: false }
 });
+const delegatedProps = reactiveOmit(props, ["class", "size"]);
 </script>
 
 <template>
   <TabsTrigger
     v-bind="delegatedProps"
+    :size
+    data-slot="tabs-trigger"
     :class="cn(
-  'tabs-trigger',
+  'tabs-trigger h-[calc(100%-1px)]',
+  props.una?.tabsTrigger,
   props.class
 )"
-    :una="{
-  ...props.una,
-  btnDefaultVariant: props.tabs ? `tabs-${props.tabs}` : 'tabs-default-variant'
-}"
     :as="Button"
   >
-    <slot />
+    <template v-for="(_, name) in $slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
   </TabsTrigger>
 </template>

package/dist/runtime/components/elements/tabs/TabsTrigger.vue.d.ts

@@ -1,9 +1,12 @@
 import type { NTabsTriggerProps } from '../../../types/tabs.js';
-declare var __VLS_6: {};
+declare var __VLS_7: string | number, __VLS_8: any;
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<NTabsTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NTabsTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<NTabsTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NTabsTriggerProps> & Readonly<{}>, {
+    size: string;
+    tabsActive: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -25,6 +25,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false },

package/dist/runtime/components/forms/form/FormField.vue

@@ -51,72 +51,65 @@ const statusClassVariants = computed(() => {
     >
       <slot name="top">
         <div
+          v-if="label || hint || description || $slots.label || $slots.hint || $slots.description"
           :class="cn(
   'form-field-top-wrapper',
   una?.formFieldTopWrapper
 )"
         >
           <div
-            v-if="label || hint || description"
+            v-if="label || hint"
             :class="cn(
-  'form-field-top-wrapper',
-  una?.formFieldTopWrapper
+  'form-field-top-wrapper-inner',
+  una?.formFieldTopWrapperInner
 )"
           >
             <div
-              v-if="label || hint"
               :class="cn(
-  'form-field-top-wrapper-inner',
-  una?.formFieldTopWrapperInner
-)"
-            >
-              <div
-                :class="cn(
   'form-field-label-wrapper',
   una?.formFieldLabelWrapper
 )"
-              >
-                <slot name="label">
-                  <FormLabel
-                    :una
-                  >
-                    <span>
-                      {{ label }}
-                    </span>
+            >
+              <slot name="label">
+                <FormLabel
+                  :una
+                >
+                  <span>
+                    {{ label }}
+                  </span>
 
-                    <span
-                      v-if="required"
-                      :class="cn(
+                  <span
+                    v-if="required"
+                    :class="cn(
   'form-field-label-required',
   una?.formFieldLabelRequired
 )"
-                    />
-                  </FormLabel>
-                </slot>
-              </div>
+                  />
+                </FormLabel>
+              </slot>
+            </div>
 
-              <slot name="hint">
-                <span
-                  v-if="hint"
-                  :class="cn(
+            <slot name="hint">
+              <span
+                v-if="hint"
+                :class="cn(
   'form-field-hint',
   una?.formFieldHint
 )"
-                >
-                  {{ hint }}
-                </span>
-              </slot>
-            </div>
-
-            <slot name="description">
-              <FormDescription
-                v-if="description"
-                :una
               >
-                {{ description }}
-              </FormDescription>
+                {{ hint }}
+              </span>
             </slot>
           </div>
+
+          <slot name="description">
+            <FormDescription
+              v-if="description"
+              :una
+            >
+              {{ description }}
+            </FormDescription>
+          </slot>
         </div>
       </slot>
 
@@ -131,6 +124,7 @@ const statusClassVariants = computed(() => {
 
       <slot name="bottom">
         <div
+          v-if="$slots.message || message || errorMessage"
           :class="cn(
   'form-field-bottom-wrapper',
   una?.formFieldBottomWrapper

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

@@ -36,6 +36,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbLink.vue

@@ -28,6 +28,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

package/dist/runtime/components/navigation-menu/NavigationMenuContentItem.vue

@@ -32,6 +32,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   ariaLabel: { type: String, required: false },
   size: { type: null, required: false }

package/dist/runtime/components/navigation-menu/NavigationMenuItem.vue

@@ -31,6 +31,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false },
   active: { type: Boolean, required: false },

package/dist/runtime/components/navigation-menu/NavigationMenuLink.vue

@@ -34,6 +34,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   ariaLabel: { type: String, required: false },
   size: { type: null, required: false }

package/dist/runtime/components/navigation-menu/NavigationMenuTrigger.vue

@@ -37,6 +37,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }
 });

package/dist/runtime/components/overlays/toast/ToastAction.vue

@@ -31,6 +31,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false },

package/dist/runtime/components/sheet/SheetClose.vue

@@ -28,6 +28,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false, default: "Close" }

package/dist/runtime/components/sidebar/SidebarTrigger.vue

@@ -27,6 +27,8 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },
   ariaLabel: { type: String, required: false }

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

@@ -11,6 +11,8 @@ interface BaseExtensionProps {
     dropdownMenu?: string;
     toggleOn?: string;
     toggleOff?: string;
+    tabsActive?: string;
+    tabsInactive?: string;
     navigationMenu?: string;
     navigationMenuLink?: string;
     ariaLabel?: string;

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

@@ -5,26 +5,17 @@ interface BaseExtensions {
     class?: HTMLAttributes['class'];
     size?: HTMLAttributes['class'];
 }
-export interface NTabsProps extends TabsRootProps, BaseExtensions, Pick<NTabsTriggerProps, 'tabs' | 'disabled'> {
+export interface NTabsProps extends TabsRootProps, BaseExtensions, Pick<NTabsTriggerProps, 'tabsActive' | 'tabsInactive' | 'disabled'> {
     /**
      * The array of items that is passed to tabs.
      *
      * @default []
      */
-    items: any[];
+    items?: any[];
     _tabsContent?: Partial<NTabsContentProps>;
     _tabsTrigger?: Partial<NTabsTriggerProps>;
     _tabsList?: Partial<NTabsListProps>;
-}
-export interface NTabsRootProps extends TabsRootProps, BaseExtensions {
-    /**
-     * `UnaUI` preset configuration
-     *
-     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/tabs.ts
-     */
-    una?: {
-        tabsRoot?: HTMLAttributes['class'];
-    };
+    una?: NTabsUnaProps;
 }
 export interface NTabsListProps extends TabsListProps, BaseExtensions {
     /**
@@ -32,29 +23,10 @@ export interface NTabsListProps extends TabsListProps, BaseExtensions {
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/tabs.ts
      */
-    una?: {
-        tabsList?: HTMLAttributes['class'];
-    };
+    una?: Pick<NTabsUnaProps, 'tabsList'>;
 }
-export interface NTabsTriggerProps extends TabsTriggerProps, Omit<NButtonProps, 'una' | 'size'>, BaseExtensions {
-    /**
-     * Allows you to add `UnaUI` button 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/tabs.ts
-     * @example
-     * tabs="solid-green"
-     */
-    tabs?: string;
-    /**
-     * `UnaUI` preset configuration
-     *
-     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/tabs.ts
-     */
-    una?: {
-        tabsTrigger?: HTMLAttributes['class'];
-        tabsDefaultVariant?: HTMLAttributes['class'];
-    } & NButtonProps['una'];
+export interface NTabsTriggerProps extends TabsTriggerProps, Omit<NButtonProps, 'una'> {
+    una?: Pick<NTabsUnaProps, 'tabsTrigger'> & Pick<NButtonProps, 'una'>;
 }
 export interface NTabsContentProps extends TabsContentProps, BaseExtensions {
     /**
@@ -62,8 +34,12 @@ export interface NTabsContentProps extends TabsContentProps, BaseExtensions {
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/tabs.ts
      */
-    una?: {
-        tabsContent?: HTMLAttributes['class'];
-    };
+    una?: Pick<NTabsUnaProps, 'tabsContent'>;
+}
+export interface NTabsUnaProps {
+    tabs?: HTMLAttributes['class'];
+    tabsList?: HTMLAttributes['class'];
+    tabsTrigger?: HTMLAttributes['class'];
+    tabsContent?: HTMLAttributes['class'];
 }
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.55.4",
+  "version": "0.56.1",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -58,8 +58,8 @@
     "unocss": "^66.0.0",
     "unocss-preset-animations": "^1.2.1",
     "vaul-vue": "^0.4.1",
-    "@una-ui/extractor-vue-script": "^0.55.4",
-    "@una-ui/preset": "^0.55.4"
+    "@una-ui/extractor-vue-script": "^0.56.1",
+    "@una-ui/preset": "^0.56.1"
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.44",

package/dist/runtime/components/elements/tabs/TabsRoot.vue

@@ -1,32 +0,0 @@
-<script setup>
-import { TabsRoot, useForwardPropsEmits } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  una: { type: Object, required: false },
-  defaultValue: { type: null, required: false },
-  orientation: { type: String, required: false },
-  dir: { type: String, required: false },
-  activationMode: { type: String, required: false },
-  modelValue: { type: null, required: false },
-  unmountOnHide: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-  size: { type: null, required: false }
-});
-const emits = defineEmits(["update:modelValue"]);
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <TabsRoot
-    v-bind="forwarded"
-    :class="cn(
-  'tabs-root',
-  props.class,
-  props.una?.tabsRoot
-)"
-  >
-    <slot />
-  </TabsRoot>
-</template>

package/dist/runtime/components/elements/tabs/TabsRoot.vue.d.ts

@@ -1,17 +0,0 @@
-import type { NTabsRootProps } from '../../../types/tabs.js';
-declare var __VLS_6: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<NTabsRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (payload: string | number) => any;
-}, string, import("vue").PublicProps, Readonly<NTabsRootProps> & Readonly<{
-    "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};