playbook_ui_docs 16.7.0 → 16.8.0.pre.alpha.PLAY2945selectformblankselection16424

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_playground.overrides.json

@@ -1,7 +1,7 @@
 {
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": ["date"]
     },
     {
@@ -13,20 +13,20 @@
     {
       "name": "Default",
       "props": {
-        "date": "2026-04-09T12:00:00.000Z"
+        "date": "2026-04-09"
       }
     },
     {
       "name": "Centered",
       "props": {
-        "date": "2026-04-09T12:00:00.000Z",
+        "date": "2026-04-09",
         "align": "center"
       }
     },
     {
       "name": "Right aligned",
       "props": {
-        "date": "2026-12-25T12:00:00.000Z",
+        "date": "2026-12-25",
         "align": "right"
       }
     }

data/app/pb_kits/playbook/pb_detail/docs/_playground.json

@@ -31,23 +31,19 @@
   ],
   "presets": [
     {
-      "name": "Metadata",
-      "props": {
-        "color": "light",
-        "bold": false
-      },
-      "children": "Updated Apr 9, 2026"
+      "name": "Default",
+      "props": {},
+      "children": "I am a detail kit"
     },
     {
       "name": "Emphasis",
       "props": {
-        "color": "default",
         "bold": true
       },
       "children": "Order #48291 · Processing"
     },
     {
-      "name": "Link",
+      "name": "Link color",
       "props": {
         "color": "link"
       },
@@ -59,17 +55,15 @@
         "color": "error",
         "bold": true
       },
-      "children": "Payment failed — card expired"
-    },
-    {
-      "name": "Inline label",
-      "props": {
-        "tag": "span",
-        "color": "lighter"
-      },
-      "children": "Optional"
+      "children": "Payment failed"
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "link_color": {
+      "presetName": "Link color",
+      "message": "Use the color prop to change the color of the detail kit",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_detail/docs/_playground.overrides.json

@@ -14,31 +14,32 @@
   ],
   "presets": [
     {
-      "name": "Metadata",
-      "props": { "color": "light", "bold": false },
-      "children": "Updated Apr 9, 2026"
+      "name": "Default",
+      "props": { },
+      "children": "I am a detail kit"
     },
     {
       "name": "Emphasis",
-      "props": { "color": "default", "bold": true },
+      "props": { "bold": true },
       "children": "Order #48291 · Processing"
     },
     {
-      "name": "Link",
+      "name": "Link color",
       "props": { "color": "link" },
       "children": "View documentation"
     },
     {
       "name": "Error status",
       "props": { "color": "error", "bold": true },
-      "children": "Payment failed — card expired"
-    },
-    {
-      "name": "Inline label",
-      "props": { "tag": "span", "color": "lighter" },
-      "children": "Optional"
+      "children": "Payment failed"
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "link_color": {
+      "presetName": "Link color",
+      "message": "Use the color prop to change the color of the detail kit",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_dialog/docs/_playground.json

@@ -7,7 +7,9 @@
     "placement": "center",
     "shouldCloseOnOverlayClick": true,
     "size": "md",
-    "status": ""
+    "status": "",
+    "title": "Header Title is the Title Prop",
+    "text": "Hello Body Text, Nice to meet ya."
   },
   "children": {
     "editable": true,
@@ -23,22 +25,21 @@
         "title",
         "text",
         "cancelButton",
-        "confirmButton"
+        "confirmButton",
+        "onCancel",
+        "onClose",
+        "onConfirm",
+        "opened",
+        "onChange"
       ]
     },
     {
       "name": "Behavior",
       "props": [
-        "opened",
         "placement",
         "shouldCloseOnOverlayClick",
         "closeable",
-        "loading",
-        "trigger",
-        "onClose",
-        "onCancel",
-        "onConfirm",
-        "onChange"
+        "loading"
       ]
     },
     {
@@ -46,69 +47,90 @@
       "props": [
         "size",
         "status",
-        "fullHeight",
-        "portalClassName"
+        "fullHeight"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Small",
+      "name": "Default",
       "props": {
-        "size": "sm",
-        "opened": true,
-        "title": "Small dialog",
-        "text": "Narrow width for short confirmations and alerts."
+        "size": "md",
+        "title": "Header Title is the Title Prop",
+        "text": "Hello Body Text, Nice to meet ya.",
+        "cancelButton": "Cancel Button",
+        "confirmButton": "Okay"
       }
     },
     {
-      "name": "Medium",
+      "name": "Small",
       "props": {
-        "size": "md",
-        "opened": true,
-        "title": "Medium dialog",
-        "text": "Default size for most forms and standard content."
+        "size": "sm",
+        "title": "Small dialog",
+        "text": "Narrow width for short confirmations and alerts."
       }
     },
     {
       "name": "Large",
       "props": {
         "size": "lg",
-        "opened": true,
         "title": "Large dialog",
         "text": "Wider layout for dense content or two-column layouts."
       }
     },
     {
-      "name": "Extra large",
+      "name": "Status Alert",
       "props": {
-        "size": "xl",
-        "opened": true,
-        "title": "Extra large dialog",
-        "text": "Maximum width before full-screen patterns."
+        "size": "status_size",
+        "status": "success",
+        "title": "Success",
+        "text": "Compact status layout for confirmations and feedback."
       }
     },
     {
-      "name": "Content width",
+      "name": "Compound components",
+      "structureMode": "subcomponents",
       "props": {
-        "size": "content",
-        "opened": true,
-        "title": "Content-sized dialog",
-        "text": "Width follows the content instead of fixed breakpoints."
-      }
+        "size": "sm"
+      },
+      "children": "Hello Body Text, Nice to meet ya."
     },
     {
-      "name": "Status size",
+      "name": "Full height compound",
+      "structureMode": "subcomponents",
       "props": {
-        "size": "status_size",
-        "opened": true,
-        "status": "success",
-        "title": "Success",
-        "text": "Compact status layout for confirmations and feedback."
-      }
+        "fullHeight": true,
+        "size": "lg"
+      },
+      "children": "Custom dialog content goes here when you need more vertical space."
     }
   ],
