@una-ui/nuxt 0.1.1-beta.1 → 0.2.0-beta.0

package/README.md

@@ -1,22 +1,33 @@
-# 🌼 Una-UI
+# ✨ Una UI
 
- > **Warning**: This project is heavily working in progress.
+> **Warning**: This project is heavily working in progress.
 
-## 📌 Todo
+## 🏗️ Release Status
 
-- [ ] Playground
-- [ ] Docs
-- [ ] Style Presets
-- [ ] UI-Components
-- [ ] Nuxt 3 modules
+| Branch | Version | Status | Downloads |
+| --- | --- | --- | --- |
+| Main (Edge) | [![npm-edge][npm-edge-src]][npm-edge-href] | [![github-status][github-status-src-main]][github-status-href-main] | [![npm-edge-downloads][npm-edge-downloads-src]][npm-edge-downloads-href] |
+| Release | [![npm-version][npm-version-src]][npm-version-href] | [![github-status][github-status-src-release]][github-status-href-release] | [![npm-downloads][npm-downloads-src]][npm-downloads-href] |
 
-<!-- [![NPM version](https://img.shields.io/npm/v/jieui?color=a1b858&label=)](https://www.npmjs.com/package/@una-ui) -->
+## 📙 Documentation
 
-<!-- ## Sponsors -->
-
-<!-- <p align="center">
-</p> -->
+Visit https://www.unaui.com for full documentation.
 
 ## 🏛️ License
 
 [MIT](./LICENSE) License © 2023 [Phojie](https://github.com/phojie)
+
+<!-- Badge Variables -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@una-ui/preset?style=flat&colorA=18181B&colorB=CA8A04
+[npm-version-href]: https://npmjs.com/package/@una-ui/preset
+[npm-edge-src]: https://img.shields.io/npm/v/@una-ui/preset-edge?style=flat&colorA=18181B&colorB=CA8A04
+[npm-edge-href]: https://npmjs.com/package/@una-ui/preset-edge
+[npm-downloads-src]: https://img.shields.io/npm/dm/@una-ui/preset?style=flat&colorA=18181B&colorB=CA8A04
+[npm-downloads-href]: https://npmjs.com/package/@una-ui/preset
+[npm-edge-downloads-src]: https://img.shields.io/npm/dm/@una-ui/preset-edge?style=flat&colorA=18181B&colorB=CA8A04
+[npm-edge-downloads-href]: https://npmjs.com/package/@una-ui/preset-edge
+[github-status-src-main]: https://img.shields.io/github/checks-status/una-ui/una-ui/main?style=flat&colorA=18181B&colorB=CA8A04
+[github-status-src-release]: https://img.shields.io/github/checks-status/una-ui/una-ui/release?style=flat&colorA=18181B&colorB=CA8A04
+[github-status-href-main]: https://github.com/una-ui/una-ui/actions/workflows/ci.yml
+[github-status-href-release]: https://github.com/una-ui/una-ui/actions/workflows/release.yml

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.1.1-beta.1",
+  "version": "0.2.0-beta.0",
   "compatibility": {
     "nuxt": "^3.0.0-rc.8"
   }

package/dist/module.mjs

@@ -2,18 +2,18 @@ import { fileURLToPath } from 'node:url';
 import { defineNuxtModule, createResolver, addComponentsDir, addPlugin, installModule } from '@nuxt/kit';
 import { presetUno, presetAttributify, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss';
 import presetUna from '@una-ui/preset';
+import prefixes from '@una-ui/preset/prefixes';
+import extratorUna from '@una-ui/extractor-vue-script';
 
 const name = "@una-ui/nuxt";
-const version = "0.1.1-beta.1";
+const version = "0.2.0-beta.0";
 
 function extendUnocssOptions(user = {}) {
   return {
     ...user,
     preflight: false,
     presets: [
-      presetUno({
-        // attributifyPseudo: true,
-      }),
+      presetUno(),
       presetAttributify(),
       presetIcons({
         scale: 1.2,
@@ -25,6 +25,11 @@ function extendUnocssOptions(user = {}) {
       presetUna(),
       ...user.presets || []
     ],
+    extractors: [
+      extratorUna({
+        prefixes
+      })
+    ],
     transformers: [
       transformerDirectives(),
       transformerVariantGroup()
@@ -53,7 +58,6 @@ const module = defineNuxtModule({
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    nuxt.options.css.unshift("@unocss/reset/tailwind-compat.css");
     nuxt.options.css.unshift("@una-ui/preset/una.css");
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
@@ -76,6 +80,12 @@ const module = defineNuxtModule({
       global: options.global,
       watch: nuxt.options.dev
     });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components", "navigation"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev
+    });
     if (options.themeable) {
       addPlugin(resolve(runtimeDir, "plugins", "theme.client"));
       addPlugin(resolve(runtimeDir, "plugins", "theme.server"));

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

@@ -9,6 +9,7 @@ const props = withDefaults(defineProps<NAvatarProps>(), {
 
 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('~'))

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

@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+
 import type { NBadgeProps } from '../../types'
 import NIcon from './Icon.vue'
 
-const props = defineProps<NBadgeProps>()
+const props = withDefaults(defineProps<NBadgeProps>(), {
+  una: () => ({
+    badgeDefaultVariant: 'badge-default-variant',
+  }),
+})
 
 const emit = defineEmits<{ (...args: any): void }>()
 
@@ -17,7 +22,7 @@ const isBaseVariant = computed(() => props.badge?.includes('~'))
     :badge="badge"
     class="badge"
     :class="[
-      { 'badge-default-variant': !hasVariant && !isBaseVariant },
+      !hasVariant && !isBaseVariant ? una?.badgeDefaultVariant : '',
       una?.badge,
     ]"
   >

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

@@ -3,9 +3,7 @@ import { computed } from 'vue'
 import { createReusableTemplate } from '@vueuse/core'
 import NIcon from '../elements/Icon.vue'
 import type { NButtonProps } from '../../types'
-
-// @ts-expect-error tsconfig
-import { NuxtLink } from '#components'
+import NLink from '../elements/Link.vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -14,6 +12,9 @@ defineOptions({
 const props = withDefaults(defineProps<NButtonProps>(), {
   type: 'button',
   loadingPlacement: 'leading',
+  una: () => ({
+    btnDefaultVariant: 'btn-default-variant',
+  }),
 })
 
 const btnVariants = ['solid', 'outline', 'soft', 'ghost', 'link', 'text'] as const
@@ -25,17 +26,18 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
 
 <template>
   <Component
-    :is="to ? NuxtLink : 'button'"
+    :is="to ? NLink : 'button'"
     :to="to"
     :type="to ? null : type"
     class="btn"
     :class="[
-      { 'btn-default-variant': !hasVariant && !isBaseVariant },
+      !hasVariant && !isBaseVariant ? una?.btnDefaultVariant : null,
       { 'btn-reverse': reverse },
       una?.btn,
     ]"
     :disabled="to ? null : disabled || loading"
     :btn="btn"
+    :aria-label="icon ? label : null"
     v-bind="$attrs"
   >
     <DefineTemplate v-if="loading">
@@ -62,6 +64,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
     </slot>
 
     <ReuseTemplate v-if="loading && loadingPlacement === 'label'" />
+
     <slot v-else>
       <NIcon
         v-if="label && icon"
@@ -86,7 +89,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
       <NIcon
         v-if="trailing"
         :name="trailing"
-        :class="una?.btnLeading"
+        :class="una?.btnTrailing"
         btn="trailing"
       />
     </slot>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { NKbdProps } from '../../types'
+
+const props = defineProps<NKbdProps>()
+
+const kbdVariants = ['solid', 'outline'] as const
+const hasVariant = computed(() => kbdVariants.some(kbdVariants => props.kbd?.includes(kbdVariants)))
+const isBaseVariant = computed(() => props.kbd?.includes('~'))
+</script>
+
+<template>
+  <kbd
+    class="kbd"
+    :kbd="kbd"
+    :class="[
+      { 'kbd-default-variant': !hasVariant && !isBaseVariant },
+      una?.kbd,
+    ]"
+  >
+    <slot>
+      {{ label }}
+    </slot>
+  </kbd>
+</template>

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

@@ -0,0 +1,66 @@
+<script>
+import { defineComponent } from "vue";
+import { isEqual } from "ohash";
+import { NuxtLink } from "#components";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    ...NuxtLink.props,
+    // config
+    exact: {
+      type: Boolean,
+      default: false
+    },
+    exactQuery: {
+      type: Boolean,
+      default: false
+    },
+    exactHash: {
+      type: Boolean,
+      default: false
+    },
+    // styling
+    inactiveClass: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props) {
+    function resolveLinkClass(route, $route, { isActive, isExactActive }) {
+      if (props.exactQuery && !isEqual(route.query, $route.query))
+        return props.inactiveClass;
+      if (props.exactHash && !isEqual(route.hash, $route.hash))
+        return props.inactiveClass;
+      if (props.exact && isExactActive)
+        return props.exactActiveClass;
+      if (!props.exact && isActive)
+        return props.activeClass;
+      return props.inactiveClass;
+    }
+    return {
+      resolveLinkClass
+    };
+  }
+});
+</script>
+
+<template>
+  <NuxtLink
+    v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }"
+    v-bind="$props"
+    class="link"
+    custom
+  >
+    <a
+      v-bind="$attrs"
+      :href="href"
+      :rel="rel"
+      class="link"
+      :target="target"
+      :class="resolveLinkClass(route, $route, { isActive, isExactActive })"
+      @click="(e) => !isExternal && navigate(e)"
+    >
+      <slot v-bind="{ isActive: exact ? isExactActive : isActive }" />
+    </a>
+  </NuxtLink>
+</template>

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

@@ -0,0 +1,9 @@
+declare const _default: import("vue").DefineComponent<any, {
+    resolveLinkClass: (route: any, $route: any, { isActive, isExactActive }: {
+        isActive: boolean;
+        isExactActive: boolean;
+    }) => any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<any>, {} | {
+    [x: string]: any;
+}, {}>;
+export default _default;

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

@@ -2,11 +2,14 @@
 import { computed } from 'vue'
 import type { NFormGroupProps } from '../../types'
 import NFormGroupDefaultSlot from '../slots/FormGroupDefault'
+import FormGroupLabel from '../slots/FormGroupLabel'
 import { randomId } from '../../utils'
 
-const props = defineProps<NFormGroupProps>()
+const props = withDefaults(defineProps<NFormGroupProps>(), {
+  for: undefined,
+})
 
-const id = randomId('form-group')
+const id = computed(() => props.id ?? randomId('form-group'))
 
 const statusClassVariants = computed(() => {
   const text = {
@@ -22,9 +25,7 @@ const statusClassVariants = computed(() => {
 </script>
 
 <template>
-  <div
-    form-group
-  >
+  <div form-group>
     <slot name="top">
       <div
         form-group="message-wrapper"
@@ -41,9 +42,9 @@ const statusClassVariants = computed(() => {
             :class="una?.formGroupTopWrapperInner"
           >
             <slot name="label">
-              <label
-                v-if="label"
-                :for="name ?? id"
+              <FormGroupLabel
+                :id="id"
+                :for="props.for"
                 form-group="label-wrapper"
                 :class="una?.formGroupLabelWrapper"
               >
@@ -58,12 +59,13 @@ const statusClassVariants = computed(() => {
                   form-group="label-required"
                   :class="una?.formGroupLabelRequired"
                 />
-              </label>
+              </FormGroupLabel>
             </slot>
 
             <slot name="hint">
               <span
-                v-if="hint" form-group="hint"
+                v-if="hint"
+                form-group="hint"
                 :class="una?.formGroupHint"
               >
                 {{ hint }}
@@ -85,7 +87,7 @@ const statusClassVariants = computed(() => {
     </slot>
 
     <NFormGroupDefaultSlot
-      :id="name ?? id"
+      :id="id"
       :status="status"
     >
       <slot />

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

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { computed } from 'vue'
+import type { NRadioProps } from '../../types'
+import { randomId } from '../../utils'
+import NIcon from '../elements/Icon.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<NRadioProps>(),
+  {
+    modelValue: '',
+    disabled: false,
+    una: () => ({
+      radioIcon: 'radio-icon',
+    }),
+  },
+)
+
+const emit = defineEmits<{ (...args: any): void }>()
+
+const slots = defineSlots<{
+  default?: void
+  icon?: any
+}>()
+
+const id = computed(() => props.id ?? randomId('radio'))
+
+const model = useVModel(props, 'modelValue', emit, { passive: true })
+</script>
+
+<template>
+  <label
+    radio="wrapper"
+    :for="props.for ?? id"
+    :class="[
+      una?.radioWrapper,
+      {
+        'radio-reverse': reverse,
+        'radio-disabled': disabled,
+      },
+    ]"
+    :checked="model === value || null"
+    :disabled="disabled || null"
+  >
+    <input
+      :id="id"
+      v-model="model"
+      type="radio"
+      class="peer"
+      radio="input"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      @keypress.enter="model = value!"
+    >
+    <div
+      :radio="radio"
+      :size="size"
+      class="radio radio-(peer-focus)"
+      :class="[
+        una?.radioPeerFocus,
+      ]"
+      v-bind="$attrs"
+    >
+      <div radio="icon-wrapper">
+        <slot name="icon">
+          <NIcon
+            :class="[
+              una.radioIconBase,
+            ]"
+            radio="icon-base icon-checked"
+            :name="una.radioIcon!"
+          />
+        </slot>
+      </div>
+    </div>
+    <div
+      v-if="slots.default || label"
+      radio="label"
+      :class="una?.radioLabel"
+    >
+      <slot>
+        {{ label }}
+      </slot>
+    </div>
+  </label>
+</template>

package/dist/runtime/components/navigation/NavLink.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { NNavLinkProps } from '../../types'
+import { omitProps } from '../../utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<NNavLinkProps>()
+</script>
+
+<template>
+  <NButton
+    nav-link="~ variant"
+    active-class="nav-link-active"
+    inactive-class="nav-link-inactive"
+    :una="{
+      btnDefaultVariant: '~',
+      ...props.una,
+    }"
+    v-bind="{ ...omitProps(props, ['badge', 'una']), ...$attrs }"
+  >
+    <template #leading>
+      <NIcon
+        v-if="leading"
+        :name="leading"
+        :class="una?.btnLeading"
+        btn="leading"
+      />
+    </template>
+
+    <template #default>
+      <span
+        btn="label"
+        class="w-full text-left"
+        :class="una?.btnLabel"
+      >
+        {{ label }}
+      </span>
+    </template>
+
+    <template v-if="badge" #trailing>
+      <!-- TODO: move to una preset -->
+      <NBadge
+        v-bind="badge"
+        :una="{
+          badgeDefaultVariant: 'badge-outline-white',
+          ...props.badge?.una,
+        }"
+        class="min-w-max whitespace-nowrap rounded-full px-2.5 py-0.5 leading-5"
+      />
+    </template>
+  </NButton>
+</template>

package/dist/runtime/components/navigation/NavLinkGroup.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+import type { NVerticalNav } from '../../types'
+import { omitProps } from '../../utils'
+import NNavLink from './NavLink.vue'
+
+const props = defineProps<NVerticalNav>()
+</script>
+
+<template>
+  <div class="nav-link-group">
+    <template
+      v-for="link in props.links"
+      :key="link.label"
+    >
+      <NNavLink
+        v-if="!link.children"
+        v-bind="link"
+      />
+
+      <Disclosure
+        v-else
+        v-slot="{ open }"
+        :default-open="link.defaultOpen"
+        as="div"
+      >
+        <DisclosureButton
+          as="div"
+          :disabled="link.disabled"
+        >
+          <NNavLink
+            :una="{
+              btnTrailing: `h-5 w-5 ${open ? 'rotate-90' : ''}`,
+              btn: 'w-full',
+            }"
+            trailing="i-heroicons-chevron-right-20-solid"
+            v-bind="omitProps(link, ['children'])"
+          />
+        </DisclosureButton>
+
+        <div v-show="open">
+          <DisclosurePanel
+            as="ul"
+            nav-link-group="panel"
+            static
+          >
+            <li v-for="subLink in link.children" :key="subLink.label">
+              <NNavLink
+                v-bind="subLink"
+                :una="{
+                  btnLabel: 'font-normal',
+                  btn: 'w-full pl-8',
+                }"
+              />
+            </li>
+          </DisclosurePanel>
+        </div>
+      </Disclosure>
+    </template>
+  </div>
+</template>

package/dist/runtime/components/slots/FormGroupDefault.mjs

@@ -16,7 +16,8 @@ export default defineComponent({
     if (!children.value)
       return () => null;
     const clones = computed(() => children.value?.map((node) => {
-      return cloneVNode(node, { id: props.id, name: props.id, status: props.status });
+      const mergeProps = { ...props, ...node.props };
+      return cloneVNode(node, mergeProps);
     }));
     return () => clones.value;
   }

package/dist/runtime/components/slots/FormGroupLabel.d.ts

@@ -0,0 +1,23 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    for: {
+        type: PropType<string | boolean | undefined>;
+        required: false;
+    };
+    id: {
+        type: PropType<string | undefined>;
+        required: false;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    for: {
+        type: PropType<string | boolean | undefined>;
+        required: false;
+    };
+    id: {
+        type: PropType<string | undefined>;
+        required: false;
+    };
+}>>, {}, {}>;
+export default _default;

package/dist/runtime/components/slots/FormGroupLabel.mjs

@@ -0,0 +1,29 @@
+import { computed, defineComponent, h } from "vue";
+export default defineComponent({
+  props: {
+    for: {
+      type: [String, Boolean],
+      required: false
+    },
+    id: {
+      type: String,
+      required: false
+    }
+  },
+  setup(props, { slots }) {
+    return () => {
+      const children = slots.default?.();
+      if (!children)
+        return;
+      const unLabelled = computed(() => props.for === false || props.for !== void 0);
+      const tag = computed(() => unLabelled.value ? "div" : "label");
+      return h(
+        tag.value,
+        {
+          for: unLabelled.value ? void 0 : props.for ?? props.id
+        },
+        children
+      );
+    };
+  }
+});

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

@@ -52,7 +52,7 @@ export interface NAccordionProps extends Omit<NButtonProps, 'una'> {
     */
     items: NAccordionItemProps[];
     /**
-     * `Unaonfiguration
+     * `UnaUI` preset configuration
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/accordion.ts
     */

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

@@ -34,7 +34,7 @@ export interface NAlertProps {
     */
     description?: string;
     /**
-     * `Unaguration
+     * `UnaUI` preset configuration
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/alert.ts
     */

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

@@ -56,7 +56,7 @@ export interface NAvatarProps {
     */
     skeleton?: boolean;
     /**
-     * `Unaet configuration
+     * `UnaUI` preset configuration
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/avatar.ts
     */

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

@@ -32,6 +32,7 @@ export interface NBadgeProps {
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/badge.ts
     */
     una?: {
+        badgeDefaultVariant?: string;
         badge?: string;
         badgeIconBase?: string;
         badgeClose?: string;

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

@@ -84,6 +84,7 @@ export interface NButtonProps {
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/button.ts
     */
     una?: {
+        btnDefaultVariant?: string;
         btn?: string;
         btnLabel?: string;
         btnIconLabel?: string;

package/dist/runtime/types/form-group.d.ts

@@ -12,16 +12,26 @@ export interface NFormGroupProps {
     */
     required?: boolean;
     /**
-     * Manually set the name attribute for the form group label.
-     * Slot children will inherit the name attribute as both `id` and `name` for accessibility.
+     * Manually set the for attribute.
      *
-     * By default, the name attribute is generated randomly.
+     * By default, the for attribute is synced with the id attribute for accessibility reasons.
+     * You can disable this behavior by setting `for` to `false`.
      *
      * @default randomId
      * @example
-     * name="email"
+     * for="email"
     */
-    name?: string;
+    for?: string | boolean;
+    /**
+     * Manually set the id attribute.
+     *
+     * By default, the id attribute is generated randomly for accessibility reasons.
+     *
+     * @default randomId
+     * @example
+     * id="email"
+    */
+    id?: string;
     /**
      * Label for the form group.
      *

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

@@ -3,7 +3,7 @@ export interface NIconProps {
      * Icon name
      *
      * @example
-     * 'heroicons-chevron-up'
+     * 'i-heroicons-chevron-up'
     */
     name: string;
 }

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

@@ -9,3 +9,8 @@ export * from './badge';
 export * from './avatar';
 export * from './avatar-group';
 export * from './indicator';
+export * from './kbd';
+export * from './nav-link';
+export * from './nav-link-group';
+export * from './link';
+export * from './radio';

package/dist/runtime/types/index.mjs

@@ -9,3 +9,8 @@ export * from "./badge.mjs";
 export * from "./avatar.mjs";
 export * from "./avatar-group.mjs";
 export * from "./indicator.mjs";
+export * from "./kbd.mjs";
+export * from "./nav-link.mjs";
+export * from "./nav-link-group.mjs";
+export * from "./link.mjs";
+export * from "./radio.mjs";

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

@@ -0,0 +1,26 @@
+export interface NKbdProps {
+    /**
+     * Allows you to add `UnaUI` kbd 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/kbd.ts
+     * @example
+     * kbd="solid-error"
+    */
+    kbd?: string;
+    /**
+     * Add a label to the kbd.
+     *
+     * @example
+     * label="Ctrl"
+    */
+    label?: string;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/kbd.ts
+    */
+    una?: {
+        kbd?: string;
+    };
+}

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

@@ -0,0 +1,26 @@
+export interface NLinkProps {
+    /**
+     * Manually enable/disable the exact match
+     *
+     * @default false
+    */
+    exact?: boolean;
+    /**
+     * Manually enable/disable the exact match for the query string
+     *
+     * @default false
+    */
+    exactQuery?: boolean;
+    /**
+     * Manually enable/disable the exact match for the hash
+     *
+     * @default false
+    */
+    exactHash?: boolean;
+    /**
+     * Active classes to apply when the link is inactive
+     *
+     * @example 'text-primary'
+    */
+    inactiveClass?: string;
+}

package/dist/runtime/types/nav-link-group.d.ts

@@ -0,0 +1,8 @@
+import type { NNavLinkProps } from './nav-link';
+export interface NNavLinkGroupLink extends NNavLinkProps {
+    children?: NNavLinkProps[];
+    defaultOpen?: boolean;
+}
+export interface NVerticalNav {
+    links: NNavLinkGroupLink[];
+}

package/dist/runtime/types/nav-link.d.ts

@@ -0,0 +1,5 @@
+import type { NBadgeProps } from './badge';
+import type { NButtonProps } from './button';
+export interface NNavLinkProps extends NButtonProps {
+    badge?: NBadgeProps;
+}

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

@@ -0,0 +1,90 @@
+export interface NRadioProps {
+    /**
+     * Disable the radio.
+     *
+     * @default false
+    */
+    disabled?: boolean;
+    /**
+     * Switch the position of label and radio.
+     *
+     * @default false
+    */
+    reverse?: boolean;
+    /**
+     * Allows you to add `UnaUI` radio 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/radio.ts
+     * @example
+     * radio="green"
+    */
+    radio?: string;
+    /**
+     * v-model binding value if the radio is checked.
+     *
+     * @default null
+    */
+    modelValue?: string | number | boolean | Record<string, any>;
+    /**
+     * Add name attribute to the radio.
+     *
+     * @default null
+    */
+    name?: string;
+    /**
+     * Manually set the id attribute.
+     *
+     * By default, the id attribute is generated randomly for accessibility reasons.
+     *
+     * @default randomId
+     * @example
+     * id="options"
+    */
+    id?: string;
+    /**
+     * Manually set the for attribute.
+     *
+     * By default, the for attribute is synced with the id attribute for accessibility reasons.
+     *
+     * @default randomId
+     * @example
+     * for="options"
+    */
+    for?: string;
+    /**
+     * Value of the radio.
+     *
+     * @example
+     * value="1"
+    */
+    value?: string;
+    /**
+     * Display label of the radio.
+     *
+     * @default null
+    */
+    label?: string;
+    /**
+     * Allows you to change the size of the radio.
+     *
+     * @default size="sm"
+     *
+     * @example
+     * size="sm" | size="2cm" | size="2rem" | size="2px"
+    */
+    size?: string;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/radio.ts
+    */
+    una?: {
+        radio?: string;
+        radioWrapper?: string;
+        radioLabel?: string;
+        radioPeerFocus?: string;
+        radioIconBase?: string;
+        radioIcon?: string;
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.1.1-beta.1",
+  "version": "0.2.0-beta.0",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -13,8 +13,8 @@
   },
   "exports": {
     ".": {
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "require": "./dist/module.cjs",
+      "import": "./dist/module.mjs"
     }
   },
   "main": "./dist/module.cjs",
@@ -24,26 +24,26 @@
   ],
   "dependencies": {
     "@headlessui/vue": "^1.7.16",
-    "@iconify-json/carbon": "^1.1.19",
     "@iconify-json/heroicons": "^1.1.12",
-    "@iconify-json/tabler": "^1.1.87",
-    "@nuxt/kit": "^3.6.5",
+    "@iconify-json/tabler": "^1.1.94",
+    "@nuxt/kit": "^3.7.4",
     "@nuxtjs/color-mode": "^3.3.0",
-    "@unocss/core": "^0.55.1",
-    "@unocss/nuxt": "^0.55.1",
-    "@unocss/preset-attributify": "^0.55.1",
-    "@unocss/preset-icons": "^0.55.1",
-    "@unocss/reset": "^0.55.1",
-    "@vueuse/core": "^10.3.0",
-    "@vueuse/integrations": "^10.3.0",
-    "@vueuse/nuxt": "^10.3.0",
-    "unocss": "^0.55.1",
-    "@una-ui/preset": "^0.1.1-beta.1"
+    "@unocss/core": "^0.55.7",
+    "@unocss/nuxt": "^0.55.7",
+    "@unocss/preset-attributify": "^0.55.7",
+    "@unocss/preset-icons": "^0.55.7",
+    "@vueuse/core": "^10.5.0",
+    "@vueuse/integrations": "^10.5.0",
+    "@vueuse/nuxt": "^10.5.0",
+    "ohash": "^1.1.3",
+    "unocss": "^0.55.7",
+    "@una-ui/extractor-vue-script": "^0.2.0-beta.0",
+    "@una-ui/preset": "^0.2.0-beta.0"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.4.0",
-    "@nuxt/schema": "^3.6.5",
-    "nuxt": "^3.6.5"
+    "@nuxt/schema": "^3.7.4",
+    "nuxt": "3.7.3"
   },
   "publishConfig": {
     "access": "public"