npm - @planningcenter/tapestry - Versions diffs - 4.11.0 → 4.12.0 - Mend

@planningcenter/tapestry 4.11.0 → 4.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/dist/components/date-picker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sources":["../../../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../field/index.css\"\nimport \"./index.css\"\n\nimport {\n CalendarDate,\n type DateValue,\n getLocalTimeZone,\n isSameDay,\n parseDate,\n today as todayCalendar,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode, useContext, useState } from \"react\"\nimport { CalendarStateContext } from \"react-aria-components/Calendar\"\nimport {\n Button,\n Calendar,\n CalendarCell,\n CalendarGrid,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCell,\n DateInput,\n DatePicker as AriaDatePicker,\n type DatePickerProps as AriaDatePickerProps,\n DateSegment,\n Group,\n Label,\n Popover,\n Text,\n} from \"react-aria-components/DatePicker\"\nimport { Dialog } from \"react-aria-components/Dialog\"\nimport { ListBox, ListBoxItem } from \"react-aria-components/ListBox\"\n\nconst _today = todayCalendar(getLocalTimeZone())\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst YEARS = Array.from({ length: 131 }, (_, i) => _today.year - 100 + i)\nconst shortMonthFormatter = new Intl.DateTimeFormat(undefined, {\n month: \"short\",\n})\nconst longMonthFormatter = new Intl.DateTimeFormat(undefined, { month: \"long\" })\n\nexport type DatePickerSize = \"md\" \| \"lg\"\n\nexport type DatePickerDateValue = DateValue \| string\n\nfunction toCalendarDate(\n input: DatePickerDateValue \| null \| undefined\n): DateValue \| null \| undefined {\n if (input === null) return null\n if (input === undefined) return undefined\n\n if (typeof input === \"object\" && \"calendar\" in input) {\n return input\n }\n\n return parseDate(input)\n}\n\nexport interface DatePickerProps {\n /** If `true`, always shows leading zeros in the year segment for years less than 1000. Defaults to true. /\n alwaysShowFourDigitYear?: boolean\n /* The initial value for uncontrolled usage. Accepts a DateValue or ISO date string. /\n defaultValue?: DatePickerDateValue \| null\n /* Helper text displayed below the component. Styled as error text when `invalid` is `true`. /\n description?: ReactNode\n /* Disables the input and calendar button. /\n disabled?: boolean\n /* Sets the first day of the week in the calendar. Defaults to locale-appropriate value. /\n firstDayOfWeek?: \"fri\" \| \"mon\" \| \"sat\" \| \"sun\" \| \"thu\" \| \"tue\" \| \"wed\"\n /\n Called on blur with the current complete value, if any, so it can be\n * normalized (e.g. correcting a 2-digit year to 4 digits). If the returned\n * value differs from the current one, the field updates to match.\n /\n formatDateOnBlur?: (date: DateValue) => DateValue\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 /* Callback that returns `true` for dates that should be visible but not selectable. /\n isDateUnavailable?: (date: DateValue) => boolean\n /* Accessible label for the field. /\n label: string\n /* Maximum selectable date. Accepts a DateValue or ISO date string. /\n max?: DatePickerDateValue\n /* Minimum selectable date. Accepts a DateValue or ISO date string. /\n min?: DatePickerDateValue\n /* Called when the selected date changes. /\n onChange?: (value: DateValue \| null) => void\n /* If `true`, allows the value to be read but not changed. /\n readOnly?: boolean\n /* If `true`, appends an asterisk at the end of the label text. /\n required?: boolean\n /* The size of the date picker. /\n size?: DatePickerSize\n /* The controlled value. Accepts a DateValue or ISO date string. /\n value?: DatePickerDateValue \| null\n}\n\ntype AriaDatePickerPropsToOmit =\n \| \"children\"\n \| \"defaultOpen\"\n \| \"granularity\"\n \| \"hideTimeZone\"\n \| \"hourCycle\"\n \| \"pageBehavior\"\n \| \"placeholderValue\"\n \| \"shouldCloseOnSelect\"\n \| \"shouldForceLeadingZeros\"\n \| \"slot\"\n\ntype AriaDatePickerPropsToInclude = \"isOpen\" \| \"name\" \| \"onOpenChange\"\n\nexport type DatePickerElementProps = CombineAriaPropsWithCustomProps<\n AriaDatePickerProps<DateValue>,\n DatePickerProps,\n AriaDatePickerPropsToOmit,\n AriaDatePickerPropsToInclude\n>\n\nfunction DatePickerOverlay({\n children,\n variant,\n}: {\n children: ReactNode\n variant: \"month\" \| \"year\"\n}) {\n return (\n <div\n aria-label={`Select ${variant}`}\n aria-modal=\"true\"\n className={`tds-date-picker-overlay tds-date-picker-overlay--${variant}`}\n role=\"dialog\"\n >\n {children}\n </div>\n )\n}\n\nfunction DatePickerCalendarBody({\n activeOverlay,\n setActiveOverlay,\n}: {\n activeOverlay: \"month\" \| \"year\" \| null\n setActiveOverlay: (overlay: \"month\" \| \"year\" \| null) => void\n}) {\n // Read and drive Calendar's focused date through its state context. This\n // lets react-aria-components own the \"open to selected month\" behavior:\n // when the popover opens, Calendar mounts and auto-focuses the DatePicker's\n // current value (whether typed into the input segments or set via `value`).\n const state = useContext(CalendarStateContext)!\n const focusedDate = state.focusedDate\n const today = todayCalendar(getLocalTimeZone())\n\n function handleOverlaySelectionChange(\n keys: \"all\" \| Set<number \| string>,\n onSelect: (key: number) => void\n ) {\n if (keys === \"all\") return\n const [first] = Array.from(keys)\n if (first !== undefined) onSelect(Number(first))\n }\n\n function handleMonthSelect(monthIndex: number) {\n state.setFocusedDate(new CalendarDate(focusedDate.year, monthIndex + 1, 1))\n setActiveOverlay(null)\n }\n\n function handleYearSelect(year: number) {\n state.setFocusedDate(new CalendarDate(year, focusedDate.month, 1))\n setActiveOverlay(null)\n }\n\n return (\n <>\n <header className=\"tds-date-picker-calendar-header\">\n <div className=\"tds-date-picker-calendar-heading\">\n <Button\n aria-expanded={activeOverlay === \"month\"}\n aria-haspopup=\"dialog\"\n className=\"tds-date-picker-calendar-overlay-trigger\"\n onPress={() =>\n setActiveOverlay(activeOverlay === \"month\" ? null : \"month\")\n }\n slot={null}\n >\n {longMonthFormatter.format(\n new Date(2000, focusedDate.month - 1, 1)\n )}\n </Button>\n <Button\n aria-expanded={activeOverlay === \"year\"}\n aria-haspopup=\"dialog\"\n className=\"tds-date-picker-calendar-overlay-trigger\"\n onPress={() =>\n setActiveOverlay(activeOverlay === \"year\" ? null : \"year\")\n }\n slot={null}\n >\n {focusedDate.year}\n </Button>\n </div>\n {activeOverlay ? (\n <Button\n aria-label={`Close ${activeOverlay} picker`}\n className=\"tds-date-picker-calendar-nav\"\n onPress={() => setActiveOverlay(null)}\n slot={null}\n >\n <Icon aria-hidden symbol=\"general#x\" />\n </Button>\n ) : (\n <>\n <Button\n aria-label=\"Go to today\"\n className=\"tds-date-picker-calendar-nav tds-date-picker-calendar-nav--lg\"\n style={{\n visibility:\n focusedDate.month === today.month &&\n focusedDate.year === today.year\n ? \"hidden\"\n : undefined,\n }}\n onPress={() => {\n state.setFocusedDate(today)\n state.setFocused(true)\n }}\n slot={null}\n >\n {/ TODO: Add to icon library and use Icon once icon is decided on /}\n <svg\n aria-hidden\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n className=\"symbol\"\n >\n <path d=\"M13.444 14.222H2.556V5.667h10.888zm0-12.444h-.777V.222h-1.556v1.556H4.889V.222H3.333v1.556h-.777a1.55 1.55 0 0 0-1.548 1.555L1 14.222a1.555 1.555 0 0 0 1.556 1.556h10.888A1.56 1.56 0 0 0 15 14.222V3.333a1.56 1.56 0 0 0-1.556-1.555\" />\n <circle cx=\"8\" cy=\"9.75\" r=\"2.25\" />\n </svg>\n </Button>\n <Button\n aria-label=\"Previous month\"\n className=\"tds-date-picker-calendar-nav\"\n slot=\"previous\"\n >\n <Icon aria-hidden symbol=\"general#left-chevron\" />\n </Button>\n <Button\n aria-label=\"Next month\"\n className=\"tds-date-picker-calendar-nav\"\n slot=\"next\"\n >\n <Icon aria-hidden symbol=\"general#right-chevron\" />\n </Button>\n </>\n )}\n </header>\n <div className=\"tds-date-picker-calendar-body\">\n {activeOverlay === \"month\" && (\n <DatePickerOverlay variant=\"month\">\n <ListBox\n aria-label=\"Months\"\n // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n autoFocus\n className=\"tds-date-picker-overlay-list\"\n disallowEmptySelection\n escapeKeyBehavior=\"none\"\n layout=\"grid\"\n onSelectionChange={(keys) =>\n handleOverlaySelectionChange(keys, handleMonthSelect)\n }\n selectedKeys={[String(focusedDate.month - 1)]}\n selectionMode=\"single\"\n >\n {MONTHS.map((i) => {\n const date = new Date(2000, i, 1)\n const shortMonth = shortMonthFormatter.format(date)\n const longMonth = longMonthFormatter.format(date)\n\n return (\n <ListBoxItem\n className=\"tds-date-picker-overlay-cell\"\n id={String(i)}\n key={i}\n aria-label={longMonth}\n textValue={longMonth}\n >\n {shortMonth}\n </ListBoxItem>\n )\n })}\n </ListBox>\n </DatePickerOverlay>\n )}\n {activeOverlay === \"year\" && (\n <DatePickerOverlay variant=\"year\">\n <ListBox\n aria-label=\"Years\"\n // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n autoFocus\n className=\"tds-date-picker-overlay-list\"\n disallowEmptySelection\n escapeKeyBehavior=\"none\"\n layout=\"grid\"\n onSelectionChange={(keys) =>\n handleOverlaySelectionChange(keys, handleYearSelect)\n }\n selectedKeys={[String(focusedDate.year)]}\n selectionMode=\"single\"\n >\n {YEARS.map((year) => (\n <ListBoxItem\n className=\"tds-date-picker-overlay-cell\"\n id={String(year)}\n key={year}\n textValue={String(year)}\n >\n {year}\n </ListBoxItem>\n ))}\n </ListBox>\n </DatePickerOverlay>\n )}\n <CalendarGrid className=\"tds-date-picker-calendar-grid\">\n <CalendarGridHeader className=\"tds-date-picker-calendar-grid-header\">\n {(day) => (\n <CalendarHeaderCell className=\"tds-date-picker-calendar-header-cell\">\n {day}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody className=\"tds-date-picker-calendar-grid-body\">\n {(date) => (\n <CalendarCell\n className=\"tds-date-picker-calendar-cell-button\"\n date={date}\n />\n )}\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </>\n )\n}\n\nfunction useValue({\n defaultValue,\n onChange,\n value,\n}: Pick<DatePickerProps, \"defaultValue\" \| \"onChange\" \| \"value\">): [\n DateValue \| null,\n (value: DateValue \| null) => void,\n] {\n const [uncontrolledValue, setUncontrolledValue] = useState(\n () => toCalendarDate(defaultValue) ?? null\n )\n if (value !== undefined) {\n return [toCalendarDate(value) ?? null, (...args) => onChange?.(...args)]\n }\n return [\n uncontrolledValue,\n (value) => {\n onChange?.(value)\n setUncontrolledValue(value)\n },\n ]\n}\n\n// Expands 2-digit years to 4 digits using the POSIX windowing rule: last 80 years and next 19 years.\nfunction expandTwoDigitYearsViaPOSIX(date: DateValue): DateValue {\n if (date.year >= 100) return date\n\n const currentYear = todayCalendar(getLocalTimeZone()).year\n const currentCentury = Math.floor(currentYear / 100) 100\n const windowStart = currentYear - 80\n\n let fullYear = currentCentury + date.year\n if (fullYear < windowStart) fullYear += 100\n else if (fullYear > windowStart + 99) fullYear -= 100\n\n return date.set({ year: fullYear })\n}\n\n/*\n A date picker allows a user to select a particular date.\n * The input supports keyboard entry of individual day, month, and year segments;\n * the calendar offers month and year quick-pick overlays plus a \"go to today\" shortcut.\n \n The date picker automatically displays the value and calendar from the user's locale,\n * and does not require a specific date format.\n \n Values are exchanged as `DateValue` from `@internationalized/date`, but\n * `value`, `defaultValue`, `min`, and `max` also accept ISO date strings\n * (`\"YYYY-MM-DD\"`) for convenience. Restrict the selectable range with\n * `min`/`max`, or mark individual dates as unavailable via `isDateUnavailable`.\n \n Renders uncontrolled when `value` is omitted: pass `defaultValue` to set\n * the initial date without managing state.\n \n @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-datepicker--docs \| Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli \| Migration CLI: Available}\n */\nexport function DatePicker({\n className,\n defaultValue,\n description,\n disabled,\n firstDayOfWeek,\n formatDateOnBlur = expandTwoDigitYearsViaPOSIX,\n hideLabel,\n invalid,\n isDateUnavailable,\n label,\n max,\n min,\n onBlur,\n onChange,\n readOnly,\n required,\n size = \"md\",\n value,\n alwaysShowFourDigitYear = false,\n ...restProps\n}: DatePickerElementProps) {\n const convertedMin = toCalendarDate(min) ?? undefined\n const convertedMax = toCalendarDate(max) ?? undefined\n\n const combinedClassName = classNames(\n \"tds-field tds-date-picker\",\n {\n \"tds-date-picker--lg\": size === \"lg\",\n \"tds-field--lg\": size === \"lg\",\n },\n className\n )\n\n const [activeOverlay, setActiveOverlay] = useState<\"month\" \| \"year\" \| null>(\n null\n )\n\n const [computedValue, setComputedValue] = useValue({\n defaultValue,\n onChange,\n value,\n })\n\n return (\n <AriaDatePicker\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n isDateUnavailable={isDateUnavailable}\n isDisabled={disabled}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={convertedMax}\n minValue={convertedMin}\n onBlur={(event) => {\n onBlur?.(event)\n if (!formatDateOnBlur \|\| !computedValue) return\n\n const formattedValue = formatDateOnBlur(computedValue)\n if (isSameDay(formattedValue, computedValue)) return\n\n setComputedValue(formattedValue)\n }}\n onChange={(newValue) => {\n setComputedValue(newValue)\n }}\n onOpenChange={(isOpen) => {\n if (!isOpen) setActiveOverlay(null)\n }}\n value={computedValue}\n >\n {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n <Group\n aria-invalid={invalid \|\| undefined}\n className=\"tds-field-control tds-date-picker-field\"\n >\n <DateInput className=\"tds-date-picker-input\">\n {(segment) => (\n <DateSegment\n aria-invalid={invalid \|\| undefined}\n className={\n segment.type === \"literal\"\n ? \"tds-field-date-segment-separator\"\n : \"tds-field-date-segment\"\n }\n segment={\n segment.type === \"year\" &&\n !segment.isPlaceholder &&\n segment.value != null &&\n alwaysShowFourDigitYear\n ? {\n ...segment,\n text: new Intl.NumberFormat(undefined, {\n minimumIntegerDigits: 4,\n useGrouping: false,\n }).format(segment.value),\n }\n : segment\n }\n />\n )}\n </DateInput>\n <Button className=\"tds-btn tds-btn--infield tds-date-picker-button\">\n <Icon aria-hidden symbol=\"general#calendar\" />\n </Button>\n </Group>\n <Popover\n className={classNames(\"tds-date-picker-popover\", {\n \"tds-date-picker-popover--lg\": size === \"lg\",\n })}\n offset={2}\n >\n <Dialog>\n <Calendar\n className=\"tds-date-picker-calendar\"\n firstDayOfWeek={firstDayOfWeek}\n >\n <DatePickerCalendarBody\n activeOverlay={activeOverlay}\n setActiveOverlay={setActiveOverlay}\n />\n </Calendar>\n </Dialog>\n </Popover>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-field-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-field-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaDatePicker>\n )\n}\n\nDatePicker.displayName = \"DatePicker\"\n"],"names":["todayCalendar","getLocalTimeZone","parseDate","CalendarDate","AriaDatePicker","isSameDay"],"mappings":"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"}
1	+ {"version":3,"file":"DatePicker.js","sources":["../../../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../field/index.css\"\nimport \"./index.css\"\n\nimport {\n CalendarDate,\n type DateValue,\n getLocalTimeZone,\n isSameDay,\n parseDate,\n today as todayCalendar,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport { useDateFieldLocale } from \"@utilities/useDateFieldLocale\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode, useContext, useState } from \"react\"\nimport { I18nProvider } from \"react-aria/I18nProvider\"\nimport { CalendarStateContext } from \"react-aria-components/Calendar\"\nimport {\n Button,\n Calendar,\n CalendarCell,\n CalendarGrid,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCell,\n DateInput,\n DatePicker as AriaDatePicker,\n type DatePickerProps as AriaDatePickerProps,\n DateSegment,\n Group,\n Label,\n Popover,\n Text,\n} from \"react-aria-components/DatePicker\"\nimport { Dialog } from \"react-aria-components/Dialog\"\nimport { ListBox, ListBoxItem } from \"react-aria-components/ListBox\"\n\nconst _today = todayCalendar(getLocalTimeZone())\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst YEARS = Array.from({ length: 131 }, (_, i) => _today.year - 100 + i)\nconst shortMonthFormatter = new Intl.DateTimeFormat(undefined, {\n month: \"short\",\n})\nconst longMonthFormatter = new Intl.DateTimeFormat(undefined, { month: \"long\" })\n\nexport type DatePickerSize = \"md\" \| \"lg\"\n\nexport type DatePickerDateValue = DateValue \| string\n\nfunction toCalendarDate(\n input: DatePickerDateValue \| null \| undefined\n): DateValue \| null \| undefined {\n if (input === null) return null\n if (input === undefined) return undefined\n\n if (typeof input === \"object\" && \"calendar\" in input) {\n return input\n }\n\n return parseDate(input)\n}\n\nexport interface DatePickerProps {\n /** If `true`, always shows leading zeros in the year segment for years less than 1000. Defaults to true. /\n alwaysShowFourDigitYear?: boolean\n /* The initial value for uncontrolled usage. Accepts a DateValue or ISO date string. /\n defaultValue?: DatePickerDateValue \| null\n /* Helper text displayed below the component. Styled as error text when `invalid` is `true`. /\n description?: ReactNode\n /* Disables the input and calendar button. /\n disabled?: boolean\n /* Sets the first day of the week in the calendar. Defaults to locale-appropriate value. /\n firstDayOfWeek?: \"fri\" \| \"mon\" \| \"sat\" \| \"sun\" \| \"thu\" \| \"tue\" \| \"wed\"\n /\n Called on blur with the current complete value, if any, so it can be\n * normalized (e.g. correcting a 2-digit year to 4 digits). If the returned\n * value differs from the current one, the field updates to match.\n /\n formatDateOnBlur?: (date: DateValue) => DateValue\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 /* Callback that returns `true` for dates that should be visible but not selectable. /\n isDateUnavailable?: (date: DateValue) => boolean\n /* Accessible label for the field. /\n label: string\n /* Maximum selectable date. Accepts a DateValue or ISO date string. /\n max?: DatePickerDateValue\n /* Minimum selectable date. Accepts a DateValue or ISO date string. /\n min?: DatePickerDateValue\n /* Called when the selected date changes. /\n onChange?: (value: DateValue \| null) => void\n /* If `true`, allows the value to be read but not changed. /\n readOnly?: boolean\n /* If `true`, appends an asterisk at the end of the label text. /\n required?: boolean\n /* The size of the date picker. /\n size?: DatePickerSize\n /* The controlled value. Accepts a DateValue or ISO date string. /\n value?: DatePickerDateValue \| null\n}\n\ntype AriaDatePickerPropsToOmit =\n \| \"children\"\n \| \"defaultOpen\"\n \| \"granularity\"\n \| \"hideTimeZone\"\n \| \"hourCycle\"\n \| \"pageBehavior\"\n \| \"placeholderValue\"\n \| \"shouldCloseOnSelect\"\n \| \"shouldForceLeadingZeros\"\n \| \"slot\"\n\ntype AriaDatePickerPropsToInclude = \"isOpen\" \| \"name\" \| \"onOpenChange\"\n\nexport type DatePickerElementProps = CombineAriaPropsWithCustomProps<\n AriaDatePickerProps<DateValue>,\n DatePickerProps,\n AriaDatePickerPropsToOmit,\n AriaDatePickerPropsToInclude\n>\n\nfunction DatePickerOverlay({\n children,\n variant,\n}: {\n children: ReactNode\n variant: \"month\" \| \"year\"\n}) {\n return (\n <div\n aria-label={`Select ${variant}`}\n aria-modal=\"true\"\n className={`tds-date-picker-overlay tds-date-picker-overlay--${variant}`}\n role=\"dialog\"\n >\n {children}\n </div>\n )\n}\n\nfunction DatePickerCalendarBody({\n activeOverlay,\n setActiveOverlay,\n}: {\n activeOverlay: \"month\" \| \"year\" \| null\n setActiveOverlay: (overlay: \"month\" \| \"year\" \| null) => void\n}) {\n // Read and drive Calendar's focused date through its state context. This\n // lets react-aria-components own the \"open to selected month\" behavior:\n // when the popover opens, Calendar mounts and auto-focuses the DatePicker's\n // current value (whether typed into the input segments or set via `value`).\n const state = useContext(CalendarStateContext)!\n const focusedDate = state.focusedDate\n const today = todayCalendar(getLocalTimeZone())\n\n function handleOverlaySelectionChange(\n keys: \"all\" \| Set<number \| string>,\n onSelect: (key: number) => void\n ) {\n if (keys === \"all\") return\n const [first] = Array.from(keys)\n if (first !== undefined) onSelect(Number(first))\n }\n\n function handleMonthSelect(monthIndex: number) {\n state.setFocusedDate(new CalendarDate(focusedDate.year, monthIndex + 1, 1))\n setActiveOverlay(null)\n }\n\n function handleYearSelect(year: number) {\n state.setFocusedDate(new CalendarDate(year, focusedDate.month, 1))\n setActiveOverlay(null)\n }\n\n return (\n <>\n <header className=\"tds-date-picker-calendar-header\">\n <div className=\"tds-date-picker-calendar-heading\">\n <Button\n aria-expanded={activeOverlay === \"month\"}\n aria-haspopup=\"dialog\"\n className=\"tds-date-picker-calendar-overlay-trigger\"\n onPress={() =>\n setActiveOverlay(activeOverlay === \"month\" ? null : \"month\")\n }\n slot={null}\n >\n {longMonthFormatter.format(\n new Date(2000, focusedDate.month - 1, 1)\n )}\n </Button>\n <Button\n aria-expanded={activeOverlay === \"year\"}\n aria-haspopup=\"dialog\"\n className=\"tds-date-picker-calendar-overlay-trigger\"\n onPress={() =>\n setActiveOverlay(activeOverlay === \"year\" ? null : \"year\")\n }\n slot={null}\n >\n {focusedDate.year}\n </Button>\n </div>\n {activeOverlay ? (\n <Button\n aria-label={`Close ${activeOverlay} picker`}\n className=\"tds-date-picker-calendar-nav\"\n onPress={() => setActiveOverlay(null)}\n slot={null}\n >\n <Icon aria-hidden symbol=\"general#x\" />\n </Button>\n ) : (\n <>\n <Button\n aria-label=\"Go to today\"\n className=\"tds-date-picker-calendar-nav tds-date-picker-calendar-nav--lg\"\n style={{\n visibility:\n focusedDate.month === today.month &&\n focusedDate.year === today.year\n ? \"hidden\"\n : undefined,\n }}\n onPress={() => {\n state.setFocusedDate(today)\n state.setFocused(true)\n }}\n slot={null}\n >\n {/ TODO: Add to icon library and use Icon once icon is decided on /}\n <svg\n aria-hidden\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n className=\"symbol\"\n >\n <path d=\"M13.444 14.222H2.556V5.667h10.888zm0-12.444h-.777V.222h-1.556v1.556H4.889V.222H3.333v1.556h-.777a1.55 1.55 0 0 0-1.548 1.555L1 14.222a1.555 1.555 0 0 0 1.556 1.556h10.888A1.56 1.56 0 0 0 15 14.222V3.333a1.56 1.56 0 0 0-1.556-1.555\" />\n <circle cx=\"8\" cy=\"9.75\" r=\"2.25\" />\n </svg>\n </Button>\n <Button\n aria-label=\"Previous month\"\n className=\"tds-date-picker-calendar-nav\"\n slot=\"previous\"\n >\n <Icon aria-hidden symbol=\"general#left-chevron\" />\n </Button>\n <Button\n aria-label=\"Next month\"\n className=\"tds-date-picker-calendar-nav\"\n slot=\"next\"\n >\n <Icon aria-hidden symbol=\"general#right-chevron\" />\n </Button>\n </>\n )}\n </header>\n <div className=\"tds-date-picker-calendar-body\">\n {activeOverlay === \"month\" && (\n <DatePickerOverlay variant=\"month\">\n <ListBox\n aria-label=\"Months\"\n // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n autoFocus\n className=\"tds-date-picker-overlay-list\"\n disallowEmptySelection\n escapeKeyBehavior=\"none\"\n layout=\"grid\"\n onSelectionChange={(keys) =>\n handleOverlaySelectionChange(keys, handleMonthSelect)\n }\n selectedKeys={[String(focusedDate.month - 1)]}\n selectionMode=\"single\"\n >\n {MONTHS.map((i) => {\n const date = new Date(2000, i, 1)\n const shortMonth = shortMonthFormatter.format(date)\n const longMonth = longMonthFormatter.format(date)\n\n return (\n <ListBoxItem\n className=\"tds-date-picker-overlay-cell\"\n id={String(i)}\n key={i}\n aria-label={longMonth}\n textValue={longMonth}\n >\n {shortMonth}\n </ListBoxItem>\n )\n })}\n </ListBox>\n </DatePickerOverlay>\n )}\n {activeOverlay === \"year\" && (\n <DatePickerOverlay variant=\"year\">\n <ListBox\n aria-label=\"Years\"\n // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n autoFocus\n className=\"tds-date-picker-overlay-list\"\n disallowEmptySelection\n escapeKeyBehavior=\"none\"\n layout=\"grid\"\n onSelectionChange={(keys) =>\n handleOverlaySelectionChange(keys, handleYearSelect)\n }\n selectedKeys={[String(focusedDate.year)]}\n selectionMode=\"single\"\n >\n {YEARS.map((year) => (\n <ListBoxItem\n className=\"tds-date-picker-overlay-cell\"\n id={String(year)}\n key={year}\n textValue={String(year)}\n >\n {year}\n </ListBoxItem>\n ))}\n </ListBox>\n </DatePickerOverlay>\n )}\n <CalendarGrid className=\"tds-date-picker-calendar-grid\">\n <CalendarGridHeader className=\"tds-date-picker-calendar-grid-header\">\n {(day) => (\n <CalendarHeaderCell className=\"tds-date-picker-calendar-header-cell\">\n {day}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody className=\"tds-date-picker-calendar-grid-body\">\n {(date) => (\n <CalendarCell\n className=\"tds-date-picker-calendar-cell-button\"\n date={date}\n />\n )}\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </>\n )\n}\n\nfunction useValue({\n defaultValue,\n onChange,\n value,\n}: Pick<DatePickerProps, \"defaultValue\" \| \"onChange\" \| \"value\">): [\n DateValue \| null,\n (value: DateValue \| null) => void,\n] {\n const [uncontrolledValue, setUncontrolledValue] = useState(\n () => toCalendarDate(defaultValue) ?? null\n )\n if (value !== undefined) {\n return [toCalendarDate(value) ?? null, (...args) => onChange?.(...args)]\n }\n return [\n uncontrolledValue,\n (value) => {\n onChange?.(value)\n setUncontrolledValue(value)\n },\n ]\n}\n\n// Expands 2-digit years to 4 digits using the POSIX windowing rule: last 80 years and next 19 years.\nfunction expandTwoDigitYearsViaPOSIX(date: DateValue): DateValue {\n if (date.year >= 100) return date\n\n const currentYear = todayCalendar(getLocalTimeZone()).year\n const currentCentury = Math.floor(currentYear / 100) 100\n const windowStart = currentYear - 80\n\n let fullYear = currentCentury + date.year\n if (fullYear < windowStart) fullYear += 100\n else if (fullYear > windowStart + 99) fullYear -= 100\n\n return date.set({ year: fullYear })\n}\n\n/*\n A date picker allows a user to select a particular date.\n * The input supports keyboard entry of individual day, month, and year segments;\n * the calendar offers month and year quick-pick overlays plus a \"go to today\" shortcut.\n \n The date picker automatically displays the value and calendar from the user's locale,\n * and does not require a specific date format.\n \n Values are exchanged as `DateValue` from `@internationalized/date`, but\n * `value`, `defaultValue`, `min`, and `max` also accept ISO date strings\n * (`\"YYYY-MM-DD\"`) for convenience. Restrict the selectable range with\n * `min`/`max`, or mark individual dates as unavailable via `isDateUnavailable`.\n \n Renders uncontrolled when `value` is omitted: pass `defaultValue` to set\n * the initial date without managing state.\n \n @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-datepicker--docs \| Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli \| Migration CLI: Available}\n */\nexport function DatePicker({\n className,\n defaultValue,\n description,\n disabled,\n firstDayOfWeek,\n formatDateOnBlur = expandTwoDigitYearsViaPOSIX,\n hideLabel,\n invalid,\n isDateUnavailable,\n label,\n max,\n min,\n onBlur,\n onChange,\n readOnly,\n required,\n size = \"md\",\n value,\n alwaysShowFourDigitYear = false,\n ...restProps\n}: DatePickerElementProps) {\n const convertedMin = toCalendarDate(min) ?? undefined\n const convertedMax = toCalendarDate(max) ?? undefined\n\n const combinedClassName = classNames(\n \"tds-field tds-date-picker\",\n {\n \"tds-date-picker--lg\": size === \"lg\",\n \"tds-field--lg\": size === \"lg\",\n },\n className\n )\n\n const [activeOverlay, setActiveOverlay] = useState<\"month\" \| \"year\" \| null>(\n null\n )\n\n const [computedValue, setComputedValue] = useValue({\n defaultValue,\n onChange,\n value,\n })\n\n const dateFieldLocale = useDateFieldLocale()\n\n return (\n <AriaDatePicker\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n isDateUnavailable={isDateUnavailable}\n isDisabled={disabled}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={convertedMax}\n minValue={convertedMin}\n onBlur={(event) => {\n onBlur?.(event)\n if (!formatDateOnBlur \|\| !computedValue) return\n\n const formattedValue = formatDateOnBlur(computedValue)\n if (isSameDay(formattedValue, computedValue)) return\n\n setComputedValue(formattedValue)\n }}\n onChange={(newValue) => {\n setComputedValue(newValue)\n }}\n onOpenChange={(isOpen) => {\n if (!isOpen) setActiveOverlay(null)\n }}\n value={computedValue}\n >\n {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n <Group\n aria-invalid={invalid \|\| undefined}\n className=\"tds-field-control tds-date-picker-field\"\n >\n <I18nProvider locale={dateFieldLocale}>\n <DateInput className=\"tds-date-picker-input\">\n {(segment) => (\n <DateSegment\n aria-invalid={invalid \|\| undefined}\n className={\n segment.type === \"literal\"\n ? \"tds-field-date-segment-separator\"\n : \"tds-field-date-segment\"\n }\n segment={\n segment.type === \"year\" &&\n !segment.isPlaceholder &&\n segment.value != null &&\n alwaysShowFourDigitYear\n ? {\n ...segment,\n text: new Intl.NumberFormat(undefined, {\n minimumIntegerDigits: 4,\n useGrouping: false,\n }).format(segment.value),\n }\n : segment\n }\n />\n )}\n </DateInput>\n </I18nProvider>\n <Button className=\"tds-btn tds-btn--infield tds-date-picker-button\">\n <Icon aria-hidden symbol=\"general#calendar\" />\n </Button>\n </Group>\n <Popover\n className={classNames(\"tds-date-picker-popover\", {\n \"tds-date-picker-popover--lg\": size === \"lg\",\n })}\n offset={2}\n >\n <Dialog>\n <Calendar\n className=\"tds-date-picker-calendar\"\n firstDayOfWeek={firstDayOfWeek}\n >\n <DatePickerCalendarBody\n activeOverlay={activeOverlay}\n setActiveOverlay={setActiveOverlay}\n />\n </Calendar>\n </Dialog>\n </Popover>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-field-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-field-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaDatePicker>\n )\n}\n\nDatePicker.displayName = \"DatePicker\"\n"],"names":["todayCalendar","getLocalTimeZone","parseDate","CalendarDate","AriaDatePicker","isSameDay"],"mappings":";;;;;;;;;;;;;AAuCA,MAAM,MAAM,GAAGA,yCAAa,CAACC,yCAAgB,EAAE,CAAC;AAChD,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AACtD,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC;AAC1E,MAAM,mBAAmB,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;AAC7D,IAAA,KAAK,EAAE,OAAO;AACf,CAAA,CAAC;AACF,MAAM,kBAAkB,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAMhF,SAAS,cAAc,CACrB,KAA6C,EAAA;IAE7C,IAAI,KAAK,KAAK,IAAI;AAAE,QAAA,OAAO,IAAI;IAC/B,IAAI,KAAK,KAAK,SAAS;AAAE,QAAA,OAAO,SAAS;IAEzC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,UAAU,IAAI,KAAK,EAAE;AACpD,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,OAAOC,wCAAS,CAAC,KAAK,CAAC;AACzB;AAgEA,SAAS,iBAAiB,CAAC,EACzB,QAAQ,EACR,OAAO,GAIR,EAAA;IACC,QACE,2CACc,CAAA,OAAA,EAAU,OAAO,EAAE,EAAA,YAAA,EACpB,MAAM,EACjB,SAAS,EAAE,oDAAoD,OAAO,CAAA,CAAE,EACxE,IAAI,EAAC,QAAQ,EAAA,EAEZ,QAAQ,CACL;AAEV;AAEA,SAAS,sBAAsB,CAAC,EAC9B,aAAa,EACb,gBAAgB,GAIjB,EAAA;;;;;AAKC,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,oBAAoB,CAAE;AAC/C,IAAA,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW;AACrC,IAAA,MAAM,KAAK,GAAGF,yCAAa,CAACC,yCAAgB,EAAE,CAAC;AAE/C,IAAA,SAAS,4BAA4B,CACnC,IAAkC,EAClC,QAA+B,EAAA;QAE/B,IAAI,IAAI,KAAK,KAAK;YAAE;QACpB,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QAChC,IAAI,KAAK,KAAK,SAAS;AAAE,YAAA,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClD;IAEA,SAAS,iBAAiB,CAAC,UAAkB,EAAA;AAC3C,QAAA,KAAK,CAAC,cAAc,CAAC,IAAIE,yCAAY,CAAC,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3E,gBAAgB,CAAC,IAAI,CAAC;IACxB;IAEA,SAAS,gBAAgB,CAAC,IAAY,EAAA;AACpC,QAAA,KAAK,CAAC,cAAc,CAAC,IAAIA,yCAAY,CAAC,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAClE,gBAAgB,CAAC,IAAI,CAAC;IACxB;AAEA,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,iCAAiC,EAAA;YACjD,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA;gBAC/C,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,eAAA,EACU,aAAa,KAAK,OAAO,mBAC1B,QAAQ,EACtB,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,MACP,gBAAgB,CAAC,aAAa,KAAK,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,EAE9D,IAAI,EAAE,IAAI,EAAA,EAET,kBAAkB,CAAC,MAAM,CACxB,IAAI,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CACzC,CACM;AACT,gBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,eAAA,EACU,aAAa,KAAK,MAAM,EAAA,eAAA,EACzB,QAAQ,EACtB,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,MACP,gBAAgB,CAAC,aAAa,KAAK,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC,EAE5D,IAAI,EAAE,IAAI,EAAA,EAET,WAAW,CAAC,IAAI,CACV,CACL;YACL,aAAa,IACZ,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,YAAA,EACO,CAAA,MAAA,EAAS,aAAa,CAAA,OAAA,CAAS,EAC3C,SAAS,EAAC,8BAA8B,EACxC,OAAO,EAAE,MAAM,gBAAgB,CAAC,IAAI,CAAC,EACrC,IAAI,EAAE,IAAI,EAAA;gBAEV,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,WAAW,EAAA,CAAG,CAChC,KAET,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;gBACE,KAAA,CAAA,aAAA,CAAC,MAAM,kBACM,aAAa,EACxB,SAAS,EAAC,+DAA+D,EACzE,KAAK,EAAE;AACL,wBAAA,UAAU,EACR,WAAW,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK;AACjC,4BAAA,WAAW,CAAC,IAAI,KAAK,KAAK,CAAC;AACzB,8BAAE;AACF,8BAAE,SAAS;qBAChB,EACD,OAAO,EAAE,MAAK;AACZ,wBAAA,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;AAC3B,wBAAA,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;oBACxB,CAAC,EACD,IAAI,EAAE,IAAI,EAAA;AAGV,oBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAEE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,QAAQ,EAAA;wBAElB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wOAAwO,EAAA,CAAG;AACnP,wBAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,MAAM,EAAC,CAAC,EAAC,MAAM,EAAA,CAAG,CAChC,CACC;gBACT,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,YAAA,EACM,gBAAgB,EAC3B,SAAS,EAAC,8BAA8B,EACxC,IAAI,EAAC,UAAU,EAAA;AAEf,oBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,sBAAsB,GAAG,CAC3C;gBACT,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,YAAA,EACM,YAAY,EACvB,SAAS,EAAC,8BAA8B,EACxC,IAAI,EAAC,MAAM,EAAA;oBAEX,KAAA,CAAA,aAAA,CAAC,IAAI,yBAAa,MAAM,EAAC,uBAAuB,EAAA,CAAG,CAC5C,CACR,CACJ,CACM;QACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+BAA+B,EAAA;YAC3C,aAAa,KAAK,OAAO,KACxB,oBAAC,iBAAiB,EAAA,EAAC,OAAO,EAAC,OAAO,EAAA;gBAChC,KAAA,CAAA,aAAA,CAAC,OAAO,kBACK,QAAQ;;oBAEnB,SAAS,EAAA,IAAA,EACT,SAAS,EAAC,8BAA8B,EACxC,sBAAsB,EAAA,IAAA,EACtB,iBAAiB,EAAC,MAAM,EACxB,MAAM,EAAC,MAAM,EACb,iBAAiB,EAAE,CAAC,IAAI,KACtB,4BAA4B,CAAC,IAAI,EAAE,iBAAiB,CAAC,EAEvD,YAAY,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAC7C,aAAa,EAAC,QAAQ,EAAA,EAErB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAI;oBAChB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;oBACjC,MAAM,UAAU,GAAG,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC;oBACnD,MAAM,SAAS,GAAG,kBAAkB,CAAC,MAAM,CAAC,IAAI,CAAC;AAEjD,oBAAA,QACE,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,EACb,GAAG,EAAE,CAAC,EAAA,YAAA,EACM,SAAS,EACrB,SAAS,EAAE,SAAS,EAAA,EAEnB,UAAU,CACC;gBAElB,CAAC,CAAC,CACM,CACQ,CACrB;YACA,aAAa,KAAK,MAAM,KACvB,oBAAC,iBAAiB,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA;gBAC/B,KAAA,CAAA,aAAA,CAAC,OAAO,kBACK,OAAO;;AAElB,oBAAA,SAAS,QACT,SAAS,EAAC,8BAA8B,EACxC,sBAAsB,QACtB,iBAAiB,EAAC,MAAM,EACxB,MAAM,EAAC,MAAM,EACb,iBAAiB,EAAE,CAAC,IAAI,KACtB,4BAA4B,CAAC,IAAI,EAAE,gBAAgB,CAAC,EAEtD,YAAY,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EACxC,aAAa,EAAC,QAAQ,EAAA,EAErB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACd,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,EAChB,GAAG,EAAE,IAAI,EACT,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,IAEtB,IAAI,CACO,CACf,CAAC,CACM,CACQ,CACrB;AACD,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAC,+BAA+B,EAAA;gBACrD,KAAA,CAAA,aAAA,CAAC,kBAAkB,IAAC,SAAS,EAAC,sCAAsC,EAAA,EACjE,CAAC,GAAG,MACH,KAAA,CAAA,aAAA,CAAC,kBAAkB,IAAC,SAAS,EAAC,sCAAsC,EAAA,EACjE,GAAG,CACe,CACtB,CACkB;AACrB,gBAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EAAC,SAAS,EAAC,oCAAoC,EAAA,EAC7D,CAAC,IAAI,MACJ,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACX,SAAS,EAAC,sCAAsC,EAChD,IAAI,EAAE,IAAI,EAAA,CACV,CACH,CACgB,CACN,CACX,CACL;AAEP;AAEA,SAAS,QAAQ,CAAC,EAChB,YAAY,EACZ,QAAQ,EACR,KAAK,GACwD,EAAA;AAI7D,IAAA,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CACxD,MAAM,cAAc,CAAC,YAAY,CAAC,IAAI,IAAI,CAC3C;AACD,IAAA,IAAI,KAAK,KAAK,SAAS,EAAE;QACvB,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,QAAQ,GAAG,GAAG,IAAI,CAAC,CAAC;IAC1E;IACA,OAAO;QACL,iBAAiB;QACjB,CAAC,KAAK,KAAI;AACR,YAAA,QAAQ,GAAG,KAAK,CAAC;YACjB,oBAAoB,CAAC,KAAK,CAAC;QAC7B,CAAC;KACF;AACH;AAEA;AACA,SAAS,2BAA2B,CAAC,IAAe,EAAA;AAClD,IAAA,IAAI,IAAI,CAAC,IAAI,IAAI,GAAG;AAAE,QAAA,OAAO,IAAI;IAEjC,MAAM,WAAW,GAAGH,yCAAa,CAACC,yCAAgB,EAAE,CAAC,CAAC,IAAI;AAC1D,IAAA,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC,GAAG,GAAG;AAC1D,IAAA,MAAM,WAAW,GAAG,WAAW,GAAG,EAAE;AAEpC,IAAA,IAAI,QAAQ,GAAG,cAAc,GAAG,IAAI,CAAC,IAAI;IACzC,IAAI,QAAQ,GAAG,WAAW;QAAE,QAAQ,IAAI,GAAG;AACtC,SAAA,IAAI,QAAQ,GAAG,WAAW,GAAG,EAAE;QAAE,QAAQ,IAAI,GAAG;IAErD,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;AACrC;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACG,SAAU,UAAU,CAAC,EACzB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,cAAc,EACd,gBAAgB,GAAG,2BAA2B,EAC9C,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,GAAG,EACH,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,KAAK,EACL,uBAAuB,GAAG,KAAK,EAC/B,GAAG,SAAS,EACW,EAAA;IACvB,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,SAAS;IACrD,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,SAAS;AAErD,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,2BAA2B,EAC3B;QACE,qBAAqB,EAAE,IAAI,KAAK,IAAI;QACpC,eAAe,EAAE,IAAI,KAAK,IAAI;KAC/B,EACD,SAAS,CACV;IAED,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,IAAI,CACL;AAED,IAAA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC;QACjD,YAAY;QACZ,QAAQ;QACR,KAAK;AACN,KAAA,CAAC;AAEF,IAAA,MAAM,eAAe,GAAG,kBAAkB,EAAE;IAE5C,QACE,oBAACG,YAAc,EAAA,EAAA,GACT,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,CAAC,KAAK,KAAI;AAChB,YAAA,MAAM,GAAG,KAAK,CAAC;AACf,YAAA,IAAI,CAAC,gBAAgB,IAAI,CAAC,aAAa;gBAAE;AAEzC,YAAA,MAAM,cAAc,GAAG,gBAAgB,CAAC,aAAa,CAAC;AACtD,YAAA,IAAIC,yCAAS,CAAC,cAAc,EAAE,aAAa,CAAC;gBAAE;YAE9C,gBAAgB,CAAC,cAAc,CAAC;AAClC,QAAA,CAAC,EACD,QAAQ,EAAE,CAAC,QAAQ,KAAI;YACrB,gBAAgB,CAAC,QAAQ,CAAC;AAC5B,QAAA,CAAC,EACD,YAAY,EAAE,CAAC,MAAM,KAAI;AACvB,YAAA,IAAI,CAAC,MAAM;gBAAE,gBAAgB,CAAC,IAAI,CAAC;QACrC,CAAC,EACD,KAAK,EAAE,aAAa,EAAA;QAEnB,CAAC,SAAS,IAAI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;QACjE,KAAA,CAAA,aAAA,CAAC,KAAK,oBACU,OAAO,IAAI,SAAS,EAClC,SAAS,EAAC,yCAAyC,EAAA;AAEnD,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,MAAM,EAAE,eAAe,EAAA;gBACnC,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,uBAAuB,IACzC,CAAC,OAAO,MACP,oBAAC,WAAW,EAAA,EAAA,cAAA,EACI,OAAO,IAAI,SAAS,EAClC,SAAS,EACP,OAAO,CAAC,IAAI,KAAK;AACf,0BAAE;0BACA,wBAAwB,EAE9B,OAAO,EACL,OAAO,CAAC,IAAI,KAAK,MAAM;wBACvB,CAAC,OAAO,CAAC,aAAa;wBACtB,OAAO,CAAC,KAAK,IAAI,IAAI;wBACrB;AACE,0BAAE;AACE,4BAAA,GAAG,OAAO;AACV,4BAAA,IAAI,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE;AACrC,gCAAA,oBAAoB,EAAE,CAAC;AACvB,gCAAA,WAAW,EAAE,KAAK;AACnB,6BAAA,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;AACzB;AACH,0BAAE,OAAO,EAAA,CAEb,CACH,CACS,CACC;AACf,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,iDAAiD,EAAA;AACjE,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,kBAAkB,EAAA,CAAG,CACvC,CACH;AACR,QAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,UAAU,CAAC,yBAAyB,EAAE;gBAC/C,6BAA6B,EAAE,IAAI,KAAK,IAAI;aAC7C,CAAC,EACF,MAAM,EAAE,CAAC,EAAA;AAET,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;gBACL,KAAA,CAAA,aAAA,CAAC,QAAQ,IACP,SAAS,EAAC,0BAA0B,EACpC,cAAc,EAAE,cAAc,EAAA;AAE9B,oBAAA,KAAA,CAAA,aAAA,CAAC,sBAAsB,EAAA,EACrB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACO,CACJ,CACD;AACT,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,aAAa,EAAA;YAElB,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACc;AAErB;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/internal/LoadingAnnouncement.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+export declare const LOADING_ANNOUNCEMENT_DELAY_MS = 500;
+/**
+ * Announces `message` to screen reader users while a loading indicator is
+ * shown. Render it next to the spinner, only while loading. It waits
+ * {@link LOADING_ANNOUNCEMENT_DELAY_MS} after mount, so a fast load says
+ * nothing, and it cancels if it unmounts first.
+ */
+export declare function LoadingAnnouncement({ message }: {
+    message: string;
+}): null;
+//# sourceMappingURL=LoadingAnnouncement.d.ts.map

package/dist/components/internal/LoadingAnnouncement.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"LoadingAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/internal/LoadingAnnouncement.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,6BAA6B,MAAM,CAAA;AAEhD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,QAYnE"}

