docs: component namespacing

packages/anatomy/src/components.ts

@@ -80,6 +80,7 @@ export const menuAnatomy = anatomy("menu").parts(
   "divider",
 )
 
+// TODO: remove this in favor of dialogAnatomy
 export const modalAnatomy = anatomy("modal").parts(
   "overlay",
   "positioner",
@@ -90,6 +91,16 @@ export const modalAnatomy = anatomy("modal").parts(
   "footer",
 )
 
+export const dialogAnatomy = anatomy("dialog").parts(
+  "overlay",
+  "positioner",
+  "content",
+  "header",
+  "closeTrigger",
+  "body",
+  "footer",
+)
+
 export const drawerAnatomy = anatomy("drawer").parts(
   "overlay",
   "positioner",

packages/props-docs/generated/accordion.json

@@ -1,65 +1,65 @@
 {
-  "Accordion": {
-    "allowMultiple": {
+  "AccordionTrigger": {},
+  "AccordionIcon": { "orientation": { "type": "any", "required": false } },
+  "AccordionItem": {
+    "id": {
+      "type": "string",
+      "required": false,
+      "description": "A unique id for the accordion item."
+    },
+    "isDisabled": {
       "type": "boolean",
       "defaultValue": false,
       "required": false,
-      "description": "If `true`, multiple accordion items can be expanded at once."
+      "description": "If `true`, the accordion item will be disabled."
     },
-    "allowToggle": {
+    "isFocusable": {
+      "type": "boolean",
+      "defaultValue": false,
+      "required": false,
+      "description": "If `true`, the accordion item will be focusable."
+    }
+  },
+  "AccordionContent": {
+    "motionProps": {
+      "type": "CollapseProps",
+      "required": false,
+      "description": "The properties passed to the underlying `Collapse` component."
+    }
+  },
+  "AccordionRoot": {
+    "collapsible": {
       "type": "boolean",
       "defaultValue": false,
       "required": false,
       "description": "If `true`, any expanded accordion item can be collapsed again."
     },
     "defaultIndex": {
-      "type": "ExpandedIndex",
+      "type": "number | number[]",
       "required": false,
       "description": "The initial index(es) of the expanded accordion item"
     },
     "index": {
-      "type": "ExpandedIndex",
+      "type": "number | number[]",
       "required": false,
       "description": "The index(es) of the expanded accordion item"
     },
-    "onChange": {
-      "type": "(expandedIndex: ExpandedIndex) => void",
-      "required": false,
-      "description": "The callback invoked when accordion items are expanded or collapsed."
-    },
-    "reduceMotion": {
+    "multiple": {
       "type": "boolean",
       "defaultValue": false,
       "required": false,
-      "description": "If `true`, height animation and transitions will be disabled."
-    }
-  },
-  "AccordionButton": {},
-  "AccordionIcon": { "orientation": { "type": "any", "required": false } },
-  "AccordionItem": {
-    "id": {
-      "type": "string",
-      "required": false,
-      "description": "A unique id for the accordion item."
+      "description": "If `true`, multiple accordion items can be expanded at once."
     },
-    "isDisabled": {
-      "type": "boolean",
-      "defaultValue": false,
+    "onChange": {
+      "type": "(expandedIndex: number | number[]) => void",
       "required": false,
-      "description": "If `true`, the accordion item will be disabled."
+      "description": "The callback invoked when accordion items are expanded or collapsed."
     },
-    "isFocusable": {
+    "reduceMotion": {
       "type": "boolean",
       "defaultValue": false,
       "required": false,
-      "description": "If `true`, the accordion item will be focusable."
-    }
-  },
-  "AccordionPanel": {
-    "motionProps": {
-      "type": "CollapseProps",
-      "required": false,
-      "description": "The properties passed to the underlying `Collapse` component."
+      "description": "If `true`, height animation and transitions will be disabled."
     }
   },
   "UseAccordionItem": {
@@ -82,30 +82,30 @@
     }
   },
   "UseAccordion": {
-    "allowMultiple": {
-      "type": "boolean",
-      "defaultValue": false,
-      "required": false,
-      "description": "If `true`, multiple accordion items can be expanded at once."
-    },
-    "allowToggle": {
+    "collapsible": {
       "type": "boolean",
       "defaultValue": false,
       "required": false,
       "description": "If `true`, any expanded accordion item can be collapsed again."
     },
     "defaultIndex": {
-      "type": "ExpandedIndex",
+      "type": "number | number[]",
       "required": false,
       "description": "The initial index(es) of the expanded accordion item"
     },
     "index": {
-      "type": "ExpandedIndex",
+      "type": "number | number[]",
       "required": false,
       "description": "The index(es) of the expanded accordion item"
     },
+    "multiple": {
+      "type": "boolean",
+      "defaultValue": false,
+      "required": false,
+      "description": "If `true`, multiple accordion items can be expanded at once."
+    },
     "onChange": {
-      "type": "(expandedIndex: ExpandedIndex) => void",
+      "type": "(expandedIndex: number | number[]) => void",
       "required": false,
       "description": "The callback invoked when accordion items are expanded or collapsed."
     }

packages/props-docs/generated/alert.json

@@ -1,31 +1,14 @@
 {
-  "Alert": {
+  "AlertDescription": {},
+  "AlertIcon": {},
+  "AlertRoot": {
     "addRole": { "type": "boolean", "defaultValue": false, "required": false },
-    "colorScheme": {
-      "defaultValue": "blue",
-      "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\"",
-      "required": false,
-      "description": "The visual color appearance of the component"
-    },
-    "size": {
-      "type": "string",
-      "required": false,
-      "description": "The size of the Alert"
-    },
     "status": {
       "type": "\"info\" | \"warning\" | \"success\" | \"error\" | \"loading\"",
       "defaultValue": "info",
       "required": false,
       "description": "The status of the alert"
-    },
-    "variant": {
-      "defaultValue": "subtle",
-      "type": "\"subtle\" | \"left-accent\" | \"top-accent\" | \"solid\"",
-      "required": false,
-      "description": "The variant of the Alert"
     }
   },
-  "AlertDescription": {},
-  "AlertIcon": {},
   "AlertTitle": {}
 }

packages/props-docs/generated/avatar.json

@@ -1,10 +1,97 @@
 {
-  "Avatar": {
-    "colorScheme": {
-      "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\"",
+  "AvatarBadge": {
+    "placement": { "type": "BadgePlacement", "required": false }
+  },
+  "AvatarFallback": {},
+  "AvatarGroup": {
+    "max": {
+      "type": "number",
+      "required": false,
+      "description": "The maximum number of visible avatars"
+    },
+    "spacing": {
+      "type": "ResponsiveValue<string | number | (string & {})>",
+      "defaultValue": "-0.75rem",
+      "required": false,
+      "description": "The space between the avatars in the group."
+    }
+  },
+  "AvatarImage": {
+    "align": {
+      "type": "ResponsiveValue<ObjectPosition<Length>>",
       "required": false,
-      "description": "The visual color appearance of the component"
+      "description": "How to align the image within its bounds.\nIt maps to css `object-position` property."
     },
+    "crossOrigin": {
+      "type": "\"\" | \"anonymous\" | \"use-credentials\"",
+      "required": false,
+      "description": "The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded.\nThis tells the browser to request cross-origin access when trying to download the image data."
+    },
+    "fallback": {
+      "type": "ReactElement<any, string | JSXElementConstructor<any>>",
+      "required": false,
+      "description": "Fallback element to show if image is loading or image fails."
+    },
+    "fallbackSrc": {
+      "type": "string",
+      "required": false,
+      "description": "Fallback image `src` to show if image is loading or image fails.\n\nNote 🚨: We recommend you use a local image"
+    },
+    "fallbackStrategy": {
+      "type": "FallbackStrategy",
+      "defaultValue": "beforeLoadOrError",
+      "required": false,
+      "description": "- beforeLoadOrError(default): loads the fallbackImage while loading the src\n- onError: loads the fallbackImage only if there is an error fetching the src"
+    },
+    "fit": {
+      "type": "ResponsiveValue<ObjectFit>",
+      "required": false,
+      "description": "How the image to fit within its bounds.\nIt maps to css `object-fit` property."
+    },
+    "htmlHeight": {
+      "type": "string | number",
+      "required": false,
+      "description": "The native HTML `height` attribute to the passed to the `img`"
+    },
+    "htmlWidth": {
+      "type": "string | number",
+      "required": false,
+      "description": "The native HTML `width` attribute to the passed to the `img`"
+    },
+    "ignoreFallback": {
+      "type": "boolean",
+      "defaultValue": false,
+      "required": false,
+      "description": "If `true`, opt out of the `fallbackSrc` logic and use as `img`"
+    },
+    "loading": { "type": "\"eager\" | \"lazy\"", "required": false },
+    "onError": {
+      "type": "ReactEventHandler<HTMLImageElement>",
+      "required": false,
+      "description": "A callback for when there was an error loading the image `src`"
+    },
+    "onLoad": {
+      "type": "ReactEventHandler<HTMLImageElement>",
+      "required": false,
+      "description": "A callback for when the image `src` has been loaded"
+    },
+    "sizes": {
+      "type": "string",
+      "required": false,
+      "description": "The image `sizes` attribute"
+    },
+    "src": {
+      "type": "string",
+      "required": false,
+      "description": "The image `src` attribute"
+    },
+    "srcSet": {
+      "type": "string",
+      "required": false,
+      "description": "The image `srcset` attribute"
+    }
+  },
+  "AvatarRoot": {
     "crossOrigin": {
       "type": "\"\" | \"anonymous\" | \"use-credentials\"",
       "required": false
@@ -37,7 +124,7 @@
       "description": "The name of the person in the avatar.\n\n- if `src` has loaded, the name will be used as the `alt` attribute of the `img`\n- If `src` is not loaded, the name will be used to create the initials"
     },
     "onError": {
-      "type": "() => void",
+      "type": "VoidFunction",
       "required": false,
       "description": "Function called when image failed to load"
     },
@@ -52,12 +139,6 @@
       "required": false,
       "description": "If `true`, the `Avatar` will show a border around it.\n\nBest for a group of avatars"
     },
-    "size": {
-      "defaultValue": "md",
-      "type": "\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\"",
-      "required": false,
-      "description": "The size of the Avatar"
-    },
     "src": {
       "type": "string",
       "required": false,
@@ -67,27 +148,6 @@
       "type": "string",
       "required": false,
       "description": "List of sources to use for different screen resolutions"
-    },
-    "variant": {
-      "type": "string",
-      "required": false,
-      "description": "The variant of the Avatar"
-    }
-  },
-  "AvatarBadge": {
-    "placement": { "type": "BadgePlacement", "required": false }
-  },
-  "AvatarGroup": {
-    "max": {
-      "type": "number",
-      "required": false,
-      "description": "The maximum number of visible avatars"
-    },
-    "spacing": {
-      "type": "ResponsiveValue<string | number | (string & {})>",
-      "defaultValue": "-0.75rem",
-      "required": false,
-      "description": "The space between the avatars in the group."
     }
   }
 }

packages/props-docs/generated/badge.json

@@ -2,7 +2,7 @@
   "Badge": {
     "colorScheme": {
       "defaultValue": "gray",
-      "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\"",
+      "type": "\"whiteAlpha\" | \"blackAlpha\" | \"gray\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"teal\" | \"blue\" | \"cyan\" | \"purple\" | \"pink\" | \"linkedin\" | \"facebook\" | \"messenger\" | \"whatsapp\" | \"twitter\" | \"telegram\"",
       "required": false,
       "description": "The visual color appearance of the component"
     },

packages/props-docs/generated/box.json

@@ -13,5 +13,18 @@
       "description": "The size (width and height) of the square"
     }
   },
-  "Circle": {}
+  "Circle": {
+    "centerContent": {
+      "type": "boolean",
+      "defaultValue": false,
+      "required": false,
+      "description": "If `true`, the content will be centered in the square"
+    },
+    "size": {
+      "type": "ResponsiveValue<string | number | (string & {})>",
+      "required": false,
+      "description": "The size (width and height) of the square"
+    }
+  },
+  "Span": {}
 }