playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

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

@@ -0,0 +1,117 @@
+{
+  "template": "<Currency{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "abbreviate": false,
+    "align": "left",
+    "decimals": "default",
+    "emphasized": true,
+    "label": "Balance",
+    "size": "md",
+    "symbol": "$",
+    "variant": "default",
+    "unstyled": false,
+    "commaSeparator": false,
+    "amount": "2000"
+  },
+  "groups": [
+    {
+      "name": "Currency configs",
+      "props": [
+        "amount",
+        "label",
+        "unit",
+        "nullDisplay",
+        "symbol"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "align",
+        "size",
+        "variant",
+        "emphasized",
+        "abbreviate",
+        "decimals",
+        "commaSeparator",
+        "unstyled"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "amount": "2000"
+      }
+    },
+    {
+      "name": "USD (comma separator)",
+      "props": {
+        "amount": "2000",
+        "commaSeparator": true,
+        "label": "Balance",
+        "symbol": "$"
+      }
+    },
+    {
+      "name": "bold variant",
+      "props": {
+        "amount": "1428.5",
+        "label": "ARR"
+      }
+    },
+    {
+      "name": "Abbreviated",
+      "props": {
+        "amount": "1500000",
+        "abbreviate": true,
+        "label": "Volume",
+        "symbol": "$"
+      }
+    },
+    {
+      "name": "Matching decimals",
+      "props": {
+        "amount": "99.9999",
+        "decimals": "matching",
+        "symbol": "$",
+        "label": "Per seat"
+      }
+    },
+    {
+      "name": "Right aligned",
+      "props": {
+        "amount": "1428",
+        "align": "right",
+        "label": "Total",
+        "symbol": "$"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "unstyled_mode": {
+      "when": {
+        "unstyled": true
+      },
+      "message": "Unstyled mode uses plain divs for layout—useful when embedding in tables or custom typography.",
+      "type": "info"
+    },
+    "matching_decimals_info": {
+      "when": {
+        "decimals": "matching"
+      },
+      "message": "Matching decimals will show the number of decimals that match the amount. This is useful when you want to show the exact number of decimals that are in the amount.",
+      "type": "info"
+    },
+    "abbreviate_info": {
+      "when": {
+        "abbreviate": true
+      },
+      "message": "Abbreviate will show the amount in a compact format. This is useful when you want to show the amount in a shorter format.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,98 @@
+{
+  "defaults": {
+    "amount": "2000",
+    "label": "Balance"
+  },
+  "groups": [
+    {
+      "name": "Currency configs",
+      "props": ["amount", "label", "unit", "nullDisplay", "symbol"]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "align",
+        "size",
+        "variant",
+        "emphasized",
+        "abbreviate",
+        "decimals",
+        "commaSeparator",
+        "unstyled"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "amount": "2000"
+      }
+    },
+    {
+      "name": "USD (comma separator)",
+      "props": {
+        "amount": "2000",
+        "commaSeparator": true,
+        "label": "Balance",
+        "symbol": "$"
+      }
+    },
+    {
+      "name": "bold variant",
+      "props": {
+        "amount": "1428.5",
+        "label": "ARR"
+      }
+    },
+    {
+      "name": "Abbreviated",
+      "props": {
+        "amount": "1500000",
+        "abbreviate": true,
+        "label": "Volume",
+        "symbol": "$"
+      }
+    },
+    {
+      "name": "Matching decimals",
+      "props": {
+        "amount": "99.9999",
+        "decimals": "matching",
+        "symbol": "$",
+        "label": "Per seat"
+      }
+    },
+    {
+      "name": "Right aligned",
+      "props": {
+        "amount": "1428",
+        "align": "right",
+        "label": "Total",
+        "symbol": "$"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "unstyled_mode": {
+      "when": { "unstyled": true },
+      "message": "Unstyled mode uses plain divs for layout—useful when embedding in tables or custom typography.",
+      "type": "info"
+    },
+    "matching_decimals_info": {
+      "when": {
+        "decimals": "matching"
+      },
+      "message": "Matching decimals will show the number of decimals that match the amount. This is useful when you want to show the exact number of decimals that are in the amount.",
+      "type": "info"
+    },
+    "abbreviate_info": {
+      "when": {
+        "abbreviate": true
+      },
+      "message": "Abbreviate will show the amount in a compact format. This is useful when you want to show the amount in a shorter format.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,87 @@
+{
+  "template": "<DashboardValue{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left",
+    "statChange": {
+      "change": "decrease",
+      "value": "26.1"
+    },
+    "statLabel": "Decreased Value",
+    "statValue": {
+      "value": "1,428",
+      "unit": "appts"
+    }
+  },
+  "groups": [
+    {
+      "name": "Value configs",
+      "props": [
+        "statLabel",
+        "statValue",
+        "statChange"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "align"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "statLabel": "Monthly recurring revenue",
+        "statValue": {
+          "value": "1,428",
+          "unit": "appts"
+        },
+        "statChange": {
+          "change": "decrease",
+          "value": "26.1"
+        }
+      }
+    },
+    {
+      "name": "Increased Value",
+      "props": {
+        "statLabel": "Active accounts",
+        "statValue": {
+          "value": "938",
+          "unit": "homes"
+        },
+        "statChange": {
+          "change": "increase",
+          "value": "56.1"
+        }
+      }
+    },
+    {
+      "name": "Neutral Value",
+      "props": {
+        "statLabel": "Neutral Value",
+        "statValue": {
+          "value": "261",
+          "unit": "windows"
+        },
+        "statChange": {
+          "value": "86"
+        }
+      }
+    },
+    {
+      "name": "Pitch Rate",
+      "props": {
+        "statLabel": "Pitch Rate",
+        "statValue": {
+          "value": "90.9",
+          "unit": "%"
+        }
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,19 @@
+{
+  "defaults": {
+    "statChange": { "change": "decrease", "value": "26.1" },
+    "statLabel": "Decreased Value",
+    "statValue": { "value": "1,428", "unit": "appts" }
+  },
+  "groups": [
+    { "name": "Value configs", "props": ["statLabel", "statValue", "statChange"] },
+    { "name": "Appearance", "props": ["align"] }
+  ],
+  "presets": [
+    { "name": "Default", "props": { "statLabel": "Monthly recurring revenue", "statValue": { "value": "1,428", "unit": "appts" }, "statChange": { "change": "decrease", "value": "26.1" } } },
+    { "name": "Increased Value", "props": { "statLabel": "Active accounts", "statValue": { "value": "938", "unit": "homes" }, "statChange": { "change": "increase", "value": "56.1" } } },
+    { "name": "Neutral Value", "props": { "statLabel": "Neutral Value", "statValue": { "value": "261", "unit": "windows" }, "statChange": { "value": "86" } } },
+    { "name": "Pitch Rate", "props": { "statLabel": "Pitch Rate", "statValue": { "value": "90.9", "unit": "%" } } }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,73 @@
+{
+  "template": "<Date{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "alignment": "left",
+    "showDayOfWeek": false,
+    "showCurrentYear": false,
+    "showIcon": false,
+    "size": "md",
+    "unstyled": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "value",
+        "showDayOfWeek",
+        "showCurrentYear",
+        "showIcon"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "alignment",
+        "unstyled"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "value": "2026-04-09T15:30:00.000Z"
+      }
+    },
+    {
+      "name": "Large & centered",
+      "props": {
+        "value": "2026-04-09T15:30:00.000Z",
+        "size": "lg",
+        "alignment": "center"
+      }
+    },
+    {
+      "name": "Small with weekday",
+      "props": {
+        "value": "2026-06-18T10:00:00.000Z",
+        "size": "sm",
+        "showDayOfWeek": true
+      }
+    },
+    {
+      "name": "With icon & year",
+      "props": {
+        "value": "2024-11-02T09:00:00.000Z",
+        "showIcon": true,
+        "showCurrentYear": true
+      }
+    },
+    {
+      "name": "Unstyled",
+      "props": {
+        "value": "2026-04-09T15:30:00.000Z",
+        "unstyled": true,
+        "showDayOfWeek": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,54 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["value", "showDayOfWeek", "showCurrentYear", "showIcon"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size", "alignment", "unstyled"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "value": "2026-04-09T15:30:00.000Z"
+      }
+    },
+    {
+      "name": "Large & centered",
+      "props": {
+        "value": "2026-04-09T15:30:00.000Z",
+        "size": "lg",
+        "alignment": "center"
+      }
+    },
+    {
+      "name": "Small with weekday",
+      "props": {
+        "value": "2026-06-18T10:00:00.000Z",
+        "size": "sm",
+        "showDayOfWeek": true
+      }
+    },
+    {
+      "name": "With icon & year",
+      "props": {
+        "value": "2024-11-02T09:00:00.000Z",
+        "showIcon": true,
+        "showCurrentYear": true
+      }
+    },
+    {
+      "name": "Unstyled",
+      "props": {
+        "value": "2026-04-09T15:30:00.000Z",
+        "unstyled": true,
+        "showDayOfWeek": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { Button, Dialog, DatePicker } from "playbook-ui";
+
+const DatePickerDialogSubmission = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [dateFixed, setDateFixed] = useState("");
+    const [pickerInstance, setPickerInstance] = useState(0);
+
+    const close = (clearDate = false) => {
+        if (clearDate) setDateFixed("");
+        setIsOpen(false);
+    };
+
+    const open = () => {
+        setPickerInstance((current) => current + 1);
+        setIsOpen(true);
+    };
+
+    const handleSubmit = () => {
+        if (!dateFixed.trim()) return;
+        close();
+    };
+
+    return (
+        <>
+            <Button 
+                onClick={open} 
+                text="Open Dialog" 
+            />
+            <Dialog
+                onClose={() => close(true)}
+                opened={isOpen}
+                size="md"
+                title="Date Picker: Dialog Submission Example"
+            >
+                <Dialog.Body>
+                    <DatePicker
+                        defaultDate={dateFixed || undefined}
+                        key={`fixed-${pickerInstance}`}
+                        label="Date"
+                        onChange={(dateStr) => setDateFixed(dateStr || "")}
+                        pickerId={`datePickerFixed-${pickerInstance}`}
+                        staticPosition={false}
+                    />
+                </Dialog.Body>
+                <Dialog.Footer>
+                    <Button 
+                        onClick={handleSubmit}
+                        text="Submit"
+                    />
+                    <Button 
+                        onClick={() => close(true)} 
+                        text="Cancel" 
+                        variant="link" 
+                    />
+                </Dialog.Footer>
+            </Dialog>
+        </>
+    );
+};
+
+export default DatePickerDialogSubmission;

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.md

@@ -0,0 +1 @@
+Use this pattern when a DatePicker lives inside a Dialog and needs to submit a selected value before closing. A unique `key` and `pickerId` will force the datePicker to remount each time the dialog opens.  

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

@@ -0,0 +1,178 @@
+{
+  "template": "<DatePicker{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "allowInput": false,
+    "defaultDate": "",
+    "disableInput": false,
+    "enableTime": false,
+    "format": "m/d/Y",
+    "hideIcon": false,
+    "hideLabel": false,
+    "label": "Date Picker",
+    "placeholder": "Select Date",
+    "requiredIndicator": false,
+    "selectionType": "none",
+    "showTimezone": false,
+    "staticPosition": true,
+    "thisRangesEndToday": false,
+    "controlsStartId": "",
+    "controlsEndId": "",
+    "syncStartWith": "",
+    "syncEndWith": ""
+  },
+  "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": {}
+}