From 8f09d0c5ef81c2d7d5fc608fe6c5d7c2fa1a2267 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 26 Nov 2021 14:22:43 +0100
Subject: [PATCH] feat: support presets (#14)

---
 build.config.ts                       |   1 +
 docs/app.vue                          |   2 +-
 docs/pages/components/[component].vue |  13 +-
 docs/pages/index.vue                  |   4 +
 docs/pages/migration.vue              |  33 +++--
 package.json                          |   6 +-
 src/components/forms/Input.vue        | 146 ++++++-------------
 src/components/forms/Select.vue       | 193 +++++++++++++-------------
 src/components/forms/Textarea.vue     |  51 +++----
 src/index.ts                          |  75 +++++++---
 src/presets/tailwindui.ts             |  96 +++++++++++++
 11 files changed, 351 insertions(+), 269 deletions(-)
 create mode 100644 src/presets/tailwindui.ts

diff --git a/build.config.ts b/build.config.ts
index bd31e71f..7f9fdd9b 100644
--- a/build.config.ts
+++ b/build.config.ts
@@ -2,6 +2,7 @@ export default {
   entries: [
     './src/index',
     { input: './src/components/', outDir: 'dist/components', ext: 'js' },
+    { input: './src/presets/', outDir: 'dist/presets', ext: 'js' },
     { input: './src/utils/', outDir: 'dist/utils', ext: 'js' }
   ],
   declaration: true,
diff --git a/docs/app.vue b/docs/app.vue
index 114d07f4..cd56f28a 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -55,7 +55,7 @@
 import { UseDark } from '@vueuse/components'
 
 const sections = [
-  { label: 'Getting Started', links: [{ label: 'Installation', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
+  { label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
   { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }, { label: 'Link', to: '/components/Link' }, { label: 'Toggle', to: '/components/Toggle' }] },
   { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }] },
   { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'InputGroup', to: '/components/InputGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'RadioGroup', to: '/components/RadioGroup' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }] },
diff --git a/docs/pages/components/[component].vue b/docs/pages/components/[component].vue
index 99c099ec..26cd7584 100644
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -54,6 +54,8 @@
 </template>
 
 <script setup>
+import $ui from '#build/ui'
+
 const nuxtApp = useNuxtApp()
 const { params } = useRoute()
 
@@ -74,8 +76,15 @@ const refProps = Object.entries(componentProps).map(([key, prop]) => {
 
   let values
   if (prop.validator) {
-    const result = prop.validator.toString().match(/\[.*\]/g, '')[0]
-    values = JSON.parse(result.replace(/'/g, '"')).filter(Boolean)
+    const arrayRegex = prop.validator.toString().match(/\[.*\]/g, '')
+    if (arrayRegex) {
+      values = JSON.parse(arrayRegex[0].replace(/'/g, '"')).filter(Boolean)
+    } else {
+      const $uiProp = $ui[params.component.toLowerCase()][key]
+      if ($uiProp) {
+        values = Object.keys($uiProp).filter(Boolean)
+      }
+    }
   }
 
   if (value) {
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 8c618c9d..9b81fb57 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -49,6 +49,10 @@ export default defineNuxtConfig({
       Options
     </h2>
 
+    <p>- `preset`</p>
+
+    <p>Choose preset. Defaults to `tailwindui`. An object can also be used to override some parts of the default preset.</p>
+
     <p>- `prefix`</p>
 
     <p>Define the prefix of the imported components. Defaults to `u`.</p>
diff --git a/docs/pages/migration.vue b/docs/pages/migration.vue
index d4501035..e3c9d0b2 100644
--- a/docs/pages/migration.vue
+++ b/docs/pages/migration.vue
@@ -20,7 +20,10 @@
               Component
             </th>
             <th scope="col" class="px-6 py-3 text-left text-xs font-medium u-text-gray-500 uppercase tracking-wider">
-              Ready?
+              Composition API
+            </th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium u-text-gray-500 uppercase tracking-wider">
+              Preset system
             </th>
           </tr>
         </thead>
@@ -32,7 +35,11 @@
               </NuxtLink>
             </td>
             <td class="px-6 py-4 whitespace-nowrap text-sm u-text-gray-500">
-              <span v-if="component.ready">✅</span>
+              <span v-if="component.capi">✅</span>
+              <span v-else>❌</span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm u-text-gray-500">
+              <span v-if="component.preset">✅</span>
               <span v-else>❌</span>
             </td>
           </tr>
@@ -63,12 +70,12 @@ const components = [
   {
     label: 'Dropdown',
     to: '/components/Dropdown',
-    ready: true
+    capi: true
   },
   {
     label: 'Icon',
     to: '/components/Icon',
-    ready: true
+    capi: true
   },
   {
     label: 'Link',
@@ -89,7 +96,8 @@ const components = [
   {
     label: 'Input',
     to: '/components/Input',
-    ready: true
+    capi: true,
+    preset: true
   },
   {
     label: 'InputGroup',
@@ -105,7 +113,9 @@ const components = [
   },
   {
     label: 'Select',
-    to: '/components/Select'
+    to: '/components/Select',
+    capi: true,
+    preset: true
   },
   {
     label: 'SelectCustom',
@@ -114,17 +124,18 @@ const components = [
   {
     label: 'Textarea',
     to: '/components/Textarea',
-    ready: true
+    capi: true,
+    preset: true
   },
   {
     label: 'Card',
     to: '/components/Card',
-    ready: true
+    capi: true
   },
   {
     label: 'Container',
     to: '/components/Container',
-    ready: true
+    capi: true
   },
   {
     label: 'Pills',
@@ -141,7 +152,7 @@ const components = [
   {
     label: 'Modal',
     to: '/components/Modal',
-    ready: true
+    capi: true
   },
   {
     label: 'Notification',
@@ -150,7 +161,7 @@ const components = [
   {
     label: 'Popover',
     to: '/components/Popover',
-    ready: true
+    capi: true
   },
   {
     label: 'Slideover',
diff --git a/package.json b/package.json
index 4d844f82..ec8297b8 100644
--- a/package.json
+++ b/package.json
@@ -28,13 +28,15 @@
     "@iconify-json/heroicons-solid": "^1.0.2",
     "@popperjs/core": "^2.10.2",
     "@unocss/nuxt": "^0.12.9",
+    "defu": "^5.0.0",
     "gradient-avatar": "^1.0.2",
+    "lodash": "^4.17.21",
     "pathe": "^0.2.0"
   },
   "devDependencies": {
-    "@vueuse/core": "^7.1.1",
-    "@vueuse/components": "^7.1.1",
     "@nuxtjs/eslint-config-typescript": "7.0.2",
+    "@vueuse/components": "^7.1.1",
+    "@vueuse/core": "^7.1.1",
     "eslint": "8.3.0",
     "nuxt3": "3.0.0-27296423.f3082ca",
     "unbuild": "0.5.13"
diff --git a/src/components/forms/Input.vue b/src/components/forms/Input.vue
index 7fad081d..169ffd94 100644
--- a/src/components/forms/Input.vue
+++ b/src/components/forms/Input.vue
@@ -1,14 +1,7 @@
 <template>
   <div :class="wrapperClass">
-    <div
-      v-if="isLeading"
-      class="absolute inset-y-0 left-0 flex items-center pointer-events-none"
-    >
-      <Icon
-        :name="iconName"
-        class="u-text-gray-400"
-        :class="iconClass"
-      />
+    <div v-if="isLeading" :class="iconLeadingWrapperClass">
+      <Icon :name="iconName" :class="iconClass" />
     </div>
     <input
       :id="name"
@@ -22,21 +15,14 @@
       :readonly="readonly"
       :autocomplete="autocomplete"
       :spellcheck="spellcheck"
-      :class="[baseClass, sizeClass, paddingClass, paddingIconClass, appearanceClass, customClass]"
+      :class="inputClass"
       @input="onInput($event.target.value)"
       @focus="$emit('focus', $event)"
       @blur="$emit('blur', $event)"
     >
     <slot />
-    <div
-      v-if="isTrailing"
-      class="absolute inset-y-0 right-0 flex items-center pointer-events-none"
-    >
-      <Icon
-        :name="iconName"
-        class="u-text-gray-400"
-        :class="iconClass"
-      />
+    <div v-if="isTrailing" :class="iconTrailingWrapperClass">
+      <Icon :name="iconName" :class="iconClass" />
     </div>
   </div>
 </template>
@@ -44,6 +30,8 @@
 <script>
 import { ref, computed, onMounted } from 'vue'
 import Icon from '../elements/Icon'
+import { classNames } from '../../utils'
+import $ui from '#build/ui'
 
 export default {
   components: {
@@ -96,7 +84,7 @@ export default {
     },
     loadingIcon: {
       type: String,
-      default: null
+      default: 'heroicons-outline:refresh'
     },
     trailing: {
       type: Boolean,
@@ -110,16 +98,20 @@ export default {
       type: String,
       default: 'md',
       validator (value) {
-        return ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+        return Object.keys($ui.input.size).includes(value)
       }
     },
     wrapperClass: {
       type: String,
-      default: 'relative'
+      default: $ui.input.wrapper
     },
     baseClass: {
       type: String,
-      default: 'block w-full u-bg-white u-text-gray-700 disabled:cursor-not-allowed disabled:u-bg-gray-50 focus:outline-none'
+      default: () => $ui.input.base
+    },
+    iconBaseClass: {
+      type: String,
+      default: () => $ui.input.icon.base
     },
     customClass: {
       type: String,
@@ -129,7 +121,7 @@ export default {
       type: String,
       default: 'default',
       validator (value) {
-        return ['default', 'none'].includes(value)
+        return Object.keys($ui.input.appearance).includes(value)
       }
     },
     loading: {
@@ -157,50 +149,6 @@ export default {
       }, 100)
     })
 
-    const sizeClass = computed(() => ({
-      xxs: 'text-xs',
-      xs: 'text-xs',
-      sm: 'text-sm leading-4',
-      md: 'text-sm',
-      lg: 'text-base',
-      xl: 'text-base'
-    })[props.size])
-
-    const paddingClass = computed(() => ({
-      xxs: 'px-1 py-0.5',
-      xs: 'px-2.5 py-1.5',
-      sm: 'px-3 py-2',
-      md: 'px-4 py-2',
-      lg: 'px-4 py-2',
-      xl: 'px-6 py-3'
-    })[props.size])
-
-    const appearanceClass = computed(() => ({
-      default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm',
-      none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
-    })[props.appearance])
-
-    const paddingIconClass = computed(() => {
-      return [
-        props.isLeading && ({
-          xxs: 'pl-7',
-          xs: 'pl-7',
-          sm: 'pl-10',
-          md: 'pl-10',
-          lg: 'pl-10',
-          xl: 'pl-10'
-        })[props.size],
-        props.isTrailing && ({
-          xxs: 'pr-10',
-          xs: 'pr-10',
-          sm: 'pr-10',
-          md: 'pr-10',
-          lg: 'pr-10',
-          xl: 'pr-10'
-        })[props.size]
-      ].join(' ')
-    })
-
     const isLeading = computed(() => {
       return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing)
     })
@@ -209,55 +157,47 @@ export default {
       return (props.icon && props.trailing) || (props.loading && props.trailing)
     })
 
+    const inputClass = computed(() => {
+      return classNames(
+        props.baseClass,
+        $ui.input.size[props.size],
+        $ui.input.spacing[props.size],
+        $ui.input.appearance[props.appearance],
+        isLeading.value && $ui.input.leading.spacing[props.size],
+        isTrailing.value && $ui.input.trailing.spacing[props.size],
+        props.customClass
+      )
+    })
+
     const iconName = computed(() => {
       if (props.loading) {
-        return props.loadingIcon || 'custom/loading'
+        return props.loadingIcon
       }
 
       return props.icon
     })
 
     const iconClass = computed(() => {
-      return [
-        ({
-          xxs: 'h-3 w-3',
-          xs: 'h-4 w-4',
-          sm: 'h-5 w-5',
-          md: 'h-5 w-5',
-          lg: 'h-5 w-5',
-          xl: 'h-5 w-5'
-        })[props.size || 'sm'],
-        props.isLeading && ({
-          xxs: 'ml-2',
-          xs: 'ml-2',
-          sm: 'ml-3',
-          md: 'ml-3',
-          lg: 'ml-3',
-          xl: 'ml-3'
-        })[props.size || 'sm'],
-        props.isTrailing && ({
-          xxs: 'mr-2',
-          xs: 'mr-2',
-          sm: 'mr-3',
-          md: 'mr-3',
-          lg: 'mr-3',
-          xl: 'mr-3'
-        })[props.size || 'sm'],
-        ({
-          true: 'animate-spin'
-        })[props.loading]
-      ]
+      return classNames(
+        props.iconBaseClass,
+        $ui.input.icon.size[props.size],
+        isLeading.value && $ui.input.icon.leading.spacing[props.size],
+        isTrailing.value && $ui.input.icon.trailing.spacing[props.size],
+        props.loading && 'animate-spin'
+      )
     })
 
+    const iconLeadingWrapperClass = $ui.input.icon.leading.wrapper
+    const iconTrailingWrapperClass = $ui.input.icon.trailing.wrapper
+
     return {
       input,
       onInput,
-      sizeClass,
-      paddingClass,
-      paddingIconClass,
-      appearanceClass,
-      iconClass,
+      inputClass,
       iconName,
+      iconClass,
+      iconLeadingWrapperClass,
+      iconTrailingWrapperClass,
       isLeading,
       isTrailing
     }
diff --git a/src/components/forms/Select.vue b/src/components/forms/Select.vue
index 3657fa8c..ea12b08e 100644
--- a/src/components/forms/Select.vue
+++ b/src/components/forms/Select.vue
@@ -1,13 +1,16 @@
 <template>
   <div :class="wrapperClass">
+    <div v-if="icon" :class="iconWrapperClass">
+      <Icon :name="icon" :class="iconClass" />
+    </div>
+
     <select
       :id="name"
       :name="name"
       :required="required"
       :disabled="disabled"
-      :readonly="readonly"
       :class="selectClass"
-      @input="updateValue($event.target.value)"
+      @input="onInput($event.target.value)"
     >
       <template v-for="(option, index) in normalizedOptionsWithPlaceholder">
         <optgroup
@@ -33,16 +36,14 @@
         />
       </template>
     </select>
-    <div v-if="icon" class="absolute inset-y-0 left-0 flex items-center pointer-events-none" :class="iconPadding">
-      <Icon :name="icon" :class="iconClass" />
-    </div>
   </div>
 </template>
 
 <script>
 import get from 'lodash/get'
-
 import Icon from '../elements/Icon'
+import { classNames } from '../../utils'
+import $ui from '#build/ui'
 
 export default {
   components: {
@@ -73,24 +74,24 @@ export default {
       type: Array,
       default: () => []
     },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
     size: {
       type: String,
       default: 'md',
       validator (value) {
-        return ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+        return Object.keys($ui.select.size).includes(value)
       }
     },
     wrapperClass: {
       type: String,
-      default: 'relative'
+      default: $ui.select.wrapper
     },
     baseClass: {
       type: String,
-      default: 'block w-full disabled:cursor-not-allowed u-bg-white u-text-gray-700 disabled:u-bg-gray-50 focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm focus:outline-none'
+      default: $ui.select.base
+    },
+    iconBaseClass: {
+      type: String,
+      default: $ui.select.icon.base
     },
     customClass: {
       type: String,
@@ -110,101 +111,97 @@ export default {
     }
   },
   emits: ['update:modelValue'],
-  computed: {
-    sizeClass () {
-      return {
-        xxs: 'text-xs',
-        xs: 'text-xs',
-        sm: 'text-sm leading-4',
-        md: 'text-sm',
-        lg: 'text-base',
-        xl: 'text-base'
-      }[this.size]
-    },
-    paddingClass () {
-      return ({
-        xxs: `${this.icon ? 'pl-7' : 'pl-2'} pr-7 py-1.5`,
-        xs: `${this.icon ? 'pl-8' : 'pl-3'} pr-9 py-1.5`,
-        sm: `${this.icon ? 'pl-8' : 'pl-3'} pr-9 py-2`,
-        md: `${this.icon ? 'pl-10' : 'pl-3'} pr-10 py-2`,
-        lg: `${this.icon ? 'pl-10' : 'pl-3'} pr-10 py-2`,
-        xl: `${this.icon ? 'pl-12' : 'pl-4'} pr-12 py-3`
-      })[this.size]
-    },
-    iconClass () {
-      return ({
-        xxs: 'w-3 h-3',
-        xs: 'w-4 h-4',
-        sm: 'w-4 h-4',
-        md: 'w-5 h-5',
-        lg: 'w-5 h-5',
-        xl: 'w-5 h-5'
-      })[this.size]
-    },
-    iconPadding () {
-      return ({
-        xxs: 'pl-3',
-        xs: 'pl-3',
-        sm: 'pl-3',
-        md: 'pl-3',
-        lg: 'pl-3',
-        xl: 'pl-4'
-      })[this.size]
-    },
-    selectClass () {
-      return [
-        this.baseClass,
-        this.customClass,
-        this.sizeClass,
-        this.paddingClass
-      ].join(' ')
-    },
-    normalizedOptions () {
-      return this.options.map(option => this.normalizeOption(option))
-    },
-    normalizedOptionsWithPlaceholder () {
-      if (!this.placeholder) {
-        return this.normalizedOptions
-      }
-      const { normalizedOptions } = this
-      normalizedOptions.unshift({
-        [this.valueAttribute]: null,
-        [this.textAttribute]: this.placeholder
-      })
-      return normalizedOptions
-    },
-    normalizedValue () {
-      const foundOption = this.normalizedOptionsWithPlaceholder.find(option => option.value === this.modelValue)
-      if (!foundOption) {
-        return null
-      }
+  setup (props, { emit }) {
+    const select = ref(null)
 
-      return foundOption.value
+    const onInput = (value) => {
+      emit('update:modelValue', value)
     }
-  },
-  methods: {
-    guessOptionValue (option) {
-      return get(option, this.valueAttribute, get(option, this.textAttribute))
-    },
-    guessOptionText (option) {
-      return get(option, this.textAttribute, get(option, this.valueAttribute))
-    },
-    normalizeOption (option) {
+
+    const guessOptionValue = (option) => {
+      return get(option, props.valueAttribute, get(option, props.textAttribute))
+    }
+
+    const guessOptionText = (option) => {
+      return get(option, props.textAttribute, get(option, props.valueAttribute))
+    }
+
+    const normalizeOption = (option) => {
       if (['string', 'number', 'boolean'].includes(typeof option)) {
         return {
-          [this.valueAttribute]: option,
-          [this.textAttribute]: option
+          [props.valueAttribute]: option,
+          [props.textAttribute]: option
         }
       }
 
       return {
         ...option,
-        [this.valueAttribute]: this.guessOptionValue(option),
-        [this.textAttribute]: this.guessOptionText(option)
+        [props.valueAttribute]: guessOptionValue(option),
+        [props.textAttribute]: guessOptionText(option)
       }
-    },
-    updateValue (value) {
-      this.$emit('update:modelValue', value)
+    }
+
+    const normalizedOptions = computed(() => {
+      return props.options.map(option => normalizeOption(option))
+    })
+
+    const normalizedOptionsWithPlaceholder = computed(() => {
+      if (!props.placeholder) {
+        return normalizedOptions.value
+      }
+
+      return [
+        {
+          [props.valueAttribute]: null,
+          [props.textAttribute]: props.placeholder
+        },
+        ...normalizedOptions.value
+      ]
+    })
+
+    const normalizedValue = computed(() => {
+      const foundOption = normalizedOptionsWithPlaceholder.value.find(option => option.value === props.modelValue)
+      if (!foundOption) {
+        return null
+      }
+
+      return foundOption.value
+    })
+
+    const selectClass = computed(() => {
+      return classNames(
+        props.baseClass,
+        $ui.select.size[props.size],
+        $ui.select.spacing[props.size],
+        $ui.select.appearance.default,
+        !!props.icon && $ui.select.leading.spacing[props.size],
+        $ui.select.trailing.spacing[props.size],
+        props.customClass
+      )
+    })
+
+    const iconClass = computed(() => {
+      return classNames(
+        props.iconBaseClass,
+        $ui.select.icon.size[props.size],
+        !!props.icon && $ui.select.icon.leading.spacing[props.size]
+      )
+    })
+
+    const iconWrapperClass = $ui.select.icon.leading.base
+
+    return {
+      select,
+      onInput,
+      guessOptionValue,
+      guessOptionText,
+      normalizeOption,
+      normalizedOptions,
+      normalizedOptionsWithPlaceholder,
+      normalizedValue,
+      selectClass,
+      iconClass,
+      iconWrapperClass
     }
   }
 }
diff --git a/src/components/forms/Textarea.vue b/src/components/forms/Textarea.vue
index 6e6a43e9..311bf4b8 100644
--- a/src/components/forms/Textarea.vue
+++ b/src/components/forms/Textarea.vue
@@ -10,7 +10,7 @@
       :disabled="disabled"
       :placeholder="placeholder"
       :autocomplete="autocomplete"
-      :class="[baseClass, customClass, sizeClass, paddingClass, appearanceClass, resizeClass]"
+      :class="textareaClass"
       @input="onInput($event.target.value)"
       @focus="$emit('focus', $event)"
       @blur="$emit('blur', $event)"
@@ -20,6 +20,8 @@
 
 <script>
 import { ref, computed, onMounted } from 'vue'
+import { classNames } from '../../utils'
+import $ui from '#build/ui'
 
 export default {
   props: {
@@ -63,7 +65,7 @@ export default {
       type: String,
       default: 'default',
       validator (value) {
-        return ['default', 'none'].includes(value)
+        return Object.keys($ui.textarea.appearance).includes(value)
       }
     },
     resize: {
@@ -74,16 +76,16 @@ export default {
       type: String,
       default: 'md',
       validator (value) {
-        return ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+        return Object.keys($ui.textarea.size).includes(value)
       }
     },
     wrapperClass: {
       type: String,
-      default: 'relative'
+      default: $ui.textarea.wrapper
     },
     baseClass: {
       type: String,
-      default: 'block w-full u-bg-white u-text-gray-700 disabled:cursor-not-allowed disabled:u-bg-gray-50 focus:outline-none'
+      default: $ui.textarea.base
     },
     customClass: {
       type: String,
@@ -127,40 +129,21 @@ export default {
       }, 100)
     })
 
-    const sizeClass = computed(() => ({
-      xxs: 'text-xs',
-      xs: 'text-xs',
-      sm: 'text-sm leading-4',
-      md: 'text-sm',
-      lg: 'text-base',
-      xl: 'text-base'
-    })[props.size])
-
-    const paddingClass = computed(() => ({
-      xxs: 'px-1 py-0.5',
-      xs: 'px-2.5 py-1.5',
-      sm: 'px-3 py-2',
-      md: 'px-4 py-2',
-      lg: 'px-4 py-2',
-      xl: 'px-6 py-3'
-    })[props.size])
-
-    const appearanceClass = computed(() => ({
-      default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm',
-      none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
-    })[props.appearance])
-
-    const resizeClass = computed(() => {
-      return props.resize ? '' : 'resize-none'
+    const textareaClass = computed(() => {
+      return classNames(
+        props.baseClass,
+        $ui.textarea.size[props.size],
+        $ui.textarea.spacing[props.size],
+        $ui.textarea.appearance[props.appearance],
+        !props.resize && 'resize-none',
+        props.customClass
+      )
     })
 
     return {
       textarea,
       onInput,
-      sizeClass,
-      paddingClass,
-      appearanceClass,
-      resizeClass
+      textareaClass
     }
   }
 }
diff --git a/src/index.ts b/src/index.ts
index 149806af..1ed5e865 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,7 @@
 import { resolve } from 'pathe'
-import { defineNuxtModule, installModule, addComponentsDir } from '@nuxt/kit'
+import { defineNuxtModule, installModule, addComponentsDir, addTemplate } from '@nuxt/kit'
 import { colors } from '@unocss/preset-uno'
+import defu from 'defu'
 import type { UnocssNuxtOptions } from '@unocss/nuxt'
 
 export interface UiColorsOptions {
@@ -17,8 +18,11 @@ export interface UiColorsOptions {
 
 export interface UiOptions {
   /**
-   * Prefix of injected components.
-   *
+   * @default 'tailwindui'
+   */
+  preset?: string | object
+
+  /**
    * @default 'u'
    */
   prefix?: string
@@ -28,24 +32,27 @@ export interface UiOptions {
   unocss?: UnocssNuxtOptions
 }
 
+const defaults = {
+  preset: 'tailwindui',
+  prefix: 'u',
+  colors: {
+    primary: 'indigo',
+    gray: 'zinc'
+  },
+  unocss: {
+    shortcuts: [],
+    rules: [],
+    variants: [],
+    theme: {}
+  }
+}
+
 export default defineNuxtModule<UiOptions>({
   name: '@nuxthq/ui',
   configKey: 'ui',
-  defaults: {
-    prefix: 'u',
-    colors: {
-      primary: 'indigo',
-      gray: 'zinc'
-    },
-    unocss: {
-      shortcuts: [],
-      rules: [],
-      variants: [],
-      theme: {}
-    }
-  },
+  defaults,
   async setup (_options, nuxt) {
-    const { prefix, colors: { primary = 'indigo', gray = 'zinc' } = {} } = _options
+    const { preset, prefix, colors: { primary = 'indigo', gray = 'zinc' } = {} } = _options
     const { shortcuts = [], rules = [], variants = [], theme = {} } = _options.unocss || {}
 
     const options: UnocssNuxtOptions = {
@@ -134,7 +141,18 @@ export default defineNuxtModule<UiOptions>({
         }],
         ...rules
       ],
-      variants,
+      variants: [
+        // disabled:
+        (matcher) => {
+          if (!matcher.startsWith('disabled:')) { return matcher }
+          return {
+            // slice `disabled:` prefix and passed to the next variants and rules
+            matcher: matcher.slice(9),
+            selector: s => `${s}:disabled`
+          }
+        },
+        ...variants
+      ],
       layers: {
         icons: 0,
         default: 1,
@@ -144,6 +162,24 @@ export default defineNuxtModule<UiOptions>({
 
     await installModule(nuxt, { src: '@unocss/nuxt', options })
 
+    let ui: object = {}
+    try {
+      if (typeof preset === 'object') {
+        ui = await import(resolve(__dirname, `./presets/${defaults.preset}`))
+
+        ui = defu(preset, ui)
+      } else {
+        ui = await import(resolve(__dirname, `./presets/${preset}`))
+      }
+    } catch (e) {
+      ui = await import(resolve(__dirname, `./presets/${defaults.preset}`))
+    }
+
+    addTemplate({
+      filename: 'ui.mjs',
+      getContents: () => `/* @unocss-include */ export default ${JSON.stringify(ui)}`
+    })
+
     addComponentsDir({
       path: resolve(__dirname, './components/elements'),
       prefix,
@@ -183,4 +219,7 @@ declare module '@nuxt/schema' {
   interface NuxtConfig {
     ui?: UiOptions
   }
+  interface NuxtOptions {
+    ui?: UiOptions
+  }
 }
diff --git a/src/presets/tailwindui.ts b/src/presets/tailwindui.ts
new file mode 100644
index 00000000..6f3f419e
--- /dev/null
+++ b/src/presets/tailwindui.ts
@@ -0,0 +1,96 @@
+const input = {
+  wrapper: 'relative',
+  base: 'block w-full u-bg-white u-text-gray-700 disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none',
+  size: {
+    xxs: 'text-xs',
+    xs: 'text-xs',
+    sm: 'text-sm leading-4',
+    md: 'text-sm',
+    lg: 'text-base',
+    xl: 'text-base'
+  },
+  spacing: {
+    xxs: 'px-1 py-0.5',
+    xs: 'px-2.5 py-1.5',
+    sm: 'px-3 py-2',
+    md: 'px-4 py-2',
+    lg: 'px-4 py-2',
+    xl: 'px-6 py-3'
+  },
+  leading: {
+    spacing: {
+      xxs: 'pl-7',
+      xs: 'pl-7',
+      sm: 'pl-10',
+      md: 'pl-10',
+      lg: 'pl-10',
+      xl: 'pl-10'
+    }
+  },
+  trailing: {
+    spacing: {
+      xxs: 'pr-7',
+      xs: 'pr-7',
+      sm: 'pr-10',
+      md: 'pr-10',
+      lg: 'pr-10',
+      xl: 'pr-10'
+    }
+  },
+  appearance: {
+    default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm',
+    none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
+  },
+  icon: {
+    base: 'u-text-gray-400',
+    size: {
+      xxs: 'h-3 w-3',
+      xs: 'h-4 w-4',
+      sm: 'h-5 w-5',
+      md: 'h-5 w-5',
+      lg: 'h-5 w-5',
+      xl: 'h-5 w-5'
+    },
+    leading: {
+      wrapper: 'absolute inset-y-0 left-0 flex items-center pointer-events-none',
+      spacing: {
+        xxs: 'ml-2',
+        xs: 'ml-2',
+        sm: 'ml-3',
+        md: 'ml-3',
+        lg: 'ml-3',
+        xl: 'ml-3'
+      }
+    },
+    trailing: {
+      wrapper: 'absolute inset-y-0 right-0 flex items-center pointer-events-none',
+      spacing: {
+        xxs: 'mr-2',
+        xs: 'mr-2',
+        sm: 'mr-3',
+        md: 'mr-3',
+        lg: 'mr-3',
+        xl: 'mr-3'
+      }
+    }
+  }
+}
+
+const textarea = {
+  ...input
+}
+
+const select = {
+  ...input
+}
+
+const button = {
+  base: ''
+}
+
+export default {
+  input,
+  textarea,
+  select,
+  button
+}