@planningcenter/tapestry 4.0.0-rc.9 → 4.0.0

package/dist/components/DataTable/TableActions.js

@@ -0,0 +1,47 @@
+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 { ButtonGroup } from '../button-group/ButtonGroup.js';
+import React__default from 'react';
+
+/**
+ * Renders the table actions as an `IconButton` group displayed directly after
+ * the results count, above the table. Each entry becomes an icon button whose
+ * `callback` receives the keys of the currently selected rows.
+ */
+const TableActions = ({ actions, resultNoun, selectedKeys, }) => {
+    // The count/noun suffix is the same for every table action, so compute it once
+    // here rather than per-button inside the map below.
+    const countSuffix = getTableActionCountSuffix(selectedKeys.length, resultNoun);
+    return (React__default.createElement(ButtonGroup, { "aria-label": "Table actions" }, actions.map(({ callback, disabled, icon, label, onClick }) => (React__default.createElement(IconButton, { key: label, "aria-label": `${label}${countSuffix}`, disabled: disabled, icon: icon, onClick: (event) => {
+            onClick?.(event);
+            callback?.(selectedKeys);
+        } })))));
+};
+TableActions.displayName = "TableActions";
+const numberFormatter = new Intl.NumberFormat();
+/**
+ * The count/noun suffix appended to each table action's `aria-label` when rows
+ * are selected, e.g. `" (2 selected people)"` — so `"Email"` reads as
+ * `"Email (2 selected people)"`. Empty when nothing is selected. Falls back to
+ * the default `"result"` noun when `resultNoun` isn't provided. Shared across
+ * every action, so it's computed once rather than per-button.
+ */
+function getTableActionCountSuffix(count, resultNoun) {
+    if (!count)
+        return "";
+    const [singular, plural] = Array.isArray(resultNoun)
+        ? resultNoun
+        : typeof resultNoun === "string"
+            ? [resultNoun, `${resultNoun}s`]
+            : ["result", "results"];
+    const noun = count === 1 ? singular : plural;
+    const formattedCount = numberFormatter.format(count);
+    return ` (${formattedCount} selected ${noun})`;
+}
+
+export { TableActions };
+//# sourceMappingURL=TableActions.js.map

