playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

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

@@ -0,0 +1,156 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "placeholder",
+        "name",
+        "pickerId",
+        "defaultDate",
+        "format"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "hideIcon",
+        "hideLabel",
+        "inLine",
+        "staticPosition",
+        "selectionType"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "allowInput",
+        "enableTime",
+        "showTimezone",
+        "disableInput",
+        "initializeOnce"
+      ]
+    },
+    {
+      "name": "Validation & bounds",
+      "props": [
+        "minDate",
+        "maxDate",
+        "yearRange",
+        "disableDate",
+        "disableWeekdays",
+        "disableRange",
+        "error",
+        "requiredIndicator"
+      ]
+    },
+    {
+      "name": "Advanced",
+      "props": [
+        "customQuickPickDates",
+        "positionElement",
+        "scrollContainer",
+        "inputValue",
+        "inputOnChange",
+        "inputAria",
+        "inputData",
+        "type",
+        "timeFormat",
+        "thisRangesEndToday",
+        "controlsStartId",
+        "controlsEndId",
+        "syncStartWith",
+        "syncEndWith"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "name": "event_date",
+        "pickerId": "playground-date-picker",
+        "label": "Event date",
+        "placeholder": "Select date",
+        "defaultDate": "04/09/2026",
+        "format": "m/d/Y"
+      }
+    },
+    {
+      "name": "Inline calendar",
+      "props": {
+        "name": "inline_date",
+        "pickerId": "playground-date-inline",
+        "label": "Inline",
+        "defaultDate": "04/09/2026",
+        "inLine": true,
+        "staticPosition": true
+      }
+    },
+    {
+      "name": "Date & time",
+      "props": {
+        "name": "starts_at",
+        "pickerId": "playground-datetime",
+        "label": "Starts at",
+        "defaultDate": "04/09/2026",
+        "enableTime": true,
+        "format": "m/d/Y H:i"
+      }
+    },
+    {
+      "name": "Allow typing",
+      "props": {
+        "name": "typed_date",
+        "pickerId": "playground-allow-input",
+        "label": "Start date",
+        "allowInput": true,
+        "defaultDate": "04/09/2026"
+      }
+    },
+    {
+      "name": "Month picker",
+      "props": {
+        "name": "month_only",
+        "pickerId": "playground-month",
+        "label": "Month",
+        "selectionType": "month",
+        "defaultDate": "04/01/2026"
+      }
+    },
+    {
+      "name": "Min / max range",
+      "props": {
+        "name": "bounded",
+        "pickerId": "playground-bounded",
+        "label": "Within range",
+        "defaultDate": "04/09/2026",
+        "minDate": "01/01/2026",
+        "maxDate": "12/31/2026"
+      }
+    },
+    {
+      "name": "Error state",
+      "props": {
+        "name": "invalid_date",
+        "pickerId": "playground-error",
+        "label": "Due date",
+        "error": "Please choose a valid date",
+        "defaultDate": ""
+      }
+    },
+    {
+      "name": "Minimal chrome",
+      "props": {
+        "name": "compact_date",
+        "pickerId": "playground-minimal",
+        "label": "",
+        "hideLabel": true,
+        "hideIcon": true,
+        "defaultDate": "04/09/2026"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -66,3 +66,4 @@ examples:
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
   - date_picker_required_indicator: Required Indicator
+  - date_picker_dialog_submission: Dialog Form Submission

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -29,3 +29,4 @@ export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_
 export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
 export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
 export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
+export { default as DatePickerDialogSubmission } from "./_date_picker_dialog_submission.jsx";

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

@@ -0,0 +1,31 @@
+{
+  "template": "<DateRangeInline{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left",
+    "size": "sm",
+    "showCurrentYear": false
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "align",
+        "dark",
+        "endDate",
+        "icon",
+        "size",
+        "showCurrentYear",
+        "startDate"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,23 @@
+{
+  "template": "<DateRangeStacked{{props}} />",
+  "propTargets": {},
+  "defaults": {},
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "dark",
+        "endDate",
+        "startDate"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,68 @@
+{
+  "template": "<DateStacked{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left",
+    "bold": false,
+    "size": "sm",
+    "reverse": false,
+    "showCurrentYear": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "date",
+        "showCurrentYear",
+        "reverse",
+        "bold"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "align"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "date": "2026-04-09T12:00:00.000Z"
+      }
+    },
+    {
+      "name": "Medium & centered",
+      "props": {
+        "date": "2026-04-09T12:00:00.000Z",
+        "size": "md",
+        "align": "center"
+      }
+    },
+    {
+      "name": "Bold layout",
+      "props": {
+        "date": "2026-07-20T12:00:00.000Z",
+        "bold": true
+      }
+    },
+    {
+      "name": "Reverse order",
+      "props": {
+        "date": "2026-12-01T12:00:00.000Z",
+        "reverse": true
+      }
+    },
+    {
+      "name": "Always show year",
+      "props": {
+        "date": "2024-03-15T12:00:00.000Z",
+        "showCurrentYear": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,51 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["date", "showCurrentYear", "reverse", "bold"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size", "align"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "date": "2026-04-09T12:00:00.000Z"
+      }
+    },
+    {
+      "name": "Medium & centered",
+      "props": {
+        "date": "2026-04-09T12:00:00.000Z",
+        "size": "md",
+        "align": "center"
+      }
+    },
+    {
+      "name": "Bold layout",
+      "props": {
+        "date": "2026-07-20T12:00:00.000Z",
+        "bold": true
+      }
+    },
+    {
+      "name": "Reverse order",
+      "props": {
+        "date": "2026-12-01T12:00:00.000Z",
+        "reverse": true
+      }
+    },
+    {
+      "name": "Always show year",
+      "props": {
+        "date": "2024-03-15T12:00:00.000Z",
+        "showCurrentYear": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,76 @@
+{
+  "template": "<DateTime{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left",
+    "size": "md",
+    "showCurrentYear": false,
+    "showDayOfWeek": false,
+    "showIcon": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "datetime",
+        "showDayOfWeek",
+        "showCurrentYear",
+        "showIcon",
+        "timeZone"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "align"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z"
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "size": "sm"
+      }
+    },
+    {
+      "name": "With weekday",
+      "props": {
+        "datetime": "2026-06-12T11:00:00.000Z",
+        "showDayOfWeek": true
+      }
+    },
+    {
+      "name": "With calendar icon",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "showIcon": true,
+        "size": "md"
+      }
+    },
+    {
+      "name": "Centered",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "align": "center"
+      }
+    },
+    {
+      "name": "Tokyo time",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "timeZone": "Asia/Tokyo"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,58 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["datetime", "showDayOfWeek", "showCurrentYear", "showIcon", "timeZone"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size", "align"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z"
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "size": "sm"
+      }
+    },
+    {
+      "name": "With weekday",
+      "props": {
+        "datetime": "2026-06-12T11:00:00.000Z",
+        "showDayOfWeek": true
+      }
+    },
+    {
+      "name": "With calendar icon",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "showIcon": true,
+        "size": "md"
+      }
+    },
+    {
+      "name": "Centered",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "align": "center"
+      }
+    },
+    {
+      "name": "Tokyo time",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "timeZone": "Asia/Tokyo"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,57 @@
+{
+  "template": "<DateTimeStacked{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "showCurrentYear": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "datetime",
+        "timeZone",
+        "showCurrentYear"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "dark"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "dark": false
+      }
+    },
+    {
+      "name": "With year",
+      "props": {
+        "datetime": "2024-10-31T18:45:00.000Z",
+        "dark": false,
+        "showCurrentYear": true
+      }
+    },
+    {
+      "name": "Dark",
+      "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": {}
+}

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

@@ -0,0 +1,46 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["datetime", "timeZone", "showCurrentYear"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["dark"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "dark": false
+      }
+    },
+    {
+      "name": "With year",
+      "props": {
+        "datetime": "2024-10-31T18:45:00.000Z",
+        "dark": false,
+        "showCurrentYear": true
+      }
+    },
+    {
+      "name": "Dark",
+      "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": {}
+}

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

@@ -0,0 +1,45 @@
+{
+  "template": "<DateYearStacked{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "date"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "align"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "date": "2026-04-09T12:00:00.000Z"
+      }
+    },
+    {
+      "name": "Centered",
+      "props": {
+        "date": "2026-04-09T12:00:00.000Z",
+        "align": "center"
+      }
+    },
+    {
+      "name": "Right aligned",
+      "props": {
+        "date": "2026-12-25T12:00:00.000Z",
+        "align": "right"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,36 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["date"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["align"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "date": "2026-04-09T12:00:00.000Z"
+      }
+    },
+    {
+      "name": "Centered",
+      "props": {
+        "date": "2026-04-09T12:00:00.000Z",
+        "align": "center"
+      }
+    },
+    {
+      "name": "Right aligned",
+      "props": {
+        "date": "2026-12-25T12:00:00.000Z",
+        "align": "right"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}