chore: move to tsup

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>