Revert "chore: move to tsup"

This reverts commit 65a6aa5fda.

src/components/elements/Avatar.vue

@@ -0,0 +1,158 @@
+<template>
+  <span class="relative inline-flex items-center justify-center" :class="avatarClass" @click="goto">
+    <img v-if="url" :src="url" :alt="alt" :class="[sizeClass, roundedClass]">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <span v-else-if="gradientPlaceholder" class="w-full h-full overflow-hidden" :class="roundedClass" v-html="gradientPlaceholder" />
+    <span
+      v-else-if="placeholder"
+      class="font-medium leading-none text-white uppercase"
+    >{{ placeholder }}</span>
+    <svg
+      v-else
+      class="w-full h-full text-tw-gray-300"
+      :class="roundedClass"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"
+      />
+    </svg>
+
+    <span
+      v-if="status"
+      class="absolute top-0 right-0 block rounded-full ring-1 ring-white dark:ring-black"
+      :class="statusClass"
+    />
+  </span>
+</template>
+
+<script>
+import avatar from 'gradient-avatar'
+
+export default {
+  props: {
+    src: {
+      type: [String, Boolean],
+      default: null
+    },
+    alt: {
+      type: String,
+      default: null
+    },
+    to: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['xxxs', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].includes(value)
+      }
+    },
+    rounded: {
+      type: Boolean,
+      default: false
+    },
+    gradient: {
+      type: Boolean,
+      default: false
+    },
+    status: {
+      type: String,
+      default: null,
+      validator (value) {
+        return ['online', 'idle', 'invisible', 'donotdisturb', 'focus'].includes(value)
+      }
+    }
+  },
+  computed: {
+    url () {
+      if (typeof this.src === 'boolean') {
+        return null
+      }
+      return this.src
+    },
+    placeholder () {
+      if (!this.alt) {
+        return
+      }
+
+      return this.alt.split(' ').map(word => word.charAt(0)).join('')
+    },
+    gradientPlaceholder () {
+      if (!this.gradient) {
+        return
+      }
+
+      return avatar(this.alt || new Date().toString())
+    },
+    sizeClass () {
+      return ({
+        xxxs: 'h-4 w-4 text-xs',
+        xxs: 'h-5 w-5 text-xs',
+        xs: 'h-6 w-6 text-xs',
+        sm: 'h-8 w-8 text-sm',
+        md: 'h-10 w-10 text-md',
+        lg: 'h-12 w-12 text-lg',
+        xl: 'h-14 w-14 text-xl',
+        '2xl': 'h-16 w-16 text-2xl',
+        '3xl': 'h-20 w-20 text-3xl'
+      })[this.size]
+    },
+    roundedClass () {
+      return ({
+        true: 'rounded-lg',
+        false: 'rounded-full'
+      })[this.rounded]
+    },
+    placeholderClass () {
+      return ({
+        true: 'bg-gray-500 dark:bg-gray-900',
+        false: 'bg-tw-gray-100'
+      })[!!this.alt]
+    },
+    avatarClass () {
+      return [
+        this.sizeClass,
+        this.roundedClass,
+        this.placeholderClass,
+        this.to ? 'cursor-pointer' : ''
+      ].join(' ')
+    },
+    statusClass () {
+      return [
+        ({
+          online: 'bg-green-400',
+          idle: 'bg-yellow-400',
+          invisible: 'bg-tw-gray-300',
+          donotdisturb: 'bg-red-400',
+          focus: 'bg-primary-500'
+        })[this.status],
+        ({
+          xxxs: 'h-1 w-1',
+          xxs: 'h-1 w-1',
+          xs: 'h-1.5 w-1.5',
+          sm: 'h-2 w-2',
+          md: 'h-2.5 w-2.5',
+          lg: 'h-3 w-3',
+          xl: 'h-3.5 w-3.5',
+          '2xl': 'h-3.5 w-3.5',
+          '3xl': 'h-4 w-4'
+        })[this.size],
+        ({
+          true: 'transform -translate-y-1/2 translate-x-1/2'
+        })[this.rounded]
+      ].join(' ')
+    }
+  },
+  methods: {
+    goto (e) {
+      if (!this.to || !this.$router) { return }
+      e.preventDefault()
+      this.$router.push(this.to)
+    }
+  }
+}
+</script>

src/components/elements/AvatarGroup.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="flex">
+    <Avatar
+      v-for="(avatar, index) of displayedGroup"
+      :key="index"
+      :src="avatar.src"
+      class="shadow-solid -ml-1.5 first:ml-0"
+      :size="size"
+      :status="avatar.status"
+    />
+    <Avatar
+      v-if="remainingGroupSize > 0"
+      class="shadow-solid -ml-1.5 first:ml-0 text-[10px]"
+      :size="size"
+      :text="`+${remainingGroupSize}`"
+    />
+  </div>
+</template>
+
+<script>
+import Avatar from './Avatar.vue'
+
+export default {
+  components: {
+    Avatar
+  },
+  props: {
+    group: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['xxxs', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    max: {
+      type: Number,
+      default: null
+    }
+  },
+  computed: {
+    displayedGroup () {
+      if (!this.max) { return this.group }
+
+      return this.group.slice(0, this.max)
+    },
+    remainingGroupSize () {
+      if (!this.max) { return 0 }
+
+      return this.group.length - this.max
+    }
+
+  }
+}
+</script>

src/components/elements/Badge.vue

@@ -0,0 +1,72 @@
+<template>
+  <span class="inline-flex items-center font-medium" :class="badgeClass">
+    <slot>{{ label }}</slot>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['sm', 'md', 'lg'].includes(value)
+      }
+    },
+    variant: {
+      type: String,
+      default: 'primary',
+      validator (value) {
+        return ['primary', 'gray', 'red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink', 'gradient'].includes(value)
+      }
+    },
+    pill: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    sizeClass () {
+      return ({
+        sm: 'text-xs px-2 py-0.5',
+        md: 'text-sm px-2.5 py-0.5 leading-4',
+        lg: 'text-sm px-3 py-0.5 leading-5'
+      })[this.size]
+    },
+    variantClass () {
+      return ({
+        primary: 'bg-primary-100 dark:bg-primary-700 text-primary-800 dark:text-primary-100',
+        gray: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100',
+        red: 'bg-red-100 dark:bg-red-700 text-red-800 dark:text-red-100',
+        orange: 'bg-orange-100 dark:bg-orange-700 text-orange-800 dark:text-orange-100',
+        yellow: 'bg-yellow-100 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-100',
+        green: 'bg-green-100 dark:bg-green-700 text-green-800 dark:text-green-100',
+        teal: 'bg-teal-100 dark:bg-teal-700 text-teal-800 dark:text-teal-100',
+        blue: 'bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100',
+        indigo: 'bg-indigo-100 dark:bg-indigo-700 text-indigo-800 dark:text-indigo-100',
+        purple: 'bg-purple-100 dark:bg-purple-700 text-purple-800 dark:text-purple-100',
+        pink: 'bg-pink-100 dark:bg-pink-700 text-pink-800 dark:text-pink-100',
+        gradient: 'bg-gradient-to-r from-indigo-600 to-blue-600 text-white'
+      })[this.variant]
+    },
+    roundedClass () {
+      return ({
+        false: 'rounded',
+        true: 'rounded-full'
+      })[this.pill]
+    },
+    badgeClass () {
+      return [
+        this.sizeClass,
+        this.variantClass,
+        this.roundedClass
+      ].join(' ')
+    }
+  }
+}
+</script>

src/components/elements/Button.vue

