@eslamdevui/ui 3.2.1 → 3.3.0

package/.nuxt/ui/dashboard-toolbar.ts

@@ -0,0 +1,7 @@
+export default {
+  "slots": {
+    "root": "shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]",
+    "left": "flex items-center gap-1.5",
+    "right": "flex items-center gap-1.5"
+  }
+}

package/.nuxt/ui/index.ts

@@ -42,6 +42,7 @@ export { default as dashboardSearchButton } from './dashboard-search-button'
 export { default as dashboardSidebar } from './dashboard-sidebar'
 export { default as dashboardSidebarCollapse } from './dashboard-sidebar-collapse'
 export { default as dashboardSidebarToggle } from './dashboard-sidebar-toggle'
+export { default as dashboardToolbar } from './dashboard-toolbar'
 export { default as drawer } from './drawer'
 export { default as dropdownMenu } from './dropdown-menu'
 export { default as error } from './error'
@@ -100,50 +101,4 @@ export { default as toast } from './toast'
 export { default as toaster } from './toaster'
 export { default as tooltip } from './tooltip'
 export { default as tree } from './tree'
-export { default as user } from './user'
-export { default as contentNavigation } from './content/content-navigation'
-export { default as contentSearch } from './content/content-search'
-export { default as contentSearchButton } from './content/content-search-button'
-export { default as contentSurround } from './content/content-surround'
-export { default as contentToc } from './content/content-toc'
-export { default as a } from './prose/a'
-export { default as accordion } from './prose/accordion'
-export { default as accordionItem } from './prose/accordion-item'
-export { default as badge } from './prose/badge'
-export { default as blockquote } from './prose/blockquote'
-export { default as callout } from './prose/callout'
-export { default as card } from './prose/card'
-export { default as cardGroup } from './prose/card-group'
-export { default as code } from './prose/code'
-export { default as codeCollapse } from './prose/code-collapse'
-export { default as codeGroup } from './prose/code-group'
-export { default as codeIcon } from './prose/code-icon'
-export { default as codePreview } from './prose/code-preview'
-export { default as codeTree } from './prose/code-tree'
-export { default as collapsible } from './prose/collapsible'
-export { default as em } from './prose/em'
-export { default as field } from './prose/field'
-export { default as fieldGroup } from './prose/field-group'
-export { default as h1 } from './prose/h1'
-export { default as h2 } from './prose/h2'
-export { default as h3 } from './prose/h3'
-export { default as h4 } from './prose/h4'
-export { default as hr } from './prose/hr'
-export { default as icon } from './prose/icon'
-export { default as img } from './prose/img'
-export { default as kbd } from './prose/kbd'
-export { default as li } from './prose/li'
-export { default as ol } from './prose/ol'
-export { default as p } from './prose/p'
-export { default as pre } from './prose/pre'
-export { default as steps } from './prose/steps'
-export { default as strong } from './prose/strong'
-export { default as table } from './prose/table'
-export { default as tabs } from './prose/tabs'
-export { default as tabsItem } from './prose/tabs-item'
-export { default as tbody } from './prose/tbody'
-export { default as td } from './prose/td'
-export { default as th } from './prose/th'
-export { default as thead } from './prose/thead'
-export { default as tr } from './prose/tr'
-export { default as ul } from './prose/ul'
+export { default as user } from './user'

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslamdevui/ui",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
-import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.DErCA3YU.mjs';
+import { defu } from 'defu';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.i6pGHFq6.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -8,8 +8,40 @@ import 'tailwindcss/colors';
 import 'knitwork';
 
 const name = "@eslamdevui/ui";
-const version = "3.2.1";
+const version = "3.3.0";
 
