@una-ui/nuxt 0.38.0-beta.1 → 0.39.0-beta.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.38.0-beta.1",
+  "version": "0.39.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.38.0-beta.1";
+const version = "0.39.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {
@@ -169,6 +169,13 @@ const module = defineNuxtModule({
       watch: nuxt.options.dev,
       priority: 10
     });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components", "scroll-area"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev,
+      priority: 10
+    });
     if (options.themeable) {
       addPlugin(resolve(runtimeDir, "plugins", "theme.client"));
       addPlugin(resolve(runtimeDir, "plugins", "theme.server"));

package/dist/runtime/components/elements/card/Card.vue

@@ -13,9 +13,7 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<NCardProps>(), {
-  una: () => ({
-    cardDefaultVariant: 'card-default-variant',
-  }),
+  card: 'outline-gray',
 })
 
 const delegatedProps = computed(() => {
@@ -23,10 +21,6 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
-
-const cardVariants = ['soft', 'outline'] as const
-const hasVariant = computed(() => cardVariants.some(cardVariant => props.card?.includes(cardVariant)))
-const isBaseVariant = computed(() => props.card?.includes('~'))
 </script>
 
 <template>
@@ -35,7 +29,6 @@ const isBaseVariant = computed(() => props.card?.includes('~'))
     :card="card"
     :class="cn(
       'card',
-      !hasVariant && !isBaseVariant ? una?.cardDefaultVariant : '',
       props.class,
     )"
   >

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

@@ -79,6 +79,7 @@ function isItemSelected(item: unknown, modelValue: unknown) {
       :status
       :select
       v-bind="props._selectTrigger"
+      :una
     >
       <slot name="trigger" :model-value :open="open">
         <SelectValue
@@ -86,6 +87,7 @@ function isItemSelected(item: unknown, modelValue: unknown) {
           v-bind="props._selectValue"
           :aria-label="formatSelectedValue(modelValue)"
           :data-status="status"
+          :una
         >
           <slot name="value" :model-value :open>
             {{ formatSelectedValue(modelValue) || props.placeholder }}
@@ -101,12 +103,14 @@ function isItemSelected(item: unknown, modelValue: unknown) {
         _selectScrollDownButton,
         _selectScrollUpButton,
       }"
+      :una
     >
       <slot name="content" :items="items">
         <template v-if="!group">
           <SelectLabel
             v-if="label"
             v-bind="_selectLabel"
+            :una
           >
             <slot name="label" :label>
               {{ label }}
@@ -119,9 +123,11 @@ function isItemSelected(item: unknown, modelValue: unknown) {
           >
             <SelectItem
               :value="item"
-              :size="size"
+              :size
+              :select-item
               v-bind="props._selectItem"
               :is-selected="isItemSelected(item, modelValue)"
+              :una
             >
               <slot name="item" :item="item">
                 {{ props.itemKey && item ? (item as any)[props.itemKey] : item }}
@@ -135,17 +141,20 @@ function isItemSelected(item: unknown, modelValue: unknown) {
             v-for="(group, i) in items as SelectGroupType<T>[]"
             :key="i"
             v-bind="props._selectGroup"
+            :una
           >
             <SelectSeparator
               v-if="i > 0"
               v-bind="props._selectSeparator"
+              :una
             />
 
             <slot name="group" :items="group">
               <SelectLabel
                 v-if="group.label"
-                :size="size"
+                :size
                 v-bind="{ ...props._selectLabel, ...group._selectLabel }"
+                :una
               >
                 <slot name="label" :label="group.label">
                   {{ group.label }}
@@ -158,9 +167,11 @@ function isItemSelected(item: unknown, modelValue: unknown) {
               >
                 <SelectItem
                   :value="item"
-                  :size="size"
+                  :size
+                  :select-item
                   v-bind="{ ..._selectItem, ...group._selectItem }"
                   :is-selected="isItemSelected(item, modelValue)"
+                  :una
                 >
                   <slot name="item" :item="item">
                     {{ props.itemKey ? (item as any)[props.itemKey] : item }}

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

@@ -51,7 +51,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <SelectViewport
         :class="cn(
           'select-viewport',
-          position === 'popper' && 'select-viewport-popper')"
+          position === 'popper' && 'select-viewport-popper')
+        "
       >
         <slot />
       </SelectViewport>

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

@@ -14,7 +14,14 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <SelectGroup :class="cn('select-group', props.class)" v-bind="delegatedProps">
+  <SelectGroup
+    :class="cn(
+      'select-group',
+      props.una?.selectGroup,
+      props.class,
+    )"
+    v-bind="delegatedProps"
+  >
     <slot />
   </SelectGroup>
 </template>

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

@@ -26,14 +26,15 @@ const forwardedProps = useForwardProps(delegatedProps)
     :class="
       cn(
         'select-item',
-        props.class,
         props.una?.selectItem,
+        props.class,
       )
     "
     :select-item
   >
     <SelectItemIndicator
       v-if="isSelected"
+      :una
       v-bind="props._selectItemIndicator"
     >
       <slot name="item-indicator" />

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

@@ -15,8 +15,8 @@ const props = withDefaults(defineProps<NSelectItemIndicatorProps>(), {
     v-bind="props"
     :class="cn(
       'select-item-indicator',
-      props.class,
       props.una?.selectItemIndicator,
+      props.class,
     )"
   >
     <slot>

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

@@ -7,7 +7,13 @@ const props = defineProps<NSelectLabelProps>()
 </script>
 
 <template>
-  <SelectLabel :class="cn('select-label', props.class)">
+  <SelectLabel
+    :class="cn(
+      'select-label',
+      props.una?.selectLabel,
+      props.class,
+    )"
+  >
     <slot />
   </SelectLabel>
 </template>

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

@@ -15,8 +15,8 @@ const forwarded = useForwardPropsEmits(props, emits)
     v-slot="slotProps"
     :class="cn(
       'select-root',
-      props.class,
       props.una?.selectRoot,
+      props.class,
     )"
     v-bind="forwarded"
   >

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

@@ -17,7 +17,14 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('select-scroll-down-button', props.class)">
+  <SelectScrollDownButton
+    v-bind="forwardedProps"
+    :class="cn(
+      'select-scroll-down-button',
+      props.una?.selectScrollDownButton,
+      props.class,
+    )"
+  >
     <slot>
       <Icon
         :name="forwardedProps?.una?.selectScrollDownButtonIcon || 'select-scroll-down-button-icon'"

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

@@ -17,7 +17,14 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('select-scroll-up-button', props.class)">
+  <SelectScrollUpButton
+    v-bind="forwardedProps"
+    :class="cn(
+      'select-scroll-up-button',
+      props.una?.selectScrollUpButton,
+      props.class,
+    )"
+  >
     <slot>
       <Icon
         :name="forwardedProps?.una?.selectScrollUpButtonIcon || 'select-scroll-up-button-icon'"

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

