playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -25,7 +25,8 @@
         "disabled",
         "error",
         "required",
-        "requiredIndicator"
+        "requiredIndicator",
+        "onChange"
       ]
     },
     {
@@ -34,7 +35,17 @@
         "inline",
         "resize",
         "rows",
-        "emojiMask"
+        "emojiMask",
+        "maxCharacters",
+        "characterCount"
+      ]
+    },
+    {
+      "name": "Options",
+      "props": [
+        "inputOptions",
+        "object",
+        "method"
       ]
     }
   ],
@@ -85,5 +96,26 @@
       "requires": "label"
     }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default shows a labeled multiline field with name, placeholder, and value.",
+      "type": "info"
+    },
+    "with_error": {
+      "presetName": "With Error",
+      "message": "With Error displays validation copy below the textarea while preserving the entered text.",
+      "type": "info"
+    },
+    "disabled": {
+      "presetName": "Disabled",
+      "message": "Disabled keeps existing text visible while preventing edits.",
+      "type": "info"
+    },
+    "required": {
+      "presetName": "Required",
+      "message": "Required combines required with requiredIndicator so the label communicates the requirement.",
+      "type": "info"
+    }
+  }
 }

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

@@ -6,11 +6,15 @@
     },
     {
       "name": "State",
-      "props": ["disabled", "error", "required", "requiredIndicator"]
+      "props": ["disabled", "error", "required", "requiredIndicator", "onChange"]
     },
     {
       "name": "Appearance",
-      "props": ["inline", "resize", "rows", "emojiMask"]
+      "props": ["inline", "resize", "rows", "emojiMask", "maxCharacters", "characterCount"]
+    },
+    {
+      "name":"Options",
+      "props": ["inputOptions", "object", "method"]
     }
   ],
   "presets": [
@@ -58,5 +62,26 @@
   "conditionals": {
     "requiredIndicator": { "requires": "label" }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default shows a labeled multiline field with name, placeholder, and value.",
+      "type": "info"
+    },
+    "with_error": {
+      "presetName": "With Error",
+      "message": "With Error displays validation copy below the textarea while preserving the entered text.",
+      "type": "info"
+    },
+    "disabled": {
+      "presetName": "Disabled",
+      "message": "Disabled keeps existing text visible while preventing edits.",
+      "type": "info"
+    },
+    "required": {
+      "presetName": "Required",
+      "message": "Required combines required with requiredIndicator so the label communicates the requirement.",
+      "type": "info"
+    }
+  }
 }

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

@@ -14,16 +14,17 @@
       "props": [
         "date",
         "showTimezone",
-        "timeZone",
-        "showIcon"
+        "timeZone"
       ]
     },
     {
       "name": "Appearance",
       "props": [
+        "showIcon",
         "size",
         "align",
-        "unstyled"
+        "unstyled",
+        "dark"
       ]
     }
   ],
@@ -35,15 +36,7 @@
       }
     },
     {
-      "name": "Medium & centered",
-      "props": {
-        "date": "2026-04-09T15:30:00.000Z",
-        "size": "md",
-        "align": "center"
-      }
-    },
-    {
-      "name": "With clock icon",
+      "name": "With Icon",
       "props": {
         "date": "2026-04-09T09:15:00.000Z",
         "showIcon": true,
@@ -58,7 +51,7 @@
       }
     },
     {
-      "name": "Pacific time",
+      "name": "Pacific Time",
       "props": {
         "date": "2026-04-09T15:30:00.000Z",
         "timeZone": "America/Los_Angeles"
@@ -70,5 +63,26 @@
       "requires": "showTimezone"
     }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a Date value with the kit's standard small time styling.",
+      "type": "info"
+    },
+    "with_icon": {
+      "presetName": "With Icon",
+      "message": "With Icon adds the clock icon and medium sizing for a more prominent timestamp.",
+      "type": "info"
+    },
+    "hide_timezone": {
+      "presetName": "Hide timezone label",
+      "message": "Hide timezone label passes showTimezone={false} while keeping the same time value.",
+      "type": "info"
+    },
+    "pacific_time": {
+      "presetName": "Pacific Time",
+      "message": "Pacific Time uses timeZone to render the same Date in a specific timezone.",
+      "type": "info"
+    }
+  }
 }

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

