@nuxt/ui 0.0.0-alpha.4 → 0.1.1

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,47 +1,80 @@
-# Nuxt UI
+# Nuxt UI Components
+
+<a href="https://www.npmjs.com/package/@nuxt/ui-edge"><img src="https://flat.badgen.net/npm/v/@nuxt/ui-edge"></a>
+
+UI kit for Nuxt 3's examples and internal tooling UI.
+
+> 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.
+
+🏀 [Online Playground](https://components.ui.nuxtjs.org)
 
 ## Install
 
-```sh
-# npm
-npm install @nuxt/ui@npm:@nuxt/ui-edge
+```ts
+// nuxt.config.js
+import { defineNuxtConfig } from 'nuxt3'
 
-# yarn
-yarn install @nuxt/ui@npm:@nuxt/ui-edge
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
+})
 ```
 
 ## Usage
 
-## Components
+Nuxt UI is an unbundled component library powered by [UnoCSS](https://github.com/antfu/unocss) and [VueUse](https://vueuse.org/).
 
-### Base
+In Nuxt UI, we introduced the `n` attribute for every component to customize the styles and variations. For example, to make a red button:
 
-- [ ] `<NCard>`
-- [ ] `<NInput>`
-- [ ] `<NCheckbox>`
-- [ ] `<NRadio>`
-- [ ] `<NIcon>`
-- [ ] `<NButton>`
-- [ ] `<NButtonGroup>`
-- [ ] `<NSpinner>`
-- [ ] `<NAlert>`
-- [ ] `<NBadge>`
+```html
+<NButton n="red" />
+```
+
+to make it larger, add the size specifier (`sm`, `md`, `lg` or `xl`) the `n` attribute:
 
-### Interactive
+```html
+<NButton n="red xl" />
+```
 
-- [ ] `<NTabs>`
-- [ ] `<NDropdown>`
-- [ ] `<NPopup>`
-- [ ] `<NNotification>`
-- [ ] `<NModal>`
+You can apply the same specifiers to any other component, for example:
 
-### Layout
+```html
+<NCheckbox n="red xl" />
+```
 
-- [ ] `<NContainer>`
-- [ ] `<NDrawer>`
-- [ ] `<NNavbar>`
-- [ ] `<NPagination>`
+Apply it to parent components could make a local theme scope
 
-## License
+```html
+<NCard n="green-500">
+  <!-- both of them are themed green -->
+  <NCheckbox>i accept the terms & conditions</NCheckbox>
+  <NButton>Submit</NButton>
+</NCard>
+```
+
+## Theming
+
+Powered by [UnoCSS](https://github.com/antfu/unocss), you can use Tailwind/Windi CSS utilities to quickly customize the look and feel of components.
+
+It's also possible to override the default theme globally, for example:
+
+```ts
+// nuxt.config.js
+import { defineNuxtConfig } from 'nuxt3'
+
+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/NuxtExampleLayout.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
-const props = defineProps<{
-  name?: string
+import NIcon from './NIcon.vue'
+import NuxtIcon from './NuxtIcon.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 +21,41 @@ 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="https://raw.githubusercontent.com/nuxt/framework/main/playground/assets/logo.svg" h="12">
+      <div class="flex items-end gap-3 mb-4 relative">
+        <slot name="icon">
+          <NuxtIcon />
+        </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/NuxtIcon.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-10">
+    <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 (v) {
+    mode.preference = v ? 'dark' : 'light'
+  }
+})
+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,13 @@
 import { fileURLToPath } from 'url';
-import { resolve } from 'path';
-import { existsSync } from 'fs';
 import { defineNuxtModule, addComponentsDir, installModule } from '@nuxt/kit';
+import defu from 'defu';
 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 NuxtColorMode from '@nuxtjs/color-mode';
