@nuxt/ui 0.0.0-alpha.5 → 0.2.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) Nuxt Team
+Copyright (c) 2021 Nuxt Project
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,25 +1,21 @@
-# Nuxt UI
+# Nuxt UI Components
 
-UI kit for Nuxt 3's examples and internal tooling UI.
+<a href="https://www.npmjs.com/package/@nuxt/ui-edge"><img src="https://flat.badgen.net/npm/v/@nuxt/ui-edge"></a>
 
-> Note: This is library heavily working in progress and does not serve as a generic UI library (for now).
+UI kit for Nuxt 3's examples and internal tooling UI.
 
-## Install
+> Note: This library is heavily working in progress and does not serve as a generic UI library (for now). It is not recommended to use it in production.
 
-```sh
-# npm
-npm install @nuxt/ui@npm:@nuxt/ui-edge
+🏀 [Online Playground](https://components.ui.nuxtjs.org)
 
-# yarn
-yarn install @nuxt/ui@npm:@nuxt/ui-edge
-```
+## Install
 
 ```ts
 // nuxt.config.js
-import { defineNuxtConfig } from 'nuxt3'
+import { defineNuxtConfig } from 'nuxt'
 
 export default defineNuxtConfig({
-  buildModules: [
+  modules: [
     '@nuxt/ui'
   ]
 })
@@ -57,39 +53,28 @@ Apply it to parent components could make a local theme scope
 </NCard>
 ```
 
-## Components
-
-### Base
-
-- [x] `<NCard>`
-- [x] `<NTextInput>`
-- [x] `<NCheckbox>`
-- [x] `<NRadio>`
-- [x] `<NIcon>`
-- [x] `<NLink>`
-- [x] `<NButton>`
-- [x] `<NTip>`
-- [ ] `<NButtonGroup>`
-- [ ] `<NSpinner>`
-- [ ] `<NAlert>`
-- [ ] `<NBadge>`
+## Theming
 
-### Interactive
+Powered by [UnoCSS](https://github.com/antfu/unocss), you can use Tailwind/Windi CSS utilities to quickly customize the look and feel of components.
 
-- [x] `<NDialog>`
-- [ ] `<NTabs>`
-- [ ] `<NDropdown>`
-- [ ] `<NPopup>`
-- [ ] `<NNotification>`
-- [ ] `<NModal>`
+It's also possible to override the default theme globally, for example:
 
-### Layout
-
-- [ ] `<NContainer>`
-- [ ] `<NDrawer>`
-- [ ] `<NNavbar>`
-- [ ] `<NPagination>`
+```ts
+// nuxt.config.js
+import { defineNuxtConfig } from 'nuxt'
 
-## License
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ],
+  unocss: {
+    shortcuts: {
+      'n-button-base': 'border n-border-base rounded shadow-sm op80 !outline-none',
+      'n-button-hover': 'op100 !border-context text-context',
+      'n-button-active': 'n-active-base bg-context/5',
+    }
+  }
+})
+```
 
-MIT
+You can find all the default values and available entries in [src/unocss/index.ts](./src/unocss/index.ts).

package/dist/assets/styles.css

@@ -0,0 +1,14 @@
+:root {
+  --nui-c-context: 125,125,125;
+}
+
+html {
+  background-color: white;
+}
+
+html.dark {
+  color-scheme: dark;
+  background-color: #222;
+  color: white;
+}
+

package/dist/components/NCheckbox.vue

@@ -27,8 +27,8 @@ const props = withDefaults(
     disabled?: boolean }>(),
   {
     modelValue: false,
-    disabled: false,
-  },
+    disabled: false
+  }
 )
 const emit = defineEmits<{(...args: any): void}>()
 const checked = useVModel(props, 'modelValue', emit, { passive: true })