@@ -0,0 +1,319 @@
+<template>
+  <component
+    :is="is"
+    :class="buttonClass"
+    :aria-label="ariaLabel"
+    v-bind="props"
+  >
+    <Icon v-if="isLeading" :name="iconName" :class="leadingIconClass" aria-hidden="true" />
+    <slot><span :class="truncate ? 'text-left break-all line-clamp-1' : ''">{{ label }}</span></slot>
+    <Icon v-if="isTrailing" :name="iconName" :class="trailingIconClass" aria-hidden="true" />
+  </component>
+</template>
+
+<script>
+import Icon from './Icon'
+
+export default {
+  components: {
+    Icon
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'button'
+    },
+    block: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    variant: {
+      type: String,
+      default: 'primary',
+      validator (value) {
+        return ['primary', 'secondary', 'danger', 'white', 'gray', 'gray-hover', 'white-hover', 'black', 'black-hover', 'transparent', 'link', 'gradient', 'custom'].includes(value)
+      }
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loadingIcon: {
+      type: String,
+      default: null
+    },
+    trailing: {
+      type: Boolean,
+      default: false
+    },
+    leading: {
+      type: Boolean,
+      default: false
+    },
+    href: {
+      type: String,
+      default: null
+    },
+    to: {
+      type: [String, Object],
+      default: null
+    },
+    target: {
+      type: String,
+      default: null
+    },
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    rounded: {
+      type: Boolean,
+      default: false
+    },
+    iconClass: {
+      type: String,
+      default: ''
+    },
+    baseClass: {
+      type: String,
+      default: 'font-medium focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
+    },
+    customClass: {
+      type: String,
+      default: null
+    },
+    square: {
+      type: Boolean,
+      default: false
+    },
+    truncate: {
+      type: Boolean,
+      default: false
+    },
+    noFocusBorder: {
+      type: Boolean,
+      default: false
+    },
+    noPadding: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    is () {
+      if (this.href) {
+        return 'a'
+      } else if (this.to) {
+        return 'NuxtLink'
+      }
+
+      return 'button'
+    },
+    props () {
+      switch (this.is) {
+        case 'a':
+          return {
+            href: this.href,
+            target: this.target
+          }
+        case 'NuxtLink': {
+          return {
+            to: this.to
+          }
+        }
+        default: {
+          return {
+            disabled: this.disabled || this.loading,
+            type: this.type
+          }
+        }
+      }
+    },
+    isLeading () {
+      return (this.leading && this.icon) || (this.icon && !this.trailing) || (this.loading && !this.trailing)
+    },
+    isTrailing () {
+      return (this.trailing && this.icon) || (this.loading && this.trailing)
+    },
+    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 () {
+      if (this.noPadding) {
+        return ''
+      }
+
+      const isSquare = this.square || (!this.$slots.default && !this.label)
+
+      return ({
+        true: {
+          xxs: 'px-2 py-1',
+          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'
+        },
+        false: {
+          xxs: 'p-1',
+          xs: 'p-1.5',
+          sm: 'p-2',
+          md: 'p-2',
+          lg: 'p-2',
+          xl: 'p-3'
+        }
+      })[!isSquare][this.size]
+    },
+    variantClass () {
+      return ({
+        primary: 'shadow-sm border border-transparent text-white bg-primary-600 hover:bg-primary-700 disabled:bg-primary-600',
+        secondary: 'border border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 disabled:bg-primary-100',
+        danger: 'shadow-sm border border-transparent text-white bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-500 disabled:bg-red-500 dark:disabled:bg-red-600',
+        white: 'shadow-sm border border-tw-gray-300 text-tw-gray-700 bg-tw-white hover:bg-tw-gray-50 disabled:bg-tw-white',
+        'white-hover': 'border border-transparent text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900 disabled:text-tw-gray-500',
+        gray: 'shadow-sm border border-tw-gray-300 text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 bg-gray-50 dark:bg-gray-800 disabled:text-tw-gray-500',
+        'gray-hover': 'border border-transparent text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-800 dark:focus:bg-gray-800 disabled:text-tw-gray-500',
+        black: 'border border-transparent text-tw-white bg-tw-gray-800 hover:bg-tw-gray-900 focus:bg-tw-gray-900',
+        'black-hover': 'border border-transparent text-tw-gray-500 hover:text-tw-gray-900 focus:text-tw-gray-700 bg-transparent hover:bg-white dark:hover:bg-black focus:bg-white dark:focus:bg-black',
+        transparent: 'border border-transparent text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 disabled:hover:text-tw-gray-500',
+        link: 'border border-transparent text-primary-500 hover:text-primary-700 focus:text-primary-700',
+        gradient: 'shadow-sm text-white border border-transparent bg-gradient-to-r from-indigo-600 to-blue-600 hover:from-indigo-700 hover:to-blue-700',
+        custom: ''
+      })[this.variant]
+    },
+    variantFocusBorderClass () {
+      if (this.noFocusBorder) {
+        return ''
+      }
+
+      return ({
+        primary: 'focus:ring-2 focus:ring-primary-200',
+        secondary: 'focus:ring-2 focus:ring-primary-500',
+        white: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500',
+        'white-hover': '',
+        gray: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500',
+        'gray-hover': '',
+        link: '',
+        transparent: '',
+        custom: ''
+      })[this.variant]
+    },
+    blockClass () {
+      return ({
+        true: 'w-full flex justify-center items-center',
+        false: 'inline-flex items-center'
+      })[this.block]
+    },
+    roundedClass () {
+      return ({
+        true: 'rounded-full',
+        false: 'rounded-md'
+      })[this.rounded]
+    },
+    iconName () {
+      if (this.loading) {
+        return this.loadingIcon || 'heroicons-outline:refresh'
+      }
+
+      return this.icon
+    },
+    loadingIconClass () {
+      return [
+        ({
+          true: 'animate-spin'
+        })[this.loading]
+      ]
+    },
+    leadingIconClass () {
+      return [
+        this.iconClass,
+        'flex-shrink-0',
+        ...this.loadingIconClass,
+        ({
+          xxs: 'h-3.5 w-3.5',
+          xs: 'h-4 w-4',
+          sm: 'h-4 w-4',
+          md: 'h-5 w-5',
+          lg: 'h-5 w-5',
+          xl: 'h-5 w-5'
+        })[this.size || 'sm'],
+        ({
+          true: {
+            xxs: '-ml-0.5 mr-1',
+            xs: '-ml-0.5 mr-1.5',
+            sm: '-ml-0.5 mr-2',
+            md: '-ml-1 mr-2',
+            lg: '-ml-1 mr-3',
+            xl: '-ml-1 mr-3'
+          },
+          false: {}
+        })[!!this.$slots.default || !!(this.label?.length)][this.size]
+      ].join(' ')
+    },
+    trailingIconClass () {
+      return [
+        this.iconClass,
+        'flex-shrink-0',
+        ...this.loadingIconClass,
+        ({
+          xxs: 'h-3.5 w-3.5',
+          xs: 'h-4 w-4',
+          sm: 'h-4 w-4',
+          md: 'h-5 w-5',
+          lg: 'h-5 w-5',
+          xl: 'h-5 w-5'
+        })[this.size || 'sm'],
+        ({
+          true: {
+            xxs: 'ml-1 -mr-0.5',
+            xs: 'ml-1.5 -mr-0.5',
+            sm: 'ml-2 -mr-0.5',
+            md: 'ml-2 -mr-1',
+            lg: 'ml-3 -mr-1',
+            xl: 'ml-3 -mr-1'
+          },
+          false: {}
+        })[!!this.$slots.default || !!(this.label?.length)][this.size]
+      ].join(' ')
+    },
+    buttonClass () {
+      return [
+        this.baseClass,
+        this.roundedClass,
+        this.sizeClass,
+        this.paddingClass,
+        this.variantClass,
+        this.variantFocusBorderClass,
+        this.blockClass,
+        this.customClass
+      ].filter(Boolean).join(' ')
+    }
+  }
+}
+</script>

src/components/elements/Dropdown.vue

@@ -0,0 +1,153 @@
+<template>
+  <Menu v-slot="{ open }" as="div" :class="wrapperClass">
+    <MenuButton ref="trigger" as="div">
+      <slot :open="open">
+        Open
+      </slot>
+    </MenuButton>
+
+    <div v-if="open" ref="container" :class="containerClass">
+      <transition
+        appear
+        enter-active-class="transition duration-100 ease-out"
+        enter-from-class="transform scale-95 opacity-0"
+        enter-to-class="transform scale-100 opacity-100"
+        leave-active-class="transition duration-75 ease-out"
+        leave-from-class="transform scale-100 opacity-100"
+        leave-to-class="transform scale-95 opacity-0"
+      >
+        <MenuItems :class="itemsClass" static>
+          <div v-for="(subItems, index) of items" :key="index" class="py-1">
+            <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled }">
+              <Component v-bind="item" :is="(item.to && 'NuxtLink') || (item.href && 'a') || 'button'" :class="resolveItemClass({ active, disabled })" @click="onItemClick(item)">
+                <slot :name="item.slot" :item="item">
+                  <Icon v-if="item.icon" :name="item.icon" :class="itemIconClass" />
+
+                  {{ item.label }}
+                </slot>
+              </Component>
+            </MenuItem>
+          </div>
+        </MenuItems>
+      </transition>
+    </div>
+  </Menu>
+</template>
+
+<script>
+import {
+  Menu,
+  MenuButton,
+  MenuItems,
+  MenuItem
+} from '@headlessui/vue'
+
+import Icon from '../elements/Icon'
+import { classNames, usePopper } from '../../utils'
+
+export default {
+  components: {
+    Menu,
+    MenuButton,
+    MenuItems,
+    MenuItem,
+    Icon
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    placement: {
+      type: String,
+      default: 'bottom-end'
+    },
+    strategy: {
+      type: String,
+      default: 'fixed'
+    },
+    wrapperClass: {
+      type: String,
+      default: 'relative inline-block text-left'
+    },
+    containerClass: {
+      type: String,
+      default: 'w-48 z-20'
+    },
+    itemsClass: {
+      type: String,
+      default: 'bg-white divide-y divide-gray-100 dark:divide-gray-700 rounded-md ring-1 ring-black ring-opacity-5'
+    },
+    itemClass: {
+      type: String,
+      default: 'group flex items-center px-4 py-2 text-sm w-full'
+    },
+    itemActiveClass: {
+      type: String,
+      default: 'bg-tw-gray-100 text-tw-gray-900'
+    },
+    itemInactiveClass: {
+      type: String,
+      default: 'text-tw-gray-700'
+    },
+    itemDisabledClass: {
+      type: String,
+      default: 'cursor-not-allowed opacity-50'
+    },
+    itemIconClass: {
+      type: String,
+      default: 'mr-3 h-5 w-5 text-tw-gray-400 group-hover:text-tw-gray-500'
+    }
+  },
+  setup (props) {
+    const [trigger, container] = usePopper({
+      placement: props.placement,
+      strategy: props.strategy,
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 8]
+        }
+      },
+      {
+        name: 'computeStyles',
+        options: {
+          gpuAcceleration: false,
+          adaptive: false
+        }
+      },
+      {
+        name: 'preventOverflow',
+        options: {
+          padding: 8
+        }
+      }]
+    })
+
+    function resolveItemClass ({ active, disabled }) {
+      return classNames(
+        props.itemClass,
+        active ? props.itemActiveClass : props.itemInactiveClass,
+        disabled && props.itemDisabledClass
+      )
+    }
+
+    function onItemClick (item) {
+      if (item.disabled) {
+        return
+      }
+
+      if (item.click) {
+        item.click()
+      }
+    }
+
+    return {
+      trigger,
+      container,
+      onItemClick,
+      resolveItemClass
+    }
+  }
+}
+</script>