+function generateProseComponentMap(components) {
+  return components.reduce((map, component) => {
+    const pascalCase = component.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+    map[component] = `Prose${pascalCase}`;
+    return map;
+  }, {});
+}
+const proseComponents = [
+  "accordion",
+  "accordion-item",
+  "badge",
+  "callout",
+  "card",
+  "card-group",
+  "caution",
+  "code-collapse",
+  "code-group",
+  "code-icon",
+  "code-preview",
+  "code-tree",
+  "collapsible",
+  "field",
+  "field-group",
+  "icon",
+  "kbd",
+  "note",
+  "steps",
+  "tabs",
+  "tabs-item",
+  "tip",
+  "warning"
+];
 const module = defineNuxtModule({
   meta: {
     name,
@@ -67,7 +99,7 @@ const module = defineNuxtModule({
     }
     addPlugin({ src: resolve("./runtime/plugins/colors") });
     if (hasNuxtModule("@nuxtjs/mdc") || options.mdc || hasNuxtModule("@nuxt/content") || options.content) {
-      nuxt.options.mdc = defu(options.mdc, {
+      nuxt.options.mdc = defu(nuxt.options.mdc, {
         highlight: {
           theme: {
             light: "material-theme-lighter",
@@ -76,31 +108,7 @@ const module = defineNuxtModule({
           }
         },
         components: {
-          map: {
-            "accordion": "ProseAccordion",
-            "accordion-item": "ProseAccordionItem",
-            "badge": "ProseBadge",
-            "callout": "ProseCallout",
-            "card": "ProseCard",
-            "card-group": "ProseCardGroup",
-            "caution": "ProseCaution",
-            "code-collapse": "ProseCodeCollapse",
-            "code-group": "ProseCodeGroup",
-            "code-icon": "ProseCodeIcon",
-            "code-preview": "ProseCodePreview",
-            "code-tree": "ProseCodeTree",
-            "collapsible": "ProseCollapsible",
-            "field": "ProseField",
-            "field-group": "ProseFieldGroup",
-            "icon": "ProseIcon",
-            "kbd": "ProseKbd",
-            "note": "ProseNote",
-            "steps": "ProseSteps",
-            "tabs": "ProseTabs",
-            "tabs-item": "ProseTabsItem",
-            "tip": "ProseTip",
-            "warning": "ProseWarning"
-          }
+          map: generateProseComponentMap(proseComponents)
         }
       });
     }

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -11,30 +11,21 @@ import { useLocalePro } from "../composables/useLocalePro";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 const props = defineProps({
-  side: { type: String, required: false },
-  color: { type: null, required: false },
-  variant: { type: null, required: false },
+  side: { type: String, required: false, default: "left" },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "ghost" },
   class: { type: null, required: false }
 });
-const rootProps = useForwardProps(reactivePick(props, "color", "variant", "size", "as", "disabled", "ui"));
+const rootProps = useForwardProps(reactivePick(props, "color", "variant", "size"));
 const { t } = useLocalePro();
 const appConfig = useAppConfig();
 const { sidebarOpen, toggleSidebar } = useDashboard();
-const ui = computed(() => {
-  const baseTheme = typeof theme === "string" ? { base: theme } : theme;
-  return tv({
-    extend: tv(baseTheme),
-    ...appConfig.ui?.dashboardSidebarToggle
-  });
-});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebarToggle || {} }));
 </script>
 
 <template>
-  <UButton
-    v-bind="rootProps"
+  <UButton v-bind="rootProps"
     :aria-label="sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open')"
     :icon="sidebarOpen ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
-    :class="typeof ui === 'function' ? ui({ class: props.class, side: props.side }) : ui"
-    @click="toggleSidebar"
-  />
+    :class="ui({ class: props.class, side: props.side })" @click="toggleSidebar" />
 </template>

package/dist/runtime/components/DashboardSidebarToggle.vue.d.ts

@@ -1,7 +1,8 @@
-import type { ButtonProps } from '../types';
-export interface DashboardSidebarToggleProps extends 
-/** @vue-ignore */
-Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+import type { ButtonProps, ComponentConfig } from '../types';
+import theme from '#build/ui/dashboard-sidebar-toggle';
+import type { AppConfig } from '@nuxt/schema';
+export type DashboardSidebarToggle = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebarToggle'>;
+export interface DashboardSidebarToggleProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
     side?: 'left' | 'right';
     /**
      * @defaultValue 'neutral'
@@ -13,5 +14,9 @@ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
     variant?: ButtonProps['variant'];
     class?: any;
 }
-declare const _default: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    side: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/DashboardToolbar.vue

@@ -0,0 +1,32 @@
+<script>
+import theme from "#build/ui/dashboard-toolbar";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardToolbar || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot>
+      <div :class="ui.left({ class: [props.ui?.left] })">
+        <slot name="left" />
+      </div>
+
+      <div :class="ui.right({ class: [props.ui?.right] })">
+        <slot name="right" />
+      </div>
+    </slot>
+  </Primitive>
+</template>

package/dist/runtime/components/DashboardToolbar.vue.d.ts

@@ -0,0 +1,25 @@
+import theme from "#build/ui/dashboard-toolbar";
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from "../types";
+type DashboardToolbar = ComponentConfig<typeof theme, AppConfig, 'dashboardToolbar'>;
+export interface DashboardToolbarProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    ui?: DashboardToolbar['slots'];
+}
+export interface DashboardToolbarSlots {
+    default(props?: {}): any;
+    left(props?: {}): any;
+    right(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PageMarquee.vue

@@ -12,8 +12,8 @@ const props = defineProps({
   pauseOnHover: { type: Boolean, required: false },
   reverse: { type: Boolean, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
-  repeat: { type: Number, required: false },
-  overlay: { type: Boolean, required: false },
+  repeat: { type: Number, required: false, default: 4 },
+  overlay: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   ui: { type: null, required: false }
 });
@@ -28,7 +28,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageMarquee |
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-for="i in repeat" :key="i" :class="ui.content({ class: [props.ui?.content] })">
       <slot />
     </div>

package/dist/runtime/components/PageMarquee.vue.d.ts

@@ -20,7 +20,9 @@ export interface PageMarqueeSlots {
     default(props?: {}): any;
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageMarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageMarqueeProps> & Readonly<{}>, {
+    repeat: number;
     orientation: PageMarquee["variants"]["orientation"];
+    overlay: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageMarqueeSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/PricingTable.vue

@@ -53,18 +53,15 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
 
           <slot :name="`${tier.id}-badge`" :tier="tier">
             <slot name="tier-badge" :tier="tier">
-              <UBadge
-                v-if="tier.badge"
-                color="primary"
-                variant="subtle"
+              <UBadge v-if="tier.badge" color="primary" variant="subtle"
                 v-bind="typeof tier.badge === 'string' ? { label: tier.badge } : tier.badge"
-                :class="ui.tierBadge({ class: props.ui?.tierBadge })"
-              />
+                :class="ui.tierBadge({ class: props.ui?.tierBadge })" />
             </slot>
           </slot>
         </div>
 
-        <div v-if="tier.description || !!slots['tier-description'] || !!slots[`${tier.id}-description`]" :class="ui.tierDescription({ class: props.ui?.tierDescription })">
+        <div v-if="tier.description || !!slots['tier-description'] || !!slots[`${tier.id}-description`]"
+          :class="ui.tierDescription({ class: props.ui?.tierDescription })">
           <slot :name="`${tier.id}-description`" :tier="tier">
             <slot name="tier-description" :tier="tier">
               {{ tier.description }}
@@ -72,8 +69,11 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
           </slot>
         </div>
 
-        <div v-if="tier.discount || tier.price || !!slots['tier-discount'] || !!slots[`${tier.id}-discount`] || !!slots['tier-price'] || !!slots[`${tier.id}-price`] || tier.billingCycle || tier.billingPeriod || !!slots['tier-billing'] || !!slots[`${tier.id}-billing`]" :class="ui.tierPriceWrapper({ class: props.ui?.tierPriceWrapper })">
-          <div v-if="tier.discount && tier.price || !!slots[`${tier.id}-discount`] || !!slots['tier-discount']" :class="ui.tierDiscount({ class: props.ui?.tierDiscount })">
+        <div
+          v-if="tier.discount || tier.price || !!slots['tier-discount'] || !!slots[`${tier.id}-discount`] || !!slots['tier-price'] || !!slots[`${tier.id}-price`] || tier.billingCycle || tier.billingPeriod || !!slots['tier-billing'] || !!slots[`${tier.id}-billing`]"
+          :class="ui.tierPriceWrapper({ class: props.ui?.tierPriceWrapper })">
+          <div v-if="tier.discount && tier.price || !!slots[`${tier.id}-discount`] || !!slots['tier-discount']"
+            :class="ui.tierDiscount({ class: props.ui?.tierDiscount })">
             <slot :name="`${tier.id}-discount`" :tier="tier">
               <slot name="tier-discount" :tier="tier">
                 {{ tier.price }}
@@ -81,7 +81,8 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
             </slot>
           </div>
 
-          <div v-if="tier.discount || tier.price || !!slots[`${tier.id}-price`] || !!slots['tier-price']" :class="ui.tierPrice({ class: props.ui?.tierPrice })">
+          <div v-if="tier.discount || tier.price || !!slots[`${tier.id}-price`] || !!slots['tier-price']"
+            :class="ui.tierPrice({ class: props.ui?.tierPrice })">
             <slot :name="`${tier.id}-price`" :tier="tier">
               <slot name="tier-price" :tier="tier">
                 {{ tier.discount || tier.price }}
@@ -89,7 +90,9 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
             </slot>
           </div>
 
-          <div v-if="tier.billingCycle || tier.billingPeriod || !!slots[`${tier.id}-billing`] || !!slots['tier-billing']" :class="ui.tierBilling({ class: props.ui?.tierBilling })">
+          <div
+            v-if="tier.billingCycle || tier.billingPeriod || !!slots[`${tier.id}-billing`] || !!slots['tier-billing']"
+            :class="ui.tierBilling({ class: props.ui?.tierBilling })">
             <slot :name="`${tier.id}-billing`" :tier="tier">
               <slot name="tier-billing" :tier="tier">
                 <span :class="ui.tierBillingPeriod({ class: props.ui?.tierBillingPeriod })">
@@ -104,7 +107,8 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
           </div>
         </div>
 
-        <div v-if="!!slots[`${tier.id}-button`] || !!slots['tier-button'] || tier.button" :class="ui.tierButton({ class: props.ui?.tierButton })">
+        <div v-if="!!slots[`${tier.id}-button`] || !!slots['tier-button'] || tier.button"
+          :class="ui.tierButton({ class: props.ui?.tierButton })">
           <slot :name="`${tier.id}-button`" :tier="tier">
             <slot name="tier-button" :tier="tier">
               <UButton v-if="tier.button" block size="lg" v-bind="tier.button" />
@@ -117,7 +121,8 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
 
   <DefineFeatureTemplate v-slot="{ feature, tier }">
     <template v-if="feature.tiers?.[tier.id]">
-      <UIcon v-if="typeof feature.tiers[tier.id] === 'boolean'" :name="appConfig.ui.icons.success" :class="ui.tierFeatureIcon({ class: props.ui?.tierFeatureIcon, active: true })" />
+      <UIcon v-if="typeof feature.tiers[tier.id] === 'boolean'" :name="appConfig.ui.icons.success"
+        :class="ui.tierFeatureIcon({ class: props.ui?.tierFeatureIcon, active: true })" />
       <template v-else>
         {{ feature.tiers[tier.id] }}
       </template>
@@ -138,12 +143,8 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
         <tr :class="ui.tr({ class: props.ui?.tr })">
           <td />
 
-          <th
-            v-for="(tier, index) in tiers"
-            :key="index"
-            scope="col"
-            :class="ui.tier({ class: props.ui?.tier, highlight: tier.highlight })"
-          >
+          <th v-for="(tier, index) in tiers" :key="index" scope="col"
+            :class="ui.tier({ class: props.ui?.tier, highlight: tier.highlight })">
             <ReuseTierTemplate :tier="tier" />
           </th>
         </tr>
@@ -153,7 +154,9 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
         <template v-for="(section, sectionIndex) in sections" :key="sectionIndex">
           <tr :class="ui.tr({ class: props.ui?.tr, section: sectionIndex > 0 })">
             <th scope="row" :class="ui.th({ class: props.ui?.th })">
-              <div v-if="section.title || !!slots['section-title'] || !!slots[`section-${formatSlotName(section)}-title`]" :class="ui.sectionTitle({ class: props.ui?.sectionTitle })">
+              <div
+                v-if="section.title || !!slots['section-title'] || !!slots[`section-${formatSlotName(section)}-title`]"
+                :class="ui.sectionTitle({ class: props.ui?.sectionTitle })">
                 <slot :name="`section-${formatSlotName(section)}-title`" :section="section">
                   <slot name="section-title" :section="section">
                     {{ section.title }}
@@ -162,11 +165,8 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
               </div>
             </th>
 
-            <td
-              v-for="(tier, index) in tiers"
-              :key="`${sectionIndex}-tier-${index}`"
-              :class="ui.td({ class: props.ui?.td, highlight: tier.highlight })"
-            />
+            <td v-for="(tier, index) in tiers" :key="`${sectionIndex}-tier-${index}`"
+              :class="ui.td({ class: props.ui?.td, highlight: tier.highlight })" />
           </tr>
 
           <tr v-for="(feature, featureIndex) in section.features" :key="`${sectionIndex}-feature-${featureIndex}`">
@@ -180,13 +180,11 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
               </div>
             </th>
 
-            <td
-              v-for="(tier, index) in tiers"
-              :key="`${sectionIndex}-feature-${featureIndex}-tier-${index}`"
-              :class="ui.td({ class: props.ui?.td, highlight: tier.highlight })"
-            >
+            <td v-for="(tier, index) in tiers" :key="`${sectionIndex}-feature-${featureIndex}-tier-${index}`"
+              :class="ui.td({ class: props.ui?.td, highlight: tier.highlight })">
               <div :class="ui.featureValue({ class: props.ui?.featureValue })">
-                <slot :name="`feature-${formatSlotName(feature)}-value`" :feature="feature" :tier="tier" :section="section">
+                <slot :name="`feature-${formatSlotName(feature)}-value`" :feature="feature" :tier="tier"
+                  :section="section">
                   <slot name="feature-value" :feature="feature" :tier="tier" :section="section">
                     <ReuseFeatureTemplate :tier="tier" :feature="feature" />
                   </slot>
@@ -199,10 +197,12 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
     </table>
 
     <ul :class="ui.list({ class: props.ui?.list })">
-      <li v-for="(tier, index) in tiers" :key="index" :class="ui.item({ class: props.ui?.item, highlight: tier.highlight })">
+      <li v-for="(tier, index) in tiers" :key="index"
+        :class="ui.item({ class: props.ui?.item, highlight: tier.highlight })">
         <ReuseTierTemplate :tier="tier" />
 
-        <div v-for="(section, sectionIndex) in sections" :key="`section-${sectionIndex}`" :class="ui.section({ class: props.ui?.section })">
+        <div v-for="(section, sectionIndex) in sections" :key="`section-${sectionIndex}`"
+          :class="ui.section({ class: props.ui?.section })">
           <div v-if="section.title" :class="ui.sectionTitle({ class: props.ui?.sectionTitle })">
             <slot :name="`section-${formatSlotName(section)}-title`" :section="section">
               <slot name="section-title" :section="section">
@@ -211,7 +211,8 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
             </slot>
           </div>
 
-          <div v-for="(feature, featureIndex) in section.features" :key="`section-${sectionIndex}-feature-${featureIndex}`" :class="ui.feature({ class: props.ui?.feature })">
+          <div v-for="(feature, featureIndex) in section.features"
+            :key="`section-${sectionIndex}-feature-${featureIndex}`" :class="ui.feature({ class: props.ui?.feature })">
             <div :class="ui.featureTitle({ class: props.ui?.featureTitle })">
               <slot :name="`feature-${formatSlotName(feature)}-title`" :feature="feature" :section="section">
                 <slot name="feature-title" :feature="feature" :section="section">
@@ -221,7 +222,8 @@ const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
             </div>
 
             <div :class="ui.featureValue({ class: props.ui?.featureValue })">
-              <slot :name="`feature-${formatSlotName(feature)}-value`" :feature="feature" :tier="tier" :section="section">
+              <slot :name="`feature-${formatSlotName(feature)}-value`" :feature="feature" :tier="tier"
+                :section="section">
                 <slot name="feature-value" :feature="feature" :tier="tier" :section="section">
                   <ReuseFeatureTemplate :tier="tier" :feature="feature" />
                 </slot>

package/dist/runtime/components/content/ContentSearch.vue

@@ -3,30 +3,15 @@ import theme from "#build/ui/content/content-search";
 </script>
 
 <script setup>
-import {
-  computed,
-  useTemplateRef
-} from "vue";
-import {
-  useForwardProps,
-  useAppConfig,
-  useColorMode,
-  defineShortcuts
-} from "#imports";
-import {
-  reactivePick,
-  defu
-} from "@vueuse/core";
-import {
-  useContentSearch
-} from "../../composables/useContentSearch";
-import {
-  useLocalePro
-} from "../../composables/useLocalePro";
-import {
-  transformUI,
-  omit
-} from "../../utils";
+import { computed, useTemplateRef } from "vue";
+import { useForwardProps } from "reka-ui";
+import { defu } from "defu";
+import { reactivePick } from "@vueuse/core";
+import { omit } from "@nuxt/ui/utils";
+import { useAppConfig, useColorMode, defineShortcuts } from "#imports";
+import { useContentSearch } from "../../composables/useContentSearch";
+import { useLocalePro } from "../../composables/useLocalePro";
+import { transformUI } from "../../utils";
 import { tv } from "../../utils/tv";
 import UModal from "../Modal.vue";
 import UCommandPalette from "../CommandPalette.vue";
@@ -36,15 +21,15 @@ const props = defineProps({
   autofocus: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
   loadingIcon: { type: String, required: false },
-  close: { type: [Boolean, Object], required: false },
+  close: { type: [Boolean, Object], required: false, default: true },
   closeIcon: { type: String, required: false },
-  shortcut: { type: String, required: false },
+  shortcut: { type: String, required: false, default: "meta_k" },
   links: { type: Array, required: false },
   navigation: { type: Array, required: false },
   groups: { type: Array, required: false },
   files: { type: Array, required: false },
   fuse: { type: Object, required: false },
-  colorMode: { type: Boolean, required: false },
+  colorMode: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   ui: { type: void 0, required: false }
 });
@@ -87,9 +72,14 @@ function mapLinksItems(links) {
   ]);
 }
 function mapNavigationItems(children, parent) {
-  return children.flatMap(
-    (link) => link.children?.length ? mapNavigationItems(link.children, link) : props.files?.filter((file) => file.id === link.path || file.id.startsWith(`${link.path}#`))?.map((file) => mapFile(file, link, parent)) || []
-  );
+  return children.flatMap((link) => {
+    if (link.children?.length) {
+      return mapNavigationItems(link.children, link);
+    }
+    return props.files?.filter(
+      (file) => file.id === link.path || file.id.startsWith(`${link.path}#`)
+    )?.map((file) => mapFile(file, link, parent)) || [];
+  });
 }
 function mapFile(file, link, parent) {
   const prefix = [...new Set([parent?.title, ...file.titles].filter(Boolean))].join(" > ");
@@ -102,78 +92,86 @@ function mapFile(file, link, parent) {
     level: file.level
   };
 }
-function postFilter(query, items) {
-  return query ? items : items?.filter((item) => item.level === 1);
-}
-function onSelect(item) {
-  if (!item.disabled) {
-    open.value = false;
-    searchTerm.value = "";
-  }
-}
-defineShortcuts({
-  [props.shortcut || "meta_k"]: {
-    usingInput: true,
-    handler: () => open.value = !open.value
-  }
-});
 const groups = computed(() => {
-  const result = [];
+  const groups2 = [];
   if (props.links?.length) {
-    result.push({ id: "links", label: t("contentSearch.links"), items: mapLinksItems(props.links) });
+    groups2.push({ id: "links", label: t("contentSearch.links"), items: mapLinksItems(props.links) });
   }
   if (props.navigation?.length) {
-    if (props.navigation.some((link) => link.children?.length)) {
-      result.push(...props.navigation.map((group) => ({
+    if (props.navigation.some((link) => !!link.children?.length)) {
+      groups2.push(...props.navigation.map((group) => ({
         id: group.path,
         label: group.title,
-        items: mapNavigationItems(group.children || []),
+        items: mapNavigationItems(group.children || [], group),
         postFilter
       })));
     } else {
-      result.push({ id: "docs", items: mapNavigationItems(props.navigation), postFilter });
+      groups2.push({
+        id: "docs",
+        items: mapNavigationItems(props.navigation, { title: "", path: "", children: [] }),
+        postFilter
+      });
     }
   }
-  if (props.groups?.length) result.push(...props.groups);
+  groups2.push(...props.groups || []);
   if (props.colorMode && !colorMode?.forced) {
-    result.push({
+    groups2.push({
       id: "theme",
       label: t("contentSearch.theme"),
-      items: ["system", "light", "dark"].map((mode) => ({
-        label: t(`colorMode.${mode}`),
-        icon: appConfig.ui.icons[mode],
-        active: colorMode.preference === mode,
+      items: [{
+        label: t("colorMode.system"),
+        icon: appConfig.ui.icons.system,
+        active: colorMode.preference === "system",
+        onSelect: () => {
+          colorMode.preference = "system";
+        }
+      }, {
+        label: t("colorMode.light"),
+        icon: appConfig.ui.icons.light,
+        active: colorMode.preference === "light",
+        onSelect: () => {
+          colorMode.preference = "light";
+        }
+      }, {
+        label: t("colorMode.dark"),
+        icon: appConfig.ui.icons.dark,
+        active: colorMode.preference === "dark",
         onSelect: () => {
-          colorMode.preference = mode;
+          colorMode.preference = "dark";
         }
-      }))
+      }]
     });
   }
-  return result;
+  return groups2;
+});
+function postFilter(query, items) {
+  return query ? items : items?.filter((item) => item.level === 1);
+}
+function onSelect(item) {
+  if (item.disabled) {
+    return;
+  }
+  open.value = false;
+  searchTerm.value = "";
+}
+defineShortcuts({
+  [props.shortcut || "meta_k"]: {
+    usingInput: true,
+    handler: () => open.value = !open.value
+  }
 });
 const commandPaletteRef = useTemplateRef("commandPaletteRef");
 defineExpose({ commandPaletteRef });
 </script>
 
 <template>
-  <UModal
-    v-model:open="open"
-    :title="t('contentSearch.title')"
-    :description="t('contentSearch.description')"
-    :class="ui.modal({ class: props.class })"
-  >
+  <UModal v-model:open="open" :title="t('contentSearch.title')" :description="t('contentSearch.description')"
+    :class="ui.modal({ class: props.class })">
     <template #content>
       <slot name="content">
-        <UCommandPalette
-          ref="commandPaletteRef"
-          v-model:search-term="searchTerm"
-          v-bind="commandPaletteProps"
-          :groups="groups"
-          :fuse="fuse"
-          :ui="transformUI(omit(ui, ['modal']), props.ui)"
-          @update:model-value="onSelect"
-          @update:open="open = $event"
-        >
+        <UCommandPalette ref="commandPaletteRef" v-model:search-term="searchTerm" v-bind="commandPaletteProps"
+          :groups="groups" :fuse="fuse" :ui="transformUI(omit(ui, ['modal']), props.ui)" @update:model-value="onSelect"
+          @update:open="open = $event">
           <template v-for="(_, name) in proxySlots" #[name]="slotData">
             <slot :name="name" v-bind="slotData" />
           </template>

package/dist/runtime/components/content/ContentSearch.vue.d.ts

@@ -102,7 +102,11 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ContentSea
     searchTerm?: string;
 }> & Readonly<{
     "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContentSearchSlots>;
+}>, {
+    close: boolean | Partial<ButtonProps>;
+    colorMode: boolean;
+    shortcut: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContentSearchSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/content/ContentSurround.vue

@@ -18,23 +18,19 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
-const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate({
-  props: {
-    link: Object,
-    icon: String,
-    direction: String
-  }
-});
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSurround || {} })());
 </script>
 
 <template>
   <DefineLinkTemplate v-slot="{ link, icon, direction }">
-    <ULink v-if="link" :to="link.path" raw :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], direction })">
+    <ULink v-if="link" :to="link.path" raw
+      :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], direction })">
       <slot name="link" :link="link">
         <div :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading] })">
           <slot name="link-leading" :link="link">
-            <UIcon :name="link.icon || icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
+            <UIcon :name="link.icon || icon"
+              :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
           </slot>
         </div>
 

package/dist/runtime/composables/useAvatarGroup.js

@@ -1,5 +1,5 @@
 import { inject, provide, computed } from "vue";
-export const avatarGroupInjectionKey = Symbol("nuxt-ui.avatar-group");
+export const avatarGroupInjectionKey = Symbol("eslamdevui-ui.avatar-group");
 export function useAvatarGroup(props) {
   const avatarGroup = inject(avatarGroupInjectionKey, void 0);
   const size = computed(() => props.size ?? avatarGroup?.value.size);

package/dist/runtime/composables/useBreakpoint.d.ts

@@ -0,0 +1,11 @@
+export declare function useBreakpoint(): {
+    isSm: import("vue").ComputedRef<boolean>;
+    isMd: import("vue").ComputedRef<boolean>;
+    isLg: import("vue").ComputedRef<boolean>;
+    isXl: import("vue").ComputedRef<boolean>;
+    is2xl: import("vue").ComputedRef<boolean>;
+    isMobile: import("vue").ComputedRef<boolean>;
+    isTablet: import("vue").ComputedRef<boolean>;
+    isDesktop: import("vue").ComputedRef<boolean>;
+    current: import("vue").ComputedRef<"sm" | "md" | "lg" | "xl" | "2xl">;
+};

package/dist/runtime/composables/useBreakpoint.js

@@ -0,0 +1,53 @@
+import { useMediaQuery } from "@vueuse/core";
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+const defaultBreakpoints = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+};
+export function useBreakpoint() {
+  const config = useAppConfig();
+  const breakpoints = {
+    ...defaultBreakpoints,
+    ...config.ui?.breakpoints || {}
+  };
+  const queries = {
+    sm: useMediaQuery(`(min-width: ${breakpoints.sm})`),
+    md: useMediaQuery(`(min-width: ${breakpoints.md})`),
+    lg: useMediaQuery(`(min-width: ${breakpoints.lg})`),
+    xl: useMediaQuery(`(min-width: ${breakpoints.xl})`),
+    "2xl": useMediaQuery(`(min-width: ${breakpoints["2xl"]})`)
+  };
+  const current = computed(() => {
+    const order = ["2xl", "xl", "lg", "md", "sm"];
+    for (const key of order) {
+      if (queries[key].value) return key;
+    }
+    return "sm";
+  });
+  const isSm = queries.sm;
+  const isMd = queries.md;
+  const isLg = queries.lg;
+  const isXl = queries.xl;
+  const is2xl = queries["2xl"];
+  const isMobile = computed(() => !isMd.value);
+  const isTablet = computed(() => isMd.value && !isLg.value);
+  const isDesktop = computed(() => isLg.value);
+  return {
+    // individual breakpoints
+    isSm,
+    isMd,
+    isLg,
+    isXl,
+    is2xl,
+    // helpers
+    isMobile,
+    isTablet,
+    isDesktop,
+    // current active key
+    current
+  };
+}

package/dist/runtime/composables/useButtonGroup.js

@@ -1,5 +1,5 @@
 import { inject, computed } from "vue";
-export const buttonGroupInjectionKey = Symbol("nuxt-ui.button-group");
+export const buttonGroupInjectionKey = Symbol("eslamdevui-ui.button-group");
 export function useButtonGroup(props) {
   const buttonGroup = inject(buttonGroupInjectionKey, void 0);
   return {

package/dist/runtime/composables/useFormField.js

@@ -1,11 +1,11 @@
 import { inject, computed, provide } from "vue";
 import { useDebounceFn } from "@vueuse/core";
-export const formOptionsInjectionKey = Symbol("nuxt-ui.form-options");
-export const formBusInjectionKey = Symbol("nuxt-ui.form-events");
-export const formFieldInjectionKey = Symbol("nuxt-ui.form-field");
-export const inputIdInjectionKey = Symbol("nuxt-ui.input-id");
-export const formInputsInjectionKey = Symbol("nuxt-ui.form-inputs");
-export const formLoadingInjectionKey = Symbol("nuxt-ui.form-loading");
+export const formOptionsInjectionKey = Symbol("eslamdevui-ui.form-options");
+export const formBusInjectionKey = Symbol("eslamdevui-ui.form-events");
+export const formFieldInjectionKey = Symbol("eslamdevui-ui.form-field");
+export const inputIdInjectionKey = Symbol("eslamdevui-ui.input-id");
+export const formInputsInjectionKey = Symbol("eslamdevui-ui.form-inputs");
+export const formLoadingInjectionKey = Symbol("eslamdevui-ui.form-loading");
 export function useFormField(props, opts) {
   const formOptions = inject(formOptionsInjectionKey, void 0);
   const formBus = inject(formBusInjectionKey, void 0);

package/dist/runtime/composables/useLocale.js

@@ -2,7 +2,7 @@ import { computed, inject, toRef } from "vue";
 import { createSharedComposable } from "@vueuse/core";
 import { buildLocaleContext } from "../utils/locale.js";
 import en from "../locale/en.js";
-export const localeContextInjectionKey = Symbol.for("nuxt-ui.locale-context");
+export const localeContextInjectionKey = Symbol.for("eslamdevui-ui.locale-context");
 const _useLocale = (localeOverrides) => {
   const locale = localeOverrides || toRef(inject(localeContextInjectionKey));
   return buildLocaleContext(computed(() => locale.value || en));

package/dist/runtime/composables/usePortal.js

@@ -1,5 +1,5 @@
 import { inject, provide, computed } from "vue";
-export const portalTargetInjectionKey = Symbol("nuxt-ui.portal-target");
+export const portalTargetInjectionKey = Symbol("eslamdevui-ui.portal-target");
 export function usePortal(portal) {
   const portalTarget = inject(portalTargetInjectionKey, void 0);
   const to = computed(() => {

package/dist/runtime/plugins/colors.js

@@ -35,16 +35,16 @@ export default defineNuxtPlugin(() => {
     style: [{
       innerHTML: () => root.value,
       tagPriority: -2,
-      id: "nuxt-ui-colors"
+      id: "eslamdevui-ui-colors"
     }]
   };
   if (import.meta.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
     const style = document.createElement("style");
     style.innerHTML = root.value;
-    style.setAttribute("data-nuxt-ui-colors", "");
+    style.setAttribute("data-eslamdevui-ui-colors", "");
     document.head.appendChild(style);
     headData.script = [{
-      innerHTML: "document.head.removeChild(document.querySelector('[data-nuxt-ui-colors]'))"
+      innerHTML: "document.head.removeChild(document.querySelector('[data-eslamdevui-ui-colors]'))"
     }];
   }
   useHead(headData);

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

@@ -43,6 +43,7 @@ export * from '../components/DashboardSearchButton.vue';
 export * from '../components/DashboardSidebar.vue';
 export * from '../components/DashboardSidebarCollapse.vue';
 export * from '../components/DashboardSidebarToggle.vue';
+export * from '../components/DashboardToolbar.vue';
 export * from '../components/Drawer.vue';
 export * from '../components/DropdownMenu.vue';
 export * from '../components/Error.vue';

package/dist/runtime/types/index.js

@@ -43,6 +43,7 @@ export * from "../components/DashboardSearchButton.vue";
 export * from "../components/DashboardSidebar.vue";
 export * from "../components/DashboardSidebarCollapse.vue";
 export * from "../components/DashboardSidebarToggle.vue";
+export * from "../components/DashboardToolbar.vue";
 export * from "../components/Drawer.vue";
 export * from "../components/DropdownMenu.vue";
 export * from "../components/Error.vue";

package/dist/shared/{ui.DErCA3YU.mjs → ui.i6pGHFq6.mjs}

@@ -2083,6 +2083,14 @@ const dashboardSidebarToggle = {
   }
 };
 
+const dashboardToolbar = {
+  slots: {
+    root: "shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]",
+    left: "flex items-center gap-1.5",
+    right: "flex items-center gap-1.5"
+  }
+};
+
 const drawer = (options) => ({
   slots: {
     overlay: "fixed inset-0 bg-elevated/75",
@@ -5738,6 +5746,7 @@ const theme = {
   dashboardSidebar: dashboardSidebar,
   dashboardSidebarCollapse: dashboardSidebarCollapse,
   dashboardSidebarToggle: dashboardSidebarToggle,
+  dashboardToolbar: dashboardToolbar,
   drawer: drawer,
   dropdownMenu: dropdownMenu,
   error: error,
@@ -6494,12 +6503,6 @@ function getTemplates(options, uiConfig) {
       for (const component of Object.keys(theme)) {
         exports.push(`export { default as ${component} } from './${kebabCase(component)}'`);
       }
-      for (const component of Object.keys(contentTheme)) {
-        exports.push(`export { default as ${component} } from './content/${kebabCase(component)}'`);
-      }
-      for (const component of Object.keys(proseTheme)) {
-        exports.push(`export { default as ${component} } from './prose/${kebabCase(component)}'`);
-      }
       return exports.join("\n");
     }
   });

package/dist/unplugin.mjs

@@ -3,7 +3,7 @@ import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
 import { defu } from 'defu';
 import tailwind from '@tailwindcss/vite';
-import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.DErCA3YU.mjs';
+import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.i6pGHFq6.mjs';
 import { globSync } from 'tinyglobby';
 import { genSafeVariableName } from 'knitwork';
 import MagicString from 'magic-string';
@@ -88,14 +88,14 @@ ${plugins.map((p) => `    app.use(${genSafeVariableName(p)})`).join("\n")}
 
 function AppConfigPlugin(options, appConfig) {
   return {
-    name: "nuxt:ui:app-config",
+    name: "eslamdevui:ui:app-config",
     enforce: "pre",
     resolveId(id) {
       if (id === "#build/app.config") {
-        return "virtual:nuxt-ui-app-config";
+        return "virtual:eslamdevui-ui-app-config";
       }
     },
-    loadInclude: (id) => id === "virtual:nuxt-ui-app-config",
+    loadInclude: (id) => id === "virtual:eslamdevui-ui-app-config",
     load() {
       return `
           export default ${JSON.stringify(appConfig)}
@@ -149,7 +149,7 @@ function ComponentImportPlugin(options, meta) {
      * <UIcon> and <ULink> currently.
      */
     {
-      name: "nuxt:ui:components",
+      name: "eslamdevui:ui:components",
       enforce: "pre",
       resolveId(id, importer) {
         if (!importer || !normalize(importer).includes(runtimeDir)) {
@@ -175,7 +175,7 @@ const RELATIVE_IMPORT_RE = /^\.{1,2}\//;
 function NuxtEnvironmentPlugin(options) {
   const stubPath = resolvePathSync(options.inertia ? "../runtime/inertia/stubs" : "../runtime/vue/stubs", { extensions: [".ts", ".mjs", ".js"], url: import.meta.url });
   return {
-    name: "nuxt:ui",
+    name: "eslamdevui:ui",
     enforce: "pre",
     resolveId(id) {
       if (id === "#imports") {
@@ -223,7 +223,7 @@ const NuxtUIPlugin = createUnplugin((_options = {}, meta) => {
     TemplatePlugin(options, appConfig),
     AppConfigPlugin(options, appConfig),
     {
-      name: "nuxt:ui:plugins-duplication-detection",
+      name: "eslamdevui:ui:plugins-duplication-detection",
       vite: {
         configResolved(config) {
           const plugins = config.plugins || [];

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.DErCA3YU.mjs';
+import './shared/ui.i6pGHFq6.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import '@nuxt/kit';

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@eslamdevui/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.2.1",
-  "packageManager": "pnpm@10.12.2",
+  "version": "3.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/MohamedEslam04/ui.git"
@@ -96,24 +95,6 @@
     "cli",
     "vue-plugin.d.ts"
   ],
-  "scripts": {
-    "build": "nuxt-module-build build",
-    "prepack": "pnpm build",
-    "dev": "nuxt dev playground --uiDev",
-    "dev:build": "nuxt build playground",
-    "dev:vue": "vite playground-vue -- --uiDev",
-    "dev:vue:build": "vite build playground-vue",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground && vite build playground-vue",
-    "docs": "nuxt dev docs --uiDev",
-    "docs:build": "nuxt build docs",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "typecheck": "vue-tsc --noEmit && nuxt typecheck playground && nuxt typecheck docs && cd playground-vue && vue-tsc --noEmit",
-    "test": "vitest",
-    "test:vue": "vitest -c vitest.vue.config.ts",
-    "release": "release-it",
-    "clean": "rm -rf dist .nuxt playground/.nuxt playground-vue/dist docs/.nuxt"
-  },
   "dependencies": {
     "@ai-sdk/vue": "^1.2.12",
     "@iconify/vue": "^5.0.0",
@@ -222,19 +203,6 @@
     "unimport": "4.1.1",
     "unplugin": "^2.3.5"
   },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "better-sqlite3",
-      "puppeteer",
-      "sharp"
-    ],
-    "ignoredBuiltDependencies": [
-      "@parcel/watcher",
-      "esbuild",
-      "vue-demi",
-      "workerd"
-    ]
-  },
   "keywords": [
     "nuxt-ui",
     "nuxt",
@@ -250,5 +218,22 @@
     "tailwind",
     "framework",
     "ui-framework"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev": "nuxt dev playground --uiDev",
+    "dev:build": "nuxt build playground",
+    "dev:vue": "vite playground-vue -- --uiDev",
+    "dev:vue:build": "vite build playground-vue",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground && vite build playground-vue",
+    "docs": "nuxt dev docs --uiDev",
+    "docs:build": "nuxt build docs",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "vue-tsc --noEmit && nuxt typecheck playground && nuxt typecheck docs && cd playground-vue && vue-tsc --noEmit",
+    "test": "vitest",
+    "test:vue": "vitest -c vitest.vue.config.ts",
+    "release": "release-it",
+    "clean": "rm -rf dist .nuxt playground/.nuxt playground-vue/dist docs/.nuxt"
+  }
+}