package/dist/components/NDarkToggle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+/* eslint-disable vue/no-multiple-template-root */
+import { useColorMode, useToggle } from '@vueuse/core'
+import { computed } from 'vue'
+
+const mode = useColorMode()
+
+const isDark = computed<boolean>({
+  get () {
+    return mode.value === 'dark'
+  },
+  set (v) {
+    mode.value = v ? 'dark' : 'light'
+  }
+})
+
+const toggle = useToggle(isDark)
+
+const context = {
+  mode,
+  isDark,
+  toggle
+}
+</script>
+
+<template>
+  <slot v-bind="context" />
+</template>

package/dist/components/NDialog.vue

@@ -30,10 +30,10 @@ const props = withDefaults(
   }>(),
   {
     modelValue: false,
-    dim: true,
-  },
+    dim: true
+  }
 )
-const emit = defineEmits<{ (...args: any): void }>()
+const emit = defineEmits<{(...args: any): void }>()
 
 const show = useVModel(props, 'modelValue', emit, { passive: true })
 const card = ref(null)
@@ -42,14 +42,11 @@ const { activate, deactivate } = useFocusTrap(card, { immediate: false })
 
 onMounted(() => {
   watch(show, (v) => {
-    if (v)
-      activate()
-    else
-      deactivate()
+    if (v) { activate() } else { deactivate() }
   }, { immediate: true })
 })
 
-function close() {
+function close () {
   show.value = false
   emit('close')
 }
@@ -57,6 +54,6 @@ function close() {
 
 <script lang="ts">
 export default {
-  inheritAttrs: false,
+  inheritAttrs: false
 }
 </script>

package/dist/components/NDropdown.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onClickOutside, useVModel } from '@vueuse/core'
+
+const props = defineProps<{ modelValue?: boolean }>()
+const emit = defineEmits<{(...args: any): void }>()
+
+const enabled = useVModel(props, 'modelValue', emit, { passive: true })
+const el = ref<HTMLDivElement>()
+
+onClickOutside(el, () => {
+  enabled.value = false
+})
+</script>
+
+<template>
+  <div ref="el" class="relative">
+    <slot name="trigger" :enabled="enabled" @click="enabled = !enabled">
+      <NButton @click="enabled = !enabled">
+        Dropdown
+      </NButton>
+    </slot>
+
+    <div
+      class="absolute z-10 n-transition n-bg-base border n-border-base rounded shadow"
+      :class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1']"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/components/NLink.vue

@@ -2,7 +2,7 @@
   <Component
     :is="(href || target) ? 'a' : 'nuxt-link'"
     v-bind="$props"
-    class="n-link n-link-base n-transition"
+    class="n-link n-link-base hover:n-link-hover n-transition"
   >
     <slot />
   </Component>

package/dist/components/NRadio.vue

@@ -32,8 +32,8 @@ const props = withDefaults(
   }>(),
   {
     modelValue: '',
-    disabled: false,
-  },
+    disabled: false
+  }
 )
 const emit = defineEmits<{(...args: any): void}>()
 const model = useVModel(props, 'modelValue', emit, { passive: true })

package/dist/components/NSwitch.vue

@@ -29,8 +29,8 @@ const props = withDefaults(
     disabled?: boolean }>(),
   {
     modelValue: false,
-    disabled: false,
-  },
+    disabled: false
+  }
 )
 const emit = defineEmits<{(...args: any): void}>()
 const checked = useVModel(props, 'modelValue', emit, { passive: true })

package/dist/components/NTextInput.vue

@@ -6,7 +6,7 @@
     <input
       v-model="input"
       class="!outline-none flex-auto n-bg-base"
-      type="text"
+      :type="type"
       :placeholder="placeholder"
     >
   </div>
@@ -21,11 +21,13 @@ const props = withDefaults(
     placeholder?: string
     icon?: string
     disabled?: boolean
+    type?: string
   }>(),
   {
     modelValue: '',
     disabled: false,
-  },
+    type: 'text'
+  }
 )
 const emit = defineEmits<{(...args: any): void}>()
 const input = useVModel(props, 'modelValue', emit, { passive: true })

