@planningcenter/tapestry 4.11.0 → 4.12.0-rc.0

package/dist/components/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../field/index.css\"\nimport \"./index.css\"\n\nimport { IconButton } from \"@components/button\"\nimport LoadingSpinner from \"@components/internal/LoadingSpinner\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode, useContext } from \"react\"\nimport {\n  Button,\n  Collection,\n  ComboBox as AriaComboBox,\n  type ComboBoxProps as AriaComboBoxProps,\n  ComboBoxStateContext,\n  Input,\n  type Key,\n  Label,\n  ListBox,\n  ListBoxItem,\n  type ListBoxItemProps,\n  ListBoxLoadMoreItem,\n  type ListBoxProps as AriaListBoxProps,\n  ListBoxSection,\n  type ListBoxSectionProps,\n  Popover,\n  Text,\n} from \"react-aria-components/ComboBox\"\nimport { Group } from \"react-aria-components/Group\"\nimport { Header } from \"react-aria-components/Header\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport type ComboBoxLoadingState =\n  | \"error\"\n  | \"filtering\"\n  | \"idle\"\n  | \"loading\"\n  | \"loadingMore\"\n  | \"sorting\"\n\ntype ComboBoxChildren<T extends object> = NonNullable<\n  AriaListBoxProps<T>[\"children\"]\n>\n\nexport interface ComboBoxProps<T extends object = object> {\n  /** The contents of the listbox. */\n  children: ComboBoxChildren<T>\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: ReactNode\n  /** Disables the field and trigger button. */\n  disabled?: boolean\n  /** Custom filter function for determining if an item should appear in the list. */\n  filter?: (textValue: string, inputValue: string) => boolean\n  /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n  hideLabel?: boolean\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /**\n   * Async loading state for the listbox.\n   * - `\"loading\"`: while the collection is empty, replaces the empty state with a spinner.\n   * - `\"loadingMore\"`: shows an inline spinner at the bottom of the listbox (use with `onLoadMore`).\n   * - Other values render as `\"idle\"`.\n   */\n  loadingState?: ComboBoxLoadingState\n  /**\n   * The interaction that opens the popover.\n   * - `\"input\"`: opens when the user enters text in the input.\n   * - `\"focus\"`: opens when the user focuses (via click or keyboard) into the input.\n   * - `\"manual\"`: opens only via the trigger button or arrow keys.\n   * @default \"focus\"\n   */\n  menuTrigger?: \"focus\" | \"input\" | \"manual\"\n  /**\n   * Called when the selected value(s) change.\n   * Receives `Key[]` when `selectionMode` is `\"multiple\"`, otherwise `Key | null`.\n   */\n  onChange?: ((value: Key | null) => void) | ((value: Key[]) => void)\n  /** Called when the user scrolls near the bottom of the listbox. Pair with `loadingState` for infinite scroll. */\n  onLoadMore?: () => void\n  /** Placeholder text for the input. */\n  placeholder?: string\n  /** If `true`, allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** Content to display when there are no items in the list. Defaults to \"No results\". */\n  renderEmptyState?: ReactNode | (() => ReactNode)\n  /** If `true`, appends an asterisk at the end of the label text. */\n  required?: boolean\n  /**\n   * If `true`, renders a button after the input that clears its text. Only\n   * applies when `menuTrigger` is `\"focus\"`, where no trigger button is rendered.\n   */\n  showClearButton?: boolean\n  /** If `true`, renders a search icon before the input. */\n  showSearchIcon?: boolean\n  /** The size of the combo box. */\n  size?: ComboBoxSize\n}\n\ntype AriaComboBoxPropsToOmit = \"slot\"\n\ntype AriaComboBoxPropsToInclude =\n  | \"allowsEmptyCollection\"\n  | \"defaultItems\"\n  | \"defaultValue\"\n  | \"disabledKeys\"\n  | \"inputValue\"\n  | \"items\"\n  | \"name\"\n  | \"onInputChange\"\n  | \"selectionMode\"\n  | \"value\"\n\nexport type ComboBoxElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    AriaComboBoxProps<T, \"single\" | \"multiple\">,\n    ComboBoxProps<T>,\n    AriaComboBoxPropsToOmit,\n    AriaComboBoxPropsToInclude\n  >\n\nfunction resolveEmptyState(value: ReactNode | (() => ReactNode)): ReactNode {\n  return typeof value === \"function\" ? value() : value\n}\n\nfunction ClearButton() {\n  const state = useContext(ComboBoxStateContext)\n\n  return (\n    <IconButton\n      aria-label=\"Clear\"\n      className=\"tds-combo-box-clear-button\"\n      data-input-empty={!state?.inputValue ? true : undefined}\n      icon={\n        <Icon\n          aria-hidden\n          className=\"tds-combo-box-clear-icon\"\n          symbol=\"general#x\"\n        />\n      }\n      kind=\"neutral-inline\"\n      onClick={() => state?.setInputValue(\"\")}\n      onMouseDown={(event) => event.preventDefault()}\n      tabIndex={-1}\n    />\n  )\n}\n\n/**\n * A combo box combines a text input with a filterable popover\n * listbox, allowing users to type to search and select from a list of options.\n *\n * It supports both single and multiple selection (`selectionMode`), custom filtering,\n * and asynchronous data loading with infinite scroll capabilities (`loadingState` and `onLoadMore`).\n * Collections can be either static or dynamic, managed via the `children`, `items`,\n * or `defaultItems` props. To construct the dropdown list, compose this component\n * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-combobox--docs | Storybook Documentation}\n */\nexport function ComboBox<T extends object>({\n  allowsEmptyCollection = true,\n  children,\n  className,\n  description,\n  disabled,\n  filter,\n  hideLabel,\n  invalid,\n  label,\n  loadingState,\n  menuTrigger = \"focus\",\n  onChange,\n  onLoadMore,\n  placeholder,\n  readOnly,\n  renderEmptyState = \"No results\",\n  required,\n  showClearButton,\n  showSearchIcon,\n  size = \"md\",\n  ...restProps\n}: ComboBoxElementProps<T>) {\n  const combinedClassName = classNames(\n    \"tds-field tds-combo-box\",\n    {\n      \"tds-combo-box--lg\": size === \"lg\",\n      \"tds-field--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  const loadMoreItem = onLoadMore && (\n    <ListBoxLoadMoreItem\n      className=\"tds-combo-box-load-more\"\n      isLoading={loadingState === \"loadingMore\"}\n      onLoadMore={onLoadMore}\n    >\n      <div aria-label=\"Loading more\" role=\"status\">\n        <LoadingSpinner />\n      </div>\n    </ListBoxLoadMoreItem>\n  )\n\n  const renderChildren = () => {\n    if (typeof children === \"function\") {\n      return (\n        <Collection items={restProps.items ?? restProps.defaultItems}>\n          {children}\n        </Collection>\n      )\n    }\n    return children\n  }\n\n  return (\n    // React Aria's ComboBox is generic over selection mode (M). We instantiate\n    // it with the union \"single\" | \"multiple\" so value/defaultValue/selectionMode\n    // accept both shapes. onChange still needs a cast because our type is a union\n    // of function types (to allow narrower handlers like\n    // `setValue: (Key|null) => void`), which isn't assignable to RAC's\n    // single-function signature.\n    <AriaComboBox<T, \"single\" | \"multiple\">\n      {...restProps}\n      allowsEmptyCollection={allowsEmptyCollection}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultFilter={filter}\n      isDisabled={disabled}\n      isReadOnly={readOnly}\n      isRequired={required}\n      menuTrigger={menuTrigger}\n      onChange={onChange as (value: Key | Key[] | null) => void}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <Group className=\"tds-field-control tds-combo-box-field\">\n        {showSearchIcon && (\n          <Icon\n            aria-hidden\n            className=\"tds-combo-box-search-icon\"\n            symbol=\"general#search\"\n          />\n        )}\n        <Input\n          aria-invalid={invalid || undefined}\n          className=\"tds-combo-box-input\"\n          placeholder={placeholder}\n        />\n        {menuTrigger !== \"focus\" && !readOnly && (\n          <Button className=\"tds-combo-box-button tds-btn tds-btn--infield\">\n            <Icon aria-hidden symbol=\"general#down-caret\" />\n          </Button>\n        )}\n        {showClearButton &&\n          menuTrigger === \"focus\" &&\n          !readOnly &&\n          !disabled && <ClearButton />}\n      </Group>\n      <Popover className=\"tds-combo-box-popover\">\n        <ListBox\n          className=\"tds-combo-box-list\"\n          renderEmptyState={\n            allowsEmptyCollection\n              ? () => (\n                  <div\n                    aria-label={\n                      loadingState === \"loading\" ? \"Loading\" : undefined\n                    }\n                    className=\"tds-combo-box-empty-state\"\n                    role={loadingState === \"loading\" ? \"status\" : undefined}\n                  >\n                    {loadingState === \"loading\" ? (\n                      <LoadingSpinner />\n                    ) : (\n                      resolveEmptyState(renderEmptyState)\n                    )}\n                  </div>\n                )\n              : undefined\n          }\n        >\n          {renderChildren()}\n          {loadMoreItem}\n        </ListBox>\n      </Popover>\n      {description && (\n        <Text className=\"tds-field-description\" slot=\"description\">\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaComboBox>\n  )\n}\n\nexport interface ComboBoxItemProps {\n  /** Disables the item. */\n  disabled?: boolean\n}\n\ntype AriaListBoxItemPropsToOmit = \"isDisabled\"\n\ntype AriaListBoxItemPropsToInclude = \"onAction\" | \"textValue\" | \"value\"\n\nexport type ComboBoxItemElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    ListBoxItemProps<T>,\n    ComboBoxItemProps,\n    AriaListBoxItemPropsToOmit,\n    AriaListBoxItemPropsToInclude\n  >\n\n/**\n * A selectable option within a {@link ComboBox}. Renders as a listbox item.\n *\n * Provide an `id` (or `key` when rendering from a collection) to identify the\n * option, and `textValue` when the visible children are not plain text so\n * type-ahead and screen readers have a stable label to use.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-combobox--docs | Storybook Documentation}\n */\nexport function ComboBoxItem<T extends object>({\n  className,\n  disabled,\n  ...restProps\n}: ComboBoxItemElementProps<T>) {\n  return (\n    <ListBoxItem\n      {...restProps}\n      className={classNames(\"tds-combo-box-list-item\", className)}\n      isDisabled={disabled}\n    />\n  )\n}\n\nexport interface ComboBoxSectionProps {\n  /** The items rendered within the section. */\n  children: ReactNode\n  /** Optional heading text rendered above the section's items. */\n  title?: string\n}\n\ntype AriaListBoxSectionPropsToInclude = \"dependencies\"\n\nexport type ComboBoxSectionElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    ListBoxSectionProps<T>,\n    ComboBoxSectionProps,\n    never,\n    AriaListBoxSectionPropsToInclude\n  >\n\n/**\n * A group of related {@link ComboBoxItem}s within a {@link ComboBox}. Renders\n * an optional `title` heading above its items.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-combobox--docs | Storybook Documentation}\n */\nexport function ComboBoxSection<T extends object>({\n  children,\n  className,\n  title,\n  ...restProps\n}: ComboBoxSectionElementProps<T>) {\n  return (\n    <ListBoxSection\n      {...restProps}\n      className={classNames(\"tds-combo-box-list-section\", className)}\n    >\n      {title && (\n        <Header className=\"tds-combo-box-section-header\">{title}</Header>\n      )}\n      {children}\n    </ListBoxSection>\n  )\n}\n"],"names":["AriaComboBox"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../field/index.css\"\nimport \"./index.css\"\n\nimport { IconButton } from \"@components/button\"\nimport LoadingSpinner from \"@components/internal/LoadingSpinner\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode, useContext } from \"react\"\nimport {\n  Button,\n  Collection,\n  ComboBox as AriaComboBox,\n  type ComboBoxProps as AriaComboBoxProps,\n  ComboBoxStateContext,\n  Input,\n  type Key,\n  Label,\n  ListBox,\n  ListBoxItem,\n  type ListBoxItemProps,\n  ListBoxLoadMoreItem,\n  type ListBoxProps as AriaListBoxProps,\n  ListBoxSection,\n  type ListBoxSectionProps,\n  Popover,\n  Text,\n} from \"react-aria-components/ComboBox\"\nimport { Group } from \"react-aria-components/Group\"\nimport { Header } from \"react-aria-components/Header\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport type ComboBoxLoadingState =\n  | \"error\"\n  | \"filtering\"\n  | \"idle\"\n  | \"loading\"\n  | \"loadingMore\"\n  | \"sorting\"\n\ntype ComboBoxChildren<T extends object> = NonNullable<\n  AriaListBoxProps<T>[\"children\"]\n>\n\nexport interface ComboBoxProps<T extends object = object> {\n  /**\n   * If `true`, keeps typed text that does not match an option. Turn it on when\n   * ComboBox is a standalone search and the suggestions are shortcuts. Leave it\n   * off in forms, where the value needs to match one of the options.\n   */\n  allowsCustomValue?: boolean\n  /** The contents of the listbox. */\n  children: ComboBoxChildren<T>\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: ReactNode\n  /** Disables the field and trigger button. */\n  disabled?: boolean\n  /** Custom filter function for determining if an item should appear in the list. */\n  filter?: (textValue: string, inputValue: string) => boolean\n  /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n  hideLabel?: boolean\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /**\n   * Async loading state for the listbox.\n   * - `\"loading\"`: while the collection is empty, replaces the empty state with a spinner.\n   * - `\"loadingMore\"`: shows an inline spinner at the bottom of the listbox (use with `onLoadMore`).\n   * - Other values render as `\"idle\"`.\n   */\n  loadingState?: ComboBoxLoadingState\n  /**\n   * The interaction that opens the popover.\n   * - `\"input\"`: opens when the user enters text in the input.\n   * - `\"focus\"`: opens when the user focuses (via click or keyboard) into the input.\n   * - `\"manual\"`: opens only via the trigger button or arrow keys.\n   * @default \"focus\"\n   */\n  menuTrigger?: \"focus\" | \"input\" | \"manual\"\n  /**\n   * Called when the selected value(s) change.\n   * Receives `Key[]` when `selectionMode` is `\"multiple\"`, otherwise `Key | null`.\n   */\n  onChange?: ((value: Key | null) => void) | ((value: Key[]) => void)\n  /** Called when the user scrolls near the bottom of the listbox. Pair with `loadingState` for infinite scroll. */\n  onLoadMore?: () => void\n  /** Placeholder text for the input. */\n  placeholder?: string\n  /** If `true`, allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** Content to display when there are no items in the list. Defaults to \"No results\". */\n  renderEmptyState?: ReactNode | (() => ReactNode)\n  /** If `true`, appends an asterisk at the end of the label text. */\n  required?: boolean\n  /**\n   * If `true`, renders a button after the input that clears its text. Only\n   * applies when `menuTrigger` is `\"focus\"`, where no trigger button is rendered.\n   */\n  showClearButton?: boolean\n  /** If `true`, renders a search icon before the input. */\n  showSearchIcon?: boolean\n  /** The size of the combo box. */\n  size?: ComboBoxSize\n}\n\ntype AriaComboBoxPropsToOmit = \"slot\"\n\ntype AriaComboBoxPropsToInclude =\n  | \"allowsEmptyCollection\"\n  | \"defaultItems\"\n  | \"defaultValue\"\n  | \"disabledKeys\"\n  | \"inputValue\"\n  | \"items\"\n  | \"name\"\n  | \"onInputChange\"\n  | \"selectionMode\"\n  | \"value\"\n\nexport type ComboBoxElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    AriaComboBoxProps<T, \"single\" | \"multiple\">,\n    ComboBoxProps<T>,\n    AriaComboBoxPropsToOmit,\n    AriaComboBoxPropsToInclude\n  >\n\nfunction resolveEmptyState(value: ReactNode | (() => ReactNode)): ReactNode {\n  return typeof value === \"function\" ? value() : value\n}\n\nfunction ClearButton() {\n  const state = useContext(ComboBoxStateContext)\n\n  return (\n    <IconButton\n      aria-label=\"Clear\"\n      className=\"tds-combo-box-clear-button\"\n      data-input-empty={!state?.inputValue ? true : undefined}\n      icon={\n        <Icon\n          aria-hidden\n          className=\"tds-combo-box-clear-icon\"\n          symbol=\"general#x\"\n        />\n      }\n      kind=\"neutral-inline\"\n      onClick={() => state?.setInputValue(\"\")}\n      onMouseDown={(event) => event.preventDefault()}\n      tabIndex={-1}\n    />\n  )\n}\n\n/**\n * A combo box combines a text input with a filterable popover\n * listbox, allowing users to type to search and select from a list of options.\n *\n * It supports both single and multiple selection (`selectionMode`), custom filtering,\n * and asynchronous data loading with infinite scroll capabilities (`loadingState` and `onLoadMore`).\n * Collections can be either static or dynamic, managed via the `children`, `items`,\n * or `defaultItems` props. To construct the dropdown list, compose this component\n * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-combobox--docs | Storybook Documentation}\n */\nexport function ComboBox<T extends object>({\n  allowsEmptyCollection = true,\n  children,\n  className,\n  description,\n  disabled,\n  filter,\n  hideLabel,\n  invalid,\n  label,\n  loadingState,\n  menuTrigger = \"focus\",\n  onChange,\n  onLoadMore,\n  placeholder,\n  readOnly,\n  renderEmptyState = \"No results\",\n  required,\n  showClearButton,\n  showSearchIcon,\n  size = \"md\",\n  ...restProps\n}: ComboBoxElementProps<T>) {\n  const combinedClassName = classNames(\n    \"tds-field tds-combo-box\",\n    {\n      \"tds-combo-box--lg\": size === \"lg\",\n      \"tds-field--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  const loadMoreItem = onLoadMore && (\n    <ListBoxLoadMoreItem\n      className=\"tds-combo-box-load-more\"\n      isLoading={loadingState === \"loadingMore\"}\n      onLoadMore={onLoadMore}\n    >\n      <div aria-label=\"Loading more\" role=\"status\">\n        <LoadingSpinner />\n      </div>\n    </ListBoxLoadMoreItem>\n  )\n\n  const renderChildren = () => {\n    if (typeof children === \"function\") {\n      return (\n        <Collection items={restProps.items ?? restProps.defaultItems}>\n          {children}\n        </Collection>\n      )\n    }\n    return children\n  }\n\n  return (\n    // React Aria's ComboBox is generic over selection mode (M). We instantiate\n    // it with the union \"single\" | \"multiple\" so value/defaultValue/selectionMode\n    // accept both shapes. onChange still needs a cast because our type is a union\n    // of function types (to allow narrower handlers like\n    // `setValue: (Key|null) => void`), which isn't assignable to RAC's\n    // single-function signature.\n    <AriaComboBox<T, \"single\" | \"multiple\">\n      {...restProps}\n      allowsEmptyCollection={allowsEmptyCollection}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultFilter={filter}\n      isDisabled={disabled}\n      isReadOnly={readOnly}\n      isRequired={required}\n      menuTrigger={menuTrigger}\n      onChange={onChange as (value: Key | Key[] | null) => void}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <Group className=\"tds-field-control tds-combo-box-field\">\n        {showSearchIcon && (\n          <Icon\n            aria-hidden\n            className=\"tds-combo-box-search-icon\"\n            symbol=\"general#search\"\n          />\n        )}\n        <Input\n          aria-invalid={invalid || undefined}\n          className=\"tds-combo-box-input\"\n          placeholder={placeholder}\n        />\n        {menuTrigger !== \"focus\" && !readOnly && (\n          <Button className=\"tds-combo-box-button tds-btn tds-btn--infield\">\n            <Icon aria-hidden symbol=\"general#down-caret\" />\n          </Button>\n        )}\n        {showClearButton &&\n          menuTrigger === \"focus\" &&\n          !readOnly &&\n          !disabled && <ClearButton />}\n      </Group>\n      <Popover className=\"tds-combo-box-popover\">\n        <ListBox\n          className=\"tds-combo-box-list\"\n          renderEmptyState={\n            allowsEmptyCollection\n              ? () => (\n                  <div\n                    aria-label={\n                      loadingState === \"loading\" ? \"Loading\" : undefined\n                    }\n                    className=\"tds-combo-box-empty-state\"\n                    role={loadingState === \"loading\" ? \"status\" : undefined}\n                  >\n                    {loadingState === \"loading\" ? (\n                      <LoadingSpinner />\n                    ) : (\n                      resolveEmptyState(renderEmptyState)\n                    )}\n                  </div>\n                )\n              : undefined\n          }\n        >\n          {renderChildren()}\n          {loadMoreItem}\n        </ListBox>\n      </Popover>\n      {description && (\n        <Text className=\"tds-field-description\" slot=\"description\">\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaComboBox>\n  )\n}\n\nexport interface ComboBoxItemProps {\n  /** Disables the item. */\n  disabled?: boolean\n}\n\ntype AriaListBoxItemPropsToOmit = \"isDisabled\"\n\ntype AriaListBoxItemPropsToInclude = \"onAction\" | \"textValue\" | \"value\"\n\nexport type ComboBoxItemElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    ListBoxItemProps<T>,\n    ComboBoxItemProps,\n    AriaListBoxItemPropsToOmit,\n    AriaListBoxItemPropsToInclude\n  >\n\n/**\n * A selectable option within a {@link ComboBox}. Renders as a listbox item.\n *\n * Provide an `id` (or `key` when rendering from a collection) to identify the\n * option, and `textValue` when the visible children are not plain text so\n * type-ahead and screen readers have a stable label to use.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-combobox--docs | Storybook Documentation}\n */\nexport function ComboBoxItem<T extends object>({\n  className,\n  disabled,\n  ...restProps\n}: ComboBoxItemElementProps<T>) {\n  return (\n    <ListBoxItem\n      {...restProps}\n      className={classNames(\"tds-combo-box-list-item\", className)}\n      isDisabled={disabled}\n    />\n  )\n}\n\nexport interface ComboBoxSectionProps {\n  /** The items rendered within the section. */\n  children: ReactNode\n  /** Optional heading text rendered above the section's items. */\n  title?: string\n}\n\ntype AriaListBoxSectionPropsToInclude = \"dependencies\"\n\nexport type ComboBoxSectionElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    ListBoxSectionProps<T>,\n    ComboBoxSectionProps,\n    never,\n    AriaListBoxSectionPropsToInclude\n  >\n\n/**\n * A group of related {@link ComboBoxItem}s within a {@link ComboBox}. Renders\n * an optional `title` heading above its items.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-combobox--docs | Storybook Documentation}\n */\nexport function ComboBoxSection<T extends object>({\n  children,\n  className,\n  title,\n  ...restProps\n}: ComboBoxSectionElementProps<T>) {\n  return (\n    <ListBoxSection\n      {...restProps}\n      className={classNames(\"tds-combo-box-list-section\", className)}\n    >\n      {title && (\n        <Header className=\"tds-combo-box-section-header\">{title}</Header>\n      )}\n      {children}\n    </ListBoxSection>\n  )\n}\n"],"names":["AriaComboBox"],"mappings":"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"}

