playbook_ui 16.7.0 → 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780

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

@@ -0,0 +1,38 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["startDate", "endDate"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["dark"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "startDate": "2019-06-18",
+        "endDate": "2020-03-20"
+      }
+    },
+    {
+      "name": "Dark",
+      "props": {
+        "startDate": "2019-06-18",
+        "endDate": "2020-03-20",
+        "dark": true
+      }
+    },
+    {
+      "name": "Same calendar year",
+      "props": {
+        "startDate": "2026-01-15",
+        "endDate": "2026-08-15"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -10,7 +10,7 @@
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": [
         "date",
         "showCurrentYear",

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

@@ -1,7 +1,7 @@
 {
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": ["date", "showCurrentYear", "reverse", "bold"]
     },
     {

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

@@ -10,7 +10,7 @@
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": [
         "datetime",
         "showDayOfWeek",
@@ -49,7 +49,7 @@
       }
     },
     {
-      "name": "With calendar icon",
+      "name": "With icon",
       "props": {
         "datetime": "2026-04-09T15:30:00.000Z",
         "showIcon": true,
@@ -69,8 +69,21 @@
         "datetime": "2026-04-09T15:30:00.000Z",
         "timeZone": "Asia/Tokyo"
       }
+    },
+    {
+      "name": "Always show year",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "showCurrentYear": true
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "tokyo_time": {
+      "presetName": "Tokyo time",
+      "message": "Use the timeZone prop to display the time in a different timezone",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,7 +1,7 @@
 {
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": ["datetime", "showDayOfWeek", "showCurrentYear", "showIcon", "timeZone"]
     },
     {
@@ -31,7 +31,7 @@
       }
     },
     {
-      "name": "With calendar icon",
+      "name": "With icon",
       "props": {
         "datetime": "2026-04-09T15:30:00.000Z",
         "showIcon": true,
@@ -51,8 +51,21 @@
         "datetime": "2026-04-09T15:30:00.000Z",
         "timeZone": "Asia/Tokyo"
       }
+    }, 
+    {
+      "name": "Always show year",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "showCurrentYear": true
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "tokyo_time": {
+      "presetName": "Tokyo time",
+      "message": "Use the timeZone prop to display the time in a different timezone",
+      "type": "info"
+    }
+  }
 }

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

@@ -6,7 +6,7 @@
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": [
         "datetime",
         "timeZone",
@@ -24,34 +24,30 @@
     {
       "name": "Default",
       "props": {
-        "datetime": "2026-04-09T15:30:00.000Z",
-        "dark": false
+        "datetime": "2026-04-09T15:30:00.000Z"
       }
     },
     {
-      "name": "With year",
+      "name": "Always show year",
       "props": {
         "datetime": "2024-10-31T18:45:00.000Z",
-        "dark": false,
         "showCurrentYear": true
       }
     },
     {
-      "name": "Dark",
+      "name": "Paris time",
       "props": {
         "datetime": "2026-04-09T15:30:00.000Z",
-        "dark": true
-      }
-    },
-    {
-      "name": "Paris",
-      "props": {
-        "datetime": "2026-04-09T15:30:00.000Z",
-        "dark": false,
         "timeZone": "Europe/Paris"
       }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "paris_time": {
+      "presetName": "Paris time",
+      "message": "Use the timeZone prop to display the time in a different timezone",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,7 +1,7 @@
 {
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": ["datetime", "timeZone", "showCurrentYear"]
     },
     {
@@ -13,34 +13,30 @@
     {
       "name": "Default",
       "props": {
-        "datetime": "2026-04-09T15:30:00.000Z",
-        "dark": false
+        "datetime": "2026-04-09T15:30:00.000Z"
       }
     },
     {
-      "name": "With year",
+      "name": "Always show year",
       "props": {
         "datetime": "2024-10-31T18:45:00.000Z",
-        "dark": false,
         "showCurrentYear": true
       }
     },
     {
-      "name": "Dark",
+      "name": "Paris time",
       "props": {
         "datetime": "2026-04-09T15:30:00.000Z",
-        "dark": true
-      }
-    },
-    {
-      "name": "Paris",
-      "props": {
-        "datetime": "2026-04-09T15:30:00.000Z",
-        "dark": false,
         "timeZone": "Europe/Paris"
       }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "paris_time": {
+      "presetName": "Paris time",
+      "message": "Use the timeZone prop to display the time in a different timezone",
+      "type": "info"
+    }
+  }
 }

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

@@ -6,7 +6,7 @@
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": [
         "date"
       ]
@@ -22,20 +22,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_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"
+  ]
 }