docs: improve component explorer UI and apply design tokens

apps/website/content/docs/components/dialog.mdx

@@ -60,6 +60,14 @@ Dialog 컴포넌트의 다양한 구성 패턴입니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="dialog/anatomy-dialog" componentName="dialog" />
+
 ## Props Table
 
 ---

apps/website/package.json

@@ -8,6 +8,7 @@
         "dev": "next dev --turbo",
         "format": "prettier --write \"./src/**/*.{ts,tsx,md}\"",
         "format:check": "prettier --check \"./src/**/*.{ts,tsx,md}\"",
+        "generate:anatomy": "node scripts/generate-anatomy.mjs",
         "postinstall": "fumadocs-mdx",
         "lint": "eslint ./src",
         "start": "next start",

apps/website/public/components/anatomy/avatar.json

@@ -0,0 +1,21 @@
+{
+  "componentName": "Avatar",
+  "displayNamePrefix": "Avatar",
+  "parts": [
+    {
+      "name": "Root",
+      "fullName": "AvatarRoot",
+      "isPrimitive": false
+    },
+    {
+      "name": "ImagePrimitive",
+      "fullName": "AvatarImagePrimitive",
+      "isPrimitive": true
+    },
+    {
+      "name": "FallbackPrimitive",
+      "fullName": "AvatarFallbackPrimitive",
+      "isPrimitive": true
+    }
+  ]
+}

apps/website/public/components/anatomy/breadcrumb.json

@@ -0,0 +1,51 @@
+{
+  "componentName": "Breadcrumb",
+  "displayNamePrefix": "Breadcrumb",
+  "parts": [
+    {
+      "name": "Root",
+      "fullName": "BreadcrumbRoot",
+      "isPrimitive": false
+    },
+    {
+      "name": "Item",
+      "fullName": "BreadcrumbItem",
+      "isPrimitive": false
+    },
+    {
+      "name": "Separator",
+      "fullName": "BreadcrumbSeparator",
+      "isPrimitive": false
+    },
+    {
+      "name": "Ellipsis",
+      "fullName": "BreadcrumbEllipsis",
+      "isPrimitive": false
+    },
+    {
+      "name": "RootPrimitive",
+      "fullName": "BreadcrumbRootPrimitive",
+      "isPrimitive": true
+    },
+    {
+      "name": "ListPrimitive",
+      "fullName": "BreadcrumbListPrimitive",
+      "isPrimitive": true
+    },
+    {
+      "name": "ItemPrimitive",
+      "fullName": "BreadcrumbItemPrimitive",
+      "isPrimitive": true
+    },
+    {
+      "name": "LinkPrimitive",
+      "fullName": "BreadcrumbLinkPrimitive",
+      "isPrimitive": true
+    },
+    {
+      "name": "EllipsisPrimitive",
+      "fullName": "BreadcrumbEllipsisPrimitive",
+      "isPrimitive": true
+    }
+  ]
+}

apps/website/public/components/anatomy/callout.json

@@ -0,0 +1,16 @@
+{
+  "componentName": "Callout",
+  "displayNamePrefix": "Callout",
+  "parts": [
+    {
+      "name": "Root",
+      "fullName": "CalloutRoot",
+      "isPrimitive": false
+    },
+    {
+      "name": "Icon",
+      "fullName": "CalloutIcon",
+      "isPrimitive": false
+    }
+  ]
+}

apps/website/public/components/anatomy/card.json

@@ -0,0 +1,26 @@
+{
+  "componentName": "Card",
+  "displayNamePrefix": "Card",
+  "parts": [
+    {
+      "name": "Root",
+      "fullName": "CardRoot",
+      "isPrimitive": false
+    },
+    {
+      "name": "Header",
+      "fullName": "CardHeader",
+      "isPrimitive": false
+    },
+    {
+      "name": "Body",
+      "fullName": "CardBody",
+      "isPrimitive": false
+    },
+    {
+      "name": "Footer",
+      "fullName": "CardFooter",
+      "isPrimitive": false
+    }
+  ]
+}

apps/website/public/components/anatomy/checkbox.json

@@ -0,0 +1,16 @@
+{
+  "componentName": "Checkbox",
+  "displayNamePrefix": "Checkbox",
+  "parts": [
+    {
+      "name": "Root",
+      "fullName": "CheckboxRoot",
+      "isPrimitive": false
+    },
+    {
+      "name": "IndicatorPrimitive",
+      "fullName": "CheckboxIndicatorPrimitive",
+      "isPrimitive": true
+    }
+  ]
+}

apps/website/public/components/anatomy/collapsible.json

@@ -0,0 +1,21 @@
+{
+  "componentName": "Collapsible",
+  "displayNamePrefix": "Collapsible",
+  "parts": [
+    {
+      "name": "Root",
+      "fullName": "CollapsibleRoot",
+      "isPrimitive": false
+    },
+    {
+      "name": "Trigger",
+      "fullName": "CollapsibleTrigger",
+      "isPrimitive": false
+    },
+    {
+      "name": "Panel",
+      "fullName": "CollapsiblePanel",
+      "isPrimitive": false
+    }
+  ]
+}