-  "conditionals": {},
+  "conditionals": {
+    "title": {
+      "structureMode": "simple"
+    },
+    "text": {
+      "structureMode": "simple"
+    },
+    "cancelButton": {
+      "structureMode": "simple"
+    },
+    "confirmButton": {
+      "structureMode": "simple"
+    },
+    "onCancel": {
+      "structureMode": "simple"
+    },
+    "onClose": {
+      "structureMode": "simple"
+    },
+    "onConfirm": {
+      "structureMode": "simple"
+    },
+    "opened": {
+      "structureMode": "simple"
+    }
+  },
   "hints": {
     "status_dialog": {
       "when": {
@@ -116,6 +138,50 @@
       },
       "message": "Status dialogs show an icon, title, and body copy in a centered layout.",
       "type": "info"
+    },
+    "compound_components_info": {
+      "presetName": "Compound components",
+      "message": "Use Compound Components when you need custom header, body, or footer content instead of the simple title/text/button props API.",
+      "type": "info"
+    },
+    "full_height_info": {
+      "presetName": "Full height compound",
+      "message": "fullHeight is most useful with the compound structure when the dialog contains richer or scrollable content.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "simple",
+    "modes": {
+      "simple": {
+        "label": "Simple",
+        "template": "<Dialog opened={dialogOpen} onCancel={closeDialog} onClose={closeDialog} onConfirm={closeDialog}{{props}} />",
+        "children": "",
+        "props": {
+          "size": "md",
+          "title": "Header Title is the Title Prop",
+          "text": "Hello Body Text, Nice to meet ya.",
+          "cancelButton": "Cancel Button",
+          "confirmButton": "Okay"
+        },
+        "imports": [
+          "Button"
+        ],
+        "wrapper": "const DialogPlaygroundExample = () => {\n  const [dialogOpen, setDialogOpen] = useState(false)\n  const openDialog = () => setDialogOpen(true)\n  const closeDialog = () => setDialogOpen(false)\n\n  return (\n    <>\n      <Button marginBottom=\"sm\" onClick={openDialog}>\n        Open Dialog\n      </Button>\n      {{component}}\n    </>\n  )\n}\n\n<DialogPlaygroundExample />"
+      },
+      "subcomponents": {
+        "label": "Compound Components",
+        "template": "<Dialog opened={dialogOpen} onClose={closeDialog}{{props}}>\n  <Dialog.Header>Header Title inside Dialog.Header</Dialog.Header>\n  <Dialog.Body>{{children}}</Dialog.Body>\n  <Dialog.Footer>\n    <Button onClick={closeDialog}>Okay</Button>\n    <Button onClick={closeDialog} variant=\"link\">Cancel Button</Button>\n  </Dialog.Footer>\n</Dialog>",
+        "children": "Hello Body Text, Nice to meet ya.",
+        "imports": [
+          "Button"
+        ],
+        "wrapper": "const DialogPlaygroundExample = () => {\n  const [dialogOpen, setDialogOpen] = useState(false)\n  const openDialog = () => setDialogOpen(true)\n  const closeDialog = () => setDialogOpen(false)\n\n  return (\n    <>\n      <Button marginBottom=\"sm\" onClick={openDialog}>\n        Open Dialog\n      </Button>\n      {{component}}\n    </>\n  )\n}\n\n<DialogPlaygroundExample />"
+      }
     }
-  }
+  },
+  "hiddenProps": [
+    "trigger",
+    "portalClassName"
+  ]
 }

