feat: modify the accordion structure to obtain the context

Author: Ohh-889

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

@@ -1,62 +1,30 @@
 'use client';
 
 import type { Root } from '@radix-ui/react-accordion';
+import type { ComponentRef } from 'react';
 import { forwardRef } from 'react';
 
-import { cn } from '@/lib/utils';
+import { useComponentConfig } from '../config-provider/context';
 
-import AccordionContent from './AccordionContent';
-import AccordionHeader from './AccordionHeader';
-import AccordionItem from './AccordionItem';
-import AccordionRoot from './AccordionRoot';
-import AccordionTrigger from './AccordionTrigger';
-import { accordionVariants } from './accordion-variants';
+import AccordionUI from './AccordionUI';
 import type { AccordionProps } from './types';
 
-const Accordion = forwardRef<React.ElementRef<typeof Root>, AccordionProps>((props, ref) => {
-  const { className, classNames, items, size, triggerIcon, triggerLeading, triggerTrailing, ...rest } = props;
+const Accordion = forwardRef<ComponentRef<typeof Root>, AccordionProps>((props, ref) => {
+  const config = useComponentConfig('accordion');
 
-  const { root } = accordionVariants({ size });
-
-  const mergedCls = cn(root(), className);
+  const mergedProps = {
+    ...config,
+    ...props
+  };
 
   return (
-    <AccordionRoot
-      className={mergedCls}
+    <AccordionUI
+      {...mergedProps}
       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/AccordionUI.tsx

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

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

@@ -5,7 +5,9 @@ export const accordionVariants = tv({
     size: 'md'
   },
   slots: {
-    content: [`overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up`],
+    content: [
+      `overflow-hidden transition will-change-auto data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up`
+    ],
     header: 'flex',
     item: 'border-b',
     root: '',

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

@@ -4,5 +4,6 @@ export { default as AccordionHeader } from './AccordionHeader';
 export { default as AccordionItem } from './AccordionItem';
 export { default as AccordionRoot } from './AccordionRoot';
 export { default as AccordionTrigger } from './AccordionTrigger';
+export { default as AccordionUi } from './AccordionUI';
 
 export * from './types';

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

@@ -13,7 +13,7 @@ import type { BaseNodeProps, ClassValue, PropsSlot, ThemeSize } from '@/types/ot
 import type { AccordionSlots } from './accordion-variants';
 
 /** The ui of the accordion. */
-export type AccordionUi = Partial<Record<AccordionSlots, ClassValue>>;
+export type AccordionClassNames = Partial<Record<AccordionSlots, ClassValue>>;
 
 export type AccordionRootProps = BaseNodeProps<AccordionSingleProps> | BaseNodeProps<AccordionMultipleProps>;
 
@@ -25,7 +25,7 @@ export interface AccordionItemProps extends BaseNodeProps<_AccordionItemProps> {
 
 export interface AccordionTriggerProps extends BaseNodeProps<_AccordionTriggerProps>, PropsSlot {
   /** The ui of the accordion trigger. */
-  classNames?: Pick<AccordionUi, 'triggerIcon' | 'triggerLeadingIcon'>;
+  classNames?: Pick<AccordionClassNames, 'triggerIcon' | 'triggerLeadingIcon'>;
   icon?: React.ReactNode;
 }
 
@@ -38,7 +38,7 @@ export interface AccordionItemData extends Pick<AccordionItemProps, 'disabled' |
 }
 
 export type AccordionProps<T extends AccordionItemData = AccordionItemData> = AccordionRootProps & {
-  classNames?: AccordionUi;
+  classNames?: AccordionClassNames;
   items: T[];
   size?: ThemeSize;
   triggerIcon?: React.ReactNode;

packages/ui/src/index.ts

@@ -22,6 +22,8 @@ export * from './components/checkbox';
 
 export * from './components/chip';
 
+export * from './components/config-provider';
+
 export * from './components/divider';
 
 export * from './components/label';