package/dist/components/NuxtContentLogo.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 236 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M29.3445 12.5176c-1.8181-3.10288-6.3636-3.10288-8.1819 0L1.34708 46.334c-1.8182 3.1029.45453 6.9814 4.09096 6.9814H20.9071c-1.5538-1.3478-2.1292-3.6793-.9532-5.68l15.0073-25.5327-5.6167-9.5851Z" fill="#80EEC0" />
+    <path d="M41.9001 19.9353c1.5048-2.5387 5.2665-2.5387 6.7712 0l16.3991 27.6679c1.5048 2.5387-.3762 5.7122-3.3855 5.7122H28.8867c-3.0093 0-4.8904-3.1735-3.3857-5.7122l16.3991-27.6679Z" fill="#00DC82" />
+    <path d="M93.247 53.206c7.271 0 12.682-4.1739 13.273-10.2874h-5.579c-.508 3.2042-3.6358 5.4388-7.694 5.4388-5.1572 0-9.0462-3.5415-9.0462-10.2451 0-6.7037 3.889-10.2875 9.0462-10.2875 3.9735 0 7.102 2.2345 7.524 5.4811h5.834c-.803-6.1135-6.214-10.2875-13.358-10.2875-7.7358 0-14.6684 5.0593-14.6684 15.0939 0 10.0344 6.8059 15.0937 14.6684 15.0937Zm26.866 0c6.468 0 11.118-4.6378 11.118-10.962 0-6.3242-4.65-10.962-11.118-10.962-6.51 0-11.159 4.6378-11.159 10.962 0 6.3242 4.649 10.962 11.159 10.962Zm0-4.4692c-3.55 0-5.918-2.6562-5.918-6.4928 0-3.8368 2.368-6.4927 5.918-6.4927 3.509 0 5.877 2.6559 5.877 6.4927 0 3.8366-2.368 6.4928-5.877 6.4928Zm19.826 4.1319V41.2743c0-3.12 2.029-5.3967 4.946-5.3967 2.663 0 4.439 2.0239 4.439 4.933v12.0581h5.199V39.7143c0-4.975-3.128-8.4323-7.947-8.4323-3.044 0-5.453 1.3071-6.637 3.6259v-3.2886h-5.199v21.2494h5.199Zm21.158-21.2494h-4.185v4.3427h4.185v9.4864c0 4.722 3.044 7.4203 7.694 7.4203h3.424v-4.3849h-2.833c-1.943 0-3.085-1.0961-3.085-3.2464V35.962h5.918v-4.3427h-5.918v-6.4085h-5.2v6.4085Zm28.684 14.1662c-.55 2.0237-2.283 3.12-4.946 3.12-3.297 0-5.495-2.1924-5.876-5.6074h15.725c.043-.4217.085-1.0541.085-1.7709 0-5.0593-3.211-10.2452-10.357-10.2452-6.974 0-10.441 5.2703-10.441 10.8776 0 5.5654 3.89 11.0464 10.864 11.0464 5.243 0 9.215-2.9092 10.018-7.4205h-5.072Zm-5.369-10.6245c3.086 0 4.947 2.0237 5.158 4.722h-10.483c.549-3.2044 2.408-4.722 5.325-4.722Zm19.141 17.7077V41.2743c0-3.12 2.029-5.3967 4.947-5.3967 2.663 0 4.439 2.0239 4.439 4.933v12.0581h5.199V39.7143c0-4.975-3.128-8.4323-7.947-8.4323-3.044 0-5.453 1.3071-6.638 3.6259v-3.2886h-5.199v21.2494h5.199Zm21.159-21.2494h-4.185v4.3427h4.185v9.4864c0 4.722 3.043 7.4203 7.693 7.4203h3.425v-4.3849h-2.833c-1.945 0-3.086-1.0961-3.086-3.2464V35.962h5.919v-4.3427h-5.919v-6.4085h-5.199v6.4085Z" fill="currentColor" />
+  </svg>
+</template>