src/components/elements/Icon.vue

@@ -0,0 +1,14 @@
+<template>
+  <div :class="name" />
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

src/components/elements/Link.vue

@@ -0,0 +1,40 @@
+<template>
+  <NuxtLink v-slot="{ href, navigate }" v-bind="$props" custom>
+    <a
+      v-bind="$attrs"
+      :href="href"
+      :class="isActive ? activeClass : inactiveClass"
+      @click="navigate"
+    >
+      <slot v-bind="{ isActive }" />
+    </a>
+  </NuxtLink>
+</template>
+
+<script>
+import { RouterLink } from 'vue-router'
+
+export default {
+  name: 'Link',
+  props: {
+    ...RouterLink.props,
+    inactiveClass: {
+      type: String,
+      default: ''
+    },
+    exact: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    isActive () {
+      if (!this.exact) {
+        return !!this.$route.path.startsWith(this.to)
+      } else {
+        return this.$route.path === this.to || this.$route.path === `${this.to}/`
+      }
+    }
+  }
+}
+</script>

src/components/elements/Toggle.vue

@@ -0,0 +1,46 @@
+<template>
+  <Switch
+    v-model="enabled"
+    :class="[enabled ? 'bg-primary-600' : 'bg-tw-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-200']"
+  >
+    <span :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']">
+      <span :class="[enabled ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity']" aria-hidden="true">
+        <Icon :name="iconOff" class="h-3 w-3 text-tw-gray-400" />
+      </span>
+      <span :class="[enabled ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-100', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity']" aria-hidden="true">
+        <Icon :name="iconOn" class="h-3 w-3 text-primary-600" />
+      </span>
+    </span>
+  </Switch>
+</template>
+
+<script setup>
+import { Switch } from '@headlessui/vue'
+import Icon from './Icon'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  iconOn: {
+    type: String,
+    default: ''
+  },
+  iconOff: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const enabled = computed({
+  get () {
+    return props.modelValue
+  },
+  set (value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>

src/components/feedback/Alert.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="rounded-md p-4" :class="variantClass">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <Icon :name="iconName" :class="iconClass" class="h-5 w-5" />
+      </div>
+      <div class="ml-3 flex-1 md:flex md:justify-between">
+        <p v-if="title" class="text-sm leading-5" :class="titleClass">
+          {{ title }}
+        </p>
+        <p v-if="link" class="mt-3 text-sm leading-5 md:mt-0 md:ml-6">
+          <NuxtLink
+            :to="to"
+            class="whitespace-nowrap font-medium"
+            :class="linkClass"
+          >
+            {{ link }} &rarr;
+          </NuxtLink>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../elements/Icon'
+
+export default {
+  components: {
+    Icon
+  },
+  props: {
+    variant: {
+      type: String,
+      default: 'info',
+      validator (value) {
+        return ['info', 'warning', 'error', 'success'].includes(value)
+      }
+    },
+    to: {
+      type: [String, Object],
+      default: null
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    link: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    iconName () {
+      return ({
+        info: 'solid/information-circle',
+        warning: 'solid/exclamation',
+        error: 'solid/x-circle',
+        success: 'solid/check-circle'
+      })[this.variant]
+    },
+    variantClass () {
+      return ({
+        info: 'bg-blue-50',
+        warning: 'bg-orange-50',
+        error: 'bg-red-50',
+        success: 'bg-green-50'
+      })[this.variant]
+    },
+    iconClass () {
+      return ({
+        info: 'text-blue-400',
+        warning: 'text-orange-400',
+        error: 'text-red-400',
+        success: 'text-green-400'
+      })[this.variant]
+    },
+    titleClass () {
+      return ({
+        info: 'text-blue-700',
+        warning: 'text-orange-700',
+        error: 'text-red-700',
+        success: 'text-green-700'
+      })[this.variant]
+    },
+    linkClass () {
+      return ({
+        info: 'text-blue-700 hover:text-blue-600',
+        warning: 'text-orange-700 hover:text-orange-600',
+        error: 'text-red-700 hover:text-red-600',
+        success: 'text-green-700 hover:text-green-600'
+      })[this.variant]
+    }
+  }
+}
+</script>

src/components/forms/Checkbox.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="relative flex" :class="{ 'items-start': label, 'items-center': !label }">
+    <div class="flex items-center h-5">
+      <input
+        :id="name"
+        :checked="isChecked"
+        :name="name"
+        :required="required"
+        :value="value"
+        :disabled="disabled"
+        type="checkbox"
+        :class="inputClass"
+        @focus="focused = true"
+        @blur="focused = false"
+        @change="onChange"
+      >
+    </div>
+    <div v-if="label" class="ml-3 text-sm">
+      <label :for="name" class="font-medium text-tw-gray-700">
+        {{ label }}
+        <span v-if="required" class="text-red-400">*</span>
+      </label>
+      <p v-if="help" class="text-tw-gray-500">
+        {{ help }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: [String, Number, Boolean],
+      default: null
+    },
+    id: {
+      type: String,
+      default: null
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    checked: {
+      type: [Array, Boolean],
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    help: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    baseClass: {
+      type: String,
+      default: 'h-4 w-4 text-primary-600 focus:ring-primary-500 border-tw-gray-300 bg-white dark:bg-gray-800 dark:checked:bg-primary-600 dark:checked:border-primary-600 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed rounded'
+    },
+    customClass: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      focused: false
+    }
+  },
+  computed: {
+    isChecked () {
+      return Array.isArray(this.checked) ? this.checked.includes(this.value) : this.checked
+    },
+    inputClass () {
+      return [
+        this.baseClass,
+        this.customClass
+      ].join(' ')
+    }
+  },
+  methods: {
+    onChange () {
+      // We check if we have validation error and clean it as the user as typed a new value
+      if (this.newValidation) { this.newValidation = null }
+
+      if (!Array.isArray(this.checked)) { return this.$emit('change', !this.checked) }
+
+      if (this.checked.includes(this.value)) { this.$emit('change', this.checked.filter(c => c !== this.value)) } else { this.$emit('change', this.checked.concat(this.value)) }
+    }
+  }
+}
+</script>

src/components/forms/Input.vue

@@ -0,0 +1,265 @@
+<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="text-tw-gray-400"
+        :class="iconClass"
+      />
+    </div>
+    <input
+      :id="name"
+      ref="input"
+      :name="name"
+      :value="modelValue"
+      :type="type"
+      :required="required"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :autocomplete="autocomplete"
+      :spellcheck="spellcheck"
+      :class="[baseClass, sizeClass, paddingClass, paddingIconClass, appearanceClass, customClass]"
+      @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="text-tw-gray-400"
+        :class="iconClass"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../elements/Icon'
+
+export default {
+  components: {
+    Icon
+  },
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'text'
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    autocomplete: {
+      type: String,
+      default: null
+    },
+    spellcheck: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loadingIcon: {
+      type: String,
+      default: null
+    },
+    trailing: {
+      type: Boolean,
+      default: false
+    },
+    leading: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    wrapperClass: {
+      type: String,
+      default: 'relative'
+    },
+    baseClass: {
+      type: String,
+      default: 'block w-full bg-tw-white text-tw-gray-700 disabled:cursor-not-allowed disabled:bg-tw-gray-50 focus:outline-none'
+    },
+    customClass: {
+      type: String,
+      default: null
+    },
+    appearance: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['default', 'none'].includes(value)
+      }
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'focus', 'blur'],
+  setup (props, { emit }) {
+    const input = ref(null)
+
+    const autoFocus = () => {
+      if (props.autofocus) {
+        input.value.focus()
+      }
+    }
+
+    const onInput = (value) => {
+      emit('update:modelValue', value)
+    }
+
+    onMounted(() => {
+      setTimeout(() => {
+        autoFocus()
+      }, 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 border-tw-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)
+    })
+
+    const isTrailing = computed(() => {
+      return (props.icon && props.trailing) || (props.loading && props.trailing)
+    })
+
+    const iconName = computed(() => {
+      if (props.loading) {
+        return props.loadingIcon || 'custom/loading'
+      }
+
+      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 {
+      input,
+      onInput,
+      sizeClass,
+      paddingClass,
+      paddingIconClass,
+      appearanceClass,
+      iconClass,
+      iconName,
+      isLeading,
+      isTrailing
+    }
+  }
+}
+</script>

src/components/forms/InputGroup.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    :class="{ 'sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-tw-gray-200': inline }"
+  >
+    <slot name="label">
+      <div :class="{ 'flex content-center justify-between': !inline }">
+        <label
+          v-if="label"
+          :for="name"
+          class="block text-sm font-medium leading-5 text-tw-gray-700"
+          :class="{'sm:mt-px sm:pt-2': inline }"
+        >
+          {{ label }}
+          <span v-if="required" class="text-red-400">*</span>
+        </label>
+        <span
+          v-if="$slots.hint || hint"
+          class="text-sm leading-5 text-tw-gray-500"
+          :class="{ 'mt-1 max-w-2xl': inline }"
+        ><slot name="hint">{{ hint }}</slot></span>
+      </div>
+    </slot>
+    <div
+      :class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }"
+    >
+      <slot />
+      <p v-if="help" class="mt-2 text-sm text-tw-gray-500">
+        {{ help }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    help: {
+      type: String,
+      default: null
+    },
+    hint: {
+      type: String,
+      default: null
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>

src/components/forms/Radio.vue

@@ -0,0 +1,89 @@
+<template>
+  <label :for="`${name}-${value}`" class="relative flex cursor-pointer">
+    <input
+      :id="`${name}-${value}`"
+      :checked="checked"
+      :name="name"
+      :required="required"
+      :value="value"
+      :disabled="disabled"
+      type="radio"
+      :class="inputClass"
+      @focus="focused = true"
+      @blur="focused = false"
+      @change="onChange"
+    >
+    <div v-if="label" class="flex flex-col ml-3">
+      <span class="block text-sm font-medium text-tw-gray-900">
+        {{ label }}
+        <span v-if="required" class="text-red-400">*</span>
+      </span>
+      <span v-if="help" class="block text-sm text-tw-gray-500">{{ help }}</span>
+    </div>
+  </label>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object],
+      default: null
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    checked: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    help: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    baseClass: {
+      type: String,
+      default: 'h-4 w-4 mt-0.5 text-primary-600 checked:border-primary-600 border-tw-gray-300 bg-tw-white dark:checked:bg-primary-600 focus:ring-offset-white dark:focus:ring-offset-gray-900 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
+    },
+    customClass: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      focused: false
+    }
+  },
+  computed: {
+    inputClass () {
+      return [
+        this.baseClass,
+        this.customClass
+      ].join(' ')
+    }
+  },
+  methods: {
+    onChange () {
+      this.$emit('change', this.value)
+    }
+  }
+}
+</script>

