@datatechsolutions/tympan 0.3.1 → 0.4.1

package/src/components/date-range-field/DateRangeField.tsx

@@ -0,0 +1,231 @@
+import { CalendarDate, today as todayIn, getLocalTimeZone } from '@internationalized/date'
+import { CalendarDays } from 'lucide-react'
+import { useId, useState, type ReactNode } from 'react'
+import { Button as AriaButton, DateInput, DateRangePicker, DateSegment, Group, I18nProvider, useLocale } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { FieldLine, FloatSurface, joinIds, usePhoneWidth } from '../../internal/forms-b/parts'
+import { useMessages } from '../../internal/provider'
+import { Button } from '../button/Button'
+import { Calendar } from '../calendar/Calendar'
+
+/** A start-to-end range of calendar dates without time, exchanged as local `Date`s. */
+export interface DateRangeFieldValue {
+  start: Date | null
+  end: Date | null
+}
+
+/** One quick choice in the popover: `{ id, label, range }`. */
+export interface DateRangePreset {
+  id: string
+  label: string
+  range: DateRangeFieldValue
+}
+
+export interface DateRangeFieldProps {
+  label: string
+  value: DateRangeFieldValue | null
+  defaultValue?: DateRangeFieldValue | null
+  onChange: (value: DateRangeFieldValue | null) => void
+  minValue?: Date
+  maxValue?: Date
+  isDateUnavailable?: (date: Date) => boolean
+  /** Longest allowed range in days; longer ranges are invalid. */
+  maxDays?: number
+  /** Quick choices shown beside or above the calendar. */
+  presets?: DateRangePreset[]
+  /** Immediate: the second pick commits and closes. Apply: picks are a draft until Apply. */
+  confirmation?: 'immediate' | 'apply'
+  /** Months in the popover (one on narrow screens whatever the value). */
+  visibleMonths?: 1 | 2
+  /** Form field names; both dates submit in ISO format. */
+  startName?: string
+  endName?: string
+  required?: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  errorText?: string
+  hint?: ReactNode
+  /** Overrides the locale from the provider. */
+  locale?: string
+  className?: string
+}
+
+const fromDate = (d: Date | null) => (d ? new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate()) : null)
+const toDate = (c: CalendarDate | null) => (c ? new Date(c.year, c.month - 1, c.day) : null)
+const daysBetween = (a: Date, b: Date) => Math.round((b.getTime() - a.getTime()) / 86400000)
+
+/**
+ * Enter a start and end date by typing into segmented date inputs or by
+ * picking in a Calendar popover (spec: wave-5-general/date-range-field.md).
+ * Built on RAC DateRangePicker; APG Date Picker Dialog.
+ */
+export function DateRangeField(props: DateRangeFieldProps) {
+  const t = useMessages().dateRangeField
+  const { locale: contextLocale } = useLocale()
+  const now = todayIn(getLocalTimeZone())
+
+  const [innerValue, setInnerValue] = useState<DateRangeFieldValue | null>(() => props.value ?? props.defaultValue ?? null)
+  const value = props.value !== undefined ? props.value : innerValue
+  const [open, setOpen] = useState(false)
+  const [draft, setDraft] = useState<DateRangeFieldValue | null>(null)
+  const phone = usePhoneWidth()
+  const months: 1 | 2 = phone ? 1 : (props.visibleMonths ?? 2)
+  const confirmation = props.confirmation ?? 'immediate'
+
+  const commit = (next: DateRangeFieldValue | null) => {
+    if (props.value === undefined) setInnerValue(next)
+    props.onChange(next)
+  }
+
+  const shown = open && confirmation === 'apply' ? draft : value
+  const shownRange = shown && (shown.start || shown.end) ? { start: fromDate(shown.start), end: fromDate(shown.end) } : null
+  const racValue = shownRange && shownRange.start && shownRange.end ? { start: shownRange.start, end: shownRange.end } : null
+
+  // Validation: the host text wins, then the computed reasons.
+  const computedInvalid = (() => {
+    const start = value?.start
+    const end = value?.end
+    if (!start || !end) return null
+    if (end.getTime() < start.getTime()) return t.endBeforeStart
+    if (props.maxDays != null && daysBetween(start, end) + 1 > props.maxDays) return t.tooManyDays(props.maxDays)
+    if (props.minValue && start.getTime() < props.minValue.getTime()) return t.outOfBounds
+    if (props.maxValue && end.getTime() > props.maxValue.getTime()) return t.outOfBounds
+    if (props.isDateUnavailable) {
+      const cursor = new Date(start.getTime())
+      while (cursor.getTime() <= end.getTime()) {
+        if (props.isDateUnavailable(cursor)) return t.unavailableDay
+        cursor.setDate(cursor.getDate() + 1)
+      }
+    }
+    return null
+  })()
+  const errorMessage = props.errorText ?? computedInvalid ?? undefined
+  const invalid = !!errorMessage
+
+  const base = useId()
+  const labelId = `${base}-label`
+  const hintId = props.hint != null && !errorMessage ? `${base}-hint` : undefined
+  const errorId = errorMessage ? `${base}-error` : undefined
+
+  const openChange = (next: boolean) => {
+    if (next) setDraft(value ? { ...value } : null)
+    setOpen(next)
+  }
+
+  const pickFromCalendar = (range: { start: Date; end: Date } | null) => {
+    if (confirmation === 'apply') {
+      setDraft(range)
+      return
+    }
+    commit(range)
+    setOpen(false)
+  }
+
+  const typed = (range: { start: CalendarDate | null; end: CalendarDate | null } | null) => {
+    const next: DateRangeFieldValue | null = range && (range.start || range.end) ? { start: toDate(range.start), end: toDate(range.end) } : null
+    if (open && confirmation === 'apply') setDraft(next)
+    else commit(next)
+  }
+
+  const applyPreset = (preset: DateRangePreset) => {
+    if (confirmation === 'apply') {
+      setDraft({ ...preset.range })
+      return
+    }
+    commit({ ...preset.range })
+    setOpen(false)
+  }
+
+  const calendar = (
+    <Calendar
+      label={props.label}
+      mode="range"
+      value={draft && draft.start && draft.end ? { start: draft.start, end: draft.end } : null}
+      onChange={(next) => pickFromCalendar(next as { start: Date; end: Date } | null)}
+      minValue={props.minValue}
+      maxValue={props.maxValue}
+      isDateUnavailable={props.isDateUnavailable}
+      visibleMonths={months}
+      focusedValue={draft?.start ?? (value?.start ?? new Date(now.year, now.month - 1, now.day))}
+      isInvalid={invalid}
+    />
+  )
+
+  return (
+    <I18nProvider locale={props.locale ?? contextLocale}>
+      <div className={cx('ty-date-range-field', props.className)} data-invalid={invalid || undefined}>
+        <FieldLine kind="label" id={labelId}>
+          <span>{props.label}</span>
+        </FieldLine>
+        {hintId ? (
+          <FieldLine kind="hint" id={hintId}>
+            {props.hint}
+          </FieldLine>
+        ) : null}
+        <DateRangePicker
+          className="ty-date-range-field__picker"
+          value={racValue}
+          onChange={typed}
+          isOpen={open}
+          onOpenChange={openChange}
+          shouldCloseOnSelect={false}
+          startName={props.startName}
+          endName={props.endName}
+          minValue={fromDate(props.minValue ?? null) ?? undefined}
+          maxValue={fromDate(props.maxValue ?? null) ?? undefined}
+          isDateUnavailable={(d) => (props.isDateUnavailable ? props.isDateUnavailable(toDate(d as CalendarDate)!) : false)}
+          isDisabled={props.disabled}
+          isReadOnly={props.readOnly}
+          isRequired={props.required}
+          isInvalid={invalid || undefined}
+          aria-labelledby={labelId}
+          aria-describedby={joinIds(hintId, errorId)}
+        >
+          <Group className="ty-date-range-field__group">
+            <DateInput slot="start" className="ty-date-range-field__input" aria-label={`${props.label}: ${t.start}`}>
+              {(segment) => <DateSegment segment={segment} className="ty-date-range-field__segment" />}
+            </DateInput>
+            <span className="ty-date-range-field__dash" aria-hidden="true">
+              –
+            </span>
+            <DateInput slot="end" className="ty-date-range-field__input" aria-label={`${props.label}: ${t.end}`}>
+              {(segment) => <DateSegment segment={segment} className="ty-date-range-field__segment" />}
+            </DateInput>
+            <AriaButton className="ty-date-range-field__trigger" aria-label={props.label}>
+              <CalendarDays className="ty-icon" aria-hidden="true" focusable="false" />
+            </AriaButton>
+          </Group>
+          <FloatSurface labelledBy={labelId} className="ty-date-range-field__surface">
+            <div className="ty-date-range-field__panel">
+              {props.presets?.length ? (
+                <div className="ty-date-range-field__presets" role="group" aria-label={t.presets}>
+                  {props.presets.map((preset) => (
+                    <Button key={preset.id} variant="quiet" size="compact" onPress={() => applyPreset(preset)}>
+                      {preset.label}
+                    </Button>
+                  ))}
+                </div>
+              ) : null}
+              {calendar}
+              {confirmation === 'apply' ? (
+                <div className="ty-date-range-field__actions">
+                  <Button variant="quiet" size="compact" onPress={() => openChange(false)}>
+                    {t.cancel}
+                  </Button>
+                  <Button variant="primary" size="compact" onPress={() => { commit(draft); setOpen(false) }}>
+                    {t.apply}
+                  </Button>
+                </div>
+              ) : null}
+            </div>
+          </FloatSurface>
+        </DateRangePicker>
+        {errorId ? (
+          <FieldLine kind="error" id={errorId}>
+            {errorMessage}
+          </FieldLine>
+        ) : null}
+      </div>
+    </I18nProvider>
+  )
+}