package/dist/components/internal/LoadingAnnouncement.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { useAnnounce } from '../../utilities/useAnnounce.js';
+import { useEffect } from 'react';
+const LOADING_ANNOUNCEMENT_DELAY_MS = 500;
+/**
+ * Announces `message` to screen reader users while a loading indicator is
+ * shown. Render it next to the spinner, only while loading. It waits
+ * {@link LOADING_ANNOUNCEMENT_DELAY_MS} after mount, so a fast load says
+ * nothing, and it cancels if it unmounts first.
+ */
+function LoadingAnnouncement({ message }) {
+    const announce = useAnnounce();
+    useEffect(() => {
+        const timeout = setTimeout(() => announce(message), LOADING_ANNOUNCEMENT_DELAY_MS);
+        return () => clearTimeout(timeout);
+    }, [announce, message]);
+    return null;
+}
+export { LOADING_ANNOUNCEMENT_DELAY_MS, LoadingAnnouncement };
+//# sourceMappingURL=LoadingAnnouncement.js.map

package/dist/components/internal/LoadingAnnouncement.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LoadingAnnouncement.js","sources":["../../../src/components/internal/LoadingAnnouncement.tsx"],"sourcesContent":["import { useAnnounce } from \"@utilities/useAnnounce\"\nimport { useEffect } from \"react\"\n\nexport const LOADING_ANNOUNCEMENT_DELAY_MS = 500\n\n/**\n * Announces `message` to screen reader users while a loading indicator is\n * shown. Render it next to the spinner, only while loading. It waits\n * {@link LOADING_ANNOUNCEMENT_DELAY_MS} after mount, so a fast load says\n * nothing, and it cancels if it unmounts first.\n */\nexport function LoadingAnnouncement({ message }: { message: string }) {\n const announce = useAnnounce()\n\n useEffect(() => {\n const timeout = setTimeout(\n () => announce(message),\n LOADING_ANNOUNCEMENT_DELAY_MS\n )\n return () => clearTimeout(timeout)\n }, [announce, message])\n\n return null\n}\n"],"names":[],"mappings":";;;AAGO,MAAM,6BAA6B,GAAG;AAE7C;;;;;AAKG;AACG,SAAU,mBAAmB,CAAC,EAAE,OAAO,EAAuB,EAAA;AAClE,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;IAE9B,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAG,UAAU,CACxB,MAAM,QAAQ,CAAC,OAAO,CAAC,EACvB,6BAA6B,CAC9B;AACD,QAAA,OAAO,MAAM,YAAY,CAAC,OAAO,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AAEvB,IAAA,OAAO,IAAI;AACb;;;;"}

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import LoadingSpinner from "./LoadingSpinner";
+export { LoadingAnnouncement } from "./LoadingAnnouncement";
 export type { TooltipProps } from "./tooltip";
 export { Tooltip } from "./tooltip";
 export { LoadingSpinner };

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

	@@ -1 +1 @@