src/components/forms/RadioGroup.vue

@@ -0,0 +1,72 @@
+<template>
+  <fieldset :id="name">
+    <legend v-if="label" class="sr-only">
+      {{ label }}
+    </legend>
+
+    <div :class="wrapperClass">
+      <Radio
+        v-for="(option, index) in options"
+        :key="index"
+        :checked="option.value === value"
+        :disabled="disabled"
+        :name="name"
+        v-bind="option"
+        :class="inputClass"
+        @change="onChange"
+      />
+    </div>
+  </fieldset>
+</template>
+
+<script>
+import Radio from './Radio'
+
+export default {
+  components: {
+    Radio
+  },
+  model: {
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: [String, Number, Boolean, Object],
+      default: null
+    },
+    options: {
+      type: [Array],
+      required: true
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    wrapperClass: {
+      type: String,
+      default: null
+    },
+    inputClass: {
+      type: String,
+      default: null
+    }
+  },
+  methods: {
+    onChange (value) {
+      this.$emit('change', value)
+    }
+  }
+}
+</script>

src/components/forms/Select.vue

@@ -0,0 +1,211 @@
+<template>
+  <div :class="wrapperClass">
+    <select
+      :id="name"
+      :name="name"
+      :required="required"
+      :disabled="disabled"
+      :readonly="readonly"
+      :class="selectClass"
+      @input="updateValue($event.target.value)"
+    >
+      <template v-for="(option, index) in normalizedOptionsWithPlaceholder">
+        <optgroup
+          v-if="option.children"
+          :key="`${option[valueAttribute]}-optgroup-${index}`"
+          :value="option[valueAttribute]"
+          :label="option[textAttribute]"
+        >
+          <option
+            v-for="(childOption, index2) in option.children"
+            :key="`${childOption[valueAttribute]}-${index}-${index2}`"
+            :value="childOption[valueAttribute]"
+            :selected="childOption[valueAttribute] === normalizedValue"
+            v-text="childOption[textAttribute]"
+          />
+        </optgroup>
+        <option
+          v-else
+          :key="`${option[valueAttribute]}-${index}`"
+          :value="option[valueAttribute]"
+          :selected="option[valueAttribute] === normalizedValue"
+          v-text="option[textAttribute]"
+        />
+      </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'
+
+export default {
+  components: {
+    Icon
+  },
+  props: {
+    modelValue: {
+      type: [String, Number, Object],
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    wrapperClass: {
+      type: String,
+      default: 'relative'
+    },
+    baseClass: {
+      type: String,
+      default: 'block w-full disabled:cursor-not-allowed bg-tw-white text-tw-gray-700 disabled:bg-tw-gray-50 focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500 border border-tw-gray-300 rounded-md shadow-sm focus:outline-none'
+    },
+    customClass: {
+      type: String,
+      default: null
+    },
+    textAttribute: {
+      type: String,
+      default: 'text'
+    },
+    valueAttribute: {
+      type: String,
+      default: 'value'
+    },
+    icon: {
+      type: String,
+      default: null
+    }
+  },
+  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
+      }
+
+      return foundOption.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) {
+      if (['string', 'number', 'boolean'].includes(typeof option)) {
+        return {
+          [this.valueAttribute]: option,
+          [this.textAttribute]: option
+        }
+      }
+
+      return {
+        ...option,
+        [this.valueAttribute]: this.guessOptionValue(option),
+        [this.textAttribute]: this.guessOptionText(option)
+      }
+    },
+    updateValue (value) {
+      this.$emit('update:modelValue', value)
+    }
+  }
+}
+</script>

src/components/forms/SelectCustom.vue

