@planningcenter/tapestry 4.9.0-rc.3 → 4.9.0-rc.4

package/dist/components/internal/helper-shelf/HelperShelf.d.ts

@@ -0,0 +1,26 @@
+import "./index.css";
+import React from "react";
+export interface HelperShelfProps {
+    /** Content rendered inside the shelf. */
+    children: React.ReactNode;
+    /**
+     * Id for the shelf; the trigger uses `${id}-trigger`. Defaults to a
+     * generated id.
+     */
+    id?: string;
+    /**
+     * Id of the element (e.g. a pane title) combined with "More info" to name
+     * the trigger, so several triggers on one page stay distinguishable.
+     */
+    labelledById?: string;
+}
+/**
+ * An info icon trigger and the collapsible shelf it controls, rendered as
+ * siblings so the parent can lay them out independently. Internal — consumed
+ * by `PaneHeader`'s `helpContent` prop.
+ */
+export declare function HelperShelf({ children, id, labelledById }: HelperShelfProps): React.JSX.Element;
+export declare namespace HelperShelf {
+    var displayName: string;
+}
+//# sourceMappingURL=HelperShelf.d.ts.map

package/dist/components/internal/helper-shelf/HelperShelf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelperShelf.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/helper-shelf/HelperShelf.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAMpB,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,gBAAgB,qBAwC3E;yBAxCe,WAAW"}

package/dist/components/internal/helper-shelf/HelperShelf.js

@@ -0,0 +1,37 @@
+import '../../button/ActionsDropdownIconButton.js';
+import '../../button/Button.js';
+import '../../button/DropdownButton.js';
+import '../../button/DropdownIconButton.js';
+import { IconButton } from '../../button/IconButton.js';
+import '../../button/LoadingButton.js';
+import '../../button/PageHeaderActionsDropdownButton.js';
+import Icon from '../../../utilities/Icon.js';
+import { useId } from '../../../utilities/useId.js';
+import classNames from 'classnames';
+import React__default, { useState } from 'react';
+
+/**
+ * An info icon trigger and the collapsible shelf it controls, rendered as
+ * siblings so the parent can lay them out independently. Internal — consumed
+ * by `PaneHeader`'s `helpContent` prop.
+ */
+function HelperShelf({ children, id, labelledById }) {
+    const stableId = useId();
+    const shelfId = id || `tds-helper-shelf-${stableId}`;
+    const triggerId = `${shelfId}-trigger`;
+    const [expanded, setExpanded] = useState(false);
+    // Keeps collapsed shelf content out of tab order/a11y tree. Needs a string,
+    // not a boolean — `inert` isn't in `@types/react@18` or recognized by
+    // react-dom as a boolean attribute before React 19.
+    const inertProps = { inert: expanded ? undefined : "" };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(IconButton, { "aria-controls": shelfId, "aria-expanded": expanded, "aria-label": "More info", "aria-labelledby": labelledById ? `${triggerId} ${labelledById}` : undefined, className: "tds-helper-shelf-trigger", icon: React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#outlined-info-circle" }), id: triggerId, kind: "ghost", onClick: () => setExpanded((isExpanded) => !isExpanded), size: "sm" }),
+        React__default.createElement("div", { className: classNames("tds-helper-shelf", {
+                "tds-helper-shelf--expanded": expanded,
+            }), id: shelfId, ...inertProps },
+            React__default.createElement("div", { className: "tds-helper-shelf-content" }, children))));
+}
+HelperShelf.displayName = "HelperShelf";
+
+export { HelperShelf };
+//# sourceMappingURL=HelperShelf.js.map

