playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -2,11 +2,11 @@
   "groups": [
     {
       "name": "Content",
-      "props": ["time", "date", "timeZone"]
+      "props": ["time", "timeZone"]
     },
     {
       "name": "Appearance",
-      "props": ["align"]
+      "props": ["align", "dark"]
     }
   ],
   "presets": [
@@ -24,20 +24,41 @@
       }
     },
     {
-      "name": "London",
+      "name": "Right aligned",
       "props": {
-        "time": 1775748600000,
-        "timeZone": "Europe/London"
+        "time": 1775764800000,
+        "align": "right"
       }
     },
     {
-      "name": "Evening slot",
+      "name": "London Time",
       "props": {
-        "time": 1775764800000,
-        "align": "right"
+        "time": 1775748600000,
+        "timeZone": "Europe/London"
       }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders the time and timezone in a stacked layout.",
+      "type": "info"
+    },
+    "centered": {
+      "presetName": "Centered",
+      "message": "Centered changes align to center while keeping the same timestamp.",
+      "type": "info"
+    },
+    "right_aligned": {
+      "presetName": "Right aligned",
+      "message": "Right aligned uses align=\"right\" for end-aligned stacked time displays.",
+      "type": "info"
+    },
+    "london_time": {
+      "presetName": "London Time",
+      "message": "London Time uses timeZone to render the timestamp in a specific timezone.",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,6 +1,13 @@
 {
-  "template": "<Timeline{{props}} />",
-  "propTargets": {},
+  "template": "<Timeline{{props}}>\n  {{children}}\n</Timeline>",
+  "propTargets": {
+    "timelineItemDate": "Timeline.Item.props",
+    "timelineItemIcon": "Timeline.Item.props",
+    "timelineItemIconColor": "Timeline.Item.props",
+    "timelineItemLineStyle": "Timeline.Item.props",
+    "timelineItemShowCurrentYear": "Timeline.Item.props",
+    "timelineItemClassName": "Timeline.Item.props"
+  },
   "defaults": {
     "orientation": "horizontal",
     "showDate": false,
@@ -8,20 +15,185 @@
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Layout",
       "props": [
         "orientation",
-        "showDate",
         "itemGap"
       ]
+    },
+    {
+      "name": "Date",
+      "props": [
+        "showDate"
+      ]
+    },
+    {
+      "name": "Timeline.Item Props",
+      "props": [
+        "timelineItemDate",
+        "timelineItemIcon",
+        "timelineItemIconColor",
+        "timelineItemLineStyle",
+        "timelineItemShowCurrentYear",
+        "timelineItemClassName"
+      ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "structureMode": "standard",
+      "props": {},
+      "children": "<Timeline.Item icon=\"file-alt\">Request received</Timeline.Item>\n<Timeline.Item icon=\"user\" lineStyle=\"dotted\">Assigned to reviewer</Timeline.Item>\n<Timeline.Item icon=\"check\">Approved</Timeline.Item>"
+    },
+    {
+      "name": "Vertical",
+      "structureMode": "standard",
+      "props": {
+        "orientation": "vertical"
+      },
+      "children": "<Timeline.Item icon=\"file-alt\">Request received</Timeline.Item>\n<Timeline.Item icon=\"user\">Assigned to reviewer</Timeline.Item>\n<Timeline.Item icon=\"check\">Approved</Timeline.Item>"
+    },
+    {
+      "name": "With Dates",
+      "structureMode": "standard",
+      "props": {
+        "showDate": true
+      },
+      "children": "<Timeline.Item date={new Date(\"2026-04-09T15:30:00.000Z\")} icon=\"file-alt\">Request received</Timeline.Item>\n<Timeline.Item date={new Date(\"2026-04-10T15:30:00.000Z\")} icon=\"user\">Assigned to reviewer</Timeline.Item>\n<Timeline.Item date={new Date(\"2026-04-11T15:30:00.000Z\")} icon=\"check\">Approved</Timeline.Item>"
+    },
+    {
+      "name": "Gapped",
+      "structureMode": "standard",
+      "props": {
+        "itemGap": "md",
+        "orientation": "vertical"
+      },
+      "children": "<Timeline.Item icon=\"calendar\">Scheduled</Timeline.Item>\n<Timeline.Item icon=\"truck\" lineStyle=\"dotted\">In progress</Timeline.Item>\n<Timeline.Item icon=\"home\">Complete</Timeline.Item>"
+    },
+    {
+      "name": "Item Props",
+      "structureMode": "timeline_item_props",
+      "props": {
+        "timelineItemIcon": "file-alt",
+        "timelineItemIconColor": "royal",
+        "timelineItemLineStyle": "dotted",
+        "timelineItemShowCurrentYear": true
+      },
+      "children": "Request received"
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a horizontal timeline with three timeline items.",
+      "type": "info"
+    },
+    "vertical": {
+      "presetName": "Vertical",
+      "message": "Vertical switches orientation for stacked process or activity views.",
+      "type": "info"
+    },
+    "with_dates": {
+      "presetName": "With Dates",
+      "message": "With Dates enables date styling and passes Date values to each Timeline.Item.",
+      "type": "info"
+    },
+    "gapped": {
+      "presetName": "Gapped",
+      "message": "Gapped combines vertical orientation with itemGap for more breathing room.",
+      "type": "info"
+    },
+    "item_props": {
+      "presetName": "Item Props",
+      "message": "Item Props routes controls into the first Timeline.Item so item-level props render explicitly.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Items",
+        "template": "<Timeline{{props}}>\n  {{children}}\n</Timeline>",
+        "children": "<Timeline.Item icon=\"file-alt\">Request received</Timeline.Item>\n<Timeline.Item icon=\"user\" lineStyle=\"dotted\">Assigned to reviewer</Timeline.Item>\n<Timeline.Item icon=\"check\">Approved</Timeline.Item>"
+      },
+      "timeline_item_props": {
+        "label": "Timeline.Item Props",
+        "template": "<Timeline{{props}}>\n  <Timeline.Item{{Timeline.Item.props}}>\n    {{children}}\n  </Timeline.Item>\n  <Timeline.Item icon=\"user\">Assigned to reviewer</Timeline.Item>\n  <Timeline.Item icon=\"check\">Approved</Timeline.Item>\n</Timeline>",
+        "children": "Request received",
+        "props": {
+          "timelineItemIcon": "file-alt",
+          "timelineItemIconColor": "royal",
+          "timelineItemLineStyle": "solid"
+        }
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<Timeline.Item icon=\"file-alt\">Request received</Timeline.Item>\n<Timeline.Item icon=\"user\" lineStyle=\"dotted\">Assigned to reviewer</Timeline.Item>\n<Timeline.Item icon=\"check\">Approved</Timeline.Item>"
+  },
+  "customProps": {
+    "timelineItemDate": {
+      "type": "Date",
+      "platforms": [
+        "react"
+      ]
+    },
+    "timelineItemIcon": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "timelineItemIconColor": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "default",
+        "royal",
+        "blue",
+        "purple",
+        "teal",
+        "red",
+        "yellow",
+        "green"
+      ]
+    },
+    "timelineItemLineStyle": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "solid",
+        "dotted"
+      ]
+    },
+    "timelineItemShowCurrentYear": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ],
+      "default": false
+    },
+    "timelineItemClassName": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    }
+  },
+  "propAliases": {
+    "timelineItemDate": "date",
+    "timelineItemIcon": "icon",
+    "timelineItemIconColor": "iconColor",
+    "timelineItemLineStyle": "lineStyle",
+    "timelineItemShowCurrentYear": "showCurrentYear",
+    "timelineItemClassName": "className"
+  }
 }

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