@@ -0,0 +1,448 @@
+<template>
+  <div ref="container">
+    <input :value="value" :required="required" class="absolute inset-0 w-px opacity-0 cursor-default">
+
+    <slot :toggle="toggle" :open="open">
+      <TwButton
+        icon="solid/selector"
+        icon-class="text-tw-gray-400"
+        trailing
+        :size="size"
+        :variant="variant"
+        base-class="w-full cursor-default focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+        :disabled="disabled || !options || !options.length"
+        @click.native="!disabled && options && options.length && toggle()"
+      >
+        <div v-if="selectedOptions && selectedOptions.length" class="inline-flex w-full px-3 py-2 -my-2 -ml-3 truncate">
+          <span v-for="(selectedOption, index) of selectedOptions" :key="index" class="inline-flex items-center pr-2">
+            <slot name="label" :option="selectedOption">
+              <span class="text-tw-gray-700">{{ selectedOption[textAttribute] }}</span>
+            </slot>
+          </span>
+        </div>
+        <div v-else class="inline-flex w-full text-tw-gray-400">
+          {{ placeholder || '' }}
+        </div>
+      </TwButton>
+    </slot>
+
+    <transition
+      enter-class=""
+      enter-active-class=""
+      enter-to-class=""
+      leave-class="opacity-100"
+      leave-active-class="transition duration-100 ease-in"
+      leave-to-class="opacity-0"
+    >
+      <div v-show="open" ref="tooltip" class="z-10 overflow-hidden bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-gray-200 dark:ring-gray-700" :class="dropdownClass">
+        <div v-if="searchable" class="w-full border-b border-gray-200 dark:border-gray-700">
+          <TwInput
+            ref="search"
+            v-model="q"
+            type="search"
+            :name="`select-search-${name}`"
+            block
+            autocomplete="off"
+            appearance="none"
+            :placeholder="placeholderSearch"
+          />
+        </div>
+        <ul
+          ref="options"
+          tabindex="-1"
+          role="listbox"
+          class="overflow-y-auto max-h-60 sm:text-sm focus:outline-none"
+        >
+          <li
+            v-if="showNewOption"
+            ref="option-new"
+            role="option"
+            class="relative pl-3 pr-12 cursor-default select-none group hover:text-white hover:bg-primary-600"
+            :class="{
+              'bg-primary-600 text-white': active === -1,
+              'text-tw-gray-900': active !== -1,
+              'py-2': dropdownSize === 'md',
+              'py-1 text-sm': dropdownSize === 'sm'
+            }"
+            @mouseover="active = -1"
+            @click="active === -1 && newOption()"
+          >
+            <slot name="newOption" :optionName="q">
+              <span class="block truncate">Add new option: "{{ q }}"</span>
+            </slot>
+          </li>
+          <li
+            v-for="(option, index) in filteredNormalizedOptions"
+            :key="index"
+            :ref="`option-${index}`"
+            role="option"
+            class="relative pl-3 pr-12 cursor-default select-none group hover:text-white hover:bg-primary-600"
+            :class="{
+              'font-semibold': isOptionSelected(option),
+              'bg-primary-600 text-white': active === index,
+              'text-tw-gray-900': active !== index,
+              'py-2': dropdownSize === 'md',
+              'py-1 text-sm': dropdownSize === 'sm'
+            }"
+            @mouseover="active = index"
+            @click.prevent="active === index && selectOption(option)"
+          >
+            <slot name="option" :option="option">
+              <span class="block truncate">{{ option[textAttribute] }}</span>
+            </slot>
+            <span class="absolute inset-y-0 right-0 flex items-center pr-3">
+              <Icon
+                v-if="isOptionSelected(option)"
+                name="solid/check"
+                class=" group-hover:text-white"
+                :class="{
+                  'text-white': active === index,
+                  'text-primary-600': active !== index,
+                  'h-5 w-5': dropdownSize === 'md',
+                  'h-4 w-4': dropdownSize === 'sm'
+                }"
+              />
+            </span>
+          </li>
+        </ul>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import get from 'lodash/get'
+import { createPopper } from '@popperjs/core'
+// import { directive as onClickaway } from 'vue-clickaway'
+
+import Icon from '../elements/Icon'
+
+export default {
+  components: {
+    Icon
+  },
+  // directives: {
+  //   onClickaway
+  // },
+  shortcuts: {
+    disabled () {
+      return !this.open
+    },
+    up: 'prev',
+    down: 'next',
+    enter: 'enter',
+    esc: {
+      handler: 'close',
+      stop: true,
+      prevent: true
+    }
+  },
+  props: {
+    value: {
+      type: [String, Number, Object, Array],
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    textAttribute: {
+      type: String,
+      default: 'text'
+    },
+    valueAttribute: {
+      type: String,
+      default: 'value'
+    },
+    searchAttributes: {
+      type: Array,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    placeholderSearch: {
+      type: String,
+      default: 'Search...'
+    },
+    searchable: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    newEnabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    dropdownClass: {
+      type: String,
+      default: 'w-full'
+    },
+    dropdownSize: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['sm', 'md'].includes(value)
+      }
+    },
+    variant: {
+      type: String,
+      default: 'gray'
+    },
+    strategy: {
+      type: String,
+      default: 'absolute'
+    },
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    },
+    unselectable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      open: false,
+      active: 0,
+      q: '',
+      instance: null
+    }
+  },
+  computed: {
+    showNewOption () {
+      return this.newEnabled && this.q && !this.filteredNormalizedOptions.find(option => option[this.textAttribute].toLowerCase() === this.q.toLowerCase())
+    },
+    selectedOptions () {
+      if (this.multiple) {
+        return this.value.map(value => this.normalizedOptions.find(option => option[this.valueAttribute] === value)).filter(Boolean)
+      } else {
+        return [this.normalizedOptions.find(option => option[this.valueAttribute] === this.value)].filter(Boolean)
+      }
+    },
+    normalizedOptions () {
+      return this.options.map(option => this.normalizeOption(option))
+    },
+    filteredNormalizedOptions () {
+      let filteredNormalizedOptions = this.normalizedOptions
+
+      if (!this.q) {
+        return filteredNormalizedOptions
+      }
+
+      try {
+        filteredNormalizedOptions = this.normalizedOptions.filter((option) => {
+          return (this.searchAttributes?.length ? this.searchAttributes : [this.textAttribute]).some((searchAttribute) => {
+            return option[searchAttribute] && option[searchAttribute].search(new RegExp(this.q, 'i')) !== -1
+          })
+        })
+      } catch (e) {}
+
+      return filteredNormalizedOptions
+    }
+  },
+  watch: {
+    disabled (value) {
+      if (value && open) { this.close() }
+    },
+    open (value) {
+      this.$emit('open', value)
+
+      if (!value) {
+        return
+      }
+
+      if (this.searchable) {
+        this.$nextTick(() => {
+          this.$refs.search.$refs.input.focus()
+          this.$refs.search.$refs.input.select()
+        })
+      }
+
+      if (this.multiple) {
+        if (this.value.length) {
+          this.active = this.filteredNormalizedOptions.findIndex(option => this.value.includes(option[this.valueAttribute]))
+        }
+      } else if (this.value) {
+        this.active = this.filteredNormalizedOptions.findIndex(option => option[this.valueAttribute] === this.value)
+      }
+
+      if (this.instance) {
+        this.instance.destroy()
+        this.instance = null
+      }
+
+      this.instance = createPopper(this.$refs.container, this.$refs.tooltip, {
+        strategy: this.strategy,
+        placement: this.placement,
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 8]
+            }
+          },
+          {
+            name: 'computeStyles',
+            options: {
+              gpuAcceleration: false,
+              adaptive: false
+            }
+          },
+          {
+            name: 'preventOverflow',
+            options: {
+              padding: 8
+            }
+          }
+        ]
+      })
+
+      this.$nextTick(() => {
+        this.scrollIntoView()
+      })
+    },
+    filteredNormalizedOptions () {
+      this.updateActive()
+    },
+    q () {
+      this.updateActive()
+    }
+  },
+  beforeDestroy () {
+    if (this.instance) {
+      this.instance.destroy()
+      this.instance = null
+    }
+  },
+  methods: {
+    toggle () {
+      this.open = !this.open
+    },
+    close () {
+      this.open = false
+    },
+    newOption () {
+      this.$emit('new', this.q)
+    },
+    isOptionSelected (option) {
+      if (this.multiple) {
+        return this.value && this.value.find(it => it === option[this.valueAttribute])
+      }
+
+      return this.value && this.value === option[this.valueAttribute]
+    },
+    selectOption (option) {
+      if (this.multiple) {
+        const value = [...this.value]
+        const index = value.findIndex(it => it === option[this.valueAttribute])
+        if (index > -1) {
+          value.splice(index, 1)
+        } else {
+          value.push(option[this.valueAttribute])
+        }
+        this.$emit('input', value)
+      } else {
+        if (this.isOptionSelected(option)) {
+          if (this.unselectable) {
+            this.$emit('input', null)
+          }
+        } else {
+          this.$emit('input', option[this.valueAttribute])
+        }
+        this.open = false
+      }
+    },
+    guessOptionValue (option) {
+      return get(option, this.valueAttribute, get(option, this.textAttribute))
+    },
+    guessOptionText (option) {
+      return get(option, this.textAttribute, get(option, this.valueAttribute))
+    },
+    normalizeOption (option) {
+      if (['string', 'number', 'boolean'].includes(typeof option)) {
+        return {
+          [this.valueAttribute]: option,
+          [this.textAttribute]: option
+        }
+      }
+
+      return {
+        ...option,
+        [this.valueAttribute]: this.guessOptionValue(option),
+        [this.textAttribute]: this.guessOptionText(option)
+      }
+    },
+    prev () {
+      if (this.active - 1 >= (this.showNewOption ? -1 : 0)) {
+        this.active--
+      }
+
+      this.scrollIntoView()
+    },
+    next () {
+      if (this.active + 1 <= (this.filteredNormalizedOptions.length - 1)) {
+        this.active++
+      }
+
+      this.scrollIntoView()
+    },
+    enter () {
+      if (this.active === -1) {
+        if (this.showNewOption) {
+          this.newOption()
+        }
+        return
+      }
+
+      const option = this.filteredNormalizedOptions[this.active]
+      if (!option) {
+        return
+      }
+
+      this.selectOption(option)
+    },
+    scrollIntoView () {
+      let child
+      if (this.active === -1) {
+        child = this.$refs['option-new']
+      } else {
+        child = this.$refs[`option-${this.active}`][0]
+      }
+
+      if (!child) {
+        return
+      }
+
+      child.scrollIntoView({ block: 'nearest' })
+    },
+    updateActive () {
+      this.active = this.showNewOption && !this.filteredNormalizedOptions.length ? -1 : 0
+    }
+  }
+}
+</script>

src/components/forms/Textarea.vue

