playbook_ui_docs 16.5.0.pre.alpha.play289915580 → 16.5.0.pre.alpha.testingplayground15744

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

@@ -0,0 +1,22 @@
+{
+  "template": "<DateRangeStacked{{props}} />",
+  "propTargets": {},
+  "defaults": {},
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "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": {}
+}

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

@@ -0,0 +1,75 @@
+{
+  "template": "<Detail{{props}}>{{children}}</Detail>",
+  "propTargets": {},
+  "defaults": {
+    "bold": false,
+    "color": "light",
+    "tag": "div"
+  },
+  "children": {
+    "editable": true,
+    "default": "SKU · 12 units in stock",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": [
+        "color",
+        "bold",
+        "tag"
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
+        "text"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Metadata",
+      "props": {
+        "color": "light",
+        "bold": false
+      },
+      "children": "Updated Apr 9, 2026"
+    },
+    {
+      "name": "Emphasis",
+      "props": {
+        "color": "default",
+        "bold": true
+      },
+      "children": "Order #48291 · Processing"
+    },
+    {
+      "name": "Link",
+      "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"
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,44 @@
+{
+  "children": {
+    "default": "SKU · 12 units in stock"
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": ["color", "bold", "tag"]
+    },
+    {
+      "name": "Content",
+      "props": ["text"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Metadata",
+      "props": { "color": "light", "bold": false },
+      "children": "Updated Apr 9, 2026"
+    },
+    {
+      "name": "Emphasis",
+      "props": { "color": "default", "bold": true },
+      "children": "Order #48291 · Processing"
+    },
+    {
+      "name": "Link",
+      "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"
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,121 @@
+{
+  "template": "<Dialog{{props}}>{{children}}</Dialog>",
+  "propTargets": {},
+  "defaults": {
+    "closeable": true,
+    "fullHeight": false,
+    "placement": "center",
+    "shouldCloseOnOverlayClick": true,
+    "size": "md",
+    "status": ""
+  },
+  "children": {
+    "editable": true,
+    "default": "Custom dialog content goes here when you are not using the title and text props.",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "title",
+        "text",
+        "cancelButton",
+        "confirmButton"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "opened",
+        "placement",
+        "shouldCloseOnOverlayClick",
+        "closeable",
+        "loading",
+        "trigger",
+        "onClose",
+        "onCancel",
+        "onConfirm",
+        "onChange"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "status",
+        "fullHeight",
+        "portalClassName"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Small",
+      "props": {
+        "size": "sm",
+        "opened": true,
+        "title": "Small dialog",
+        "text": "Narrow width for short confirmations and alerts."
+      }
+    },
+    {
+      "name": "Medium",
+      "props": {
+        "size": "md",
+        "opened": true,
+        "title": "Medium dialog",
+        "text": "Default size for most forms and standard content."
+      }
+    },
+    {
+      "name": "Large",
+      "props": {
+        "size": "lg",
+        "opened": true,
+        "title": "Large dialog",
+        "text": "Wider layout for dense content or two-column layouts."
+      }
+    },
+    {
+      "name": "Extra large",
+      "props": {
+        "size": "xl",
+        "opened": true,
+        "title": "Extra large dialog",
+        "text": "Maximum width before full-screen patterns."
+      }
+    },
+    {
+      "name": "Content width",
+      "props": {
+        "size": "content",
+        "opened": true,
+        "title": "Content-sized dialog",
+        "text": "Width follows the content instead of fixed breakpoints."
+      }
+    },
+    {
+      "name": "Status size",
+      "props": {
+        "size": "status_size",
+        "opened": true,
+        "status": "success",
+        "title": "Success",
+        "text": "Compact status layout for confirmations and feedback."
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "status_dialog": {
+      "when": {
+        "status": "success"
+      },
+      "message": "Status dialogs show an icon, title, and body copy in a centered layout.",
+      "type": "info"
+    }
+  }
+}