package/src/components/locale-picker/LocalePicker.css

@@ -15,9 +15,12 @@
     gap: var(--ty-space-1);
     outline: none;
   }
+  /* Columns follow the surface's width, not the viewport's: a dialog is
+     narrower than the window, and three viewport-driven columns squeezed
+     names such as "Español" into the code beside them. */
   .ty-locale-picker__list[data-layout='grid'] {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
   }
   .ty-locale-picker__option {
     display: flex;
@@ -53,6 +56,7 @@
     min-inline-size: 0;
   }
   .ty-locale-picker__code {
+    flex: none;
     color: var(--ty-ink-3);
     font-family: var(--ty-font-mono);
     font-size: var(--ty-font-size-meta);
@@ -72,12 +76,6 @@
     line-height: var(--ty-font-line-height-meta);
   }
 
-  @media (min-width: 640px) {
-    .ty-locale-picker__list[data-layout='grid'] {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-
   @media (forced-colors: active) {
     .ty-locale-picker__option[data-selected] {
       background: Highlight;

package/src/components/tooltip/Tooltip.css

@@ -0,0 +1,70 @@
+/* Tooltip (spec: wave-5-general/tooltip.md; design direction §2.5, §2.7). */
+@layer tympan.components {
+  .ty-tooltip {
+    box-sizing: border-box;
+    max-inline-size: min(36ch, calc(100vw - 2 * var(--ty-space-4)));
+    padding-block: var(--ty-space-1) var(--ty-space-1);
+    padding-inline: var(--ty-space-2) var(--ty-space-3);
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-surface-raised-solid);
+    color: var(--ty-ink);
+    font-family: var(--ty-font-sans);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+    box-shadow: var(--ty-shadow-floating);
+    z-index: var(--ty-z-popover);
+  }
+
+  /* Entrance and exit use opacity only (WCAG 1.4.13: hoverable, persistent). */
+  .ty-tooltip[data-entering] {
+    animation: ty-tooltip-fade var(--ty-dur-quick) var(--ty-ease);
+  }
+  .ty-tooltip[data-exiting] {
+    animation: ty-tooltip-fade var(--ty-dur-quick) var(--ty-ease-out) reverse;
+  }
+
+  @keyframes ty-tooltip-fade {
+    from {
+      opacity: 0;
+    }
+  }
+
+  .ty-tooltip__content {
+    display: inline-block;
+  }
+
+  .ty-tooltip__arrow svg {
+    display: block;
+    fill: var(--ty-surface-raised-solid);
+    stroke: var(--ty-line);
+    stroke-width: 1px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-tooltip[data-entering],
+    .ty-tooltip[data-exiting] {
+      animation: none;
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-tooltip {
+      background: var(--ty-surface-raised-solid);
+      box-shadow: var(--ty-shadow-floating);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-tooltip {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+      forced-color-adjust: none;
+    }
+    .ty-tooltip__arrow svg {
+      fill: Canvas;
+      stroke: CanvasText;
+    }
+  }
+}

package/src/components/tooltip/Tooltip.test.tsx

@@ -0,0 +1,209 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Trash2 } from 'lucide-react'
+import { describe, expect, it, vi } from 'vitest'
+import { Button as RacButton } from 'react-aria-components'
+import { ModalDialog } from '../modal-dialog/ModalDialog'
+import { Tooltip } from './Tooltip'
+
+import * as rtlDom from '@testing-library/react'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { renderRtl } from '../../../test/rtl'
+
+/**
+ * Icon-only trigger; `name` omitted is exactly the `role="label"` use case.
+ * A RAC Button (not a plain <button>): the trigger props arrive through
+ * FocusableContext and only RAC components consume them, and the rest spread
+ * forwards the cloned aria-labelledby of `role="label"`.
+ */
+function IconButton({ name, onPress, ...rest }: { name?: string; onPress?: () => void } & React.ComponentProps<typeof RacButton>) {
+  return (
+    <RacButton aria-label={name} onPress={onPress} {...rest}>
+      <Trash2 aria-hidden="true" focusable="false" />
+    </RacButton>
+  )
+}
+
+const rect = (x: number, y: number, w: number, h: number) => ({
+  value: () => ({ x, y, width: w, height: h, top: y, left: x, right: x + w, bottom: y + h, toJSON: () => ({}) }),
+})
+
+describe('Tooltip', () => {
+  it('opens on keyboard focus and describes the trigger', async () => {
+    render(
+      <Tooltip content="Delete">
+        <IconButton name="Delete row" />
+      </Tooltip>,
+    )
+    await userEvent.tab()
+    await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument())
+    expect(screen.getByRole('button', { name: 'Delete row' })).toHaveAccessibleDescription('Delete')
+  })
+
+  it('names the trigger while closed when role is label', () => {
+    render(
+      <Tooltip content="Delete" role="label">
+        <IconButton />
+      </Tooltip>,
+    )
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+    expect(screen.getByRole('button')).toHaveAccessibleName('Delete')
+  })
+
+  it('closes on Escape and keeps focus on the trigger', async () => {
+    render(
+      <Tooltip content="Delete">
+        <IconButton name="Delete row" />
+      </Tooltip>,
+    )
+    const trigger = screen.getByRole('button')
+    trigger.focus()
+    await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument())
+    await userEvent.keyboard('{Escape}')
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+    expect(trigger).toHaveFocus()
+  })
+
+  it('Escape inside a dialog closes only the tooltip', async () => {
+    render(
+      <ModalDialog isOpen onOpenChange={() => {}} title="Confirm">
+        <Tooltip content="Delete">
+          <IconButton name="Delete row" />
+        </Tooltip>
+      </ModalDialog>,
+    )
+    await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument())
+    const trigger = screen.getByRole('button', { name: 'Delete row' })
+    trigger.focus()
+    // The modal hides portaled siblings (aria-hide-outside), so the open
+    // tooltip only matches with hidden: true.
+    await waitFor(() => expect(screen.getByRole('tooltip', { hidden: true })).toBeInTheDocument())
+    await userEvent.keyboard('{Escape}')
+    expect(screen.queryByRole('tooltip', { hidden: true })).not.toBeInTheDocument()
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
+
+  it('opens on hover and stays open while the pointer moves onto the bubble', async () => {
+    render(
+      <Tooltip content="Delete">
+        <IconButton name="Delete row" />
+      </Tooltip>,
+    )
+    const trigger = screen.getByRole('button')
+    Object.defineProperty(trigger, 'getBoundingClientRect', rect(8, 8, 32, 32))
+    // Prime the shared virtual pointer: the first hover of a session does not
+    // open a react-aria tooltip on its own.
+    await userEvent.hover(document.body)
+    await userEvent.hover(trigger)
+    await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument())
+    const bubble = screen.getByRole('tooltip')
+    Object.defineProperty(bubble, 'getBoundingClientRect', rect(8, -20, 60, 24))
+    await userEvent.hover(bubble)
+    await new Promise((r) => setTimeout(r, 60))
+    expect(bubble).toBeInTheDocument()
+  })
+
+  it('opens the next adjacent trigger without the warm-up delay', async () => {
+    render(
+      <div>
+        <Tooltip content="One">
+          <IconButton name="First" />
+        </Tooltip>
+        <Tooltip content="Two">
+          <IconButton name="Second" />
+        </Tooltip>
+      </div>,
+    )
+    const [first, second] = screen.getAllByRole('button')
+    const firstButton = first!
+    const secondButton = second!
+    Object.defineProperty(firstButton, 'getBoundingClientRect', rect(0, 0, 32, 32))
+    Object.defineProperty(secondButton, 'getBoundingClientRect', rect(40, 0, 32, 32))
+    await userEvent.hover(firstButton)
+    await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument())
+    await userEvent.unhover(firstButton)
+    await waitFor(() => expect(screen.queryByRole('tooltip')).not.toBeInTheDocument())
+    await userEvent.hover(secondButton)
+    await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument(), { timeout: 150 })
+    expect(screen.getByRole('tooltip')).toBeInTheDocument()
+  })
+
+  it('never opens when disabled', async () => {
+    render(
+      <Tooltip content="Delete" disabled>
+        <IconButton name="Delete row" />
+      </Tooltip>,
+    )
+    const trigger = screen.getByRole('button')
+    await userEvent.hover(trigger)
+    trigger.focus()
+    await new Promise((r) => setTimeout(r, 30))
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+  })
+
+  it('runs the action on a touch tap without opening the tooltip', async () => {
+    const onPress = vi.fn()
+    render(
+      <Tooltip content="Delete">
+        <IconButton name="Delete row" onPress={onPress} />
+      </Tooltip>,
+    )
+    await userEvent.pointer({ keys: '[TouchA>][/TouchA]', target: screen.getByRole('button') })
+    expect(onPress).toHaveBeenCalledTimes(1)
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+  })
+
+  it('supports the controlled open pair', () => {
+    const onOpenChange = vi.fn()
+    const { rerender } = render(
+      <Tooltip content="Delete" open onOpenChange={onOpenChange}>
+        <IconButton name="Delete row" />
+      </Tooltip>,
+    )
+    expect(screen.getByRole('tooltip')).toBeInTheDocument()
+    rerender(
+      <Tooltip content="Delete" open={false} onOpenChange={onOpenChange}>
+        <IconButton name="Delete row" />
+      </Tooltip>,
+    )
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+  })
+
+  it('has no axe violations, open, with a named Button trigger', async () => {
+    const { container } = render(
+      <Tooltip content="Delete the selected rows" role="label" open>
+        <IconButton />
+      </Tooltip>,
+    )
+    expect(screen.getByRole('button', { name: 'Delete the selected rows' })).toBeInTheDocument()
+    expect(screen.getByRole('tooltip')).toBeInTheDocument()
+    await axeRtl(container)
+  })
+
+  it('animates opacity only, and nothing under reduced motion', () => {
+    const css = cssOf('components/tooltip/Tooltip.css')
+    expect(css).toMatch(/@keyframes ty-tooltip-fade\s*\{[^}]*opacity:\s*0/)
+    expect(css).not.toMatch(/ty-tooltip-fade\s*\{[^}]*transform/)
+    expect(mediaBlock(css, /\(prefers-reduced-motion:\s*reduce\)/)).toMatch(/animation:\s*none/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/CanvasText/)
+  })
+})
+
+describe('Tooltip in right-to-left (ar)', () => {
+  it('opens on focus and passes axe', async () => {
+    const { container } = renderRtl(
+      <Tooltip content="احذف" placement="end">
+        <IconButton name="حذف الصف" />
+      </Tooltip>,
+    )
+    const trigger = rtlDom.screen.getByRole('button')
+    // Keyboard focus: react-aria does not open a tooltip on programmatic
+    // focus while the interaction modality is still "pointer".
+    await userEvent.tab()
+    expect(trigger).toHaveFocus()
+    await rtlDom.waitFor(() => expect(rtlDom.screen.getByRole('tooltip')).toBeInTheDocument())
+    expect(trigger).toHaveAccessibleDescription('احذف')
+    await axeRtl(container)
+  })
+})

