✨ feat(message): add icon suppoer to message component

feat(mark): new component `RayMark`

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,10 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: 'Bug: '
+labels: bug
+assignees: ''
+
+---
+
+

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,10 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: 'Feat: '
+labels: enhancement
+assignees: ''
+
+---
+
+

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [1.3.9](https://github.com/HoshinoSuzumi/rayine-ui/compare/v1.3.8...v1.3.9) (2024-11-27)
+
+## [1.3.8](https://github.com/HoshinoSuzumi/rayine-ui/compare/v1.3.7...v1.3.8) (2024-11-27)
+
+## [1.3.7](https://github.com/HoshinoSuzumi/rayine-ui/compare/v1.3.6...v1.3.7) (2024-11-26)
+
+### Features
+
+* **button:** add `icon` and `loadingIcon` prop support ([2996866](https://github.com/HoshinoSuzumi/rayine-ui/commit/2996866b9adfed79fa64afa8ccd7c1fbfa88d059))
+
 ## [1.3.6](https://github.com/HoshinoSuzumi/rayine-ui/compare/v1.3.5...v1.3.6) (2024-11-26)
 
 ## [1.3.5](https://github.com/HoshinoSuzumi/rayine-ui/compare/v1.3.4...v1.3.5) (2024-11-26)

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Timothy Yin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,5 +1,7 @@
 # Rayine UI
 
+![rayine-ui](https://socialify.git.ci/HoshinoSuzumi/rayine-ui/image?description=1&font=Rokkitt&issues=1&logo=https%3A%2F%2Frayui.uniiem.com%2Frayine_no_shadow.svg&name=1&owner=1&pattern=Brick%20Wall&pulls=1&stargazers=1&theme=Light)
+
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]

docs/components/TitleBar.vue

@@ -23,11 +23,9 @@ const runtimeConfig = useRuntimeConfig().public
       </h1>
     </NuxtLink>
     <div class="flex items-center gap-4">
-      <NuxtLink
+      <RayButton to="https://github.com/HoshinoSuzumi/rayine-ui" target="_blank" icon="tabler:brand-github" variant="ghost">
-        to="https://github.com/HoshinoSuzumi/rayine-ui"
+        GitHub
-        target="_blank"
+      </RayButton>
-        class="text-neutral-400 dark:text-neutral-500"
-      >GitHub</NuxtLink>
     </div>
   </header>
 </template>

docs/components/content/ComponentDefaults.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { camelCase, upperFirst } from 'scule'
 import json5 from 'json5'
-import * as config from '#rayui/ui.config'
+import * as config from '#rayui/themes'
 
 const route = useRoute()
 

docs/components/content/ComponentPreview.vue

@@ -24,7 +24,7 @@ const props = defineProps({
   },
   slots: {
     type: Object,
-    default: () => ({}),
+    default: null,
   },
   options: {
     type: Array as PropType<{ name: string, values: string[], restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>,
@@ -119,7 +119,22 @@ const code = computed(() => {
     code += ` ${(typeof v === 'boolean' && (k === 'modelValue' || v !== true)) || typeof v === 'number' || typeof v === 'object' ? ':' : ''}${k === 'modelValue' ? 'model-value' : kebabCase(k)}${k !== 'modelValue' && typeof v === 'boolean' && !!v ? '' : `="${typeof v === 'object' ? renderObject(v) : v}"`}`
   }
 
-  code += `/>\n</template>
+  if (props.slots) {
+    code += `>
+  ${Object.entries(props.slots).map(([key, value]) => {
+    return key === 'default'
+      ? value
+      : `<template #${key}>
+    ${value}
+  </template>`
+  }).join('\n  ')}
+</${componentName}>`
+  }
+  else {
+    code += ' />'
+  }
+
+  code += `\n</template>
 \`\`\`
   `
   return code
@@ -176,11 +191,12 @@ const { data: codeRender } = await useAsyncData(`${componentName}-code-renderer-
           v-else
           :id="`${prop.name}-prop`"
           :model-value="componentProps[prop.name]"
-          :type="prop.type === 'number' ? 'number' : 'text'"
+          :type="prop.type.includes('number') ? 'number' : 'text'"
           variant="plain"
           :padded="false"
           :ui="{ rounded: 'rounded-none' }"
-          placeholder="type something..."
+          :placeholder="prop.type"
+          autocomplete="off"
           @update:model-value="val => componentProps[prop.name] = prop.type === 'number' ? Number(val) : val"
         />
       </div>

docs/components/content/ComponentProps.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { ComponentMeta } from 'vue-component-meta'
+import { camelCase, upperFirst } from 'scule'
+
+const route = useRoute()
+
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null,
+  },
+})
+
+const slug = props.slug || route.params.slug[route.params.slug.length - 1]
+const componentCamelName = camelCase(slug)
+const componentName = `Ray${upperFirst(componentCamelName)}`
+
+const meta = await fetchComponentMeta(componentName)
+const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => meta?.meta?.props || [])
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh>Prop</ProseTh>
+        <ProseTh>Default</ProseTh>
+        <ProseTh>Type</ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="prop in metaProps" :key="prop.name">
+        <ProseTd>
+          {{ prop.name }}
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="prop.default">
+            {{ prop.default }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="prop.type">
+            {{ prop.type }}
+          </ProseCodeInline>
+          <MDC v-if="prop.description" :value="prop.description" class="text-gray-500 dark:text-gray-400" />
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>

docs/components/content/ComponentSlots.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { camelCase, upperFirst } from 'scule'
+
+const route = useRoute()
+
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null,
+  },
+})
+
+const slug = props.slug || route.params.slug[route.params.slug.length - 1]
+const componentCamelName = camelCase(slug)
+const componentName = `Ray${upperFirst(componentCamelName)}`
+
+const meta = await fetchComponentMeta(componentName)
+</script>
+
+<template>
+  <div class="flex flex-col not-prose font-mono divide-y divide-gray-100 dark:divide-gray-800">
+    <div v-for="(slot, k) in meta?.meta?.slots" :key="k" class="py-2">
+      <pre>{{ slot }}</pre>
+    </div>
+  </div>
+</template>

docs/content/1.getting-started/1.index.md

@@ -12,3 +12,4 @@ This project aims to facilitate sharing a component library across multiple proj
 - Fully customizable components
 - TailwindCSS inside
 - Full TypeScript support
+- 200,000+ icons from [Iconify](https://iconify.design/)

docs/content/2.components/button.md

@@ -91,6 +91,18 @@ props:
 Button
 ::
 
+### Icon
+
+::ComponentPreview
+---
+props:
+  icon: tabler:adjustments
+  size: sm
+  loading: false
+---
+Settings
+::
+
 ### Loading
 
 ::ComponentPreview
@@ -102,7 +114,14 @@ props:
 Button
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Theme
 
 ::ComponentDefaults
 ::

docs/content/2.components/input.md

@@ -142,7 +142,14 @@ const modal = ref<string>("");
 </template>
 ```
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Theme
 
 ::ComponentDefaults
 ::

docs/content/2.components/kbd.md

@@ -44,7 +44,14 @@ props:
 K
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Theme
 
 ::ComponentDefaults
 ::

docs/content/2.components/mark.md

@@ -0,0 +1,95 @@
+---
+description: Display a indicator with or without counts on any component
+---
+
+## Usage
+
+Use the default slot to add any component you want to display the indicator on.
+
+::ComponentPreview
+---
+slots:
+  default: |
+    <RayButton icon="tabler:message" label="messages" color="invert" />
+---
+#default
+:RayButton{icon="tabler:message" label="messages" color="invert"}
+::
+
+### Styles
+
+You can change the color and size of the indicator by using the `color` and `size` props.
+
+::ComponentPreview
+---
+props:
+  color: amber
+  size: sm
+slots:
+  default: |
+    <RayButton icon="tabler:message" label="messages" color="invert" />
+---
+#default
+:RayButton{icon="tabler:message" label="messages" color="invert"}
+::
+
+### Position
+
+Use the `position` prop to change the position of the indicator.
+
+::ComponentPreview
+---
+props:
+  position: top-right
+slots:
+  default: |
+    <RayButton icon="tabler:message" label="messages" color="invert" />
+---
+#default
+:RayButton{icon="tabler:message" label="messages" color="invert"}
+::
+
+### Count
+
+Add a count to the indicator by using the `value` prop.
+
+::ComponentPreview
+---
+props:
+  value: 5
+slots:
+  default: |
+    <RayButton icon="tabler:message" label="messages" color="invert" />
+---
+#default
+:RayButton{icon="tabler:message" label="messages" color="invert"}
+::
+
+#### Overflow
+
+Set `max` prop to handle overflow situation.
+
+::ComponentPreview
+---
+props:
+  value: 110
+  max: 99
+slots:
+  default: |
+    <RayButton icon="tabler:message" label="messages" color="invert" />
+---
+#default
+:RayButton{icon="tabler:message" label="messages" color="invert"}
+::
+
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Theme
+
+::ComponentDefaults
+::

docs/content/2.components/message.md

@@ -48,6 +48,20 @@ props:
 ---
 ::
 
+### Icon
+
+Or you can use the `icon` prop to change the icon of the message.
+
+::ComponentPreview
+---
+privateProps:
+  content: Thanks for activating
+props:
+  icon: tabler:circle-key
+---
+::
+
+
 ### Color
 
 Use the `color` prop to change the color of the message.
@@ -60,7 +74,14 @@ props:
 ---
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Theme
 
 ::ComponentDefaults
 ::

docs/content/2.components/textarea.md

@@ -176,7 +176,14 @@ const modal = ref<string>("");
 </template>
 ```
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Theme
 
 ::ComponentDefaults
 ::

docs/content/2.components/toggle.md

@@ -63,7 +63,14 @@ props:
 ---
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Theme
 
 ::ComponentDefaults
 ::

docs/nuxt.config.ts

@@ -60,7 +60,7 @@ export default defineNuxtConfig({
       type: false,
       props: true,
       slots: true,
-      events: false,
+      events: true,
       exposed: false,
     },
   },

docs/pages/[...slug].vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { withoutTrailingSlash } from 'ufo'
-import { standard } from '#rayui/ui.config'
+import { standard } from '#rayui/themes'
 
 const route = useRoute()
 

docs/public/rayine_no_shadow.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="rayine" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #3f3f46;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #71717a;
+      }
+
+      .cls-3 {
+        fill: #a5b4fc;
+      }
+    </style>
+  </defs>
+  <g id="r_leg">
+    <path class="cls-1" d="m949.3,851.91v121.45c0,15.27-12.38,27.64-27.64,27.64h-122.51c-7.33,0-14.36-2.91-19.55-8.1l-384.22-384.22,262.61-3.69c18.78,0,28.64-6.04,46.42-9.42l236.79,236.79c5.18,5.18,8.1,12.22,8.1,19.55Z"/>
+  </g>
+  <path id="r_head" class="cls-2" d="m949.3,316.84c0,142.4-102,260.99-236.93,286.69-17.79,3.38-36.14,5.16-54.91,5.16h-262.07v-208.38h207.85c20.44,0,39.18-7.36,53.69-19.57,18.2-15.3,29.77-38.24,29.77-63.89s-11.57-48.59-29.77-63.89c-14.51-12.22-33.25-19.57-53.69-19.57-.18,0-.35,0-.53.01h0s-207.32-.01-207.32-.01V25h262.07c161.18,0,291.84,130.66,291.84,291.84Z"/>
+  <g id="cube_3">
+    <rect class="cls-1" x="76.7" y="691.61" width="249.85" height="309.39" rx="26" ry="26"/>
+  </g>
+  <rect id="cube_2" class="cls-3" x="76.7" y="400.3" width="249.85" height="208.38" rx="26" ry="26"/>
+  <g id="cube_1">
+    <rect class="cls-1" x="76.7" y="25" width="249.85" height="292.37" rx="26" ry="26"/>
+  </g>
+</svg>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayine-ui",
-  "version": "1.3.6",
+  "version": "1.3.9",
   "description": "RayineSoft UI Components",
   "repository": "HoshinoSuzumi/rayine-ui",
   "homepage": "https://rayui.uniiem.com",
@@ -31,6 +31,7 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
+    "@iconify-json/svg-spinners": "^1.2.1",
     "@iconify-json/tabler": "^1.2.8",
     "@nuxt/icon": "^1.8.2",
     "@nuxt/kit": "^3.14.159",

pnpm-lock.yaml

@@ -12,18 +12,21 @@ importers:
 
   .:
     dependencies:
+      '@iconify-json/svg-spinners':
+        specifier: ^1.2.1
+        version: 1.2.1
       '@iconify-json/tabler':
         specifier: ^1.2.8
         version: 1.2.8
       '@nuxt/icon':
         specifier: ^1.8.2
-        version: 1.8.2(magicast@0.3.5)(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
+        version: 1.8.2(magicast@0.3.5)(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
       '@nuxt/kit':
         specifier: ^3.14.159
-        version: 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
+        version: 3.14.1592(magicast@0.3.5)(rollup@4.27.4)
       '@nuxtjs/tailwindcss':
         specifier: ^6.12.2
-        version: 6.12.2(magicast@0.3.5)(rollup@3.29.5)
+        version: 6.12.2(magicast@0.3.5)(rollup@4.27.4)
       '@tailwindcss/aspect-ratio':
         specifier: ^0.4.2
         version: 0.4.2(tailwindcss@3.4.15)
@@ -48,19 +51,19 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: ^1.6.0
-        version: 1.6.1(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
+        version: 1.6.1(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
       '@nuxt/eslint-config':
         specifier: ^0.7.0
         version: 0.7.1(@vue/compiler-sfc@3.5.13)(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       '@nuxt/module-builder':
         specifier: ^0.8.4
-        version: 0.8.4(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@3.29.5))(nuxi@3.15.0)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))
+        version: 0.8.4(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.4))(nuxi@3.15.0)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))
       '@nuxt/schema':
         specifier: ^3.14.159
-        version: 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
+        version: 3.14.1592(magicast@0.3.5)(rollup@4.27.4)
       '@nuxt/test-utils':
         specifier: ^3.14.4
-        version: 3.14.4(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(typescript@5.6.3))(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vitest@2.1.5(@types/node@22.10.0)(terser@5.36.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
+        version: 3.14.4(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(typescript@5.6.3))(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vitest@2.1.5(@types/node@22.10.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
       '@release-it/conventional-changelog':
         specifier: ^9.0.3
         version: 9.0.3(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.0.0)(release-it@17.10.0(typescript@5.6.3))
@@ -75,7 +78,7 @@ importers:
         version: 9.15.0(jiti@2.4.0)
       nuxt:
         specifier: ^3.14.159
-        version: 3.14.1592(@parcel/watcher@2.5.0)(@types/node@22.10.0)(eslint@9.15.0(jiti@2.4.0))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue-tsc@2.1.10(typescript@5.6.3))
+        version: 3.14.1592(@parcel/watcher@2.5.0)(@types/node@22.10.0)(eslint@9.15.0(jiti@2.4.0))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.4)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue-tsc@2.1.10(typescript@5.6.3))
       release-it:
         specifier: ^17.10.0
         version: 17.10.0(typescript@5.6.3)
@@ -831,6 +834,9 @@ packages:
   '@iarna/toml@2.2.5':
     resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
 
+  '@iconify-json/svg-spinners@1.2.1':
+    resolution: {integrity: sha512-QZNA4YzFD2zqdC6nIBJM6WlAGakUCjvMt92Ks1R4XFxkd76Ps3rdiauYWESDRZvNYURAByp2b9cwZarFula65g==}
+
   '@iconify-json/tabler@1.2.8':
     resolution: {integrity: sha512-xvi/UKhLiFRnutSo6xuHxvOGmskYEoC2St4WDVsU9WAW1DRG1EkBUk/Zy1TpeSsBKMQfyqtdjjx9Cf4ZezOK2w==}
 
@@ -6509,6 +6515,10 @@ snapshots:
 
   '@iarna/toml@2.2.5': {}
 
+  '@iconify-json/svg-spinners@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/tabler@1.2.8':
     dependencies:
       '@iconify/types': 2.0.0
@@ -6692,17 +6702,6 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@1.6.1(magicast@0.3.5)(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))':
-    dependencies:
-      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
-      '@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
-      execa: 7.2.0
-      vite: 5.4.11(@types/node@22.10.0)(terser@5.36.0)
-    transitivePeerDependencies:
-      - magicast
-      - rollup
-      - supports-color
-
   '@nuxt/devtools-kit@1.6.1(magicast@0.3.5)(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))':
     dependencies:
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.4)
@@ -6727,53 +6726,6 @@ snapshots:
       rc9: 2.1.2
       semver: 7.6.3
 
-  '@nuxt/devtools@1.6.1(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
-    dependencies:
-      '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 1.6.1(magicast@0.3.5)(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))
-      '@nuxt/devtools-wizard': 1.6.1
-      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
-      '@vue/devtools-core': 7.6.4(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
-      '@vue/devtools-kit': 7.6.4
-      birpc: 0.2.19
-      consola: 3.2.3
-      cronstrue: 2.52.0
-      destr: 2.0.3
-      error-stack-parser-es: 0.1.5
-      execa: 7.2.0
-      fast-npm-meta: 0.2.2
-      flatted: 3.3.2
-      get-port-please: 3.1.2
-      hookable: 5.5.3
-      image-meta: 0.2.1
-      is-installed-globally: 1.0.0
-      launch-editor: 2.9.1
-      local-pkg: 0.5.1
-      magicast: 0.3.5
-      nypm: 0.3.12
-      ohash: 1.1.4
-      pathe: 1.1.2
-      perfect-debounce: 1.0.0
-      pkg-types: 1.2.1
-      rc9: 2.1.2
-      scule: 1.3.0
-      semver: 7.6.3
-      simple-git: 3.27.0
-      sirv: 2.0.4
-      tinyglobby: 0.2.10
-      unimport: 3.13.3(rollup@3.29.5)
-      vite: 5.4.11(@types/node@22.10.0)(terser@5.36.0)
-      vite-plugin-inspect: 0.8.8(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@3.29.5))(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))
-      vite-plugin-vue-inspector: 5.1.3(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))
-      which: 3.0.1
-      ws: 8.18.0
-    transitivePeerDependencies:
-      - bufferutil
-      - rollup
-      - supports-color
-      - utf-8-validate
-      - vue
-
   '@nuxt/devtools@1.6.1(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@antfu/utils': 0.7.10
@@ -6810,7 +6762,7 @@ snapshots:
       tinyglobby: 0.2.10
       unimport: 3.13.3(rollup@4.27.4)
       vite: 5.4.11(@types/node@22.10.0)(terser@5.36.0)
-      vite-plugin-inspect: 0.8.8(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@3.29.5))(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))
+      vite-plugin-inspect: 0.8.8(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.4))(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))
       vite-plugin-vue-inspector: 5.1.3(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))
       which: 3.0.1
       ws: 8.18.0
@@ -6900,14 +6852,14 @@ snapshots:
       - supports-color
       - vite
 
-  '@nuxt/icon@1.8.2(magicast@0.3.5)(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
+  '@nuxt/icon@1.8.2(magicast@0.3.5)(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@iconify/collections': 1.0.487
       '@iconify/types': 2.0.0
       '@iconify/utils': 2.1.33
       '@iconify/vue': 4.2.0-dev.2(vue@3.5.13(typescript@5.6.3))
-      '@nuxt/devtools-kit': 1.6.1(magicast@0.3.5)(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))
+      '@nuxt/devtools-kit': 1.6.1(magicast@0.3.5)(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))
-      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
+      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.4)
       consola: 3.2.3
       local-pkg: 0.5.1
       mlly: 1.7.3
@@ -6922,33 +6874,6 @@ snapshots:
       - vite
       - vue
 
-  '@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@3.29.5)':
-    dependencies:
-      '@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
-      c12: 2.0.1(magicast@0.3.5)
-      consola: 3.2.3
-      defu: 6.1.4
-      destr: 2.0.3
-      globby: 14.0.2
-      hash-sum: 2.0.0
-      ignore: 6.0.2
-      jiti: 2.4.0
-      klona: 2.0.6
-      knitwork: 1.1.0
-      mlly: 1.7.3
-      pathe: 1.1.2
-      pkg-types: 1.2.1
-      scule: 1.3.0
-      semver: 7.6.3
-      ufo: 1.5.4
-      unctx: 2.3.1
-      unimport: 3.13.3(rollup@3.29.5)
-      untyped: 1.5.1
-    transitivePeerDependencies:
-      - magicast
-      - rollup
-      - supports-color
-
   '@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.4)':
     dependencies:
       '@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@4.27.4)
@@ -6976,9 +6901,9 @@ snapshots:
       - rollup
       - supports-color
 
-  '@nuxt/module-builder@0.8.4(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@3.29.5))(nuxi@3.15.0)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))':
+  '@nuxt/module-builder@0.8.4(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.4))(nuxi@3.15.0)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))':
     dependencies:
-      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
+      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.4)
       citty: 0.1.6
       consola: 3.2.3
       defu: 6.1.4
@@ -6995,26 +6920,6 @@ snapshots:
       - typescript
       - vue-tsc
 
-  '@nuxt/schema@3.14.1592(magicast@0.3.5)(rollup@3.29.5)':
-    dependencies:
-      c12: 2.0.1(magicast@0.3.5)
-      compatx: 0.1.8
-      consola: 3.2.3
-      defu: 6.1.4
-      hookable: 5.5.3
-      pathe: 1.1.2
-      pkg-types: 1.2.1
-      scule: 1.3.0
-      std-env: 3.8.0
-      ufo: 1.5.4
-      uncrypto: 0.1.3
-      unimport: 3.13.3(rollup@3.29.5)
-      untyped: 1.5.1
-    transitivePeerDependencies:
-      - magicast
-      - rollup
-      - supports-color
-
   '@nuxt/schema@3.14.1592(magicast@0.3.5)(rollup@4.27.4)':
     dependencies:
       c12: 2.0.1(magicast@0.3.5)
@@ -7035,31 +6940,6 @@ snapshots:
       - rollup
       - supports-color
 
-  '@nuxt/telemetry@2.6.0(magicast@0.3.5)(rollup@3.29.5)':
-    dependencies:
-      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
-      ci-info: 4.1.0
-      consola: 3.2.3
-      create-require: 1.1.1
-      defu: 6.1.4
-      destr: 2.0.3
-      dotenv: 16.4.5
-      git-url-parse: 15.0.0
-      is-docker: 3.0.0
-      jiti: 1.21.6
-      mri: 1.2.0
-      nanoid: 5.0.8
-      ofetch: 1.4.1
-      package-manager-detector: 0.2.4
-      parse-git-config: 3.0.0
-      pathe: 1.1.2
-      rc9: 2.1.2
-      std-env: 3.8.0
-    transitivePeerDependencies:
-      - magicast
-      - rollup
-      - supports-color
-
   '@nuxt/telemetry@2.6.0(magicast@0.3.5)(rollup@4.27.4)':
     dependencies:
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.4)
@@ -7085,10 +6965,10 @@ snapshots:
       - rollup
       - supports-color
 
-  '@nuxt/test-utils@3.14.4(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(typescript@5.6.3))(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vitest@2.1.5(@types/node@22.10.0)(terser@5.36.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))':
+  '@nuxt/test-utils@3.14.4(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(typescript@5.6.3))(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vitest@2.1.5(@types/node@22.10.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
-      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
+      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.4)
-      '@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
+      '@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@4.27.4)
       c12: 2.0.1(magicast@0.3.5)
       consola: 3.2.3
       defu: 6.1.4
@@ -7112,9 +6992,9 @@ snapshots:
       unenv: 1.10.0
       unplugin: 1.16.0
       vite: 5.4.11(@types/node@22.10.0)(terser@5.36.0)
-      vitest-environment-nuxt: 1.0.1(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(typescript@5.6.3))(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vitest@2.1.5(@types/node@22.10.0)(terser@5.36.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
+      vitest-environment-nuxt: 1.0.1(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(typescript@5.6.3))(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vitest@2.1.5(@types/node@22.10.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
       vue: 3.5.13(typescript@5.6.3)
-      vue-router: 4.5.0(vue@3.5.13(typescript@5.6.3))
+      vue-router: 4.4.5(vue@3.5.13(typescript@5.6.3))
     optionalDependencies:
       vitest: 2.1.5(@types/node@22.10.0)(terser@5.36.0)
     transitivePeerDependencies:
@@ -7122,65 +7002,6 @@ snapshots:
       - rollup
       - supports-color
 
-  '@nuxt/vite-builder@3.14.1592(@types/node@22.10.0)(eslint@9.15.0(jiti@2.4.0))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.36.0)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))':
-    dependencies:
-      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
-      '@rollup/plugin-replace': 6.0.1(rollup@3.29.5)
-      '@vitejs/plugin-vue': 5.2.0(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
-      '@vitejs/plugin-vue-jsx': 4.1.0(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
-      autoprefixer: 10.4.20(postcss@8.4.49)
-      clear: 0.1.0
-      consola: 3.2.3
-      cssnano: 7.0.6(postcss@8.4.49)
-      defu: 6.1.4
-      esbuild: 0.24.0
-      escape-string-regexp: 5.0.0
-      estree-walker: 3.0.3
-      externality: 1.0.2
-      get-port-please: 3.1.2
-      h3: 1.13.0
-      jiti: 2.4.0
-      knitwork: 1.1.0
-      magic-string: 0.30.13
-      mlly: 1.7.3
-      ohash: 1.1.4
-      pathe: 1.1.2
-      perfect-debounce: 1.0.0
-      pkg-types: 1.2.1
-      postcss: 8.4.49
-      rollup-plugin-visualizer: 5.12.0(rollup@3.29.5)
-      std-env: 3.8.0
-      strip-literal: 2.1.1
-      ufo: 1.5.4
-      unenv: 1.10.0
-      unplugin: 1.16.0
-      vite: 5.4.11(@types/node@22.10.0)(terser@5.36.0)
-      vite-node: 2.1.5(@types/node@22.10.0)(terser@5.36.0)
-      vite-plugin-checker: 0.8.0(eslint@9.15.0(jiti@2.4.0))(optionator@0.9.4)(typescript@5.6.3)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue-tsc@2.1.10(typescript@5.6.3))
-      vue: 3.5.13(typescript@5.6.3)
-      vue-bundle-renderer: 2.1.1
-    transitivePeerDependencies:
-      - '@biomejs/biome'
-      - '@types/node'
-      - eslint
-      - less
-      - lightningcss
-      - magicast
-      - meow
-      - optionator
-      - rollup
-      - sass
-      - sass-embedded
-      - stylelint
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - typescript
-      - vls
-      - vti
-      - vue-tsc
-
   '@nuxt/vite-builder@3.14.1592(@types/node@22.10.0)(eslint@9.15.0(jiti@2.4.0))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.4)(terser@5.36.0)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.4)
@@ -7294,9 +7115,9 @@ snapshots:
       - rollup
       - supports-color
 
-  '@nuxtjs/tailwindcss@6.12.2(magicast@0.3.5)(rollup@3.29.5)':
+  '@nuxtjs/tailwindcss@6.12.2(magicast@0.3.5)(rollup@4.27.4)':
     dependencies:
-      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
+      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.4)
       autoprefixer: 10.4.20(postcss@8.4.49)
       consola: 3.2.3
       defu: 6.1.4
@@ -7578,13 +7399,6 @@ snapshots:
     optionalDependencies:
       rollup: 3.29.5
 
-  '@rollup/plugin-replace@6.0.1(rollup@3.29.5)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.3(rollup@3.29.5)
-      magic-string: 0.30.13
-    optionalDependencies:
-      rollup: 3.29.5
-
   '@rollup/plugin-replace@6.0.1(rollup@4.27.4)':
     dependencies:
       '@rollup/pluginutils': 5.1.3(rollup@4.27.4)
@@ -7983,19 +7797,6 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
-  '@vue-macros/common@1.15.0(rollup@3.29.5)(vue@3.5.13(typescript@5.6.3))':
-    dependencies:
-      '@babel/types': 7.26.0
-      '@rollup/pluginutils': 5.1.3(rollup@3.29.5)
-      '@vue/compiler-sfc': 3.5.13
-      ast-kit: 1.3.1
-      local-pkg: 0.5.1
-      magic-string-ast: 0.6.3
-    optionalDependencies:
-      vue: 3.5.13(typescript@5.6.3)
-    transitivePeerDependencies:
-      - rollup
-
   '@vue-macros/common@1.15.0(rollup@4.27.4)(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@babel/types': 7.26.0
@@ -10016,16 +9817,6 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
-  impound@0.2.0(rollup@3.29.5):
-    dependencies:
-      '@rollup/pluginutils': 5.1.3(rollup@3.29.5)
-      mlly: 1.7.3
-      pathe: 1.1.2
-      unenv: 1.10.0
-      unplugin: 1.16.0
-    transitivePeerDependencies:
-      - rollup
-
   impound@0.2.0(rollup@4.27.4):
     dependencies:
       '@rollup/pluginutils': 5.1.3(rollup@4.27.4)
@@ -11095,119 +10886,6 @@ snapshots:
       - rollup
       - supports-color
 
-  nuxt@3.14.1592(@parcel/watcher@2.5.0)(@types/node@22.10.0)(eslint@9.15.0(jiti@2.4.0))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue-tsc@2.1.10(typescript@5.6.3)):
-    dependencies:
-      '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.6.1(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue@3.5.13(typescript@5.6.3))
-      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
-      '@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
-      '@nuxt/telemetry': 2.6.0(magicast@0.3.5)(rollup@3.29.5)
-      '@nuxt/vite-builder': 3.14.1592(@types/node@22.10.0)(eslint@9.15.0(jiti@2.4.0))(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.36.0)(typescript@5.6.3)(vue-tsc@2.1.10(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))
-      '@unhead/dom': 1.11.11
-      '@unhead/shared': 1.11.11
-      '@unhead/ssr': 1.11.11
-      '@unhead/vue': 1.11.11(vue@3.5.13(typescript@5.6.3))
-      '@vue/shared': 3.5.13
-      acorn: 8.14.0
-      c12: 2.0.1(magicast@0.3.5)
-      chokidar: 4.0.1
-      compatx: 0.1.8
-      consola: 3.2.3
-      cookie-es: 1.2.2
-      defu: 6.1.4
-      destr: 2.0.3
-      devalue: 5.1.1
-      errx: 0.1.0
-      esbuild: 0.24.0
-      escape-string-regexp: 5.0.0
-      estree-walker: 3.0.3
-      globby: 14.0.2
-      h3: 1.13.0
-      hookable: 5.5.3
-      ignore: 6.0.2
-      impound: 0.2.0(rollup@3.29.5)
-      jiti: 2.4.0
-      klona: 2.0.6
-      knitwork: 1.1.0
-      magic-string: 0.30.13
-      mlly: 1.7.3
-      nanotar: 0.1.1
-      nitropack: 2.10.4(typescript@5.6.3)
-      nuxi: 3.15.0
-      nypm: 0.3.12
-      ofetch: 1.4.1
-      ohash: 1.1.4
-      pathe: 1.1.2
-      perfect-debounce: 1.0.0
-      pkg-types: 1.2.1
-      radix3: 1.1.2
-      scule: 1.3.0
-      semver: 7.6.3
-      std-env: 3.8.0
-      strip-literal: 2.1.1
-      tinyglobby: 0.2.10
-      ufo: 1.5.4
-      ultrahtml: 1.5.3
-      uncrypto: 0.1.3
-      unctx: 2.3.1
-      unenv: 1.10.0
-      unhead: 1.11.11
-      unimport: 3.13.3(rollup@3.29.5)
-      unplugin: 1.16.0
-      unplugin-vue-router: 0.10.8(rollup@3.29.5)(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
-      unstorage: 1.13.1(ioredis@5.4.1)
-      untyped: 1.5.1
-      vue: 3.5.13(typescript@5.6.3)
-      vue-bundle-renderer: 2.1.1
-      vue-devtools-stub: 0.1.0
-      vue-router: 4.4.5(vue@3.5.13(typescript@5.6.3))
-    optionalDependencies:
-      '@parcel/watcher': 2.5.0
-      '@types/node': 22.10.0
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@biomejs/biome'
-      - '@capacitor/preferences'
-      - '@electric-sql/pglite'
-      - '@libsql/client'
-      - '@netlify/blobs'
-      - '@planetscale/database'
-      - '@upstash/redis'
-      - '@vercel/kv'
-      - better-sqlite3
-      - bufferutil
-      - drizzle-orm
-      - encoding
-      - eslint
-      - idb-keyval
-      - ioredis
-      - less
-      - lightningcss
-      - magicast
-      - meow
-      - mysql2
-      - optionator
-      - rollup
-      - sass
-      - sass-embedded
-      - stylelint
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - typescript
-      - utf-8-validate
-      - vite
-      - vls
-      - vti
-      - vue-tsc
-      - xml2js
-
   nuxt@3.14.1592(@parcel/watcher@2.5.0)(@types/node@22.10.0)(eslint@9.15.0(jiti@2.4.0))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.4)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vue-tsc@2.1.10(typescript@5.6.3)):
     dependencies:
       '@nuxt/devalue': 2.0.2
@@ -12184,15 +11862,6 @@ snapshots:
     optionalDependencies:
       '@babel/code-frame': 7.26.2
 
-  rollup-plugin-visualizer@5.12.0(rollup@3.29.5):
-    dependencies:
-      open: 8.4.2
-      picomatch: 2.3.1
-      source-map: 0.7.4
-      yargs: 17.7.2
-    optionalDependencies:
-      rollup: 3.29.5
-
   rollup-plugin-visualizer@5.12.0(rollup@4.27.4):
     dependencies:
       open: 8.4.2
@@ -12827,24 +12496,6 @@ snapshots:
       css-tree: 3.0.1
       ohash: 1.1.4
 
-  unimport@3.13.3(rollup@3.29.5):
-    dependencies:
-      '@rollup/pluginutils': 5.1.3(rollup@3.29.5)
-      acorn: 8.14.0
-      escape-string-regexp: 5.0.0
-      estree-walker: 3.0.3
-      fast-glob: 3.3.2
-      local-pkg: 0.5.1
-      magic-string: 0.30.13
-      mlly: 1.7.3
-      pathe: 1.1.2
-      pkg-types: 1.2.1
-      scule: 1.3.0
-      strip-literal: 2.1.1
-      unplugin: 1.16.0
-    transitivePeerDependencies:
-      - rollup
-
   unimport@3.13.3(rollup@4.27.4):
     dependencies:
       '@rollup/pluginutils': 5.1.3(rollup@4.27.4)
@@ -12894,28 +12545,6 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unplugin-vue-router@0.10.8(rollup@3.29.5)(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)):
-    dependencies:
-      '@babel/types': 7.26.0
-      '@rollup/pluginutils': 5.1.3(rollup@3.29.5)
-      '@vue-macros/common': 1.15.0(rollup@3.29.5)(vue@3.5.13(typescript@5.6.3))
-      ast-walker-scope: 0.6.2
-      chokidar: 3.6.0
-      fast-glob: 3.3.2
-      json5: 2.2.3
-      local-pkg: 0.5.1
-      magic-string: 0.30.13
-      mlly: 1.7.3
-      pathe: 1.1.2
-      scule: 1.3.0
-      unplugin: 1.16.0
-      yaml: 2.6.1
-    optionalDependencies:
-      vue-router: 4.4.5(vue@3.5.13(typescript@5.6.3))
-    transitivePeerDependencies:
-      - rollup
-      - vue
-
   unplugin-vue-router@0.10.8(rollup@4.27.4)(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)):
     dependencies:
       '@babel/types': 7.26.0
@@ -13087,25 +12716,7 @@ snapshots:
       typescript: 5.6.3
       vue-tsc: 2.1.10(typescript@5.6.3)
 
-  vite-plugin-inspect@0.8.8(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@3.29.5))(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0)):
+  vite-plugin-inspect@0.8.8(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.4))(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0)):
-    dependencies:
-      '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.3(rollup@3.29.5)
-      debug: 4.3.7(supports-color@9.4.0)
-      error-stack-parser-es: 0.1.5
-      fs-extra: 11.2.0
-      open: 10.1.0
-      perfect-debounce: 1.0.0
-      picocolors: 1.1.1
-      sirv: 3.0.0
-      vite: 5.4.11(@types/node@22.10.0)(terser@5.36.0)
-    optionalDependencies:
-      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-
-  vite-plugin-inspect@0.8.8(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@3.29.5))(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.3(rollup@4.27.4)
@@ -13118,7 +12729,7 @@ snapshots:
       sirv: 3.0.0
       vite: 5.4.11(@types/node@22.10.0)(terser@5.36.0)
     optionalDependencies:
-      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@3.29.5)
+      '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.4)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -13148,9 +12759,9 @@ snapshots:
       fsevents: 2.3.3
       terser: 5.36.0
 
-  vitest-environment-nuxt@1.0.1(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(typescript@5.6.3))(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vitest@2.1.5(@types/node@22.10.0)(terser@5.36.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)):
+  vitest-environment-nuxt@1.0.1(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(typescript@5.6.3))(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vitest@2.1.5(@types/node@22.10.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)):
     dependencies:
-      '@nuxt/test-utils': 3.14.4(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(typescript@5.6.3))(rollup@3.29.5)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vitest@2.1.5(@types/node@22.10.0)(terser@5.36.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
+      '@nuxt/test-utils': 3.14.4(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(typescript@5.6.3))(rollup@4.27.4)(vite@5.4.11(@types/node@22.10.0)(terser@5.36.0))(vitest@2.1.5(@types/node@22.10.0)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'

src/runtime/components/elements/Button.vue

@@ -3,13 +3,14 @@ import { twJoin, twMerge } from 'tailwind-merge'
 import { computed, defineComponent, toRef, type PropType } from 'vue'
 import { getNonUndefinedValuesFromObject } from '../../utils'
 import { nuxtLinkProps } from '../../utils/link'
-import { button } from '../../ui.config'
+import { button } from '../../themes'
 import type { ButtonColor, ButtonSize, ButtonVariant, DeepPartial, Strategy } from '../../types/index'
 import { useRayUI } from '#build/imports'
 
 const config = button
 
 export default defineComponent({
+  inheritAttrs: false,
   props: {
     ...nuxtLinkProps,
     class: {
@@ -60,6 +61,10 @@ export default defineComponent({
       type: String,
       default: () => config.default.loadingIcon,
     },
+    icon: {
+      type: String,
+      default: null,
+    },
     ui: {
       type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({}),
@@ -77,6 +82,7 @@ export default defineComponent({
         ui.value.base,
         ui.value.font,
         ui.value.rounded,
+        ui.value.gap[props.size],
         ui.value.size[props.size],
         props.padded && ui.value.padding[props.size],
         variant?.replaceAll('{color}', props.color),
@@ -84,12 +90,23 @@ export default defineComponent({
       ), props.class)
     })
 
+    const iconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.base,
+        ui.value.icon.size[props.size],
+      )
+    })
+
+    const leadingIconName = computed(() => props.loading ? props.loadingIcon : props.icon)
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
       extProps,
       buttonClass,
+      iconClass,
+      leadingIconName,
     }
   },
 })
@@ -98,7 +115,7 @@ export default defineComponent({
 <template>
   <RayLink type="button" :disabled="disabled || loading" :class="buttonClass" v-bind="{ ...extProps, ...attrs }">
     <slot name="leading" :disabled="disabled" :loading="loading">
-      <IconSpinner v-if="loading" class="mr-1" />
+      <RayIcon v-if="leadingIconName" :name="leadingIconName" :class="iconClass" />
     </slot>
     <slot>
       <span v-if="label">{{ label }}</span>

src/runtime/components/elements/Kbd.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent, toRef, type PropType } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
-import { kbd } from '../../ui.config'
+import { kbd } from '../../themes'
 import type { DeepPartial, KbdSize, Strategy } from '../../types'
 import { useRayUI } from '#build/imports'
 

src/runtime/components/elements/Mark.vue

@@ -0,0 +1,90 @@
+<script lang="ts">
+import { computed, defineComponent, toRef, type PropType } from 'vue'
+import { twJoin, twMerge } from 'tailwind-merge'
+import { mark } from '../../themes'
+import type { MarkColor, MarkPosition, MarkSize } from '../../types'
+import { useRayUI } from '#build/imports'
+
+const config = mark
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [Number, String],
+      default: null,
+    },
+    max: {
+      type: Number,
+      default: null,
+    },
+    size: {
+      type: String as PropType<MarkSize>,
+      default: config.default.size,
+    },
+    color: {
+      type: String as PropType<MarkColor>,
+      default: config.default.color,
+    },
+    position: {
+      type: String as PropType<MarkPosition>,
+      default: config.default.position,
+    },
+    ui: {
+      type: Object as PropType<typeof config>,
+      default: () => ({}),
+    },
+    class: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    const { ui, attrs } = useRayUI('mark', toRef(props, 'ui'), config)
+
+    const markClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.base,
+        ui.value.rounded,
+        ui.value.ring,
+        ui.value.position[props.position],
+        ui.value.background.replaceAll('{color}', props.color),
+        props.value ? ui.value.value.size[props.size] : ui.value.size[props.size],
+        props.value ? ui.value.value.translate[props.position] : ui.value.translate[props.position],
+      ), props.class)
+    })
+
+    const isOverMax = computed(() => {
+      if (props.max === null) return false
+      if (typeof props.value === 'string') return false
+      return props.value > props.max
+    })
+
+    // consider string value
+    const countValue = computed(() => {
+      if (typeof props.value === 'string') return props.value
+      return isOverMax.value ? `${props.max}+` : props.value
+    })
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      markClass,
+      isOverMax,
+      countValue,
+    }
+  },
+})
+</script>
+
+<template>
+  <div :class="ui.wrapper">
+    <span :class="markClass">
+      <Transition v-bind="ui.transition">
+        <span v-if="value" :key="countValue" class="leading-none">{{ countValue }}</span>
+      </Transition>
+    </span>
+    <slot />
+  </div>
+</template>

src/runtime/components/forms/Input.vue

@@ -2,7 +2,7 @@
 import { computed, defineComponent, toRef, type PropType } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
 import defu from 'defu'
-import { input } from '../../ui.config'
+import { input } from '../../themes'
 import type { DeepPartial, InputColor, InputModelModifiers, InputSize, InputType, InputVariant, Strategy } from '../../types/index'
 import { onMounted, ref, useRayUI } from '#build/imports'
 

src/runtime/components/forms/Textarea.vue

@@ -2,7 +2,7 @@
 import { computed, defineComponent, onMounted, ref, toRef, watch, type PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import defu from 'defu'
-import { textarea } from '../../ui.config'
+import { textarea } from '../../themes'
 import type { DeepPartial, Strategy, TextareaColor, TextareaModelModifiers, TextareaSize, TextareaVariant } from '../../types'
 import { useRayUI } from '#build/imports'
 

src/runtime/components/forms/Toggle.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent, toRef, type PropType } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
-import { toggle } from '../../ui.config'
+import { toggle } from '../../themes'
 import type { DeepPartial, Strategy, ToggleColor, ToggleSize } from '../../types'
 import { useRayUI } from '#build/imports'
 

src/runtime/components/overlays/Message.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import { ref, onMounted, defineComponent, type PropType, toRef, computed } from 'vue'
+import { onMounted, defineComponent, type PropType, toRef, computed } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
-import { message } from '../../ui.config'
+import { message } from '../../themes'
 import type { DeepPartial, Message, MessageColor, MessageType, Strategy } from '../../types/index'
 import { useMessage, useRayUI } from '#build/imports'
 
@@ -17,6 +17,10 @@ export default defineComponent({
       type: String as PropType<MessageColor>,
       default: undefined,
     },
+    icon: {
+      type: String,
+      default: null,
+    },
     duration: {
       type: Number,
       default: config.default.duration,
@@ -63,6 +67,10 @@ export default defineComponent({
       }
     })
 
+    const iconName = computed(() => {
+      return props.icon || ui.value.type[props.type]?.icon || null
+    })
+
     onMounted(() => {
       setTimeout(() => {
         message.remove(messageBody.value.id)
@@ -75,6 +83,7 @@ export default defineComponent({
       attrs,
       messageBody,
       containerClass,
+      iconName,
     }
   },
 })
@@ -83,10 +92,7 @@ export default defineComponent({
 <template>
   <div :class="ui.wrapper" v-bind="attrs">
     <div :class="containerClass">
-      <IconCircleSuccess v-if="messageBody?.type === 'success'" class="text-xl" />
+      <RayIcon v-if="iconName" :name="iconName" class="text-xl" />
-      <IconCircleWarning v-if="messageBody?.type === 'warning'" class="text-xl" />
-      <IconCircleError v-if="messageBody?.type === 'error'" class="text-xl" />
-      <IconCircleInfo v-if="messageBody?.type === 'info'" class="text-xl" />
       <span>
         {{ messageBody.content }}
       </span>

src/runtime/components/overlays/Messages.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent, toRef, type PropType } from 'vue'
 import { twJoin, twMerge } from 'tailwind-merge'
-import { messages } from '../../ui.config'
+import { messages } from '../../themes'
 import type { DeepPartial, Message, Strategy } from '../../types/index'
 import { useState } from '#imports'
 import { useRayUI } from '#build/imports'

src/runtime/composables/useMessage.ts

@@ -1,4 +1,4 @@
-import type { Message, MessageType } from '../types/message'
+import type { Message } from '../types/message'
 import { useState } from '#imports'
 
 export const useMessage = () => {

src/runtime/themes/elements/button.ts

@@ -1,7 +1,7 @@
 import { standard } from '..'
 
 export default {
-  base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 flex-shrink-0 transition',
+  base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 flex-shrink-0 transition text-left break-all line-clamp-1',
   rounded: 'rounded-lg',
   font: 'font-medium',
   block: 'w-full flex justify-center items-center',
@@ -15,13 +15,15 @@ export default {
   square: {
     ...standard.square,
   },
+  gap: {
+    ...standard.gap,
+  },
   icon: {
     base: 'flex-shrink-0',
-    loading: 'animate-spin',
     size: {
       '2xs': 'h-4 w-4',
       'xs': 'h-4 w-4',
-      'sm': 'h-5 w-5',
+      'sm': 'h-4 w-4',
       'md': 'h-5 w-5',
       'lg': 'h-5 w-5',
       'xl': 'h-6 w-6',
@@ -51,6 +53,6 @@ export default {
     size: 'sm',
     color: 'primary',
     variant: 'solid',
-    loadingIcon: 'loading',
+    loadingIcon: 'svg-spinners:90-ring-with-bg',
   },
 }

src/runtime/themes/elements/mark.ts

@@ -0,0 +1,51 @@
+export default {
+  wrapper: 'relative',
+  base: 'absolute text-white rounded-full inline-flex justify-center items-center',
+  ring: 'ring-2 ring-white dark:ring-gray-900',
+  rounded: 'rounded-full',
+  background: 'bg-{color}-500',
+  position: {
+    'top-left': 'top-0 left-0',
+    'top-right': 'top-0 right-0',
+    'bottom-left': 'bottom-0 left-0',
+    'bottom-right': 'bottom-0 right-0',
+  },
+  translate: {
+    'top-left': '-translate-x-0.5 -translate-y-0.5',
+    'top-right': 'translate-x-0.5 -translate-y-0.5',
+    'bottom-left': '-translate-x-0.5 translate-y-0.5',
+    'bottom-right': 'translate-x-0.5 translate-y-0.5',
+  },
+  size: {
+    xs: 'w-1.5 h-1.5',
+    sm: 'w-2 h-2',
+    md: 'w-2.5 h-2.5',
+  },
+  value: {
+    size: {
+      xs: 'px-1 h-3 leading-none text-xs',
+      sm: 'px-1.5 h-4 leading-none text-xs',
+      md: 'px-2 h-5 leading-none text-sm',
+    },
+    translate: {
+      'top-left': '-translate-x-1/3 -translate-y-1/3',
+      'top-right': 'translate-x-1/3 -translate-y-1/3',
+      'bottom-left': '-translate-x-1/3 translate-y-1/3',
+      'bottom-right': 'translate-x-1/3 translate-y-1/3',
+    },
+  },
+  transition: {
+    moveClass: 'transform ease-out duration-300 transition',
+    enterActiveClass: 'transform ease-out duration-300 transition',
+    leaveActiveClass: 'transform ease-out duration-300 transition absolute',
+    enterFromClass: 'translate-y-2 opacity-0',
+    enterToClass: 'translate-y-0 opacity-100',
+    leaveFromClass: 'translate-y-0 opacity-100',
+    leaveToClass: '-translate-y-2 opacity-0',
+  },
+  default: {
+    size: 'sm',
+    color: 'primary',
+    position: 'top-right',
+  },
+}

src/runtime/themes/index.ts

@@ -4,6 +4,7 @@ export { default as standard } from './standard'
 // elements
 export { default as button } from './elements/button'
 export { default as kbd } from './elements/kbd'
+export { default as mark } from './elements/mark'
 
 // forms
 export { default as input } from './forms/input'

src/runtime/themes/overlays/message.ts

@@ -9,15 +9,19 @@ export default {
   type: {
     success: {
       color: 'emerald',
+      icon: 'tabler:circle-check',
     },
     warning: {
       color: 'amber',
+      icon: 'tabler:alert-circle',
     },
     error: {
       color: 'red',
+      icon: 'tabler:circle-x',
     },
     info: {
       color: 'blue',
+      icon: 'tabler:info-circle',
     },
   },
   default: {

src/runtime/types/button.d.ts

@@ -1,5 +1,5 @@
 import type { AppConfig } from 'nuxt/schema'
-import type { button } from '../ui.config'
+import type { button } from '../themes'
 import type { ExtractDeepObject, NestedKeyOf, ExtractDeepKey } from './utils'
 import type colors from '#ray-colors'
 

src/runtime/types/index.ts

@@ -4,5 +4,6 @@ export * from './input'
 export * from './textarea'
 export * from './kbd'
 export * from './toggle'
+export * from './mark'
 
 export * from './utils'

src/runtime/types/input.d.ts

@@ -1,5 +1,5 @@
 import type { AppConfig } from 'nuxt/schema'
-import type { input } from '../ui.config'
+import type { input } from '../themes'
 import type { ExtractDeepKey } from './utils'
 import type colors from '#ray-colors'
 

src/runtime/types/kbd.d.ts

@@ -1,5 +1,5 @@
 import type { AppConfig } from 'nuxt/schema'
-import type { kbd } from '../ui.config'
+import type { kbd } from '../themes'
 import type { ExtractDeepKey } from './utils'
 
 export type KbdSize =

src/runtime/types/mark.d.ts

@@ -0,0 +1,14 @@
+import type { AppConfig } from '@nuxt/schema'
+import type { mark } from '../themes'
+import type { ExtractDeepKey } from './utils'
+import type colors from '#ray-colors'
+
+export type MarkSize =
+  | keyof typeof mark.size
+  | ExtractDeepKey<AppConfig, ['rayui', 'mark', 'size']>
+export type MarkColor =
+  | ExtractDeepKey<AppConfig, ['rayui', 'mark', 'color']>
+  | (typeof colors)[number]
+export type MarkPosition =
+  | keyof typeof mark.position
+  | ExtractDeepKey<AppConfig, ['rayui', 'mark', 'position']>

src/runtime/types/message.d.ts

@@ -1,5 +1,5 @@
 import type { AppConfig } from 'nuxt/schema'
-import type { message } from '../ui.config'
+import type { message } from '../themes'
 import type colors from '#ray-colors'
 
 export type MessageType = keyof typeof message.type

src/runtime/types/textarea.d.ts

@@ -1,5 +1,5 @@
 import type { AppConfig } from '@nuxt/schema'
-import type { textarea } from '../ui.config'
+import type { textarea } from '../themes'
 import type { ExtractDeepKey } from './utils'
 import type colors from '#ray-colors'
 

src/runtime/types/toggle.d.ts

@@ -1,5 +1,5 @@
 import type { AppConfig } from '@nuxt/schema'
-import type { toggle } from '../ui.config'
+import type { toggle } from '../themes'
 import type { ExtractDeepKey } from './utils'
 import type colors from '#ray-colors'
 

src/tailwind.ts

@@ -49,7 +49,7 @@ export const installTailwind = (
               resolve(runtimePath, 'components/**/*.{vue,mjs,ts}'),
             )},
             ${JSON.stringify(
-              resolve(runtimePath, 'ui.config/**/*.{mjs,js,ts}'),
+              resolve(runtimePath, 'themes/**/*.{mjs,js,ts}'),
             )}
           ],
         },