feat: Accordian

rollup.config.js

@@ -28,6 +28,7 @@ export default {
     card: 'src/components/Card/index.tsx',
     badge: 'src/components/Badge/index.tsx',
     alert: 'src/components/Alert/index.tsx',
+    accordian: 'src/components/Accordian/index.tsx',
     tabs: 'src/components/Tabs/index.tsx',
     menu: 'src/components/Menu/index.tsx',
     modal: 'src/components/Modal/index.tsx',

src/components/Accordion/Accordion.module.css

@@ -0,0 +1,72 @@
+.sbui-accordion-container {
+  @apply flex flex-col rounded-md;
+}
+
+.sbui-accordion-container--bordered {
+  @apply border border-solid;
+  @apply bg-white border-gray-200;
+  @apply dark:bg-dark-700 dark:border-darkmode;
+}
+
+.sbui-accordion-item {
+  @apply w-full;
+}
+
+.sbui-accordion-item__button {
+  @apply flex justify-between w-full text-left cursor-pointer px-6 py-4 border-0 border-solid font-medium text-base rounded-t-md bg-transparent;
+
+  @apply border-gray-200 text-gray-500 hover:text-gray-600;
+  @apply dark:border-darkmode dark:text-dark-200 dark:hover:text-white;
+
+  font-family: inherit;
+  font-weight: inherit;
+}
+
+.sbui-accordion-item__button .sbui-typography-text {
+  @apply w-full max-w-none;
+}
+
+.sbui-accordion-item__button .sbui-typography-text:last-child {
+  @apply pl-2;
+}
+
+.sbui-accordion-item__button .sbui-icon {
+  @apply mt-px;
+}
+
+.sbui-accordion-item__button--open .sbui-icon {
+  @apply transform rotate-180;
+}
+
+.sbui-accordion-container--bordered
+  .sbui-accordion-item__button:not(:first-child) {
+  @apply rounded-none border-t border-gray-200 dark:border-darkmode;
+}
+
+.sbui-accordion-item__panel {
+  @apply px-6 py-4;
+}
+
+.sbui-accordion-item__panel--enter {
+  @apply transition-max-height ease-in-out duration-700 overflow-hidden;
+}
+
+.sbui-accordion-item__panel--enterFrom {
+  @apply max-h-0;
+}
+
+.sbui-accordion-item__panel--enterTo {
+  @apply max-h-screen;
+}
+
+.sbui-accordion-item__panel--leave {
+  @apply transition-max-height ease-in-out duration-300 overflow-hidden;
+}
+
+.sbui-accordion-item__panel--leaveFrom {
+  @apply max-h-screen;
+}
+
+.sbui-accordion-item__panel--leaveTo {
+  @apply max-h-0;
+}