chore: rename spacing to padding

docs/components/docs/DocsAsideLinks.vue

@@ -10,7 +10,7 @@
         class="mt-1"
         :ui="{
           wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
-          spacing: 'pl-4',
+          padding: 'pl-4',
           base: 'group text-sm block border-l -ml-px lg:leading-6',
           active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
           inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'

docs/components/docs/DocsSearch.vue

@@ -2,7 +2,7 @@
   <UModal
     v-model="isSearchModalOpen"
     :ui="{
-      spacing: 'sm:p-4',
+      padding: 'sm:p-4',
       rounded: 'sm:rounded-lg',
       width: 'sm:max-w-3xl',
       height: 'h-screen sm:h-[28rem]'

src/runtime/app.config.ts

@@ -92,7 +92,7 @@ const button = {
     lg: 'gap-x-2',
     xl: 'gap-x-2'
   },
-  spacing: {
+  padding: {
     '2xs': 'px-2 py-1',
     xs: 'px-2.5 py-1.5',
     sm: 'px-3 py-1.5',
@@ -165,11 +165,11 @@ const dropdown = {
   ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
   base: 'focus:outline-none',
   divide: 'divide-y divide-gray-200 dark:divide-gray-700',
-  spacing: 'p-1',
+  padding: 'p-1',
   item: {
     base: 'group flex items-center gap-2 w-full',
     rounded: 'rounded-md',
-    spacing: 'px-2 py-1.5',
+    padding: 'px-2 py-1.5',
     size: 'text-sm',
     active: 'bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white',
     inactive: 'text-gray-700 dark:text-gray-200',
@@ -201,7 +201,7 @@ const dropdown = {
 
 const kbd = {
   base: 'inline-flex items-center justify-center text-gray-900 dark:text-white',
-  spacing: 'px-1',
+  padding: 'px-1',
   size: {
     xs: 'h-4 min-w-[16px] text-[10px]',
     sm: 'h-5 min-w-[20px] text-[11px]',
@@ -238,7 +238,7 @@ const input = {
     lg: 'gap-x-2',
     xl: 'gap-x-2'
   },
-  spacing: {
+  padding: {
     '2xs': 'px-2 py-1',
     xs: 'px-2.5 py-1.5',
     sm: 'px-3 py-1.5',
@@ -247,7 +247,7 @@ const input = {
     xl: 'px-4 py-3'
   },
   leading: {
-    spacing: {
+    padding: {
       '2xs': 'pl-[26px]',
       xs: 'pl-8',
       sm: 'pl-9',
@@ -257,7 +257,7 @@ const input = {
     }
   },
   trailing: {
-    spacing: {
+    padding: {
       '2xs': 'pr-[26px]',
       xs: 'pr-8',
       sm: 'pr-9',
@@ -283,7 +283,7 @@ const input = {
     },
     leading: {
       wrapper: 'absolute inset-y-0 left-0 flex items-center pointer-events-none',
-      spacing: {
+      padding: {
         '2xs': 'pl-2',
         xs: 'pl-2.5',
         sm: 'pl-3',
@@ -294,7 +294,7 @@ const input = {
     },
     trailing: {
       wrapper: 'absolute inset-y-0 right-0 flex items-center pointer-events-none',
-      spacing: {
+      padding: {
         '2xs': 'pr-2',
         xs: 'pr-2.5',
         sm: 'pr-3',
@@ -339,13 +339,13 @@ const selectMenu = {
   background: 'bg-white dark:bg-gray-800',
   shadow: 'shadow-lg',
   rounded: 'rounded-md',
-  spacing: 'p-1',
+  padding: 'p-1',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
   input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500',
   option: {
     base: 'cursor-default select-none relative flex items-center justify-between gap-1',
     rounded: 'rounded-md',
-    spacing: 'px-2 py-1.5',
+    padding: 'px-2 py-1.5',
     size: 'text-sm',
     color: 'text-gray-900 dark:text-white',
     container: 'flex items-center gap-2',
@@ -426,23 +426,23 @@ const card = {
   body: {
     base: '',
     background: '',
-    spacing: 'px-4 py-5 sm:p-6'
+    padding: 'px-4 py-5 sm:p-6'
   },
   header: {
     base: '',
     background: '',
-    spacing: 'px-4 py-5 sm:px-6'
+    padding: 'px-4 py-5 sm:px-6'
   },
   footer: {
     base: '',
     background: '',
-    spacing: 'px-4 py-4 sm:px-6'
+    padding: 'px-4 py-4 sm:px-6'
   }
 }
 
 const container = {
   base: 'mx-auto',
-  spacing: 'px-4 sm:px-6 lg:px-8',
+  padding: 'px-4 sm:px-6 lg:px-8',
   constrained: 'max-w-7xl'
 }
 
@@ -451,7 +451,7 @@ const container = {
 const verticalNavigation = {
   wrapper: 'relative',
   base: 'group flex items-center gap-2 text-sm font-medium rounded-md w-full relative focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 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',
-  spacing: 'px-3 py-1.5',
+  padding: 'px-3 py-1.5',
   active: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800 ',
   inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
   label: 'truncate relative',
@@ -476,9 +476,15 @@ const commandPalette = {
   container: 'relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2',
   input: {
     wrapper: 'relative flex items-center',
-    base: 'w-full h-12 px-4 placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0 sm:text-sm',
-    spacing: 'pl-10',
-    icon: 'pointer-events-none absolute left-4 h-4 w-4 text-gray-400 dark:text-gray-500',
+    base: 'w-full placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0',
+    padding: 'px-4',
+    height: 'h-12',
+    size: 'sm:text-sm',
+    icon: {
+      base: 'pointer-events-none absolute left-4 text-gray-400 dark:text-gray-500',
+      size: 'h-4 w-4',
+      padding: 'pl-10'
+    },
     close: 'absolute right-4'
   },
   empty: {
@@ -538,7 +544,7 @@ 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',
-  spacing: 'p-4 sm:p-0',
+  padding: 'p-4 sm:p-0',
   base: 'relative text-left overflow-hidden sm:my-8 w-full flex flex-col',
   overlay: {
     base: 'fixed inset-0 transition-opacity',
@@ -586,11 +592,12 @@ const slideover = {
   background: 'bg-white dark:bg-gray-900',
   ring: '',
   rounded: '',
+  padding: '',
   shadow: 'shadow-xl',
   width: 'w-screen max-w-md',
   transition: {
-    enter: 'transform transition ease-in-out duration-500 sm:duration-700',
-    leave: 'transform transition ease-in-out duration-500 sm:duration-700'
+    enter: 'transform transition ease-in-out duration-300',
+    leave: 'transform transition ease-in-out duration-200'
   }
 }
 

src/runtime/components/elements/Button.vue

@@ -178,7 +178,7 @@ export default defineComponent({
         ui.value.rounded,
         ui.value.size[props.size],
         ui.value.gap[props.size],
-        props.padded && ui.value[isSquare.value ? 'square' : 'spacing'][props.size],
+        props.padded && ui.value[isSquare.value ? 'square' : 'padding'][props.size],
         variant?.replaceAll('{color}', props.color),
         props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
       )

src/runtime/components/elements/Dropdown.vue

@@ -18,12 +18,12 @@
     <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" @mouseover="onMouseOver">
       <transition appear v-bind="ui.transition">
         <MenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background]" static>
-          <div v-for="(subItems, index) of items" :key="index" :class="ui.spacing">
+          <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
             <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
               <Component
                 v-bind="omit(item, ['click'])"
                 :is="(item.to && NuxtLink) || (item.click && 'button') || 'div'"
-                :class="[ui.item.base, ui.item.spacing, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
+                :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
                 @click="item.click"
               >
                 <slot :name="item.slot || 'item'" :item="item">

src/runtime/components/elements/Kbd.vue

@@ -1,5 +1,5 @@
 <template>
-  <kbd :class="[ui.base, ui.size[size], ui.spacing, ui.rounded, ui.font, ui.background, ui.ring]">
+  <kbd :class="[ui.base, ui.size[size], ui.padding, ui.rounded, ui.font, ui.background, ui.ring]">
     <slot />
   </kbd>
 </template>

src/runtime/components/forms/Input.vue

@@ -161,10 +161,10 @@ export default defineComponent({
       return classNames(
         ui.value.base,
         ui.value.size[props.size],
-        ui.value.spacing[props.size],
+        ui.value.padding[props.size],
         ui.value.appearance[props.appearance],
-        isLeading.value && ui.value.leading.spacing[props.size],
-        isTrailing.value && ui.value.trailing.spacing[props.size],
+        isLeading.value && ui.value.leading.padding[props.size],
+        isTrailing.value && ui.value.trailing.padding[props.size],
         ui.value.custom
       )
     })
@@ -204,14 +204,14 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return classNames(
         ui.value.icon.leading.wrapper,
-        ui.value.icon.leading.spacing[props.size]
+        ui.value.icon.leading.padding[props.size]
       )
     })
 
     const trailingIconClass = computed(() => {
       return classNames(
         ui.value.icon.trailing.wrapper,
-        ui.value.icon.trailing.spacing[props.size]
+        ui.value.icon.trailing.padding[props.size]
       )
     })
 

src/runtime/components/forms/Select.vue

@@ -187,10 +187,10 @@ export default defineComponent({
       return classNames(
         ui.value.base,
         ui.value.size[props.size],
-        ui.value.spacing[props.size],
+        ui.value.padding[props.size],
         ui.value.appearance[props.appearance],
-        !!props.icon && ui.value.leading.spacing[props.size],
-        ui.value.trailing.spacing[props.size],
+        !!props.icon && ui.value.leading.padding[props.size],
+        ui.value.trailing.padding[props.size],
         ui.value.custom
       )
     })
@@ -205,14 +205,14 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return classNames(
         ui.value.icon.leading.wrapper,
-        ui.value.icon.leading.spacing[props.size]
+        ui.value.icon.leading.padding[props.size]
       )
     })
 
     const trailingIconClass = computed(() => {
       return classNames(
         ui.value.icon.trailing.wrapper,
-        ui.value.icon.trailing.spacing[props.size]
+        ui.value.icon.trailing.padding[props.size]
       )
     })
 

src/runtime/components/forms/SelectMenu.vue

@@ -40,7 +40,7 @@
 
     <div v-if="open" ref="container" :class="[ui.container, ui.width]">
       <transition v-bind="ui.transition">
-        <component :is="searchable ? 'ComboboxOptions' : 'ListboxOptions'" static :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.spacing, ui.height]">
+        <component :is="searchable ? 'ComboboxOptions' : 'ListboxOptions'" static :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.padding, ui.height]">
           <ComboboxInput
             v-if="searchable"
             ref="searchInput"
@@ -61,7 +61,7 @@
             :value="option"
             :disabled="option.disabled"
           >
-            <li :class="[ui.option.base, ui.option.rounded, ui.option.spacing, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive, optionDisabled && ui.option.disabled]">
+            <li :class="[ui.option.base, ui.option.rounded, ui.option.padding, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive, optionDisabled && ui.option.disabled]">
               <div :class="ui.option.container">
                 <slot name="option" :option="option" :active="active" :selected="selected">
                   <UIcon v-if="option.icon" :name="option.icon" :class="[ui.option.icon.base, active ? ui.option.icon.active : ui.option.icon.inactive, option.iconClass]" aria-hidden="true" />
@@ -84,7 +84,7 @@
           </component>
 
           <component :is="searchable ? 'ComboboxOption' : 'ListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
-            <li :class="[ui.option.base, ui.option.rounded, ui.option.spacing, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive]">
+            <li :class="[ui.option.base, ui.option.rounded, ui.option.padding, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive]">
               <div :class="ui.option.container">
                 <slot name="option-create" :option="queryOption" :active="active" :selected="selected">
                   <span class="block truncate">Create "{{ queryOption[optionAttribute] }}"</span>
@@ -239,10 +239,10 @@ export default defineComponent({
         'text-left cursor-default',
         uiSelect.value.size[props.size],
         uiSelect.value.gap[props.size],
-        uiSelect.value.spacing[props.size],
+        uiSelect.value.padding[props.size],
         uiSelect.value.appearance[props.appearance],
-        !!props.icon && uiSelect.value.leading.spacing[props.size],
-        uiSelect.value.trailing.spacing[props.size],
+        !!props.icon && uiSelect.value.leading.padding[props.size],
+        uiSelect.value.trailing.padding[props.size],
         uiSelect.value.custom,
         'inline-flex items-center'
       )
@@ -258,14 +258,14 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return classNames(
         uiSelect.value.icon.leading.wrapper,
-        uiSelect.value.icon.leading.spacing[props.size]
+        uiSelect.value.icon.leading.padding[props.size]
       )
     })
 
     const trailingIconClass = computed(() => {
       return classNames(
         uiSelect.value.icon.trailing.wrapper,
-        uiSelect.value.icon.trailing.spacing[props.size]
+        uiSelect.value.icon.trailing.padding[props.size]
       )
     })
 

src/runtime/components/forms/Textarea.vue

@@ -149,7 +149,7 @@ export default defineComponent({
       return classNames(
         ui.value.base,
         ui.value.size[props.size],
-        ui.value.spacing[props.size],
+        ui.value.padding[props.size],
         ui.value.appearance[props.appearance],
         !props.resize && 'resize-none',
         ui.value.custom

src/runtime/components/layout/Card.vue

@@ -4,13 +4,13 @@
     :class="[ui.base, ui.rounded, ui.divide, ui.ring, ui.shadow, ui.background]"
     v-bind="$attrs"
   >
-    <div v-if="$slots.header" :class="[ui.header.base, ui.header.spacing, ui.header.background]">
+    <div v-if="$slots.header" :class="[ui.header.base, ui.header.padding, ui.header.background]">
       <slot name="header" />
     </div>
-    <div :class="[ui.body.base, ui.body.spacing, ui.body.background]">
+    <div :class="[ui.body.base, ui.body.padding, ui.body.background]">
       <slot />
     </div>
-    <div v-if="$slots.footer" :class="[ui.footer.base, ui.footer.spacing, ui.footer.background]">
+    <div v-if="$slots.footer" :class="[ui.footer.base, ui.footer.padding, ui.footer.background]">
       <slot name="footer" />
     </div>
   </component>

src/runtime/components/layout/Container.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[ui.base, ui.spacing, ui.constrained]">
+  <div :class="[ui.base, ui.padding, ui.constrained]">
     <slot />
   </div>
 </template>

src/runtime/components/navigation/CommandPalette.vue

@@ -9,11 +9,11 @@
   >
     <div :class="ui.wrapper">
       <div v-if="searchable" :class="ui.input.wrapper">
-        <UIcon v-if="icon" :name="icon" :class="ui.input.icon" aria-hidden="true" />
+        <UIcon v-if="icon" :name="icon" :class="[ui.input.icon.base, ui.input.icon.size]" aria-hidden="true" />
         <ComboboxInput
           ref="comboboxInput"
           :value="query"
-          :class="[ui.input.base, icon && ui.input.spacing]"
+          :class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding]"
           :placeholder="placeholder"
           autocomplete="off"
           @change="query = $event.target.value"

src/runtime/components/navigation/VerticalNavigation.vue

@@ -5,7 +5,7 @@
       v-slot="{ isActive }"
       :key="index"
       v-bind="link"
-      :class="[ui.base, ui.spacing]"
+      :class="[ui.base, ui.padding]"
       :active-class="ui.active"
       :inactive-class="ui.inactive"
       @click="link.click && link.click()"

src/runtime/components/overlays/Modal.vue

@@ -6,7 +6,7 @@
       </TransitionChild>
 
       <div :class="ui.inner">
-        <div :class="[ui.container, ui.spacing]">
+        <div :class="[ui.container, ui.padding]">
           <TransitionChild as="template" :appear="appear" v-bind="ui.transition">
             <DialogPanel :class="[ui.base, ui.width, ui.height, ui.background, ui.ring, ui.rounded, ui.shadow]">
               <slot />

src/runtime/components/overlays/Slideover.vue

@@ -6,7 +6,7 @@
       </TransitionChild>
 
       <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-        <DialogPanel :class="[ui.base, ui.width, ui.background, ui.ring]">
+        <DialogPanel :class="[ui.base, ui.width, ui.background, ui.ring, ui.padding]">
           <slot />
         </DialogPanel>
       </TransitionChild>