@planningcenter/tapestry 4.1.0-rc.2 → 4.1.0-rc.3

package/dist/componentRegistration.js

@@ -1,6 +1,10 @@
 import { register as r } from './packages/tapestry-render/dist/registry.js';
+import { DropdownButton } from './components/button/DropdownButton.js';
+import { DropdownIconButton } from './components/button/DropdownIconButton.js';
+import { PageHeaderActionsDropdownButton } from './components/button/PageHeaderActionsDropdownButton.js';
 import { ComboBox, ComboBoxItem, ComboBoxSection } from './components/combo-box/ComboBox.js';
 import { DatePicker } from './components/date-picker/DatePicker.js';
+import { Dropdown, DropdownAction, DropdownLink, DropdownMenu, DropdownSection, DropdownSeparator, DropdownTrigger } from './components/dropdown/Dropdown.js';
 import { NumberStepper } from './components/number-stepper/NumberStepper.js';
 import { PageHeader } from './components/page-header/PageHeader.js';
 import { Select } from './components/select/Select.js';
@@ -13,8 +17,18 @@ r("ComboBox", ComboBox);
 r("ComboBoxItem", ComboBoxItem);
 r("ComboBoxSection", ComboBoxSection);
 r("DatePicker", DatePicker);
+r("Dropdown", Dropdown);
+r("DropdownAction", DropdownAction);
+r("DropdownButton", DropdownButton);
+r("DropdownIconButton", DropdownIconButton);
+r("DropdownLink", DropdownLink);
+r("DropdownMenu", DropdownMenu);
+r("DropdownSection", DropdownSection);
+r("DropdownSeparator", DropdownSeparator);
+r("DropdownTrigger", DropdownTrigger);
 r("NumberStepper", NumberStepper);
 r("PageHeader", PageHeader);
+r("PageHeaderActionsDropdownButton", PageHeaderActionsDropdownButton);
 r("Select", Select);
 r("Sidenav", Sidenav);
 r("SidenavItem", SidenavItem);

package/dist/componentRegistration.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentRegistration.js","sources":["../src/componentRegistration.ts"],"sourcesContent":["import { register } from \"@planningcenter/tapestry-render/registry\"\n\nimport {\n  ComboBox,\n  ComboBoxItem,\n  ComboBoxSection,\n} from \"./components/combo-box/ComboBox\"\nimport { DatePicker } from \"./components/date-picker/DatePicker\"\nimport { NumberStepper } from \"./components/number-stepper/NumberStepper\"\nimport { PageHeader } from \"./components/page-header/PageHeader\"\nimport { Select } from \"./components/select/Select\"\nimport { Sidenav } from \"./components/sidenav/Sidenav\"\nimport { SidenavItem } from \"./components/sidenav/SidenavItem\"\nimport { SidenavSection } from \"./components/sidenav/SidenavSection\"\nimport { TimeField } from \"./components/time-field/TimeField\"\n\nregister(\"ComboBox\", ComboBox)\nregister(\"ComboBoxItem\", ComboBoxItem)\nregister(\"ComboBoxSection\", ComboBoxSection)\nregister(\"DatePicker\", DatePicker)\nregister(\"NumberStepper\", NumberStepper)\nregister(\"PageHeader\", PageHeader)\nregister(\"Select\", Select)\nregister(\"Sidenav\", Sidenav)\nregister(\"SidenavItem\", SidenavItem)\nregister(\"SidenavSection\", SidenavSection)\nregister(\"TimeField\", TimeField)\n"],"names":["register"],"mappings":";;;;;;;;;;;AAgBAA,CAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC;AAC9BA,CAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;AACtCA,CAAQ,CAAC,iBAAiB,EAAE,eAAe,CAAC;AAC5CA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,eAAe,EAAE,aAAa,CAAC;AACxCA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC1BA,CAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;AAC5BA,CAAQ,CAAC,aAAa,EAAE,WAAW,CAAC;AACpCA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC;AAC1CA,CAAQ,CAAC,WAAW,EAAE,SAAS,CAAC"}
+{"version":3,"file":"componentRegistration.js","sources":["../src/componentRegistration.ts"],"sourcesContent":["import { register } from \"@planningcenter/tapestry-render/registry\"\n\nimport { DropdownButton } from \"./components/button/DropdownButton\"\nimport { DropdownIconButton } from \"./components/button/DropdownIconButton\"\nimport { PageHeaderActionsDropdownButton } from \"./components/button/PageHeaderActionsDropdownButton\"\nimport {\n  ComboBox,\n  ComboBoxItem,\n  ComboBoxSection,\n} from \"./components/combo-box/ComboBox\"\nimport { DatePicker } from \"./components/date-picker/DatePicker\"\nimport {\n  Dropdown,\n  DropdownAction,\n  DropdownLink,\n  DropdownMenu,\n  DropdownSection,\n  DropdownSeparator,\n  DropdownTrigger,\n} from \"./components/dropdown/Dropdown\"\nimport { NumberStepper } from \"./components/number-stepper/NumberStepper\"\nimport { PageHeader } from \"./components/page-header/PageHeader\"\nimport { Select } from \"./components/select/Select\"\nimport { Sidenav } from \"./components/sidenav/Sidenav\"\nimport { SidenavItem } from \"./components/sidenav/SidenavItem\"\nimport { SidenavSection } from \"./components/sidenav/SidenavSection\"\nimport { TimeField } from \"./components/time-field/TimeField\"\n\nregister(\"ComboBox\", ComboBox)\nregister(\"ComboBoxItem\", ComboBoxItem)\nregister(\"ComboBoxSection\", ComboBoxSection)\nregister(\"DatePicker\", DatePicker)\nregister(\"Dropdown\", Dropdown)\nregister(\"DropdownAction\", DropdownAction)\nregister(\"DropdownButton\", DropdownButton)\nregister(\"DropdownIconButton\", DropdownIconButton)\nregister(\"DropdownLink\", DropdownLink)\nregister(\"DropdownMenu\", DropdownMenu)\nregister(\"DropdownSection\", DropdownSection)\nregister(\"DropdownSeparator\", DropdownSeparator)\nregister(\"DropdownTrigger\", DropdownTrigger)\nregister(\"NumberStepper\", NumberStepper)\nregister(\"PageHeader\", PageHeader)\nregister(\"PageHeaderActionsDropdownButton\", PageHeaderActionsDropdownButton)\nregister(\"Select\", Select)\nregister(\"Sidenav\", Sidenav)\nregister(\"SidenavItem\", SidenavItem)\nregister(\"SidenavSection\", SidenavSection)\nregister(\"TimeField\", TimeField)\n"],"names":["register"],"mappings":";;;;;;;;;;;;;;;AA4BAA,CAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC;AAC9BA,CAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;AACtCA,CAAQ,CAAC,iBAAiB,EAAE,eAAe,CAAC;AAC5CA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC;AAC9BA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC;AAC1CA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC;AAC1CA,CAAQ,CAAC,oBAAoB,EAAE,kBAAkB,CAAC;AAClDA,CAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;AACtCA,CAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;AACtCA,CAAQ,CAAC,iBAAiB,EAAE,eAAe,CAAC;AAC5CA,CAAQ,CAAC,mBAAmB,EAAE,iBAAiB,CAAC;AAChDA,CAAQ,CAAC,iBAAiB,EAAE,eAAe,CAAC;AAC5CA,CAAQ,CAAC,eAAe,EAAE,aAAa,CAAC;AACxCA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,iCAAiC,EAAE,+BAA+B,CAAC;AAC5EA,CAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC1BA,CAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;AAC5BA,CAAQ,CAAC,aAAa,EAAE,WAAW,CAAC;AACpCA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC;AAC1CA,CAAQ,CAAC,WAAW,EAAE,SAAS,CAAC"}

package/dist/components/button/BaseButton.js

@@ -3,7 +3,7 @@ import '../internal/tooltip/Tooltip.js';
 import { TooltipTriggerContext } from '../internal/tooltip/TooltipTriggerContext.js';
 import { COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP, wrapStringWithSpan } from '../../utilities/buttonLinkShared.js';
 import classNames from 'classnames';
-import React__default, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { mergeProps } from 'react-aria/mergeProps';
 import { mergeRefs } from 'react-aria/mergeRefs';
 