package/dist/components/internal/helper-shelf/HelperShelf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelperShelf.js","sources":["../../../../src/components/internal/helper-shelf/HelperShelf.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { IconButton } from \"@components/button\"\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { useState } from \"react\"\n\nexport interface HelperShelfProps {\n  /** Content rendered inside the shelf. */\n  children: React.ReactNode\n  /**\n   * Id for the shelf; the trigger uses `${id}-trigger`. Defaults to a\n   * generated id.\n   */\n  id?: string\n  /**\n   * Id of the element (e.g. a pane title) combined with \"More info\" to name\n   * the trigger, so several triggers on one page stay distinguishable.\n   */\n  labelledById?: string\n}\n\n/**\n * An info icon trigger and the collapsible shelf it controls, rendered as\n * siblings so the parent can lay them out independently. Internal — consumed\n * by `PaneHeader`'s `helpContent` prop.\n */\nexport function HelperShelf({ children, id, labelledById }: HelperShelfProps) {\n  const stableId = useId()\n  const shelfId = id || `tds-helper-shelf-${stableId}`\n  const triggerId = `${shelfId}-trigger`\n  const [expanded, setExpanded] = useState(false)\n\n  // Keeps collapsed shelf content out of tab order/a11y tree. Needs a string,\n  // not a boolean — `inert` isn't in `@types/react@18` or recognized by\n  // react-dom as a boolean attribute before React 19.\n  const inertProps = { inert: expanded ? undefined : \"\" } as {\n    inert?: string\n  }\n\n  return (\n    <>\n      <IconButton\n        aria-controls={shelfId}\n        aria-expanded={expanded}\n        aria-label=\"More info\"\n        aria-labelledby={\n          labelledById ? `${triggerId} ${labelledById}` : undefined\n        }\n        className=\"tds-helper-shelf-trigger\"\n        icon={<Icon aria-hidden symbol=\"general#outlined-info-circle\" />}\n        id={triggerId}\n        kind=\"ghost\"\n        onClick={() => setExpanded((isExpanded) => !isExpanded)}\n        size=\"sm\"\n      />\n      <div\n        className={classNames(\"tds-helper-shelf\", {\n          \"tds-helper-shelf--expanded\": expanded,\n        })}\n        id={shelfId}\n        {...inertProps}\n      >\n        <div className=\"tds-helper-shelf-content\">{children}</div>\n      </div>\n    </>\n  )\n}\n\nHelperShelf.displayName = \"HelperShelf\"\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAuBA;;;;AAIG;AACG,SAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAoB,EAAA;AAC1E,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,iBAAA,EAAoB,QAAQ,EAAE;AACpD,IAAA,MAAM,SAAS,GAAG,CAAA,EAAG,OAAO,UAAU;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;;;;AAK/C,IAAA,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,QAAQ,GAAG,SAAS,GAAG,EAAE,EAEpD;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,eAAA,EACM,OAAO,EAAA,eAAA,EACP,QAAQ,EAAA,YAAA,EACZ,WAAW,EAAA,iBAAA,EAEpB,YAAY,GAAG,CAAA,EAAG,SAAS,CAAA,CAAA,EAAI,YAAY,CAAA,CAAE,GAAG,SAAS,EAE3D,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAEA,6BAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,8BAA8B,EAAA,CAAG,EAChE,EAAE,EAAE,SAAS,EACb,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAM,WAAW,CAAC,CAAC,UAAU,KAAK,CAAC,UAAU,CAAC,EACvD,IAAI,EAAC,IAAI,EAAA,CACT;AACF,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE;AACxC,gBAAA,4BAA4B,EAAE,QAAQ;AACvC,aAAA,CAAC,EACF,EAAE,EAAE,OAAO,KACP,UAAU,EAAA;YAEdA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,QAAQ,CAAO,CACtD,CACL;AAEP;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/components/internal/helper-shelf/index.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+export type { HelperShelfProps } from "./HelperShelf";
+export { HelperShelf } from "./HelperShelf";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/internal/helper-shelf/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/helper-shelf/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/pane/Pane.js

@@ -2,7 +2,7 @@ import { useId } from '../../utilities/useId.js';
 import classNames from 'classnames';
 import React__default from 'react';
 import { PaneContext } from './PaneContext.js';
