basalt-ui 1.25.0 → 1.26.0

package/src/controls/sync-button.test.tsx

@@ -0,0 +1,183 @@
+/**
+ * `SyncButton` — the age formatting and the syncing state (law C12, `docs/CONTROLS-SPEC.md` §3).
+ *
+ * The age is the part that had four hand-rolled copies across consumers, each with its own
+ * rounding; `formatAge` is asserted directly so the boundaries are pinned, not inferred from one
+ * rendered string.
+ */
+import { MantineProvider } from '@mantine/core'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, test } from 'bun:test'
+import { AGE_REFRESH_MS, SyncButton, formatAge } from './sync-button'
+
+function renderSync(props: Partial<Parameters<typeof SyncButton>[0]> = {}) {
+  return render(
+    <MantineProvider>
+      <SyncButton syncing={false} scope="page" onSync={() => {}} {...props} />
+    </MantineProvider>,
+  )
+}
+
+describe('formatAge', () => {
+  test('anything under a minute is `just now`, so a fresh sync stops flickering', () => {
+    expect(formatAge(0)).toBe('just now')
+    expect(formatAge(59_000)).toBe('just now')
+  })
+
+  test('minutes, then hours, then days', () => {
+    expect(formatAge(60_000)).toBe('1m ago')
+    expect(formatAge(2 * 60_000)).toBe('2m ago')
+    expect(formatAge(59 * 60_000)).toBe('59m ago')
+    expect(formatAge(60 * 60_000)).toBe('1h ago')
+    expect(formatAge(23 * 60 * 60_000)).toBe('23h ago')
+    expect(formatAge(24 * 60 * 60_000)).toBe('1d ago')
+  })
+
+  test('the refresh interval is coarser than the smallest unit it renders', () => {
+    expect(AGE_REFRESH_MS).toBeLessThanOrEqual(60_000)
+  })
+})
+
+describe('SyncButton', () => {
+  test('renders the age beside the label on desktop', () => {
+    renderSync({ lastCompletedAt: Date.now() - 2 * 60_000 })
+    expect(screen.getByRole('button').textContent).toContain('Sync')
+    expect(screen.getByRole('button').textContent).toContain('2m ago')
+  })
+
+  test('a Date and an epoch number are the same input', () => {
+    renderSync({ lastCompletedAt: new Date(Date.now() - 3 * 60_000) })
+    expect(screen.getByRole('button').textContent).toContain('3m ago')
+  })
+
+  test('no age at all when nothing has completed yet', () => {
+    renderSync({ lastCompletedAt: null })
+    expect(screen.getByRole('button').textContent).toBe('Sync')
+  })
+
+  test('syncing announces itself and refuses a second click — WITHOUT losing focus', () => {
+    let presses = 0
+    renderSync({
+      syncing: true,
+      onSync: () => {
+        presses += 1
+      },
+    })
+    const button = screen.getByRole('button')
+
+    expect(button.getAttribute('aria-busy')).toBe('true')
+    expect(button.getAttribute('aria-disabled')).toBe('true')
+    // The NATIVE attribute is what drops focus to <body> mid-press, so it must stay off: a keyboard
+    // user who presses Sync has to still be standing on the button when the sync lands.
+    expect(button.hasAttribute('disabled')).toBe(false)
+    expect(button.hasAttribute('data-disabled')).toBe(true)
+
+    button.focus()
+    fireEvent.click(button)
+    expect(presses).toBe(0)
+    expect(document.activeElement).toBe(button)
+  })
+
+  test('an idle press does call onSync — the refusal above is not just a dead handler', () => {
+    let presses = 0
+    renderSync({
+      onSync: () => {
+        presses += 1
+      },
+    })
+    fireEvent.click(screen.getByRole('button'))
+    expect(presses).toBe(1)
+  })
+
+  test('the age is absent on the server, so hydration cannot mismatch it', () => {
+    // `Date.now()` during render is the whole bug: the server renders one age and a client hydrating
+    // a minute later renders another. Both must render NO age; the effect fills it in after mount.
+    const html = renderToStaticMarkup(
+      <MantineProvider>
+        <SyncButton
+          syncing={false}
+          scope="page"
+          onSync={() => {}}
+          lastCompletedAt={Date.now() - 5 * 60_000}
+        />
+      </MantineProvider>,
+    )
+    expect(html).not.toContain('5m ago')
+    expect(html).toContain('Sync')
+  })
+
+  test('an error puts the control in the danger tone', () => {
+    renderSync({ error: 'Upstream 503' })
+    expect(screen.getByRole('button').getAttribute('data-variant')).toBe('default')
+    expect(document.querySelector('[data-basalt-sync-scope="page"]')).not.toBeNull()
+  })
+
+  test('the error message is in the accessible name, not only in a hover tooltip', () => {
+    // A tooltip announces only while open, and Mantine's opens on hover ALONE by default — so
+    // without this the red colour is the entire signal for a keyboard or screen-reader user.
+    renderSync({ error: 'Rate limited' })
+    expect(screen.getByRole('button', { name: 'Sync — Rate limited' })).toBeDefined()
+  })
+
+  test('scope reaches the DOM so a call site is readable without reading the props', () => {
+    renderSync({ scope: 'global' })
+    expect(document.querySelector('[data-basalt-sync-scope="global"]')).not.toBeNull()
+  })
+})
+
+/**
+ * The shape per scope. `scope` used to be documentation only; it now picks the form, because the
+ * shell header has no room for a labelled button beside the breadcrumb, `PageBar` row 1 and every
+ * other global action — and a page bar does (spec §3, law C12).
+ */
+describe('the shape follows the scope', () => {
+  test('global renders an ActionIcon with no label text at any width', () => {
+    renderSync({ scope: 'global', label: 'Sync all' })
+    const button = screen.getByRole('button')
+    // Mantine's own class names are static strings (unlike a CSS-module hash), so which PRIMITIVE
+    // rendered is assertable — and it is the whole difference between the two forms.
+    expect(button.classList.contains('mantine-ActionIcon-root')).toBe(true)
+    // Icon-only on EVERY viewport, so there is no text to hide with a media query in the first
+    // place: the label reaches the user as the accessible name only.
+    expect(button.textContent).toBe('')
+    expect(screen.getByRole('button', { name: 'Sync all' })).toBeDefined()
+  })
+
+  test('a global button carries no rendered age either — the tooltip is its only home', () => {
+    renderSync({ scope: 'global', lastCompletedAt: Date.now() - 4 * 60_000 })
+    expect(screen.getByRole('button').textContent).toBe('')
+  })
+
+  test('page renders the labelled Button, and is named even once the label is hidden below sm', () => {
+    renderSync({ scope: 'page' })
+    const button = screen.getByRole('button')
+    expect(button.classList.contains('mantine-Button-root')).toBe(true)
+    expect(button.textContent).toBe('Sync')
+    // jsdom evaluates no media query, so the `display: none` below `sm` is not observable here —
+    // what IS observable is the half that makes it safe: `display: none` text leaves the
+    // accessibility tree, so the name has to come from `aria-label`, not from the children.
+    expect(button.getAttribute('aria-label')).toBe('Sync')
+  })
+
+  test('both scopes fold an error into the accessible name, not only into the tone', () => {
+    renderSync({ scope: 'global', error: 'Upstream 503' })
+    expect(screen.getByRole('button', { name: 'Sync — Upstream 503' })).toBeDefined()
+  })
+
+  test('a global button refuses a second click while syncing, exactly as the page form does', () => {
+    let presses = 0
+    renderSync({
+      scope: 'global',
+      syncing: true,
+      onSync: () => {
+        presses += 1
+      },
+    })
+    const button = screen.getByRole('button')
+    expect(button.getAttribute('aria-disabled')).toBe('true')
+    expect(button.hasAttribute('disabled')).toBe(false)
+    fireEvent.click(button)
+    expect(presses).toBe(0)
+  })
+})