@@ -19,10 +19,10 @@ const BaseButton = forwardRef(({ "aria-describedby": ariaDescribedBy, "aria-labe
     const describedBy = [ariaDescribedBy, tooltipId].filter(Boolean).join(" ") || undefined;
     const combinedClassName = classNames(kind && "tds-btn", size && size !== "md" && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", loading && "tds-btn--loading", className, { "tds-btn--prefix": prefix, "tds-btn--suffix": suffix });
     const isDisabled = disabled || loading;
-    return (React__default.createElement("button", { type: "button", className: combinedClassName, ref: mergedRef, ...mergedProps, "aria-busy": loading || undefined, "aria-describedby": describedBy, "aria-disabled": isDisabled || undefined, disabled: isDisabled, "aria-label": loading ? loadingAriaLabel : ariaLabel },
-        loading && React__default.createElement(LoadingSpinner, null),
+    return (React.createElement("button", { type: "button", className: combinedClassName, ref: mergedRef, ...mergedProps, "aria-busy": loading || undefined, "aria-describedby": describedBy, "aria-disabled": isDisabled || undefined, disabled: isDisabled, "aria-label": loading ? loadingAriaLabel : ariaLabel },
+        loading && React.createElement(LoadingSpinner, null),
         wrapStringWithSpan(prefix),
-        loading ? React__default.createElement("span", null, label) : label,
+        loading ? React.createElement("span", null, label) : label,
         wrapStringWithSpan(suffix)));
 });
 BaseButton.displayName = "BaseButton";

package/dist/components/button/BaseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport { LoadingSpinner } from \"@components/internal\"\nimport { TooltipTriggerContext } from \"@components/internal/tooltip/TooltipTriggerContext\"\nimport {\n  BaseComponentProps,\n  COMPONENT_KIND_CLASS_MAP,\n  COMPONENT_SIZE_CLASS_MAP,\n  ComponentKind,\n  wrapStringWithSpan,\n} from \"@utilities/buttonLinkShared\"\nimport classNames from \"classnames\"\nimport React, { ButtonHTMLAttributes, forwardRef, useContext } from \"react\"\nimport { mergeProps } from \"react-aria/mergeProps\"\nimport { mergeRefs } from \"react-aria/mergeRefs\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n  /** The visual style of the button. */\n  kind?: ComponentKind\n  /** The text content of the button. */\n  label: React.ReactNode\n  /** Whether the button is in a loading state. When true, the button is disabled and shows a loading spinner. */\n  loading?: boolean\n  /** Accessible label to use when the button is in loading state. */\n  loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  keyof BaseButtonProps | \"children\"\n> &\n  BaseButtonProps\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n  (\n    {\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-label\": ariaLabel,\n      className,\n      disabled = false,\n      fullWidth,\n      kind = \"secondary\",\n      label,\n      loading = false,\n      loadingAriaLabel = \"Loading...\",\n      prefix,\n      size,\n      suffix,\n      ...restProps\n    }: BaseButtonElementProps,\n    ref\n  ) => {\n    const tooltip = useContext(TooltipTriggerContext)\n    const { \"aria-describedby\": tooltipId, ...tooltipTriggerProps } =\n      tooltip?.triggerProps ?? {}\n\n    const mergedProps = tooltip\n      ? mergeProps(restProps, tooltipTriggerProps)\n      : restProps\n    const mergedRef = tooltip\n      ? mergeRefs<HTMLButtonElement>(ref, tooltip.ref)\n      : ref\n    const describedBy =\n      [ariaDescribedBy, tooltipId].filter(Boolean).join(\" \") || undefined\n\n    const combinedClassName = classNames(\n      kind && \"tds-btn\",\n      size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n      kind && COMPONENT_KIND_CLASS_MAP[kind],\n      fullWidth && \"tds-btn--full-width\",\n      loading && \"tds-btn--loading\",\n      className,\n      { \"tds-btn--prefix\": prefix, \"tds-btn--suffix\": suffix }\n    )\n\n    const isDisabled = disabled || loading\n\n    return (\n      <button\n        type=\"button\"\n        className={combinedClassName}\n        ref={mergedRef}\n        {...mergedProps}\n        aria-busy={loading || undefined}\n        aria-describedby={describedBy}\n        aria-disabled={isDisabled || undefined}\n        disabled={isDisabled}\n        aria-label={loading ? loadingAriaLabel : ariaLabel}\n      >\n        {loading && <LoadingSpinner />}\n        {wrapStringWithSpan(prefix)}\n        {loading ? <span>{label}</span> : label}\n        {wrapStringWithSpan(suffix)}\n      </button>\n    )\n  }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":["React"],"mappings":";;;;;;;;;MAiCa,UAAU,GAAG,UAAU,CAClC,CACE,EACE,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACW,EACzB,GAAG,KACD;AACF,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,CAAC;AACjD,IAAA,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,GAC7D,OAAO,EAAE,YAAY,IAAI,EAAE;IAE7B,MAAM,WAAW,GAAG;AAClB,UAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB;UACzC,SAAS;IACb,MAAM,SAAS,GAAG;UACd,SAAS,CAAoB,GAAG,EAAE,OAAO,CAAC,GAAG;UAC7C,GAAG;AACP,IAAA,MAAM,WAAW,GACf,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS;IAErE,MAAM,iBAAiB,GAAG,UAAU,CAClC,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,SAAS,EACT,EAAE,iBAAiB,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,CACzD;AAED,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO;AAEtC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,SAAS,KACV,WAAW,EAAA,WAAA,EACJ,OAAO,IAAI,SAAS,EAAA,kBAAA,EACb,WAAW,mBACd,UAAU,IAAI,SAAS,EACtC,QAAQ,EAAE,UAAU,EAAA,YAAA,EACR,OAAO,GAAG,gBAAgB,GAAG,SAAS,EAAA;QAEjD,OAAO,IAAIA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG;QAC7B,kBAAkB,CAAC,MAAM,CAAC;QAC1B,OAAO,GAAGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;AACtC,QAAA,kBAAkB,CAAC,MAAM,CAAC,CACpB;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport { LoadingSpinner } from \"@components/internal\"\nimport { TooltipTriggerContext } from \"@components/internal/tooltip/TooltipTriggerContext\"\nimport {\n  BaseComponentProps,\n  COMPONENT_KIND_CLASS_MAP,\n  COMPONENT_SIZE_CLASS_MAP,\n  ComponentKind,\n  wrapStringWithSpan,\n} from \"@utilities/buttonLinkShared\"\nimport classNames from \"classnames\"\nimport React, { ButtonHTMLAttributes, forwardRef, useContext } from \"react\"\nimport { mergeProps } from \"react-aria/mergeProps\"\nimport { mergeRefs } from \"react-aria/mergeRefs\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n  /** The visual style of the button. */\n  kind?: ComponentKind\n  /** The text content of the button. */\n  label: React.ReactNode\n  /** Whether the button is in a loading state. When true, the button is disabled and shows a loading spinner. */\n  loading?: boolean\n  /** Accessible label to use when the button is in loading state. */\n  loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  keyof BaseButtonProps | \"children\"\n> &\n  BaseButtonProps\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n  (\n    {\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-label\": ariaLabel,\n      className,\n      disabled = false,\n      fullWidth,\n      kind = \"secondary\",\n      label,\n      loading = false,\n      loadingAriaLabel = \"Loading...\",\n      prefix,\n      size,\n      suffix,\n      ...restProps\n    }: BaseButtonElementProps,\n    ref\n  ) => {\n    const tooltip = useContext(TooltipTriggerContext)\n    const { \"aria-describedby\": tooltipId, ...tooltipTriggerProps } =\n      tooltip?.triggerProps ?? {}\n\n    const mergedProps = tooltip\n      ? mergeProps(restProps, tooltipTriggerProps)\n      : restProps\n    const mergedRef = tooltip\n      ? mergeRefs<HTMLButtonElement>(ref, tooltip.ref)\n      : ref\n    const describedBy =\n      [ariaDescribedBy, tooltipId].filter(Boolean).join(\" \") || undefined\n\n    const combinedClassName = classNames(\n      kind && \"tds-btn\",\n      size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n      kind && COMPONENT_KIND_CLASS_MAP[kind],\n      fullWidth && \"tds-btn--full-width\",\n      loading && \"tds-btn--loading\",\n      className,\n      { \"tds-btn--prefix\": prefix, \"tds-btn--suffix\": suffix }\n    )\n\n    const isDisabled = disabled || loading\n\n    return (\n      <button\n        type=\"button\"\n        className={combinedClassName}\n        ref={mergedRef}\n        {...mergedProps}\n        aria-busy={loading || undefined}\n        aria-describedby={describedBy}\n        aria-disabled={isDisabled || undefined}\n        disabled={isDisabled}\n        aria-label={loading ? loadingAriaLabel : ariaLabel}\n      >\n        {loading && <LoadingSpinner />}\n        {wrapStringWithSpan(prefix)}\n        {loading ? <span>{label}</span> : label}\n        {wrapStringWithSpan(suffix)}\n      </button>\n    )\n  }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":[],"mappings":";;;;;;;;;MAiCa,UAAU,GAAG,UAAU,CAClC,CACE,EACE,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACW,EACzB,GAAG,KACD;AACF,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,CAAC;AACjD,IAAA,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,GAC7D,OAAO,EAAE,YAAY,IAAI,EAAE;IAE7B,MAAM,WAAW,GAAG;AAClB,UAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB;UACzC,SAAS;IACb,MAAM,SAAS,GAAG;UACd,SAAS,CAAoB,GAAG,EAAE,OAAO,CAAC,GAAG;UAC7C,GAAG;AACP,IAAA,MAAM,WAAW,GACf,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS;IAErE,MAAM,iBAAiB,GAAG,UAAU,CAClC,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,SAAS,EACT,EAAE,iBAAiB,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,CACzD;AAED,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO;AAEtC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,SAAS,KACV,WAAW,EAAA,WAAA,EACJ,OAAO,IAAI,SAAS,EAAA,kBAAA,EACb,WAAW,mBACd,UAAU,IAAI,SAAS,EACtC,QAAQ,EAAE,UAAU,EAAA,YAAA,EACR,OAAO,GAAG,gBAAgB,GAAG,SAAS,EAAA;QAEjD,OAAO,IAAI,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG;QAC7B,kBAAkB,CAAC,MAAM,CAAC;QAC1B,OAAO,GAAG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;AACtC,QAAA,kBAAkB,CAAC,MAAM,CAAC,CACpB;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/button/DropdownButton.js

@@ -1,13 +1,13 @@
 import { DropdownTriggerContext } from '../dropdown/DropdownTriggerContext.js';
 import Icon from '../../utilities/Icon.js';
 import classNames from 'classnames';
-import React__default, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { BaseButton } from './BaseButton.js';
 
 function dropdownProps({ className }) {
     return {
         className: classNames(className, "tds-btn--dropdown"),
-        suffix: React__default.createElement(Icon, { className: "suffix", symbol: "general#down-caret", "aria-hidden": true }),
+        suffix: React.createElement(Icon, { className: "suffix", symbol: "general#down-caret", "aria-hidden": true }),
     };
 }
 /**
@@ -20,7 +20,7 @@ function dropdownProps({ className }) {
  */
 const DropdownButton = forwardRef((props, ref) => {
     const contextProps = useContext(DropdownTriggerContext);
-    return (React__default.createElement(BaseButton, { ref: ref, ...props, ...contextProps, ...dropdownProps(props) }));
+    return (React.createElement(BaseButton, { ref: ref, ...props, ...contextProps, ...dropdownProps(props) }));
 });
 DropdownButton.displayName = "DropdownButton";
 

package/dist/components/button/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport { DropdownTriggerContext } from \"@components/dropdown/DropdownTriggerContext\"\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, useContext } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n  /**\n   * ID of the element controlled by this dropdown button. Optional when wrapped\n   * in `<DropdownTrigger>` (RA's `<Pressable>` injects it from\n   * `PressResponderContext`); required when used standalone to drive a custom popover.\n   */\n  \"aria-controls\"?: string\n  /**\n   * Whether the dropdown is expanded or not. Optional when wrapped in\n   * `<DropdownTrigger>`; required when used standalone.\n   */\n  \"aria-expanded\"?: boolean\n  suffix?: never\n}\n\nexport function dropdownProps({ className }: { className?: string }) {\n  return {\n    className: classNames(className, \"tds-btn--dropdown\"),\n    suffix: <Icon className=\"suffix\" symbol=\"general#down-caret\" aria-hidden />,\n  }\n}\n\n/**\n * A button that toggles a dropdown menu or popover. Appends a caret suffix\n * and wires up `aria-controls` and `aria-expanded` to the controlled element.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-button--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const DropdownButton = forwardRef<\n  HTMLButtonElement,\n  BaseButtonElementProps & DropdownButtonProps\n>((props, ref) => {\n  const contextProps = useContext(DropdownTriggerContext)\n  return (\n    <BaseButton\n      ref={ref}\n      {...props}\n      {...contextProps}\n      {...dropdownProps(props)}\n    />\n  )\n})\n\nDropdownButton.displayName = \"DropdownButton\"\n"],"names":["React"],"mappings":";;;;;;AAwBM,SAAU,aAAa,CAAC,EAAE,SAAS,EAA0B,EAAA;IACjE,OAAO;AACL,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC;QACrD,MAAM,EAAEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAC,MAAM,EAAC,oBAAoB,EAAA,aAAA,EAAA,IAAA,EAAA,CAAe;KAC5E;AACH;AAEA;;;;;;;AAOG;AACI,MAAM,cAAc,GAAG,UAAU,CAGtC,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,sBAAsB,CAAC;AACvD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,IACT,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EAAA,GACL,YAAY,KACZ,aAAa,CAAC,KAAK,CAAC,EAAA,CACxB;AAEN,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport { DropdownTriggerContext } from \"@components/dropdown/DropdownTriggerContext\"\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, useContext } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n  /**\n   * ID of the element controlled by this dropdown button. Optional when wrapped\n   * in `<DropdownTrigger>` (RA's `<Pressable>` injects it from\n   * `PressResponderContext`); required when used standalone to drive a custom popover.\n   */\n  \"aria-controls\"?: string\n  /**\n   * Whether the dropdown is expanded or not. Optional when wrapped in\n   * `<DropdownTrigger>`; required when used standalone.\n   */\n  \"aria-expanded\"?: boolean\n  suffix?: never\n}\n\nexport function dropdownProps({ className }: { className?: string }) {\n  return {\n    className: classNames(className, \"tds-btn--dropdown\"),\n    suffix: <Icon className=\"suffix\" symbol=\"general#down-caret\" aria-hidden />,\n  }\n}\n\n/**\n * A button that toggles a dropdown menu or popover. Appends a caret suffix\n * and wires up `aria-controls` and `aria-expanded` to the controlled element.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-button--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const DropdownButton = forwardRef<\n  HTMLButtonElement,\n  BaseButtonElementProps & DropdownButtonProps\n>((props, ref) => {\n  const contextProps = useContext(DropdownTriggerContext)\n  return (\n    <BaseButton\n      ref={ref}\n      {...props}\n      {...contextProps}\n      {...dropdownProps(props)}\n    />\n  )\n})\n\nDropdownButton.displayName = \"DropdownButton\"\n"],"names":[],"mappings":";;;;;;AAwBM,SAAU,aAAa,CAAC,EAAE,SAAS,EAA0B,EAAA;IACjE,OAAO;AACL,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC;QACrD,MAAM,EAAE,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAC,MAAM,EAAC,oBAAoB,EAAA,aAAA,EAAA,IAAA,EAAA,CAAe;KAC5E;AACH;AAEA;;;;;;;AAOG;AACI,MAAM,cAAc,GAAG,UAAU,CAGtC,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,sBAAsB,CAAC;AACvD,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,UAAU,IACT,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EAAA,GACL,YAAY,KACZ,aAAa,CAAC,KAAK,CAAC,EAAA,CACxB;AAEN,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/dist/components/button/DropdownIconButton.js

@@ -1,5 +1,5 @@
 import { DropdownTriggerContext } from '../dropdown/DropdownTriggerContext.js';
-import React__default, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { dropdownProps } from './DropdownButton.js';
 import { IconButton } from './IconButton.js';
 
@@ -14,7 +14,7 @@ import { IconButton } from './IconButton.js';
  */
 const DropdownIconButton = forwardRef((props, ref) => {
     const contextProps = useContext(DropdownTriggerContext);
-    return (React__default.createElement(IconButton, { ref: ref, ...props, ...contextProps, ...dropdownProps(props) }));
+    return (React.createElement(IconButton, { ref: ref, ...props, ...contextProps, ...dropdownProps(props) }));
 });
 DropdownIconButton.displayName = "DropdownIconButton";
 

package/dist/components/button/DropdownIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownIconButton.js","sources":["../../../src/components/button/DropdownIconButton.tsx"],"sourcesContent":["import { DropdownTriggerContext } from \"@components/dropdown/DropdownTriggerContext\"\nimport React, { forwardRef, useContext } from \"react\"\n\nimport { DropdownButtonProps, dropdownProps } from \"./DropdownButton\"\nimport { IconButton, IconButtonProps } from \"./IconButton\"\n\n/**\n * An icon-only button that toggles a dropdown menu or popover. Appends a\n * caret suffix to the icon and wires up `aria-controls` and `aria-expanded`\n * to the controlled element. Requires an `aria-label` for accessibility.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-icon-button--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const DropdownIconButton = forwardRef<\n  HTMLButtonElement,\n  IconButtonProps & DropdownButtonProps\n>((props, ref) => {\n  const contextProps = useContext(DropdownTriggerContext)\n  return (\n    <IconButton\n      ref={ref}\n      {...props}\n      {...contextProps}\n      {...dropdownProps(props)}\n    />\n  )\n})\n\nDropdownIconButton.displayName = \"DropdownIconButton\"\n"],"names":["React"],"mappings":";;;;;AAMA;;;;;;;;AAQG;AACI,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,sBAAsB,CAAC;AACvD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,IACT,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EAAA,GACL,YAAY,KACZ,aAAa,CAAC,KAAK,CAAC,EAAA,CACxB;AAEN,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
+{"version":3,"file":"DropdownIconButton.js","sources":["../../../src/components/button/DropdownIconButton.tsx"],"sourcesContent":["import { DropdownTriggerContext } from \"@components/dropdown/DropdownTriggerContext\"\nimport React, { forwardRef, useContext } from \"react\"\n\nimport { DropdownButtonProps, dropdownProps } from \"./DropdownButton\"\nimport { IconButton, IconButtonProps } from \"./IconButton\"\n\n/**\n * An icon-only button that toggles a dropdown menu or popover. Appends a\n * caret suffix to the icon and wires up `aria-controls` and `aria-expanded`\n * to the controlled element. Requires an `aria-label` for accessibility.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-icon-button--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const DropdownIconButton = forwardRef<\n  HTMLButtonElement,\n  IconButtonProps & DropdownButtonProps\n>((props, ref) => {\n  const contextProps = useContext(DropdownTriggerContext)\n  return (\n    <IconButton\n      ref={ref}\n      {...props}\n      {...contextProps}\n      {...dropdownProps(props)}\n    />\n  )\n})\n\nDropdownIconButton.displayName = \"DropdownIconButton\"\n"],"names":[],"mappings":";;;;;AAMA;;;;;;;;AAQG;AACI,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,sBAAsB,CAAC;AACvD,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,UAAU,IACT,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EAAA,GACL,YAAY,KACZ,aAAa,CAAC,KAAK,CAAC,EAAA,CACxB;AAEN,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}

package/dist/components/button/IconButton.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React__default, { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { BaseButton } from './BaseButton.js';
 
 /**
@@ -12,7 +12,7 @@ import { BaseButton } from './BaseButton.js';
  */
 const IconButton = forwardRef(({ className, icon, ...restProps }, ref) => {
     const iconOnlyClassName = classNames("tds-btn--icononly", className);
-    return (React__default.createElement(BaseButton, { ...restProps, label: icon, className: iconOnlyClassName, ref: ref }));
+    return (React.createElement(BaseButton, { ...restProps, label: icon, className: iconOnlyClassName, ref: ref }));
 });
 IconButton.displayName = "IconButton";
 

package/dist/components/button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type IconButtonProps = Omit<BaseButtonElementProps, \"label\"> & {\n  /** Accessible label. Required for icon-only buttons to provide context about the button's purpose. */\n  \"aria-label\": string\n  /** The icon to display in the button. Set via story args for non-primitive values. */\n  icon: React.ReactNode\n}\n\n/**\n * An icon-only button component that renders as a button element.\n * Requires an icon and aria-label for accessibility.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-icon-button--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, icon, ...restProps }: IconButtonProps, ref) => {\n    const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n    return (\n      <BaseButton\n        {...restProps}\n        label={icon}\n        className={iconOnlyClassName}\n        ref={ref}\n      />\n    )\n  }\n)\n\nIconButton.displayName = \"IconButton\"\n"],"names":["React"],"mappings":";;;;AAcA;;;;;;;AAOG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,SAAS,EAAmB,EAAE,GAAG,KAAI;IAC1D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;AAEpE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,OACL,SAAS,EACb,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type IconButtonProps = Omit<BaseButtonElementProps, \"label\"> & {\n  /** Accessible label. Required for icon-only buttons to provide context about the button's purpose. */\n  \"aria-label\": string\n  /** The icon to display in the button. Set via story args for non-primitive values. */\n  icon: React.ReactNode\n}\n\n/**\n * An icon-only button component that renders as a button element.\n * Requires an icon and aria-label for accessibility.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-icon-button--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, icon, ...restProps }: IconButtonProps, ref) => {\n    const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n    return (\n      <BaseButton\n        {...restProps}\n        label={icon}\n        className={iconOnlyClassName}\n        ref={ref}\n      />\n    )\n  }\n)\n\nIconButton.displayName = \"IconButton\"\n"],"names":[],"mappings":";;;;AAcA;;;;;;;AAOG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,SAAS,EAAmB,EAAE,GAAG,KAAI;IAC1D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;AAEpE,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,UAAU,OACL,SAAS,EACb,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/button/PageHeaderActionsDropdownButton.js

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
-import React__default, { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { DropdownButton } from './DropdownButton.js';
 
 function needsAttentionProps({ className, needsAttention, }) {
     return needsAttention
         ? {
             className: classNames(className, "tds-btn--attention"),
-            prefix: (React__default.createElement("span", { className: "attention-icon", "aria-label": "Needs attention!" })),
+            prefix: (React.createElement("span", { className: "attention-icon", "aria-label": "Needs attention!" })),
         }
         : {
             className,
@@ -21,7 +21,7 @@ function needsAttentionProps({ className, needsAttention, }) {
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-page-header-actions-dropdown-button--docs | Storybook Documentation}
  */
 const PageHeaderActionsDropdownButton = forwardRef(({ className, needsAttention, ...props }, ref) => {
-    return (React__default.createElement(DropdownButton, { ref: ref, ...props, kind: "secondary-page-header", ...needsAttentionProps({ className, needsAttention }) }));
+    return (React.createElement(DropdownButton, { ref: ref, ...props, kind: "secondary-page-header", ...needsAttentionProps({ className, needsAttention }) }));
 });
 PageHeaderActionsDropdownButton.displayName = "PageHeaderActionsDropdownButton";
 

package/dist/components/button/PageHeaderActionsDropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButtonElementProps } from \"./BaseButton\"\nimport { DropdownButton, DropdownButtonProps } from \"./DropdownButton\"\n\nexport type PageHeaderActionsDropdownButtonProps = Omit<\n  BaseButtonElementProps,\n  \"kind\"\n> &\n  DropdownButtonProps & {\n    /** Whether the button needs attention. Adds warning styling and attention icon when true. */\n    needsAttention?: boolean\n  }\n\nexport function needsAttentionProps({\n  className,\n  needsAttention,\n}: {\n  className?: string\n  needsAttention?: boolean\n}) {\n  return needsAttention\n    ? {\n        className: classNames(className, \"tds-btn--attention\"),\n        prefix: (\n          <span className=\"attention-icon\" aria-label=\"Needs attention!\" />\n        ),\n      }\n    : {\n        className,\n      }\n}\n\n/**\n * A dropdown button styled for the page header actions area. Renders with\n * the `secondary-page-header` kind and supports an optional `needsAttention`\n * state that adds warning styling and an attention icon.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-page-header-actions-dropdown-button--docs | Storybook Documentation}\n */\nexport const PageHeaderActionsDropdownButton = forwardRef<\n  HTMLButtonElement,\n  PageHeaderActionsDropdownButtonProps\n>(\n  (\n    {\n      className,\n      needsAttention,\n      ...props\n    }: PageHeaderActionsDropdownButtonProps,\n    ref\n  ) => {\n    return (\n      <DropdownButton\n        ref={ref}\n        {...props}\n        kind=\"secondary-page-header\"\n        {...needsAttentionProps({ className, needsAttention })}\n      />\n    )\n  }\n)\n\nPageHeaderActionsDropdownButton.displayName = \"PageHeaderActionsDropdownButton\"\n"],"names":["React"],"mappings":";;;;SAiBgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GAIf,EAAA;AACC,IAAA,OAAO;AACL,UAAE;AACE,YAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACtD,MAAM,GACJA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,YAAA,EAAY,kBAAkB,EAAA,CAAG,CAClE;AACF;AACH,UAAE;YACE,SAAS;SACV;AACP;AAEA;;;;;;;AAOG;AACI,MAAM,+BAA+B,GAAG,UAAU,CAIvD,CACE,EACE,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EAC6B,EACvC,GAAG,KACD;IACF,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,IAAI,EAAC,uBAAuB,EAAA,GACxB,mBAAmB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,EAAA,CACtD;AAEN,CAAC;AAGH,+BAA+B,CAAC,WAAW,GAAG,iCAAiC;;;;"}
+{"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButtonElementProps } from \"./BaseButton\"\nimport { DropdownButton, DropdownButtonProps } from \"./DropdownButton\"\n\nexport type PageHeaderActionsDropdownButtonProps = Omit<\n  BaseButtonElementProps,\n  \"kind\"\n> &\n  DropdownButtonProps & {\n    /** Whether the button needs attention. Adds warning styling and attention icon when true. */\n    needsAttention?: boolean\n  }\n\nexport function needsAttentionProps({\n  className,\n  needsAttention,\n}: {\n  className?: string\n  needsAttention?: boolean\n}) {\n  return needsAttention\n    ? {\n        className: classNames(className, \"tds-btn--attention\"),\n        prefix: (\n          <span className=\"attention-icon\" aria-label=\"Needs attention!\" />\n        ),\n      }\n    : {\n        className,\n      }\n}\n\n/**\n * A dropdown button styled for the page header actions area. Renders with\n * the `secondary-page-header` kind and supports an optional `needsAttention`\n * state that adds warning styling and an attention icon.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-page-header-actions-dropdown-button--docs | Storybook Documentation}\n */\nexport const PageHeaderActionsDropdownButton = forwardRef<\n  HTMLButtonElement,\n  PageHeaderActionsDropdownButtonProps\n>(\n  (\n    {\n      className,\n      needsAttention,\n      ...props\n    }: PageHeaderActionsDropdownButtonProps,\n    ref\n  ) => {\n    return (\n      <DropdownButton\n        ref={ref}\n        {...props}\n        kind=\"secondary-page-header\"\n        {...needsAttentionProps({ className, needsAttention })}\n      />\n    )\n  }\n)\n\nPageHeaderActionsDropdownButton.displayName = \"PageHeaderActionsDropdownButton\"\n"],"names":[],"mappings":";;;;SAiBgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GAIf,EAAA;AACC,IAAA,OAAO;AACL,UAAE;AACE,YAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACtD,MAAM,GACJ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,YAAA,EAAY,kBAAkB,EAAA,CAAG,CAClE;AACF;AACH,UAAE;YACE,SAAS;SACV;AACP;AAEA;;;;;;;AAOG;AACI,MAAM,+BAA+B,GAAG,UAAU,CAIvD,CACE,EACE,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EAC6B,EACvC,GAAG,KACD;IACF,QACE,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,IAAI,EAAC,uBAAuB,EAAA,GACxB,mBAAmB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,EAAA,CACtD;AAEN,CAAC;AAGH,+BAA+B,CAAC,WAAW,GAAG,iCAAiC;;;;"}

