@nuxt/ui 4.0.1 → 4.2.0

package/dist/runtime/types/index.js

@@ -40,6 +40,7 @@ export * from "../components/DashboardSidebarToggle.vue";
 export * from "../components/DashboardToolbar.vue";
 export * from "../components/Drawer.vue";
 export * from "../components/DropdownMenu.vue";
+export * from "../components/Empty.vue";
 export * from "../components/Error.vue";
 export * from "../components/FieldGroup.vue";
 export * from "../components/FileUpload.vue";
@@ -50,9 +51,11 @@ export * from "../components/FormField.vue";
 export * from "../components/Header.vue";
 export * from "../components/Icon.vue";
 export * from "../components/Input.vue";
+export * from "../components/InputDate.vue";
 export * from "../components/InputMenu.vue";
 export * from "../components/InputNumber.vue";
 export * from "../components/InputTags.vue";
+export * from "../components/InputTime.vue";
 export * from "../components/Kbd.vue";
 export * from "../components/Link.vue";
 export * from "../components/Main.vue";
@@ -76,10 +79,10 @@ export * from "../components/PageLogos.vue";
 export * from "../components/PageSection.vue";
 export * from "../components/Pagination.vue";
 export * from "../components/PinInput.vue";
+export * from "../components/Popover.vue";
 export * from "../components/PricingPlan.vue";
 export * from "../components/PricingPlans.vue";
 export * from "../components/PricingTable.vue";
-export * from "../components/Popover.vue";
 export * from "../components/Progress.vue";
 export * from "../components/RadioGroup.vue";
 export * from "../components/Select.vue";
@@ -105,6 +108,9 @@ export * from "../components/color-mode/ColorModeImage.vue";
 export * from "../components/color-mode/ColorModeSelect.vue";
 export * from "../components/color-mode/ColorModeSwitch.vue";
 export * from "../components/locale/LocaleSelect.vue";
+export * from "./content.js";
 export * from "./form.js";
 export * from "./locale.js";
+export * from "./prose.js";
 export * from "./tv.js";
+export * from "./utils.js";

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

