@nuxt/ui 3.0.2 → 3.1.0

package/.nuxt/ui.css

@@ -1,18 +1,19 @@
 @source "./ui";
 
 @theme default {
-  --color-old-neutral-50: oklch(0.985 0 0);
-  --color-old-neutral-100: oklch(0.97 0 0);
-  --color-old-neutral-200: oklch(0.922 0 0);
-  --color-old-neutral-300: oklch(0.87 0 0);
-  --color-old-neutral-400: oklch(0.708 0 0);
-  --color-old-neutral-500: oklch(0.556 0 0);
-  --color-old-neutral-600: oklch(0.439 0 0);
-  --color-old-neutral-700: oklch(0.371 0 0);
-  --color-old-neutral-800: oklch(0.269 0 0);
-  --color-old-neutral-900: oklch(0.205 0 0);
-  --color-old-neutral-950: oklch(0.145 0 0);
-  --color-primary-50: var(--ui-color-primary-50);
+  --color-old-neutral-50: oklch(98.5% 0 0);
+  --color-old-neutral-100: oklch(97% 0 0);
+  --color-old-neutral-200: oklch(92.2% 0 0);
+  --color-old-neutral-300: oklch(87% 0 0);
+  --color-old-neutral-400: oklch(70.8% 0 0);
+  --color-old-neutral-500: oklch(55.6% 0 0);
+  --color-old-neutral-600: oklch(43.9% 0 0);
+  --color-old-neutral-700: oklch(37.1% 0 0);
+  --color-old-neutral-800: oklch(26.9% 0 0);
+  --color-old-neutral-900: oklch(20.5% 0 0);
+  --color-old-neutral-950: oklch(14.5% 0 0);
+  --color-primary: var(--ui-primary);
+	--color-primary-50: var(--ui-color-primary-50);
 	--color-primary-100: var(--ui-color-primary-100);
 	--color-primary-200: var(--ui-color-primary-200);
 	--color-primary-300: var(--ui-color-primary-300);
@@ -23,6 +24,7 @@
 	--color-primary-800: var(--ui-color-primary-800);
 	--color-primary-900: var(--ui-color-primary-900);
 	--color-primary-950: var(--ui-color-primary-950);
+	--color-secondary: var(--ui-secondary);
 	--color-secondary-50: var(--ui-color-secondary-50);
 	--color-secondary-100: var(--ui-color-secondary-100);
 	--color-secondary-200: var(--ui-color-secondary-200);
@@ -34,6 +36,7 @@
 	--color-secondary-800: var(--ui-color-secondary-800);
 	--color-secondary-900: var(--ui-color-secondary-900);
 	--color-secondary-950: var(--ui-color-secondary-950);
+	--color-success: var(--ui-success);
 	--color-success-50: var(--ui-color-success-50);
 	--color-success-100: var(--ui-color-success-100);
 	--color-success-200: var(--ui-color-success-200);
@@ -45,6 +48,7 @@
 	--color-success-800: var(--ui-color-success-800);
 	--color-success-900: var(--ui-color-success-900);
 	--color-success-950: var(--ui-color-success-950);
+	--color-info: var(--ui-info);
 	--color-info-50: var(--ui-color-info-50);
 	--color-info-100: var(--ui-color-info-100);
 	--color-info-200: var(--ui-color-info-200);
@@ -56,6 +60,7 @@
 	--color-info-800: var(--ui-color-info-800);
 	--color-info-900: var(--ui-color-info-900);
 	--color-info-950: var(--ui-color-info-950);
+	--color-warning: var(--ui-warning);
 	--color-warning-50: var(--ui-color-warning-50);
 	--color-warning-100: var(--ui-color-warning-100);
 	--color-warning-200: var(--ui-color-warning-200);
@@ -67,6 +72,7 @@
 	--color-warning-800: var(--ui-color-warning-800);
 	--color-warning-900: var(--ui-color-warning-900);
 	--color-warning-950: var(--ui-color-warning-950);
+	--color-error: var(--ui-error);
 	--color-error-50: var(--ui-color-error-50);
 	--color-error-100: var(--ui-color-error-100);
 	--color-error-200: var(--ui-color-error-200);
@@ -89,4 +95,42 @@
 	--color-neutral-800: var(--ui-color-neutral-800);
 	--color-neutral-900: var(--ui-color-neutral-900);
 	--color-neutral-950: var(--ui-color-neutral-950);
+  --radius-xs: calc(var(--ui-radius) * 0.5);
+  --radius-sm: var(--ui-radius);
+  --radius-md: calc(var(--ui-radius) * 1.5);
+  --radius-lg: calc(var(--ui-radius) * 2);
+  --radius-xl: calc(var(--ui-radius) * 3);
+  --radius-2xl: calc(var(--ui-radius) * 4);
+  --radius-3xl: calc(var(--ui-radius) * 6);
+  --text-color-dimmed: var(--ui-text-dimmed);
+  --text-color-muted: var(--ui-text-muted);
+  --text-color-toned: var(--ui-text-toned);
+  --text-color-default: var(--ui-text);
+  --text-color-highlighted: var(--ui-text-highlighted);
+  --text-color-inverted: var(--ui-text-inverted);
+  --background-color-default: var(--ui-bg);
+  --background-color-muted: var(--ui-bg-muted);
+  --background-color-elevated: var(--ui-bg-elevated);
+  --background-color-accented: var(--ui-bg-accented);
+  --background-color-inverted: var(--ui-bg-inverted);
+  --background-color-border: var(--ui-border);
+  --border-color-default: var(--ui-border);
+  --border-color-muted: var(--ui-border-muted);
+  --border-color-accented: var(--ui-border-accented);
+  --border-color-inverted: var(--ui-border-inverted);
+  --ring-color-default: var(--ui-border);
+  --ring-color-muted: var(--ui-border-muted);
+  --ring-color-accented: var(--ui-border-accented);
+  --ring-color-inverted: var(--ui-border-inverted);
+  --ring-color-bg: var(--ui-bg);
+  --divide-color-default: var(--ui-border);
+  --divide-color-muted: var(--ui-border-muted);
+  --divide-color-accented: var(--ui-border-accented);
+  --divide-color-inverted: var(--ui-border-inverted);
+  --outline-color-default: var(--ui-border);
+  --outline-color-inverted: var(--ui-border-inverted);
+  --stroke-default: var(--ui-border);
+  --stroke-inverted: var(--ui-border-inverted);
+  --fill-default: var(--ui-border);
+  --fill-inverted: var(--ui-border-inverted);
 }

