@nuxt/ui 2.8.1 → 2.10.0

package/dist/runtime/{app.config.mjs → ui.config.mjs}

@@ -1,4 +1,12 @@
-const table = {
+const _popperArrow = {
+  base: "before:w-2 before:h-2",
+  ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-800",
+  rounded: "before:rounded-sm",
+  background: "before:bg-gray-200 dark:before:bg-gray-800",
+  shadow: "before:shadow",
+  placement: 'group-data-[popper-placement*="right"]:-left-1 group-data-[popper-placement*="left"]:-right-1 group-data-[popper-placement*="top"]:-bottom-1 group-data-[popper-placement*="bottom"]:-top-1'
+};
+export const table = {
   wrapper: "relative overflow-x-auto",
   base: "min-w-full table-fixed",
   divide: "divide-y divide-gray-300 dark:divide-gray-700",
@@ -23,6 +31,9 @@ const table = {
     font: "",
     size: "text-sm"
   },
+  checkbox: {
+    padding: "ps-4"
+  },
   loadingState: {
     wrapper: "flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14",
     label: "text-sm text-center text-gray-900 dark:text-white",
@@ -54,7 +65,7 @@ const table = {
     }
   }
 };
-const avatar = {
+export const avatar = {
   wrapper: "relative inline-flex items-center justify-center flex-shrink-0",
   background: "bg-gray-100 dark:bg-gray-800",
   rounded: "rounded-full",
@@ -113,12 +124,12 @@ const avatar = {
     chipPosition: "top-right"
   }
 };
-const avatarGroup = {
-  wrapper: "flex flex-row-reverse justify-end",
+export const avatarGroup = {
+  wrapper: "inline-flex flex-row-reverse justify-end",
   ring: "ring-2 ring-white dark:ring-gray-900",
   margin: "-me-1.5 first:me-0"
 };
-const badge = {
+export const badge = {
   base: "inline-flex items-center",
   rounded: "rounded-md",
   font: "font-medium",
@@ -151,7 +162,7 @@ const badge = {
     color: "primary"
   }
 };
-const button = {
+export const button = {
   base: "focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0",
   font: "font-medium",
   rounded: "rounded-md",
@@ -227,14 +238,17 @@ const button = {
     loadingIcon: "i-heroicons-arrow-path-20-solid"
   }
 };
-const buttonGroup = {
-  wrapper: "inline-flex -space-x-px",
+export const buttonGroup = {
+  wrapper: {
+    horizontal: "inline-flex -space-x-px",
+    vertical: "inline-flex flex-col -space-y-px"
+  },
   rounded: "rounded-md",
   shadow: "shadow-sm"
 };
-const dropdown = {
+export const dropdown = {
   wrapper: "relative inline-flex text-left rtl:text-right",
-  container: "z-20",
+  container: "z-20 group",
   width: "w-48",
   height: "",
   background: "bg-white dark:bg-gray-800",
@@ -275,9 +289,14 @@ const dropdown = {
   popper: {
     placement: "bottom-end",
     strategy: "fixed"
+  },
+  arrow: {
+    ..._popperArrow,
+    ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700",
+    background: "before:bg-white dark:before:bg-gray-700"
   }
 };
-const accordion = {
+export const accordion = {
   wrapper: "w-full flex flex-col",
   item: {
     base: "",
@@ -297,7 +316,7 @@ const accordion = {
     variant: "soft"
   }
 };
-const alert = {
+export const alert = {
   wrapper: "w-full relative overflow-hidden",
   title: "text-sm font-medium",
   description: "mt-1 text-sm leading-4 opacity-90",
@@ -334,7 +353,7 @@ const alert = {
     }
   }
 };
-const kbd = {
+export const kbd = {
   base: "inline-flex items-center justify-center text-gray-900 dark:text-white",
   padding: "px-1",
   size: {
@@ -350,7 +369,168 @@ const kbd = {
     size: "sm"
   }
 };
-const input = {
+export const progress = {
+  wrapper: "w-full flex flex-col gap-2",
+  indicator: {
+    container: {
+      base: "flex flex-row justify-end",
+      width: "min-w-fit",
+      transition: "transition-all"
+    },
+    align: "text-end",
+    width: "w-fit",
+    color: "text-gray-400 dark:text-gray-500",
+    size: {
+      "2xs": "text-xs",
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-sm",
+      lg: "text-sm",
+      xl: "text-base",
+      "2xl": "text-base"
+    }
+  },
+  progress: {
+    base: "block appearance-none border-none overflow-hidden",
+    width: "w-full [&::-webkit-progress-bar]:w-full",
+    size: {
+      "2xs": "h-px",
+      xs: "h-0.5",
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3",
+      xl: "h-4",
+      "2xl": "h-5"
+    },
+    rounded: "rounded-full [&::-webkit-progress-bar]:rounded-full",
+    track: "[&::-webkit-progress-bar]:bg-gray-200 [&::-webkit-progress-bar]:dark:bg-gray-700 [@supports(selector(&::-moz-progress-bar))]:bg-gray-200 [@supports(selector(&::-moz-progress-bar))]:dark:bg-gray-700",
+    bar: "[&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:ease-in-out [&::-moz-progress-bar]:rounded-full",
+    color: "text-{color}-500 dark:text-{color}-400",
+    background: "[&::-webkit-progress-value]:bg-current [&::-moz-progress-bar]:bg-current",
+    indeterminate: {
+      base: "indeterminate:relative",
+      rounded: "indeterminate:after:rounded-full [&:indeterminate::-webkit-progress-value]:rounded-full [&:indeterminate::-moz-progress-bar]:rounded-full"
+    }
+  },
+  steps: {
+    base: "grid grid-cols-1",
+    color: "text-{color}-500 dark:text-{color}-400",
+    size: {
+      "2xs": "text-xs",
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-sm",
+      lg: "text-sm",
+      xl: "text-base",
+      "2xl": "text-base"
+    }
+  },
+  step: {
+    base: "transition-all opacity-0 truncate row-start-1 col-start-1",
+    align: "text-end",
+    active: "opacity-100",
+    first: "text-gray-500 dark:text-gray-400"
+  },
+  animation: {
+    carousel: "bar-animation-carousel",
+    "carousel-inverse": "bar-animation-carousel-inverse",
+    swing: "bar-animation-swing",
+    elastic: "bar-animation-elastic"
+  },
+  default: {
+    color: "primary",
+    size: "md",
+    animation: "carousel"
+  }
+};
+export const meter = {
+  wrapper: "w-full flex flex-col gap-2",
+  indicator: {
+    container: "min-w-fit transition-all",
+    text: "text-gray-400 dark:text-gray-500 text-end",
+    size: {
+      "2xs": "text-xs",
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-sm",
+      lg: "text-sm",
+      xl: "text-base",
+      "2xl": "text-base"
+    }
+  },
+  meter: {
+    base: "appearance-none block w-full bg-none overflow-y-hidden",
+    background: "bg-gray-200 dark:bg-gray-700",
+    color: "text-{color}-500 dark:text-{color}-400",
+    ring: "",
+    rounded: "rounded-full",
+    shadow: "",
+    size: {
+      "2xs": "h-px",
+      xs: "h-0.5",
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3",
+      xl: "h-4",
+      "2xl": "h-5"
+    },
+    appearance: {
+      inner: "[&::-webkit-meter-inner-element]:block [&::-webkit-meter-inner-element]:relative [&::-webkit-meter-inner-element]:border-none [&::-webkit-meter-inner-element]:bg-none [&::-webkit-meter-inner-element]:bg-transparent",
+      meter: "[&::-webkit-meter-bar]:border-none [&::-webkit-meter-bar]:bg-none [&::-webkit-meter-bar]:bg-transparent",
+      bar: "[&::-webkit-meter-optimum-value]:border-none [&::-webkit-meter-optimum-value]:bg-none [&::-webkit-meter-optimum-value]:bg-current",
+      value: "[&::-moz-meter-bar]:border-none [&::-moz-meter-bar]:bg-none [&::-moz-meter-bar]:bg-current"
+    },
+    bar: {
+      transition: "[&::-webkit-meter-optimum-value]:transition-all [&::-moz-meter-bar]:transition-all",
+      ring: "",
+      rounded: "[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full",
+      size: {
+        "2xs": "[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px",
+        xs: "[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5",
+        sm: "[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1",
+        md: "[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2",
+        lg: "[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3",
+        xl: "[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4",
+        "2xl": "[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5"
+      }
+    }
+  },
+  label: {
+    base: "flex gap-2 items-center",
+    text: "truncate",
+    color: "text-{color}-500 dark:text-{color}-400",
+    size: {
+      "2xs": "text-xs",
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-sm",
+      lg: "text-sm",
+      xl: "text-base",
+      "2xl": "text-base"
+    }
+  },
+  color: {
+    white: "text-white dark:text-black",
+    black: "text-black dark:text-white",
+    gray: "text-gray-500 dark:text-gray-400"
+  },
+  default: {
+    size: "md",
+    color: "primary"
+  }
+};
+export const meterGroup = {
+  wrapper: "flex flex-col gap-2 w-full",
+  base: "flex flex-row flex-nowrap flex-shrink overflow-hidden",
+  background: "bg-gray-200 dark:bg-gray-700",
+  transition: "transition-all",
+  rounded: "rounded-full",
+  shadow: "",
+  default: {
+    size: "md"
+  }
+};
+export const input = {
   wrapper: "relative",
   base: "relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0",
   rounded: "rounded-md",
@@ -454,7 +634,7 @@ const input = {
     loadingIcon: "i-heroicons-arrow-path-20-solid"
   }
 };
-const formGroup = {
+export const formGroup = {
   wrapper: "",
   label: {
     wrapper: "flex content-center items-center justify-between",
@@ -474,9 +654,12 @@ const formGroup = {
   description: "text-gray-500 dark:text-gray-400",
   hint: "text-gray-500 dark:text-gray-400",
   help: "mt-2 text-gray-500 dark:text-gray-400",
-  error: "mt-2 text-red-500 dark:text-red-400"
+  error: "mt-2 text-red-500 dark:text-red-400",
+  default: {
+    size: "sm"
+  }
 };
-const textarea = {
+export const textarea = {
   ...input,
   default: {
     size: "sm",
@@ -484,7 +667,7 @@ const textarea = {
     variant: "outline"
   }
 };
-const select = {
+export const select = {
   ...input,
   placeholder: "text-gray-900 dark:text-white",
   default: {
@@ -495,8 +678,8 @@ const select = {
     trailingIcon: "i-heroicons-chevron-down-20-solid"
   }
 };
-const selectMenu = {
-  container: "z-20",
+export const selectMenu = {
+  container: "z-20 group",
   width: "w-full",
   height: "max-h-60",
   base: "relative focus:outline-none overflow-y-auto scroll-py-1",
@@ -547,23 +730,35 @@ const selectMenu = {
   },
   default: {
     selectedIcon: "i-heroicons-check-20-solid"
+  },
+  arrow: {
+    ..._popperArrow,
+    ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700",
+    background: "before:bg-white dark:before:bg-gray-700"
+  }
+};
+export const radioGroup = {
+  wrapper: "relative flex items-start",
+  legend: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-1",
+  default: {
+    color: "primary"
   }
 };
-const radio = {
+export const radio = {
   wrapper: "relative flex items-start",
   base: "h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent",
   color: "text-{color}-500 dark:text-{color}-400",
   background: "bg-white dark:bg-gray-900",
   border: "border border-gray-300 dark:border-gray-700",
   ring: "focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
-  label: "font-medium text-gray-700 dark:text-gray-200",
-  required: "text-red-500 dark:text-red-400",
-  help: "text-gray-500 dark:text-gray-400",
+  label: "text-sm font-medium text-gray-700 dark:text-gray-200",
+  required: "text-sm text-red-500 dark:text-red-400",
+  help: "text-sm text-gray-500 dark:text-gray-400",
   default: {
     color: "primary"
   }
 };
-const checkbox = {
+export const checkbox = {
   wrapper: "relative flex items-start",
   base: "h-4 w-4 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent",
   rounded: "rounded",
@@ -578,7 +773,7 @@ const checkbox = {
     color: "primary"
   }
 };
-const toggle = {
+export const toggle = {
   base: "relative inline-flex h-5 w-9 flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none",
   rounded: "rounded-full",
   ring: "focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
@@ -602,7 +797,7 @@ const toggle = {
     color: "primary"
   }
 };
-const range = {
+export const range = {
   wrapper: "relative w-full flex items-center",
   base: "w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none peer group",
   rounded: "rounded-lg",
@@ -613,9 +808,13 @@ const range = {
     rounded: "rounded-s-lg",
     background: "bg-{color}-500 dark:bg-{color}-400",
     size: {
+      "2xs": "h-px",
+      xs: "h-0.5",
       sm: "h-1",
       md: "h-2",
-      lg: "h-3"
+      lg: "h-3",
+      xl: "h-4",
+      "2xl": "h-5"
     }
   },
   thumb: {
@@ -624,32 +823,44 @@ const range = {
     background: "[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:dark:bg-gray-900 [&::-moz-range-thumb]:bg-current",
     ring: "[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current",
     size: {
+      "2xs": "[&::-webkit-slider-thumb]:h-1.5 [&::-moz-range-thumb]:h-1.5 [&::-webkit-slider-thumb]:w-1.5 [&::-moz-range-thumb]:w-1.5 [&::-webkit-slider-thumb]:mt-[-2.5px] [&::-moz-range-thumb]:mt-[-2.5px]",
+      xs: "[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]",
       sm: "[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
       md: "[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
-      lg: "[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1"
+      lg: "[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
+      xl: "[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
+      "2xl": "[&::-webkit-slider-thumb]:h-7 [&::-moz-range-thumb]:h-7 [&::-webkit-slider-thumb]:w-7 [&::-moz-range-thumb]:w-7 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1"
     }
   },
   track: {
-    base: "[&::-webkit-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-moz-slider-runnable-track]:group-disabled:bg-opacity-50",
-    background: "[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-slider-runnable-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-slider-runnable-track]:dark:bg-gray-700",
-    rounded: "[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-slider-runnable-track]:rounded-lg",
+    base: "[&::-webkit-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-moz-range-track]:group-disabled:bg-opacity-50",
+    background: "[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-range-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-range-track]:dark:bg-gray-700",
+    rounded: "[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg",
     size: {
-      sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-moz-slider-runnable-track]:h-1",
-      md: "[&::-webkit-slider-runnable-track]:h-2 [&::-moz-slider-runnable-track]:h-2",
-      lg: "[&::-webkit-slider-runnable-track]:h-3 [&::-moz-slider-runnable-track]:h-3"
+      "2xs": "[&::-webkit-slider-runnable-track]:h-px [&::-moz-range-track]:h-px",
+      xs: "[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5",
+      sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1",
+      md: "[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2",
+      lg: "[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3",
+      xl: "[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4",
+      "2xl": "[&::-webkit-slider-runnable-track]:h-5 [&::-moz-range-track]:h-5"
     }
   },
   size: {
+    "2xs": "h-1.5",
+    xs: "h-2",
     sm: "h-3",
     md: "h-4",
-    lg: "h-5"
+    lg: "h-5",
+    xl: "h-6",
+    "2xl": "h-7"
   },
   default: {
     size: "md",
     color: "primary"
   }
 };
-const card = {
+export const card = {
   base: "overflow-hidden",
   background: "bg-white dark:bg-gray-900",
   divide: "divide-y divide-gray-200 dark:divide-gray-800",
@@ -672,17 +883,46 @@ const card = {
     padding: "px-4 py-4 sm:px-6"
   }
 };
-const container = {
+export const container = {
   base: "mx-auto",
   padding: "px-4 sm:px-6 lg:px-8",
   constrained: "max-w-7xl"
 };
-const skeleton = {
+export const skeleton = {
   base: "animate-pulse",
   background: "bg-gray-100 dark:bg-gray-800",
   rounded: "rounded-md"
 };
-const verticalNavigation = {
+export const divider = {
+  wrapper: {
+    base: "flex items-center align-center text-center w-full",
+    horizontal: "flex-row",
+    vertical: "flex-col"
+  },
+  container: {
+    base: "font-medium text-gray-700 dark:text-gray-200 flex",
+    horizontal: "mx-3 whitespace-nowrap",
+    vertical: "my-2"
+  },
+  border: {
+    base: "flex border-gray-200 dark:border-gray-800",
+    horizontal: "w-full",
+    vertical: "h-full",
+    size: {
+      horizontal: "border-t",
+      vertical: "border-s"
+    }
+  },
+  icon: {
+    base: "flex-shrink-0 w-5 h-5"
+  },
+  avatar: {
+    base: "flex-shrink-0",
+    size: "2xs"
+  },
+  label: "text-sm"
+};
+export const verticalNavigation = {
   wrapper: "relative",
   base: "group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75",
   ring: "focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
@@ -709,7 +949,7 @@ const verticalNavigation = {
     inactive: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900"
   }
 };
-const commandPalette = {
+export const commandPalette = {
   wrapper: "flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800",
   container: "relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2",
   input: {
@@ -776,7 +1016,7 @@ const commandPalette = {
     selectedIcon: "i-heroicons-check-20-solid"
   }
 };
-const pagination = {
+export const pagination = {
   wrapper: "flex items-center -space-x-px",
   base: "",
   rounded: "first:rounded-s-md last:rounded-e-md",
@@ -788,6 +1028,16 @@ const pagination = {
     inactiveButton: {
       color: "white"
     },
+    firstButton: {
+      color: "white",
+      class: "rtl:[&_span:first-child]:rotate-180",
+      icon: "i-heroicons-chevron-double-left-20-solid"
+    },
+    lastButton: {
+      color: "white",
+      class: "rtl:[&_span:last-child]:rotate-180",
+      icon: "i-heroicons-chevron-double-right-20-solid"
+    },
     prevButton: {
       color: "white",
       class: "rtl:[&_span:first-child]:rotate-180",
@@ -800,7 +1050,7 @@ const pagination = {
     }
   }
 };
-const tabs = {
+export const tabs = {
   wrapper: "relative space-y-2",
   container: "relative w-full",
   base: "focus:outline-none",
@@ -820,7 +1070,7 @@ const tabs = {
       shadow: "shadow-sm"
     },
     tab: {
-      base: "relative inline-flex items-center justify-center flex-shrink-0 w-full whitespace-nowrap focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out",
+      base: "relative inline-flex items-center justify-center flex-shrink-0 w-full ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out",
       background: "",
       active: "text-gray-900 dark:text-white",
       inactive: "text-gray-500 dark:text-gray-400",
@@ -833,7 +1083,7 @@ const tabs = {
     }
   }
 };
-const modal = {
+export const modal = {
   wrapper: "relative z-50",
   inner: "fixed inset-0 overflow-y-auto",
   container: "flex min-h-full items-end sm:items-center justify-center text-center",
@@ -869,7 +1119,7 @@ const modal = {
     leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
   }
 };
-const slideover = {
+export const slideover = {
   wrapper: "fixed inset-0 flex z-50",
   overlay: {
     base: "fixed inset-0 transition-opacity",
@@ -897,16 +1147,16 @@ const slideover = {
     leave: "transform transition ease-in-out duration-200"
   }
 };
-const tooltip = {
+export const tooltip = {
   wrapper: "relative inline-flex",
-  container: "z-20",
+  container: "z-20 group",
   width: "max-w-xs",
   background: "bg-white dark:bg-gray-900",
   color: "text-gray-900 dark:text-white",
   shadow: "shadow",
   rounded: "rounded",
   ring: "ring-1 ring-gray-200 dark:ring-gray-800",
-  base: "[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate",
+  base: "[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative",
   shortcuts: "hidden md:inline-flex flex-shrink-0 gap-0.5",
   // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
@@ -919,17 +1169,18 @@ const tooltip = {
   },
   popper: {
     strategy: "fixed"
-  }
+  },
+  arrow: _popperArrow
 };
-const popover = {
+export const popover = {
   wrapper: "relative",
-  container: "z-20",
+  container: "z-20 group",
   width: "",
   background: "bg-white dark:bg-gray-900",
   shadow: "shadow-lg",
   rounded: "rounded-md",
   ring: "ring-1 ring-gray-200 dark:ring-gray-800",
-  base: "overflow-hidden focus:outline-none",
+  base: "overflow-hidden focus:outline-none relative",
   // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
     enterActiveClass: "transition ease-out duration-200",
@@ -941,17 +1192,18 @@ const popover = {
   },
   popper: {
     strategy: "fixed"
-  }
+  },
+  arrow: _popperArrow
 };
-const contextMenu = {
+export const contextMenu = {
   wrapper: "relative",
-  container: "z-20",
+  container: "z-20 group",
   width: "",
   background: "bg-white dark:bg-gray-900",
   shadow: "shadow-lg",
   rounded: "rounded-md",
   ring: "ring-1 ring-gray-200 dark:ring-gray-800",
-  base: "overflow-hidden focus:outline-none",
+  base: "overflow-hidden focus:outline-none relative",
   // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
     enterActiveClass: "transition ease-out duration-200",
@@ -964,9 +1216,10 @@ const contextMenu = {
   popper: {
     placement: "bottom-start",
     scroll: false
-  }
+  },
+  arrow: _popperArrow
 };
-const notification = {
+export const notification = {
   wrapper: "w-full pointer-events-auto",
   container: "relative overflow-hidden",
   title: "text-sm font-medium text-gray-900 dark:text-white",
@@ -1012,46 +1265,9 @@ const notification = {
     }
   }
 };
-const notifications = {
+export const notifications = {
   wrapper: "fixed flex flex-col justify-end z-[55]",
   position: "bottom-0 end-0",
   width: "w-full sm:w-96",
   container: "px-4 sm:px-6 py-6 space-y-3 overflow-y-auto"
 };
-export default {
-  ui: {
-    table,
-    avatar,
-    avatarGroup,
-    badge,
-    button,
-    buttonGroup,
-    dropdown,
-    kbd,
-    accordion,
-    alert,
-    input,
-    formGroup,
-    textarea,
-    select,
-    selectMenu,
-    checkbox,
-    radio,
-    toggle,
-    range,
-    card,
-    container,
-    skeleton,
-    verticalNavigation,
-    commandPalette,
-    pagination,
-    tabs,
-    modal,
-    slideover,
-    popover,
-    tooltip,
-    contextMenu,
-    notification,
-    notifications
-  }
-};