@@ -2,11 +2,11 @@
   "groups": [
     {
       "name": "Content",
-      "props": ["date", "showTimezone", "timeZone", "showIcon"]
+      "props": ["date", "showTimezone", "timeZone"]
     },
     {
       "name": "Appearance",
-      "props": ["size", "align", "unstyled"]
+      "props": ["showIcon", "size", "align", "unstyled", "dark"]
     }
   ],
   "presets": [
@@ -17,15 +17,7 @@
       }
     },
     {
-      "name": "Medium & centered",
-      "props": {
-        "date": "2026-04-09T15:30:00.000Z",
-        "size": "md",
-        "align": "center"
-      }
-    },
-    {
-      "name": "With clock icon",
+      "name": "With Icon",
       "props": {
         "date": "2026-04-09T09:15:00.000Z",
         "showIcon": true,
@@ -40,7 +32,7 @@
       }
     },
     {
-      "name": "Pacific time",
+      "name": "Pacific Time",
       "props": {
         "date": "2026-04-09T15:30:00.000Z",
         "timeZone": "America/Los_Angeles"
@@ -50,5 +42,26 @@
   "conditionals": {
     "timeZone": { "requires": "showTimezone" }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a Date value with the kit's standard small time styling.",
+      "type": "info"
+    },
+    "with_icon": {
+      "presetName": "With Icon",
+      "message": "With Icon adds the clock icon and medium sizing for a more prominent timestamp.",
+      "type": "info"
+    },
+    "hide_timezone": {
+      "presetName": "Hide timezone label",
+      "message": "Hide timezone label passes showTimezone={false} while keeping the same time value.",
+      "type": "info"
+    },
+    "pacific_time": {
+      "presetName": "Pacific Time",
+      "message": "Pacific Time uses timeZone to render the same Date in a specific timezone.",
+      "type": "info"
+    }
+  }
 }

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

@@ -16,7 +16,6 @@
       "props": [
         "label",
         "name",
-        "value",
         "defaultTime"
       ]
     },
@@ -24,7 +23,8 @@
       "name": "Appearance",
       "props": [
         "timeFormat",
-        "showTimezone"
+        "showTimezone",
+        "dark"
       ]
     },
     {
@@ -38,14 +38,6 @@
         "error",
         "validationMessage"
       ]
-    },
-    {
-      "name": "Advanced",
-      "props": [
-        "inputOptions",
-        "onChange",
-        "onClose"
-      ]
     }
   ],
   "presets": [
@@ -86,7 +78,7 @@
       }
     },
     {
-      "name": "Required field",
+      "name": "Required Field",
       "props": {
         "label": "Appointment",
         "name": "appointment_time",
@@ -94,26 +86,40 @@
         "requiredIndicator": true,
         "defaultTime": "10:00 AM"
       }
-    },
-    {
-      "name": "Disabled",
-      "props": {
-        "label": "Locked",
-        "name": "locked_time",
-        "disabled": true,
-        "defaultTime": "12:00 PM"
-      }
-    },
-    {
-      "name": "Error state",
-      "props": {
-        "label": "Invalid slot",
-        "name": "error_time",
-        "error": "Selected time is unavailable",
-        "defaultTime": "11:45 AM"
-      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default uses defaultTime so the picker initializes with a value while remaining internally editable.",
+      "type": "info"
+    },
+    "twenty_four_hour": {
+      "presetName": "24-hour",
+      "message": "24-hour switches timeFormat to the 24hour display and input pattern.",
+      "type": "info"
+    },
+    "with_timezone": {
+      "presetName": "With timezone",
+      "message": "With timezone shows the timezone label next to the selected time.",
+      "type": "info"
+    },
+    "business_hours": {
+      "presetName": "Business hours",
+      "message": "Business hours combines minTime and maxTime to constrain available selections.",
+      "type": "info"
+    },
+    "required_field": {
+      "presetName": "Required Field",
+      "message": "Required Field combines required and requiredIndicator for validation-ready forms.",
+      "type": "info"
+    }
+  },
+  "hiddenProps": [
+    "inputOptions",
+    "onChange",
+    "onClose",
+    "value"
+  ]
 }

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