package/dist/components/DataTable/TableActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableActions.js","sources":["../../../src/components/DataTable/TableActions.tsx"],"sourcesContent":["import { IconButton } from \"@components/button\"\nimport { ButtonGroup } from \"@components/button-group\"\nimport React, { type ReactNode } from \"react\"\n\nimport type { ResultNoun } from \"./ResultsCount\"\n\n/**\n * A table action rendered as an `IconButton` in the button group above the\n * table. Replaces the original RFC's `{ buttonProps; callback }` shape with a\n * narrower, more controllable API so the design can evolve without exposing the\n * full button surface.\n */\nexport type TableAction = {\n  /** Called with the keys of the currently selected rows when the action is triggered. */\n  callback?: (selectedKeys: (number | string)[]) => void\n  /** Whether the action's button is disabled. */\n  disabled?: boolean\n  /** The icon rendered inside the action's icon button. */\n  icon: ReactNode\n  /** Accessible label for the icon-only action button. */\n  label: string\n  /** Standard click handler, invoked with the click event before `callback`. */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n}\n\nexport interface TableActionsProps {\n  /** The table actions to render as an `IconButton` group. */\n  actions: TableAction[]\n  /**\n   * The noun used to describe the selection in each action's `aria-label`.\n   * See {@link ResultNoun}.\n   */\n  resultNoun?: ResultNoun\n  /** The keys of the currently selected rows, passed to each action's `callback`. */\n  selectedKeys: (number | string)[]\n}\n\n/**\n * Renders the table actions as an `IconButton` group displayed directly after\n * the results count, above the table. Each entry becomes an icon button whose\n * `callback` receives the keys of the currently selected rows.\n */\nexport const TableActions = ({\n  actions,\n  resultNoun,\n  selectedKeys,\n}: TableActionsProps) => {\n  // The count/noun suffix is the same for every table action, so compute it once\n  // here rather than per-button inside the map below.\n  const countSuffix = getTableActionCountSuffix(selectedKeys.length, resultNoun)\n\n  return (\n    <ButtonGroup aria-label=\"Table actions\">\n      {actions.map(({ callback, disabled, icon, label, onClick }) => (\n        <IconButton\n          key={label}\n          aria-label={`${label}${countSuffix}`}\n          disabled={disabled}\n          icon={icon}\n          onClick={(event) => {\n            onClick?.(event)\n            callback?.(selectedKeys)\n          }}\n        />\n      ))}\n    </ButtonGroup>\n  )\n}\n\nTableActions.displayName = \"TableActions\"\n\nconst numberFormatter = new Intl.NumberFormat()\n\n/**\n * The count/noun suffix appended to each table action's `aria-label` when rows\n * are selected, e.g. `\" (2 selected people)\"` — so `\"Email\"` reads as\n * `\"Email (2 selected people)\"`. Empty when nothing is selected. Falls back to\n * the default `\"result\"` noun when `resultNoun` isn't provided. Shared across\n * every action, so it's computed once rather than per-button.\n */\nfunction getTableActionCountSuffix(\n  count: number,\n  resultNoun: ResultNoun | undefined\n): string {\n  if (!count) return \"\"\n  const [singular, plural] = Array.isArray(resultNoun)\n    ? resultNoun\n    : typeof resultNoun === \"string\"\n      ? [resultNoun, `${resultNoun}s`]\n      : [\"result\", \"results\"]\n  const noun = count === 1 ? singular : plural\n  const formattedCount = numberFormatter.format(count)\n  return ` (${formattedCount} selected ${noun})`\n}\n"],"names":["React"],"mappings":";;;;;;;;;AAqCA;;;;AAIG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,EACP,UAAU,EACV,YAAY,GACM,KAAI;;;IAGtB,MAAM,WAAW,GAAG,yBAAyB,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC;IAE9E,QACEA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,YAAA,EAAY,eAAe,IACpC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MACxDA,6BAAC,UAAU,EAAA,EACT,GAAG,EAAE,KAAK,EAAA,YAAA,EACE,GAAG,KAAK,CAAA,EAAG,WAAW,CAAA,CAAE,EACpC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,KAAK,KAAI;AACjB,YAAA,OAAO,GAAG,KAAK,CAAC;AAChB,YAAA,QAAQ,GAAG,YAAY,CAAC;AAC1B,QAAA,CAAC,EAAA,CACD,CACH,CAAC,CACU;AAElB;AAEA,YAAY,CAAC,WAAW,GAAG,cAAc;AAEzC,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE;AAE/C;;;;;;AAMG;AACH,SAAS,yBAAyB,CAChC,KAAa,EACb,UAAkC,EAAA;AAElC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;IACrB,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU;AACjD,UAAE;AACF,UAAE,OAAO,UAAU,KAAK;AACtB,cAAE,CAAC,UAAU,EAAE,CAAA,EAAG,UAAU,GAAG;AAC/B,cAAE,CAAC,QAAQ,EAAE,SAAS,CAAC;AAC3B,IAAA,MAAM,IAAI,GAAG,KAAK,KAAK,CAAC,GAAG,QAAQ,GAAG,MAAM;IAC5C,MAAM,cAAc,GAAG,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC;AACpD,IAAA,OAAO,CAAA,EAAA,EAAK,cAAc,CAAA,UAAA,EAAa,IAAI,GAAG;AAChD;;;;"}

package/dist/components/button/BaseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAGlB,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAEd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAE/D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACvE,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,sCAAsC;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,eAAe,GAAG,UAAU,CACnC,GACC,eAAe,CAAA;AAEjB,eAAO,MAAM,UAAU,qLAgDtB,CAAA"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAIlB,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAEd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAA0B,MAAM,OAAO,CAAA;AAI3E,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACvE,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,sCAAsC;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,eAAe,GAAG,UAAU,CACnC,GACC,eAAe,CAAA;AAEjB,eAAO,MAAM,UAAU,qLA+DtB,CAAA"}