data/app/pb_kits/playbook/pb_dialog/docs/_playground.overrides.json

@@ -1,95 +1,143 @@
 {
+  "structureModes": {
+    "default": "simple",
+    "modes": {
+      "simple": {
+        "label": "Simple",
+        "template": "<Dialog opened={dialogOpen} onCancel={closeDialog} onClose={closeDialog} onConfirm={closeDialog}{{props}} />",
+        "children": "",
+        "props": {
+          "size": "md",
+          "title": "Header Title is the Title Prop",
+          "text": "Hello Body Text, Nice to meet ya.",
+          "cancelButton": "Cancel Button",
+          "confirmButton": "Okay"
+        },
+        "imports": ["Button"],
+        "wrapper": "const DialogPlaygroundExample = () => {\n  const [dialogOpen, setDialogOpen] = useState(false)\n  const openDialog = () => setDialogOpen(true)\n  const closeDialog = () => setDialogOpen(false)\n\n  return (\n    <>\n      <Button marginBottom=\"sm\" onClick={openDialog}>\n        Open Dialog\n      </Button>\n      {{component}}\n    </>\n  )\n}\n\n<DialogPlaygroundExample />"
+      },
+      "subcomponents": {
+        "label": "Compound Components",
+        "template": "<Dialog opened={dialogOpen} onClose={closeDialog}{{props}}>\n  <Dialog.Header>Header Title inside Dialog.Header</Dialog.Header>\n  <Dialog.Body>{{children}}</Dialog.Body>\n  <Dialog.Footer>\n    <Button onClick={closeDialog}>Okay</Button>\n    <Button onClick={closeDialog} variant=\"link\">Cancel Button</Button>\n  </Dialog.Footer>\n</Dialog>",
+        "children": "Hello Body Text, Nice to meet ya.",
+        "imports": ["Button"],
+        "wrapper": "const DialogPlaygroundExample = () => {\n  const [dialogOpen, setDialogOpen] = useState(false)\n  const openDialog = () => setDialogOpen(true)\n  const closeDialog = () => setDialogOpen(false)\n\n  return (\n    <>\n      <Button marginBottom=\"sm\" onClick={openDialog}>\n        Open Dialog\n      </Button>\n      {{component}}\n    </>\n  )\n}\n\n<DialogPlaygroundExample />"
+      }
+    }
+  },
   "children": {
     "default": "Custom dialog content goes here when you are not using the title and text props."
   },
+  "hiddenProps": [
+    "trigger",
+    "portalClassName"
+  ],
+  "defaults": {
+    "closeable": true,
+    "placement": "center",
+    "shouldCloseOnOverlayClick": true,
+    "size": "md",
+    "title": "Header Title is the Title Prop",
+    "text": "Hello Body Text, Nice to meet ya."
+  },
   "groups": [
     {
       "name": "Content",
-      "props": ["title", "text", "cancelButton", "confirmButton"]
+      "props": ["title", "text", "cancelButton", "confirmButton", "onCancel", "onClose", "onConfirm", "opened", "onChange"]
     },
     {
       "name": "Behavior",
       "props": [
-        "opened",
         "placement",
         "shouldCloseOnOverlayClick",
         "closeable",
-        "loading",
-        "trigger",
-        "onClose",
-        "onCancel",
-        "onConfirm",
-        "onChange"
+        "loading"
       ]
     },
     {
       "name": "Appearance",
-      "props": ["size", "status", "fullHeight", "portalClassName"]
+      "props": ["size", "status", "fullHeight"]
     }
   ],
   "presets": [
     {
-      "name": "Small",
+      "name": "Default",
       "props": {
-        "size": "sm",
-        "opened": true,
-        "title": "Small dialog",
-        "text": "Narrow width for short confirmations and alerts."
+        "size": "md",
+        "title": "Header Title is the Title Prop",
+        "text": "Hello Body Text, Nice to meet ya.",
+        "cancelButton": "Cancel Button",
+        "confirmButton": "Okay"
       }
     },
     {
-      "name": "Medium",
+      "name": "Small",
       "props": {
-        "size": "md",
-        "opened": true,
-        "title": "Medium dialog",
-        "text": "Default size for most forms and standard content."
+        "size": "sm",
+        "title": "Small dialog",
+        "text": "Narrow width for short confirmations and alerts."
       }
     },
     {
       "name": "Large",
       "props": {
         "size": "lg",
-        "opened": true,
         "title": "Large dialog",
         "text": "Wider layout for dense content or two-column layouts."
       }
     },
-    {
-      "name": "Extra large",
+        {
+      "name": "Status Alert",
       "props": {
-        "size": "xl",
-        "opened": true,
-        "title": "Extra large dialog",
-        "text": "Maximum width before full-screen patterns."
+        "size": "status_size",
+        "status": "success",
+        "title": "Success",
+        "text": "Compact status layout for confirmations and feedback."
       }
     },
     {
-      "name": "Content width",
+      "name": "Compound components",
+      "structureMode": "subcomponents",
       "props": {
-        "size": "content",
-        "opened": true,
-        "title": "Content-sized dialog",
-        "text": "Width follows the content instead of fixed breakpoints."
-      }
+        "size": "sm"
+      },
+      "children": "Hello Body Text, Nice to meet ya."
     },
     {
-      "name": "Status size",
+      "name": "Full height compound",
+      "structureMode": "subcomponents",
       "props": {
-        "size": "status_size",
-        "opened": true,
-        "status": "success",
-        "title": "Success",
-        "text": "Compact status layout for confirmations and feedback."
-      }
+        "fullHeight": true,
+        "size": "lg"
+      },
+      "children": "Custom dialog content goes here when you need more vertical space."
     }
   ],
