playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

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"
+    }
+  }
+}

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

@@ -0,0 +1,95 @@
+{
+  "children": {
+    "default": "Custom dialog content goes here when you are not using the title and text props."
+  },
+  "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"
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+{
+  "template": "<DistributionBar{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "size": "lg"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "colors",
+        "size",
+        "widths"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,54 @@
+{
+  "template": "<Draggable{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "dropZoneColor": "neutral"
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": [
+        "dropZone",
+        "dropZoneColor"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Ghost (neutral)",
+      "props": {
+        "dropZone": "ghost",
+        "dropZoneColor": "neutral"
+      }
+    },
+    {
+      "name": "Outline (primary)",
+      "props": {
+        "dropZone": "outline",
+        "dropZoneColor": "primary"
+      }
+    },
+    {
+      "name": "Shadow (purple)",
+      "props": {
+        "dropZone": "shadow",
+        "dropZoneColor": "purple"
+      }
+    },
+    {
+      "name": "Line (neutral)",
+      "props": {
+        "dropZone": "line",
+        "dropZoneColor": "neutral"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "children_note": {
+      "when": {},
+      "message": "Compose Draggable.Container and Draggable.Item as children to build a sortable list.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+{
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": ["dropZone", "dropZoneColor"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Ghost (neutral)",
+      "props": { "dropZone": "ghost", "dropZoneColor": "neutral" }
+    },
+    {
+      "name": "Outline (primary)",
+      "props": { "dropZone": "outline", "dropZoneColor": "primary" }
+    },
+    {
+      "name": "Shadow (purple)",
+      "props": { "dropZone": "shadow", "dropZoneColor": "purple" }
+    },
+    {
+      "name": "Line (neutral)",
+      "props": { "dropZone": "line", "dropZoneColor": "neutral" }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "children_note": {
+      "when": {},
+      "message": "Compose Draggable.Container and Draggable.Item as children to build a sortable list.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,236 @@
+{
+  "template": "<Dropdown{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "autocomplete": false,
+    "blankSelection": "",
+    "clearable": true,
+    "closeOnClick": "any",
+    "constrainHeight": false,
+    "multiSelect": false,
+    "separators": true,
+    "variant": "default",
+    "rangeEndsToday": false,
+    "controlsStartId": "",
+    "controlsEndId": "",
+    "requiredIndicator": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "placeholder",
+        "options",
+        "blankSelection",
+        "error"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "separators",
+        "constrainHeight",
+        "clearable",
+        "requiredIndicator"
+      ]
+    },
+    {
+      "name": "State & behavior",
+      "props": [
+        "isClosed",
+        "multiSelect",
+        "autocomplete",
+        "closeOnClick",
+        "onSelect"
+      ]
+    },
+    {
+      "name": "Quick pick",
+      "props": [
+        "customQuickPickDates",
+        "rangeEndsToday",
+        "controlsStartId",
+        "controlsEndId"
+      ]
+    },
+    {
+      "name": "Values & forms",
+      "props": [
+        "defaultValue",
+        "formPillProps"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default trigger",
+      "props": {
+        "variant": "default",
+        "placeholder": "Select a country",
+        "options": [
+          {
+            "label": "United States",
+            "value": "unitedStates",
+            "id": "us"
+          },
+          {
+            "label": "Canada",
+            "value": "canada",
+            "id": "ca"
+          },
+          {
+            "label": "Mexico",
+            "value": "mexico",
+            "id": "mx"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Subtle trigger",
+      "props": {
+        "variant": "subtle",
+        "placeholder": "Choose an option",
+        "options": [
+          {
+            "label": "Alpha",
+            "value": "alpha",
+            "id": "a"
+          },
+          {
+            "label": "Beta",
+            "value": "beta",
+            "id": "b"
+          },
+          {
+            "label": "Gamma",
+            "value": "gamma",
+            "id": "g"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Quick pick",
+      "props": {
+        "variant": "quickpick",
+        "label": "Date range"
+      }
+    },
+    {
+      "name": "Multi-select",
+      "props": {
+        "variant": "default",
+        "multiSelect": true,
+        "placeholder": "Select regions",
+        "options": [
+          {
+            "label": "North",
+            "value": "north",
+            "id": "n"
+          },
+          {
+            "label": "South",
+            "value": "south",
+            "id": "s"
+          },
+          {
+            "label": "East",
+            "value": "east",
+            "id": "e"
+          },
+          {
+            "label": "West",
+            "value": "west",
+            "id": "w"
+          }
+        ]
+      }
+    },
+    {
+      "name": "With error",
+      "props": {
+        "variant": "default",
+        "placeholder": "Required field",
+        "error": "Please make a selection.",
+        "options": [
+          {
+            "label": "Option A",
+            "value": "a",
+            "id": "a"
+          },
+          {
+            "label": "Option B",
+            "value": "b",
+            "id": "b"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Search (autocomplete)",
+      "props": {
+        "variant": "default",
+        "autocomplete": true,
+        "placeholder": "Search…",
+        "options": [
+          {
+            "label": "Apple",
+            "value": "apple",
+            "id": "1"
+          },
+          {
+            "label": "Apricot",
+            "value": "apricot",
+            "id": "2"
+          },
+          {
+            "label": "Banana",
+            "value": "banana",
+            "id": "3"
+          }
+        ]
+      }
+    }
+  ],
+  "conditionals": {
+    "rangeEndsToday": {
+      "requires": {
+        "variant": "quickpick"
+      }
+    },
+    "controlsStartId": {
+      "requires": {
+        "variant": "quickpick"
+      }
+    },
+    "controlsEndId": {
+      "requires": {
+        "variant": "quickpick"
+      }
+    },
+    "customQuickPickDates": {
+      "requires": {
+        "variant": "quickpick"
+      }
+    }
+  },
+  "hints": {
+    "quickpick_scope": {
+      "when": {
+        "variant": "quickpick"
+      },
+      "message": "Quick pick uses preset date-range options. Use custom quick pick dates or range controls to tailor the menu.",
+      "type": "info"
+    },
+    "multi_options": {
+      "when": {
+        "multiSelect": true
+      },
+      "message": "Multi-select shows selected values as pills when applicable; use clearable to allow resetting.",
+      "type": "info"
+    }
+  }
+}