From 5076b8cc9e908cf289150c668b1707dc1397dba3 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 12 Sep 2024 12:42:14 +0200
Subject: [PATCH] feat(module): improve options

---
 .../1.getting-started/2.installation.md       | 40 +++++++++++++++----
 src/module.ts                                 | 29 ++++++++++----
 src/theme/breadcrumb.ts                       |  2 +-
 src/theme/button.ts                           |  2 +-
 src/theme/command-palette.ts                  |  4 +-
 src/theme/context-menu.ts                     |  4 +-
 src/theme/dropdown-menu.ts                    |  4 +-
 src/theme/input-menu.ts                       |  8 ++--
 src/theme/input.ts                            |  2 +-
 src/theme/link.ts                             |  2 +-
 src/theme/navigation-menu.ts                  | 14 +++----
 src/theme/select.ts                           |  6 +--
 src/theme/switch.ts                           |  4 +-
 src/theme/tabs.ts                             |  2 +-
 14 files changed, 82 insertions(+), 41 deletions(-)

diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
index 8ddfd756..08d31385 100644
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@@ -27,7 +27,11 @@ bun add @nuxt/ui@next
 
 ::
 
-2. Register the Nuxt UI module in your `nuxt.config.ts`:
+::warning
+Make sure you have `typescript` installed in your dev dependencies.
+::
+
+2. Register the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"}:
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -35,7 +39,9 @@ export default defineNuxtConfig({
 })
 ```
 
-3. Import Tailwind and Nuxt UI in your CSS:
+3. Import Tailwind and Nuxt UI in your `app.vue`{lang="ts-type"} or in your [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):
+
+::code-group
 
 ```vue [app.vue]
 <style>
