@nuxt/ui 3.3.3 → 4.0.0-alpha.1

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

@@ -1,7 +1,9 @@
 import type { StepperRootProps, StepperRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/stepper';
-import type { DynamicSlots, ComponentConfig } from '../types/utils';
+import type { IconProps } from '../types';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Stepper = ComponentConfig<typeof theme, AppConfig, 'stepper'>;
 export interface StepperItem {
     slot?: string;
@@ -11,7 +13,7 @@ export interface StepperItem {
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     content?: string;
     disabled?: boolean;
     class?: any;
@@ -61,10 +63,10 @@ export type StepperSlots<T extends StepperItem = StepperItem> = {
 } & DynamicSlots<T>;
 declare const _default: <T extends StepperItem>(__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<Pick<Partial<{}> & Omit<{
-        readonly onPrev?: ((value: T) => any) | undefined;
         readonly onNext?: ((value: T) => any) | undefined;
+        readonly onPrev?: ((value: T) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onPrev" | "onNext"> & (StepperProps<T> & {
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onNext" | "onPrev"> & (StepperProps<T> & {
         modelValue?: string | number;
     }) & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
@@ -75,7 +77,7 @@ declare const _default: <T extends StepperItem>(__VLS_props: NonNullable<Awaited
     }>): void;
     attrs: any;
     slots: StepperSlots<T>;
-    emit: (((evt: "prev", value: T) => void) & ((evt: "next", value: T) => void)) & ((evt: "update:modelValue", value: string | number | undefined) => void);
+    emit: (((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void)) & ((evt: "update:modelValue", value: string | number | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Switch.vue

@@ -16,9 +16,9 @@ const props = defineProps({
   color: { type: null, required: false },
   size: { type: null, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: String, required: false },
-  checkedIcon: { type: String, required: false },
-  uncheckedIcon: { type: String, required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  checkedIcon: { type: [String, Object], required: false },
+  uncheckedIcon: { type: [String, Object], required: false },
   label: { type: String, required: false },
   description: { type: String, required: false },
   class: { type: null, required: false },

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

@@ -1,7 +1,8 @@
 import type { SwitchRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/switch';
-import type { ComponentConfig } from '../types/utils';
+import type { IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
 export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
     /**
@@ -24,17 +25,17 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
      * @defaultValue appConfig.ui.icons.loading
      * @IconifyIcon
      */
-    loadingIcon?: string;
+    loadingIcon?: IconProps['name'];
     /**
      * Display an icon when the switch is checked.
      * @IconifyIcon
      */
-    checkedIcon?: string;
+    checkedIcon?: IconProps['name'];
     /**
      * Display an icon when the switch is unchecked.
      * @IconifyIcon
      */
-    uncheckedIcon?: string;
+    uncheckedIcon?: IconProps['name'];
     label?: string;
     description?: string;
     class?: any;

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

@@ -3,7 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core';
 import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
 import theme from '#build/ui/table';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
         class?: {

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

@@ -2,15 +2,16 @@ import type { ComponentPublicInstance } from 'vue';
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tabs';
-import type { AvatarProps, BadgeProps } from '../types';
-import type { DynamicSlots, ComponentConfig } from '../types/utils';
+import type { AvatarProps, BadgeProps, IconProps } from '../types';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>;
 export interface TabsItem {
     label?: string;
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     avatar?: AvatarProps;
     /**
      * Display a badge on the item.

package/dist/runtime/components/Textarea.vue

@@ -36,14 +36,14 @@ const props = defineProps({
   modelModifiers: { type: Object, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: String, required: false },
+  leadingIcon: { type: [String, Object], required: false },
   trailing: { type: Boolean, required: false },
-  trailingIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: String, required: false }
+  loadingIcon: { type: [String, Object], required: false }
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
@@ -69,9 +69,12 @@ function updateInput(value) {
   if (props.modelModifiers?.number) {
     value = looseToNumber(value);
   }
-  if (props.modelModifiers?.nullify) {
+  if (props.modelModifiers?.nullable) {
     value ||= null;
   }
+  if (props.modelModifiers?.optional) {
+    value ||= void 0;
+  }
   modelValue.value = value;
   emitFormInput();
 }

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

@@ -1,7 +1,8 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { ComponentConfig } from '../types/utils';
+import type { ModelModifiers } from '../types/input';
+import type { ComponentConfig } from '../types/tv';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
 export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps {
@@ -38,13 +39,7 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     highlight?: boolean;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: {
-        string?: boolean;
-        number?: boolean;
-        trim?: boolean;
-        lazy?: boolean;
-        nullify?: boolean;
-    };
+    modelModifiers?: ModelModifiers;
     class?: any;
     ui?: Textarea['slots'];
 }

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

@@ -1,13 +1,14 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/timeline';
-import type { AvatarProps } from '../types';
-import type { DynamicSlots, ComponentConfig } from '../types/utils';
+import type { AvatarProps, IconProps } from '../types';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Timeline = ComponentConfig<typeof theme, AppConfig, 'timeline'>;
 export interface TimelineItem {
     date?: string;
     title?: string;
     description?: string;
-    icon?: string;
+    icon?: IconProps['name'];
     avatar?: AvatarProps;
     value?: string | number;
     slot?: string;

package/dist/runtime/components/Toast.vue

@@ -17,12 +17,12 @@ const props = defineProps({
   as: { type: null, required: false },
   title: { type: [String, Object, Function], required: false },
   description: { type: [String, Object, Function], required: false },
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   avatar: { type: Object, required: false },
   color: { type: null, required: false },
   orientation: { type: null, required: false, default: "vertical" },
   close: { type: [Boolean, Object], required: false, default: true },
-  closeIcon: { type: String, required: false },
+  closeIcon: { type: [String, Object], required: false },
   actions: { type: Array, required: false },
   progress: { type: [Boolean, Object], required: false, default: true },
   class: { type: null, required: false },

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

@@ -1,8 +1,9 @@
 import type { ToastRootProps, ToastRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/toast';
-import type { AvatarProps, ButtonProps, ProgressProps } from '../types';
-import type { StringOrVNode, ComponentConfig } from '../types/utils';
+import type { AvatarProps, ButtonProps, IconProps, ProgressProps } from '../types';
+import type { StringOrVNode } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Toast = ComponentConfig<typeof theme, AppConfig, 'toast'>;
 export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
     /**
@@ -15,7 +16,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     avatar?: AvatarProps;
     /**
      * @defaultValue 'primary'
@@ -37,7 +38,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
      * @defaultValue appConfig.ui.icons.close
      * @IconifyIcon
      */
-    closeIcon?: string;
+    closeIcon?: IconProps['name'];
     /**
      * Display a list of actions:
      * - under the title and description when orientation is `vertical`
@@ -70,10 +71,10 @@ export interface ToastSlots {
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToastProps, {
     height: import("vue").Ref<number, number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    resume: () => any;
     pause: () => any;
     "update:open": (value: boolean) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
+    resume: () => any;
     swipeStart: (event: {
         currentTarget: EventTarget & HTMLElement;
     } & Omit<CustomEvent<{
@@ -111,10 +112,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToastProps
         };
     }>, "currentTarget">) => any;
 }, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{
-    onResume?: (() => any) | undefined;
     onPause?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onResume?: (() => any) | undefined;
     onSwipeStart?: ((event: {
         currentTarget: EventTarget & HTMLElement;
     } & Omit<CustomEvent<{

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

@@ -1,7 +1,7 @@
 import type { ToastProviderProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/toaster';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Toaster = ComponentConfig<typeof theme, AppConfig, 'toaster'>;
 export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'> {
     /**
@@ -32,8 +32,8 @@ export interface ToasterSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     progress: boolean;
-    duration: number;
     expand: boolean;
+    duration: number;
     portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
 export default _default;

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

@@ -2,7 +2,8 @@ import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipCo
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tooltip';
 import type { KbdProps } from '../types';
-import type { EmitsToProps, ComponentConfig } from '../types/utils';
+import type { EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Tooltip = ComponentConfig<typeof theme, AppConfig, 'tooltip'>;
 export interface TooltipProps extends TooltipRootProps {
     /** The text content of the tooltip. */

package/dist/runtime/components/Tree.vue

@@ -17,9 +17,9 @@ const props = defineProps({
   size: { type: null, required: false },
   valueKey: { type: null, required: false, default: "value" },
   labelKey: { type: null, required: false, default: "label" },
-  trailingIcon: { type: String, required: false },
-  expandedIcon: { type: String, required: false },
-  collapsedIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  expandedIcon: { type: [String, Object], required: false },
+  collapsedIcon: { type: [String, Object], required: false },
   items: { type: null, required: false },
   modelValue: { type: null, required: false },
   defaultValue: { type: null, required: false },

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

@@ -1,18 +1,20 @@
 import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
-import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, ComponentConfig } from '../types/utils';
+import type { IconProps } from '../types';
+import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>;
 export type TreeItem = {
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     label?: string;
     /**
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     defaultExpanded?: boolean;
     disabled?: boolean;
     value?: string;
@@ -53,19 +55,19 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItem
      * @defaultValue appConfig.ui.icons.chevronDown
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     /**
      * The icon displayed when a parent node is expanded.
      * @defaultValue appConfig.ui.icons.folderOpen
      * @IconifyIcon
      */
-    expandedIcon?: string;
+    expandedIcon?: IconProps['name'];
     /**
      * The icon displayed when a parent node is collapsed.
      * @defaultValue appConfig.ui.icons.folder
      * @IconifyIcon
      */
-    collapsedIcon?: string;
+    collapsedIcon?: IconProps['name'];
     items?: T;
     /** The controlled value of the Tree. Can be bind as `v-model`. */
     modelValue?: GetModelValue<T, VK, M>;

package/dist/runtime/components/User.vue

@@ -0,0 +1,72 @@
+<script>
+import theme from "#build/ui/user";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import UChip from "./Chip.vue";
+import UAvatar from "./Avatar.vue";
+import ULink from "./Link.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  description: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  chip: { type: [Boolean, Object], required: false },
+  size: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  to: { type: null, required: false },
+  target: { type: [String, Object, null], required: false },
+  onClick: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })({
+  size: props.size,
+  orientation: props.orientation,
+  to: !!props.to || !!props.onClick
+}));
+</script>
+
+<template>
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <slot name="avatar">
+      <UChip v-if="chip && avatar" inset v-bind="typeof chip === 'object' ? chip : {}" :size="size">
+        <UAvatar :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+      </UChip>
+      <UAvatar v-else-if="avatar" :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+    </slot>
+
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <ULink
+        v-if="to"
+        :aria-label="name"
+        v-bind="{ to, target, ...$attrs }"
+        class="focus:outline-none peer"
+        tabindex="-1"
+        raw
+      >
+        <span class="absolute inset-0" aria-hidden="true" />
+      </ULink>
+
+      <slot>
+        <p v-if="name || !!slots.name" :class="ui.name({ class: props.ui?.name })">
+          <slot name="name">
+            {{ name }}
+          </slot>
+        </p>
+        <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </p>
+      </slot>
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,47 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/user';
+import type { AvatarProps, ChipProps, LinkProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type User = ComponentConfig<typeof theme, AppConfig, 'user'>;
+export interface UserProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    name?: string;
+    description?: string;
+    avatar?: Omit<AvatarProps, 'size'> & {
+        [key: string]: any;
+    };
+    chip?: boolean | Omit<ChipProps, 'size' | 'inset'>;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: User['variants']['size'];
+    /**
+     * The orientation of the user.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: User['variants']['orientation'];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    onClick?: (event: MouseEvent) => void | Promise<void>;
+    class?: any;
+    ui?: User['slots'];
+}
+export interface UserSlots {
+    avatar(props?: {}): any;
+    name(props?: {}): any;
+    description(props?: {}): any;
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+    orientation: User["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,17 @@
+<script>
+
+</script>
+
+<script setup>
+import UAvatar from "../Avatar.vue";
+defineOptions({ inheritAttrs: false });
+defineProps({
+  light: { type: String, required: true },
+  dark: { type: String, required: true }
+});
+</script>
+
+<template>
+  <UAvatar :src="light" class="dark:hidden" v-bind="$attrs" />
+  <UAvatar :src="dark" class="hidden dark:block" v-bind="$attrs" />
+</template>

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

@@ -0,0 +1,7 @@
+import type { AvatarProps } from '@nuxt/ui';
+export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
+    light: string;
+    dark: string;
+}
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,46 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useColorMode, useAppConfig } from "#imports";
+import { useLocale } from "../../composables/useLocale";
+import UButton from "../Button.vue";
+defineOptions({ inheritAttrs: false });
+defineProps({
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "ghost" }
+});
+defineSlots();
+const { t } = useLocale();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set(_isDark) {
+    colorMode.preference = _isDark ? "dark" : "light";
+  }
+});
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <UButton
+      :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
+      :color="color"
+      :variant="variant"
+      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+      v-bind="$attrs"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <slot name="fallback">
+        <div class="size-8" />
+      </slot>
+    </template>
+  </ClientOnly>
+</template>

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

@@ -0,0 +1,23 @@
+import type { ButtonProps } from '@nuxt/ui';
+export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: ButtonProps["color"];
+    variant: ButtonProps["variant"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    fallback(props?: {}): any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,13 @@
+<script setup>
+import ImageComponent from "#build/ui-image-component";
+defineOptions({ inheritAttrs: false });
+defineProps({
+  dark: { type: String, required: true },
+  light: { type: String, required: true }
+});
+</script>
+
+<template>
+  <component :is="ImageComponent" :src="light" class="dark:hidden" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="dark" class="hidden dark:block" v-bind="$attrs" />
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    dark: string;
+    light: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,51 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useColorMode, useAppConfig } from "#imports";
+import { useLocale } from "../../composables/useLocale";
+import USelectMenu from "../SelectMenu.vue";
+defineOptions({ inheritAttrs: false });
+defineProps({});
+const { t } = useLocale();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+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 },
+  { label: t("colorMode.dark"), value: "dark", icon: appConfig.ui.icons.dark }
+]);
+const preference = computed({
+  get() {
+    return items.value.find((option) => option.value === colorMode.preference) || items.value[0];
+  },
+  set(option) {
+    colorMode.preference = option.value;
+  }
+});
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <USelectMenu
+      v-model="preference"
+      :search-input="false"
+      :icon="preference?.icon"
+      v-bind="$attrs"
+      :items="items"
+    />
+
+    <template #fallback>
+      <USelectMenu
+        :search-input="false"
+        :icon="items[0]?.icon"
+        v-bind="$attrs"
+        :model-value="items[0]"
+        :items="items"
+        disabled
+      />
+    </template>
+  </ClientOnly>
+</template>