-  "conditionals": {},
+  "conditionals": {
+    "title": { "structureMode": "simple" },
+    "text": { "structureMode": "simple" },
+    "cancelButton": { "structureMode": "simple" },
+    "confirmButton": { "structureMode": "simple" },
+    "onCancel": { "structureMode": "simple" },
+    "onClose": { "structureMode": "simple" },
+    "onConfirm": { "structureMode": "simple" },
+    "opened": { "structureMode": "simple" }
+  },
   "hints": {
     "status_dialog": {
       "when": { "status": "success" },
       "message": "Status dialogs show an icon, title, and body copy in a centered layout.",
       "type": "info"
+    },
+    "compound_components_info": {
+      "presetName": "Compound components",
+      "message": "Use Compound Components when you need custom header, body, or footer content instead of the simple title/text/button props API.",
+      "type": "info"
+    },
+    "full_height_info": {
+      "presetName": "Full height compound",
+      "message": "fullHeight is most useful with the compound structure when the dialog contains richer or scrollable content.",
+      "type": "info"
     }
   }
 }

data/app/pb_kits/playbook/pb_distribution_bar/docs/_playground.json

@@ -2,24 +2,82 @@
   "template": "<DistributionBar{{props}} />",
   "propTargets": {},
   "defaults": {
-    "size": "lg"
+    "size": "lg",
+    "colors": [
+      "data_7",
+      "data_1",
+      "neutral"
+    ]
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Data",
       "props": [
-        "colors",
-        "size",
-        "widths"
+        "widths",
+        "colors"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "widths": [
+          1,
+          2,
+          3,
+          4,
+          5,
+          3,
+          3,
+          7
+        ]
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "widths": [
+          1,
+          2,
+          3,
+          4,
+          5,
+          3,
+          3,
+          7
+        ],
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Custom colors",
+      "props": {
+        "colors": [
+          "data_7",
+          "data_1",
+          "neutral"
+        ],
+        "widths": [
+          4,
+          5,
+          3
+        ]
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "custom_colors": {
+      "presetName": "Custom colors",
+      "message": "Use the colors prop to change the colors of the distribution bar. Currently only the data and status colors will work for DistributionBar.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_distribution_bar/docs/_playground.overrides.json

@@ -0,0 +1,45 @@
+{
+  "defaults": {
+    "colors": ["data_7", "data_1", "neutral"]
+  },
+  "groups": [
+    {
+      "name": "Data",
+      "props": ["widths", "colors"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "widths": [1, 2, 3, 4, 5, 3, 3, 7]
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "widths": [1, 2, 3, 4, 5, 3, 3, 7],
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Custom colors",
+      "props": {
+        "colors": ["data_7", "data_1", "neutral"],
+        "widths": [4, 5, 3]
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "custom_colors": {
+      "presetName": "Custom colors",
+      "message": "Use the colors prop to change the colors of the distribution bar. Currently only the data and status colors will work for DistributionBar.",
+      "type": "info"
+    }
+  }
+}