+import { parseColor } from '@unocss/preset-mini/utils';
+import { theme } from '@unocss/preset-mini';
+import { fonts } from '@unocss/preset-mini/rules';
+import { mergeDeep, presetUno, presetAttributify, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss';
 
 const NuxtUIPreset = {
   name: "nuxt-ui",
@@ -22,10 +21,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 +33,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 +69,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",
@@ -104,32 +105,42 @@ function extendUnocssOptions(user = {}) {
         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 = Object.assign({ ssrHandlers: true }, nuxt.options.vueuse || {});
+    nuxt.options.colorMode = defu(nuxt.options.colorMode, { classSuffix: "" });
+    await installModule(UnocssModule);
+    await installModule(VueUseModule);
+    await installModule(NuxtColorMode);
   }
 });
 

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.4",
-  "type": "module",
+  "version": "0.1.1",
   "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": "yarn nuxi dev playground",
+    "lint": "eslint . --ext .vue,.ts",
+    "prepack": "npm run build",
+    "playground:build": "yarn nuxi build playground"
+  },
   "dependencies": {
+    "@iconify-json/carbon": "^1.1.3",
     "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
-    "@unocss/core": "^0.16.3",
-    "@unocss/nuxt": "^0.16.3",
-    "@unocss/preset-attributify": "^0.16.3",
-    "@unocss/preset-icons": "^0.16.3",
-    "@unocss/preset-mini": "^0.16.3",
-    "@unocss/preset-uno": "^0.16.3",
-    "@unocss/reset": "^0.16.3",
-    "@vueuse/integrations": "^7.3.0",
-    "@vueuse/nuxt": "^7.3.0",
-    "focus-trap": "^6.7.1"
+    "@nuxtjs/color-mode": "^3.0.2",
+    "@unocss/core": "^0.31.6",
+    "@unocss/nuxt": "^0.31.6",
+    "@unocss/preset-attributify": "^0.31.6",
+    "@unocss/preset-icons": "^0.31.6",
+    "@unocss/preset-mini": "^0.31.6",
+    "@unocss/reset": "^0.31.6",
+    "@vueuse/core": "^8.2.6",
+    "@vueuse/integrations": "^8.2.6",
+    "@vueuse/nuxt": "^8.2.6",
+    "defu": "^6.0.0",
+    "focus-trap": "^6.7.3",
+    "unocss": "^0.31.6"
   },
   "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.3",
-    "unbuild": "^0.6.3"
+    "unbuild": "^0.7.4"
+  },
+  "publishConfig": {
+    "access": "public"
   },
-  "eslintConfig": {
-    "extends": "@antfu"
-  }
+  "gitHead": "efbb705b65badd081240c63f63be61ec3874e9dc"
 }

package/dist/nuxt.cjs