-import { PaneHeader, hasRenderableTitle } from './PaneHeader.js';
+import { PaneHeader, hasRenderableContent } from './PaneHeader.js';
 
 /**
  * Flattens Fragments so a `PaneHeader` can be found regardless of whether
@@ -39,9 +39,9 @@ function Pane({ children, className, id, ...restProps }) {
     const titleId = `${paneId}-title`;
     const combinedClassName = classNames("tds-pane", className);
     const paneHeader = flattenChildren(children).find((child) => React__default.isValidElement(child) && child.type === PaneHeader);
-    const hasTitle = hasRenderableTitle(paneHeader?.props.title);
+    const hasTitle = hasRenderableContent(paneHeader?.props.title);
     return (React__default.createElement("div", { ...restProps, "aria-labelledby": hasTitle ? titleId : undefined, className: combinedClassName, id: paneId, role: hasTitle ? "region" : undefined },
-        React__default.createElement(PaneContext.Provider, { value: { titleId } }, children)));
+        React__default.createElement(PaneContext.Provider, { value: { paneId, titleId } }, children)));
 }
 Pane.displayName = "Pane";
 

package/dist/components/pane/Pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pane.js","sources":["../../../src/components/pane/Pane.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes } from \"react\"\n\nimport { PaneContext } from \"./PaneContext\"\nimport { hasRenderableTitle, PaneHeader } from \"./PaneHeader\"\n\nexport interface PaneProps {\n  /** `PaneHeader` / `PaneBody` / `PaneFooter`. */\n  children: React.ReactNode\n}\n\nexport type PaneElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof PaneProps\n> &\n  PaneProps\n\n/**\n * Flattens Fragments so a `PaneHeader` can be found regardless of whether\n * children arrive as direct JSX children or as a single Fragment value (as\n * happens when `children` is passed via props, e.g. Storybook args or\n * `tapestry-render`).\n */\nfunction flattenChildren(children: React.ReactNode): React.ReactNode[] {\n  const result: React.ReactNode[] = []\n\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      const fragmentProps = child.props as { children?: React.ReactNode }\n      result.push(...flattenChildren(fragmentProps.children))\n    } else {\n      result.push(child)\n    }\n  })\n\n  return result\n}\n\n/**\n * A decorative, static surface — a card-toned container with rounded corners\n * used to visually group related content. Renders a fixed anatomy: an\n * optional `PaneHeader`, a `PaneBody`, and an optional `PaneFooter`. Pane does\n * not manage layout — arrange Panes on a page, and content within one, with\n * `Flex` or another layout primitive.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function Pane({\n  children,\n  className,\n  id,\n  ...restProps\n}: PaneElementProps) {\n  const stableId = useId()\n  const paneId = id || `tds-pane-${stableId}`\n  const titleId = `${paneId}-title`\n  const combinedClassName = classNames(\"tds-pane\", className)\n\n  const paneHeader = flattenChildren(children).find(\n    (child): child is React.ReactElement<{ title?: React.ReactNode }> =>\n      React.isValidElement(child) && child.type === PaneHeader\n  )\n  const hasTitle = hasRenderableTitle(paneHeader?.props.title)\n\n  return (\n    <div\n      {...restProps}\n      aria-labelledby={hasTitle ? titleId : undefined}\n      className={combinedClassName}\n      id={paneId}\n      role={hasTitle ? \"region\" : undefined}\n    >\n      <PaneContext.Provider value={{ titleId }}>\n        {children}\n      </PaneContext.Provider>\n    </div>\n  )\n}\n\nPane.displayName = \"Pane\"\n"],"names":["React"],"mappings":";;;;;;AAoBA;;;;;AAKG;AACH,SAAS,eAAe,CAAC,QAAyB,EAAA;IAChD,MAAM,MAAM,GAAsB,EAAE;IAEpCA,cAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AACzC,QAAA,IAAIA,cAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAKA,cAAK,CAAC,QAAQ,EAAE;AAChE,YAAA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAuC;YACnE,MAAM,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACzD;aAAO;AACL,YAAA,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;QACpB;AACF,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,MAAM;AACf;AAEA;;;;;;;;;AASG;AACG,SAAU,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,SAAS,EACK,EAAA;AACjB,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,MAAM,GAAG,EAAE,IAAI,CAAA,SAAA,EAAY,QAAQ,EAAE;AAC3C,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,MAAM,QAAQ;IACjC,MAAM,iBAAiB,GAAG,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC;IAE3D,MAAM,UAAU,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC/C,CAAC,KAAK,KACJA,cAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,CAC3D;IACD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC;AAE5D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GACM,SAAS,EAAA,iBAAA,EACI,QAAQ,GAAG,OAAO,GAAG,SAAS,EAC/C,SAAS,EAAE,iBAAiB,EAC5B,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAAA;AAErC,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAA,EACrC,QAAQ,CACY,CACnB;AAEV;AAEA,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"Pane.js","sources":["../../../src/components/pane/Pane.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes } from \"react\"\n\nimport { PaneContext } from \"./PaneContext\"\nimport { hasRenderableContent, PaneHeader } from \"./PaneHeader\"\n\nexport interface PaneProps {\n  /** `PaneHeader` / `PaneBody` / `PaneFooter`. */\n  children: React.ReactNode\n}\n\nexport type PaneElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof PaneProps\n> &\n  PaneProps\n\n/**\n * Flattens Fragments so a `PaneHeader` can be found regardless of whether\n * children arrive as direct JSX children or as a single Fragment value (as\n * happens when `children` is passed via props, e.g. Storybook args or\n * `tapestry-render`).\n */\nfunction flattenChildren(children: React.ReactNode): React.ReactNode[] {\n  const result: React.ReactNode[] = []\n\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      const fragmentProps = child.props as { children?: React.ReactNode }\n      result.push(...flattenChildren(fragmentProps.children))\n    } else {\n      result.push(child)\n    }\n  })\n\n  return result\n}\n\n/**\n * A decorative, static surface — a card-toned container with rounded corners\n * used to visually group related content. Renders a fixed anatomy: an\n * optional `PaneHeader`, a `PaneBody`, and an optional `PaneFooter`. Pane does\n * not manage layout — arrange Panes on a page, and content within one, with\n * `Flex` or another layout primitive.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function Pane({\n  children,\n  className,\n  id,\n  ...restProps\n}: PaneElementProps) {\n  const stableId = useId()\n  const paneId = id || `tds-pane-${stableId}`\n  const titleId = `${paneId}-title`\n  const combinedClassName = classNames(\"tds-pane\", className)\n\n  const paneHeader = flattenChildren(children).find(\n    (child): child is React.ReactElement<{ title?: React.ReactNode }> =>\n      React.isValidElement(child) && child.type === PaneHeader\n  )\n  const hasTitle = hasRenderableContent(paneHeader?.props.title)\n\n  return (\n    <div\n      {...restProps}\n      aria-labelledby={hasTitle ? titleId : undefined}\n      className={combinedClassName}\n      id={paneId}\n      role={hasTitle ? \"region\" : undefined}\n    >\n      <PaneContext.Provider value={{ paneId, titleId }}>\n        {children}\n      </PaneContext.Provider>\n    </div>\n  )\n}\n\nPane.displayName = \"Pane\"\n"],"names":["React"],"mappings":";;;;;;AAoBA;;;;;AAKG;AACH,SAAS,eAAe,CAAC,QAAyB,EAAA;IAChD,MAAM,MAAM,GAAsB,EAAE;IAEpCA,cAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AACzC,QAAA,IAAIA,cAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAKA,cAAK,CAAC,QAAQ,EAAE;AAChE,YAAA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAuC;YACnE,MAAM,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACzD;aAAO;AACL,YAAA,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;QACpB;AACF,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,MAAM;AACf;AAEA;;;;;;;;;AASG;AACG,SAAU,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,SAAS,EACK,EAAA;AACjB,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,MAAM,GAAG,EAAE,IAAI,CAAA,SAAA,EAAY,QAAQ,EAAE;AAC3C,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,MAAM,QAAQ;IACjC,MAAM,iBAAiB,GAAG,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC;IAE3D,MAAM,UAAU,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC/C,CAAC,KAAK,KACJA,cAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,CAC3D;IACD,MAAM,QAAQ,GAAG,oBAAoB,CAAC,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC;AAE9D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GACM,SAAS,EAAA,iBAAA,EACI,QAAQ,GAAG,OAAO,GAAG,SAAS,EAC/C,SAAS,EAAE,iBAAiB,EAC5B,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAAA;AAErC,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAA,EAC7C,QAAQ,CACY,CACnB;AAEV;AAEA,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/components/pane/PaneContext.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 export interface PaneContextValue {
+    /** The Pane's root id, used to derive ids for elements inside it. */
+    paneId: string;
     titleId: string;
 }
 export declare const PaneContext: React.Context<PaneContextValue | null>;