package/src/controls/sync-button.tsx

@@ -0,0 +1,197 @@
+/**
+ * `SyncButton` — the ONE shape refresh/sync takes anywhere in a basalt app (law C12). It replaced
+ * a per-consumer zoo: a `RefreshButton`, a `sync-control`, a reading `SyncButton` and a bare
+ * `ActionIcon` in one app alone, each with its own age formatting and its own spinner.
+ *
+ * `scope` names the home, and the home decides the SHAPE — one component, two forms, so the age
+ * formatting, the spinner, the error tone and the accessible name can never drift apart between
+ * them (and the home stays queryable in the DOM via `data-basalt-sync-scope`):
+ *
+ * - `scope: 'global'` → the shell's `globalActions`. Icon-only on EVERY viewport, an `ActionIcon`
+ *   carrying the spinning glyph. The shell header is 48px of width shared with the breadcrumb,
+ *   `PageBar` row 1 and every other global action, so a labelled button there is the one that
+ *   pushes a page's own actions into the kebab. The age and the error live in the tooltip; the
+ *   accessible name is `label`.
+ * - `scope: 'page'` → `PageBar.sync` (the page's own data). The labelled `Button` with the age
+ *   inline beside it on desktop, icon-only below `sm` where that width is gone — CSS only, one
+ *   mount, never a `visibleFrom` twin (law C9).
+ *
+ * Because the label is hidden rather than unmounted below `sm`, the accessible name comes from
+ * `aria-label` in BOTH forms: `display: none` text is out of the accessibility tree, so a page
+ * button relying on its visible children would be an unnamed icon on a phone.
+ */
+import { ActionIcon, Button, Tooltip } from '@mantine/core'
+import { useEffect, useState } from 'react'
+import type { ReactNode } from 'react'
+import { IconSlot } from '../theme/icon-slot'
+import classes from './sync-button.module.css'
+
+export type SyncButtonProps = {
+  syncing: boolean
+  /** Last successful completion. `undefined`/`null` renders no age at all. */
+  lastCompletedAt?: number | Date | null
+  onSync: () => void
+  /** The home, and with it the shape: `'global'` is icon-only at every width, `'page'` is labelled
+   * on desktop and icon-only below `sm` — see this module's doc. */
+  scope: 'page' | 'global'
+  /** Visible label at `scope: 'page'` on desktop, and the accessible name in every other form.
+   * @default 'Sync' */
+  label?: string
+  /**
+   * Last failure. Puts the control in the danger tone, carries the message in the tooltip (which
+   * opens on hover, focus AND touch) and folds it into the button's accessible name, so the red is
+   * never the only signal.
+   */
+  error?: string
+}
+
+/** How often the relative age re-renders. One interval, only while mounted. */
+export const AGE_REFRESH_MS = 30_000
+
+/**
+ * Relative age, coarse on purpose: a sync indicator answers "is this stale?", not "how stale to
+ * the second". Anything under a minute is `just now`, so the label stops flickering while a sync
+ * has just landed.
+ */
+export function formatAge(ms: number): string {
+  if (ms < 60_000) return 'just now'
+  const minutes = Math.floor(ms / 60_000)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  return `${Math.floor(hours / 24)}d ago`
+}
+
+function toMillis(at: number | Date | null | undefined): number | undefined {
+  if (at === null || at === undefined) return undefined
+  return at instanceof Date ? at.getTime() : at
+}
+
+/**
+ * The age string, refreshed on an interval that exists ONLY while the component is mounted and
+ * only while there is an age to show — a sync control on a background route costs no timer.
+ *
+ * The clock is read in the EFFECT, never during render. A global `SyncButton` in `globalActions`
+ * renders inline in the shell header (no portal), so under SSR the server would emit `just now` and
+ * a client hydrating a minute later would emit `1m ago` — a React text mismatch that discards the
+ * subtree. Server and first client paint both omit the age; the effect fills it in after mount.
+ * That also makes the interval the only thing that re-renders, so the old `setTick` counter is gone.
+ */
+function useRelativeAge(at: number | Date | null | undefined): string | undefined {
+  const [age, setAge] = useState<string | undefined>(undefined)
+  const timestamp = toMillis(at)
+
+  useEffect(() => {
+    if (timestamp === undefined) {
+      setAge(undefined)
+      return
+    }
+    const publish = (): void => {
+      setAge(formatAge(Date.now() - timestamp))
+    }
+    publish()
+    const id = setInterval(publish, AGE_REFRESH_MS)
+    return () => clearInterval(id)
+  }, [timestamp])
+
+  return age
+}
+
+function RefreshGlyph({ spinning }: { spinning: boolean }) {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden
+      className={spinning ? classes.spin : undefined}
+    >
+      <path
+        d="M20 11a8 8 0 1 0-2.34 5.66M20 5v6h-6"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+/**
+ * @example
+ * // page scope — the page's own data
+ * <PageBar sync={{ syncing, lastCompletedAt, onSync: refetch }} />
+ *
+ * // global scope — the shell header, icon-only at every width
+ * <BasaltShell globalActions={[{ key: 'sync', mobile: 'bar',
+ *   node: <SyncButton scope="global" syncing={s} lastCompletedAt={t} onSync={run} /> }]} />
+ */
+export function SyncButton({
+  syncing,
+  lastCompletedAt,
+  onSync,
+  scope,
+  label = 'Sync',
+  error,
+}: SyncButtonProps): ReactNode {
+  const age = useRelativeAge(lastCompletedAt)
+  // Wherever the label is not painted — every `global` mount, and a `page` mount below `sm` — the
+  // tooltip is where the age lives; an `error` outranks it everywhere. ONE tooltip, one mount.
+  const tooltip = error ?? age
+  // The accessible name in both forms. The visible label is `display: none` below `sm`, which takes
+  // it out of the accessibility tree, and an error must be readable without opening a tooltip.
+  const name = error !== undefined ? `${label} — ${error}` : label
+
+  const control = {
+    'data-basalt-sync-scope': scope,
+    'aria-busy': syncing,
+    // NOT the native `disabled`. That attribute drops focus to <body> the moment a keyboard user
+    // presses the button, so when the sync lands focus is gone and the next Tab restarts from
+    // the top of the document — and an `aria-busy` element you cannot focus announces nothing.
+    // `aria-disabled` + Mantine's `data-disabled` styling say the same thing and keep the button
+    // where the user left it; the handler does the actual refusing.
+    'aria-disabled': syncing,
+    'aria-label': name,
+    ...(syncing && { 'data-disabled': true }),
+    ...(error !== undefined && { color: 'red' }),
+    onClick: () => {
+      if (!syncing) onSync()
+    },
+  }
+
+  return (
+    // `events` is not a default: Mantine's Tooltip opens on HOVER only, so on the stock settings a
+    // keyboard user and a phone user never reach the error — and the age's "the tooltip carries it
+    // below `sm`" claim in the CSS was false on touch. `aria-label` is the belt to that braces: a
+    // tooltip announces only while open, and an error has to be readable without one.
+    <Tooltip
+      label={tooltip ?? ''}
+      disabled={tooltip === undefined}
+      events={{ hover: true, focus: true, touch: true }}
+      withArrow
+    >
+      {scope === 'global' ? (
+        <ActionIcon variant="default" {...control}>
+          <IconSlot>
+            <RefreshGlyph spinning={syncing} />
+          </IconSlot>
+        </ActionIcon>
+      ) : (
+        <Button
+          variant="default"
+          className={classes.pageButton}
+          leftSection={
+            <IconSlot>
+              <RefreshGlyph spinning={syncing} />
+            </IconSlot>
+          }
+          {...control}
+        >
+          <span className={classes.label}>{label}</span>
+          {age !== undefined && <span className={classes.age}>{age}</span>}
+        </Button>
+      )}
+    </Tooltip>
+  )
+}

package/src/controls/toggle-filter.tsx

@@ -0,0 +1,60 @@
+/**
+ * `ToggleFilter` — a boolean field as one pill (`docs/CONTROLS-SPEC.md` §3). The only filter whose
+ * pill has no popover: there is nothing to choose, so the pill IS the control and a press flips it.
+ * In the sheet it becomes a `Switch` row, where a 44px row with an explicit on/off affordance reads
+ * better than a chip whose state is a border colour.
+ *
+ * @example
+ * // errorsOnly: field.boolean(false)
+ * <ToggleFilter field={filters.field.errorsOnly} label="Errors only" />
+ */
+import { Switch } from '@mantine/core'
+import type { ReactNode } from 'react'
+import type { BooleanField, FieldHandle } from '../state'
+import { useFilterRegistration, useFilterSurface } from './filter-context'
+import { FilterPill } from './filter-pill'
+import { sheetRowClassNames } from './filter-sheet'
+
+export type ToggleFilterProps = {
+  readonly field: FieldHandle<BooleanField>
+  readonly label: string
+  readonly icon?: ReactNode
+}
+
+export function ToggleFilter({ field, label, icon }: ToggleFilterProps): ReactNode {
+  const [value, setValue] = field.use()
+  const surface = useFilterSurface()
+  useFilterRegistration(!field.isDefault(value), () => {
+    setValue(field.fallback)
+  })
+
+  if (surface === 'sheet') {
+    // The `Switch` IS the row — no wrapping div. `sheetRowClassNames` stretches its own `<label>`
+    // across the full 44px, so the whole row is the touch target rather than the middle 20px of it
+    // (C15). A wrapper div would put the height on a non-interactive box instead.
+    return (
+      <Switch
+        classNames={sheetRowClassNames}
+        checked={value}
+        label={label}
+        labelPosition="left"
+        onChange={(event) => {
+          setValue(event.currentTarget.checked)
+        }}
+      />
+    )
+  }
+
+  return (
+    <FilterPill
+      label={label}
+      active={value}
+      pressed={value}
+      hideGlyph
+      {...(icon !== undefined && { icon })}
+      onClick={() => {
+        setValue(!value)
+      }}
+    />
+  )
+}

package/src/controls/view-tabs.tsx

@@ -0,0 +1,110 @@
+/**
+ * `ViewTabs` — the page's or section's view switch (`docs/CONTROLS-SPEC.md` §3). A tab is store
+ * state like any filter (C3): it takes `field`, never `value`/`onChange`, so a deep link and a back
+ * navigation land on the same tab the user left.
+ *
+ * The responsive swap lives HERE, not at the call site (C9), and it is CSS — `visibleFrom` /
+ * `hiddenFrom`, one mount each, never a JS media query (which renders differently on the server than
+ * on the first client paint). Below `sm` a set of three or fewer stays a full-width
+ * `SegmentedControl`; past that a track cannot hold readable labels on a phone, so it becomes a
+ * `Select`.
+ *
+ * `only` is how a tab that exists on ONE viewport is declared instead of hand-rolling a second
+ * control: `'sm-up'` keeps it off the phone form, `'sm-down'` keeps it off the desktop form.
+ *
+ * @example
+ * <ViewTabs
+ *   field={strength.field.tab}
+ *   options={[
+ *     { value: 'overview', label: 'Overview' },
+ *     { value: 'history', label: 'History' },
+ *     { value: 'train', label: 'Train', only: 'sm-down' },
+ *   ]}
+ * />
+ */
+import { SegmentedControl, Select } from '@mantine/core'
+import type { ReactNode } from 'react'
+import type { EnumField, FieldHandle } from '../state'
+import classes from './controls.module.css'
+
+/** Past three options the phone form is a `Select`, not a track. */
+const PHONE_TRACK_MAX = 3
+
+export type ViewTabsOption<T extends string> = {
+  readonly value: T
+  readonly label: string
+  /** Render this option on ONE viewport only. Omitted → both. */
+  readonly only?: 'sm-up' | 'sm-down'
+}
+
+export type ViewTabsProps<T extends string> = {
+  readonly field: FieldHandle<EnumField<T>>
+  /** Defaults to `field.options` (every declared value, labelled by `store.labels()`). */
+  readonly options?: readonly ViewTabsOption<T>[]
+  /**
+   * The switch's accessible name. Both forms render without a visible Mantine `label` (a home has
+   * no room for one), so without this the desktop track is an unnamed `radiogroup` and the phone
+   * form an unnamed `combobox`.
+   *
+   * @default 'View'
+   */
+  readonly label?: string
+}
+
+export function ViewTabs<T extends string>({
+  field,
+  options,
+  label = 'View',
+}: ViewTabsProps<T>): ReactNode {
+  const [value, setValue] = field.use()
+  const all: readonly ViewTabsOption<T>[] =
+    options ?? field.options.map((option) => ({ value: option.value as T, label: option.label }))
+
+  const desktop = all.filter((option) => option.only !== 'sm-down')
+  const phone = all.filter((option) => option.only !== 'sm-up')
+  // The segments/items are rendered from the option list, so `next` is always a declared value —
+  // the cast restores what the codec already guarantees.
+  const commit = (next: string): void => {
+    setValue(next as T)
+  }
+
+  return (
+    <>
+      <SegmentedControl
+        aria-label={label}
+        visibleFrom="sm"
+        size="ctl"
+        value={value}
+        data={desktop.map((option) => ({ value: option.value, label: option.label }))}
+        onChange={commit}
+      />
+      {phone.length <= PHONE_TRACK_MAX ? (
+        <SegmentedControl
+          aria-label={label}
+          hiddenFrom="sm"
+          size="ctl"
+          fullWidth
+          value={value}
+          data={phone.map((option) => ({ value: option.value, label: option.label }))}
+          onChange={commit}
+        />
+      ) : (
+        <Select
+          aria-label={label}
+          hiddenFrom="sm"
+          size="ctl"
+          // BOUNDED, not greedy — see `.phoneSelect`'s comment in `controls.module.css`. This is the
+          // control owning its own responsive form (law C9), which is also why it is not a `w` prop
+          // at the call site (C5, `basalt/control-size-literal`).
+          className={classes.phoneSelect}
+          value={value}
+          allowDeselect={false}
+          data={phone.map((option) => ({ value: option.value, label: option.label }))}
+          onChange={(next) => {
+            if (next !== null) commit(next)
+          }}
+        />
+      )}
+    </>
+  )
+}

package/src/controls-dates/date-range-picker.tsx

@@ -0,0 +1,42 @@
+/**
+ * `DateRangePicker` — the `@mantine/dates` implementation of `RangeFilter`'s custom-window picker
+ * (`docs/CONTROLS-SPEC.md` §3). Its OWN subpath, and the reason is packaging, not taste:
+ * `@mantine/dates` is an optional peer, `basaltViteConfig` pre-bundles `@mantine/*`, and a consumer
+ * without the peer (linewatch) would break on an absent import — so nothing under `src/controls/**`
+ * may reference it, statically or lazily. `RangeFilter` takes the picker as a `customPicker` prop
+ * instead, which is the whole seam.
+ *
+ * `DatePicker type="range"` deals in ISO `YYYY-MM-DD` strings in Mantine 9 (`DateStringValue`), which
+ * is exactly what `field.range` stores — so there is no date parsing, formatting or timezone
+ * handling in this adapter, and that is deliberate.
+ *
+ * No `size` prop: the calendar is a POPOVER BODY, not a control in a home, so it carries none of the
+ * `ctl` tier's var set (`docs/CONTROLS-SPEC.md` §5 declares `-ctl` vars for Button/ActionIcon/Input/
+ * SegmentedControl/Combobox — not for the calendar), and pinning one would be a size with no
+ * declaration behind it.
+ *
+ * The consumer imports `@mantine/dates/styles.layer.css` alongside the other Mantine layer bundles
+ * (before `basalt-ui/styles.css`); this module ships no CSS of its own.
+ *
+ * @example
+ * import { DateRangePicker } from 'basalt-ui/controls-dates'
+ * <RangeFilter field={analytics.field.range} customPicker={DateRangePicker} />
+ */
+import { DatePicker } from '@mantine/dates'
+import type { ReactNode } from 'react'
+import type { RangeCustomPickerProps } from '../controls/range-filter'
+
+export function DateRangePicker({ value, onChange }: RangeCustomPickerProps): ReactNode {
+  return (
+    <DatePicker
+      type="range"
+      allowSingleDateInRange
+      value={[value.from ?? null, value.to ?? null]}
+      onChange={([from, to]) => {
+        // A range is only a value once BOTH ends are picked — the first click of a new range hands
+        // back `[from, null]`, and committing that would write a half range onto the URL.
+        if (from !== null && to !== null) onChange({ from, to })
+      }}
+    />
+  )
+}

package/src/controls-dates/index.ts

@@ -0,0 +1,8 @@
+/**
+ * `basalt-ui/controls-dates` — the one export that needs `@mantine/dates`
+ * (`docs/CONTROLS-SPEC.md` §3). Split off `./controls` on purpose: `./controls` resolves and renders
+ * with no `@mantine/dates` installed, and this subpath is the only place that stops being true.
+ * Proven from outside the package by `scripts/pack-test.sh`.
+ */
+export { DateRangePicker } from './date-range-picker'
+export type { RangeCustomPickerProps } from '../controls/range-filter'