feat: add component accordion

Author: Ohh-889

packages/ui-variants/src/index.ts

@@ -2,6 +2,7 @@ export * from './shared';
 
 export * from './types';
 
+export * from './variants/accordion';
 export * from './variants/badge';
 export * from './variants/button';
 export * from './variants/button-group';

packages/ui-variants/src/variants/accordion.ts

@@ -0,0 +1,56 @@
+import { tv } from 'tailwind-variants';
+
+export const accordionVariants = tv({
+  defaultVariants: {
+    size: 'md'
+  },
+  slots: {
+    content: [`overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up`],
+    header: 'flex',
+    item: 'border-b',
+    root: '',
+    trigger: [
+      `flex-1 flex items-center justify-start font-medium transition-all duration-200 bg-transparent`,
+      `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary`,
+      `hover:underline [&[data-state=open]>.trigger-icon]:rotate-180`
+    ],
+    triggerIcon: `trigger-icon ml-auto shrink-0 text-muted-foreground transition-transform duration-200`,
+    triggerLeadingIcon: `shrink-0`
+  },
+  variants: {
+    size: {
+      '2xl': {
+        content: 'data-[state=open]:pb-6',
+        root: 'text-2xl',
+        trigger: 'py-6 gap-6'
+      },
+      lg: {
+        content: 'data-[state=open]:pb-4.5',
+        root: 'text-base',
+        trigger: 'py-4.5 gap-4.5'
+      },
+      md: {
+        content: 'data-[state=open]:pb-4',
+        root: 'text-sm',
+        trigger: 'py-4 gap-4'
+      },
+      sm: {
+        content: 'data-[state=open]:pb-3.5',
+        root: 'text-xs',
+        trigger: 'py-3.5 gap-3.5'
+      },
+      xl: {
+        content: 'data-[state=open]:pb-5',
+        root: 'text-lg',
+        trigger: 'py-5 gap-5'
+      },
+      xs: {
+        content: 'data-[state=open]:pb-3',
+        root: 'text-2xs',
+        trigger: 'py-3 gap-3'
+      }
+    }
+  }
+});
+
+export type AccordionSlots = keyof typeof accordionVariants.slots;

packages/ui/package.json

@@ -11,6 +11,7 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-compose-refs": "1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-separator": "^1.1.7",

packages/ui/src/components/accordion/index.ts

@@ -0,0 +1,8 @@
+export { default as Accordion } from './source/Accordion';
+export { default as AccordionContent } from './source/AccordionContent';
+export { default as AccordionHeader } from './source/AccordionHeader';
+export { default as AccordionItem } from './source/AccordionItem';
+export { default as AccordionRoot } from './source/AccordionRoot';
+export { default as AccordionTrigger } from './source/AccordionTrigger';
+
+export * from './types';