package/dist/components/pane/PaneContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaneContext.d.ts","sourceRoot":"","sources":["../../../src/components/pane/PaneContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,WAAW,wCAAqD,CAAA"}
+{"version":3,"file":"PaneContext.d.ts","sourceRoot":"","sources":["../../../src/components/pane/PaneContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,gBAAgB;IAC/B,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,WAAW,wCAAqD,CAAA"}

package/dist/components/pane/PaneContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaneContext.js","sources":["../../../src/components/pane/PaneContext.tsx"],"sourcesContent":["import React from \"react\"\n\nexport interface PaneContextValue {\n  titleId: string\n}\n\nexport const PaneContext = React.createContext<PaneContextValue | null>(null)\n"],"names":["React"],"mappings":";;AAMO,MAAM,WAAW,GAAGA,cAAK,CAAC,aAAa,CAA0B,IAAI;;;;"}
+{"version":3,"file":"PaneContext.js","sources":["../../../src/components/pane/PaneContext.tsx"],"sourcesContent":["import React from \"react\"\n\nexport interface PaneContextValue {\n  /** The Pane's root id, used to derive ids for elements inside it. */\n  paneId: string\n  titleId: string\n}\n\nexport const PaneContext = React.createContext<PaneContextValue | null>(null)\n"],"names":["React"],"mappings":";;AAQO,MAAM,WAAW,GAAGA,cAAK,CAAC,aAAa,CAA0B,IAAI;;;;"}