package/dist/components/internal/alert-dialog/AlertDialog.d.ts

@@ -0,0 +1,56 @@
+import "../../modal/index.css";
+import "./index.css";
+import React, { type HTMLAttributes } from "react";
+export type AlertDialogType = "danger" | "error" | "info" | "success" | "warning";
+export interface AlertDialogProps {
+    /** Default `'Cancel'`. The cancel button's label. */
+    cancelButtonLabel?: string;
+    /**
+     * The content explaining the alert. Becomes the alert's accessible
+     * description. A string is wrapped in a `<p>`.
+     */
+    children: React.ReactNode;
+    /** Default `'Okay'`. The confirm button's label. */
+    confirmButtonLabel?: string;
+    /** Default `false`. `true` hides the cancel button, for simple notifications. */
+    hideCancel?: boolean;
+    /** Fires when the cancel button is clicked, or Esc is pressed. */
+    onCancel?: () => void;
+    /**
+     * Fires when the confirm button is clicked, or Esc is pressed when
+     * `hideCancel` is set.
+     */
+    onConfirm?: () => void;
+    /** Controls the alert. */
+    open: boolean;
+    /** The alert's accessible name, displayed as the heading. */
+    title: string;
+    /**
+     * Default `'warning'`. Sets the status icon and its color. `'danger'` also
+     * renders the confirm button as a `delete` button.
+     */
+    type?: AlertDialogType;
+}
+export type AlertDialogElementProps = Omit<HTMLAttributes<HTMLElement>, keyof AlertDialogProps | "role"> & AlertDialogProps;
+/**
+ * A modal dialog that interrupts the user with an important message and asks
+ * them to confirm or cancel. Renders with `role="alertdialog"` and shares
+ * `Modal`'s overlay, frame, and animation styles.
+ *
+ * Neither button closes the alert on its own — close it by setting `open` to
+ * `false` from `onConfirm` and `onCancel`.
+ *
+ * Esc fires `onCancel`, or `onConfirm` when `hideCancel` is set, so the alert
+ * is always dismissible from the keyboard. The exception is a `danger` alert
+ * with `hideCancel`, where Esc does nothing so it can't confirm a destructive
+ * action. Backdrop clicks never dismiss the alert.
+ *
+ * Rest props, including `data-*`, land on the dialog. The buttons carry
+ * `data-alert-dialog-action="cancel" | "confirm"`, so non-React environments
+ * (e.g. Rails + Stimulus) can handle their clicks from the dialog.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/internal-alertdialog--docs | Storybook Documentation}
+ */
+export declare const AlertDialog: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "role" | keyof AlertDialogProps> & AlertDialogProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=AlertDialog.d.ts.map

