@nuxt/ui 2.11.1 → 2.12.0

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

@@ -5,19 +5,19 @@
         <ULink
           as="span"
           :class="[ui.base, index === links.length - 1 ? ui.active : !!link.to ? ui.inactive : '']"
-          v-bind="omit(link, ['label', 'icon', 'iconClass'])"
+          v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass'])"
           :aria-current="index === links.length - 1 ? 'page' : undefined"
         >
           <slot name="icon" :link="link" :index="index" :is-active="index === links.length - 1">
             <UIcon
               v-if="link.icon"
               :name="link.icon"
-              :class="[ui.icon.base, index === links.length - 1 ? ui.icon.active : !!link.to ? ui.icon.inactive : '', link.iconClass]"
+              :class="twMerge(twJoin(ui.icon.base, index === links.length - 1 ? ui.icon.active : !!link.to ? ui.icon.inactive : ''), link.iconClass)"
             />
           </slot>
 
           <slot :link="link" :index="index" :is-active="index === links.length - 1">
-            {{ link.label }}
+            <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">{{ link.label }}</span>
           </slot>
         </ULink>
 
@@ -34,6 +34,7 @@
 
 <script>
 import { defineComponent, toRef } from "vue";
+import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import ULink from "../elements/Link.vue";
 import { useUI } from "../../composables/useUI";
@@ -71,7 +72,9 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      omit
+      omit,
+      twMerge,
+      twJoin
     };
   }
 });

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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import { twJoin } from 'tailwind-merge';
 import { omit } from '../../utils';
 import type { BreadcrumbLink } from '../../types';
 declare const _default: import("vue").DefineComponent<{
@@ -24,6 +25,8 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     omit: typeof omit;
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+    twJoin: typeof twJoin;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     links: {
         type: PropType<BreadcrumbLink[]>;

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

@@ -220,8 +220,8 @@ declare const _default: import("vue").DefineComponent<{
     loadingIcon: string;
     nullable: boolean;
     selectedIcon: string;
-    searchable: boolean;
     debounce: number;
+    searchable: boolean;
     groups: Group[];
     groupAttribute: string;
     commandAttribute: string;

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

@@ -4,7 +4,7 @@
       <UButton
         v-if="firstButton && showFirst"
         :size="size"
-        :disabled="!canGoFirstOrPrev"
+        :disabled="!canGoFirstOrPrev || disabled"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }"
         :ui="{ rounded: '' }"
@@ -17,7 +17,7 @@
       <UButton
         v-if="prevButton"
         :size="size"
-        :disabled="!canGoFirstOrPrev"
+        :disabled="!canGoFirstOrPrev || disabled"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }"
         :ui="{ rounded: '' }"
@@ -30,6 +30,7 @@
       v-for="(page, index) of displayedPages"
       :key="`${page}-${index}`"
       :size="size"
+      :disabled="disabled"
       :label="`${page}`"
       v-bind="page === currentPage ? { ...(ui.default.activeButton || {}), ...activeButton } : { ...(ui.default.inactiveButton || {}), ...inactiveButton }"
       :class="[{ 'pointer-events-none': typeof page === 'string', 'z-[1]': page === currentPage }, ui.base, ui.rounded]"
@@ -41,7 +42,7 @@
       <UButton
         v-if="nextButton"
         :size="size"
-        :disabled="!canGoLastOrNext"
+        :disabled="!canGoLastOrNext || disabled"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }"
         :ui="{ rounded: '' }"
@@ -54,7 +55,7 @@
       <UButton
         v-if="lastButton && showLast"
         :size="size"
-        :disabled="!canGoLastOrNext"
+        :disabled="!canGoLastOrNext || disabled"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }"
         :ui="{ rounded: '' }"