@@ -14,5 +14,12 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <SelectSeparator v-bind="delegatedProps" :class="cn('select-separator', props.class)" />
+  <SelectSeparator
+    v-bind="delegatedProps"
+    :class="cn(
+      'select-separator',
+      props.una?.selectSeparator,
+      props.class,
+    )"
+  />
 </template>

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

@@ -51,13 +51,18 @@ const id = computed(() => props.id ?? randomId('select-trigger'))
       )"
       :una="{
         ...props.una,
-        ...{
-          btnLeading: cn(
-            'select-trigger-leading',
-            props.una?.btnLeading,
-          ),
-          btnDefaultVariant: statusClassVariants.btn,
-        },
+        btn: props.una?.selectTrigger,
+        btnLeading: cn(
+          'select-trigger-leading',
+          props.una?.btnLeading,
+          props.una?.selectTriggerLeading,
+        ),
+        btnTrailing: cn(
+          'select-trigger-trailing',
+          props.una?.btnTrailing,
+          props.una?.selectTriggerTrailing,
+        ),
+        btnDefaultVariant: statusClassVariants.btn,
       }"
     >
       <slot />
@@ -72,6 +77,7 @@ const id = computed(() => props.id ?? randomId('select-trigger'))
             :class="cn(
               'select-trigger-trailing',
               props.una?.btnTrailing,
+              props.una?.selectTriggerTrailing,
             )"
           />
         </SelectIcon>

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