@@ -0,0 +1,165 @@
+<template>
+  <div :class="wrapperClass">
+    <textarea
+      :id="name"
+      ref="textarea"
+      :value="modelValue"
+      :name="name"
+      :rows="rows"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :autocomplete="autocomplete"
+      :class="[baseClass, customClass, sizeClass, paddingClass, appearanceClass, resizeClass]"
+      @input="onInput($event.target.value)"
+      @focus="$emit('focus', $event)"
+      @blur="$emit('blur', $event)"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    rows: {
+      type: Number,
+      default: 3
+    },
+    autoresize: {
+      type: Boolean,
+      default: false
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    autocomplete: {
+      type: String,
+      default: null
+    },
+    appearance: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['default', 'none'].includes(value)
+      }
+    },
+    resize: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator (value) {
+        return ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+    wrapperClass: {
+      type: String,
+      default: 'relative'
+    },
+    baseClass: {
+      type: String,
+      default: 'block w-full bg-tw-white text-tw-gray-700 disabled:cursor-not-allowed disabled:bg-tw-gray-50 focus:outline-none'
+    },
+    customClass: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ['update:modelValue', 'focus', 'blur'],
+  setup (props, { emit }) {
+    const textarea = ref(null)
+
+    const autoFocus = () => {
+      if (props.autofocus) {
+        textarea.value.focus()
+      }
+    }
+
+    const autoResize = () => {
+      if (props.autoresize) {
+        const styles = window.getComputedStyle(textarea.value)
+        const paddingTop = parseInt(styles.paddingTop)
+        const paddingBottom = parseInt(styles.paddingBottom)
+        const padding = paddingTop + paddingBottom
+        const initialHeight = (parseInt(styles.height) - padding) / textarea.value.rows
+        const scrollHeight = textarea.value.scrollHeight - padding
+        const newRows = Math.ceil(scrollHeight / initialHeight)
+
+        textarea.value.rows = newRows
+      }
+    }
+
+    const onInput = (value) => {
+      autoResize()
+
+      emit('update:modelValue', value)
+    }
+
+    onMounted(() => {
+      setTimeout(() => {
+        autoFocus()
+        autoResize()
+      }, 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 border-tw-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'
+    })
+
+    return {
+      textarea,
+      onInput,
+      sizeClass,
+      paddingClass,
+      appearanceClass,
+      resizeClass
+    }
+  }
+}
+</script>

src/components/layout/Card.vue

@@ -0,0 +1,82 @@
+<template>
+  <component
+    :is="$attrs.onSubmit ? 'form': 'div'"
+    :class="[padded && rounded && 'rounded-md', !padded && rounded && 'sm:rounded-md', wrapperClass, ringClass, shadowClass, backgroundClass]"
+    v-bind="$attrs"
+  >
+    <div
+      v-if="$slots.header"
+      :class="[headerClass, headerBackgroundClass, borderColorClass, !!$slots.default && 'border-b']"
+    >
+      <slot name="header" />
+    </div>
+    <div :class="[bodyClass, bodyBackgroundClass]">
+      <slot />
+    </div>
+    <div
+      v-if="$slots.footer"
+      :class="[footerClass, footerBackgroundClass, borderColorClass, (!!$slots.default || (!$slots.default && !!$slots.header)) && 'border-t']"
+    >
+      <slot name="footer" />
+    </div>
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    padded: {
+      type: Boolean,
+      default: false
+    },
+    rounded: {
+      type: Boolean,
+      default: true
+    },
+    wrapperClass: {
+      type: String,
+      default: 'overflow-hidden'
+    },
+    backgroundClass: {
+      type: String,
+      default: 'bg-tw-white'
+    },
+    shadowClass: {
+      type: String,
+      default: ''
+    },
+    ringClass: {
+      type: String,
+      default: 'ring-1 ring-gray-200 dark:ring-gray-800'
+    },
+    bodyClass: {
+      type: String,
+      default: 'px-4 py-5 sm:p-6'
+    },
+    bodyBackgroundClass: {
+      type: String,
+      default: null
+    },
+    headerClass: {
+      type: String,
+      default: 'px-4 py-5 sm:px-6'
+    },
+    headerBackgroundClass: {
+      type: String,
+      default: null
+    },
+    footerClass: {
+      type: String,
+      default: 'px-4 py-4 sm:px-6'
+    },
+    footerBackgroundClass: {
+      type: String,
+      default: null
+    },
+    borderColorClass: {
+      type: String,
+      default: 'border-gray-200 dark:border-gray-800'
+    }
+  }
+}
+</script>

src/components/layout/Container.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="mx-auto sm:px-6 lg:px-8" :class="{ 'px-4': padded, 'max-w-7xl': constrained }">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    padded: {
+      type: Boolean,
+      default: false
+    },
+    constrained: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>

src/components/navigation/Pills.vue

@@ -0,0 +1,64 @@
+<template>
+  <nav class="flex items-center space-x-1.5">
+    <div v-for="(link, index) of links" :key="index">
+      <Button
+        :size="size"
+        :to="link.to"
+        :label="link.label"
+        :icon="link.icon"
+        :variant="isActive(link) ? activeVariant : variant"
+        :custom-class="isActive(link) ? activeClass : ''"
+        @click="click(link)"
+      />
+    </div>
+  </nav>
+</template>
+
+<script>
+import Button from '../elements/Button'
+
+export default {
+  components: {
+    Button
+  },
+  props: {
+    links: {
+      type: Array,
+      required: true
+    },
+    size: {
+      type: String,
+      default: 'md'
+    },
+    variant: {
+      type: String,
+      default: 'gray-hover'
+    },
+    activeVariant: {
+      type: String,
+      default: 'gray'
+    },
+    activeClass: {
+      type: String,
+      default: 'text-tw-gray-700 hover:text-tw-gray-700 focus:text-tw-gray-700'
+    }
+  },
+  computed: {
+    options () {
+      return this.links.map(link => ({ value: link.to, text: link.label }))
+    }
+  },
+  methods: {
+    click (link) {
+      this.$emit('input', link)
+    },
+    isActive (link) {
+      if (link.exact === false) {
+        return !!this.$route.path.startsWith(link.to)
+      } else {
+        return this.$route.path === link.to
+      }
+    }
+  }
+}
+</script>

src/components/navigation/Tabs.vue

@@ -0,0 +1,39 @@
+<template>
+  <nav class="flex items-center gap-6">
+    <Link
+      v-for="(link, index) of links"
+      :key="index"
+      :to="link.to"
+      :exact="link.exact"
+      class="pt-2 pb-3 text-sm font-medium border-b-2 whitespace-nowrap"
+      :active-class="activeClass"
+      :inactive-class="inactiveClass"
+    >
+      {{ link.label }}
+    </Link>
+  </nav>
+</template>
+
+<script>
+import Link from '../elements/Link'
+
+export default {
+  components: {
+    Link
+  },
+  props: {
+    links: {
+      type: Array,
+      required: true
+    },
+    activeClass: {
+      type: String,
+      default: 'border-black dark:border-white text-black dark:text-white hover:text-black dark:hover:text-white hover:border-black dark:hover:border-white'
+    },
+    inactiveClass: {
+      type: String,
+      default: 'border-transparent text-tw-gray-500 hover:text-tw-gray-700 hover:border-tw-gray-300'
+    }
+  }
+}
+</script>

src/components/navigation/VerticalNavigation.vue