package/dist/components/internal/alert-dialog/AlertDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/alert-dialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAA;AAC9B,OAAO,aAAa,CAAA;AAMpB,OAAO,KAAK,EAAE,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAI9D,MAAM,MAAM,eAAe,GACvB,QAAQ,GACR,OAAO,GACP,MAAM,GACN,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iFAAiF;IACjF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,0BAA0B;IAC1B,IAAI,EAAE,OAAO,CAAA;IACb,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB;AAED,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,cAAc,CAAC,WAAW,CAAC,EAC3B,MAAM,gBAAgB,GAAG,MAAM,CAChC,GACC,gBAAgB,CAAA;AAUlB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,WAAW,iKA+EvB,CAAA"}

package/dist/components/internal/alert-dialog/AlertDialog.js

@@ -0,0 +1,68 @@
+import '../../button/ActionsDropdownIconButton.js';
+import { Button } from '../../button/Button.js';
+import '../../button/DropdownButton.js';
+import '../../button/DropdownIconButton.js';
+import '../../button/IconButton.js';
+import '../../button/LoadingButton.js';
+import '../../button/PageHeaderActionsDropdownButton.js';
+import Icon from '../../../utilities/Icon.js';
+import { useId } from '../../../utilities/useId.js';
+import classNames from 'classnames';
+import React__default, { forwardRef } from 'react';
+import { Dialog } from 'react-aria-components/Dialog';
+import { ModalOverlay, Modal } from 'react-aria-components/Modal';
+
+const ICON_SYMBOLS = {
+    danger: "general#exclamation-triangle",
+    error: "general#x-circle",
+    info: "general#info-circle",
+    success: "general#check-circle",
+    warning: "general#exclamation-triangle",
+};
+/**
+ * A modal dialog that interrupts the user with an important message and asks
+ * them to confirm or cancel. Renders with `role="alertdialog"` and shares
+ * `Modal`'s overlay, frame, and animation styles.
+ *
+ * Neither button closes the alert on its own — close it by setting `open` to
+ * `false` from `onConfirm` and `onCancel`.
+ *
+ * Esc fires `onCancel`, or `onConfirm` when `hideCancel` is set, so the alert
+ * is always dismissible from the keyboard. The exception is a `danger` alert
+ * with `hideCancel`, where Esc does nothing so it can't confirm a destructive
+ * action. Backdrop clicks never dismiss the alert.
+ *
+ * Rest props, including `data-*`, land on the dialog. The buttons carry
+ * `data-alert-dialog-action="cancel" | "confirm"`, so non-React environments
+ * (e.g. Rails + Stimulus) can handle their clicks from the dialog.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/internal-alertdialog--docs | Storybook Documentation}
+ */
+const AlertDialog = forwardRef(function AlertDialog({ cancelButtonLabel = "Cancel", children, className, confirmButtonLabel = "Okay", hideCancel = false, id, onCancel, onConfirm, open, title, type = "warning", ...restProps }, ref) {
+    const stableId = useId();
+    const alertDialogId = id || `tds-alert-dialog-${stableId}`;
+    const titleId = `${alertDialogId}-title`;
+    const bodyId = `${alertDialogId}-body`;
+    return (React__default.createElement(ModalOverlay, { className: "tds-modal-overlay", isDismissable: false, isKeyboardDismissDisabled: hideCancel && type === "danger", isOpen: open, onOpenChange: (isOpen) => {
+            if (isOpen)
+                return;
+            if (hideCancel)
+                onConfirm?.();
+            else
+                onCancel?.();
+        } },
+        React__default.createElement(Modal, { className: "tds-modal-frame" },
+            React__default.createElement(Dialog, { ...restProps, ref: ref, "aria-describedby": bodyId, "aria-labelledby": titleId, className: classNames("tds-modal", "tds-alert-dialog", className), id: alertDialogId, role: "alertdialog" },
+                React__default.createElement("header", { className: "tds-alert-dialog-header" },
+                    React__default.createElement(Icon, { "aria-hidden": true, className: `tds-alert-dialog-icon tds-alert-dialog-icon--${type}`, symbol: ICON_SYMBOLS[type] }),
+                    React__default.createElement("h2", { className: "tds-alert-dialog-title", id: titleId }, title)),
+                React__default.createElement("div", { className: "tds-alert-dialog-body", id: bodyId }, typeof children === "string" ? React__default.createElement("p", null, children) : children),
+                React__default.createElement("footer", { className: "tds-modal-footer tds-alert-dialog-footer" },
+                    !hideCancel && (React__default.createElement(Button, { "data-alert-dialog-action": "cancel", kind: "ghost", label: cancelButtonLabel, onClick: onCancel })),
+                    React__default.createElement(Button, { "data-alert-dialog-action": "confirm", kind: type === "danger" ? "delete" : "primary", label: confirmButtonLabel, onClick: onConfirm }))))));
+});
+AlertDialog.displayName = "AlertDialog";
+
+export { AlertDialog };
+//# sourceMappingURL=AlertDialog.js.map