1	- {"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"}
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,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,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 CHANGED Viewed

@@ -1,8 +1,10 @@
 import React, { type ReactElement } from "react";
 import { type Placement } from "react-aria/useOverlayPosition";
+/** Where a tooltip renders relative to its trigger. */
+export type TooltipPlacement = Placement;
 export interface TooltipProps {
     /**
-     * A single `BaseButton`-derived element (e.g. `IconButton`, `Button`) to
+     * A single `BaseButton`- or `BaseLink`-derived element (e.g. `IconButton`, `Button`, `IconLink`) 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.
@@ -14,7 +16,13 @@ export interface TooltipProps {
      */
     content: string;
     /** Where the tooltip renders relative to the trigger. Default `'bottom start'`. */
-    placement?: Placement;
+    placement?: TooltipPlacement;
+    /**
+     * 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 +30,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 CHANGED Viewed

	@@ -1 +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"}
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,uDAAuD;AACvD,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAA;AAExC,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,QAAQ,EAAE,YAAY,CAAA;IACtB;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf,mFAAmF;IACnF,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B;;;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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\n/** Where a tooltip renders relative to its trigger. /\nexport type TooltipPlacement = Placement\n\nexport interface TooltipProps {\n /\n A single `BaseButton`- or `BaseLink`-derived element (e.g. `IconButton`, `Button`, `IconLink`) 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?: TooltipPlacement\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<HTMLElement>(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/internal/tooltip/TooltipTriggerContext.d.ts CHANGED Viewed

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

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

	@@ -1 +1 @@
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"}
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,yGAAyG;AACzG,eAAO,MAAM,qBAAqB;SAC3B,SAAS,CAAC,WAAW,CAAC;kBACb,cAAc,CAAC,WAAW,CAAC;SAC5B,CAAA"}

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

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
-/** Carries `<Tooltip>`'s trigger wiring down to the rendered button, via `BaseButton`. */
+/** Carries `<Tooltip>`'s trigger wiring down to the rendered element, via `BaseButton` or `BaseLink`. */
 const TooltipTriggerContext = createContext(null);
 export { TooltipTriggerContext };

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

	@@ -1 +1 @@
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;;;;"}
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 element, via `BaseButton` or `BaseLink`. */\nexport const TooltipTriggerContext = createContext<{\n ref: RefObject<HTMLElement>\n triggerProps: HTMLAttributes<HTMLElement>\n} \| null>(null)\n"],"names":[],"mappings":";;AAEA;MACa,qBAAqB,GAAG,aAAa,CAGxC,IAAI;;;;"}

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

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

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/link/BaseLink.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/BaseLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;~~AAG1B~~,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAEd,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAE/C,OAAO,KAAK,EAAE,~~EAAE~~,oBAAoB,~~EAAc~~,MAAM,OAAO,CAAA;~~AAE/D~~,KAAK,iBAAiB,GAAG,kBAAkB,GACzC,IAAI,CACF,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,GAAG,UAAU,GAAG,MAAM,CAC/C,GAAG;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAEH,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,CACN,iBAAiB,GAAG;IAClB;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CACF,GACD,QAAQ,CAAC,iBAAiB,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAEnE,eAAO,MAAM,QAAQ,~~gGA+CpB~~,CAAA"}
1	+ {"version":3,"file":"BaseLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/BaseLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAI1B,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAEd,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAE/C,OAAO,KAAK,EAAE,EACZ,oBAAoB,EAIrB,MAAM,OAAO,CAAA;AAId,KAAK,iBAAiB,GAAG,kBAAkB,GACzC,IAAI,CACF,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,GAAG,UAAU,GAAG,MAAM,CAC/C,GAAG;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAEH,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,CACN,iBAAiB,GAAG;IAClB;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CACF,GACD,QAAQ,CAAC,iBAAiB,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAEnE,eAAO,MAAM,QAAQ,gGAiEpB,CAAA"}