refactor(Accordion): update styling integration with tailwind-variants

Author: websiddu

lib/Accordion/Accordion.scss

@@ -52,7 +52,3 @@
     }
   }
 }
-
-.accordion-content {
-  @apply p-4;
-}

lib/Accordion/Accordion.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import './Accordion.scss';
 
+import { tv } from 'tailwind-variants';
+
 interface AccordionProps {
   title: string;
   children: React.ReactNode;
@@ -10,15 +12,29 @@ interface AccordionGroupProps {
   children: React.ReactNode | React.ReactNode[];
 }
 
+const accordionStyles = tv({
+  slots: {
+    accordionGroup: 'rounded-none border-b-0 gap-2 flex flex-col',
+    accordion: 'overflow-hidden rounded-xl border border-gray-950/10 dark:border-gray-100/10',
+    accordionSummary:
+      'm-0 cursor-pointer select-none px-4 py-2.5 font-medium bg-gray-800/5 dark:bg-gray-300/5  before:content-[""] before:mr-2',
+    accordionContent: 'p-4',
+  },
+});
+
 export const Accordion: React.FC<AccordionProps> = ({ title = '', children }) => {
+  const { accordion, accordionSummary, accordionContent } = accordionStyles();
+
   return (
-    <details className={'accordion'}>
-      <summary className={'accordion-summary'}>{title}</summary>
-      <div className={'accordion-content'}>{children}</div>
+    <details className={accordion()}>
+      <summary className={accordionSummary()}>{title}</summary>
+      <div className={accordionContent()}>{children}</div>
     </details>
   );
 };
 
 export const AccordionGroup: React.FC<AccordionGroupProps> = ({ children }) => {
-  return <div className={'accordion-group'}>{children}</div>;
+  const { accordionGroup } = accordionStyles();
+
+  return <div className={accordionGroup()}>{children}</div>;
 };

lib/Callout/Callout.tsx

@@ -12,7 +12,7 @@ import type { VariantProps } from 'tailwind-variants';
 const callout = tv({
   slots: {
     base: 'mt-6 overflow-hidden rounded-xl border px-5 py-4 flex items-start space-x-3',
-    icon: 'mt-0.5 h-5 w-5',
+    icon: 'h-5 w-5 mt-[1px]',
     content: 'flex-1 overflow-x-auto first:mt-0 last:mb-0',
   },
   variants: {
@@ -91,10 +91,13 @@ const Callout = ({ variant = 'info', children }: CalloutProps) => {
 
   return (
     <div className={base()}>
-      <Icon
-        size={20}
-        className={icon()}
-      />
+      <div className="flex items-center justify-center">
+        <Icon
+          size={20}
+          className={icon()}
+        />
+        <span className="-ml-[4px]">&nbsp;</span>
+      </div>
       <div className={content()}>{children}</div>
     </div>
   );

src/pages/CalloutSamples.tsx

@@ -4,6 +4,11 @@ export function CalloutSamples() {
   return (
     <>
       <Tip>Content for the tip goes here!</Tip>
+      <Tip>
+        Content for the tip goes here! Content for the tip goes here!Content for the tip goes
+        here!Content for the tip goes here!Content for the tip goes here!Content for the tip goes
+        here!
+      </Tip>
       <Info>This is an info</Info>
       <Warning>This is a warning</Warning>
       <Success>This is a success</Success>