@@ -0,0 +1,121 @@
+<template>
+  <nav>
+    <h3
+      v-if="title || $slots.title"
+      class="flex items-center justify-between px-2 mb-1 text-xs font-semibold tracking-wider uppercase text-tw-gray-500"
+    >
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </h3>
+
+    <div class="space-y-1">
+      <Link
+        v-for="link of links"
+        v-slot="{ isActive }"
+        :key="link.to || link.label"
+        :to="link.to"
+        :exact="link.exact"
+        class="flex items-center px-2 py-2 text-sm font-medium rounded-md group focus:outline-none"
+        :active-class="activeVariantClass"
+        :inactive-class="variantClass"
+        @click="link.click && link.click()"
+        @keyup.enter="$event.target.blur()"
+      >
+        <slot name="icon" :link="link">
+          <Icon
+            v-if="link.icon"
+            :name="link.icon"
+            class="w-6 h-6 mr-3"
+            :class="isActive ? activeIconClass : iconClass"
+          />
+        </slot>
+        <slot :link="link">
+          <span class="truncate">{{ link.label }}</span>
+        </slot>
+        <div v-if="link.shortcuts" class="hidden ml-3 space-x-1 lg:flex">
+          <span v-for="shortcut of link.shortcuts" :key="shortcut" class="flex items-center justify-center w-4 h-4 font-normal bg-gray-200 rounded text-xxs dark:bg-gray-700 text-tw-gray-600">
+            {{ shortcut }}
+          </span>
+        </div>
+        <span class="inline-block ml-auto">
+          <slot name="badge" :link="link">
+            <span
+              v-if="link.badge"
+              class="ml-auto inline-block py-0.5 px-3 text-xs rounded-full"
+              :class="{
+                'bg-tw-gray-50': isActive,
+                'bg-gray-200 dark:bg-gray-700 text-tw-gray-600': !isActive
+              }"
+            >
+              {{ link.badge }}
+            </span>
+          </slot>
+        </span>
+      </Link>
+    </div>
+  </nav>
+</template>
+
+<script>
+import Icon from '../elements/Icon'
+import Link from '../elements/Link'
+
+export default {
+  components: {
+    Icon,
+    Link
+  },
+  props: {
+    links: {
+      type: Array,
+      required: true
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    variant: {
+      type: String,
+      default: 'white',
+      validator (value) {
+        return ['white', 'gray'].includes(value)
+      }
+    }
+  },
+  computed: {
+    options () {
+      return this.links.map(link => ({ value: link.to, text: link.label }))
+    },
+    variantClass () {
+      return ({
+        white: 'text-tw-gray-600 hover:text-tw-gray-900 hover:bg-tw-gray-50 focus:bg-tw-gray-50',
+        gray: 'text-tw-gray-600 hover:text-tw-gray-900 hover:bg-tw-gray-50 focus:bg-tw-gray-50'
+      })[this.variant]
+    },
+    activeVariantClass () {
+      return ({
+        white: 'text-tw-gray-900 bg-tw-gray-100 hover:text-tw-gray-900 hover:bg-tw-gray-100 focus:bg-tw-gray-100',
+        gray: 'text-tw-gray-900 bg-gray-200 dark:bg-gray-800 hover:text-tw-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 focus:bg-gray-200 dark:focus:bg-gray-800'
+      })[this.variant]
+    },
+    iconClass () {
+      return ({
+        white: 'text-tw-gray-400 group-hover:text-tw-gray-500',
+        gray: 'text-tw-gray-400 group-hover:text-tw-gray-500'
+      })[this.variant]
+    },
+    activeIconClass () {
+      return ({
+        white: 'text-tw-gray-500 group-hover:text-tw-gray-500',
+        gray: 'text-tw-gray-500 group-hover:text-tw-gray-500'
+      })[this.variant]
+    }
+  },
+  methods: {
+    changeRoute (to) {
+      this.$router.push(to)
+    }
+  }
+}
+</script>

src/components/overlays/Modal.vue

@@ -0,0 +1,95 @@
+<template>
+  <TransitionRoot :show="isOpen" as="template">
+    <Dialog @close="setIsOpen">
+      <div class="fixed z-10 inset-0 overflow-y-auto">
+        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </TransitionChild>
+
+          <!-- This element is to trick the browser into centering the modal contents. -->
+          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <Card
+              class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+              v-bind="$attrs"
+              ring-class="sm:ring-1 sm:ring-transparent dark:ring-gray-700"
+            >
+              <template v-if="$slots.header" #header>
+                <slot name="header" />
+              </template>
+              <slot />
+              <template v-if="$slots.footer" #footer>
+                <slot name="footer" />
+              </template>
+            </Card>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script>
+import { Dialog, DialogOverlay, TransitionRoot, TransitionChild } from '@headlessui/vue'
+
+import Card from '../layout/Card'
+
+export default {
+  components: {
+    Dialog,
+    DialogOverlay,
+    TransitionRoot,
+    TransitionChild,
+    Card
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ['update:modelValue'],
+  setup (props, { emit }) {
+    const isOpen = computed({
+      get () {
+        return props.modelValue
+      },
+      set (value) {
+        emit('update:modelValue', value)
+      }
+    })
+
+    return {
+      isOpen,
+      setIsOpen (value) {
+        isOpen.value = value
+      },
+      toggleIsOpen () {
+        isOpen.value = !isOpen.value
+      }
+    }
+  }
+}
+</script>

src/components/overlays/Notification.vue

@@ -0,0 +1,191 @@
+<template>
+  <transition
+    appear
+    enter-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+    enter-active-class="transition duration-300 ease-out transform"
+    enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+    leave-class="opacity-100"
+    leave-active-class="transition duration-100 ease-in"
+    leave-to-class="opacity-0"
+  >
+    <div
+      class="z-50 w-full bg-white rounded-lg shadow-lg pointer-events-auto dark:bg-gray-800"
+      @mouseover="onMouseover"
+      @mouseout="onMouseout"
+    >
+      <div class="relative overflow-hidden rounded-lg ring-1 ring-gray-200 dark:ring-gray-700">
+        <div class="p-4">
+          <div class="flex">
+            <div class="flex-shrink-0">
+              <Icon :name="iconName" class="w-6 h-6" :class="iconClass" />
+            </div>
+            <div class="ml-3 w-0 flex-1 pt-0.5">
+              <p class="text-sm font-medium leading-5 text-tw-gray-900">
+                {{ title }}
+              </p>
+              <p v-if="description" class="mt-1 text-sm leading-5 text-tw-gray-500">
+                {{ description }}
+              </p>
+              <Button
+                v-if="undo"
+                variant="white"
+                size="xs"
+                class="mt-2"
+                @click.native.stop="cancel"
+              >
+                Undo
+                <div class="inline-flex items-center rounded bg-tw-gray-200 ml-1.5">
+                  <span class="w-full px-1 text-center text-tw-gray-600 text-xxs">
+                    Z
+                  </span>
+                </div>
+              </Button>
+            </div>
+            <div class="flex-shrink-0 ml-4">
+              <button
+                class="transition duration-150 ease-in-out text-tw-gray-400 focus:outline-none hover:text-tw-gray-500 focus:text-tw-gray-500"
+                @click.stop="close"
+              >
+                <span class="sr-only">Close</span>
+                <Icon name="outline/x" class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+        <div v-if="timeout" class="absolute bottom-0 left-0 right-0 h-1">
+          <div class="h-1 bg-primary-500" :style="progressBarStyle" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Icon from '../elements/Icon'
+import Button from '../elements/Button'
+
+export default {
+  components: {
+    Icon,
+    Button
+  },
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    type: {
+      type: String,
+      required: true,
+      default: 'info',
+      validator (value) {
+        return ['info', 'success', 'error', 'warning'].includes(value)
+      }
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    timeout: {
+      type: Number,
+      default: 5000
+    },
+    undo: {
+      type: Function,
+      default: null
+    },
+    callback: {
+      type: Function,
+      default: null
+    }
+  },
+  data () {
+    return {
+      timer: null,
+      ticker: null,
+      remainingTime: this.timeout
+    }
+  },
+  computed: {
+    iconName () {
+      return this.icon || ({
+        warning: 'solid/exclamation-circle',
+        info: 'solid/information-circle',
+        success: 'solid/check-circle',
+        error: 'solid/x-circle'
+      })[this.type]
+    },
+    iconClass () {
+      return ({
+        warning: 'text-orange-400',
+        info: 'text-blue-400',
+        success: 'text-green-400',
+        error: 'text-red-400'
+      })[this.type] || 'text-tw-gray-400'
+    },
+    progressBarStyle () {
+      const remainingPercent = this.remainingTime / this.timeout * 100
+      return { width: `${remainingPercent}%` }
+    }
+  },
+  mounted () {
+    if (!this.$timer) {
+      return
+    }
+
+    if (this.timeout) {
+      this.timer = new this.$timer(() => {
+        this.close()
+        this.ticker?.stop()
+      }, this.timeout)
+      this.ticker = new this.$ticker(() => {
+        this.remainingTime -= 10
+      }, 10)
+    }
+  },
+  beforeDestroy () {
+    if (this.timer) {
+      this.timer.stop()
+      this.ticker.stop()
+    }
+  },
+  methods: {
+    onMouseover () {
+      if (this.timer) {
+        this.timer.pause()
+        this.ticker.stop()
+      }
+    },
+    onMouseout () {
+      if (this.timer) {
+        this.timer.resume()
+        this.ticker.start()
+      }
+    },
+    cancel () {
+      if (this.timer) {
+        this.timer.stop()
+        this.ticker.stop()
+      }
+      if (this.undo) {
+        this.undo()
+      }
+      this.$emit('close')
+    },
+    close () {
+      if (this.callback) {
+        this.callback()
+      }
+      this.$emit('close')
+    }
+  }
+}
+</script>

src/components/overlays/Popover.vue

@@ -0,0 +1,91 @@
+<template>
+  <Popover v-slot="{ open }" :class="wrapperClass">
+    <PopoverButton ref="trigger" as="div">
+      <slot :open="open">
+        Open
+      </slot>
+    </PopoverButton>
+
+    <div v-if="open" ref="container" :class="containerClass">
+      <transition
+        appear
+        enter-active-class="transition ease-out duration-200"
+        enter-from-class="opacity-0 translate-y-1"
+        enter-to-class="opacity-100 translate-y-0"
+        leave-active-class="transition ease-in duration-150"
+        leave-from-class="opacity-100 translate-y-0"
+        leave-to-class="opacity-0 translate-y-1"
+      >
+        <PopoverPanel :class="panelClass" static>
+          <slot name="panel" />
+        </PopoverPanel>
+      </transition>
+    </div>
+  </Popover>
+</template>
+
+<script>
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+
+import { usePopper } from '../../utils'
+
+export default {
+  components: {
+    Popover,
+    PopoverButton,
+    PopoverPanel
+  },
+  props: {
+    placement: {
+      type: String,
+      default: 'bottom'
+    },
+    strategy: {
+      type: String,
+      default: 'fixed'
+    },
+    wrapperClass: {
+      type: String,
+      default: 'relative'
+    },
+    containerClass: {
+      type: String,
+      default: 'z-10'
+    },
+    panelClass: {
+      type: String,
+      default: 'transform'
+    }
+  },
+  setup (props) {
+    const [trigger, container] = usePopper({
+      placement: props.placement,
+      strategy: props.strategy,
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 8]
+        }
+      },
+      {
+        name: 'computeStyles',
+        options: {
+          gpuAcceleration: false,
+          adaptive: false
+        }
+      },
+      {
+        name: 'preventOverflow',
+        options: {
+          padding: 8
+        }
+      }]
+    })
+
+    return {
+      trigger,
+      container
+    }
+  }
+}
+</script>

src/components/overlays/Slideover.vue