package/dist/components/internal/alert-dialog/AlertDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.js","sources":["../../../../src/components/internal/alert-dialog/AlertDialog.tsx"],"sourcesContent":["import \"../../modal/index.css\"\nimport \"./index.css\"\n\nimport { Button } from \"@components/button\"\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type HTMLAttributes } from \"react\"\nimport { Dialog } from \"react-aria-components/Dialog\"\nimport { Modal as AriaModal, ModalOverlay } from \"react-aria-components/Modal\"\n\nexport type AlertDialogType =\n  | \"danger\"\n  | \"error\"\n  | \"info\"\n  | \"success\"\n  | \"warning\"\n\nexport interface AlertDialogProps {\n  /** Default `'Cancel'`. The cancel button's label. */\n  cancelButtonLabel?: string\n  /**\n   * The content explaining the alert. Becomes the alert's accessible\n   * description. A string is wrapped in a `<p>`.\n   */\n  children: React.ReactNode\n  /** Default `'Okay'`. The confirm button's label. */\n  confirmButtonLabel?: string\n  /** Default `false`. `true` hides the cancel button, for simple notifications. */\n  hideCancel?: boolean\n  /** Fires when the cancel button is clicked, or Esc is pressed. */\n  onCancel?: () => void\n  /**\n   * Fires when the confirm button is clicked, or Esc is pressed when\n   * `hideCancel` is set.\n   */\n  onConfirm?: () => void\n  /** Controls the alert. */\n  open: boolean\n  /** The alert's accessible name, displayed as the heading. */\n  title: string\n  /**\n   * Default `'warning'`. Sets the status icon and its color. `'danger'` also\n   * renders the confirm button as a `delete` button.\n   */\n  type?: AlertDialogType\n}\n\nexport type AlertDialogElementProps = Omit<\n  HTMLAttributes<HTMLElement>,\n  keyof AlertDialogProps | \"role\"\n> &\n  AlertDialogProps\n\nconst ICON_SYMBOLS: Record<AlertDialogType, string> = {\n  danger: \"general#exclamation-triangle\",\n  error: \"general#x-circle\",\n  info: \"general#info-circle\",\n  success: \"general#check-circle\",\n  warning: \"general#exclamation-triangle\",\n}\n\n/**\n * A modal dialog that interrupts the user with an important message and asks\n * them to confirm or cancel. Renders with `role=\"alertdialog\"` and shares\n * `Modal`'s overlay, frame, and animation styles.\n *\n * Neither button closes the alert on its own — close it by setting `open` to\n * `false` from `onConfirm` and `onCancel`.\n *\n * Esc fires `onCancel`, or `onConfirm` when `hideCancel` is set, so the alert\n * is always dismissible from the keyboard. The exception is a `danger` alert\n * with `hideCancel`, where Esc does nothing so it can't confirm a destructive\n * action. Backdrop clicks never dismiss the alert.\n *\n * Rest props, including `data-*`, land on the dialog. The buttons carry\n * `data-alert-dialog-action=\"cancel\" | \"confirm\"`, so non-React environments\n * (e.g. Rails + Stimulus) can handle their clicks from the dialog.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/internal-alertdialog--docs | Storybook Documentation}\n */\nexport const AlertDialog = forwardRef<HTMLElement, AlertDialogElementProps>(\n  function AlertDialog(\n    {\n      cancelButtonLabel = \"Cancel\",\n      children,\n      className,\n      confirmButtonLabel = \"Okay\",\n      hideCancel = false,\n      id,\n      onCancel,\n      onConfirm,\n      open,\n      title,\n      type = \"warning\",\n      ...restProps\n    }: AlertDialogElementProps,\n    ref\n  ) {\n    const stableId = useId()\n    const alertDialogId = id || `tds-alert-dialog-${stableId}`\n    const titleId = `${alertDialogId}-title`\n    const bodyId = `${alertDialogId}-body`\n\n    return (\n      <ModalOverlay\n        className=\"tds-modal-overlay\"\n        isDismissable={false}\n        isKeyboardDismissDisabled={hideCancel && type === \"danger\"}\n        isOpen={open}\n        onOpenChange={(isOpen) => {\n          if (isOpen) return\n          if (hideCancel) onConfirm?.()\n          else onCancel?.()\n        }}\n      >\n        <AriaModal className=\"tds-modal-frame\">\n          <Dialog\n            {...restProps}\n            ref={ref}\n            aria-describedby={bodyId}\n            aria-labelledby={titleId}\n            className={classNames(\"tds-modal\", \"tds-alert-dialog\", className)}\n            id={alertDialogId}\n            role=\"alertdialog\"\n          >\n            <header className=\"tds-alert-dialog-header\">\n              <Icon\n                aria-hidden\n                className={`tds-alert-dialog-icon tds-alert-dialog-icon--${type}`}\n                symbol={ICON_SYMBOLS[type]}\n              />\n              <h2 className=\"tds-alert-dialog-title\" id={titleId}>\n                {title}\n              </h2>\n            </header>\n            <div className=\"tds-alert-dialog-body\" id={bodyId}>\n              {typeof children === \"string\" ? <p>{children}</p> : children}\n            </div>\n            <footer className=\"tds-modal-footer tds-alert-dialog-footer\">\n              {!hideCancel && (\n                <Button\n                  data-alert-dialog-action=\"cancel\"\n                  kind=\"ghost\"\n                  label={cancelButtonLabel}\n                  onClick={onCancel}\n                />\n              )}\n              <Button\n                data-alert-dialog-action=\"confirm\"\n                kind={type === \"danger\" ? \"delete\" : \"primary\"}\n                label={confirmButtonLabel}\n                onClick={onConfirm}\n              />\n            </footer>\n          </Dialog>\n        </AriaModal>\n      </ModalOverlay>\n    )\n  }\n)\n\nAlertDialog.displayName = \"AlertDialog\"\n"],"names":["React","AriaModal"],"mappings":"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"}