package/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,102 @@
+import { cloneElement, isValidElement, useId, type ReactElement, type ReactNode } from 'react'
+import { OverlayArrow, Tooltip as AriaTooltip, TooltipTrigger } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { devWarning } from '../../internal/dev'
+import { VisuallyHidden } from '../../internal/VisuallyHidden'
+
+export type TooltipPlacement = 'top' | 'bottom' | 'start' | 'end'
+export type TooltipRole = 'label' | 'description'
+
+export interface TooltipProps {
+  /** Hint text; plain text only, never interactive content. */
+  content: ReactNode
+  /** The focusable trigger (usually an icon-only Button). */
+  children: ReactElement
+  /** Preferred side; flips when there is no room. */
+  placement?: TooltipPlacement
+  /** Shows the arrow (default true). */
+  showArrow?: boolean
+  /** `default` keeps the warm-up delay; `immediate` opens without it. */
+  delay?: 'default' | 'immediate'
+  /** Never opens (for example when a visible label shows the same text). */
+  disabled?: boolean
+  /** Controlled open state; rare, for tours and tests. */
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /**
+   * `description` (default): the bubble describes an already-named trigger
+   * through `aria-describedby`. `label`: the tooltip text is the trigger's
+   * accessible name (icon-only triggers), through a persistent hidden label.
+   */
+  role?: TooltipRole
+  className?: string
+}
+
+/** Warm-up (and cool-down) of the shared tooltip timing, in ms. */
+const WARM_UP_MS = 300
+
+/**
+ * Short, non-interactive hint for a control, on hover or keyboard focus
+ * (spec: wave-5-general/tooltip.md).
+ */
+export function Tooltip(props: TooltipProps) {
+  const {
+    content,
+    children,
+    placement = 'top',
+    showArrow = true,
+    delay = 'default',
+    disabled = false,
+    open,
+    defaultOpen,
+    onOpenChange,
+    role = 'description',
+    className,
+  } = props
+  devWarning(!isValidElement(children), 'Tooltip: `children` must be one focusable element.')
+
+  const labelId = useId()
+  const asLabel = role === 'label'
+  // With role="label" the name must exist while the bubble is closed, so it
+  // comes from a persistent hidden label; the trigger keeps any description it
+  // brought itself, and RAC's open-state description is suppressed so the text
+  // is never spoken twice.
+  const child = children as ReactElement<Record<string, unknown>>
+  const trigger =
+    asLabel && isValidElement(child)
+      ? cloneElement(child, {
+          'aria-labelledby': labelId,
+          ...(child.props['aria-describedby'] === undefined ? { 'aria-describedby': undefined } : {}),
+        })
+      : children
+
+  return (
+    <TooltipTrigger
+      delay={delay === 'immediate' ? 0 : WARM_UP_MS}
+      closeDelay={delay === 'immediate' ? 0 : WARM_UP_MS}
+      isDisabled={disabled}
+      {...(open !== undefined ? { isOpen: open } : {})}
+      {...(defaultOpen !== undefined ? { defaultOpen } : {})}
+      onOpenChange={onOpenChange}
+    >
+      {trigger}
+      {asLabel ? <VisuallyHidden id={labelId}>{content}</VisuallyHidden> : null}
+      <AriaTooltip
+        className={cx('ty-tooltip', className)}
+        placement={placement}
+        offset={showArrow ? 8 : 6}
+        containerPadding={12}
+      >
+        {showArrow ? (
+          <OverlayArrow className="ty-tooltip__arrow">
+            <svg width={10} height={6} viewBox="0 0 10 6" aria-hidden="true">
+              <path d="M0 0 L5 6 L10 0" />
+            </svg>
+          </OverlayArrow>
+        ) : null}
+        <span className="ty-tooltip__content">{content}</span>
+      </AriaTooltip>
+    </TooltipTrigger>
+  )
+}

package/src/index.ts

@@ -19,8 +19,10 @@ export * from './components/app-frame/AppFrame'
 export * from './components/avatar/Avatar'
 export * from './components/breadcrumbs/Breadcrumbs'
 export * from './components/button/Button'
+export * from './components/calendar/Calendar'
 export * from './components/checkbox/Checkbox'
 export * from './components/data-table/DataTable'
+export * from './components/date-range-field/DateRangeField'
 export * from './components/drawer/Drawer'
 export * from './components/empty-state/EmptyState'
 export * from './components/error-state/ErrorState'
@@ -51,6 +53,7 @@ export * from './components/text-area/TextArea'
 export * from './components/text-field/TextField'
 export * from './components/text/Text'
 export * from './components/toast/Toast'
+export * from './components/tooltip/Tooltip'
 
 // Wave 2 and wave 4 (one barrel per group)
 export * from './groups/forms-a'