@@ -1,8 +1,8 @@
-export interface ModelModifiers {
-    string?: boolean;
-    number?: boolean;
-    trim?: boolean;
+export interface ModelModifiers<T = any> {
+    string?: string extends T ? boolean : never;
+    number?: number extends T ? boolean : never;
+    trim?: string extends T ? boolean : never;
     lazy?: boolean;
-    nullable?: boolean;
+    nullable?: null extends T ? boolean : never;
     optional?: boolean;
 }

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

@@ -33,6 +33,11 @@ type ComponentSlots<T extends {
 }> = Id<{
     [K in keyof T['slots']]?: ClassValue;
 }>;
+type ComponentUI<T extends {
+    slots?: Record<string, any>;
+}> = Id<{
+    [K in keyof Required<T['slots']>]: (props?: Record<string, any>) => string;
+}>;
 type GetComponentAppConfig<A, U extends string, K extends string> = A extends Record<U, Record<K, any>> ? A[U][K] : {};
 type ComponentAppConfig<T, A extends Record<string, any>, K extends string, U extends string = 'ui' | 'ui.prose'> = A & (U extends 'ui.prose' ? {
     ui?: {
@@ -56,5 +61,6 @@ export type ComponentConfig<T extends Record<string, any>, A extends Record<stri
     AppConfig: ComponentAppConfig<T, A, K, U>;
     variants: ComponentVariants<T & GetComponentAppConfig<A, U, K>>;
     slots: ComponentSlots<T>;
+    ui: ComponentUI<T>;
 };
 export {};

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

@@ -42,4 +42,6 @@ export type StringOrVNode = string | VNode | (() => VNode);
 export type EmitsToProps<T> = {
     [K in keyof T as `on${Capitalize<string & K>}`]: T[K] extends [...args: infer Args] ? (...args: Args) => void : never;
 };
+export type NonUnion<T> = [T] extends [infer U] ? _NonUnion<U, U> : never;
+type _NonUnion<T, U> = U extends any ? [T] extends [U] ? unknown : never : never;
 export {};

package/dist/runtime/utils/content.d.ts

@@ -3,11 +3,11 @@ type MapContentNavigationItemOptions = {
     labelAttribute?: string;
     deep?: number;
 };
-export declare function mapContentNavigationItem(item: ContentNavigationItem, options?: MapContentNavigationItemOptions, currentDepth?: number): Omit<ContentNavigationItem, "title" | "path"> & {
+export declare function mapContentNavigationItem(item: ContentNavigationItem, options?: MapContentNavigationItemOptions, currentDepth?: number): Omit<ContentNavigationItem, "path" | "title"> & {
     label?: string;
     to?: string;
 };
-export declare function mapContentNavigation(navigation: ContentNavigationItem[], options?: MapContentNavigationItemOptions): (Omit<ContentNavigationItem, "title" | "path"> & {
+export declare function mapContentNavigation(navigation: ContentNavigationItem[], options?: MapContentNavigationItemOptions): (Omit<ContentNavigationItem, "path" | "title"> & {
     label?: string;
     to?: string;
 })[];

package/dist/runtime/utils/link.d.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from '../types';
+export declare const linkKeys: readonly ["active", "activeClass", "ariaCurrentValue", "as", "disabled", "download", "exact", "exactActiveClass", "exactHash", "exactQuery", "external", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "href", "hreflang", "inactiveClass", "media", "noPrefetch", "noRel", "onClick", "ping", "prefetch", "prefetchOn", "prefetchedClass", "referrerpolicy", "rel", "replace", "target", "title", "to", "trailingSlash", "type", "viewTransition"];
 export declare function pickLinkProps(link: LinkProps & {
     [key: string]: any;
 }): import("@vueuse/shared").ReactivePickReturn<LinkProps & {

package/dist/runtime/utils/link.js

@@ -1,34 +1,50 @@
 import { reactivePick } from "@vueuse/core";
 import { isEqual, diff } from "ohash/utils";
+export const linkKeys = [
+  "active",
+  "activeClass",
+  "ariaCurrentValue",
+  "as",
+  "disabled",
+  "download",
+  "exact",
+  "exactActiveClass",
+  "exactHash",
+  "exactQuery",
+  "external",
+  "form",
+  "formaction",
+  "formenctype",
+  "formmethod",
+  "formnovalidate",
+  "formtarget",
+  "href",
+  "hreflang",
+  "inactiveClass",
+  "media",
+  "noPrefetch",
+  "noRel",
+  "onClick",
+  "ping",
+  "prefetch",
+  "prefetchOn",
+  "prefetchedClass",
+  "referrerpolicy",
+  "rel",
+  "replace",
+  "target",
+  "title",
+  "to",
+  "trailingSlash",
+  "type",
+  "viewTransition"
+];
 export function pickLinkProps(link) {
   const keys = Object.keys(link);
   const ariaKeys = keys.filter((key) => key.startsWith("aria-"));
   const dataKeys = keys.filter((key) => key.startsWith("data-"));
   const propsToInclude = [
-    "active",
-    "activeClass",
-    "ariaCurrentValue",
-    "as",
-    "disabled",
-    "exact",
-    "exactActiveClass",
-    "exactHash",
-    "exactQuery",
-    "external",
-    "href",
-    "download",
-    "inactiveClass",
-    "noPrefetch",
-    "noRel",
-    "prefetch",
-    "prefetchedClass",
-    "rel",
-    "replace",
-    "target",
-    "to",
-    "type",
-    "title",
-    "onClick",
+    ...linkKeys,
     ...ariaKeys,
     ...dataKeys
   ];

package/dist/runtime/utils/virtualizer.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Get estimate size for virtualizers that checks each item individually
+ * NOTE: This requires Reka UI to support functions for estimateSize (https://github.com/unovue/reka-ui/pull/2288)
+ * Until then, we check if ANY item has a description and use that for all items
+ */
+export declare function getEstimateSize(items: any[], size: 'xs' | 'sm' | 'md' | 'lg' | 'xl', descriptionKey?: string): number;

package/dist/runtime/utils/virtualizer.js

@@ -0,0 +1,30 @@
+import { get } from "./index.js";
+function hasDescription(item, descriptionKey) {
+  if (typeof item !== "object" || item === null) {
+    return false;
+  }
+  const value = get(item, descriptionKey);
+  return value !== void 0 && value !== null && value !== "";
+}
+function getSize(size, hasDescription2) {
+  if (hasDescription2) {
+    return {
+      xs: 44,
+      sm: 48,
+      md: 52,
+      lg: 56,
+      xl: 60
+    }[size];
+  }
+  return {
+    xs: 24,
+    sm: 28,
+    md: 32,
+    lg: 36,
+    xl: 40
+  }[size];
+}
+export function getEstimateSize(items, size, descriptionKey) {
+  const anyHasDescription = descriptionKey ? items.some((item) => hasDescription(item, descriptionKey)) : false;
+  return getSize(size, anyHasDescription);
+}

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

@@ -1,14 +1,15 @@
-import type { ButtonHTMLAttributes } from 'vue';
-import type { RouterLinkProps, RouteLocationRaw } from 'vue-router';
-interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
+import type { RouterLinkProps } from 'vue-router';
+import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../../types/html';
+export interface LinkProps extends Partial<Omit<RouterLinkProps, 'custom'>>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
     /**
-     * Route Location the link should navigate to when clicked on.
+     * The element or component this component should render as when not a link.
+     * @defaultValue 'button'
      */
-    to?: RouteLocationRaw;
+    as?: any;
     /**
      * An alias for `to`. If used with `to`, `href` will be ignored
      */
-    href?: NuxtLinkProps['to'];
+    href?: LinkProps['to'];
     /**
      * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
      */
@@ -21,36 +22,6 @@ interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
      * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
      */
     rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
-    /**
-     * If set to true, no rel attribute will be added to the link
-     */
-    noRel?: boolean;
-    /**
-     * A class to apply to links that have been prefetched.
-     */
-    prefetchedClass?: string;
-    /**
-     * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
-     */
-    prefetch?: boolean;
-    /**
-     * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
-     */
-    prefetchOn?: 'visibility' | 'interaction' | Partial<{
-        visibility: boolean;
-        interaction: boolean;
-    }>;
-    /**
-     * Escape hatch to disable `prefetch` attribute.
-     */
-    noPrefetch?: boolean;
-}
-export interface LinkProps extends NuxtLinkProps {
-    /**
-     * The element or component this component should render as when not a link.
-     * @defaultValue 'button'
-     */
-    as?: any;
     /**
      * The type of the button when not a link.
      * @defaultValue 'button'
@@ -80,9 +51,9 @@ export interface LinkSlots {
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
     type: "reset" | "submit" | "button";
     as: any;
+    active: boolean;
     activeClass: string;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
-    active: boolean;
     inactiveClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/vue/components/Link.vue

@@ -17,6 +17,10 @@ import ULinkBase from "../../components/LinkBase.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "button" },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
   type: { type: null, required: false, default: "button" },
   disabled: { type: Boolean, required: false },
   active: { type: Boolean, required: false, default: void 0 },
@@ -27,20 +31,11 @@ const props = defineProps({
   custom: { type: Boolean, required: false },
   raw: { type: Boolean, required: false },
   class: { type: null, required: false },
-  to: { type: null, required: false },
-  href: { type: null, required: false },
-  external: { type: Boolean, required: false },
-  target: { type: [String, Object, null], required: false },
-  rel: { type: [String, Object, null], required: false },
-  noRel: { type: Boolean, required: false },
-  prefetchedClass: { type: String, required: false },
-  prefetch: { type: Boolean, required: false },
-  prefetchOn: { type: [String, Object], required: false },
-  noPrefetch: { type: Boolean, required: false },
   activeClass: { type: String, required: false, default: "" },
   exactActiveClass: { type: String, required: false },
   ariaCurrentValue: { type: String, required: false, default: "page" },
   viewTransition: { type: Boolean, required: false },
+  to: { type: null, required: false },
   replace: { type: Boolean, required: false }
 });
 defineSlots();

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

@@ -1,14 +1,15 @@
-import type { ButtonHTMLAttributes } from 'vue';
-import type { RouterLinkProps, RouteLocationRaw } from 'vue-router';
-interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
+import type { RouterLinkProps } from 'vue-router';
+import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../../types/html';
+export interface LinkProps extends Partial<Omit<RouterLinkProps, 'custom'>>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
     /**
-     * Route Location the link should navigate to when clicked on.
+     * The element or component this component should render as when not a link.
+     * @defaultValue 'button'
      */
-    to?: RouteLocationRaw;
+    as?: any;
     /**
      * An alias for `to`. If used with `to`, `href` will be ignored
      */
-    href?: NuxtLinkProps['to'];
+    href?: LinkProps['to'];
     /**
      * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
      */
@@ -21,36 +22,6 @@ interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
      * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
      */
     rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
-    /**
-     * If set to true, no rel attribute will be added to the link
-     */
-    noRel?: boolean;
-    /**
-     * A class to apply to links that have been prefetched.
-     */
-    prefetchedClass?: string;
-    /**
-     * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
-     */
-    prefetch?: boolean;
-    /**
-     * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
-     */
-    prefetchOn?: 'visibility' | 'interaction' | Partial<{
-        visibility: boolean;
-        interaction: boolean;
-    }>;
-    /**
-     * Escape hatch to disable `prefetch` attribute.
-     */
-    noPrefetch?: boolean;
-}
-export interface LinkProps extends NuxtLinkProps {
-    /**
-     * The element or component this component should render as when not a link.
-     * @defaultValue 'button'
-     */
-    as?: any;
     /**
      * The type of the button when not a link.
      * @defaultValue 'button'
@@ -80,9 +51,9 @@ export interface LinkSlots {
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
     type: "reset" | "submit" | "button";
     as: any;
+    active: boolean;
     activeClass: string;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
-    active: boolean;
     inactiveClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/vue/components/color-mode/ColorModeSelect.d.vue.ts

@@ -1,6 +1,8 @@
-import type { SelectMenuProps } from '../../../types';
-export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
+import type { SelectMenuProps, SelectMenuItem } from '../../../types';
+export interface ColorModeSelectProps extends Omit<SelectMenuProps<SelectMenuItem[]>, 'icon' | 'items' | 'modelValue'> {
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {
+    searchInput: boolean | import("../../../types").InputProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/vue/components/color-mode/ColorModeSelect.vue

@@ -4,14 +4,56 @@
 
 <script setup>
 import { computed } from "vue";
+import { useForwardProps } from "reka-ui";
 import { useAppConfig, useColorMode } from "#imports";
 import { useLocale } from "../../../composables/useLocale";
 import USelectMenu from "../../../components/SelectMenu.vue";
 defineOptions({ inheritAttrs: false });
-defineProps({});
+const props = defineProps({
+  id: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  searchInput: { type: [Boolean, Object], required: false, default: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  selectedIcon: { type: [String, Object], required: false },
+  content: { type: Object, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true },
+  virtualize: { type: [Boolean, Object], required: false },
+  valueKey: { type: null, required: false },
+  labelKey: { type: null, required: false },
+  descriptionKey: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  createItem: { type: [Boolean, String, Object], required: false },
+  filterFields: { type: Array, required: false },
+  ignoreFilter: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  resetSearchTermOnBlur: { type: Boolean, required: false },
+  resetSearchTermOnSelect: { type: Boolean, required: false },
+  highlightOnHover: { type: Boolean, required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false }
+});
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
+const selectMenuProps = useForwardProps(props);
 const items = computed(() => [
   { label: t("colorMode.system"), value: "system", icon: appConfig.ui.icons.system },
   { label: t("colorMode.light"), value: "light", icon: appConfig.ui.icons.light },
@@ -31,8 +73,7 @@ const preference = computed({
   <USelectMenu
     v-model="preference"
     :icon="preference?.icon"
-    :search-input="false"
-    v-bind="$attrs"
+    v-bind="{ ...selectMenuProps, ...$attrs }"
     :items="items"
   />
 </template>

package/dist/runtime/vue/components/color-mode/ColorModeSelect.vue.d.ts

@@ -1,6 +1,8 @@
-import type { SelectMenuProps } from '../../../types';
-export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
+import type { SelectMenuProps, SelectMenuItem } from '../../../types';
+export interface ColorModeSelectProps extends Omit<SelectMenuProps<SelectMenuItem[]>, 'icon' | 'items' | 'modelValue'> {
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {
+    searchInput: boolean | import("../../../types").InputProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/vue/components/color-mode/ColorModeSwitch.d.vue.ts

@@ -1,5 +1,5 @@
 import type { SwitchProps } from '../../../types';
-export interface ColorModeSwitchProps extends /** @vue-ignore */ Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
+export interface ColorModeSwitchProps extends Omit<SwitchProps, 'checkedIcon' | 'uncheckedIcon' | 'modelValue'> {
 }
 declare const __VLS_export: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/vue/components/color-mode/ColorModeSwitch.vue

@@ -4,14 +4,32 @@
 
 <script setup>
 import { computed } from "vue";
+import { useForwardProps } from "reka-ui";
 import { useAppConfig, useColorMode } from "#imports";
 import { useLocale } from "../../../composables/useLocale";
 import USwitch from "../../../components/Switch.vue";
 defineOptions({ inheritAttrs: false });
-defineProps({});
+const props = defineProps({
+  as: { type: null, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  value: { type: String, required: false },
+  defaultValue: { type: Boolean, required: false }
+});
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
+const switchProps = useForwardProps(props);
 const isDark = computed({
   get() {
     return colorMode.value === "dark";
@@ -27,7 +45,10 @@ const isDark = computed({
     v-model="isDark"
     :checked-icon="appConfig.ui.icons.dark"
     :unchecked-icon="appConfig.ui.icons.light"
-    :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
-    v-bind="$attrs"
+    v-bind="{
+  ...switchProps,
+  'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
+  ...$attrs
+}"
   />
 </template>

package/dist/runtime/vue/components/color-mode/ColorModeSwitch.vue.d.ts

@@ -1,5 +1,5 @@
 import type { SwitchProps } from '../../../types';
-export interface ColorModeSwitchProps extends /** @vue-ignore */ Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
+export interface ColorModeSwitchProps extends Omit<SwitchProps, 'checkedIcon' | 'uncheckedIcon' | 'modelValue'> {
 }
 declare const __VLS_export: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/vue/stubs.d.ts

@@ -28,7 +28,7 @@ export declare const useState: <T>(key: string, init: () => T) => Ref<T>;
 export declare function useNuxtApp(): {
     isHydrating: boolean;
     payload: {
-        serverRendered: boolean;
+        serverRendered: any;
     };
     hooks: import("hookable").Hookable<Record<string, any>, string>;
     hook: <NameT extends string>(name: NameT, function_: any, options?: {

package/dist/runtime/vue/stubs.js

@@ -57,7 +57,7 @@ const hooks = createHooks();
 export function useNuxtApp() {
   return {
     isHydrating: true,
-    payload: { serverRendered: false },
+    payload: { serverRendered: import.meta.env.SSR || false },
     hooks,
     hook: hooks.hook
   };