@nuxt/ui 2.18.2 → 2.18.4

package/dist/runtime/components/forms/Toggle.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ToggleSize, ToggleColor, Strategy } from '../../types.js';
+import type { ToggleSize, ToggleColor, Strategy } from '../../types/index.js';
 declare const config: {
     base: string;
     rounded: string;
@@ -249,9 +249,9 @@ declare const _default: import("vue").DefineComponent<{
     name: string;
     size: ToggleSize;
     class: any;
+    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     disabled: boolean;
     ui: {};
-    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     id: string;
     modelValue: boolean;
     loading: boolean;

package/dist/runtime/components/layout/Card.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 declare const config: {
     base: string;
     background: string;

package/dist/runtime/components/layout/Container.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 declare const config: {
     base: string;
     padding: string;

package/dist/runtime/components/layout/Divider.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Avatar, DividerSize, Strategy } from '../../types.js';
+import type { Avatar, DividerSize, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: {
         base: string;
@@ -189,10 +189,10 @@ declare const _default: import("vue").DefineComponent<{
     size: DividerSize;
     type: "solid" | "dotted" | "dashed";
     class: any;
-    ui: {};
     avatar: any;
     label: string;
-    icon: string;
     orientation: "horizontal" | "vertical";
+    ui: {};
+    icon: string;
 }, {}>;
 export default _default;

package/dist/runtime/components/layout/Skeleton.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 declare const config: {
     base: string;
     background: string;

package/dist/runtime/components/navigation/Breadcrumb.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import { twJoin } from 'tailwind-merge';
-import type { BreadcrumbLink, Strategy } from '../../types.js';
+import type { BreadcrumbLink, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     ol: string;

package/dist/runtime/components/navigation/CommandPalette.vue.d.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
-import type { Group, Command, Button, Strategy } from '../../types.js';
+import type { Group, Command, Button, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;

package/dist/runtime/components/navigation/CommandPaletteGroup.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Command, Group } from '../../types.js';
+import type { Command, Group } from '../../types/index.js';
 import { commandPalette } from '#ui/ui.config';
 declare const _default: import("vue").DefineComponent<{
     group: {

package/dist/runtime/components/navigation/HorizontalNavigation.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import { twJoin } from 'tailwind-merge';
-import type { HorizontalNavigationLink, Strategy } from '../../types.js';
+import type { HorizontalNavigationLink, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;

package/dist/runtime/components/navigation/Pagination.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { RouteLocationRaw } from '#vue-router';
-import type { Button, ButtonSize, Strategy } from '../../types.js';
+import type { Button, ButtonSize, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     base: string;

package/dist/runtime/components/navigation/Tabs.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { toRef, ref, watch, onMounted, defineComponent } from "vue";
+import { toRef, ref, watch, onMounted, defineComponent, nextTick } from "vue";
 import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel, provideUseId } from "@headlessui/vue";
 import { useResizeObserver } from "@vueuse/core";
 import UIcon from "../elements/Icon.vue";
@@ -143,7 +143,10 @@ export default defineComponent({
       selectedIndex.value = value;
       calcMarkerSize(selectedIndex.value);
     });
-    onMounted(() => calcMarkerSize(selectedIndex.value));
+    onMounted(async () => {
+      await nextTick();
+      calcMarkerSize(selectedIndex.value);
+    });
     provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { TabItem, Strategy } from '../../types.js';
+import type { TabItem, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;
@@ -154,9 +154,9 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
     class: any;
-    ui: {};
     content: boolean;
     orientation: "horizontal" | "vertical";
+    ui: {};
     modelValue: number;
     unmount: boolean;
     items: TabItem[];

package/dist/runtime/components/navigation/VerticalNavigation.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import { twJoin } from 'tailwind-merge';
-import type { VerticalNavigationLink, Strategy } from '../../types.js';
+import type { VerticalNavigationLink, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     base: string;

package/dist/runtime/components/overlays/ContextMenu.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType, Ref } from 'vue';
-import type { PopperOptions, Strategy } from '../../types.js';
+import type { PopperOptions, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;
@@ -119,8 +119,8 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
     class: any;
-    ui: {};
     popper: PopperOptions;
+    ui: {};
     modelValue: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/overlays/Modal.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     inner: string;
@@ -155,8 +155,8 @@ declare const _default: import("vue").DefineComponent<{
     "onAfter-leave"?: (...args: any[]) => any;
 }, {
     class: any;
-    ui: {};
     transition: boolean;
+    ui: {};
     appear: boolean;
     overlay: boolean;
     preventClose: boolean;

package/dist/runtime/components/overlays/Notification.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types.js';
+import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;
@@ -221,12 +221,12 @@ declare const _default: import("vue").DefineComponent<{
     onClose?: (...args: any[]) => any;
 }, {
     class: any;
-    ui: {};
-    color: NotificationColor;
     avatar: any;
-    icon: string;
+    color: NotificationColor;
     title: string;
+    ui: {};
     description: string;
+    icon: string;
     closeButton: Button;
     timeout: number;
     actions: NotificationAction[];

package/dist/runtime/components/overlays/Notifications.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Notification, Strategy } from '../../types.js';
+import type { Notification, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     position: string;
@@ -33,13 +33,13 @@ declare const _default: import("vue").DefineComponent<{
             title?: string;
             description?: string;
             icon?: string;
-            avatar?: import("../../types").Avatar;
-            closeButton?: import("../../types").Button;
+            avatar?: import("../../types/avatar").Avatar;
+            closeButton?: import("../../types/button").Button;
             timeout?: number;
-            actions?: import("../../types").NotificationAction[];
+            actions?: import("../../types/notification").NotificationAction[];
             click?: (...args: any[]) => void;
             callback?: (...args: any[]) => void;
-            color?: import("../../types").NotificationColor;
+            color?: import("../../types/notification").NotificationColor;
             ui?: any;
         };
         remove: (id: string) => void;

package/dist/runtime/components/overlays/Popover.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { PopperOptions, Strategy } from '../../types.js';
+import type { PopperOptions, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;
@@ -209,9 +209,9 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mode: "click" | "hover";
     class: any;
+    popper: PopperOptions;
     disabled: boolean;
     ui: {};
-    popper: PopperOptions;
     overlay: boolean;
     open: boolean;
     openDelay: number;

package/dist/runtime/components/overlays/Slideover.vue

@@ -149,4 +149,4 @@ export default defineComponent({
     };
   }
 });
-</script>
+</script>

package/dist/runtime/components/overlays/Slideover.vue.d.ts

@@ -1,5 +1,5 @@
 import type { WritableComputedRef, PropType } from 'vue';
-import type { Strategy } from '../../types.js';
+import type { Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     overlay: {
@@ -156,12 +156,12 @@ declare const _default: import("vue").DefineComponent<{
     "onAfter-leave"?: (...args: any[]) => any;
 }, {
     class: any;
-    ui: {};
     transition: boolean;
+    ui: {};
     appear: boolean;
     overlay: boolean;
     preventClose: boolean;
-    side: "right" | "left" | "top" | "bottom";
+    side: "bottom" | "left" | "right" | "top";
     modelValue: boolean;
 }, {}>;
 export default _default;

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { PopperOptions, Strategy } from '../../types.js';
+import type { PopperOptions, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;
@@ -154,12 +154,12 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     class: any;
-    ui: {};
-    shortcuts: string[];
     popper: PopperOptions;
     text: string;
+    ui: {};
     openDelay: number;
     closeDelay: number;
+    shortcuts: string[];
     prevent: boolean;
 }, {}>;
 export default _default;

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

@@ -9,7 +9,7 @@ type InputProps = {
 export declare const useFormGroup: (inputProps?: InputProps, config?: any) => {
     inputId: import("vue").ComputedRef<string>;
     name: import("vue").ComputedRef<string>;
-    size: import("vue").ComputedRef<string | number | symbol>;
+    size: import("vue").ComputedRef<any>;
     color: import("vue").ComputedRef<string>;
     emitFormBlur: () => void;
     emitFormInput: import("@vueuse/shared").PromisifyFn<() => void>;

package/dist/runtime/composables/useFormGroup.js

@@ -1,19 +1,15 @@
 import { inject, ref, computed } from "vue";
 import { useDebounceFn } from "@vueuse/core";
-import { mergeConfig } from "../utils/index.js";
-import appConfig from "#build/app.config";
-import { formGroup } from "#ui/ui.config";
-const formGroupConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup);
 export const useFormGroup = (inputProps, config) => {
   const formBus = inject("form-events", void 0);
-  const formGroup2 = inject("form-group", void 0);
+  const formGroup = inject("form-group", void 0);
   const formInputs = inject("form-inputs", void 0);
-  if (formGroup2) {
+  if (formGroup) {
     if (inputProps?.id) {
-      formGroup2.inputId.value = inputProps?.id;
+      formGroup.inputId.value = inputProps?.id;
     }
     if (formInputs) {
-      formInputs.value[formGroup2.name.value] = formGroup2.inputId.value;
+      formInputs.value[formGroup.name.value] = formGroup.inputId.value;
     }
   }
   const blurred = ref(false);
@@ -23,25 +19,25 @@ export const useFormGroup = (inputProps, config) => {
     }
   }
   function emitFormBlur() {
-    emitFormEvent("blur", formGroup2?.name.value);
+    emitFormEvent("blur", formGroup?.name.value);
     blurred.value = true;
   }
   function emitFormChange() {
-    emitFormEvent("change", formGroup2?.name.value);
+    emitFormEvent("change", formGroup?.name.value);
   }
   const emitFormInput = useDebounceFn(() => {
-    if (blurred.value || formGroup2?.eagerValidation.value) {
-      emitFormEvent("input", formGroup2?.name.value);
+    if (blurred.value || formGroup?.eagerValidation.value) {
+      emitFormEvent("input", formGroup?.name.value);
     }
   }, 300);
   return {
-    inputId: computed(() => inputProps?.id ?? formGroup2?.inputId.value),
-    name: computed(() => inputProps?.name ?? formGroup2?.name.value),
+    inputId: computed(() => inputProps?.id ?? formGroup?.inputId.value),
+    name: computed(() => inputProps?.name ?? formGroup?.name.value),
     size: computed(() => {
-      const formGroupSize = config.size[formGroup2?.size.value] ? formGroup2?.size.value : null;
-      return inputProps?.size ?? formGroupSize ?? formGroupConfig?.default?.size;
+      const formGroupSize = config.size[formGroup?.size.value] ? formGroup?.size.value : null;
+      return inputProps?.size ?? formGroupSize ?? config.default?.size;
     }),
-    color: computed(() => formGroup2?.error?.value ? "red" : inputProps?.color),
+    color: computed(() => formGroup?.error?.value ? "red" : inputProps?.color),
     emitFormBlur,
     emitFormInput,
     emitFormChange

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

@@ -197,7 +197,7 @@ export declare function usePopper({ locked, overflowPadding, offsetDistance, off
                     y: number;
                     x: number;
                 };
-                right?: {
+                bottom?: {
                     y: number;
                     x: number;
                 };
@@ -205,23 +205,23 @@ export declare function usePopper({ locked, overflowPadding, offsetDistance, off
                     y: number;
                     x: number;
                 };
-                auto?: {
+                right?: {
                     y: number;
                     x: number;
                 };
-                "auto-start"?: {
+                top?: {
                     y: number;
                     x: number;
                 };
-                "auto-end"?: {
+                auto?: {
                     y: number;
                     x: number;
                 };
-                top?: {
+                "auto-start"?: {
                     y: number;
                     x: number;
                 };
-                bottom?: {
+                "auto-end"?: {
                     y: number;
                     x: number;
                 };

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

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import type { Strategy } from '../types.js';
+import type { Strategy } from '../types/index.js';
 export declare const useUI: <T>(key: any, $ui?: Ref<(Partial<T> & {
     strategy?: Strategy;
 }) | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {

package/dist/runtime/plugins/colors.js

@@ -1,13 +1,13 @@
 import { computed } from "vue";
-import { hexToRgb } from "../utils/index.js";
+import { get, hexToRgb } from "../utils/index.js";
 import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from "#imports";
 import colors from "#tailwind-config/theme/colors";
 export default defineNuxtPlugin(() => {
   const appConfig = useAppConfig();
   const nuxtApp = useNuxtApp();
   const root = computed(() => {
-    const primary = colors[appConfig.ui.primary];
-    const gray = colors[appConfig.ui.gray];
+    const primary = get(colors, appConfig.ui.primary);
+    const gray = get(colors, appConfig.ui.gray);
     if (!primary) {
       console.warn(`[@nuxt/ui] Primary color '${appConfig.ui.primary}' not found in Tailwind config`);
     }

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

@@ -1,8 +1,9 @@
-import type { Button } from './button.js';
+import type { Button } from './button'
+
 export interface AccordionItem extends Button {
-    slot?: string;
-    disabled?: boolean;
-    content?: string;
-    defaultOpen?: boolean;
-    closeOthers?: boolean;
+  slot?: string
+  disabled?: boolean
+  content?: string
+  defaultOpen?: boolean
+  closeOthers?: boolean
 }

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

@@ -1,10 +1,12 @@
-import { alert } from '../ui.config.js';
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.';
-import type { Button } from './button.js';
-import colors from '#ui-colors';
-import type { AppConfig } from 'nuxt/schema';
-export type AlertColor = keyof typeof alert.color | ExtractDeepKey<AppConfig, ['ui', 'alert', 'color']> | typeof colors[number];
-export type AlertVariant = keyof typeof alert.variant | ExtractDeepKey<AppConfig, ['ui', 'alert', 'variant']> | NestedKeyOf<typeof alert.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'alert', 'color']>>;
+import { alert } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type { Button } from './button'
+import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
+
+export type AlertColor = keyof typeof alert.color | ExtractDeepKey<AppConfig, ['ui', 'alert', 'color']> | typeof colors[number]
+export type AlertVariant = keyof typeof alert.variant | ExtractDeepKey<AppConfig, ['ui', 'alert', 'variant']> | NestedKeyOf<typeof alert.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'alert', 'color']>>
+
 export interface AlertAction extends Button {
-    click?: (...args: any[]) => void;
+  click?: (...args: any[]) => void
 }

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

@@ -1,15 +1,17 @@
-import { avatar } from '../ui.config.js';
-import type { ExtractDeepKey } from '.';
-import colors from '#ui-colors';
-import type { AppConfig } from 'nuxt/schema';
-export type AvatarSize = keyof typeof avatar.size | ExtractDeepKey<AppConfig, ['ui', 'avatar', 'size']>;
-export type AvatarChipColor = 'gray' | typeof colors[number];
-export type AvatarChipPosition = keyof typeof avatar.chip.position;
+import { avatar } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
+
+export type AvatarSize = keyof typeof avatar.size | ExtractDeepKey<AppConfig, ['ui', 'avatar', 'size']>
+export type AvatarChipColor = 'gray' | typeof colors[number]
+export type AvatarChipPosition = keyof typeof avatar.chip.position
+
 export interface Avatar {
-    src?: string | boolean;
-    alt?: string;
-    text?: string;
-    size?: AvatarSize;
-    chipColor?: AvatarChipColor;
-    chipPosition?: AvatarChipPosition;
+  src?: string | boolean
+  alt?: string
+  text?: string
+  size?: AvatarSize
+  chipColor?: AvatarChipColor
+  chipPosition?: AvatarChipPosition
 }

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

@@ -1,13 +1,15 @@
-import { badge } from '../ui.config.js';
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.';
-import colors from '#ui-colors';
-import type { AppConfig } from 'nuxt/schema';
-export type BadgeSize = keyof typeof badge.size | ExtractDeepKey<AppConfig, ['ui', 'badge', 'size']>;
-export type BadgeColor = keyof typeof badge.color | ExtractDeepKey<AppConfig, ['ui', 'badge', 'color']> | typeof colors[number];
-export type BadgeVariant = keyof typeof badge.variant | ExtractDeepKey<AppConfig, ['ui', 'badge', 'variant']> | NestedKeyOf<typeof badge.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'badge', 'color']>>;
+import { badge } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
+
+export type BadgeSize = keyof typeof badge.size | ExtractDeepKey<AppConfig, ['ui', 'badge', 'size']>
+export type BadgeColor = keyof typeof badge.color | ExtractDeepKey<AppConfig, ['ui', 'badge', 'color']> | typeof colors[number]
+export type BadgeVariant = keyof typeof badge.variant | ExtractDeepKey<AppConfig, ['ui', 'badge', 'variant']> | NestedKeyOf<typeof badge.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'badge', 'color']>>
+
 export interface Badge {
-    label?: string;
-    size?: BadgeSize;
-    color?: BadgeColor;
-    variant?: BadgeVariant;
+  label?: string
+  size?: BadgeSize
+  color?: BadgeColor
+  variant?: BadgeVariant
 }

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

@@ -1,8 +1,10 @@
-import type { Link } from './link.js';
+import type { Link } from './link'
+
 export interface BreadcrumbLink extends Link {
-    label: string;
-    labelClass?: string;
-    icon?: string;
-    iconClass?: string;
-    [key: string]: any;
+  label: string
+  labelClass?: string
+  icon?: string
+  iconClass?: string
+  // FIXME: This is a workaround for `link.to` not being resolved although it extends `NuxtLinkProps`
+  [key: string]: any
 }

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

@@ -1,29 +1,31 @@
-import type { Link } from './link.js';
-import { button } from '../ui.config.js';
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.';
-import colors from '#ui-colors';
-import type { AppConfig } from 'nuxt/schema';
-export type ButtonSize = keyof typeof button.size | ExtractDeepKey<AppConfig, ['ui', 'button', 'size']>;
-export type ButtonColor = keyof typeof button.color | ExtractDeepKey<AppConfig, ['ui', 'button', 'color']> | typeof colors[number];
-export type ButtonVariant = keyof typeof button.variant | ExtractDeepKey<AppConfig, ['ui', 'button', 'variant']> | NestedKeyOf<typeof button.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'button', 'color']>>;
+import type { Link } from './link'
+import { button } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
+
+export type ButtonSize = keyof typeof button.size | ExtractDeepKey<AppConfig, ['ui', 'button', 'size']>
+export type ButtonColor = keyof typeof button.color | ExtractDeepKey<AppConfig, ['ui', 'button', 'color']> | typeof colors[number]
+export type ButtonVariant = keyof typeof button.variant | ExtractDeepKey<AppConfig, ['ui', 'button', 'variant']> | NestedKeyOf<typeof button.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'button', 'color']>>
+
 export interface Button extends Link {
-    type?: string;
-    block?: boolean;
-    label?: string;
-    loading?: boolean;
-    disabled?: boolean;
-    padded?: boolean;
-    size?: ButtonSize;
-    color?: ButtonColor;
-    variant?: ButtonVariant;
-    icon?: string;
-    loadingIcon?: string;
-    leadingIcon?: string;
-    trailingIcon?: string;
-    trailing?: boolean;
-    leading?: boolean;
-    to?: string | object;
-    target?: string;
-    square?: boolean;
-    truncate?: boolean;
+  type?: string
+  block?: boolean
+  label?: string
+  loading?: boolean
+  disabled?: boolean
+  padded?: boolean
+  size?: ButtonSize
+  color?: ButtonColor
+  variant?: ButtonVariant
+  icon?: string
+  loadingIcon?: string
+  leadingIcon?: string
+  trailingIcon?: string
+  trailing?: boolean
+  leading?: boolean
+  to?: string | object
+  target?: string
+  square?: boolean
+  truncate?: boolean
 }