refactor: simplify component props and remove unused className

Author: huijiewei

packages/react-ui/src/components/accordion/accordion-content.tsx

@@ -1,13 +1,6 @@
 import type { EmptyObject, PrimitiveProps } from "../../primitives";
-import { tx } from "../../utils";
 import { CollapsibleContent } from "../collapsible/collapsible-content";
 
 export const AccordionContent = (props: PrimitiveProps<"div", EmptyObject, "id" | "role">) => {
-  const { className, children, ...rest } = props;
-
-  return (
-    <CollapsibleContent role={"region"} className={tx("", className)} {...rest}>
-      {children}
-    </CollapsibleContent>
-  );
+  return <CollapsibleContent role={"region"} {...props} />;
 };

packages/react-ui/src/components/accordion/accordion-header.tsx

@@ -1,12 +1,7 @@
 import { Polymorphic, type PolymorphicProps } from "../../primitives";
-import { tx } from "../../utils";
 
 export const AccordionHeader = (props: PolymorphicProps<"h3">) => {
-  const { render, className, children, ...rest } = props;
+  const { render, ...rest } = props;
 
-  return (
-    <Polymorphic<"h3"> as={"h3"} render={render} className={tx("", className)} {...rest}>
-      {children}
-    </Polymorphic>
-  );
+  return <Polymorphic<"h3"> as={"h3"} render={render} {...rest} />;
 };

packages/react-ui/src/components/accordion/accordion-item.tsx

@@ -1,5 +1,5 @@
 import type { PrimitiveProps } from "../../primitives";
-import { dataAttr, tx } from "../../utils";
+import { dataAttr } from "../../utils";
 import { CollapsibleRoot } from "../collapsible/collapsible-root";
 import { useAccordion } from "./accordion-context";
 
@@ -19,7 +19,7 @@ export type AccordionItemProps = {
 export const AccordionItem = (props: PrimitiveProps<"div", AccordionItemProps>) => {
   const { disabled: accordionDisabled, duration, collapsible, openedValue, setOpenedValue } = useAccordion();
 
-  const { value, disabled = accordionDisabled, className, children, ...rest } = props;
+  const { value, disabled = accordionDisabled, children, ...rest } = props;
 
   const opened = Array.isArray(openedValue) ? openedValue.includes(value) : openedValue == value;
 
@@ -48,7 +48,6 @@ export const AccordionItem = (props: PrimitiveProps<"div", AccordionItemProps>)
       duration={duration}
       disabled={disabled}
       data-open={dataAttr(opened)}
-      className={tx("", className)}
       {...rest}
     >
       {children}

packages/react-ui/src/components/alert/alert.tsx

@@ -16,9 +16,7 @@ export const Alert = (props: PrimitiveProps<"div", AlertProps, "role">) => {
 };
 
 export const AlertContent = (props: PrimitiveProps<"div">) => {
-  const { className, ...rest } = props;
-
-  return <div className={className} {...rest} />;
+  return <div {...props} />;
 };
 
 export const AlertTitle = (props: PrimitiveProps<"div">) => {

packages/react-ui/src/components/tabs/tabs-tab.tsx

@@ -4,7 +4,7 @@ import { useButtonProps, useIsomorphicEffect, useMergeRefs } from "../../hooks";
 import { Polymorphic, type PolymorphicProps } from "../../primitives";
 import { useComposite } from "../../primitives/composite/composite-context";
 import { ariaAttr, dataAttr, tx } from "../../utils";
-import { getTabId, useTabs } from "./tabs-context";
+import { getPanelId, getTabId, useTabs } from "./tabs-context";
 
 type TabsTabProps = {
   /**
@@ -27,6 +27,7 @@ export const TabsTab = (props: PolymorphicProps<"button", TabsTabProps, "type" |
   const { activeIndex, setActiveIndex } = useComposite();
 
   const tabId = getTabId(baseId, value);
+  const panelId = getPanelId(baseId, value);
   const selected = selectedValue === value;
 
   useIsomorphicEffect(() => {
@@ -70,6 +71,7 @@ export const TabsTab = (props: PolymorphicProps<"button", TabsTabProps, "type" |
       ref={refs}
       {...buttonProps}
       id={tabId}
+      aria-controls={selected ? panelId : undefined}
       aria-selected={ariaAttr(selected)}
       data-active={dataAttr(selected)}
       className={tx(orientation == "horizontal" ? "-mb-px" : "-me-px", disabled && "opacity-60", className)}

packages/react-ui/src/components/visually-hidden/visually-hidden.tsx

@@ -2,11 +2,7 @@ import type { PrimitiveProps } from "../../primitives";
 import { tx } from "../../utils";
 
 export const VisuallyHidden = (props: PrimitiveProps<"span">) => {
-  const { children, className, ...rest } = props;
+  const { className, ...rest } = props;
 
-  return (
-    <span {...rest} className={tx("sr-only", className)}>
-      {children}
-    </span>
-  );
+  return <span className={tx("sr-only", className)} {...rest} />;
 };