mm

packages/ui/src/common/Box.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { useThemeContext } from "./ThemeProvider/useThemeContext";
+import { cn } from "tailwind-variants";
+import type { CommonProps } from "@/common/CommonProps";
+
+// 别名<约束>=值
+// 千万不要 C = As extend React.ElementType，这样子连等号，会切断推导
+type AsProp<C extends React.ElementType> = { as?: C };
+
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+
+export type PolymorphicProps<C extends React.ElementType, P = {}> = (P &
+  AsProp<C>) &
+  Omit<React.ComponentPropsWithRef<C>, PropsToOmit<C, P>>;
+
+interface BoxProps<C extends React.ElementType> extends CommonProps {
+  as?: C;
+}
+
+const Box = <C extends React.ElementType = "div">(
+  props: PolymorphicProps<C, BoxProps<C>>,
+  ref?: React.ComponentPropsWithRef<C>["ref"],
+) => {
+  const { as: Component = "div", children, className, ...rest } = props;
+
+  const { themeClass } = useThemeContext();
+  if (!themeClass) {
+    throw new Error("Box must be used within a ThemeProvider");
+  }
+
+  const boxRootClass = cn(themeClass, className);
+
+  return (
+    <Component ref={ref} className={boxRootClass} {...(rest as any)}>
+      {children}
+    </Component>
+  );
+};
+
+export type BoxComponent = <C extends React.ElementType = "div">(
+  props: PolymorphicProps<C, BoxProps<C>> & {
+    ref?: React.ComponentPropsWithRef<C>["ref"];
+  },
+) => React.ReactElement | null;
+
+export default Box as BoxComponent;