Add Collapse

apps/views/pages/collapse.tsx

@@ -0,0 +1,14 @@
+import Collapse from "./components/Collapse";
+
+function Collap() {
+  return (
+    <Collapse
+      variant="primary"
+      lablecontent="Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
+"
+      lable="toggle"
+    />
+  );
+}
+
+export default Collap;

apps/views/pages/components/Collapse.jsx

@@ -0,0 +1,22 @@
+function Collapse(props) {
+  return (
+    <div>
+      <button
+        className={`btn btn-${props.variant}`}
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#collapseExample"
+        aria-expanded="false"
+        aria-controls="collapseExample"
+      >
+        {props.label}
+      </button>
+
+      <div className="collapse" id="collapseExample">
+        <div className="card card-body">{props.labelcontent}</div>
+      </div>
+    </div>
+  );
+}
+
+export default Collapse;

apps/views/pages/index.tsx → apps/views/pages/index.jsx

@@ -15,6 +15,8 @@ export default function Docs() {
       <br />
       <br />
       <Button>Hello</Button>
+      <br />
+      <Link href="/collapse">Collapse</Link>
     </div>
   );
 }

packages/kbs-core/src/index.tsx

@@ -1,2 +1,3 @@
 import * as React from "react";
+
 export { Button, type ButtonProps } from "./Button";