@@ -99,6 +100,10 @@ export default defineComponent({
         return value >= 5 && value < Number.MAX_VALUE;
       }
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     size: {
       type: String,
       default: () => config.default.size,

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

@@ -18,6 +18,10 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
         validate(value: any): boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<ButtonSize>;
         default: () => any;
@@ -100,6 +104,10 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
         validate(value: any): boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<ButtonSize>;
         default: () => any;
@@ -155,6 +163,7 @@ declare const _default: import("vue").DefineComponent<{
     size: ButtonSize;
     ui: any;
     class: any;
+    disabled: boolean;
     max: number;
     divider: string;
     pageCount: number;

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

@@ -1,47 +1,57 @@
 <template>
   <nav :class="ui.wrapper" v-bind="attrs">
-    <ULink
-      v-for="(link, index) of links"
-      v-slot="{ isActive }"
-      :key="index"
-      v-bind="omit(link, ['label', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
-      :class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
-      :active-class="ui.active"
-      :inactive-class="ui.inactive"
-      @click="link.click"
-      @keyup.enter="$event.target.blur()"
-    >
-      <slot name="avatar" :link="link" :is-active="isActive">
-        <UAvatar
-          v-if="link.avatar"
-          v-bind="{ size: ui.avatar.size, ...link.avatar }"
-          :class="[ui.avatar.base]"
-        />
-      </slot>
-      <slot name="icon" :link="link" :is-active="isActive">
-        <UIcon
-          v-if="link.icon"
-          :name="link.icon"
-          :class="[ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive, link.iconClass]"
-        />
-      </slot>
-      <slot :link="link" :is-active="isActive">
-        <span v-if="link.label" :class="ui.label">{{ link.label }}</span>
-      </slot>
-      <slot name="badge" :link="link" :is-active="isActive">
-        <span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
-          {{ link.badge }}
-        </span>
-      </slot>
-    </ULink>
+    <ul v-for="(section, sectionIndex) of linkSections" :key="`linkSection${sectionIndex}`">
+      <li v-for="(link, index) of section" :key="`linkSection${sectionIndex}-${index}`">
+        <ULink
+          v-slot="{ isActive }"
+          v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
+          :class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
+          :active-class="ui.active"
+          :inactive-class="ui.inactive"
+          @click="link.click"
+          @keyup.enter="$event.target.blur()"
+        >
+          <slot name="avatar" :link="link" :is-active="isActive">
+            <UAvatar
+              v-if="link.avatar"
+              v-bind="{ size: ui.avatar.size, ...link.avatar }"
+              :class="[ui.avatar.base]"
+            />
+          </slot>
+          <slot name="icon" :link="link" :is-active="isActive">
+            <UIcon
+              v-if="link.icon"
+              :name="link.icon"
+              :class="twMerge(twJoin(ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive), link.iconClass)"
+            />
+          </slot>
+          <slot :link="link" :is-active="isActive">
+            <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">
+              <span v-if="isActive" class="sr-only">
+                Current page:
+              </span>
+              {{ link.label }}
+            </span>
+          </slot>
+          <slot name="badge" :link="link" :is-active="isActive">
+            <span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
+              {{ link.badge }}
+            </span>
+          </slot>
+        </ULink>
+      </li>
+      <UDivider v-if="sectionIndex < linkSections.length - 1" :ui="ui.divider" />
+    </ul>
   </nav>
 </template>
 
 <script>
-import { toRef, defineComponent } from "vue";
+import { toRef, defineComponent, computed } from "vue";
+import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import ULink from "../elements/Link.vue";
+import UDivider from "../layout/Divider.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig, omit } from "../../utils";
 import appConfig from "#build/app.config";
@@ -51,7 +61,8 @@ export default defineComponent({
   components: {
     UIcon,
     UAvatar,
-    ULink
+    ULink,
+    UDivider
   },
   inheritAttrs: false,
   props: {
@@ -70,11 +81,17 @@ export default defineComponent({
   },
   setup(props) {
     const { ui, attrs } = useUI("verticalNavigation", toRef(props, "ui"), config, toRef(props, "class"));
+    const linkSections = computed(() => {
+      return Array.isArray(props.links[0]) ? props.links : [props.links];
+    });
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      omit
+      omit,
+      linkSections,
+      twMerge,
+      twJoin
     };
   }
 });

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

@@ -1,9 +1,10 @@
 import type { PropType } from 'vue';
+import { twJoin } from 'tailwind-merge';
 import { omit } from '../../utils';
 import type { VerticalNavigationLink } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     links: {
-        type: PropType<VerticalNavigationLink[]>;
+        type: PropType<VerticalNavigationLink[] | VerticalNavigationLink[][]>;
         default: () => never[];
     };
     class: {
@@ -20,9 +21,12 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     omit: typeof omit;
+    linkSections: import("vue").ComputedRef<VerticalNavigationLink[][]>;
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+    twJoin: typeof twJoin;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     links: {
-        type: PropType<VerticalNavigationLink[]>;
+        type: PropType<VerticalNavigationLink[] | VerticalNavigationLink[][]>;
         default: () => never[];
     };
     class: {
@@ -36,6 +40,6 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     ui: any;
     class: any;
-    links: VerticalNavigationLink[];
+    links: VerticalNavigationLink[] | VerticalNavigationLink[][];
 }, {}>;
 export default _default;

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

@@ -78,11 +78,11 @@ declare const _default: import("vue").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
+    transition: boolean;
     class: any;
     modelValue: boolean;
     appear: boolean;
     overlay: boolean;
-    transition: boolean;
     preventClose: boolean;
     fullscreen: boolean;
 }, {}>;

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

@@ -1,5 +1,6 @@
 <template>
-  <HPopover ref="popover" v-slot="{ open: headlessOpen, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
+  <!-- eslint-disable-next-line vue/no-template-shadow -->
+  <HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
@@ -8,7 +9,7 @@
       role="button"
       @mouseover="onMouseOver"
     >
-      <slot :open="(open !== undefined) ? open : headlessOpen" :close="close">
+      <slot :open="open" :close="close">
         <button :disabled="disabled">
           Open
         </button>
@@ -16,16 +17,16 @@
     </HPopoverButton>
 
     <Transition v-if="overlay" appear v-bind="ui.overlay.transition">
-      <div v-if="(open !== undefined) ? open : headlessOpen" :class="[ui.overlay.base, ui.overlay.background]" @click="$emit('update:open')" />
+      <div v-if="open" :class="[ui.overlay.base, ui.overlay.background]" />
     </Transition>
 
-    <div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
 
           <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
-            <slot name="panel" :open="(open !== undefined) ? open : headlessOpen" :close="close" />
+            <slot name="panel" :open="open" :close="close" />
           </HPopoverPanel>
         </div>
       </Transition>
@@ -34,7 +35,7 @@
 </template>
 
 <script>
-import { computed, ref, toRef, onMounted, defineComponent } from "vue";
+import { computed, ref, toRef, onMounted, defineComponent, watch } from "vue";
 import { defu } from "defu";
 import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from "@headlessui/vue";
 import { useUI } from "../../composables/useUI";
@@ -90,7 +91,7 @@ export default defineComponent({
     }
   },
   emits: ["update:open"],
-  setup(props) {
+  setup(props, { emit }) {
     const { ui, attrs } = useUI("popover", toRef(props, "ui"), config, toRef(props, "class"));
     const popper = computed(() => defu(props.mode === "hover" ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper));
     const [trigger, container] = usePopper(popper.value);
@@ -105,16 +106,35 @@ export default defineComponent({
       }
       const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides);
       popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]];
+      if (props.open) {
+        popoverApi.value?.togglePopover();
+      }
     });
     const containerStyle = computed(() => {
+      if (props.mode !== "hover") {
+        return {};
+      }
       const offsetDistance = props.popper?.offsetDistance || ui.value.popper?.offsetDistance || 8;
+      const placement = popper.value.placement?.split("-")[0];
       const padding = `${offsetDistance}px`;
-      return props.mode === "hover" ? {
-        paddingTop: padding,
-        paddingBottom: padding,
-        paddingLeft: padding,
-        paddingRight: padding
-      } : {};
+      if (placement === "top" || placement === "bottom") {
+        return {
+          paddingTop: padding,
+          paddingBottom: padding
+        };
+      } else if (placement === "left" || placement === "right") {
+        return {
+          paddingLeft: padding,
+          paddingRight: padding
+        };
+      } else {
+        return {
+          paddingTop: padding,
+          paddingBottom: padding,
+          paddingLeft: padding,
+          paddingRight: padding
+        };
+      }
     });
     function onMouseOver() {
       if (props.mode !== "hover" || !popoverApi.value) {
@@ -148,6 +168,22 @@ export default defineComponent({
         closeTimeout = null;
       }, props.closeDelay);
     }
+    watch(() => props.open, (newValue, oldValue) => {
+      if (!popoverApi.value)
+        return;
+      if (oldValue === void 0 || newValue === oldValue)
+        return;
+      if (newValue) {
+        popoverApi.value.popoverState = 0;
+      } else {
+        popoverApi.value.closePopover();
+      }
+    });
+    watch(() => popoverApi.value?.popoverState, (newValue, oldValue) => {
+      if (oldValue === void 0 || newValue === oldValue)
+        return;
+      emit("update:open", newValue === 0);
+    });
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

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

@@ -43,20 +43,30 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    popover: any;
+    popover: import("vue").Ref<any>;
     popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     containerStyle: import("vue").ComputedRef<{
+        paddingTop?: undefined;
+        paddingBottom?: undefined;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
+    } | {
         paddingTop: string;
         paddingBottom: string;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
+    } | {
         paddingLeft: string;
         paddingRight: string;
-    } | {
         paddingTop?: undefined;
         paddingBottom?: undefined;
-        paddingLeft?: undefined;
-        paddingRight?: undefined;
+    } | {
+        paddingTop: string;
+        paddingBottom: string;
+        paddingLeft: string;
+        paddingRight: string;
     }>;
     onMouseOver: () => void;
     onMouseLeave: () => void;

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

@@ -80,11 +80,11 @@ declare const _default: import("vue").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
+    transition: boolean;
     class: any;
     modelValue: boolean;
     appear: boolean;
     overlay: boolean;
-    transition: boolean;
     preventClose: boolean;
     side: "right" | "left";
 }, {}>;

package/dist/runtime/composables/useShortcuts.mjs

@@ -5,7 +5,9 @@ export const _useShortcuts = () => {
   const metaSymbol = ref(" ");
   const activeElement = useActiveElement();
   const usingInput = computed(() => {
-    const usingInput2 = !!(activeElement.value?.tagName === "INPUT" || activeElement.value?.tagName === "TEXTAREA" || activeElement.value?.contentEditable === "true");
+    const tagName = activeElement.value?.tagName;
+    const contentEditable = activeElement.value?.contentEditable;
+    const usingInput2 = !!(tagName === "INPUT" || tagName === "TEXTAREA" || contentEditable === "true" || contentEditable === "plaintext-only");
     if (usingInput2) {
       return activeElement.value?.name || true;
     }

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

@@ -1,7 +1,12 @@
 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?: Function
+}

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

@@ -2,6 +2,7 @@ import type { Link } from './link'
 
 export interface BreadcrumbLink extends Link {
   label: string
+  labelClass?: string
   icon?: string
   iconClass?: string
   // FIXME: This is a workaround for `link.to` not being resolved although it extends `NuxtLinkProps`

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

@@ -3,11 +3,13 @@ import type { Avatar } from './avatar'
 
 export interface DropdownItem extends NuxtLinkProps {
   label: string
+  labelClass?: string
   slot?: string
   icon?: string
   iconClass?: string
   avatar?: Avatar
   shortcuts?: string[]
   disabled?: boolean
+  class?: string
   click?: Function
 }

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

@@ -15,6 +15,7 @@ export interface Form<T> {
   errors: Ref<FormError[]>
   setErrors(errs: FormError[], path?: string): void
   getErrors(path?: string): FormError[]
+  submit(): Promise<void>
 }
 
 export type FormSubmitEvent<T> = SubmitEvent & { data: T }

package/dist/runtime/types/vertical-navigation.d.ts

@@ -3,6 +3,7 @@ import type { Avatar } from './avatar'
 
 export interface VerticalNavigationLink extends Link {
   label: string
+  labelClass?: string
   icon?: string
   iconClass?: string
   avatar?: Avatar

package/dist/runtime/ui.config/forms/input.mjs

@@ -76,24 +76,24 @@ export default {
       wrapper: "absolute inset-y-0 start-0 flex items-center",
       pointer: "pointer-events-none",
       padding: {
-        "2xs": "ps-2",
-        xs: "ps-2.5",
-        sm: "ps-2.5",
-        md: "ps-3",
-        lg: "ps-3.5",
-        xl: "ps-3.5"
+        "2xs": "px-2",
+        xs: "px-2.5",
+        sm: "px-2.5",
+        md: "px-3",
+        lg: "px-3.5",
+        xl: "px-3.5"
       }
     },
     trailing: {
       wrapper: "absolute inset-y-0 end-0 flex items-center",
       pointer: "pointer-events-none",
       padding: {
-        "2xs": "pe-2",
-        xs: "pe-2.5",
-        sm: "pe-2.5",
-        md: "pe-3",
-        lg: "pe-3.5",
-        xl: "pe-3.5"
+        "2xs": "px-2",
+        xs: "px-2.5",
+        sm: "px-2.5",
+        md: "px-3",
+        lg: "px-3.5",
+        xl: "px-3.5"
       }
     }
   },

package/dist/runtime/ui.config/forms/inputMenu.d.ts

@@ -0,0 +1,64 @@
+declare const _default: {
+    container: string;
+    trigger: string;
+    width: string;
+    height: string;
+    base: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    ring: string;
+    empty: string;
+    option: {
+        base: string;
+        rounded: string;
+        padding: string;
+        size: string;
+        color: string;
+        container: string;
+        active: string;
+        inactive: string;
+        selected: string;
+        disabled: string;
+        empty: string;
+        icon: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        selectedIcon: {
+            wrapper: string;
+            padding: string;
+            base: string;
+        };
+        avatar: {
+            base: string;
+            size: "3xs";
+        };
+        chip: {
+            base: string;
+        };
+    };
+    transition: {
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    popper: {
+        placement: string;
+    };
+    default: {
+        selectedIcon: string;
+        trailingIcon: string;
+    };
+    arrow: {
+        ring: string;
+        background: string;
+        base: string;
+        rounded: string;
+        shadow: string;
+        placement: string;
+    };
+};
+export default _default;