package/dist/components/dropdown/Dropdown.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React__default from 'react';
+import React from 'react';
 import { MenuTrigger, MenuItem, Popover, Menu, MenuSection, Header, Separator, Pressable } from 'react-aria-components/Menu';
 import { DropdownTriggerContext } from './DropdownTriggerContext.js';
 
@@ -31,7 +31,7 @@ function Dropdown({ children, onClose, onOpen }) {
         else
             onClose?.();
     };
-    return React__default.createElement(MenuTrigger, { onOpenChange: handleOpenChange }, children);
+    return React.createElement(MenuTrigger, { onOpenChange: handleOpenChange }, children);
 }
 /**
  * The popover surface for a `<Dropdown>`. Wraps React Aria's `<Popover>` and
@@ -40,12 +40,12 @@ function Dropdown({ children, onClose, onOpen }) {
  * @component
  */
 function DropdownMenu({ children, id, placement = "bottom start", }) {
-    return (React__default.createElement(Popover, { className: "tds-dropdown-popover", placement: placement },
-        React__default.createElement(Menu, { id: id }, children)));
+    return (React.createElement(Popover, { className: "tds-dropdown-popover", placement: placement },
+        React.createElement(Menu, { id: id }, children)));
 }
 function DropdownTrigger({ children, disabled }) {
-    return (React__default.createElement(DropdownTriggerContext.Provider, { value: { disabled } },
-        React__default.createElement(Pressable, { isDisabled: disabled }, children)));
+    return (React.createElement(DropdownTriggerContext.Provider, { value: { disabled } },
+        React.createElement(Pressable, { isDisabled: disabled }, children)));
 }
 /**
  * A `<Dropdown>` item that fires a callback when activated. Renders an RA
@@ -56,7 +56,7 @@ function DropdownTrigger({ children, disabled }) {
  * @component
  */
 function DropdownAction({ className, destructive, disabled, staffOnly, ...restProps }) {
-    return (React__default.createElement(MenuItem, { ...restProps, className: classNames("tds-dropdown-item", {
+    return (React.createElement(MenuItem, { ...restProps, className: classNames("tds-dropdown-item", {
             "tds-dropdown-item--destructive": destructive,
             "tds-dropdown-item--staff-only": staffOnly,
         }, className), isDisabled: disabled }));
@@ -76,7 +76,7 @@ function DropdownLink({ className, destructive, external, staffOnly, ...restProp
     const externalProps = external
         ? { rel: "noreferrer noopener", target: "_blank" }
         : null;
-    return (React__default.createElement(MenuItem, { ...restProps, ...externalProps, className: classNames("tds-dropdown-item", {
+    return (React.createElement(MenuItem, { ...restProps, ...externalProps, className: classNames("tds-dropdown-item", {
             "tds-dropdown-item--destructive": destructive,
             "tds-dropdown-item--staff-only": staffOnly,
         }, className) }));
@@ -88,8 +88,8 @@ function DropdownLink({ className, destructive, external, staffOnly, ...restProp
  * @component
  */
 function DropdownSection({ children, className, title, ...restProps }) {
-    return (React__default.createElement(MenuSection, { ...restProps, className: classNames("tds-dropdown-section", className) },
-        React__default.createElement(Header, { className: "tds-dropdown-section-label" }, title),
+    return (React.createElement(MenuSection, { ...restProps, className: classNames("tds-dropdown-section", className) },
+        React.createElement(Header, { className: "tds-dropdown-section-label" }, title),
         children));
 }
 /**
@@ -99,7 +99,7 @@ function DropdownSection({ children, className, title, ...restProps }) {
  * @component
  */
 function DropdownSeparator() {
-    return React__default.createElement(Separator, { className: "tds-dropdown-separator" });
+    return React.createElement(Separator, { className: "tds-dropdown-separator" });
 }
 
 export { Dropdown, DropdownAction, DropdownLink, DropdownMenu, DropdownSection, DropdownSeparator, DropdownTrigger };

package/dist/components/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, {\n  type ComponentProps,\n  type ReactElement,\n  type ReactNode,\n} from \"react\"\nimport type {\n  Key,\n  MenuItemProps,\n  MenuSectionProps,\n  PopoverProps,\n} from \"react-aria-components\"\nimport {\n  Header,\n  Menu,\n  MenuItem,\n  MenuSection,\n  MenuTrigger,\n  Popover,\n  Pressable,\n  Separator,\n} from \"react-aria-components/Menu\"\n\nimport { DropdownTriggerContext } from \"./DropdownTriggerContext\"\n\nexport type DropdownPlacement = NonNullable<PopoverProps[\"placement\"]>\n\nexport interface DropdownProps {\n  /**\n   * A `<DropdownTrigger>` followed by a `<DropdownMenu>` containing the items.\n   */\n  children: ReactNode\n  /** Fires when the menu closes. */\n  onClose?: () => void\n  /** Fires when the menu opens. Useful for analytics or lazy data prep. */\n  onOpen?: () => void\n}\n\nexport type DropdownElementProps = DropdownProps\n\n/**\n * An action menu — a button that, when activated, reveals a list of actions or\n * navigation links. Composed of a `<DropdownTrigger>` wrapping a Tapestry\n * dropdown-trigger button (`DropdownButton`, `DropdownIconButton`, or\n * `PageHeaderActionsDropdownButton`) and a `<DropdownMenu>` containing\n * `<DropdownAction>`, `<DropdownLink>`, `<DropdownSection>`, and\n * `<DropdownSeparator>` items.\n *\n * **Dropdown vs Select.** Use `Dropdown` to trigger an action (\"Edit\",\n * \"Delete\") or navigate (\"Go to documentation\"). Use `Select` to collect a\n * value that is bound to form data or component state. They look visually\n * similar but follow different ARIA patterns (Menu vs Combobox/Listbox) and\n * are not interchangeable.\n *\n * Built on React Aria's `MenuTrigger` primitive; popover positioning and menu\n * identity live on `<DropdownMenu>`.\n *\n * @component\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/menu/ | W3C APG Menu Pattern}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport function Dropdown({ children, onClose, onOpen }: DropdownElementProps) {\n  const handleOpenChange = (isOpen: boolean) => {\n    if (isOpen) onOpen?.()\n    else onClose?.()\n  }\n\n  return <MenuTrigger onOpenChange={handleOpenChange}>{children}</MenuTrigger>\n}\n\nexport interface DropdownMenuProps {\n  /**\n   * `<DropdownAction>` / `<DropdownLink>` / `<DropdownSection>` /\n   * `<DropdownSeparator>` elements.\n   */\n  children: ReactNode\n  /** Override for the underlying `<Menu>` element id. */\n  id?: string\n  /**\n   * Popover position relative to the trigger. Uses React Aria's\n   * space-separated format (e.g., `\"bottom start\"`, `\"top end\"`,\n   * `\"left top\"`). Defaults to `\"bottom start\"`.\n   */\n  placement?: DropdownPlacement\n}\n\nexport type DropdownMenuElementProps = DropdownMenuProps\n\n/**\n * The popover surface for a `<Dropdown>`. Wraps React Aria's `<Popover>` and\n * `<Menu>` and contains the menu items.\n *\n * @component\n */\nexport function DropdownMenu({\n  children,\n  id,\n  placement = \"bottom start\",\n}: DropdownMenuElementProps) {\n  return (\n    <Popover className=\"tds-dropdown-popover\" placement={placement}>\n      <Menu id={id}>{children}</Menu>\n    </Popover>\n  )\n}\n\nexport interface DropdownTriggerProps {\n  /**\n   * A single Tapestry dropdown-trigger button element (`DropdownButton`,\n   * `DropdownIconButton`, or `PageHeaderActionsDropdownButton`).\n   */\n  children: ReactElement\n  /**\n   * Whether the trigger is disabled. This is the single source of truth for the\n   * trigger's disabled state — a `disabled` set directly on the child button\n   * does not win.\n   */\n  disabled?: boolean\n}\n\n/**\n * Wraps a single Tapestry dropdown-trigger button and bridges it to React\n * Aria's `MenuTrigger` via `<Pressable>`.\n * Uses context to pass `disabled` to the trigger button.\n *\n * @component\n */\ntype PressableChild = ComponentProps<typeof Pressable>[\"children\"]\n\nexport function DropdownTrigger({ children, disabled }: DropdownTriggerProps) {\n  return (\n    <DropdownTriggerContext.Provider value={{ disabled }}>\n      <Pressable isDisabled={disabled}>{children as PressableChild}</Pressable>\n    </DropdownTriggerContext.Provider>\n  )\n}\n\nexport interface DropdownItemBaseProps {\n  /** Applies destructive styling. */\n  destructive?: boolean\n  /** Applies staff-only visual treatment. */\n  staffOnly?: boolean\n}\n\nexport interface DropdownActionProps extends DropdownItemBaseProps {\n  /**\n   * Disables the item. Renamed to React Aria's `isDisabled` inside the\n   * wrapper. Disabled items are skipped by keyboard traversal and won't fire\n   * `onAction`.\n   */\n  disabled?: boolean\n  /**\n   * Stable identifier — required by React Aria's collection model for keying\n   * and focus tracking.\n   */\n  id: Key\n  /**\n   * Callback fired when the item is activated.\n   *\n   * React Aria closes the menu and returns focus to the trigger after this\n   * runs, which can override a focus change made here — e.g. focusing a\n   * nearby input. If `onAction` needs to move focus elsewhere, wrap that\n   * part in `queueMicrotask` to defer it until after React Aria's\n   * focus-restore has finished: `queueMicrotask(() => inputRef.current?.focus())`.\n   */\n  onAction: () => void\n}\n\ntype AriaActionPropsToOmit =\n  | \"href\"\n  | \"isDisabled\"\n  | \"rel\"\n  | \"routerOptions\"\n  | \"target\"\n  | \"value\"\ntype AriaActionPropsToInclude = \"textValue\"\n\nexport type DropdownActionElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    MenuItemProps<T>,\n    DropdownActionProps,\n    AriaActionPropsToOmit,\n    AriaActionPropsToInclude\n  >\n\n/**\n * A `<Dropdown>` item that fires a callback when activated. Renders an RA\n * `<MenuItem>` (`role=\"menuitem\"`). Children are passed through and can use\n * the slot convention (`slot=\"label\" | \"prefix\" | \"suffix\" | \"description\"`)\n * for structured content.\n *\n * @component\n */\nexport function DropdownAction<T extends object>({\n  className,\n  destructive,\n  disabled,\n  staffOnly,\n  ...restProps\n}: DropdownActionElementProps<T>) {\n  return (\n    <MenuItem\n      {...restProps}\n      className={classNames(\n        \"tds-dropdown-item\",\n        {\n          \"tds-dropdown-item--destructive\": destructive,\n          \"tds-dropdown-item--staff-only\": staffOnly,\n        },\n        className\n      )}\n      isDisabled={disabled}\n    />\n  )\n}\n\nexport interface DropdownLinkProps extends DropdownItemBaseProps {\n  /** If `true`, sets `target=\"_blank\"` and `rel=\"noreferrer noopener\"`. */\n  external?: boolean\n  /** Destination URL. */\n  href: string\n  /**\n   * Stable identifier — required by React Aria's collection model for keying\n   * and focus tracking.\n   */\n  id: Key\n}\n\ntype AriaLinkPropsToOmit =\n  | \"isDisabled\"\n  | \"onAction\"\n  | \"rel\"\n  | \"target\"\n  | \"value\"\ntype AriaLinkPropsToInclude = \"href\" | \"routerOptions\" | \"textValue\"\n\nexport type DropdownLinkElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    MenuItemProps<T>,\n    DropdownLinkProps,\n    AriaLinkPropsToOmit,\n    AriaLinkPropsToInclude\n  >\n\n/**\n * A `<Dropdown>` item that navigates to a URL. Renders an RA `<MenuItem>` as\n * an anchor (`<a role=\"menuitem\" href=\"…\">`). Pass `external` to open in a\n * new tab with `rel=\"noreferrer noopener\"`.\n *\n * `disabled` is intentionally not accepted — HTML has no native disabled state\n * for anchors, and a \"disabled link\" has no accessible analog. If a link\n * shouldn't be activatable, omit it.\n *\n * @component\n */\nexport function DropdownLink<T extends object>({\n  className,\n  destructive,\n  external,\n  staffOnly,\n  ...restProps\n}: DropdownLinkElementProps<T>) {\n  const externalProps = external\n    ? { rel: \"noreferrer noopener\", target: \"_blank\" as const }\n    : null\n  return (\n    <MenuItem\n      {...restProps}\n      {...externalProps}\n      className={classNames(\n        \"tds-dropdown-item\",\n        {\n          \"tds-dropdown-item--destructive\": destructive,\n          \"tds-dropdown-item--staff-only\": staffOnly,\n        },\n        className\n      )}\n    />\n  )\n}\n\nexport interface DropdownSectionProps {\n  /** The items rendered within the section. */\n  children: ReactNode\n  /**\n   * Heading rendered above the section's items. Required — RA renders the\n   * section as `role=\"group\"` and the heading provides the group's\n   * accessible name via `aria-labelledby`.\n   */\n  title: string\n}\n\nexport type DropdownSectionElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    MenuSectionProps<T>,\n    DropdownSectionProps,\n    \"value\",\n    never\n  >\n\n/**\n * A grouped section within a `<Dropdown>`. Renders an RA `<MenuSection>`\n * (`role=\"group\"`) with an optional `<Header>` heading when `title` is set.\n *\n * @component\n */\nexport function DropdownSection<T extends object>({\n  children,\n  className,\n  title,\n  ...restProps\n}: DropdownSectionElementProps<T>) {\n  return (\n    <MenuSection\n      {...restProps}\n      className={classNames(\"tds-dropdown-section\", className)}\n    >\n      <Header className=\"tds-dropdown-section-label\">{title}</Header>\n      {children}\n    </MenuSection>\n  )\n}\n\nexport type DropdownSeparatorElementProps = Record<string, never>\n\n/**\n * A divider between items in a `<Dropdown>`. Renders an RA `<Separator>`\n * (`role=\"separator\"`).\n *\n * @component\n */\nexport function DropdownSeparator() {\n  return <Separator className=\"tds-dropdown-separator\" />\n}\n"],"names":["React"],"mappings":";;;;;AA2CA;;;;;;;;;;;;;;;;;;;;AAoBG;AACG,SAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAwB,EAAA;AAC1E,IAAA,MAAM,gBAAgB,GAAG,CAAC,MAAe,KAAI;AAC3C,QAAA,IAAI,MAAM;YAAE,MAAM,IAAI;;YACjB,OAAO,IAAI;AAClB,IAAA,CAAC;IAED,OAAOA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,YAAY,EAAE,gBAAgB,EAAA,EAAG,QAAQ,CAAe;AAC9E;AAoBA;;;;;AAKG;AACG,SAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,EAAE,EACF,SAAS,GAAG,cAAc,GACD,EAAA;IACzB,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,sBAAsB,EAAC,SAAS,EAAE,SAAS,EAAA;QAC5DA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,IAAG,QAAQ,CAAQ,CACvB;AAEd;SAyBgB,eAAe,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAwB,EAAA;IAC1E,QACEA,cAAA,CAAA,aAAA,CAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAA;QAClDA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,UAAU,EAAE,QAAQ,IAAG,QAA0B,CAAa,CACzC;AAEtC;AAkDA;;;;;;;AAOG;AACG,SAAU,cAAc,CAAmB,EAC/C,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACkB,EAAA;IAC9B,QACEA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,GACH,SAAS,EACb,SAAS,EAAE,UAAU,CACnB,mBAAmB,EACnB;AACE,YAAA,gCAAgC,EAAE,WAAW;AAC7C,YAAA,+BAA+B,EAAE,SAAS;SAC3C,EACD,SAAS,CACV,EACD,UAAU,EAAE,QAAQ,EAAA,CACpB;AAEN;AA8BA;;;;;;;;;;AAUG;AACG,SAAU,YAAY,CAAmB,EAC7C,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACgB,EAAA;IAC5B,MAAM,aAAa,GAAG;UAClB,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAiB;UACvD,IAAI;AACR,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,GACH,SAAS,EAAA,GACT,aAAa,EACjB,SAAS,EAAE,UAAU,CACnB,mBAAmB,EACnB;AACE,YAAA,gCAAgC,EAAE,WAAW;AAC7C,YAAA,+BAA+B,EAAE,SAAS;AAC3C,SAAA,EACD,SAAS,CACV,EAAA,CACD;AAEN;AAqBA;;;;;AAKG;AACG,SAAU,eAAe,CAAmB,EAChD,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACmB,EAAA;AAC/B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,GACN,SAAS,EACb,SAAS,EAAE,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAA;AAExD,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,EAAE,KAAK,CAAU;QAC9D,QAAQ,CACG;AAElB;AAIA;;;;;AAKG;SACa,iBAAiB,GAAA;AAC/B,IAAA,OAAOA,6BAAC,SAAS,EAAA,EAAC,SAAS,EAAC,wBAAwB,GAAG;AACzD;;;;"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, {\n  type ComponentProps,\n  type ReactElement,\n  type ReactNode,\n} from \"react\"\nimport type {\n  Key,\n  MenuItemProps,\n  MenuSectionProps,\n  PopoverProps,\n} from \"react-aria-components\"\nimport {\n  Header,\n  Menu,\n  MenuItem,\n  MenuSection,\n  MenuTrigger,\n  Popover,\n  Pressable,\n  Separator,\n} from \"react-aria-components/Menu\"\n\nimport { DropdownTriggerContext } from \"./DropdownTriggerContext\"\n\nexport type DropdownPlacement = NonNullable<PopoverProps[\"placement\"]>\n\nexport interface DropdownProps {\n  /**\n   * A `<DropdownTrigger>` followed by a `<DropdownMenu>` containing the items.\n   */\n  children: ReactNode\n  /** Fires when the menu closes. */\n  onClose?: () => void\n  /** Fires when the menu opens. Useful for analytics or lazy data prep. */\n  onOpen?: () => void\n}\n\nexport type DropdownElementProps = DropdownProps\n\n/**\n * An action menu — a button that, when activated, reveals a list of actions or\n * navigation links. Composed of a `<DropdownTrigger>` wrapping a Tapestry\n * dropdown-trigger button (`DropdownButton`, `DropdownIconButton`, or\n * `PageHeaderActionsDropdownButton`) and a `<DropdownMenu>` containing\n * `<DropdownAction>`, `<DropdownLink>`, `<DropdownSection>`, and\n * `<DropdownSeparator>` items.\n *\n * **Dropdown vs Select.** Use `Dropdown` to trigger an action (\"Edit\",\n * \"Delete\") or navigate (\"Go to documentation\"). Use `Select` to collect a\n * value that is bound to form data or component state. They look visually\n * similar but follow different ARIA patterns (Menu vs Combobox/Listbox) and\n * are not interchangeable.\n *\n * Built on React Aria's `MenuTrigger` primitive; popover positioning and menu\n * identity live on `<DropdownMenu>`.\n *\n * @component\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/menu/ | W3C APG Menu Pattern}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport function Dropdown({ children, onClose, onOpen }: DropdownElementProps) {\n  const handleOpenChange = (isOpen: boolean) => {\n    if (isOpen) onOpen?.()\n    else onClose?.()\n  }\n\n  return <MenuTrigger onOpenChange={handleOpenChange}>{children}</MenuTrigger>\n}\n\nexport interface DropdownMenuProps {\n  /**\n   * `<DropdownAction>` / `<DropdownLink>` / `<DropdownSection>` /\n   * `<DropdownSeparator>` elements.\n   */\n  children: ReactNode\n  /** Override for the underlying `<Menu>` element id. */\n  id?: string\n  /**\n   * Popover position relative to the trigger. Uses React Aria's\n   * space-separated format (e.g., `\"bottom start\"`, `\"top end\"`,\n   * `\"left top\"`). Defaults to `\"bottom start\"`.\n   */\n  placement?: DropdownPlacement\n}\n\nexport type DropdownMenuElementProps = DropdownMenuProps\n\n/**\n * The popover surface for a `<Dropdown>`. Wraps React Aria's `<Popover>` and\n * `<Menu>` and contains the menu items.\n *\n * @component\n */\nexport function DropdownMenu({\n  children,\n  id,\n  placement = \"bottom start\",\n}: DropdownMenuElementProps) {\n  return (\n    <Popover className=\"tds-dropdown-popover\" placement={placement}>\n      <Menu id={id}>{children}</Menu>\n    </Popover>\n  )\n}\n\nexport interface DropdownTriggerProps {\n  /**\n   * A single Tapestry dropdown-trigger button element (`DropdownButton`,\n   * `DropdownIconButton`, or `PageHeaderActionsDropdownButton`).\n   */\n  children: ReactElement\n  /**\n   * Whether the trigger is disabled. This is the single source of truth for the\n   * trigger's disabled state — a `disabled` set directly on the child button\n   * does not win.\n   */\n  disabled?: boolean\n}\n\n/**\n * Wraps a single Tapestry dropdown-trigger button and bridges it to React\n * Aria's `MenuTrigger` via `<Pressable>`.\n * Uses context to pass `disabled` to the trigger button.\n *\n * @component\n */\ntype PressableChild = ComponentProps<typeof Pressable>[\"children\"]\n\nexport function DropdownTrigger({ children, disabled }: DropdownTriggerProps) {\n  return (\n    <DropdownTriggerContext.Provider value={{ disabled }}>\n      <Pressable isDisabled={disabled}>{children as PressableChild}</Pressable>\n    </DropdownTriggerContext.Provider>\n  )\n}\n\nexport interface DropdownItemBaseProps {\n  /** Applies destructive styling. */\n  destructive?: boolean\n  /** Applies staff-only visual treatment. */\n  staffOnly?: boolean\n}\n\nexport interface DropdownActionProps extends DropdownItemBaseProps {\n  /**\n   * Disables the item. Renamed to React Aria's `isDisabled` inside the\n   * wrapper. Disabled items are skipped by keyboard traversal and won't fire\n   * `onAction`.\n   */\n  disabled?: boolean\n  /**\n   * Stable identifier — required by React Aria's collection model for keying\n   * and focus tracking.\n   */\n  id: Key\n  /**\n   * Callback fired when the item is activated.\n   *\n   * React Aria closes the menu and returns focus to the trigger after this\n   * runs, which can override a focus change made here — e.g. focusing a\n   * nearby input. If `onAction` needs to move focus elsewhere, wrap that\n   * part in `queueMicrotask` to defer it until after React Aria's\n   * focus-restore has finished: `queueMicrotask(() => inputRef.current?.focus())`.\n   */\n  onAction: () => void\n}\n\ntype AriaActionPropsToOmit =\n  | \"href\"\n  | \"isDisabled\"\n  | \"rel\"\n  | \"routerOptions\"\n  | \"target\"\n  | \"value\"\ntype AriaActionPropsToInclude = \"textValue\"\n\nexport type DropdownActionElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    MenuItemProps<T>,\n    DropdownActionProps,\n    AriaActionPropsToOmit,\n    AriaActionPropsToInclude\n  >\n\n/**\n * A `<Dropdown>` item that fires a callback when activated. Renders an RA\n * `<MenuItem>` (`role=\"menuitem\"`). Children are passed through and can use\n * the slot convention (`slot=\"label\" | \"prefix\" | \"suffix\" | \"description\"`)\n * for structured content.\n *\n * @component\n */\nexport function DropdownAction<T extends object>({\n  className,\n  destructive,\n  disabled,\n  staffOnly,\n  ...restProps\n}: DropdownActionElementProps<T>) {\n  return (\n    <MenuItem\n      {...restProps}\n      className={classNames(\n        \"tds-dropdown-item\",\n        {\n          \"tds-dropdown-item--destructive\": destructive,\n          \"tds-dropdown-item--staff-only\": staffOnly,\n        },\n        className\n      )}\n      isDisabled={disabled}\n    />\n  )\n}\n\nexport interface DropdownLinkProps extends DropdownItemBaseProps {\n  /** If `true`, sets `target=\"_blank\"` and `rel=\"noreferrer noopener\"`. */\n  external?: boolean\n  /** Destination URL. */\n  href: string\n  /**\n   * Stable identifier — required by React Aria's collection model for keying\n   * and focus tracking.\n   */\n  id: Key\n}\n\ntype AriaLinkPropsToOmit =\n  | \"isDisabled\"\n  | \"onAction\"\n  | \"rel\"\n  | \"target\"\n  | \"value\"\ntype AriaLinkPropsToInclude = \"href\" | \"routerOptions\" | \"textValue\"\n\nexport type DropdownLinkElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    MenuItemProps<T>,\n    DropdownLinkProps,\n    AriaLinkPropsToOmit,\n    AriaLinkPropsToInclude\n  >\n\n/**\n * A `<Dropdown>` item that navigates to a URL. Renders an RA `<MenuItem>` as\n * an anchor (`<a role=\"menuitem\" href=\"…\">`). Pass `external` to open in a\n * new tab with `rel=\"noreferrer noopener\"`.\n *\n * `disabled` is intentionally not accepted — HTML has no native disabled state\n * for anchors, and a \"disabled link\" has no accessible analog. If a link\n * shouldn't be activatable, omit it.\n *\n * @component\n */\nexport function DropdownLink<T extends object>({\n  className,\n  destructive,\n  external,\n  staffOnly,\n  ...restProps\n}: DropdownLinkElementProps<T>) {\n  const externalProps = external\n    ? { rel: \"noreferrer noopener\", target: \"_blank\" as const }\n    : null\n  return (\n    <MenuItem\n      {...restProps}\n      {...externalProps}\n      className={classNames(\n        \"tds-dropdown-item\",\n        {\n          \"tds-dropdown-item--destructive\": destructive,\n          \"tds-dropdown-item--staff-only\": staffOnly,\n        },\n        className\n      )}\n    />\n  )\n}\n\nexport interface DropdownSectionProps {\n  /** The items rendered within the section. */\n  children: ReactNode\n  /**\n   * Heading rendered above the section's items. Required — RA renders the\n   * section as `role=\"group\"` and the heading provides the group's\n   * accessible name via `aria-labelledby`.\n   */\n  title: string\n}\n\nexport type DropdownSectionElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    MenuSectionProps<T>,\n    DropdownSectionProps,\n    \"value\",\n    never\n  >\n\n/**\n * A grouped section within a `<Dropdown>`. Renders an RA `<MenuSection>`\n * (`role=\"group\"`) with an optional `<Header>` heading when `title` is set.\n *\n * @component\n */\nexport function DropdownSection<T extends object>({\n  children,\n  className,\n  title,\n  ...restProps\n}: DropdownSectionElementProps<T>) {\n  return (\n    <MenuSection\n      {...restProps}\n      className={classNames(\"tds-dropdown-section\", className)}\n    >\n      <Header className=\"tds-dropdown-section-label\">{title}</Header>\n      {children}\n    </MenuSection>\n  )\n}\n\nexport type DropdownSeparatorElementProps = Record<string, never>\n\n/**\n * A divider between items in a `<Dropdown>`. Renders an RA `<Separator>`\n * (`role=\"separator\"`).\n *\n * @component\n */\nexport function DropdownSeparator() {\n  return <Separator className=\"tds-dropdown-separator\" />\n}\n"],"names":[],"mappings":";;;;;AA2CA;;;;;;;;;;;;;;;;;;;;AAoBG;AACG,SAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAwB,EAAA;AAC1E,IAAA,MAAM,gBAAgB,GAAG,CAAC,MAAe,KAAI;AAC3C,QAAA,IAAI,MAAM;YAAE,MAAM,IAAI;;YACjB,OAAO,IAAI;AAClB,IAAA,CAAC;IAED,OAAO,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,YAAY,EAAE,gBAAgB,EAAA,EAAG,QAAQ,CAAe;AAC9E;AAoBA;;;;;AAKG;AACG,SAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,EAAE,EACF,SAAS,GAAG,cAAc,GACD,EAAA;IACzB,QACE,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,sBAAsB,EAAC,SAAS,EAAE,SAAS,EAAA;QAC5D,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,IAAG,QAAQ,CAAQ,CACvB;AAEd;SAyBgB,eAAe,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAwB,EAAA;IAC1E,QACE,KAAA,CAAA,aAAA,CAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAA;QAClD,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,UAAU,EAAE,QAAQ,IAAG,QAA0B,CAAa,CACzC;AAEtC;AAkDA;;;;;;;AAOG;AACG,SAAU,cAAc,CAAmB,EAC/C,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACkB,EAAA;IAC9B,QACE,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,GACH,SAAS,EACb,SAAS,EAAE,UAAU,CACnB,mBAAmB,EACnB;AACE,YAAA,gCAAgC,EAAE,WAAW;AAC7C,YAAA,+BAA+B,EAAE,SAAS;SAC3C,EACD,SAAS,CACV,EACD,UAAU,EAAE,QAAQ,EAAA,CACpB;AAEN;AA8BA;;;;;;;;;;AAUG;AACG,SAAU,YAAY,CAAmB,EAC7C,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACgB,EAAA;IAC5B,MAAM,aAAa,GAAG;UAClB,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAiB;UACvD,IAAI;AACR,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,GACH,SAAS,EAAA,GACT,aAAa,EACjB,SAAS,EAAE,UAAU,CACnB,mBAAmB,EACnB;AACE,YAAA,gCAAgC,EAAE,WAAW;AAC7C,YAAA,+BAA+B,EAAE,SAAS;AAC3C,SAAA,EACD,SAAS,CACV,EAAA,CACD;AAEN;AAqBA;;;;;AAKG;AACG,SAAU,eAAe,CAAmB,EAChD,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACmB,EAAA;AAC/B,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,GACN,SAAS,EACb,SAAS,EAAE,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAA;AAExD,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,EAAE,KAAK,CAAU;QAC9D,QAAQ,CACG;AAElB;AAIA;;;;;AAKG;SACa,iBAAiB,GAAA;AAC/B,IAAA,OAAO,oBAAC,SAAS,EAAA,EAAC,SAAS,EAAC,wBAAwB,GAAG;AACzD;;;;"}

package/dist/components/internal/tooltip/Tooltip.js

@@ -1,66 +1,12 @@
 import { tokens } from '@planningcenter/tapestry-tokens/tokens';
-import classNames from 'classnames';
-import React__default, { useRef, useId } from 'react';
-import { Overlay } from 'react-aria/Overlay';
-import { useOverlayPosition } from 'react-aria/useOverlayPosition';
-import { useTooltipTrigger, useTooltip } from 'react-aria/useTooltipTrigger';
-import { useTooltipTriggerState } from 'react-stately/useTooltipTriggerState';
-import { TooltipTriggerContext } from './TooltipTriggerContext.js';
+import 'classnames';
+import 'react';
+import 'react-aria/Overlay';
+import 'react-aria/useOverlayPosition';
+import 'react-aria/useTooltipTrigger';
+import 'react-stately/useTooltipTriggerState';
+import './TooltipTriggerContext.js';
 
-// Single source of truth for the arrow's dimensions -- index.css reads these
-// via --tds-tooltip-arrow-size/--tds-tooltip-arrow-depth instead of its own literals.
-const ARROW_SIZE = 10;
-const ARROW_DEPTH = 5;
-const FOCUS_RING_REACH = parseFloat(tokens["--t-focus-ring-offset"]) +
+parseFloat(tokens["--t-focus-ring-offset"]) +
     parseFloat(tokens["--t-focus-ring-width"]);
-/**
- * Shows a short hover/focus hint next to a trigger. Built from React Aria's
- * tooltip hooks rather than `react-aria-components`'s `<Tooltip>`, because
- * that component unmounts its content entirely while closed, so a screen
- * reader's virtual cursor never gets access to the description unless real
- * DOM focus lands on the trigger. This keeps the tooltip content always
- * mounted and wires `aria-describedby` unconditionally, toggling only CSS
- * visibility.
- */
-function Tooltip({ children, content, placement = "bottom start", }) {
-    const triggerRef = useRef(null);
-    const overlayRef = useRef(null);
-    const tooltipId = `tds-tooltip-${useId()}`;
-    const state = useTooltipTriggerState();
-    const { triggerProps } = useTooltipTrigger({}, state, triggerRef);
-    const { tooltipProps: ariaTooltipProps } = useTooltip({ id: tooltipId }, state);
-    const { arrowProps, overlayProps, placement: resolvedPlacement, } = useOverlayPosition({
-        arrowSize: ARROW_SIZE,
-        isOpen: state.isOpen,
-        offset: ARROW_DEPTH + FOCUS_RING_REACH,
-        onClose: () => state.close(true),
-        overlayRef,
-        placement,
-        targetRef: triggerRef,
-    });
-    const contextValue = {
-        ref: triggerRef,
-        triggerProps: {
-            ...triggerProps,
-            "aria-describedby": tooltipId,
-        },
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(TooltipTriggerContext.Provider, { value: contextValue }, children),
-        React__default.createElement(Overlay, { disableFocusManagement: true },
-            React__default.createElement("div", { ...ariaTooltipProps, ...overlayProps, ref: overlayRef, className: classNames("tds-tooltip", {
-                    "tds-tooltip--open": state.isOpen,
-                }), "data-placement": resolvedPlacement, style: {
-                    ...overlayProps.style,
-                    "--tds-tooltip-arrow-depth-raw": `${ARROW_DEPTH}px`,
-                    "--tds-tooltip-arrow-size-raw": `${ARROW_SIZE}px`,
-                } },
-                content,
-                React__default.createElement("div", { className: "tds-tooltip-arrow", ...arrowProps },
-                    React__default.createElement("svg", { "aria-hidden": true, className: "tds-tooltip-arrow-icon", role: "img", viewBox: `0 0 ${ARROW_SIZE} ${ARROW_DEPTH}` },
-                        React__default.createElement("polygon", { points: `${ARROW_SIZE / 2},0 0,${ARROW_DEPTH} ${ARROW_SIZE},${ARROW_DEPTH}` })))))));
-}
-Tooltip.displayName = "Tooltip";
-
-export { Tooltip };
 //# sourceMappingURL=Tooltip.js.map

package/dist/components/internal/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"sourcesContent":["import { tokens } from \"@planningcenter/tapestry-tokens/tokens\"\nimport classNames from \"classnames\"\nimport React, { type ReactElement, useId, useRef } from \"react\"\nimport { Overlay } from \"react-aria/Overlay\"\nimport {\n  type Placement,\n  useOverlayPosition,\n} from \"react-aria/useOverlayPosition\"\nimport { useTooltip, useTooltipTrigger } from \"react-aria/useTooltipTrigger\"\nimport { useTooltipTriggerState } from \"react-stately/useTooltipTriggerState\"\n\nimport { TooltipTriggerContext } from \"./TooltipTriggerContext\"\n\n// Single source of truth for the arrow's dimensions -- index.css reads these\n// via --tds-tooltip-arrow-size/--tds-tooltip-arrow-depth instead of its own literals.\nconst ARROW_SIZE = 10\nconst ARROW_DEPTH = 5\nconst FOCUS_RING_REACH =\n  parseFloat(tokens[\"--t-focus-ring-offset\"]) +\n  parseFloat(tokens[\"--t-focus-ring-width\"])\n\nexport interface TooltipProps {\n  /**\n   * A single `BaseButton`-derived element (e.g. `IconButton`, `Button`) to\n   * act as the trigger. Must be exactly one trigger — nothing enforces this\n   * at runtime, so a fragment with more than one child would silently hand\n   * every child the same ref and trigger props.\n   */\n  children: ReactElement\n  /**\n   * The hint text. Best used with information beyond the trigger's accessible name\n   * (e.g. its `aria-label` or visible label).\n   */\n  content: string\n  /** Where the tooltip renders relative to the trigger. Default `'bottom start'`. */\n  placement?: Placement\n}\n\n/**\n * Shows a short hover/focus hint next to a trigger. Built from React Aria's\n * tooltip hooks rather than `react-aria-components`'s `<Tooltip>`, because\n * that component unmounts its content entirely while closed, so a screen\n * reader's virtual cursor never gets access to the description unless real\n * DOM focus lands on the trigger. This keeps the tooltip content always\n * mounted and wires `aria-describedby` unconditionally, toggling only CSS\n * visibility.\n */\nexport function Tooltip({\n  children,\n  content,\n  placement = \"bottom start\",\n}: TooltipProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const tooltipId = `tds-tooltip-${useId()}`\n\n  const state = useTooltipTriggerState()\n  const { triggerProps } = useTooltipTrigger({}, state, triggerRef)\n  const { tooltipProps: ariaTooltipProps } = useTooltip(\n    { id: tooltipId },\n    state\n  )\n\n  const {\n    arrowProps,\n    overlayProps,\n    placement: resolvedPlacement,\n  } = useOverlayPosition({\n    arrowSize: ARROW_SIZE,\n    isOpen: state.isOpen,\n    offset: ARROW_DEPTH + FOCUS_RING_REACH,\n    onClose: () => state.close(true),\n    overlayRef,\n    placement,\n    targetRef: triggerRef,\n  })\n\n  const contextValue = {\n    ref: triggerRef,\n    triggerProps: {\n      ...triggerProps,\n      \"aria-describedby\": tooltipId,\n    },\n  }\n\n  return (\n    <>\n      <TooltipTriggerContext.Provider value={contextValue}>\n        {children}\n      </TooltipTriggerContext.Provider>\n      <Overlay disableFocusManagement>\n        <div\n          {...ariaTooltipProps}\n          {...overlayProps}\n          ref={overlayRef}\n          className={classNames(\"tds-tooltip\", {\n            \"tds-tooltip--open\": state.isOpen,\n          })}\n          data-placement={resolvedPlacement}\n          style={\n            {\n              ...overlayProps.style,\n              \"--tds-tooltip-arrow-depth-raw\": `${ARROW_DEPTH}px`,\n              \"--tds-tooltip-arrow-size-raw\": `${ARROW_SIZE}px`,\n            } as React.CSSProperties\n          }\n        >\n          {content}\n          <div className=\"tds-tooltip-arrow\" {...arrowProps}>\n            <svg\n              aria-hidden\n              className=\"tds-tooltip-arrow-icon\"\n              role=\"img\"\n              viewBox={`0 0 ${ARROW_SIZE} ${ARROW_DEPTH}`}\n            >\n              <polygon\n                points={`${ARROW_SIZE / 2},0 0,${ARROW_DEPTH} ${ARROW_SIZE},${ARROW_DEPTH}`}\n              />\n            </svg>\n          </div>\n        </div>\n      </Overlay>\n    </>\n  )\n}\n\nTooltip.displayName = \"Tooltip\"\n"],"names":["React"],"mappings":";;;;;;;;;AAaA;AACA;AACA,MAAM,UAAU,GAAG,EAAE;AACrB,MAAM,WAAW,GAAG,CAAC;AACrB,MAAM,gBAAgB,GACpB,UAAU,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAC3C,IAAA,UAAU,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC;AAmB5C;;;;;;;;AAQG;AACG,SAAU,OAAO,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,SAAS,GAAG,cAAc,GACb,EAAA;AACb,IAAA,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC;AAClD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC/C,IAAA,MAAM,SAAS,GAAG,CAAA,YAAA,EAAe,KAAK,EAAE,EAAE;AAE1C,IAAA,MAAM,KAAK,GAAG,sBAAsB,EAAE;AACtC,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,iBAAiB,CAAC,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC;AACjE,IAAA,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,UAAU,CACnD,EAAE,EAAE,EAAE,SAAS,EAAE,EACjB,KAAK,CACN;IAED,MAAM,EACJ,UAAU,EACV,YAAY,EACZ,SAAS,EAAE,iBAAiB,GAC7B,GAAG,kBAAkB,CAAC;AACrB,QAAA,SAAS,EAAE,UAAU;QACrB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,MAAM,EAAE,WAAW,GAAG,gBAAgB;QACtC,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;QAChC,UAAU;QACV,SAAS;AACT,QAAA,SAAS,EAAE,UAAU;AACtB,KAAA,CAAC;AAEF,IAAA,MAAM,YAAY,GAAG;AACnB,QAAA,GAAG,EAAE,UAAU;AACf,QAAA,YAAY,EAAE;AACZ,YAAA,GAAG,YAAY;AACf,YAAA,kBAAkB,EAAE,SAAS;AAC9B,SAAA;KACF;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACEA,cAAA,CAAA,aAAA,CAAC,qBAAqB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,EAChD,QAAQ,CACsB;QACjCA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,sBAAsB,EAAA,IAAA,EAAA;AAC7B,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GACM,gBAAgB,EAAA,GAChB,YAAY,EAChB,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE;oBACnC,mBAAmB,EAAE,KAAK,CAAC,MAAM;AAClC,iBAAA,CAAC,EAAA,gBAAA,EACc,iBAAiB,EACjC,KAAK,EACH;oBACE,GAAG,YAAY,CAAC,KAAK;oBACrB,+BAA+B,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI;oBACnD,8BAA8B,EAAE,CAAA,EAAG,UAAU,CAAA,EAAA,CAAI;AAC3B,iBAAA,EAAA;gBAGzB,OAAO;AACR,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA,GAAK,UAAU,EAAA;AAC/C,oBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAEE,SAAS,EAAC,wBAAwB,EAClC,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,CAAA,IAAA,EAAO,UAAU,CAAA,CAAA,EAAI,WAAW,CAAA,CAAE,EAAA;wBAE3CA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,MAAM,EAAE,CAAA,EAAG,UAAU,GAAG,CAAC,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAA,EAAI,UAAU,IAAI,WAAW,CAAA,CAAE,GAC3E,CACE,CACF,CACF,CACE,CACT;AAEP;AAEA,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"sourcesContent":["import { tokens } from \"@planningcenter/tapestry-tokens/tokens\"\nimport classNames from \"classnames\"\nimport React, { type ReactElement, useId, useRef } from \"react\"\nimport { Overlay } from \"react-aria/Overlay\"\nimport {\n  type Placement,\n  useOverlayPosition,\n} from \"react-aria/useOverlayPosition\"\nimport { useTooltip, useTooltipTrigger } from \"react-aria/useTooltipTrigger\"\nimport { useTooltipTriggerState } from \"react-stately/useTooltipTriggerState\"\n\nimport { TooltipTriggerContext } from \"./TooltipTriggerContext\"\n\n// Single source of truth for the arrow's dimensions -- index.css reads these\n// via --tds-tooltip-arrow-size/--tds-tooltip-arrow-depth instead of its own literals.\nconst ARROW_SIZE = 10\nconst ARROW_DEPTH = 5\nconst FOCUS_RING_REACH =\n  parseFloat(tokens[\"--t-focus-ring-offset\"]) +\n  parseFloat(tokens[\"--t-focus-ring-width\"])\n\nexport interface TooltipProps {\n  /**\n   * A single `BaseButton`-derived element (e.g. `IconButton`, `Button`) to\n   * act as the trigger. Must be exactly one trigger — nothing enforces this\n   * at runtime, so a fragment with more than one child would silently hand\n   * every child the same ref and trigger props.\n   */\n  children: ReactElement\n  /**\n   * The hint text. Best used with information beyond the trigger's accessible name\n   * (e.g. its `aria-label` or visible label).\n   */\n  content: string\n  /** Where the tooltip renders relative to the trigger. Default `'bottom start'`. */\n  placement?: Placement\n}\n\n/**\n * Shows a short hover/focus hint next to a trigger. Built from React Aria's\n * tooltip hooks rather than `react-aria-components`'s `<Tooltip>`, because\n * that component unmounts its content entirely while closed, so a screen\n * reader's virtual cursor never gets access to the description unless real\n * DOM focus lands on the trigger. This keeps the tooltip content always\n * mounted and wires `aria-describedby` unconditionally, toggling only CSS\n * visibility.\n */\nexport function Tooltip({\n  children,\n  content,\n  placement = \"bottom start\",\n}: TooltipProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const tooltipId = `tds-tooltip-${useId()}`\n\n  const state = useTooltipTriggerState()\n  const { triggerProps } = useTooltipTrigger({}, state, triggerRef)\n  const { tooltipProps: ariaTooltipProps } = useTooltip(\n    { id: tooltipId },\n    state\n  )\n\n  const {\n    arrowProps,\n    overlayProps,\n    placement: resolvedPlacement,\n  } = useOverlayPosition({\n    arrowSize: ARROW_SIZE,\n    isOpen: state.isOpen,\n    offset: ARROW_DEPTH + FOCUS_RING_REACH,\n    onClose: () => state.close(true),\n    overlayRef,\n    placement,\n    targetRef: triggerRef,\n  })\n\n  const contextValue = {\n    ref: triggerRef,\n    triggerProps: {\n      ...triggerProps,\n      \"aria-describedby\": tooltipId,\n    },\n  }\n\n  return (\n    <>\n      <TooltipTriggerContext.Provider value={contextValue}>\n        {children}\n      </TooltipTriggerContext.Provider>\n      <Overlay disableFocusManagement>\n        <div\n          {...ariaTooltipProps}\n          {...overlayProps}\n          ref={overlayRef}\n          className={classNames(\"tds-tooltip\", {\n            \"tds-tooltip--open\": state.isOpen,\n          })}\n          data-placement={resolvedPlacement}\n          style={\n            {\n              ...overlayProps.style,\n              \"--tds-tooltip-arrow-depth-raw\": `${ARROW_DEPTH}px`,\n              \"--tds-tooltip-arrow-size-raw\": `${ARROW_SIZE}px`,\n            } as React.CSSProperties\n          }\n        >\n          {content}\n          <div className=\"tds-tooltip-arrow\" {...arrowProps}>\n            <svg\n              aria-hidden\n              className=\"tds-tooltip-arrow-icon\"\n              role=\"img\"\n              viewBox={`0 0 ${ARROW_SIZE} ${ARROW_DEPTH}`}\n            >\n              <polygon\n                points={`${ARROW_SIZE / 2},0 0,${ARROW_DEPTH} ${ARROW_SIZE},${ARROW_DEPTH}`}\n              />\n            </svg>\n          </div>\n        </div>\n      </Overlay>\n    </>\n  )\n}\n\nTooltip.displayName = \"Tooltip\"\n"],"names":[],"mappings":";;;;;;;;;AAkBE,UAAU,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAC3C,IAAA,UAAU,CAAC,MAAM,CAAC,sBAAsB,CAAC"}