@@ -0,0 +1,165 @@
+{
+  "template": "<Timeline{{props}}>\n  {{children}}\n</Timeline>",
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Items",
+        "template": "<Timeline{{props}}>\n  {{children}}\n</Timeline>",
+        "children": "<Timeline.Item icon=\"file-alt\">Request received</Timeline.Item>\n<Timeline.Item icon=\"user\" lineStyle=\"dotted\">Assigned to reviewer</Timeline.Item>\n<Timeline.Item icon=\"check\">Approved</Timeline.Item>"
+      },
+      "timeline_item_props": {
+        "label": "Timeline.Item Props",
+        "template": "<Timeline{{props}}>\n  <Timeline.Item{{Timeline.Item.props}}>\n    {{children}}\n  </Timeline.Item>\n  <Timeline.Item icon=\"user\">Assigned to reviewer</Timeline.Item>\n  <Timeline.Item icon=\"check\">Approved</Timeline.Item>\n</Timeline>",
+        "children": "Request received",
+        "props": {
+          "timelineItemIcon": "file-alt",
+          "timelineItemIconColor": "royal",
+          "timelineItemLineStyle": "solid"
+        }
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<Timeline.Item icon=\"file-alt\">Request received</Timeline.Item>\n<Timeline.Item icon=\"user\" lineStyle=\"dotted\">Assigned to reviewer</Timeline.Item>\n<Timeline.Item icon=\"check\">Approved</Timeline.Item>"
+  },
+  "customProps": {
+    "timelineItemDate": {
+      "type": "Date",
+      "platforms": ["react"]
+    },
+    "timelineItemIcon": {
+      "type": "string",
+      "platforms": ["react"]
+    },
+    "timelineItemIconColor": {
+      "type": "enum",
+      "platforms": ["react"],
+      "values": ["default", "royal", "blue", "purple", "teal", "red", "yellow", "green"]
+    },
+    "timelineItemLineStyle": {
+      "type": "enum",
+      "platforms": ["react"],
+      "values": ["solid", "dotted"]
+    },
+    "timelineItemShowCurrentYear": {
+      "type": "boolean",
+      "platforms": ["react"],
+      "default": false
+    },
+    "timelineItemClassName": {
+      "type": "string",
+      "platforms": ["react"]
+    }
+  },
+  "propTargets": {
+    "timelineItemDate": "Timeline.Item.props",
+    "timelineItemIcon": "Timeline.Item.props",
+    "timelineItemIconColor": "Timeline.Item.props",
+    "timelineItemLineStyle": "Timeline.Item.props",
+    "timelineItemShowCurrentYear": "Timeline.Item.props",
+    "timelineItemClassName": "Timeline.Item.props"
+  },
+  "propAliases": {
+    "timelineItemDate": "date",
+    "timelineItemIcon": "icon",
+    "timelineItemIconColor": "iconColor",
+    "timelineItemLineStyle": "lineStyle",
+    "timelineItemShowCurrentYear": "showCurrentYear",
+    "timelineItemClassName": "className"
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": ["orientation", "itemGap"]
+    },
+    {
+      "name": "Date",
+      "props": ["showDate"]
+    },
+    {
+      "name": "Timeline.Item Props",
+      "props": [
+        "timelineItemDate",
+        "timelineItemIcon",
+        "timelineItemIconColor",
+        "timelineItemLineStyle",
+        "timelineItemShowCurrentYear",
+        "timelineItemClassName"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "structureMode": "standard",
+      "props": {},
+      "children": "<Timeline.Item icon=\"file-alt\">Request received</Timeline.Item>\n<Timeline.Item icon=\"user\" lineStyle=\"dotted\">Assigned to reviewer</Timeline.Item>\n<Timeline.Item icon=\"check\">Approved</Timeline.Item>"
+    },
+    {
+      "name": "Vertical",
+      "structureMode": "standard",
+      "props": {
+        "orientation": "vertical"
+      },
+      "children": "<Timeline.Item icon=\"file-alt\">Request received</Timeline.Item>\n<Timeline.Item icon=\"user\">Assigned to reviewer</Timeline.Item>\n<Timeline.Item icon=\"check\">Approved</Timeline.Item>"
+    },
+    {
+      "name": "With Dates",
+      "structureMode": "standard",
+      "props": {
+        "showDate": true
+      },
+      "children": "<Timeline.Item date={new Date(\"2026-04-09T15:30:00.000Z\")} icon=\"file-alt\">Request received</Timeline.Item>\n<Timeline.Item date={new Date(\"2026-04-10T15:30:00.000Z\")} icon=\"user\">Assigned to reviewer</Timeline.Item>\n<Timeline.Item date={new Date(\"2026-04-11T15:30:00.000Z\")} icon=\"check\">Approved</Timeline.Item>"
+    },
+    {
+      "name": "Gapped",
+      "structureMode": "standard",
+      "props": {
+        "itemGap": "md",
+        "orientation": "vertical"
+      },
+      "children": "<Timeline.Item icon=\"calendar\">Scheduled</Timeline.Item>\n<Timeline.Item icon=\"truck\" lineStyle=\"dotted\">In progress</Timeline.Item>\n<Timeline.Item icon=\"home\">Complete</Timeline.Item>"
+    },
+    {
+      "name": "Item Props",
+      "structureMode": "timeline_item_props",
+      "props": {
+        "timelineItemIcon": "file-alt",
+        "timelineItemIconColor": "royal",
+        "timelineItemLineStyle": "dotted",
+        "timelineItemShowCurrentYear": true
+      },
+      "children": "Request received"
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a horizontal timeline with three timeline items.",
+      "type": "info"
+    },
+    "vertical": {
+      "presetName": "Vertical",
+      "message": "Vertical switches orientation for stacked process or activity views.",
+      "type": "info"
+    },
+    "with_dates": {
+      "presetName": "With Dates",
+      "message": "With Dates enables date styling and passes Date values to each Timeline.Item.",
+      "type": "info"
+    },
+    "gapped": {
+      "presetName": "Gapped",
+      "message": "Gapped combines vertical orientation with itemGap for more breathing room.",
+      "type": "info"
+    },
+    "item_props": {
+      "presetName": "Item Props",
+      "message": "Item Props routes controls into the first Timeline.Item so item-level props render explicitly.",
+      "type": "info"
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 {
-  "template": "<Timestamp{{props}} />",
+  "template": "<Timestamp timezone={timezone}{{props}} />",
   "propTargets": {},
   "defaults": {
     "align": "left",
@@ -24,7 +24,8 @@
         "showCurrentYear",
         "showTimezone",
         "showUser",
-        "hideUpdated"
+        "hideUpdated",
+        "timezone"
       ]
     },
     {
@@ -32,7 +33,8 @@
       "props": [
         "variant",
         "align",
-        "unstyled"
+        "unstyled",
+        "dark"
       ]
     }
   ],
@@ -53,15 +55,7 @@
       }
     },
     {
-      "name": "Time only",
-      "props": {
-        "timestamp": "2026-04-09T15:30:00.000Z",
-        "text": "",
-        "showDate": false
-      }
-    },
-    {
-      "name": "With timezone",
+      "name": "With Timezone",
       "props": {
         "timestamp": "2026-04-09T15:30:00.000Z",
         "text": "",
@@ -85,14 +79,6 @@
         "variant": "updated",
         "showUser": true
       }
-    },
-    {
-      "name": "Centered",
-      "props": {
-        "timestamp": "2026-04-09T15:30:00.000Z",
-        "text": "",
-        "align": "center"
-      }
     }
   ],
   "conditionals": {
@@ -100,5 +86,34 @@
       "requires": "text"
     }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders timestamp text with both date and time.",