package/dist/components/button/BaseButton.js

@@ -1,12 +1,25 @@
 import LoadingSpinner from '../internal/LoadingSpinner.js';
+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 } from 'react';
+import React__default, { forwardRef, useContext } from 'react';
+import { mergeProps } from 'react-aria/mergeProps';
+import { mergeRefs } from 'react-aria/mergeRefs';
 
-const BaseButton = forwardRef(({ "aria-label": ariaLabel, className, disabled = false, fullWidth, kind = "secondary", label, loading = false, loadingAriaLabel = "Loading...", prefix, size, suffix, ...restProps }, ref) => {
+const BaseButton = forwardRef(({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, className, disabled = false, fullWidth, kind = "secondary", label, loading = false, loadingAriaLabel = "Loading...", prefix, size, suffix, ...restProps }, ref) => {
+    const tooltip = useContext(TooltipTriggerContext);
+    const { "aria-describedby": tooltipId, ...tooltipTriggerProps } = tooltip?.triggerProps ?? {};
+    const mergedProps = tooltip
+        ? mergeProps(restProps, tooltipTriggerProps)
+        : restProps;
+    const mergedRef = tooltip
+        ? mergeRefs(ref, tooltip.ref)
+        : ref;
+    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: ref, ...restProps, "aria-busy": loading || undefined, "aria-disabled": isDisabled || undefined, disabled: isDisabled, "aria-label": loading ? loadingAriaLabel : ariaLabel },
+    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),
         wrapStringWithSpan(prefix),
         loading ? React__default.createElement("span", null, label) : label,

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 {\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 } from \"react\"\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-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 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={ref}\n        {...restProps}\n        aria-busy={loading || undefined}\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":";;;;;MA8Ba,UAAU,GAAG,UAAU,CAClC,CACE,EACE,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;IACF,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,GAAG,EAAA,GACJ,SAAS,eACF,OAAO,IAAI,SAAS,EAAA,eAAA,EAChB,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":["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;;;;"}

package/dist/components/internal/index.d.ts

@@ -1,3 +1,5 @@
 import LoadingSpinner from "./LoadingSpinner";
+export type { TooltipProps } from "./tooltip";
+export { Tooltip } from "./tooltip";
 export { LoadingSpinner };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/internal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/internal/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAE7C,OAAO,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/internal/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAE7C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/internal/tooltip/Tooltip.d.ts

@@ -0,0 +1,32 @@
+import React, { type ReactElement } from "react";
+import { type Placement } from "react-aria/useOverlayPosition";
+export interface TooltipProps {
+    /**
+     * A single `BaseButton`-derived element (e.g. `IconButton`, `Button`) to
+     * act as the trigger. Must be exactly one trigger — nothing enforces this
+     * at runtime, so a fragment with more than one child would silently hand
+     * every child the same ref and trigger props.
+     */
+    children: ReactElement;
+    /**
+     * The hint text. Best used with information beyond the trigger's accessible name
+     * (e.g. its `aria-label` or visible label).
+     */
+    content: string;
+    /** Where the tooltip renders relative to the trigger. Default `'bottom start'`. */
+    placement?: Placement;
+}
+/**
+ * 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.
+ */
+export declare function Tooltip({ children, content, placement, }: TooltipProps): React.JSX.Element;
+export declare namespace Tooltip {
+    var displayName: string;
+}
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/internal/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAiB,MAAM,OAAO,CAAA;AAE/D,OAAO,EACL,KAAK,SAAS,EAEf,MAAM,+BAA+B,CAAA;AActC,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,QAAQ,EAAE,YAAY,CAAA;IACtB;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf,mFAAmF;IACnF,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,SAA0B,GAC3B,EAAE,YAAY,qBAyEd;yBA7Ee,OAAO"}

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

@@ -0,0 +1,12 @@
+import { tokens } from '@planningcenter/tapestry-tokens/tokens';
+import 'classnames';
+import 'react';
+import 'react-aria/Overlay';
+import 'react-aria/useOverlayPosition';
+import 'react-aria/useTooltipTrigger';
+import 'react-stately/useTooltipTriggerState';
+import './TooltipTriggerContext.js';
+
+parseFloat(tokens["--t-focus-ring-offset"]) +
+    parseFloat(tokens["--t-focus-ring-width"]);
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +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":[],"mappings":";;;;;;;;;AAkBE,UAAU,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAC3C,IAAA,UAAU,CAAC,MAAM,CAAC,sBAAsB,CAAC"}

package/dist/components/internal/tooltip/TooltipTriggerContext.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes, type RefObject } from "react";
+/** Carries `<Tooltip>`'s trigger wiring down to the rendered button, via `BaseButton`. */
+export declare const TooltipTriggerContext: import("react").Context<{
+    ref: RefObject<HTMLButtonElement>;
+    triggerProps: HTMLAttributes<HTMLButtonElement>;
+} | null>;
+//# sourceMappingURL=TooltipTriggerContext.d.ts.map

package/dist/components/internal/tooltip/TooltipTriggerContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipTriggerContext.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/tooltip/TooltipTriggerContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE1E,0FAA0F;AAC1F,eAAO,MAAM,qBAAqB;SAC3B,SAAS,CAAC,iBAAiB,CAAC;kBACnB,cAAc,CAAC,iBAAiB,CAAC;SAClC,CAAA"}

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

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+/** Carries `<Tooltip>`'s trigger wiring down to the rendered button, via `BaseButton`. */
+const TooltipTriggerContext = createContext(null);
+
+export { TooltipTriggerContext };
+//# sourceMappingURL=TooltipTriggerContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipTriggerContext.js","sources":["../../../../src/components/internal/tooltip/TooltipTriggerContext.ts"],"sourcesContent":["import { createContext, type HTMLAttributes, type RefObject } from \"react\"\n\n/** Carries `<Tooltip>`'s trigger wiring down to the rendered button, via `BaseButton`. */\nexport const TooltipTriggerContext = createContext<{\n  ref: RefObject<HTMLButtonElement>\n  triggerProps: HTMLAttributes<HTMLButtonElement>\n} | null>(null)\n"],"names":[],"mappings":";;AAEA;MACa,qBAAqB,GAAG,aAAa,CAGxC,IAAI;;;;"}

package/dist/components/internal/tooltip/index.d.ts

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

package/dist/components/internal/tooltip/index.d.ts.map

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

package/dist/components/link/IconLink.d.ts

@@ -25,6 +25,9 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
     style?: React.CSSProperties | undefined;
     title?: string | undefined | undefined;
     className?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    color?: string | undefined | undefined;
     type?: string | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -36,7 +39,6 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
-    hidden?: boolean | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
@@ -46,7 +48,6 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
     radioGroup?: string | undefined | undefined;
     role?: React.AriaRole | undefined;
     about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
     property?: string | undefined | undefined;
@@ -58,7 +59,6 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
     autoCapitalize?: string | undefined | undefined;
     autoCorrect?: string | undefined | undefined;
     autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
     itemProp?: string | undefined | undefined;
     itemScope?: boolean | undefined | undefined;
     itemType?: string | undefined | undefined;

package/dist/components/page-header/index.js

@@ -1,4 +1,4 @@
-import '../../packages/tapestry-wc/dist/components/p-nyMzpSUR.js';
+import '../../packages/tapestry-wc/dist/components/p-EYzqvkpp.js';
 import { defineCustomElement } from '../../packages/tapestry-wc/dist/components/tds-page-header.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../packages/tapestry-wc/dist/components/tds-page-header-nav.js';
 

package/dist/components/search-input/SearchInput.d.ts

@@ -33,6 +33,7 @@ export type SearchInputElementProps = Omit<InputHTMLAttributes<HTMLInputElement>
  * label, description, and state layout.
  *
  * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-searchinput--docs | Storybook Documentation}
  */
 export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputElementProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/search-input/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAOpB,OAAO,KAAK,EAAE,EAEZ,KAAK,mBAAmB,EAGzB,MAAM,OAAO,CAAA;AAEd,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAA;AAEzC,UAAU,oBAAoB;IAC5B,sEAAsE;IACtE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2HAA2H;IAC3H,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yBAAyB;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,6BAA8B,SAAQ,oBAAoB;IAClE,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,gBAAgB,GACxB,6BAA6B,GAC7B,oBAAoB,CAAA;AAExB;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,CACzC,GACC,gBAAgB,CAAA;AAElB;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,kGAiItB,CAAA"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAOpB,OAAO,KAAK,EAAE,EAEZ,KAAK,mBAAmB,EAGzB,MAAM,OAAO,CAAA;AAEd,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAA;AAEzC,UAAU,oBAAoB;IAC5B,sEAAsE;IACtE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2HAA2H;IAC3H,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yBAAyB;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,6BAA8B,SAAQ,oBAAoB;IAClE,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,gBAAgB,GACxB,6BAA6B,GAC7B,oBAAoB,CAAA;AAExB;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,CACzC,GACC,gBAAgB,CAAA;AAElB;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,kGAiItB,CAAA"}