@@ -8,7 +8,11 @@ const props = defineProps<NSelectValueProps>()
 
 <template>
   <SelectValue
-    :class="cn('select-value', props.class)"
+    :class="cn(
+      'select-value',
+      props.una?.selectValue,
+      props.class,
+    )"
     v-bind="props"
   >
     <slot />

package/dist/runtime/components/scroll-area/ScrollArea.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { NScrollAreaProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaViewport,
+} from 'reka-ui'
+import { cn } from '../../utils'
+import ScrollBar from './ScrollBar.vue'
+
+const props = withDefaults(defineProps<NScrollAreaProps>(), {
+  scrollArea: 'gray',
+  rounded: 'full',
+  size: 'md',
+})
+
+const delegatedProps = reactiveOmit(props, ['class', 'size', 'rounded'])
+</script>
+
+<template>
+  <ScrollAreaRoot
+    v-bind="delegatedProps"
+    :class="cn(
+      'scroll-area-root',
+      props.una?.scrollAreaRoot,
+      props.class,
+    )"
+  >
+    <ScrollAreaViewport
+      v-bind="_scrollAreaViewport"
+      :class="cn(
+        'scroll-area-viewport',
+        props.una?.scrollAreaViewport,
+        _scrollAreaViewport?.class,
+      )"
+    >
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar
+      v-bind="_scrollAreaScrollbar"
+      :orientation="orientation ?? _scrollAreaScrollbar?.orientation"
+      :una
+      :size
+      :rounded
+      :scroll-area
+    />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

