first init

fe/src/components/ui/box/box.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { cn } from "@mykopkb/core/utils/cn";
+import {
+  boxVariants,
+  type BoxVariants,
+} from "@mykopkb/core/styles/box.styles";
+import { Slot } from "@/components/ui/slot";
+
+const {
+  class: className,
+  asChild = false,
+  raised,
+  ...props
+} = defineProps<
+  BoxVariants & {
+    class?: string;
+    asChild?: boolean;
+  }
+>();
+</script>
+
+<template>
+  <Slot :class="cn(boxVariants({ raised, className }), className)" v-bind="{ ...props, ...$attrs }">
+    <slot v-if="asChild" />
+    <div v-else>
+      <slot />
+    </div>
+  </Slot>
+</template>

fe/src/components/ui/box/index.ts

@@ -0,0 +1 @@
+export { default as Box } from "./Box.vue";