@@ -1,12 +1,13 @@
 {
+  "hiddenProps": ["inputOptions", "onChange", "onClose", "value"],
   "groups": [
     {
       "name": "Content",
-      "props": ["label", "name", "value", "defaultTime"]
+      "props": ["label", "name", "defaultTime"]
     },
     {
       "name": "Appearance",
-      "props": ["timeFormat", "showTimezone"]
+      "props": ["timeFormat", "showTimezone", "dark"]
     },
     {
       "name": "Validation",
@@ -19,10 +20,6 @@
         "error",
         "validationMessage"
       ]
-    },
-    {
-      "name": "Advanced",
-      "props": ["inputOptions", "onChange", "onClose"]
     }
   ],
   "presets": [
@@ -63,7 +60,7 @@
       }
     },
     {
-      "name": "Required field",
+      "name": "Required Field",
       "props": {
         "label": "Appointment",
         "name": "appointment_time",
@@ -71,26 +68,34 @@
         "requiredIndicator": true,
         "defaultTime": "10:00 AM"
       }
-    },
-    {
-      "name": "Disabled",
-      "props": {
-        "label": "Locked",
-        "name": "locked_time",
-        "disabled": true,
-        "defaultTime": "12:00 PM"
-      }
-    },
-    {
-      "name": "Error state",
-      "props": {
-        "label": "Invalid slot",
-        "name": "error_time",
-        "error": "Selected time is unavailable",
-        "defaultTime": "11:45 AM"
-      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default uses defaultTime so the picker initializes with a value while remaining internally editable.",
+      "type": "info"
+    },
+    "twenty_four_hour": {
+      "presetName": "24-hour",
+      "message": "24-hour switches timeFormat to the 24hour display and input pattern.",
+      "type": "info"
+    },
+    "with_timezone": {
+      "presetName": "With timezone",
+      "message": "With timezone shows the timezone label next to the selected time.",
+      "type": "info"
+    },
+    "business_hours": {
+      "presetName": "Business hours",
+      "message": "Business hours combines minTime and maxTime to constrain available selections.",
+      "type": "info"
+    },
+    "required_field": {
+      "presetName": "Required Field",
+      "message": "Required Field combines required and requiredIndicator for validation-ready forms.",
+      "type": "info"
+    }
+  }
 }

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

@@ -9,24 +9,78 @@
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
-        "alignment",
-        "size",
-        "dark",
-        "icon",
-        "timezone",
         "startTime",
-        "endTime"
+        "endTime",
+        "timezone"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "icon",
+        "size",
+        "alignment",
+        "dark"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "startTime": "2026-04-09T15:30:00.000Z",
+        "endTime": "2026-04-09T17:00:00.000Z"
+      }
+    },
+    {
+      "name": "Compact",
+      "props": {
+        "startTime": "2026-04-09T15:30:00.000Z",
+        "endTime": "2026-04-09T17:00:00.000Z",
+        "size": "xs"
+      }
+    },
+    {
+      "name": "With Icon",
+      "props": {
+        "startTime": "2026-04-09T09:00:00.000Z",
+        "endTime": "2026-04-09T10:30:00.000Z",
+        "icon": true
+      }
+    },
+    {
+      "name": "Vertical Timezone",
+      "props": {
+        "startTime": "2026-04-09T20:00:00.000Z",
+        "endTime": "2026-04-09T21:30:00.000Z",
+        "alignment": "vertical",
+        "timezone": true
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a start and end Date as an inline time range.",
+      "type": "info"
+    },
+    "compact": {
+      "presetName": "Compact",
+      "message": "Compact switches size to xs for denser layouts.",
+      "type": "info"
+    },
+    "with_icon": {
+      "presetName": "With Icon",
+      "message": "With Icon adds the clock icon before the range.",
+      "type": "info"
+    },
+    "vertical_timezone": {
+      "presetName": "Vertical Timezone",
+      "message": "Vertical Timezone stacks the range and includes the timezone label.",
+      "type": "info"
+    }
+  }
 }

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

@@ -0,0 +1,69 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["startTime", "endTime", "timezone"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["icon", "size", "alignment", "dark"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "startTime": "2026-04-09T15:30:00.000Z",
+        "endTime": "2026-04-09T17:00:00.000Z"
+      }
+    },
+    {
+      "name": "Compact",
+      "props": {
+        "startTime": "2026-04-09T15:30:00.000Z",
+        "endTime": "2026-04-09T17:00:00.000Z",
+        "size": "xs"
+      }
+    },
+    {
+      "name": "With Icon",
+      "props": {
+        "startTime": "2026-04-09T09:00:00.000Z",
+        "endTime": "2026-04-09T10:30:00.000Z",
+        "icon": true
+      }
+    },
+    {
+      "name": "Vertical Timezone",
+      "props": {
+        "startTime": "2026-04-09T20:00:00.000Z",
+        "endTime": "2026-04-09T21:30:00.000Z",
+        "alignment": "vertical",
+        "timezone": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a start and end Date as an inline time range.",
+      "type": "info"
+    },
+    "compact": {
+      "presetName": "Compact",
+      "message": "Compact switches size to xs for denser layouts.",
+      "type": "info"
+    },
+    "with_icon": {
+      "presetName": "With Icon",
+      "message": "With Icon adds the clock icon before the range.",
+      "type": "info"
+    },
+    "vertical_timezone": {
+      "presetName": "Vertical Timezone",
+      "message": "Vertical Timezone stacks the range and includes the timezone label.",
+      "type": "info"
+    }
+  }
+}

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

@@ -9,14 +9,14 @@
       "name": "Content",
       "props": [
         "time",
-        "date",
         "timeZone"
       ]
     },
     {
       "name": "Appearance",
       "props": [
-        "align"
+        "align",
+        "dark"
       ]
     }
   ],
@@ -35,20 +35,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"
+    }
+  }
 }