Add Polymorphic component, update Box to use it

packages/tackle-box/lib/components/Box/Box.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useMemo } from "react";
-import { css, html } from "react-strict-dom";
+import { css } from "react-strict-dom";
 import { type Colors, getColorValue } from "@/vars/colors.stylex";
 import { StyleObj, UnitValue } from "@/utils/types";
 import {
@@ -13,6 +13,12 @@ import {
   type BorderRadiusArgs,
   type BorderWidthArgs,
 } from "./utils";
+import {
+  Polymorphic,
+  PolymorphicComponentProps,
+  RSDElementTypes,
+} from "../Polymorphic/Polymorphic";
+
 const styles = css.create({
   base: {
     boxSizing: "border-box",
@@ -82,7 +88,7 @@ export type BoxProps = BorderRadiusArgs &
     style?: StyleObj;
   } & MarginPadding;
 
-export function Box({
+export function Box<TAsProp extends RSDElementTypes = "div">({
   children,
   height = "auto",
   width = "100%",
@@ -100,9 +106,38 @@ export function Box({
   borderLeftWidth,
   flexGrow,
   style,
-  ...marginPadding
-}: BoxProps) {
-  const { margin, padding } = useMarginPaddingValues(marginPadding);
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+  ...rest
+}: PolymorphicComponentProps<TAsProp, BoxProps>) {
+  const { margin, padding } = useMarginPaddingValues({
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+  });
 
   const borderRadiusValues = useMemo(() => {
     return computeBorderRadius({
@@ -137,7 +172,7 @@ export function Box({
   ]);
 
   return (
-    <html.div
+    <Polymorphic
       style={[
         styles.base,
         styles.dimensions(height, width),
@@ -152,8 +187,9 @@ export function Box({
         styles.flexGrow(flexGrow),
         style,
       ]}
+      {...rest}
     >
       {children}
-    </html.div>
+    </Polymorphic>
   );
 }

packages/tackle-box/lib/components/Polymorphic/Polymorphic.tsx

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import { html } from "react-strict-dom";
+
+/**
+ * Union of possible react-strict-dom elements. E.g. html.div, html.p would equal "div" | "p"
+ */
+export type RSDElementTypes = keyof typeof html;
+
+/**
+ * Gets the React.ElementType for a given react-strict-dom element.
+ */
+type RSDElement<T extends RSDElementTypes> = (typeof html)[T];
+
+/**
+ * Gets the props for a given react-strict-dom element.
+ */
+type RSDElementProps<T extends RSDElementTypes> = ComponentPropsWithoutRef<
+  RSDElement<T>
+>;
+
+/**
+ * Props for the `as` prop that can be used to change the returned element type.
+ */
+type AsProp<TAsProp extends RSDElementTypes> = {
+  as?: TAsProp;
+};
+
+/**
+ * Utility to create props for polymorphic components.
+ */
+export type PolymorphicComponentProps<
+  TAsProp extends RSDElementTypes,
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  TProps extends Record<string, unknown> = {},
+> = PropsWithChildren<
+  AsProp<TAsProp> & TProps & Omit<RSDElementProps<TAsProp>, keyof TProps>
+>;
+
+export function Polymorphic<TAsProp extends RSDElementTypes = "div">({
+  as,
+  children,
+  ...rest
+}: PolymorphicComponentProps<TAsProp>) {
+  const elementType: RSDElementTypes = as ?? "div";
+  const Component = html[elementType];
+
+  return <Component {...rest}>{children}</Component>;
+}