chore: move to tsup

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>

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>