v2: automatic docs from type gen

.gitignore

@@ -41,4 +41,9 @@ lerna-debug.log*
 # Playwright
 /test-results/
 /playwright-report/
-/playwright/.cache/
+/playwright/.cache/
+
+# Test temp directories
+temp-test-components/
+temp-test-output/
+test-label-root/

biome.json

@@ -9,6 +9,7 @@
       "!**/node_modules",
       "!**/server",
       "!**/docs/public/pagefind",
+      "!**/docs/public/component-metadata",
       "!**/lib-types",
       "!**/libs/components/lib/**/*",
       "!**/libs/components/node_modules",

docs/package.json

@@ -39,8 +39,9 @@
     "@types/node": "24.9.0",
     "ignore": "^7.0.5",
     "pagefind": "1.2.0",
+    "shiki": "^3.15.0",
     "tailwindcss": "^4.1.3",
-    "typescript": "5.4.5",
+    "typescript": "5.9.3",
     "unified": "^11.0.4",
     "vite": "^7",
     "vite-plugin-image-optimizer": "^1.1.8",
@@ -50,7 +51,8 @@
     "@stackblitz/sdk": "^1.11.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "rehype-pretty-code": "^0.13.2",
-    "tailwind-merge": "^2.5.0"
+    "magic-regexp": "^0.10.0",
+    "tailwind-merge": "^2.5.0",
+    "@shikijs/twoslash": "^3.15.0"
   }
 }

docs/public/component-metadata/calendar.json

@@ -0,0 +1,115 @@
+{
+  "componentName": "calendar",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "locale",
+          "type": "unknown",
+          "isBindable": false,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "showWeekNumber",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "fullWeeks",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "showDaysOfWeek",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "mode",
+          "type": "union",
+          "unionValues": [
+            "inline",
+            "popover"
+          ],
+          "isBindable": false,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "date",
+          "type": "unknown",
+          "isBindable": true,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Whether to show the days of the week header"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Event handler called when a date is selected"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "props": [
+        {
+          "name": "openCalendarOnClick",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false
+        }
+      ]
+    },
+    {
+      "name": "Grid",
+      "props": [
+        {
+          "name": "onDateChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Event handler called when a date is selected"
+        }
+      ]
+    },
+    {
+      "name": "GridDay",
+      "props": [
+        {
+          "name": "showLeadingZeros",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false
+        },
+        {
+          "name": "onDateChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Event handler called when a date is selected"
+        }
+      ]
+    }
+  ]
+}

docs/public/component-metadata/carousel.json

@@ -0,0 +1,119 @@
+{
+  "componentName": "carousel",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "gap",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "The gap between items"
+        },
+        {
+          "name": "itemsPerView",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "The gap between items"
+        },
+        {
+          "name": "draggable",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "The gap between items"
+        },
+        {
+          "name": "align",
+          "type": "union",
+          "unionValues": [
+            "start",
+            "center",
+            "end"
+          ],
+          "isBindable": false,
+          "comment": "The gap between items"
+        },
+        {
+          "name": "rewind",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "The gap between items"
+        },
+        {
+          "name": "autoplayInterval",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "The gap between items"
+        },
+        {
+          "name": "sensitivity",
+          "type": "unknown",
+          "isBindable": false,
+          "comment": "Number of items to show at once"
+        },
+        {
+          "name": "move",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "Alignment of items within the viewport"
+        },
+        {
+          "name": "orientation",
+          "type": "union",
+          "unionValues": [
+            "horizontal",
+            "vertical"
+          ],
+          "isBindable": false,
+          "comment": "Whether the carousel should rewind"
+        },
+        {
+          "name": "mousewheel",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "Time in milliseconds before the next item plays during autoplay. Defaults to 3000ms."
+        },
+        {
+          "name": "onChange",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "The sensitivity of the carousel dragging"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": true,
+          "initialValue": "",
+          "comment": "The sensitivity of the carousel dragging"
+        },
+        {
+          "name": "autoplay",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "The amount of items to move when hitting the next or previous button"
+        }
+      ]
+    },
+    {
+      "name": "Item",
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": "",
+          "comment": "The value for this carousel item. Defaults to string index if not provided."
+        }
+      ]
+    }
+  ]
+}

docs/public/component-metadata/checkbox.json

@@ -0,0 +1,56 @@
+{
+  "componentName": "checkbox",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Event handler called when the checkbox state changes"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": "",
+          "comment": "Event handler called when the checkbox state changes"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "Event handler called when the checkbox state changes"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": "",
+          "comment": "Event handler called when the checkbox state changes"
+        },
+        {
+          "name": "checked",
+          "type": "union",
+          "unionValues": [
+            "false",
+            "true",
+            "mixed"
+          ],
+          "isBindable": true,
+          "comment": "Event handler called when the checkbox state changes"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Name attribute for the hidden input element"
+        }
+      ]
+    }
+  ]
+}

docs/public/component-metadata/checklist.json

@@ -0,0 +1,28 @@
+{
+  "componentName": "checklist",
+  "pieces": [
+    {
+      "name": "HiddenInput",
+      "props": [
+        {
+          "name": "name",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": ""
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": ""
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false
+        }
+      ]
+    }
+  ]
+}