package/dist/components/NuxtExampleLayout.vue

@@ -1,10 +1,18 @@
 <script setup lang="ts">
-const props = defineProps<{
-  name?: string
+import NIcon from './NIcon.vue'
+import NuxtLogo from './NuxtLogo.vue'
+import NuxtContentLogo from './NuxtContentLogo.vue'
+
+interface Props {
+  example?: string
   showTips?: boolean
-  class?: string
-  openPath?: string
-}>()
+  class?: string // eslint-disable-line vue/no-reserved-props
+  openPath?: string,
+  repo?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  repo: 'nuxt/framework'
+})
 
 const openInEditor = () => {
   fetch(`/__open-in-editor?file=${encodeURIComponent(props.openPath || 'app.vue')}`)
@@ -14,21 +22,42 @@ const openInEditor = () => {
 <template>
   <div class="relative font-sans" n="green6">
     <div class="container max-w-200 mx-auto py-10 px-4">
-      <div class="flex flex-col gap-2 items-center mb-4">
-        <img src="../assets/logo-nuxt3.svg" h="12">
+      <div class="flex items-end gap-3 mb-4 relative">
+        <slot name="logo">
+          <NuxtContentLogo v-if="repo === 'nuxt/content'" class="h-10" />
+          <NuxtLogo v-else class="h-10" />
+        </slot>
         <div class="text-xl flex">
           <div class="op-50">
             examples/
           </div>
           <slot name="name">
-            <NLink :href="`https://github.com/nuxt/framework/tree/main/examples/${name}`" target="_blank">
-              {{ name }}
+            <NLink :href="`https://github.com/${repo}/tree/main/examples/${example}`" target="_blank">
+              {{ example }}
             </NLink>
           </slot>
         </div>
-        <slot name="subtitle" />
+        <div flex-auto />
+        <div class="op20 hover:op-100 n-transition -mb-2 -mr-1">
+          <NButton
+            n="borderless lg"
+            class="p-2 op50"
+            :to="`https://github.com/${repo}/tree/main/examples/${example}`"
+            target="_blank"
+          >
+            <NIcon icon="carbon-code" />
+          </NButton>
+          <NDarkToggle>
+            <template #default="{ toggle }">
+              <NButton n="borderless lg" p-2 op50 @click="toggle">
+                <NIcon icon="dark:carbon-moon carbon-sun" />
+              </NButton>
+            </template>
+          </NDarkToggle>
+        </div>
       </div>
 
+      <slot name="subtitle" />
       <slot name="nav" />
 
       <NCard class="p-6 flex flex-col gap-2 text-center" :class="$props.class">

package/dist/components/NuxtLogo.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#a)">
+      <path
+        fill="currentColor"
+        d="M82.562 18.57h7.302l15.474 24.742V18.571h6.741v35.057h-7.252l-15.525-24.69v24.69h-6.74V18.57Zm59.645 35.058h-6.282v-3.916c-1.429 2.756-4.339 4.308-8.015 4.308-5.822 0-9.603-4.107-9.603-10.018V28.385h6.282V42.71c0 3.456 2.146 5.859 5.362 5.859 3.524 0 5.974-2.704 5.974-6.41V28.385h6.282v25.243Zm21.857-.4-6.026-8.413-6.027 8.414h-6.69l9.296-13.172-8.58-12.071h6.843l5.158 7.264 5.106-7.264h6.895l-8.632 12.07 9.295 13.173h-6.638Zm19.405-32.455v7.611h7.149v5.16h-7.149v12.53c0 .421.17.825.473 1.123.303.298.715.465 1.144.466h5.532v5.955h-4.137c-5.617 0-9.293-3.206-9.293-8.811V33.548h-5.056v-5.164h3.172c1.479 0 2.34-.864 2.34-2.293v-5.318h5.825Z"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M30.119 11.546c-1.886-3.242-6.6-3.242-8.484 0L1.087 46.875c-1.885 3.241.472 7.293 4.242 7.293h16.04c-1.61-1.408-2.207-3.844-.988-5.934L35.942 21.56l-5.824-10.013Z"
+        fill="#80EEC0"
+      />
+      <path
+        d="M43.137 19.295c1.56-2.652 5.461-2.652 7.022 0l17.004 28.906c1.56 2.652-.39 5.968-3.51 5.968h-34.01c-3.12 0-5.07-3.316-3.51-5.968l17.004-28.906ZM209.174 53.8h-10.691c0-1.85.067-3.452 0-6.02h10.641c1.868 0 3.353.1 4.354-.935 1-1.034 1.501-2.335 1.501-3.903 0-1.834-.667-3.219-2.002-4.153-1.301-.967-2.985-1.451-5.054-1.451h-2.601v-5.254h2.652c1.701 0 3.119-.4 4.253-1.2 1.134-.801 1.701-1.986 1.701-3.553 0-1.301-.434-2.336-1.301-3.103-.834-.8-2.001-1.2-3.503-1.2-1.634 0-2.918.483-3.853 1.45-.9.968-1.401 2.152-1.501 3.553h-6.254c.133-3.236 1.251-5.788 3.352-7.656 2.135-1.868 4.887-2.802 8.256-2.802 2.402 0 4.42.434 6.055 1.301 1.668.834 2.919 1.952 3.753 3.353.867 1.4 1.301 2.952 1.301 4.653 0 1.968-.551 3.636-1.651 5.004-1.068 1.334-2.402 2.235-4.004 2.702 1.969.4 3.57 1.368 4.804 2.902 1.234 1.501 1.852 3.403 1.852 5.705 0 1.934-.468 3.702-1.402 5.304-.934 1.6-2.301 2.885-4.103 3.852-1.768.968-3.953 1.452-6.555 1.452Z"
+        fill="#00DC82"
+      />
+    </g>
+  </svg>
+</template>

package/dist/components/nuxt/NDarkToggle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+/* eslint-disable vue/no-multiple-template-root */
+import { computed } from 'vue'
+import { useToggle } from '@vueuse/core'
+import { useColorMode } from '#imports'
+
+const mode = useColorMode() // Auto imported from @nuxtjs/color-mode
+const isDark = computed<boolean>({
+  get () {
+    return mode.value === 'dark'
+  },
+  set () {
+    mode.preference = isDark.value ? 'light' : 'dark'
+  }
+})
+const toggle = useToggle(isDark)
+const context = {
+  mode,
+  isDark,
+  toggle
+}
+</script>
+
+<template>
+  <ColorScheme tag="span">
+    <slot v-bind="context" />
+  </ColorScheme>
+</template>

package/dist/nuxt.d.ts

@@ -1,6 +1,9 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-declare const _default: _nuxt_schema.LegacyNuxtModule;
+declare const _default: _nuxt_schema.NuxtModule<{
+    preset: string;
+    dev: boolean;
+}>;
 
 declare module '@nuxt/schema' {
     interface NuxtConfig {

package/dist/nuxt.mjs

@@ -1,14 +1,10 @@
 import { fileURLToPath } from 'url';
-import { resolve } from 'path';
-import { existsSync } from 'fs';
-import { defineNuxtModule, addComponentsDir, installModule } from '@nuxt/kit';
-import UnocssModule from '@unocss/nuxt';
-import VueUseModule from '@vueuse/nuxt';
-import { mergeDeep } from '@unocss/core';
-import presetUno, { theme } from '@unocss/preset-uno';
-import { parseColorUtil, fonts } from '@unocss/preset-mini/rules';
-import presetIcons from '@unocss/preset-icons';
-import presetAttributify from '@unocss/preset-attributify';
+import { defineNuxtModule, addComponentsDir, createResolver, installModule } from '@nuxt/kit';
+import defu from 'defu';
+import { parseColor } from '@unocss/preset-mini/utils';
+import { theme } from '@unocss/preset-mini';
+import { fonts } from '@unocss/preset-mini/rules';
+import { mergeDeep, presetUno, presetAttributify, presetTypography, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss';
 
 const NuxtUIPreset = {
   name: "nuxt-ui",
@@ -22,10 +18,10 @@ const NuxtUIPreset = {
   }),
   rules: [
     [/^n-(.*)$/, ([, body], { theme }) => {
-      const { rgba } = parseColorUtil(body, theme) || {};
-      if (rgba) {
+      const color = parseColor(body, theme);
+      if (color?.cssColor?.type === "rgb" && color.cssColor.components) {
         return {
-          "--nui-c-context": `${rgba.join(",")}`
+          "--nui-c-context": `${color.cssColor.components.join(",")}`
         };
       }
     }],
@@ -34,12 +30,12 @@ const NuxtUIPreset = {
     ["n-solid", {
       "background-color": "rgba(var(--nui-c-context), 1) !important",
       "border-color": "rgba(var(--nui-c-context), 1)",
-      "color": "white !important"
+      color: "white !important"
     }],
     ["n-disabled", {
-      "opacity": 0.4,
+      opacity: 0.4,
       "pointer-events": "none",
-      "filter": "saturate(0)"
+      filter: "saturate(0)"
     }]
   ],
   variants: [
@@ -70,7 +66,9 @@ const NuxtUIPreset = {
     "n-transition": "transition-all duration-200",
     "n-focus-base": "ring-2 ring-context/50",
     "n-active-base": "ring-3 ring-context/10",
-    "n-link-base": "hover:decoration-dotted hover:underline-offset-2 hover:text-context hover:underline",
+    "n-borderless": "!border-none !shadow-none",
+    "n-link-base": "underline underline-offset-2 underline-black/20 dark:underline-white/40",
+    "n-link-hover": "decoration-dotted text-context underline-context",
     "n-card-base": "border n-border-200 rounded n-bg-base shadow-sm",
     "n-header-upper": "text-sm uppercase mb-2 leading-1.2em tracking-wide op50",
     "n-button-base": "border n-border-base rounded shadow-sm px-1em py-0.25em inline-flex items-center gap-1 op80 !outline-none",
@@ -100,36 +98,48 @@ function extendUnocssOptions(user = {}) {
     presets: [
       presetUno(),
       presetAttributify(),
+      presetTypography(),
       presetIcons({
         prefix: "",
         scale: 1.2,
         extraProperties: {
-          "display": "inline-block",
+          display: "inline-block",
           "vertical-align": "middle"
         }
       }),
       NuxtUIPreset,
       ...user.presets || []
+    ],
+    transformers: [
+      transformerDirectives(),
+      transformerVariantGroup()
     ]
   };
 }
 
 const rPath = (p) => fileURLToPath(new URL(p, import.meta.url).toString());
 const nuxt = defineNuxtModule({
-  name: "nui",
+  meta: {
+    name: "nui",
+    configKey: "nui"
+  },
   defaults: {
     preset: rPath("./preset"),
     dev: false
   },
   async setup(options, nuxt) {
+    addComponentsDir({ path: rPath("./components/nuxt") });
     addComponentsDir({ path: rPath("./components") });
-    const presetStyles = resolve(options.preset, "styles.css");
-    if (existsSync(presetStyles))
-      nuxt.options.css.push(presetStyles);
-    if (!options.dev)
+    nuxt.options.css.unshift(rPath("assets/styles.css"));
+    if (!options.dev) {
       nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss);
-    await installModule(nuxt, UnocssModule);
-    await installModule(nuxt, VueUseModule);
+    }
+    nuxt.options.vueuse = nuxt.options.vueuse || {};
+    nuxt.options.colorMode = defu(nuxt.options.colorMode, { classSuffix: "" });
+    const resolver = createResolver(import.meta.url);
+    await installModule(await resolver.resolvePath("@unocss/nuxt"));
+    await installModule(await resolver.resolvePath("@vueuse/nuxt"));
+    await installModule(await resolver.resolvePath("@nuxtjs/color-mode"));
   }
 });
 

package/nuxt.cjs

@@ -1,5 +1,5 @@
 // CommonJS proxy to bypass jiti transforms from nuxt 2 and using native ESM
-module.exports = function(...args) {
+module.exports = function (...args) {
   return import('./dist/nuxt.mjs').then(m => m.default.call(this, ...args))
 }
 

package/package.json

@@ -1,16 +1,8 @@
 {
   "name": "@nuxt/ui",
-  "version": "0.0.0-alpha.5",
-  "type": "module",
+  "version": "0.2.0",
   "license": "MIT",
-  "scripts": {
-    "build": "unbuild && cp -R src/components dist/",
-    "lint": "eslint . --ext .vue,.ts",
-    "dev": "yarn nuxi dev playground",
-    "prepublishOnly": "npm run build",
-    "release": "bumpp --commit --tag --push --preid alpha && yarn publish --non-interactive"
-  },
-  "main": "./dist/nuxt.mjs",
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/nuxt.mjs",
@@ -21,33 +13,41 @@
       "require": "./nuxt.cjs"
     }
   },
+  "main": "./dist/nuxt.mjs",
   "files": [
     "dist",
     "*.cjs"
   ],
+  "scripts": {
+    "build": "unbuild",
+    "dev": "nuxi dev playground",
+    "lint": "eslint . --ext .vue,.ts",
+    "prepack": "npm run build",
+    "playground:build": "nuxi build playground"
+  },
   "dependencies": {
-    "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
-    "@unocss/core": "^0.16.4",
-    "@unocss/nuxt": "^0.16.4",
-    "@unocss/preset-attributify": "^0.16.4",
-    "@unocss/preset-icons": "^0.16.4",
-    "@unocss/preset-mini": "^0.16.4",
-    "@unocss/preset-uno": "^0.16.4",
-    "@unocss/reset": "^0.16.4",
-    "@vueuse/integrations": "^7.3.0",
-    "@vueuse/nuxt": "^7.3.0",
-    "focus-trap": "^6.7.1"
+    "@iconify-json/carbon": "^1.1.6",
+    "@nuxt/kit": "^3.0.0-rc.4",
+    "@nuxtjs/color-mode": "^3.1.4",
+    "@unocss/core": "^0.44.1",
+    "@unocss/nuxt": "^0.44.1",
+    "@unocss/preset-attributify": "^0.44.1",
+    "@unocss/preset-icons": "^0.44.1",
+    "@unocss/preset-mini": "^0.44.1",
+    "@unocss/reset": "^0.44.1",
+    "@vueuse/core": "^8.9.2",
+    "@vueuse/integrations": "^8.9.2",
+    "@vueuse/nuxt": "^8.9.2",
+    "defu": "^6.0.0",
+    "focus-trap": "^6.9.4",
+    "unocss": "^0.44.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.13.1",
-    "@iconify-json/carbon": "^1.0.12",
-    "bumpp": "^7.1.1",
-    "eslint": "^8.4.1",
-    "nuxt3": "latest",
-    "typescript": "^4.5.4",
-    "unbuild": "^0.6.7"
+    "nuxt": "3.0.0-rc.4",
+    "unbuild": "^0.7.4"
+  },
+  "publishConfig": {
+    "access": "public"
   },
-  "eslintConfig": {
-    "extends": "@antfu"
-  }
+  "gitHead": "1d10fbfe28e7256c18c04404f4e1f0805a4e454a"
 }

package/dist/assets/logo-nuxt3.svg

@@ -1,18 +0,0 @@
-<svg viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
-  <g clip-path="url(#a)">
-    <path fill="currentColor"
-      d="M82.5623 18.5705h7.3017l15.474 24.7415V18.5705h6.741v35.0576h-7.252L89.3025 28.938v24.6901h-6.7402V18.5705ZM142.207 53.628h-6.282v-3.916c-1.429 2.7559-4.339 4.3076-8.015 4.3076-5.822 0-9.603-4.1069-9.603-10.0175V28.3847h6.282v14.3251c0 3.4558 2.146 5.8592 5.362 5.8592 3.524 0 5.974-2.7044 5.974-6.4099V28.3847h6.282V53.628ZM164.064 53.2289l-6.026-8.4144-6.027 8.4144h-6.69l9.296-13.1723-8.58-12.0709h6.843l5.158 7.2641 5.106-7.2641h6.895l-8.632 12.0709 9.295 13.1723h-6.638ZM183.469 20.7726v7.6116h7.149v5.1593h-7.149v12.5311c0 .4208.17.8245.473 1.1223.303.2978.715.4654 1.144.4661h5.532v5.9547h-4.137c-5.617 0-9.293-3.2062-9.293-8.8109V33.5484h-5.056v-5.1642h3.172c1.479 0 2.34-.8639 2.34-2.2932v-5.3184h5.825Z">
-    </path>
-    <path fill-rule="evenodd" clip-rule="evenodd"
-      d="M30.1185 11.5456c-1.8853-3.24168-6.5987-3.24169-8.484 0L1.08737 46.8747c-1.885324 3.2417.47133 7.2938 4.24199 7.2938H21.3695c-1.6112-1.4081-2.2079-3.8441-.9886-5.9341l15.5615-26.675-5.8239-10.0138Z"
-      fill="#80EEC0"></path>
-    <path
-      d="M43.1374 19.2952c1.5603-2.6523 5.461-2.6523 7.0212 0l17.0045 28.9057c1.5603 2.6522-.39 5.9676-3.5106 5.9676h-34.009c-3.1206 0-5.0709-3.3154-3.5106-5.9676l17.0045-28.9057ZM209.174 53.8005H198.483c0-1.8514.067-3.4526 0-6.0213h10.641c1.868 0 3.353.1001 4.354-.934 1-1.0341 1.501-2.3351 1.501-3.9029 0-1.8347-.667-3.2191-2.002-4.1532-1.301-.9674-2.985-1.4511-5.054-1.4511h-2.601v-5.2539h2.652c1.701 0 3.119-.4003 4.253-1.2009 1.134-.8006 1.701-1.9849 1.701-3.5527 0-1.301-.434-2.3351-1.301-3.1023-.834-.8007-2.001-1.201-3.503-1.201-1.634 0-2.918.4837-3.853 1.4511-.9.9674-1.401 2.1517-1.501 3.5527h-6.254c.133-3.2358 1.251-5.7877 3.352-7.6558 2.135-1.868 4.887-2.8021 8.256-2.8021 2.402 0 4.42.4337 6.055 1.301 1.668.834 2.919 1.9515 3.753 3.3525.867 1.4011 1.301 2.9523 1.301 4.6536 0 1.9681-.551 3.636-1.651 5.0037-1.068 1.3344-2.402 2.235-4.004 2.7021 1.969.4003 3.57 1.3677 4.804 2.9022 1.234 1.5011 1.852 3.4025 1.852 5.7043 0 1.9347-.468 3.7028-1.402 5.304-.934 1.6012-2.301 2.8855-4.103 3.8529-1.768.9674-3.953 1.4511-6.555 1.4511Z"
-      fill="#00DC82"></path>
-  </g>
-  <defs>
-    <clipPath id="a">
-      <path fill="#fff" d="M0 0h221v65H0z"></path>
-    </clipPath>
-  </defs>
-</svg>