@@ -44,8 +50,11 @@ export default defineNuxtConfig({
 </style>
 ```
 
-::tip
-This is done here in the `<style>` block of your `app.vue` file, but you can also do it in a [`CSS`](https://nuxt.com/docs/getting-started/styling#the-css-property) file.
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui";
+```
+
 ::
 
 ## Options
@@ -86,9 +95,9 @@ export default defineNuxtConfig({
 This can be useful to reduce the number of CSS classes generated in your bundle.
 ::
 
-### `transitions`
+### `fonts`
 
-Use the `transitions` option to disable all transitions on components.
+Use the `fonts` option to enable or disable the `@nuxt/fonts` module.
 
 - Default: `true`{lang="ts-type"}
 
@@ -96,7 +105,24 @@ Use the `transitions` option to disable all transitions on components.
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
   ui: {
-    transitions: false
+    fonts: false
+  }
+})
+```
+
+### `theme.transitions`
+
+Use the `theme.transitions` option to disable all transitions on components.
+
+- Default: `true`{lang="ts-type"}
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  ui: {
+    theme: {
+      transitions: false
+    }
   }
 })
 ```
diff --git a/src/module.ts b/src/module.ts
index 0aa1fbb5..f0d94cb0 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -11,16 +11,26 @@ export interface ModuleOptions {
    * @defaultValue U
    */
   prefix?: string
+
   /**
    * Colors to generate classes for (based on TailwindCSS colors)
    * @defaultValue ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
    */
   colors?: string[]
+
   /**
-   * Disable color transitions
+   * Enable or disable `@nuxt/fonts` module
    * @defaultValue true
    */
-  transitions?: boolean
+  fonts?: boolean
+
+  theme?: {
+    /**
+     * Enable or disable transitions on components
+     * @defaultValue true
+     */
+    transitions?: boolean
+  }
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -34,7 +44,10 @@ export default defineNuxtModule<ModuleOptions>({
   defaults: {
     prefix: 'U',
     colors: undefined,
-    transitions: true
+    fonts: true,
+    theme: {
+      transitions: true
+    }
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
@@ -65,10 +78,12 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt.options.postcss.plugins['@tailwindcss/postcss'] = {}
     }
 
-    if (!hasNuxtModule('@nuxt/fonts')) {
-      await installModule('@nuxt/fonts', { experimental: { processCSSVariables: true } })
-    } else {
-      nuxt.options.fonts = defu(nuxt.options.fonts, { experimental: { processCSSVariables: true } })
+    if (options.fonts) {
+      if (!hasNuxtModule('@nuxt/fonts')) {
+        await installModule('@nuxt/fonts', { experimental: { processCSSVariables: true } })
+      } else {
+        nuxt.options.fonts = defu(nuxt.options.fonts, { experimental: { processCSSVariables: true } })
+      }
     }
 
     if (!hasNuxtModule('@nuxt/icon')) {
diff --git a/src/theme/breadcrumb.ts b/src/theme/breadcrumb.ts
index 84f5e315..3b82f7a1 100644
--- a/src/theme/breadcrumb.ts
+++ b/src/theme/breadcrumb.ts
@@ -36,7 +36,7 @@ export default (options: Required<ModuleOptions>) => ({
     active: false,
     to: true,
     class: {
-      link: ['hover:text-gray-700 dark:hover:text-gray-200', options.transitions && 'transition-colors']
+      link: ['hover:text-gray-700 dark:hover:text-gray-200', options.theme?.transitions && 'transition-colors']
     }
   }]
 })
diff --git a/src/theme/button.ts b/src/theme/button.ts
index aecf16df..b64555b0 100644
--- a/src/theme/button.ts
+++ b/src/theme/button.ts
@@ -3,7 +3,7 @@ import { buttonGroupVariant } from './button-group'
 
 export default (options: Required<ModuleOptions>) => ({
   slots: {
-    base: ['rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', options.transitions && 'transition-colors'],
+    base: ['rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', options.theme?.transitions && 'transition-colors'],
     label: 'truncate',
     leadingIcon: 'shrink-0',
     leadingAvatar: 'shrink-0',
diff --git a/src/theme/command-palette.ts b/src/theme/command-palette.ts
index 8012d799..1716dd47 100644
--- a/src/theme/command-palette.ts
+++ b/src/theme/command-palette.ts
@@ -10,8 +10,8 @@ export default (options: Required<ModuleOptions>) => ({
     group: 'p-1 isolate',
     empty: 'py-6 text-center text-sm',
     label: 'px-2 py-1.5 text-xs font-semibold text-gray-900 dark:text-white',
-    item: ['group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
-    itemLeadingIcon: ['shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.transitions && 'transition-colors'],
+    item: ['group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.theme?.transitions && 'transition-colors before:transition-colors'],
+    itemLeadingIcon: ['shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.theme?.transitions && 'transition-colors'],
     itemLeadingAvatar: 'shrink-0',
     itemLeadingAvatarSize: '2xs',
     itemLeadingChip: 'shrink-0 size-5',
diff --git a/src/theme/context-menu.ts b/src/theme/context-menu.ts
index dd9c9217..6b2330a2 100644
--- a/src/theme/context-menu.ts
+++ b/src/theme/context-menu.ts
@@ -24,8 +24,8 @@ export default (options: Required<ModuleOptions>) => ({
         itemLeadingIcon: 'text-gray-700 dark:text-gray-200'
       },
       false: {
-        item: ['text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
-        itemLeadingIcon: ['text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.transitions && 'transition-colors']
+        item: ['text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.theme?.transitions && 'transition-colors before:transition-colors'],
+        itemLeadingIcon: ['text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme?.transitions && 'transition-colors']
       }
     },
     size: {
diff --git a/src/theme/dropdown-menu.ts b/src/theme/dropdown-menu.ts
index 2aca71f3..9154fce7 100644
--- a/src/theme/dropdown-menu.ts
+++ b/src/theme/dropdown-menu.ts
@@ -25,8 +25,8 @@ export default (options: Required<ModuleOptions>) => ({
         itemLeadingIcon: 'text-gray-700 dark:text-gray-200'
       },
       false: {
-        item: ['text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
-        itemLeadingIcon: ['text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.transitions && 'transition-colors']
+        item: ['text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.theme?.transitions && 'transition-colors before:transition-colors'],
+        itemLeadingIcon: ['text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme?.transitions && 'transition-colors']
       }
     },
     size: {
diff --git a/src/theme/input-menu.ts b/src/theme/input-menu.ts
index b2e18f97..534c2541 100644
--- a/src/theme/input-menu.ts
+++ b/src/theme/input-menu.ts
@@ -12,8 +12,8 @@ export default (options: Required<ModuleOptions>) => {
       empty: 'py-2 text-center text-sm text-gray-500 dark:text-gray-400',
       label: 'font-semibold text-gray-900 dark:text-white',
       separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
-      item: ['group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
-      itemLeadingIcon: ['shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.transitions && 'transition-colors'],
+      item: ['group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.theme?.transitions && 'transition-colors before:transition-colors'],
+      itemLeadingIcon: ['shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.theme?.transitions && 'transition-colors'],
       itemLeadingAvatar: 'shrink-0',
       itemLeadingAvatarSize: '',
       itemLeadingChip: 'shrink-0',
@@ -23,13 +23,13 @@ export default (options: Required<ModuleOptions>) => {
       itemLabel: 'truncate',
       tagsItem: 'px-1.5 py-0.5 rounded font-medium inline-flex items-center gap-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 data-disabled:cursor-not-allowed data-disabled:opacity-75',
       tagsItemText: 'truncate',
-      tagsItemDelete: ['inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none', options.transitions && 'transition-colors'],
+      tagsItemDelete: ['inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none', options.theme?.transitions && 'transition-colors'],
       tagsItemDeleteIcon: '',
       tagsInput: 'border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
     }
   }, {
     slots: {
-      base: () => ['rounded-md', options.transitions && 'transition-colors'],
+      base: () => ['rounded-md', options.theme?.transitions && 'transition-colors'],
       trailing: 'absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75'
     },
     variants: {
diff --git a/src/theme/input.ts b/src/theme/input.ts
index a330f211..d1c1f409 100644
--- a/src/theme/input.ts
+++ b/src/theme/input.ts
@@ -4,7 +4,7 @@ import { buttonGroupVariantWithRoot } from './button-group'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative inline-flex items-center',
-    base: ['w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.transitions && 'transition-colors'],
+    base: ['w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme?.transitions && 'transition-colors'],
     leading: 'absolute inset-y-0 start-0 flex items-center',
     leadingIcon: 'shrink-0 text-gray-400 dark:text-gray-500',
     leadingAvatar: 'shrink-0',
diff --git a/src/theme/link.ts b/src/theme/link.ts
index dec2ff5a..55447ef0 100644
--- a/src/theme/link.ts
+++ b/src/theme/link.ts
@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
   variants: {
     active: {
       true: 'text-primary-500 dark:text-primary-400',
-      false: ['text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200', options.transitions && 'transition-colors']
+      false: ['text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200', options.theme?.transitions && 'transition-colors']
     },
     disabled: {
       true: 'cursor-not-allowed opacity-75'
diff --git a/src/theme/navigation-menu.ts b/src/theme/navigation-menu.ts
index e68568cf..a9a8554c 100644
--- a/src/theme/navigation-menu.ts
+++ b/src/theme/navigation-menu.ts
@@ -70,8 +70,8 @@ export default (options: Required<ModuleOptions>) => ({
       false: {
         link: 'text-gray-500 dark:text-gray-400',
         linkLeadingIcon: 'text-gray-400 dark:text-gray-500',
-        childLink: ['hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white', options.transitions && 'transition-colors'],
-        childLinkIcon: ['text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200', options.transitions && 'transition-colors']
+        childLink: ['hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white', options.theme?.transitions && 'transition-colors'],
+        childLinkIcon: ['text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200', options.theme?.transitions && 'transition-colors']
       }
     },
     disabled: {
@@ -102,8 +102,8 @@ export default (options: Required<ModuleOptions>) => ({
     active: false,
     variant: 'pill',
     class: {
-      link: ['hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
-      linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.transitions && 'transition-colors']
+      link: ['hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.theme?.transitions && 'transition-colors before:transition-colors'],
+      linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme?.transitions && 'transition-colors']
     }
   }, ...options.colors.map((color: string) => ({
     color,
@@ -133,15 +133,15 @@ export default (options: Required<ModuleOptions>) => ({
     active: true,
     highlight: true,
     class: {
-      link: ['hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50', options.transitions && 'before:transition-colors']
+      link: ['hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50', options.theme?.transitions && 'before:transition-colors']
     }
   }, {
     disabled: false,
     active: false,
     variant: 'link',
     class: {
-      link: ['hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white', options.transitions && 'transition-colors'],
-      linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.transitions && 'transition-colors']
+      link: ['hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white', options.theme?.transitions && 'transition-colors'],
+      linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme?.transitions && 'transition-colors']
     }
   }, ...options.colors.map((color: string) => ({
     color,
diff --git a/src/theme/select.ts b/src/theme/select.ts
index a953a836..7b098ae3 100644
--- a/src/theme/select.ts
+++ b/src/theme/select.ts
@@ -13,8 +13,8 @@ export default (options: Required<ModuleOptions>) => {
       empty: 'py-2 text-center text-sm text-gray-500 dark:text-gray-400',
       label: 'font-semibold text-gray-900 dark:text-white',
       separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
-      item: ['group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
-      itemLeadingIcon: ['shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.transitions && 'transition-colors'],
+      item: ['group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.theme?.transitions && 'transition-colors before:transition-colors'],
+      itemLeadingIcon: ['shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.theme?.transitions && 'transition-colors'],
       itemLeadingAvatar: 'shrink-0',
       itemLeadingAvatarSize: '',
       itemLeadingChip: 'shrink-0',
@@ -74,7 +74,7 @@ export default (options: Required<ModuleOptions>) => {
     }
   }, {
     slots: {
-      base: () => ['relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.transitions && 'transition-colors'],
+      base: () => ['relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme?.transitions && 'transition-colors'],
       value: 'truncate group-data-placeholder:text-current/50'
     },
     variants: {
diff --git a/src/theme/switch.ts b/src/theme/switch.ts
index a1108db0..1f1f1f0b 100644
--- a/src/theme/switch.ts
+++ b/src/theme/switch.ts
@@ -3,10 +3,10 @@ import type { ModuleOptions } from '../module'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative flex items-start',
-    base: ['inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700', options.transitions && 'transition-colors duration-200'],
+    base: ['inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700', options.theme?.transitions && 'transition-colors duration-200'],
     container: 'flex items-center',
     thumb: 'group pointer-events-none block rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
-    icon: ['absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 opacity-0 size-10/12', options.transitions && 'transition-[color,opacity] duration-200'],
+    icon: ['absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 opacity-0 size-10/12', options.theme?.transitions && 'transition-[color,opacity] duration-200'],
     wrapper: 'ms-2',
     label: 'block font-medium text-gray-700 dark:text-gray-200',
     description: 'text-gray-500 dark:text-gray-400'
diff --git a/src/theme/tabs.ts b/src/theme/tabs.ts
index cd49b6cb..394a2be4 100644
--- a/src/theme/tabs.ts
+++ b/src/theme/tabs.ts
@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'flex items-center gap-2',
     list: 'relative flex p-1 group',
     indicator: 'absolute transition-[translate,width] duration-200',
-    trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none', options.transitions && 'transition-colors'],
+    trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none', options.theme?.transitions && 'transition-colors'],
     content: 'focus:outline-none w-full',
     leadingIcon: 'shrink-0',
     leadingAvatar: 'shrink-0',