package/dist/runtime/components/scroll-area/ScrollBar.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { NScrollAreaScrollbarProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../utils'
+
+const props = withDefaults(defineProps<NScrollAreaScrollbarProps>(), {
+  orientation: 'vertical',
+  rounded: 'full',
+})
+
+const delegatedProps = reactiveOmit(props, ['class', 'size', 'rounded', 'scrollArea'])
+
+const orientationClass = computed(() => {
+  return props.orientation === 'vertical' ? 'scroll-area-scrollbar-vertical' : 'scroll-area-scrollbar-horizontal'
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :size
+    :class="
+      cn(
+        'scroll-area-scrollbar',
+        orientationClass,
+        props.una?.scrollAreaScrollbar,
+        props.class,
+      )"
+  >
+    <ScrollAreaThumb
+      :scroll-area
+      :rounded
+      :class="cn(
+        'scroll-area-scrollbar-thumb',
+        props.una?.scrollAreaThumb,
+      )"
+    />
+  </ScrollAreaScrollbar>
+</template>

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

@@ -22,6 +22,7 @@ export * from './pagination.js';
 export * from './popover.js';
 export * from './progress.js';
 export * from './radio-group.js';
+export * from './scroll-area.js';
 export * from './select.js';
 export * from './separator.js';
 export * from './sheet.js';

package/dist/runtime/types/index.js

@@ -22,6 +22,7 @@ export * from "./pagination.js";
 export * from "./popover.js";
 export * from "./progress.js";
 export * from "./radio-group.js";
+export * from "./scroll-area.js";
 export * from "./select.js";
 export * from "./separator.js";
 export * from "./sheet.js";

package/dist/runtime/types/scroll-area.d.ts

@@ -0,0 +1,55 @@
+import type { ScrollAreaRootProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaViewportProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+interface BaseExtension {
+    class?: HTMLAttributes['class'];
+    size?: HTMLAttributes['class'];
+    rounded?: HTMLAttributes['class'];
+}
+export interface NScrollAreaProps extends ScrollAreaRootProps, Pick<ScrollAreaScrollbarProps, 'orientation'>, BaseExtension {
+    /**
+     * Allows you to add `UnaUI` scroll area 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/scroll-area.ts
+     * @example
+     * scrollArea="green"
+     */
+    scrollArea?: HTMLAttributes['class'];
+    /**
+     * The scroll area root props.
+     */
+    _scrollAreaRoot?: NScrollAreaRootProps;
+    /**
+     * The scroll area scrollbar props.
+     */
+    _scrollAreaScrollbar?: NScrollAreaScrollbarProps;
+    /**
+     * The scroll area viewport props.
+     */
+    _scrollAreaViewport?: NScrollAreaViewportProps;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/scroll-area.ts
+     */
+    una?: NScrollAreaUnaProps;
+}
+export interface NScrollAreaRootProps extends ScrollAreaRootProps, BaseExtension {
+    una?: NScrollAreaUnaProps['scrollAreaRoot'];
+}
+export interface NScrollAreaScrollbarProps extends ScrollAreaScrollbarProps, Pick<NScrollAreaProps, 'scrollArea'>, BaseExtension {
+    una?: Pick<NScrollAreaUnaProps, 'scrollAreaScrollbar' | 'scrollAreaThumb'>;
+}
+export interface NScrollAreaThumbProps extends ScrollAreaThumbProps, BaseExtension {
+    una?: NScrollAreaUnaProps['scrollAreaThumb'];
+}
+export interface NScrollAreaViewportProps extends ScrollAreaViewportProps, Pick<BaseExtension, 'class'> {
+    una?: NScrollAreaUnaProps['scrollAreaViewport'];
+}
+export interface NScrollAreaUnaProps {
+    scrollAreaRoot?: HTMLAttributes['class'];
+    scrollAreaViewport?: HTMLAttributes['class'];
+    scrollAreaScrollbar?: HTMLAttributes['class'];
+    scrollAreaThumb?: HTMLAttributes['class'];
+}
+export {};

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

@@ -58,6 +58,7 @@ export interface NSelectProps<T extends AcceptableValue> extends SelectExtension
     _selectTrigger?: Partial<NSelectTriggerProps>;
     _selectItem?: Partial<NSelectItemProps>;
     _selectLabel?: Partial<NSelectLabelProps>;
+    una?: NSelectUnaProps;
 }
 export interface NSelectRootProps extends RootExtensions {
     una?: {
@@ -87,78 +88,70 @@ export interface NSelectTriggerProps extends TriggerExtensions {
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/select.ts
      */
-    una?: {
-        selectTrigger?: HTMLAttributes['class'];
-        selectTriggerTrailing?: HTMLAttributes['class'];
-        selectTriggerTrailingIcon?: HTMLAttributes['class'];
-        selectTriggerLeading?: HTMLAttributes['class'];
-        selectTriggerInfoIcon?: HTMLAttributes['class'];
-        selectTriggerSuccessIcon?: HTMLAttributes['class'];
-        selectTriggerWarningIcon?: HTMLAttributes['class'];
-        selectTriggerErrorIcon?: HTMLAttributes['class'];
-    } & NButtonProps['una'];
+    una?: Pick<NSelectUnaProps, 'selectTrigger' | 'selectTriggerTrailing' | 'selectTriggerTrailingIcon' | 'selectTriggerLeading' | 'selectTriggerInfoIcon' | 'selectTriggerSuccessIcon' | 'selectTriggerWarningIcon' | 'selectTriggerErrorIcon'> & NButtonProps['una'];
 }
 export interface NSelectValueProps extends ValueExtensions {
-    una?: {
-        selectValue?: HTMLAttributes['class'];
-    };
+    una?: Pick<NSelectUnaProps, 'selectValue'>;
 }
 export interface NSelectScrollDownButtonProps extends ScrollDownButtonExtensions {
-    una?: {
-        selectScrollDownButton?: HTMLAttributes['class'];
-        selectScrollDownButtonIcon?: HTMLAttributes['class'];
-    };
+    una?: Pick<NSelectUnaProps, 'selectScrollDownButton' | 'selectScrollDownButtonIcon'>;
 }
 export interface NSelectScrollUpButtonProps extends ScrollUpButtonExtensions {
-    una?: {
-        selectScrollUpButton?: HTMLAttributes['class'];
-        selectScrollUpButtonIcon?: HTMLAttributes['class'];
-    };
+    una?: Pick<NSelectUnaProps, 'selectScrollUpButton' | 'selectScrollUpButtonIcon'>;
 }
 export interface NSelectContentProps extends ContentExtensions {
     _selectScrollDownButton?: NSelectScrollDownButtonProps;
     _selectScrollUpButton?: NSelectScrollUpButtonProps;
     _selectSeparator?: NSelectSeparator;
-    una?: {
-        selectContent?: HTMLAttributes['class'];
-    };
+    una?: Pick<NSelectUnaProps, 'selectContent'>;
 }
 export interface NSelectItemIndicatorProps extends SelectItemIndicatorProps {
     icon?: HTMLAttributes['class'];
     class?: HTMLAttributes['class'];
-    una?: {
-        selectItemIndicator?: HTMLAttributes['class'];
-        selectItemIndicatorIcon?: HTMLAttributes['class'];
-    };
+    una?: Pick<NSelectUnaProps, 'selectItemIndicator' | 'selectItemIndicatorIcon'>;
 }
 export interface NSelectItemProps extends ItemExtensions {
     selectItem?: HTMLAttributes['class'];
     isSelected?: boolean;
     _selectItemText?: NSelectItemTextProps;
     _selectItemIndicator?: NSelectItemIndicatorProps;
-    una?: {
-        selectItem?: HTMLAttributes['class'];
-        selectItemIndicatorWrapper?: HTMLAttributes['class'];
-    };
+    una?: Pick<NSelectUnaProps, 'selectItem' | 'selectItemIndicator'>;
 }
 export interface NSelectItemTextProps extends ItemTextExtensions {
-    una?: {
-        selectItemText?: HTMLAttributes['class'];
-    };
+    una?: Pick<NSelectUnaProps, 'selectItemText'>;
 }
 export interface NSelectGroupProps extends GroupExtensions {
-    una?: {
-        selectGroup?: HTMLAttributes['class'];
-    };
+    una?: Pick<NSelectUnaProps, 'selectGroup'>;
 }
 export interface NSelectLabelProps extends LabelExtensions {
-    una?: {
-        selectLabel?: HTMLAttributes['class'];
-    };
+    una?: Pick<NSelectUnaProps, 'selectLabel'>;
 }
 export interface NSelectSeparator extends SeparatorExtensions {
-    una?: {
-        selectSeparator?: HTMLAttributes['class'];
-    };
+    una?: Pick<NSelectUnaProps, 'selectSeparator'>;
+}
+export interface NSelectUnaProps {
+    select?: HTMLAttributes['class'];
+    selectRoot?: HTMLAttributes['class'];
+    selectTrigger?: HTMLAttributes['class'];
+    selectTriggerTrailing?: HTMLAttributes['class'];
+    selectTriggerTrailingIcon?: HTMLAttributes['class'];
+    selectTriggerLeading?: HTMLAttributes['class'];
+    selectTriggerInfoIcon?: HTMLAttributes['class'];
+    selectTriggerSuccessIcon?: HTMLAttributes['class'];
+    selectTriggerWarningIcon?: HTMLAttributes['class'];
+    selectTriggerErrorIcon?: HTMLAttributes['class'];
+    selectValue?: HTMLAttributes['class'];
+    selectContent?: HTMLAttributes['class'];
+    selectItem?: HTMLAttributes['class'];
+    selectItemText?: HTMLAttributes['class'];
+    selectItemIndicator?: HTMLAttributes['class'];
+    selectItemIndicatorIcon?: HTMLAttributes['class'];
+    selectGroup?: HTMLAttributes['class'];
+    selectLabel?: HTMLAttributes['class'];
+    selectSeparator?: HTMLAttributes['class'];
+    selectScrollDownButton?: HTMLAttributes['class'];
+    selectScrollDownButtonIcon?: HTMLAttributes['class'];
+    selectScrollUpButton?: HTMLAttributes['class'];
+    selectScrollUpButtonIcon?: HTMLAttributes['class'];
 }
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.38.0-beta.1",
+  "version": "0.39.0-beta.1",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -49,8 +49,8 @@
     "typescript": "5.6.3",
     "unocss": "^65.4.3",
     "unocss-preset-animations": "^1.1.1",
-    "@una-ui/extractor-vue-script": "^0.38.0-beta.1",
-    "@una-ui/preset": "^0.38.0-beta.1"
+    "@una-ui/extractor-vue-script": "^0.39.0-beta.1",
+    "@una-ui/preset": "^0.39.0-beta.1"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.4",