package/README.md

@@ -104,6 +104,17 @@ app.mount('#app')
 
 Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/vue).
 
+## Contribution
+
+Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:
+
+- Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
+- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/getting-started/contribution) to share your suggestions.
+
+## Local Development
+
+Follow the docs to [set up your local development environment](https://ui.nuxt.com/getting-started/contribution#local-development) and contribute.
+
 ## Credits
 
 - [nuxt/nuxt](https://github.com/nuxt/nuxt)

package/cli/templates.mjs

@@ -31,13 +31,10 @@ const component = ({ name, primitive, pro, prose, content }) => {
       ? `
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import { tv } from '${pro ? '#ui/utils/tv' : '../utils/tv'}'
+import type { ComponentConfig } from '../types/utils'
 
-const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
-
-const ${camelName} = tv({ extend: tv(theme), ...(appConfig${camelName}.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
 
 export interface ${upperName}Props {
   /**
@@ -46,7 +43,7 @@ export interface ${upperName}Props {
    */
   as?: any
   class?: any
-  ui?: Partial<typeof ${camelName}.slots>
+  ui?: ${upperName}['slots']
 }
 
 export interface ${upperName}Slots {
@@ -55,12 +52,17 @@ export interface ${upperName}Slots {
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
+import { useAppConfig } from '#imports'
+import { tv } from '../utils/tv'
 
 const props = defineProps<${upperName}Props>()
 defineSlots<${upperName}Slots>()
 
-const ui = ${camelName}()
+const appConfig = useAppConfig() as ${upperName}['AppConfig']
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -71,22 +73,16 @@ const ui = ${camelName}()
 `
       : `
 <script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import { tv } from '${pro ? '#ui/utils/tv' : '../utils/tv'}'
-
-const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
+import type { ComponentConfig } from '../types/utils'
 
-const ${camelName} = tv({ extend: tv(theme), ...(appConfig${camelName}.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
-
-type ${upperName}Variants = VariantProps<typeof ${camelName}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
 
 export interface ${upperName}Props extends Pick<${upperName}RootProps> {
   class?: any
-  ui?: Partial<typeof ${camelName}.slots>
+  ui?: ${upperName}['slots']
 }
 
 export interface ${upperName}Emits extends ${upperName}RootEmits {}
@@ -95,16 +91,21 @@ export interface ${upperName}Slots {}
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { ${upperName}Root, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { tv } from '../utils/tv'
 
 const props = defineProps<${upperName}Props>()
 const emits = defineEmits<${upperName}Emits>()
 const slots = defineSlots<${upperName}Slots>()
 
+const appConfig = useAppConfig() as ${upperName}['AppConfig']
+
 const rootProps = useForwardPropsEmits(reactivePick(props), emits)
 
-const ui = ${camelName}()
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>
 
 <template>

package/dist/module.json

@@ -1,13 +1,13 @@
 {
-  "name": "ui",
+  "name": "@nuxt/ui",
+  "version": "3.1.0",
+  "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
-  "version": "3.0.2",
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
+    "@nuxt/module-builder": "1.0.1",
+    "unbuild": "3.5.0"
   }
 }

package/dist/module.mjs

@@ -1,19 +1,23 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BkNUP964.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.D7lOOabO.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
 import 'tailwindcss/colors';
 
+const name = "@nuxt/ui";
+const version = "3.1.0";
+
 const module = defineNuxtModule({
   meta: {
-    name: "ui",
+    name,
+    version,
+    docs: "https://ui.nuxt.com/getting-started/installation/nuxt",
     configKey: "ui",
     compatibility: {
       nuxt: ">=3.16.0"
-    },
-    docs: "https://ui.nuxt.com/getting-started/installation/nuxt"
+    }
   },
   defaults: defaultOptions,
   async setup(options, nuxt) {
@@ -31,9 +35,9 @@ const module = defineNuxtModule({
     } else {
       nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
-    async function registerModule(name, key, options2) {
-      if (!hasNuxtModule(name)) {
-        await installModule(name, options2);
+    async function registerModule(name2, key, options2) {
+      if (!hasNuxtModule(name2)) {
+        await installModule(name2, options2);
       } else {
         nuxt.options[key] = defu(nuxt.options[key], options2);
       }

package/dist/runtime/components/Accordion.vue

@@ -1,93 +1,36 @@
-<!-- eslint-disable vue/block-tag-newline -->
-<script lang="ts">
-import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/accordion'
-import { tv } from '../utils/tv'
-import type { DynamicSlots } from '../types/utils'
-
-const appConfigAccordion = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
-
-const accordion = tv({ extend: tv(theme), ...(appConfigAccordion.ui?.accordion || {}) })
-
-export interface AccordionItem {
-  label?: string
-  /**
-   * @IconifyIcon
-   */
-  icon?: string
-  /**
-   * @IconifyIcon
-   */
-  trailingIcon?: string
-  slot?: string
-  content?: string
-  /** A unique value for the accordion item. Defaults to the index. */
-  value?: string
-  disabled?: boolean
-  [key: string]: any
-}
-
-export interface AccordionProps<T extends AccordionItem = AccordionItem> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  items?: T[]
-  /**
-   * The icon displayed on the right side of the trigger.
-   * @defaultValue appConfig.ui.icons.chevronDown
-   * @IconifyIcon
-   */
-  trailingIcon?: string
-  /**
-   * The key used to get the label from the item.
-   * @defaultValue 'label'
-   */
-  labelKey?: string
-  class?: any
-  ui?: Partial<typeof accordion.slots>
-}
-
-export interface AccordionEmits extends AccordionRootEmits {}
-
-type SlotProps<T extends AccordionItem> = (props: { item: T, index: number, open: boolean }) => any
-
-export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
-  leading: SlotProps<T>
-  default: SlotProps<T>
-  trailing: SlotProps<T>
-  content: SlotProps<T>
-  body: SlotProps<T>
-} & DynamicSlots<T, 'body', { index: number, open: boolean }>
-
+<script>
+import theme from "#build/ui/accordion";
 </script>
 
-<script setup lang="ts" generic="T extends AccordionItem">
-import { computed } from 'vue'
-import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useAppConfig } from '#imports'
-import { get } from '../utils'
-import UIcon from './Icon.vue'
-
-const props = withDefaults(defineProps<AccordionProps<T>>(), {
-  type: 'single',
-  collapsible: true,
-  unmountOnHide: true,
-  labelKey: 'label'
-})
-const emits = defineEmits<AccordionEmits>()
-const slots = defineSlots<AccordionSlots<T>>()
-
-const appConfig = useAppConfig()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type', 'unmountOnHide'), emits)
-
-const ui = computed(() => accordion({
+<script setup>
+import { computed } from "vue";
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { get } from "../utils";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  items: { type: Array, required: false },
+  trailingIcon: { type: String, required: false },
+  labelKey: { type: String, required: false, default: "label" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  collapsible: { type: Boolean, required: false, default: true },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  type: { type: String, required: false, default: "single" },
+  disabled: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "type", "unmountOnHide"), emits);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion || {} })({
   disabled: props.disabled
-}))
+}));
 </script>
 
 <template>
@@ -100,14 +43,14 @@ const ui = computed(() => accordion({
       :disabled="item.disabled"
       :class="ui.item({ class: props.ui?.item })"
     >
-      <AccordionHeader :class="ui.header({ class: props.ui?.header })">
+      <AccordionHeader as="div" :class="ui.header({ class: props.ui?.header })">
         <AccordionTrigger :class="ui.trigger({ class: props.ui?.trigger, disabled: item.disabled })">
           <slot name="leading" :item="item" :index="index" :open="open">
             <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           </slot>
 
-          <span v-if="get(item, props.labelKey as string) || !!slots.default" :class="ui.label({ class: props.ui?.label })">
-            <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey as string) }}</slot>
+          <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: props.ui?.label })">
+            <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</slot>
           </span>
 
           <slot name="trailing" :item="item" :index="index" :open="open">
@@ -116,10 +59,10 @@ const ui = computed(() => accordion({
         </AccordionTrigger>
       </AccordionHeader>
 
-      <AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot as keyof AccordionSlots<T>]) || !!slots.body || (item.slot && !!slots[`${item.slot}-body` as keyof AccordionSlots<T>])" :class="ui.content({ class: props.ui?.content })">
-        <slot :name="((item.slot || 'content') as keyof AccordionSlots<T>)" :item="item" :index="index" :open="open">
+      <AccordionContent v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]" :class="ui.content({ class: props.ui?.content })">
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open">
           <div :class="ui.body({ class: props.ui?.body })">
-            <slot :name="((item.slot ? `${item.slot}-body`: 'body') as keyof AccordionSlots<T>)" :item="item" :index="index" :open="open">
+            <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open">
               {{ item.content }}
             </slot>
           </div>

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

@@ -0,0 +1,91 @@
+import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/accordion';
+import type { DynamicSlots, ComponentConfig } from '../types/utils';
+type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>;
+export interface AccordionItem {
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    slot?: string;
+    content?: string;
+    /** A unique value for the accordion item. Defaults to the index. */
+    value?: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+export interface AccordionProps<T extends AccordionItem = AccordionItem> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    items?: T[];
+    /**
+     * The icon displayed on the right side of the trigger.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: string;
+    class?: any;
+    ui?: Accordion['slots'];
+}
+export interface AccordionEmits extends AccordionRootEmits {
+}
+type SlotProps<T extends AccordionItem> = (props: {
+    item: T;
+    index: number;
+    open: boolean;
+}) => any;
+export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
+    leading: SlotProps<T>;
+    default: SlotProps<T>;
+    trailing: SlotProps<T>;
+    content: SlotProps<T>;
+    body: SlotProps<T>;
+} & DynamicSlots<T, 'body', {
+    index: number;
+    open: boolean;
+}>;
+declare const _default: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<any & AccordionProps<T> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        leading: SlotProps<T>;
+        default: SlotProps<T>;
+        trailing: SlotProps<T>;
+        content: SlotProps<T>;
+        body: SlotProps<T>;
+    } & DynamicSlots<T, "body", {
+        index: number;
+        open: boolean;
+    }>> & {
+        leading: SlotProps<T>;
+        default: SlotProps<T>;
+        trailing: SlotProps<T>;
+        content: SlotProps<T>;
+        body: SlotProps<T>;
+    } & DynamicSlots<T, "body", {
+        index: number;
+        open: boolean;
+    }>;
+    emit: (evt: "update:modelValue", value: string | string[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};