fix(ssr): 🐛 use defaultProps for composition

Author: navin-moorthy

src/avatar-group/AvatarGroupWrapper.tsx

@@ -1,28 +1,25 @@
-import { GroupProps, useGroup } from "ariakit";
-import {
-  createComponent,
-  createElement,
-  createHook,
-} from "ariakit-utils/system";
+import { GroupOptions, useGroup } from "ariakit";
+import { createElement, createHook } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
-import { BoxOptions } from "../box";
+import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
-import { tcm } from "../utils";
+import { createComponent, cx } from "../utils";
 
 import { AvatarGroupUIProps } from "./AvatarGroupProps";
 
 export const useAvatarGroupWrapper = createHook<AvatarGroupWrapperOptions>(
   ({ size, squared, showRing, ringColor, max, ...props }) => {
     const theme = useTheme("avatar");
-    const className = tcm(
+    const className = cx(
       theme.group.base,
       size ? theme.group.size[size] : "",
       props.className,
     );
 
     props = { "aria-label": "avatar group", ...props, className };
     props = useGroup(props);
+    props = useBox(props);
 
     return props;
   },
@@ -34,10 +31,11 @@ export const AvatarGroupWrapper = createComponent<AvatarGroupWrapperOptions>(
 
     return createElement("div", htmlProps);
   },
+  "AvatarGroupWrapper",
 );
 
 export type AvatarGroupWrapperOptions<T extends As = "div"> = BoxOptions<T> &
-  GroupProps<T> &
+  GroupOptions<T> &
   Partial<AvatarGroupUIProps> & {};
 
 export type AvatarGroupWrapperProps<T extends As = "div"> = Props<

src/avatar/AvatarIcon.tsx

@@ -1,13 +1,9 @@
-import {
-  createComponent,
-  createElement,
-  createHook,
-} from "ariakit-utils/system";
+import { createElement, createHook } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
 import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
-import { cx } from "../utils";
+import { createComponent, cx } from "../utils";
 
 import { AvatarUIProps } from "./AvatarProps";
 
@@ -51,7 +47,7 @@ export const AvatarIcon = createComponent<AvatarIconOptions>(props => {
   const htmlProps = useAvatarIcon(props);
 
   return createElement("span", htmlProps);
-});
+}, "AvatarIcon");
 
 export type AvatarIconOptions<T extends As = "span"> = BoxOptions<T> &
   Partial<AvatarUIProps> & {};

src/avatar/AvatarImage.tsx

@@ -1,13 +1,9 @@
-import {
-  createComponent,
-  createElement,
-  createHook,
-} from "ariakit-utils/system";
+import { createElement, createHook } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
 import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
-import { cx } from "../utils";
+import { createComponent, cx } from "../utils";
 
 import { AvatarUIProps } from "./AvatarProps";
 
@@ -51,7 +47,7 @@ export const AvatarImage = createComponent<AvatarImageOptions>(props => {
   const htmlProps = useAvatarImage(props);
 
   return createElement("img", htmlProps);
-});
+}, "AvatarImage");
 
 export type AvatarImageOptions<T extends As = "img"> = BoxOptions<T> &
   Partial<AvatarUIProps> & {};

src/avatar/AvatarInitials.tsx

@@ -1,13 +1,9 @@
-import {
-  createComponent,
-  createElement,
-  createHook,
-} from "ariakit-utils/system";
+import { createElement, createHook } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
 import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
-import { cx } from "../utils";
+import { createComponent, cx } from "../utils";
 
 import { AvatarUIProps } from "./AvatarProps";
 
@@ -52,7 +48,7 @@ export const AvatarInitials = createComponent<AvatarInitialsOptions>(props => {
   const htmlProps = useAvatarInitials(props);
 
   return createElement("span", htmlProps);
-});
+}, "AvatarInitials");
 
 export type AvatarInitialsOptions<T extends As = "span"> = BoxOptions<T> &
   Partial<AvatarUIProps> & {};

src/avatar/AvatarStatusIndicator.tsx

@@ -1,13 +1,9 @@
-import {
-  createComponent,
-  createElement,
-  createHook,
-} from "ariakit-utils/system";
+import { createElement, createHook } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
 import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
-import { cx } from "../utils";
+import { createComponent, cx } from "../utils";
 
 import { AvatarUIProps } from "./AvatarProps";
 
@@ -45,7 +41,7 @@ export const AvatarStatusIndicator =
     const htmlProps = useAvatarStatusIndicator(props);
 
     return createElement("div", htmlProps);
-  });
+  }, "AvatarStatusIndicator");
 
 export type AvatarStatusIndicatorOptions<T extends As = "div"> = BoxOptions<T> &
   Partial<AvatarUIProps> & {};

src/avatar/AvatarWrapper.tsx

@@ -1,13 +1,9 @@
-import {
-  createComponent,
-  createElement,
-  createHook,
-} from "ariakit-utils/system";
+import { createElement, createHook } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
 import { BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
-import { cx } from "../utils";
+import { createComponent, cx } from "../utils";
 
 import { AvatarUIProps } from "./AvatarProps";
 
@@ -50,7 +46,7 @@ export const AvatarWrapper = createComponent<AvatarWrapperOptions>(props => {
   const htmlProps = useAvatarWrapper(props);
 
   return createElement("span", htmlProps);
-});
+}, "AvatarWrapper");
 
 export type AvatarWrapperOptions<T extends As = "span"> = BoxOptions<T> &
   Partial<AvatarUIProps> & {};