package/dist/components/internal/alert-dialog/index.d.ts

@@ -0,0 +1,5 @@
+import "../../modal/index.css";
+import "./index.css";
+export type { AlertDialogElementProps, AlertDialogProps, AlertDialogType, } from "./AlertDialog";
+export { AlertDialog } from "./AlertDialog";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/internal/alert-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/alert-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAA;AAC9B,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,uBAAuB,EACvB,gBAAgB,EAChB,eAAe,GAChB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}

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

@@ -15,6 +15,12 @@ export interface TooltipProps {
     content: string;
     /** Where the tooltip renders relative to the trigger. Default `'bottom start'`. */
     placement?: Placement;
+    /**
+     * Shows the tooltip on screen only. The tooltip is hidden from assistive
+     * tech and not linked to the trigger, so the trigger must carry its own
+     * name (e.g. `aria-label`).
+     */
+    visualOnly?: boolean;
 }
 /**
  * Shows a short hover/focus hint next to a trigger. Built from React Aria's
@@ -22,10 +28,10 @@ export interface TooltipProps {
  * 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.
+ * mounted and wires `aria-describedby` (unless `visualOnly`), toggling only
+ * CSS visibility.
  */
-export declare function Tooltip({ children, content, placement, }: TooltipProps): React.JSX.Element;
+export declare function Tooltip({ children, content, placement, visualOnly, }: TooltipProps): React.JSX.Element;
 export declare namespace Tooltip {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAU,MAAM,OAAO,CAAA;AAExD,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"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAU,MAAM,OAAO,CAAA;AAExD,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;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,SAA0B,EAC1B,UAAkB,GACnB,EAAE,YAAY,qBA0Ed;yBA/Ee,OAAO"}

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