@@ -0,0 +1,210 @@
+<template>
+  <div v-if="showSlideover" ref="container" class="fixed inset-0 z-50 overflow-hidden slideover">
+    <div class="absolute inset-0 overflow-hidden">
+      <transition
+        appear
+        enter-class="opacity-0"
+        enter-active-class="duration-300 ease-out"
+        enter-to-class="opacity-100"
+        leave-class="opacity-100"
+        leave-active-class="duration-200 ease-in"
+        leave-to-class="opacity-0"
+        @before-leave="backdropLeaving = true"
+        @after-leave="backdropLeaving = false"
+      >
+        <div v-if="showBackdrop" class="fixed inset-0 transition-opacity bg-gray-800 sm:bg-opacity-75" @click="open = false" />
+      </transition>
+
+      <section class="absolute inset-y-0 right-0 flex max-w-full sm:pl-16">
+        <transition
+          appear
+          v-bind="transitionProps"
+          @before-leave="contentLeaving = true"
+          @after-leave="contentLeaving = false"
+        >
+          <Card
+            v-if="showContent"
+            v-bind="$attrs"
+            role="dialog"
+            aria-modal="true"
+            class="z-50 flex flex-col w-screen h-screen transition transform shadow-xl sm:max-w-md "
+            body-class="flex-1 overflow-y-auto"
+            ring-class="sm:ring-1 ring-transparent dark:ring-gray-700"
+            variant="white"
+            :rounded="false"
+          >
+            <template v-if="$slots.header" #header>
+              <slot name="header" />
+            </template>
+            <template v-else-if="title" #header>
+              <div class="flex items-center justify-between">
+                <h2 class="font-medium sm:leading-6 sm:text-lg text-tw-gray-900">
+                  {{ title }}
+                </h2>
+                <div class="flex items-center">
+                  <button
+                    type="button"
+                    aria-label="Close panel"
+                    class="rounded-md text-tw-gray-400 hover:text-tw-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    @click="open = false"
+                  >
+                    <Icon name="outline/x" class="w-6 h-6" />
+                  </button>
+                </div>
+              </div>
+            </template>
+            <slot />
+            <template v-if="$slots.footer" #footer>
+              <slot name="footer" />
+            </template>
+          </Card>
+        </transition>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+// import focusLock from 'dom-focus-lock'
+
+import Icon from '../elements/Icon'
+import Card from '../layout/Card'
+
+export default {
+  components: {
+    Icon,
+    Card
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      showSlideover: false,
+      showBackdrop: false,
+      showContent: false,
+      backdropLeaving: false,
+      contentLeaving: false,
+      lock: false
+    }
+  },
+  head () {
+    if (this.open) {
+      return {
+        bodyAttrs: {
+          class: ['overflow-hidden']
+        },
+        htmlAttrs: {
+          style: ['touch-action: none;']
+        }
+      }
+    }
+
+    return undefined
+  },
+  computed: {
+    transitionProps () {
+      // Same transition than Modal but only on mobile
+      if (this.$mq === 'xs') {
+        return {
+          enterClass: 'translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95',
+          enterActiveClass: 'duration-300 ease-out',
+          enterToClass: 'translate-y-0 opacity-100 sm:scale-100',
+          leaveClass: 'translate-y-0 opacity-100 sm:scale-100',
+          leaveActiveClass: 'duration-200 ease-in',
+          leaveToClass: 'translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95'
+        }
+      } else {
+        return {
+          enterClass: 'translate-x-full',
+          enterActiveClass: 'transition duration-500 ease-in-out transform sm:duration-700',
+          enterToClass: 'translate-x-0',
+          leaveClass: 'translate-x-0',
+          leaveActiveClass: 'transition duration-500 ease-in-out transform sm:duration-700',
+          leaveToClass: 'translate-x-full'
+        }
+      }
+    },
+    leaving () {
+      return this.backdropLeaving || this.contentLeaving
+    },
+    open: {
+      get () {
+        return this.value
+      },
+      set (open) {
+        this.$emit('input', open)
+      }
+    }
+  },
+  watch: {
+    open: {
+      handler (newValue) {
+        if (newValue) {
+          this.show()
+        } else {
+          this.close()
+        }
+      },
+      immediate: true
+    },
+    leaving (newValue) {
+      if (newValue === false) {
+        this.showSlideover = false
+        this.open = false
+      }
+    }
+  },
+  beforeDestroy () {
+    if (this.lock) {
+      // focusLock.off(this.$refs.container)
+      this.lock = false
+    }
+  },
+  shortcuts: {
+    disabled () {
+      return !this.open
+    },
+    esc: 'esc'
+  },
+  methods: {
+    show () {
+      this.showSlideover = true
+      this.showBackdrop = true
+      this.showContent = true
+      // Remove current focus if any, avoiding the close button to autofocus and break opening animation.
+      document.activeElement?.blur()
+      this.$nextTick(() => {
+        if (this.$refs.container && !this.lock) {
+          // focusLock.on(this.$refs.container)
+          this.lock = true
+        }
+      })
+    },
+    close () {
+      this.showBackdrop = false
+      this.showContent = false
+      if (this.lock) {
+        // focusLock.off(this.$refs.container)
+        this.lock = false
+      }
+    },
+    esc () {
+      this.$listeners.close ? this.$listeners.close() : this.close()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.slideover {
+  margin: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);
+}
+</style>

src/components/overlays/Tooltip.vue

@@ -0,0 +1,105 @@
+
+<template>
+  <div ref="container" @mouseover="mouseover" @mouseleave="mouseleave">
+    <slot />
+
+    <transition
+      enter-class="transform scale-95 opacity-0"
+      enter-active-class="transition duration-100 ease-out"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-class="opacity-100"
+      leave-active-class="duration-100 ease-in"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-show="show && (text || shortcuts.length || $slots.text)"
+        ref="tooltip"
+        class="fixed z-30 flex bg-gray-800 items-center justify-center invisible w-auto h-6 max-w-xs px-2 space-x-1 truncate rounded shadow lg:visible"
+      >
+        <span v-if="text || $slots.text" class="truncate text-gray-50 text-xxs">
+          <slot name="text">{{ text }}</slot>
+        </span>
+        <div v-if="shortcuts && shortcuts.length">
+          <div class="flex items-center flex-shrink-0 h-6 space-x-1">
+            <span v-if="text" class="mb-2 text-center text-gray-500">.</span>
+            <div
+              v-for="(shortcut, index) of shortcuts"
+              :key="index"
+              class="flex items-center px-1 bg-gray-600 rounded"
+            >
+              <span
+                class="font-light text-center text-gray-200 text-xxs"
+              >{{ shortcut }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+// import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+
+import { usePopper } from '../../utils'
+
+export default {
+  // components: {
+  //   Popover,
+  //   PopoverButton,
+  //   PopoverPanel
+  // },
+  props: {
+    placement: {
+      type: String,
+      default: 'bottom'
+    },
+    strategy: {
+      type: String,
+      default: 'absolute'
+    },
+    wrapperClass: {
+      type: String,
+      default: 'relative'
+    },
+    tooltipClass: {
+      type: String,
+      default: 'z-10'
+    },
+    label: {
+      type: String,
+      default: ''
+    }
+  },
+  setup (props) {
+    const [trigger, container] = usePopper({
+      placement: props.placement,
+      strategy: props.strategy,
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 8]
+        }
+      },
+      {
+        name: 'computeStyles',
+        options: {
+          gpuAcceleration: false,
+          adaptive: false
+        }
+      },
+      {
+        name: 'preventOverflow',
+        options: {
+          padding: 8
+        }
+      }]
+    })
+
+    return {
+      trigger,
+      container
+    }
+  }
+}
+</script>

src/index.ts

@@ -135,35 +135,35 @@ export default defineNuxtModule<UiOptions>({
     await installModule(nuxt, { src: '@vueuse/core/nuxt' })
     await installModule(nuxt, { src: '@unocss/nuxt', options })
 
-    addPlugin(resolve(dir, '../runtime/plugin'))
+    addPlugin(resolve(dir, './runtime/plugin'))
 
     addComponentsDir({
-      path: resolve(dir, '../components/elements'),
+      path: resolve(dir, './components/elements'),
       prefix,
       watch: false
     })
     addComponentsDir({
-      path: resolve(dir, '../components/feedback'),
+      path: resolve(dir, './components/feedback'),
       prefix,
       watch: false
     })
     addComponentsDir({
-      path: resolve(dir, '../components/forms'),
+      path: resolve(dir, './components/forms'),
       prefix,
       watch: false
     })
     addComponentsDir({
-      path: resolve(dir, '../components/layout'),
+      path: resolve(dir, './components/layout'),
       prefix,
       watch: false
     })
     addComponentsDir({
-      path: resolve(dir, '../components/navigation'),
+      path: resolve(dir, './components/navigation'),
       prefix,
       watch: false
     })
     addComponentsDir({
-      path: resolve(dir, '../components/overlays'),
+      path: resolve(dir, './components/overlays'),
       prefix,
       watch: false
     })

src/runtime/plugin.ts

@@ -0,0 +1,6 @@
+import { useDark } from '@vueuse/core'
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin(() => {
+  useDark()
+})

src/utils/index.ts

@@ -0,0 +1,5 @@
+export * from './popper'
+
+export function classNames (...classes: any[string]) {
+  return classes.filter(Boolean).join(' ')
+}

src/utils/popper.ts

@@ -0,0 +1,26 @@
+import { ref, onMounted, watchEffect } from 'vue'
+import { createPopper } from '@popperjs/core'
+
+export function usePopper (options: object) {
+  const reference = ref(null)
+  const popper = ref(null)
+
+  onMounted(() => {
+    watchEffect((onInvalidate) => {
+      if (!popper.value) { return }
+      if (!reference.value) { return }
+
+      const popperEl = popper.value.el || popper.value
+      const referenceEl = reference.value.el || reference.value
+
+      if (!(referenceEl instanceof HTMLElement)) { return }
+      if (!(popperEl instanceof HTMLElement)) { return }
+
+      const { destroy } = createPopper(referenceEl, popperEl, options)
+
+      onInvalidate(destroy)
+    })
+  })
+
+  return [reference, popper]
+}