packages/ui/src/components/accordion/source/Accordion.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import type { Root } from '@radix-ui/react-accordion';
+import { accordionVariants, cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { AccordionProps } from '../types';
+
+import AccordionContent from './AccordionContent';
+import AccordionHeader from './AccordionHeader';
+import AccordionItem from './AccordionItem';
+import AccordionRoot from './AccordionRoot';
+import AccordionTrigger from './AccordionTrigger';
+
+const Accordion = forwardRef<React.ElementRef<typeof Root>, AccordionProps>((props, ref) => {
+  const { className, classNames, items, size, triggerIcon, triggerLeading, triggerTrailing, ...rest } = props;
+
+  const { root } = accordionVariants({ size });
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <AccordionRoot
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    >
+      {items.map(item => (
+        <AccordionItem
+          className={classNames?.item}
+          disabled={item.disabled}
+          key={item.value}
+          value={item.value}
+        >
+          <AccordionHeader className={classNames?.header}>
+            <AccordionTrigger
+              className={classNames?.trigger}
+              classNames={classNames}
+              icon={triggerIcon}
+              leading={item.leading || triggerLeading}
+              size={size}
+              trailing={item.trailing || triggerTrailing}
+            >
+              {item.title}
+            </AccordionTrigger>
+          </AccordionHeader>
+
+          <AccordionContent
+            className={classNames?.content}
+            size={size}
+          >
+            {item.children}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </AccordionRoot>
+  );
+});
+Accordion.displayName = 'Accordion';
+
+export default Accordion;

packages/ui/src/components/accordion/source/AccordionContent.tsx

@@ -0,0 +1,24 @@
+import { Content } from '@radix-ui/react-accordion';
+import { accordionVariants, cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { AccordionContentProps } from '../types';
+
+const AccordionContent = forwardRef<React.ElementRef<typeof Content>, AccordionContentProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { content } = accordionVariants({ size });
+
+  const mergedCls = cn(content(), className);
+
+  return (
+    <Content
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+AccordionContent.displayName = Content.displayName;
+
+export default AccordionContent;

packages/ui/src/components/accordion/source/AccordionHeader.tsx

@@ -0,0 +1,24 @@
+import { Header } from '@radix-ui/react-accordion';
+import { accordionVariants, cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { AccordionHeaderProps } from '../types';
+
+const AccordionHeader = forwardRef<React.ElementRef<typeof Header>, AccordionHeaderProps>((props, ref) => {
+  const { className, ...rest } = props;
+
+  const { header } = accordionVariants();
+
+  const mergedCls = cn(header(), className);
+
+  return (
+    <Header
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+AccordionHeader.displayName = Header.displayName;
+
+export default AccordionHeader;

packages/ui/src/components/accordion/source/AccordionItem.tsx

@@ -0,0 +1,24 @@
+import { Item } from '@radix-ui/react-accordion';
+import { accordionVariants, cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { AccordionItemProps } from '../types';
+
+const AccordionItem = forwardRef<React.ElementRef<typeof Item>, AccordionItemProps>((props, ref) => {
+  const { className, ...rest } = props;
+
+  const { item } = accordionVariants();
+
+  const mergedCls = cn(item(), className);
+
+  return (
+    <Item
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+AccordionItem.displayName = Item.displayName;
+
+export default AccordionItem;

packages/ui/src/components/accordion/source/AccordionRoot.tsx

@@ -0,0 +1,24 @@
+import { Root } from '@radix-ui/react-accordion';
+import { accordionVariants, cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { AccordionRootProps } from '../types';
+
+const AccordionRoot = forwardRef<React.ElementRef<typeof Root>, AccordionRootProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { root } = accordionVariants({ size });
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <Root
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+AccordionRoot.displayName = Root.displayName;
+
+export default AccordionRoot;

packages/ui/src/components/accordion/source/AccordionTrigger.tsx

@@ -0,0 +1,38 @@
+import { Trigger } from '@radix-ui/react-accordion';
+import { Slot } from '@radix-ui/react-slot';
+import { accordionVariants, cn } from '@soybean-react-ui/variants';
+import { ChevronDown } from 'lucide-react';
+import { forwardRef } from 'react';
+
+import type { AccordionTriggerProps } from '../types';
+
+const AccordionTrigger = forwardRef<React.ElementRef<typeof Trigger>, AccordionTriggerProps>((props, ref) => {
+  const { children, className, classNames, icon, leading, size, trailing, ...rest } = props;
+
+  const { trigger, triggerIcon, triggerLeadingIcon } = accordionVariants({ size });
+
+  const mergedCls = cn(trigger(), className);
+
+  const leadingIcon = cn(triggerLeadingIcon(), classNames?.triggerLeadingIcon);
+
+  const iconCls = cn(triggerIcon(), classNames?.triggerIcon);
+
+  return (
+    <Trigger
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    >
+      <Slot className={leadingIcon}>{leading}</Slot>
+
+      {children}
+
+      {trailing}
+
+      <Slot className={iconCls}>{icon || <ChevronDown />}</Slot>
+    </Trigger>
+  );
+});
+AccordionTrigger.displayName = Trigger.displayName;
+
+export default AccordionTrigger;