@@ -1,12 +1,67 @@
 import { tokens } from '@planningcenter/tapestry-tokens/tokens';
-import 'react';
-import 'classnames';
-import 'react-aria/Overlay';
-import 'react-aria/useOverlayPosition';
-import 'react-aria/useTooltipTrigger';
-import 'react-stately/useTooltipTriggerState';
-import './TooltipTriggerContext.js';
+import { useId } from '../../../utilities/useId.js';
+import classNames from 'classnames';
+import React, { useRef } 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';
 
-parseFloat(tokens["--t-focus-ring-offset"]) +
+// 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-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` (unless `visualOnly`), toggling only
+ * CSS visibility.
+ */
+function Tooltip({ children, content, placement = "bottom start", visualOnly = false, }) {
+    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": visualOnly ? undefined : tooltipId,
+        },
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TooltipTriggerContext.Provider, { value: contextValue }, children),
+        React.createElement(Overlay, { disableFocusManagement: true },
+            React.createElement("div", { ...ariaTooltipProps, ...overlayProps, ref: overlayRef, "aria-hidden": visualOnly || undefined, 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.createElement("div", { className: "tds-tooltip-arrow", ...arrowProps },
+                    React.createElement("svg", { "aria-hidden": true, className: "tds-tooltip-arrow-icon", role: "img", viewBox: `0 0 ${ARROW_SIZE} ${ARROW_DEPTH}` },
+                        React.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 { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { type ReactElement, 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":";;;;;;;;;AAmBE,UAAU,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAC3C,IAAA,UAAU,CAAC,MAAM,CAAC,sBAAsB,CAAC"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"sourcesContent":["import { tokens } from \"@planningcenter/tapestry-tokens/tokens\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { type ReactElement, 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   * Shows the tooltip on screen only. The tooltip is hidden from assistive\n   * tech and not linked to the trigger, so the trigger must carry its own\n   * name (e.g. `aria-label`).\n   */\n  visualOnly?: boolean\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` (unless `visualOnly`), toggling only\n * CSS visibility.\n */\nexport function Tooltip({\n  children,\n  content,\n  placement = \"bottom start\",\n  visualOnly = false,\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\": visualOnly ? undefined : 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          aria-hidden={visualOnly || undefined}\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":"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"}

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

@@ -1,13 +1,16 @@
 import "./index.css";
 import React, { type HTMLAttributes } from "react";
-export type PaneDividerElementProps = HTMLAttributes<HTMLHRElement>;
+export type PaneDividerElementProps = HTMLAttributes<HTMLHRElement> & {
+    /** Keeps the rule inside `PaneBody`'s padding instead of bleeding to the Pane's edges. */
+    inset?: boolean;
+};
 /**
  * A 1px rule between sub-sections inside a `PaneBody`.
  *
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
  */
-export declare function PaneDivider({ className, ...restProps }: PaneDividerElementProps): React.JSX.Element;
+export declare function PaneDivider({ className, inset, ...restProps }: PaneDividerElementProps): React.JSX.Element;
 export declare namespace PaneDivider {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PaneDivider.d.ts","sourceRoot":"","sources":["../../../src/components/pane/PaneDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAElD,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAEnE;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,SAAS,EACb,EAAE,uBAAuB,qBAIzB;yBAPe,WAAW"}
+{"version":3,"file":"PaneDivider.d.ts","sourceRoot":"","sources":["../../../src/components/pane/PaneDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAElD,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,aAAa,CAAC,GAAG;IACpE,0FAA0F;IAC1F,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAa,EACb,GAAG,SAAS,EACb,EAAE,uBAAuB,qBAQzB;yBAZe,WAAW"}

package/dist/components/pane/PaneDivider.js

@@ -7,8 +7,8 @@ import React__default from 'react';
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
  */
-function PaneDivider({ className, ...restProps }) {
-    const combinedClassName = classNames("tds-pane-divider", className);
+function PaneDivider({ className, inset = false, ...restProps }) {
+    const combinedClassName = classNames("tds-pane-divider", { "tds-pane-divider--inset": inset }, className);
     return React__default.createElement("hr", { ...restProps, className: combinedClassName });
 }
 PaneDivider.displayName = "PaneDivider";

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

@@ -1 +1 @@
-{"version":3,"file":"PaneDivider.js","sources":["../../../src/components/pane/PaneDivider.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes } from \"react\"\n\nexport type PaneDividerElementProps = HTMLAttributes<HTMLHRElement>\n\n/**\n * A 1px rule between sub-sections inside a `PaneBody`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function PaneDivider({\n  className,\n  ...restProps\n}: PaneDividerElementProps) {\n  const combinedClassName = classNames(\"tds-pane-divider\", className)\n\n  return <hr {...restProps} className={combinedClassName} />\n}\n\nPaneDivider.displayName = \"PaneDivider\"\n"],"names":["React"],"mappings":";;;AAOA;;;;;AAKG;AACG,SAAU,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,SAAS,EACY,EAAA;IACxB,MAAM,iBAAiB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC;AAEnE,IAAA,OAAOA,wCAAQ,SAAS,EAAE,SAAS,EAAE,iBAAiB,GAAI;AAC5D;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"PaneDivider.js","sources":["../../../src/components/pane/PaneDivider.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes } from \"react\"\n\nexport type PaneDividerElementProps = HTMLAttributes<HTMLHRElement> & {\n  /** Keeps the rule inside `PaneBody`'s padding instead of bleeding to the Pane's edges. */\n  inset?: boolean\n}\n\n/**\n * A 1px rule between sub-sections inside a `PaneBody`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function PaneDivider({\n  className,\n  inset = false,\n  ...restProps\n}: PaneDividerElementProps) {\n  const combinedClassName = classNames(\n    \"tds-pane-divider\",\n    { \"tds-pane-divider--inset\": inset },\n    className\n  )\n\n  return <hr {...restProps} className={combinedClassName} />\n}\n\nPaneDivider.displayName = \"PaneDivider\"\n"],"names":["React"],"mappings":";;;AAUA;;;;;AAKG;AACG,SAAU,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,GAAG,KAAK,EACb,GAAG,SAAS,EACY,EAAA;AACxB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,kBAAkB,EAClB,EAAE,yBAAyB,EAAE,KAAK,EAAE,EACpC,SAAS,CACV;AAED,IAAA,OAAOA,wCAAQ,SAAS,EAAE,SAAS,EAAE,iBAAiB,GAAI;AAC5D;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/index.css

@@ -2770,33 +2770,6 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     border-color:var(--tds-btn-border-color-disabled);
   }
 
-.tds-loading-spinner{
-  position:absolute;
-  right:0;
-  left:0;
-  visibility:var(--tds-loading-spinner-visibility, hidden);
-  width:var(--tds-loading-spinner-size, 1.25em);
-  height:var(--tds-loading-spinner-size, 1.25em);
-  margin:auto;
-  border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
-  border-top-color:var(--tds-loading-spinner-color, currentcolor);
-  border-radius:50%;
-  animation:spinner-rotate 500ms infinite linear;
-  animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
-}
-
-@keyframes spinner-rotate{
-  to{
-    transform:rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce){
-  [class*="--loading"] .tds-loading-spinner{
-    --tds-loading-spinner-animation-play-state:paused;
-  }
-}
-
 .tds-tooltip{
   --tds-tooltip-arrow-depth:var(--tds-tooltip-arrow-depth-raw);
   --tds-tooltip-arrow-size:var(--tds-tooltip-arrow-size-raw);
@@ -2871,6 +2844,33 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   transform:var(--tds-tooltip-arrow-rotate);
 }
 
+.tds-loading-spinner{
+  position:absolute;
+  right:0;
+  left:0;
+  visibility:var(--tds-loading-spinner-visibility, hidden);
+  width:var(--tds-loading-spinner-size, 1.25em);
+  height:var(--tds-loading-spinner-size, 1.25em);
+  margin:auto;
+  border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
+  border-top-color:var(--tds-loading-spinner-color, currentcolor);
+  border-radius:50%;
+  animation:spinner-rotate 500ms infinite linear;
+  animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
+}
+
+@keyframes spinner-rotate{
+  to{
+    transform:rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce){
+  [class*="--loading"] .tds-loading-spinner{
+    --tds-loading-spinner-animation-play-state:paused;
+  }
+}
+
 .tds-button-group{
   display:inline-flex;
 }