src/badge/Badge.tsx

@@ -1,13 +1,9 @@
-import {
-  createComponent,
-  createElement,
-  createHook,
-} from "ariakit-utils/system";
+import { createElement, createHook } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
 import { Box, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";
-import { cx, RenderProp, withIconA11y } from "../utils";
+import { createComponent, cx, RenderProp, withIconA11y } from "../utils";
 
 export const useBadge = createHook<BadgeOptions>(
   ({
@@ -52,7 +48,7 @@ export const Badge = createComponent<BadgeOptions>(props => {
   const htmlProps = useBadge(props);
 
   return createElement("div", htmlProps);
-});
+}, "Badge");
 
 export type BadgeState = {
   /**

src/box/Box.tsx

@@ -1,14 +1,10 @@
-import { RoleOptions, useRole } from "ariakit";
-import {
-  createComponent,
-  createElement,
-  createHook,
-} from "ariakit-utils/system";
+import { useRole } from "ariakit";
+import { createElement, createHook } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
-import { tcm } from "../utils";
+import { ComponentOptions, createComponent, tcm } from "../utils";
 
-export const useBox = createHook<BoxOptions>(props => {
+export const useBox = createHook<BoxOptions>(({ __TYPE__, ...props }) => {
   props = { ...props, className: tcm(props.className) };
   props = useRole(props);
 
@@ -19,8 +15,8 @@ export const Box = createComponent<BoxOptions>(props => {
   const htmlProps = useBox(props);
 
   return createElement("div", htmlProps);
-});
+}, "Box");
 
-export type BoxOptions<T extends As = "div"> = RoleOptions<T>;
+export type BoxOptions<T extends As = "div"> = ComponentOptions<T>;
 
 export type BoxProps<T extends As = "div"> = Props<BoxOptions<T>>;

src/button-group/ButtonGroup.tsx

@@ -1,14 +1,11 @@
 import { cx, useWrapElement } from "ariakit-utils";
-import {
-  createComponent,
-  createElement,
-  createHook,
-} from "ariakit-utils/system";
+import { createElement, createHook } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 
 import { BoxOptions, useBox } from "../box";
 import { ButtonProps } from "../button";
 import { useTheme } from "../theme";
+import { createComponent } from "../utils";
 
 import { ButtonGroupContextProvider } from "./__utils";
 
@@ -55,7 +52,7 @@ export const ButtonGroup = createComponent<ButtonGroupOptions>(props => {
   const htmlProps = useButtonGroup(props);
 
   return createElement("div", htmlProps);
-});
+}, "ButtonGroup");
 
 export type ButtonGroupOptions<T extends As = "div"> = BoxOptions<T> &
   Pick<ButtonProps, "size" | "themeColor" | "variant"> & {

src/button/Button.tsx

@@ -3,20 +3,16 @@ import {
   ButtonOptions as AriakitButtonOptions,
   useButton as useAriakitButton,
 } from "ariakit";
-import {
-  createComponent,
-  createElement,
-  createHook,
-} from "ariakit-utils/system";
+import { createElement, createHook } from "ariakit-utils/system";
 import { As, Props } from "ariakit-utils/types";
 import { announce } from "@react-aria/live-announcer";
 
-import { Box } from "../box";
+import { Box, BoxOptions, useBox } from "../box";
 import { useButtonGroupContext } from "../button-group";
 import { usePrevious } from "../hooks";
 import { Spinner } from "../spinner";
 import { useTheme } from "../theme";
-import { cx, RenderProp, tcm, withIconA11y } from "../utils";
+import { createComponent, cx, RenderProp, tcm, withIconA11y } from "../utils";
 
 import { ButtonFullWidthSpinner, ButtonSpinner } from "./ButtonSpinner";
 
@@ -130,6 +126,7 @@ export const useButton = createHook<ButtonOptions>(
     );
     props = { ...props, className, children, disabled };
     props = useAriakitButton(props);
+    props = useBox(props);
 
     return props;
   },
@@ -139,7 +136,7 @@ export const Button = createComponent<ButtonOptions>(props => {
   const htmlProps = useButton(props);
 
   return createElement("button", htmlProps);
-});
+}, "Button");
 
 export type ButtonState = {
   /**
@@ -195,10 +192,8 @@ export type ButtonState = {
 
 export type ButtonRenderProps = Pick<ButtonProps, "className" | "disabled">;
 
-export type ButtonOptions<T extends As = "button"> = Omit<
-  AriakitButtonOptions<T>,
-  "size" | "prefix"
-> &
+export type ButtonOptions<T extends As = "button"> = BoxOptions<T> &
+  Omit<AriakitButtonOptions<T>, "size" | "prefix"> &
   Partial<ButtonState>;
 
 export type ButtonProps<T extends As = "button"> = Props<ButtonOptions<T>>;