package/dist/components/pane/PaneHeader.d.ts

@@ -7,6 +7,12 @@ export interface PaneHeaderProps {
      * `PaneHeaderActions` wrapping the buttons that affect the whole pane.
      */
     children?: React.ReactNode;
+    /**
+     * Content for the collapsible helper shelf. When set, the header renders a
+     * "More info" trigger after the title and the shelf beneath it. The shelf
+     * starts closed.
+     */
+    helpContent?: React.ReactNode;
     /**
      * Controls which heading element renders (`h2` or `h3`) so the title fits
      * the document outline wherever the Pane is nested. Visual style stays
@@ -22,20 +28,22 @@ export interface PaneHeaderProps {
 }
 export type PaneHeaderElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof PaneHeaderProps> & PaneHeaderProps;
 /**
- * Whether `title` produces visible heading content. Shared with `Pane` so the
- * root's `role="region"` / `aria-labelledby` stays in sync with whether the
- * heading actually renders.
+ * Whether `content` produces visible output — skips `undefined`, `null`, `""`,
+ * and booleans (e.g. `isEditing && "Edit settings"`). Used for both `title`
+ * and `helpContent`, and shared with `Pane` so the root's `role="region"` /
+ * `aria-labelledby` stays in sync with whether the heading actually renders.
  */
-export declare function hasRenderableTitle(title: React.ReactNode): boolean;
+export declare function hasRenderableContent(content: React.ReactNode): boolean;
 /**
- * The header region of a `Pane` — renders the title followed by any children,
- * which should be a `PaneHeaderActions` when the pane has actions. Must be
- * rendered inside a `Pane`.
+ * The header region of a `Pane` — renders the title, an optional help trigger
+ * and shelf (`helpContent`), then any children, which should be a
+ * `PaneHeaderActions` when the pane has actions. Must be rendered inside a
+ * `Pane`.
  *
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
  */
-export declare function PaneHeader({ children, className, level, title, ...restProps }: PaneHeaderElementProps): React.JSX.Element;
+export declare function PaneHeader({ children, className, helpContent, level, title, ...restProps }: PaneHeaderElementProps): React.JSX.Element;
 export declare namespace PaneHeader {
     var displayName: string;
 }

package/dist/components/pane/PaneHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaneHeader.d.ts","sourceRoot":"","sources":["../../../src/components/pane/PaneHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAA;AAI9D,MAAM,MAAM,eAAe,GAAG,CAAC,GAAG,CAAC,CAAA;AAEnC,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,eAAe,CACtB,GACC,eAAe,CAAA;AAEjB;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,OAAO,CAOlE;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,KAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,sBAAsB,qBA0BxB;yBAhCe,UAAU"}
+{"version":3,"file":"PaneHeader.d.ts","sourceRoot":"","sources":["../../../src/components/pane/PaneHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAA;AAI9D,MAAM,MAAM,eAAe,GAAG,CAAC,GAAG,CAAC,CAAA;AAEnC,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,eAAe,CACtB,GACC,eAAe,CAAA;AAEjB;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,OAAO,CAOtE;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,sBAAsB,qBAmCxB;yBA1Ce,UAAU"}

package/dist/components/pane/PaneHeader.js

@@ -1,37 +1,42 @@
 import { Flex } from '../flex/Flex.js';
+import { HelperShelf } from '../internal/helper-shelf/HelperShelf.js';
 import classNames from 'classnames';
 import React__default, { useContext } from 'react';
 import { PaneContext } from './PaneContext.js';
 
 /**
- * Whether `title` produces visible heading content. Shared with `Pane` so the
- * root's `role="region"` / `aria-labelledby` stays in sync with whether the
- * heading actually renders.
+ * Whether `content` produces visible output — skips `undefined`, `null`, `""`,
+ * and booleans (e.g. `isEditing && "Edit settings"`). Used for both `title`
+ * and `helpContent`, and shared with `Pane` so the root's `role="region"` /
+ * `aria-labelledby` stays in sync with whether the heading actually renders.
  */
-function hasRenderableTitle(title) {
-    return (title !== undefined &&
-        title !== null &&
-        title !== "" &&
-        typeof title !== "boolean");
+function hasRenderableContent(content) {
+    return (content !== undefined &&
+        content !== null &&
+        content !== "" &&
+        typeof content !== "boolean");
 }
 /**
- * The header region of a `Pane` — renders the title followed by any children,
- * which should be a `PaneHeaderActions` when the pane has actions. Must be
- * rendered inside a `Pane`.
+ * The header region of a `Pane` — renders the title, an optional help trigger
+ * and shelf (`helpContent`), then any children, which should be a
+ * `PaneHeaderActions` when the pane has actions. Must be rendered inside a
+ * `Pane`.
  *
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
  */
-function PaneHeader({ children, className, level = 2, title, ...restProps }) {
-    const { titleId } = useContext(PaneContext) ?? {};
+function PaneHeader({ children, className, helpContent, level = 2, title, ...restProps }) {
+    const { paneId, titleId } = useContext(PaneContext) ?? {};
     const combinedClassName = classNames("tds-pane-header", className);
     const Heading = `h${level}`;
-    const hasTitle = hasRenderableTitle(title);
+    const hasTitle = hasRenderableContent(title);
+    const hasHelpContent = hasRenderableContent(helpContent);
     return (React__default.createElement(Flex, { as: "header", align: "center", gap: 2, justify: "space-between", direction: "row", wrap: "wrap", ...restProps, className: combinedClassName, role: "group" },
         hasTitle && (React__default.createElement(Heading, { className: "tds-pane-title", id: titleId }, title)),
+        hasHelpContent && (React__default.createElement(HelperShelf, { id: paneId && `${paneId}-help`, labelledById: hasTitle ? titleId : undefined }, helpContent)),
         children));
 }
 PaneHeader.displayName = "PaneHeader";
 
-export { PaneHeader, hasRenderableTitle };
+export { PaneHeader, hasRenderableContent };
 //# sourceMappingURL=PaneHeader.js.map

package/dist/components/pane/PaneHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaneHeader.js","sources":["../../../src/components/pane/PaneHeader.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex } from \"@components/flex\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes, useContext } from \"react\"\n\nimport { PaneContext } from \"./PaneContext\"\n\nexport type PaneHeaderLevel = 2 | 3\n\nexport interface PaneHeaderProps {\n  /**\n   * Trailing header content, rendered after the title — typically a\n   * `PaneHeaderActions` wrapping the buttons that affect the whole pane.\n   */\n  children?: React.ReactNode\n  /**\n   * Controls which heading element renders (`h2` or `h3`) so the title fits\n   * the document outline wherever the Pane is nested. Visual style stays\n   * constant at every level. Defaults to `2`; override to `3` when nesting a\n   * Pane one level deeper in the heading outline.\n   */\n  level?: PaneHeaderLevel\n  /**\n   * The pane's title. Optional only in the documented exception — e.g. a\n   * wizard step whose title already lives in a Stepper component.\n   */\n  title?: React.ReactNode\n}\n\nexport type PaneHeaderElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof PaneHeaderProps\n> &\n  PaneHeaderProps\n\n/**\n * Whether `title` produces visible heading content. Shared with `Pane` so the\n * root's `role=\"region\"` / `aria-labelledby` stays in sync with whether the\n * heading actually renders.\n */\nexport function hasRenderableTitle(title: React.ReactNode): boolean {\n  return (\n    title !== undefined &&\n    title !== null &&\n    title !== \"\" &&\n    typeof title !== \"boolean\"\n  )\n}\n\n/**\n * The header region of a `Pane` — renders the title followed by any children,\n * which should be a `PaneHeaderActions` when the pane has actions. Must be\n * rendered inside a `Pane`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function PaneHeader({\n  children,\n  className,\n  level = 2,\n  title,\n  ...restProps\n}: PaneHeaderElementProps) {\n  const { titleId } = useContext(PaneContext) ?? {}\n  const combinedClassName = classNames(\"tds-pane-header\", className)\n  const Heading = `h${level}` as \"h2\" | \"h3\"\n  const hasTitle = hasRenderableTitle(title)\n\n  return (\n    <Flex\n      as=\"header\"\n      align=\"center\"\n      gap={2}\n      justify=\"space-between\"\n      direction=\"row\"\n      wrap=\"wrap\"\n      {...restProps}\n      className={combinedClassName}\n      role=\"group\"\n    >\n      {hasTitle && (\n        <Heading className=\"tds-pane-title\" id={titleId}>\n          {title}\n        </Heading>\n      )}\n      {children}\n    </Flex>\n  )\n}\n\nPaneHeader.displayName = \"PaneHeader\"\n"],"names":["React"],"mappings":";;;;;AAoCA;;;;AAIG;AACG,SAAU,kBAAkB,CAAC,KAAsB,EAAA;IACvD,QACE,KAAK,KAAK,SAAS;AACnB,QAAA,KAAK,KAAK,IAAI;AACd,QAAA,KAAK,KAAK,EAAE;AACZ,QAAA,OAAO,KAAK,KAAK,SAAS;AAE9B;AAEA;;;;;;;AAOG;SACa,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,CAAC,EACT,KAAK,EACL,GAAG,SAAS,EACW,EAAA;IACvB,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE;IACjD,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC;AAClE,IAAA,MAAM,OAAO,GAAG,CAAA,CAAA,EAAI,KAAK,EAAiB;AAC1C,IAAA,MAAM,QAAQ,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAE1C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EACN,OAAO,EAAC,eAAe,EACvB,SAAS,EAAC,KAAK,EACf,IAAI,EAAC,MAAM,EAAA,GACP,SAAS,EACb,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,OAAO,EAAA;AAEX,QAAA,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,SAAS,EAAC,gBAAgB,EAAC,EAAE,EAAE,OAAO,EAAA,EAC5C,KAAK,CACE,CACX;QACA,QAAQ,CACJ;AAEX;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"PaneHeader.js","sources":["../../../src/components/pane/PaneHeader.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex } from \"@components/flex\"\nimport { HelperShelf } from \"@components/internal/helper-shelf\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes, useContext } from \"react\"\n\nimport { PaneContext } from \"./PaneContext\"\n\nexport type PaneHeaderLevel = 2 | 3\n\nexport interface PaneHeaderProps {\n  /**\n   * Trailing header content, rendered after the title — typically a\n   * `PaneHeaderActions` wrapping the buttons that affect the whole pane.\n   */\n  children?: React.ReactNode\n  /**\n   * Content for the collapsible helper shelf. When set, the header renders a\n   * \"More info\" trigger after the title and the shelf beneath it. The shelf\n   * starts closed.\n   */\n  helpContent?: React.ReactNode\n  /**\n   * Controls which heading element renders (`h2` or `h3`) so the title fits\n   * the document outline wherever the Pane is nested. Visual style stays\n   * constant at every level. Defaults to `2`; override to `3` when nesting a\n   * Pane one level deeper in the heading outline.\n   */\n  level?: PaneHeaderLevel\n  /**\n   * The pane's title. Optional only in the documented exception — e.g. a\n   * wizard step whose title already lives in a Stepper component.\n   */\n  title?: React.ReactNode\n}\n\nexport type PaneHeaderElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof PaneHeaderProps\n> &\n  PaneHeaderProps\n\n/**\n * Whether `content` produces visible output — skips `undefined`, `null`, `\"\"`,\n * and booleans (e.g. `isEditing && \"Edit settings\"`). Used for both `title`\n * and `helpContent`, and shared with `Pane` so the root's `role=\"region\"` /\n * `aria-labelledby` stays in sync with whether the heading actually renders.\n */\nexport function hasRenderableContent(content: React.ReactNode): boolean {\n  return (\n    content !== undefined &&\n    content !== null &&\n    content !== \"\" &&\n    typeof content !== \"boolean\"\n  )\n}\n\n/**\n * The header region of a `Pane` — renders the title, an optional help trigger\n * and shelf (`helpContent`), then any children, which should be a\n * `PaneHeaderActions` when the pane has actions. Must be rendered inside a\n * `Pane`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function PaneHeader({\n  children,\n  className,\n  helpContent,\n  level = 2,\n  title,\n  ...restProps\n}: PaneHeaderElementProps) {\n  const { paneId, titleId } = useContext(PaneContext) ?? {}\n  const combinedClassName = classNames(\"tds-pane-header\", className)\n  const Heading = `h${level}` as \"h2\" | \"h3\"\n  const hasTitle = hasRenderableContent(title)\n  const hasHelpContent = hasRenderableContent(helpContent)\n\n  return (\n    <Flex\n      as=\"header\"\n      align=\"center\"\n      gap={2}\n      justify=\"space-between\"\n      direction=\"row\"\n      wrap=\"wrap\"\n      {...restProps}\n      className={combinedClassName}\n      role=\"group\"\n    >\n      {hasTitle && (\n        <Heading className=\"tds-pane-title\" id={titleId}>\n          {title}\n        </Heading>\n      )}\n      {hasHelpContent && (\n        <HelperShelf\n          id={paneId && `${paneId}-help`}\n          labelledById={hasTitle ? titleId : undefined}\n        >\n          {helpContent}\n        </HelperShelf>\n      )}\n      {children}\n    </Flex>\n  )\n}\n\nPaneHeader.displayName = \"PaneHeader\"\n"],"names":["React"],"mappings":";;;;;;AA2CA;;;;;AAKG;AACG,SAAU,oBAAoB,CAAC,OAAwB,EAAA;IAC3D,QACE,OAAO,KAAK,SAAS;AACrB,QAAA,OAAO,KAAK,IAAI;AAChB,QAAA,OAAO,KAAK,EAAE;AACd,QAAA,OAAO,OAAO,KAAK,SAAS;AAEhC;AAEA;;;;;;;;AAQG;SACa,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,GAAG,CAAC,EACT,KAAK,EACL,GAAG,SAAS,EACW,EAAA;AACvB,IAAA,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE;IACzD,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC;AAClE,IAAA,MAAM,OAAO,GAAG,CAAA,CAAA,EAAI,KAAK,EAAiB;AAC1C,IAAA,MAAM,QAAQ,GAAG,oBAAoB,CAAC,KAAK,CAAC;AAC5C,IAAA,MAAM,cAAc,GAAG,oBAAoB,CAAC,WAAW,CAAC;AAExD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EACN,OAAO,EAAC,eAAe,EACvB,SAAS,EAAC,KAAK,EACf,IAAI,EAAC,MAAM,EAAA,GACP,SAAS,EACb,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,OAAO,EAAA;AAEX,QAAA,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,SAAS,EAAC,gBAAgB,EAAC,EAAE,EAAE,OAAO,EAAA,EAC5C,KAAK,CACE,CACX;QACA,cAAc,KACbA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,EAAE,EAAE,MAAM,IAAI,CAAA,EAAG,MAAM,CAAA,KAAA,CAAO,EAC9B,YAAY,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,EAAA,EAE3C,WAAW,CACA,CACf;QACA,QAAQ,CACJ;AAEX;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}