@@ -1,146 +0,0 @@
-'use strict';
-
-const url = require('url');
-const path = require('path');
-const fs = require('fs');
-const kit = require('@nuxt/kit');
-const UnocssModule = require('@unocss/nuxt');
-const VueUseModule = require('@vueuse/nuxt');
-const core = require('@unocss/core');
-const presetUno = require('@unocss/preset-uno');
-const rules = require('@unocss/preset-mini/rules');
-const presetIcons = require('@unocss/preset-icons');
-const presetAttributify = require('@unocss/preset-attributify');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-const UnocssModule__default = /*#__PURE__*/_interopDefaultLegacy(UnocssModule);
-const VueUseModule__default = /*#__PURE__*/_interopDefaultLegacy(VueUseModule);
-const presetUno__default = /*#__PURE__*/_interopDefaultLegacy(presetUno);
-const presetIcons__default = /*#__PURE__*/_interopDefaultLegacy(presetIcons);
-const presetAttributify__default = /*#__PURE__*/_interopDefaultLegacy(presetAttributify);
-
-const NuxtUIPreset = {
-  name: "nuxt-ui",
-  theme: core.mergeDeep(presetUno.theme, {
-    colors: {
-      context: "rgba(var(--nui-c-context),%alpha)"
-    },
-    fontFamily: {
-      sans: "Avenir, Helvetica, Arial, sans-serif"
-    }
-  }),
-  rules: [
-    [/^n-(.*)$/, ([, body], { theme }) => {
-      const { rgba } = rules.parseColorUtil(body, theme) || {};
-      if (rgba) {
-        return {
-          "--nui-c-context": `${rgba.join(",")}`
-        };
-      }
-    }],
-    [/^n-(.*)$/, rules.fonts[1][1]],
-    ["n-dashed", { "border-style": "dashed" }],
-    ["n-solid", {
-      "background-color": "rgba(var(--nui-c-context), 1) !important",
-      "border-color": "rgba(var(--nui-c-context), 1)",
-      "color": "white !important"
-    }],
-    ["n-disabled", {
-      "opacity": 0.4,
-      "pointer-events": "none",
-      "filter": "saturate(0)"
-    }]
-  ],
-  variants: [
-    (input) => {
-      const prefix = "n-disabled:";
-      if (input.startsWith(prefix)) {
-        return {
-          matcher: input.slice(prefix.length),
-          selector: (input2) => `[disabled] ${input2}, ${input2}[disabled]`
-        };
-      }
-    },
-    (input) => {
-      const prefix = "n-checked:";
-      if (input.startsWith(prefix)) {
-        return {
-          matcher: input.slice(prefix.length),
-          selector: (input2) => `[checked] ${input2}, ${input2}[checked]`
-        };
-      }
-    }
-  ],
-  shortcuts: {
-    "n-bg-base": "bg-white dark:bg-[#222]",
-    "n-border-base": "border-gray-400/50",
-    "n-border-300": "border-gray-400/40",
-    "n-border-200": "border-gray-400/25",
-    "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-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",
-    "n-button-hover": "op100 !border-context text-context",
-    "n-button-active": "n-active-base bg-context/5",
-    "n-button-icon": "-ml-0.2em mr-0.2em text-1.1em",
-    "n-checkbox-box": "border n-border-base w-1.1em h-1.1em mr-1 text-white flex flex-none items-center rounded-sm overflow-visible",
-    "n-checkbox-box-checked": "bg-context border-context",
-    "n-checkbox-icon": "carbon-checkmark",
-    "n-radio-box": "border n-border-base w-1.2em h-1.2em mr-1 text-white flex flex-none rounded-full overflow-visible",
-    "n-radio-box-checked": "border-context",
-    "n-radio-inner": "bg-context rounded-1/2 w-0 h-0 m-auto",
-    "n-radio-inner-checked": "w-0.8em h-0.8em",
-    "n-switch-base": "inline-flex items-center select-none",
-    "n-switch-slider": "mr-1 rounded-full border n-border-base relative p-2px",
-    "n-switch-slider-checked": "border-context/20 bg-context/10",
-    "n-switch-thumb": "h-1em w-1em rounded-1/2 border n-border-base ml-0 mr-0.8em",
-    "n-switch-thumb-checked": "bg-context border-context ml-0.8em mr-0",
-    "n-tip-base": "bg-context/8 text-context px-1em py-0.4em rounded flex items-center dark:bg-context/12",
-    "n-tip-icon": "-ml-0.2em mr-0.4em text-1.1em"
-  }
-};
-function extendUnocssOptions(user = {}) {
-  return {
-    ...user,
-    preflight: true,
-    presets: [
-      presetUno__default(),
-      presetAttributify__default(),
-      presetIcons__default({
-        prefix: "",
-        scale: 1.2,
-        extraProperties: {
-          "display": "inline-block",
-          "vertical-align": "middle"
-        }
-      }),
-      NuxtUIPreset,
-      ...user.presets || []
-    ]
-  };
-}
-
-const rPath = (p) => url.fileURLToPath(new URL(p, (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('nuxt.cjs', document.baseURI).href))).toString());
-const nuxt = kit.defineNuxtModule({
-  name: "nui",
-  defaults: {
-    preset: rPath("./preset"),
-    dev: false
-  },
-  async setup(options, nuxt) {
-    kit.addComponentsDir({ path: rPath("./components") });
-    const presetStyles = path.resolve(options.preset, "styles.css");
-    if (fs.existsSync(presetStyles))
-      nuxt.options.css.push(presetStyles);
-    if (!options.dev)
-      nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss);
-    await kit.installModule(nuxt, UnocssModule__default);
-    await kit.installModule(nuxt, VueUseModule__default);
-  }
-});
-
-module.exports = nuxt;