apps/website/public/components/anatomy/dialog.json

@@ -0,0 +1,66 @@
+{
+  "componentName": "Dialog",
+  "displayNamePrefix": "Dialog",
+  "parts": [
+    {
+      "name": "Root",
+      "fullName": "DialogRoot",
+      "isPrimitive": false
+    },
+    {
+      "name": "Trigger",
+      "fullName": "DialogTrigger",
+      "isPrimitive": false
+    },
+    {
+      "name": "PortalPrimitive",
+      "fullName": "DialogPortalPrimitive",
+      "isPrimitive": true
+    },
+    {
+      "name": "OverlayPrimitive",
+      "fullName": "DialogOverlayPrimitive",
+      "isPrimitive": true
+    },
+    {
+      "name": "PopupPrimitive",
+      "fullName": "DialogPopupPrimitive",
+      "isPrimitive": true
+    },
+    {
+      "name": "Popup",
+      "fullName": "DialogPopup",
+      "isPrimitive": false
+    },
+    {
+      "name": "Title",
+      "fullName": "DialogTitle",
+      "isPrimitive": false
+    },
+    {
+      "name": "Description",
+      "fullName": "DialogDescription",
+      "isPrimitive": false
+    },
+    {
+      "name": "Close",
+      "fullName": "DialogClose",
+      "isPrimitive": false
+    },
+    {
+      "name": "Header",
+      "fullName": "DialogHeader",
+      "isPrimitive": false
+    },
+    {
+      "name": "Body",
+      "fullName": "DialogBody",
+      "isPrimitive": false
+    },
+    {
+      "name": "Footer",
+      "fullName": "DialogFooter",
+      "isPrimitive": false
+    }
+  ]
+}

apps/website/public/components/anatomy/field.json

@@ -0,0 +1,36 @@
+{
+  "componentName": "Field",
+  "displayNamePrefix": "Field",
+  "parts": [
+    {
+      "name": "Root",
+      "fullName": "FieldRoot",
+      "isPrimitive": false
+    },
+    {
+      "name": "Label",
+      "fullName": "FieldLabel",
+      "isPrimitive": false
+    },
+    {
+      "name": "Description",
+      "fullName": "FieldDescription",
+      "isPrimitive": false
+    },
+    {
+      "name": "Error",
+      "fullName": "FieldError",
+      "isPrimitive": false
+    },
+    {
+      "name": "Success",
+      "fullName": "FieldSuccess",
+      "isPrimitive": false
+    },
+    {
+      "name": "Item",
+      "fullName": "FieldItem",
+      "isPrimitive": false
+    }
+  ]
+}

apps/website/public/components/anatomy/floating-bar.json

@@ -0,0 +1,41 @@
+{
+  "componentName": "FloatingBar",
+  "displayNamePrefix": "FloatingBar",
+  "parts": [
+    {
+      "name": "Root",
+      "fullName": "FloatingBarRoot",
+      "isPrimitive": false
+    },
+    {
+      "name": "Trigger",
+      "fullName": "FloatingBarTrigger",
+      "isPrimitive": false
+    },
+    {
+      "name": "Popup",
+      "fullName": "FloatingBarPopup",
+      "isPrimitive": false
+    },
+    {
+      "name": "Close",
+      "fullName": "FloatingBarClose",
+      "isPrimitive": false
+    },
+    {
+      "name": "PortalPrimitive",
+      "fullName": "FloatingBarPortalPrimitive",
+      "isPrimitive": true
+    },
+    {
+      "name": "PositionerPrimitive",
+      "fullName": "FloatingBarPositionerPrimitive",
+      "isPrimitive": true
+    },
+    {
+      "name": "PopupPrimitive",
+      "fullName": "FloatingBarPopupPrimitive",
+      "isPrimitive": true
+    }
+  ]
+}

apps/website/public/components/anatomy/grid.json

@@ -0,0 +1,16 @@
+{
+  "componentName": "Grid",
+  "displayNamePrefix": "Grid",
+  "parts": [
+    {
+      "name": "Root",
+      "fullName": "GridRoot",
+      "isPrimitive": false
+    },
+    {
+      "name": "Item",
+      "fullName": "GridItem",
+      "isPrimitive": false
+    }
+  ]
+}

apps/website/public/components/anatomy/input-group.json

@@ -0,0 +1,16 @@
+{
+  "componentName": "InputGroup",
+  "displayNamePrefix": "InputGroup",
+  "parts": [
+    {
+      "name": "Root",
+      "fullName": "InputGroupRoot",
+      "isPrimitive": false
+    },
+    {
+      "name": "Counter",
+      "fullName": "InputGroupCounter",
+      "isPrimitive": false
+    }
+  ]
+}