+      "type": "info"
+    },
+    "date_only": {
+      "presetName": "Date only",
+      "message": "Date only hides the time while keeping the date visible.",
+      "type": "info"
+    },
+    "with_timezone": {
+      "presetName": "With Timezone",
+      "message": "With Timezone shows the timezone label and uses a specific timezone.",
+      "type": "info"
+    },
+    "elapsed": {
+      "presetName": "Elapsed",
+      "message": "Elapsed switches variant to elapsed for relative time language.",
+      "type": "info"
+    },
+    "last_updated": {
+      "presetName": "Last updated",
+      "message": "Last updated uses the updated variant and showUser to include the user text.",
+      "type": "info"
+    }
+  },
+  "requiredProps": {
+    "timezone": "America/New_York"
+  }
 }

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

@@ -1,4 +1,8 @@
 {
+  "template": "<Timestamp timezone={timezone}{{props}} />",
+  "requiredProps": {
+    "timezone": "America/New_York"
+  },
   "groups": [
     {
       "name": "Content",
@@ -10,12 +14,13 @@
         "showCurrentYear",
         "showTimezone",
         "showUser",
-        "hideUpdated"
+        "hideUpdated",
+        "timezone"
       ]
     },
     {
       "name": "Appearance",
-      "props": ["variant", "align", "unstyled"]
+      "props": ["variant", "align", "unstyled", "dark"]
     }
   ],
   "presets": [
@@ -35,15 +40,7 @@
       }
     },
     {
-      "name": "Time only",
-      "props": {
-        "timestamp": "2026-04-09T15:30:00.000Z",
-        "text": "",
-        "showDate": false
-      }
-    },
-    {
-      "name": "With timezone",
+      "name": "With Timezone",
       "props": {
         "timestamp": "2026-04-09T15:30:00.000Z",
         "text": "",
@@ -67,18 +64,36 @@
         "variant": "updated",
         "showUser": true
       }
-    },
-    {
-      "name": "Centered",
-      "props": {
-        "timestamp": "2026-04-09T15:30:00.000Z",
-        "text": "",
-        "align": "center"
-      }
     }
   ],
   "conditionals": {
     "showUser": { "requires": "text" }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders timestamp text with both date and time.",
+      "type": "info"
+    },
+    "date_only": {
+      "presetName": "Date only",
+      "message": "Date only hides the time while keeping the date visible.",
+      "type": "info"
+    },
+    "with_timezone": {
+      "presetName": "With Timezone",
+      "message": "With Timezone shows the timezone label and uses a specific timezone.",
+      "type": "info"
+    },
+    "elapsed": {
+      "presetName": "Elapsed",
+      "message": "Elapsed switches variant to elapsed for relative time language.",
+      "type": "info"
+    },
+    "last_updated": {
+      "presetName": "Last updated",
+      "message": "Last updated uses the updated variant and showUser to include the user text.",
+      "type": "info"
+    }
+  }
 }

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

@@ -17,8 +17,8 @@
     {
       "name": "State",
       "props": [
-        "disabled",
-        "checked"
+        "checked",
+        "disabled"
       ]
     },
     {
@@ -37,7 +37,7 @@
       }
     },
     {
-      "name": "With Error",
+      "name": "Checked",
       "props": {
         "name": "dark_mode",
         "value": "theme",
@@ -52,17 +52,28 @@
         "checked": true,
         "disabled": true
       }
-    },
-    {
-      "name": "Required",
-      "props": {
-        "name": "notifications",
-        "value": "push",
-        "size": "md",
-        "checked": true
-      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders an unchecked small toggle with name and value for forms.",
+      "type": "info"
+    },
+    "checked": {
+      "presetName": "Checked",
+      "message": "Checked initializes the toggle in the on state.",
+      "type": "info"
+    },
+    "disabled": {
+      "presetName": "Disabled",
+      "message": "Disabled keeps the selected state visible while preventing changes.",
+      "type": "info"
+    }
+  },
+  "hiddenProps": [
+    "inputOptions",
+    "onChange"
+  ]
 }