package/dist/components/search-input/SearchInput.js

@@ -16,6 +16,7 @@ import React__default, { forwardRef, useRef, useState } from 'react';
  * label, description, and state layout.
  *
  * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-searchinput--docs | Storybook Documentation}
  */
 const SearchInput = forwardRef(function SearchInput({ "aria-labelledby": ariaLabelledBy, className, defaultValue, description, disabled, hideLabel, id, invalid, label, onChange, onKeyDown, readOnly, size = "md", value, ...restProps }, ref) {
     const innerRef = useRef(null);

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { IconButton } from \"@components/button\"\nimport { Field } from \"@components/field\"\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, {\n  forwardRef,\n  type InputHTMLAttributes,\n  useRef,\n  useState,\n} from \"react\"\n\nexport type SearchInputSize = \"lg\" | \"md\"\n\ninterface SearchInputBaseProps {\n  /** Helper text below the input. Styled as an error when `invalid`. */\n  description?: React.ReactNode\n  /** Triggers invalid state (error border, error description, aria-invalid). */\n  invalid?: boolean\n  /** Visual size — cascades to the icon, input, and clear button via Field's font-size custom property. Defaults to 'md'. */\n  size?: SearchInputSize\n}\n\ninterface SearchInputWithLabel extends SearchInputBaseProps {\n  \"aria-labelledby\"?: never\n  /** If true, the label is visually hidden but remains in the DOM/AT tree. */\n  hideLabel?: boolean\n  /** The visible label. */\n  label: React.ReactNode\n}\n\ninterface SearchInputWithAriaLabelledBy extends SearchInputBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  label?: never\n}\n\nexport type SearchInputProps =\n  | SearchInputWithAriaLabelledBy\n  | SearchInputWithLabel\n\n/**\n * Combines standard HTML input attributes with SearchInput's own props.\n * `type` is fixed to \"search\" and not exposed; `size` is redefined above.\n */\nexport type SearchInputElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof SearchInputProps | \"size\" | \"type\"\n> &\n  SearchInputProps\n\n/**\n * A search-specific input with a leading search icon and a trailing clear\n * (\"x\") button, built on `type=\"search\"`. Composes `Field` directly for\n * label, description, and state layout.\n *\n * @component\n */\nexport const SearchInput = forwardRef<\n  HTMLInputElement,\n  SearchInputElementProps\n>(function SearchInput(\n  {\n    \"aria-labelledby\": ariaLabelledBy,\n    className,\n    defaultValue,\n    description,\n    disabled,\n    hideLabel,\n    id,\n    invalid,\n    label,\n    onChange,\n    onKeyDown,\n    readOnly,\n    size = \"md\",\n    value,\n    ...restProps\n  }: SearchInputElementProps,\n  ref\n) {\n  const innerRef = useRef<HTMLInputElement | null>(null)\n  const setRefs = (node: HTMLInputElement | null) => {\n    innerRef.current = node\n    if (typeof ref === \"function\") ref(node)\n    else if (ref) {\n      ;(ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n    }\n  }\n\n  const stableId = useId()\n  const inputId = id || `tds-search-input-${stableId}`\n  const descriptionId = description ? `${inputId}-description` : undefined\n\n  const [uncontrolledHasValue, setUncontrolledHasValue] = useState(\n    () => String(defaultValue ?? \"\").length > 0\n  )\n  const hasValue =\n    value !== undefined ? String(value).length > 0 : uncontrolledHasValue\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (value === undefined) {\n      setUncontrolledHasValue(event.target.value.length > 0)\n    }\n    onChange?.(event)\n  }\n\n  const handleClear = () => {\n    const input = innerRef.current\n    if (!input) return\n\n    const nativeSetter = Object.getOwnPropertyDescriptor(\n      input.constructor.prototype,\n      \"value\"\n    )?.set\n    nativeSetter?.call(input, \"\")\n    input.dispatchEvent(new Event(\"input\", { bubbles: true }))\n    input.focus()\n    if (value === undefined) {\n      setUncontrolledHasValue(false)\n    }\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Escape\" && hasValue) {\n      event.stopPropagation()\n    }\n    onKeyDown?.(event)\n  }\n\n  const fieldClassName = classNames(\n    { \"tds-field--lg\": size === \"lg\" },\n    className\n  )\n\n  const fieldLabelProps = ariaLabelledBy\n    ? { \"aria-labelledby\": ariaLabelledBy }\n    : { hideLabel, label }\n\n  return (\n    <Field\n      {...fieldLabelProps}\n      className={fieldClassName}\n      description={description}\n      id={inputId}\n    >\n      <div\n        className={classNames(\"tds-search-input-control\", {\n          \"tds-search-input-control--has-value\": hasValue,\n        })}\n      >\n        <Icon\n          aria-hidden\n          className=\"tds-search-input-icon\"\n          symbol=\"general#search\"\n        />\n        <input\n          {...restProps}\n          aria-describedby={descriptionId}\n          aria-invalid={invalid || undefined}\n          aria-labelledby={ariaLabelledBy}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          id={inputId}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          readOnly={readOnly}\n          ref={setRefs}\n          type=\"search\"\n          value={value}\n        />\n        <IconButton\n          aria-label=\"Clear\"\n          icon={\n            <Icon\n              aria-hidden\n              className=\"tds-search-input-clear-icon\"\n              symbol=\"general#x\"\n            />\n          }\n          kind=\"neutral-inline\"\n          onClick={handleClear}\n          tabIndex={-1}\n        />\n      </div>\n    </Field>\n  )\n})\n\nSearchInput.displayName = \"SearchInput\"\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { IconButton } from \"@components/button\"\nimport { Field } from \"@components/field\"\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, {\n  forwardRef,\n  type InputHTMLAttributes,\n  useRef,\n  useState,\n} from \"react\"\n\nexport type SearchInputSize = \"lg\" | \"md\"\n\ninterface SearchInputBaseProps {\n  /** Helper text below the input. Styled as an error when `invalid`. */\n  description?: React.ReactNode\n  /** Triggers invalid state (error border, error description, aria-invalid). */\n  invalid?: boolean\n  /** Visual size — cascades to the icon, input, and clear button via Field's font-size custom property. Defaults to 'md'. */\n  size?: SearchInputSize\n}\n\ninterface SearchInputWithLabel extends SearchInputBaseProps {\n  \"aria-labelledby\"?: never\n  /** If true, the label is visually hidden but remains in the DOM/AT tree. */\n  hideLabel?: boolean\n  /** The visible label. */\n  label: React.ReactNode\n}\n\ninterface SearchInputWithAriaLabelledBy extends SearchInputBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  label?: never\n}\n\nexport type SearchInputProps =\n  | SearchInputWithAriaLabelledBy\n  | SearchInputWithLabel\n\n/**\n * Combines standard HTML input attributes with SearchInput's own props.\n * `type` is fixed to \"search\" and not exposed; `size` is redefined above.\n */\nexport type SearchInputElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof SearchInputProps | \"size\" | \"type\"\n> &\n  SearchInputProps\n\n/**\n * A search-specific input with a leading search icon and a trailing clear\n * (\"x\") button, built on `type=\"search\"`. Composes `Field` directly for\n * label, description, and state layout.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-searchinput--docs | Storybook Documentation}\n */\nexport const SearchInput = forwardRef<\n  HTMLInputElement,\n  SearchInputElementProps\n>(function SearchInput(\n  {\n    \"aria-labelledby\": ariaLabelledBy,\n    className,\n    defaultValue,\n    description,\n    disabled,\n    hideLabel,\n    id,\n    invalid,\n    label,\n    onChange,\n    onKeyDown,\n    readOnly,\n    size = \"md\",\n    value,\n    ...restProps\n  }: SearchInputElementProps,\n  ref\n) {\n  const innerRef = useRef<HTMLInputElement | null>(null)\n  const setRefs = (node: HTMLInputElement | null) => {\n    innerRef.current = node\n    if (typeof ref === \"function\") ref(node)\n    else if (ref) {\n      ;(ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n    }\n  }\n\n  const stableId = useId()\n  const inputId = id || `tds-search-input-${stableId}`\n  const descriptionId = description ? `${inputId}-description` : undefined\n\n  const [uncontrolledHasValue, setUncontrolledHasValue] = useState(\n    () => String(defaultValue ?? \"\").length > 0\n  )\n  const hasValue =\n    value !== undefined ? String(value).length > 0 : uncontrolledHasValue\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (value === undefined) {\n      setUncontrolledHasValue(event.target.value.length > 0)\n    }\n    onChange?.(event)\n  }\n\n  const handleClear = () => {\n    const input = innerRef.current\n    if (!input) return\n\n    const nativeSetter = Object.getOwnPropertyDescriptor(\n      input.constructor.prototype,\n      \"value\"\n    )?.set\n    nativeSetter?.call(input, \"\")\n    input.dispatchEvent(new Event(\"input\", { bubbles: true }))\n    input.focus()\n    if (value === undefined) {\n      setUncontrolledHasValue(false)\n    }\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Escape\" && hasValue) {\n      event.stopPropagation()\n    }\n    onKeyDown?.(event)\n  }\n\n  const fieldClassName = classNames(\n    { \"tds-field--lg\": size === \"lg\" },\n    className\n  )\n\n  const fieldLabelProps = ariaLabelledBy\n    ? { \"aria-labelledby\": ariaLabelledBy }\n    : { hideLabel, label }\n\n  return (\n    <Field\n      {...fieldLabelProps}\n      className={fieldClassName}\n      description={description}\n      id={inputId}\n    >\n      <div\n        className={classNames(\"tds-search-input-control\", {\n          \"tds-search-input-control--has-value\": hasValue,\n        })}\n      >\n        <Icon\n          aria-hidden\n          className=\"tds-search-input-icon\"\n          symbol=\"general#search\"\n        />\n        <input\n          {...restProps}\n          aria-describedby={descriptionId}\n          aria-invalid={invalid || undefined}\n          aria-labelledby={ariaLabelledBy}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          id={inputId}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          readOnly={readOnly}\n          ref={setRefs}\n          type=\"search\"\n          value={value}\n        />\n        <IconButton\n          aria-label=\"Clear\"\n          icon={\n            <Icon\n              aria-hidden\n              className=\"tds-search-input-clear-icon\"\n              symbol=\"general#x\"\n            />\n          }\n          kind=\"neutral-inline\"\n          onClick={handleClear}\n          tabIndex={-1}\n        />\n      </div>\n    </Field>\n  )\n})\n\nSearchInput.displayName = \"SearchInput\"\n"],"names":["React"],"mappings":"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"}

package/dist/components/sidenav/index.js

@@ -1,4 +1,4 @@
-import '../../packages/tapestry-wc/dist/components/p-nyMzpSUR.js';
+import '../../packages/tapestry-wc/dist/components/p-EYzqvkpp.js';
 import { defineCustomElement } from '../../packages/tapestry-wc/dist/components/tds-sidenav.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-item.js';
 import { defineCustomElement as defineCustomElement$3 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js';