@eifi1/ui-kit 0.7.1 → 0.8.1

package/README.md

@@ -373,22 +373,22 @@ columns, strings and permissions (see the note at the top of `src/feedback/feedb
 
 <!-- BEGIN GENERATED: exports — node scripts/gen-export-inventory.mjs -->
 
-**594 names from 105 modules** — 331 values and 263 types. _Italic_ is a type-only export.
+**705 names from 120 modules** — 368 values and 337 types. _Italic_ is a type-only export.
 
 Generated from `dist/index.d.ts` by `node scripts/gen-export-inventory.mjs`; the count
 is pinned by `src/__tests__/public-surface.test.ts`. Do not edit between the markers.
 
 | Entry point | Names |
 |---|---|
-| `@eifi1/ui-kit` | 594 |
-| `@eifi1/ui-kit/chart` | 73 |
+| `@eifi1/ui-kit` | 705 |
+| `@eifi1/ui-kit/chart` | 93 |
 | `@eifi1/ui-kit/shell` | 18 |
-| `@eifi1/ui-kit/data-table` | 28 |
-| `@eifi1/ui-kit/wizard` | 20 |
+| `@eifi1/ui-kit/data-table` | 32 |
+| `@eifi1/ui-kit/wizard` | 21 |
 | `@eifi1/ui-kit/tour` | 7 |
 | `@eifi1/ui-kit/feedback` | 29 |
 | `@eifi1/ui-kit/search` | 5 |
-| `@eifi1/ui-kit/dates` | 16 |
+| `@eifi1/ui-kit/dates` | 20 |
 | `@eifi1/ui-kit/table-text` | 8 |
 | `@eifi1/ui-kit/rhf` | 13 |
 
@@ -417,6 +417,9 @@ re-slicing of it, never a second API.
 | `hooks/use-overlay-history` | `useOverlayHistory` |
 | `hooks/use-close-transition` | `OVERLAY_EXIT_MS`, `useCloseTransition` |
 | `hooks/use-row-swipe` | `useRowSwipe`, _`RowSwipeOptions`_, _`RowSwipeReturn`_, _`SwipeStage`_ |
+| `hooks/use-file-drop` | `dragHasFiles`, `useFileDrop`, _`FileDropProps`_, _`UseFileDropOptions`_, _`UseFileDropReturn`_ |
+| `hooks/use-debounce` | `useDebounce`, `useDebouncedCallback`, _`DebouncedCallbackOptions`_, _`DebouncedFunction`_ |
+| `hooks/use-copy-to-clipboard` | `copyToClipboard`, `useCopyToClipboard`, _`CopyState`_, _`UseCopyToClipboardOptions`_, _`UseCopyToClipboardReturn`_ |
 | `hooks/use-windowed-rows` | `useWindowedRows`, _`WindowedRows`_ |
 
 ### theme, palettes, colour
@@ -434,7 +437,7 @@ re-slicing of it, never a second API.
 
 | Module | Exports |
 |---|---|
-| `components/ui` | `Button`, `buttonClasses`, `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`, `DEFAULT_PASSWORD_REVEAL_LABELS`, `DEFAULT_TABS_LABELS`, `EmptyState`, `FIELD_BASE`, `FIELD_DISPLAY`, `FIELD_FLOATING_PAD`, `FIELD_INVALID`, `FIELD_TRIGGER`, `FIELD_WRITABLE_LOOK`, `FieldChevron`, `FieldHint`, `FieldLabel`, `FLOATING_INPUT_CLASS`, `FLOATING_LABEL_CLASS`, `FLOATING_LABEL_STATIC`, `FloatingField`, `IconButton`, `Input`, `Label`, `PHONE_QUERY`, `resolvePasswordRevealLabels`, `Select`, `Spinner`, `Tabs`, `Textarea`, _`ButtonProps`_, _`ButtonVariant`_, _`CardActionProps`_, _`CardContentProps`_, _`CardDescriptionProps`_, _`CardFooterProps`_, _`CardHeaderProps`_, _`CardProps`_, _`CardTitleProps`_, _`EmptyStateProps`_, _`FieldChevronProps`_, _`FieldHintProps`_, _`FieldLabelProps`_, _`FloatingFieldProps`_, _`IconButtonProps`_, _`IconButtonSize`_, _`InputProps`_, _`LabelProps`_, _`PasswordRevealLabels`_, _`SelectProps`_, _`SpinnerProps`_, _`TabItem`_, _`TabsLabels`_, _`TabsProps`_, _`TextareaProps`_ |
+| `components/ui` | `Button`, `buttonClasses`, `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`, `DEFAULT_PASSWORD_REVEAL_LABELS`, `DEFAULT_TABS_LABELS`, `EmptyState`, `FIELD_BASE`, `FIELD_DISPLAY`, `FIELD_FLOATING_PAD`, `FIELD_INVALID`, `FIELD_TRIGGER`, `FIELD_WRITABLE_LOOK`, `FieldChevron`, `FieldHint`, `FieldLabel`, `FLOATING_INPUT_CLASS`, `FLOATING_LABEL_CLASS`, `FLOATING_LABEL_STATIC`, `FloatingField`, `IconButton`, `Input`, `Label`, `PHONE_QUERY`, `resolvePasswordRevealLabels`, `Select`, `Spinner`, `Tabs`, `Textarea`, _`ButtonClassesOptions`_, _`ButtonProps`_, _`ButtonSize`_, _`ButtonVariant`_, _`CardActionProps`_, _`CardContentProps`_, _`CardDescriptionProps`_, _`CardFooterProps`_, _`CardHeaderProps`_, _`CardProps`_, _`CardTitleProps`_, _`EmptyStateProps`_, _`FieldChevronProps`_, _`FieldHintProps`_, _`FieldLabelProps`_, _`FloatingFieldProps`_, _`IconButtonProps`_, _`IconButtonSize`_, _`InputProps`_, _`LabelProps`_, _`PasswordRevealLabels`_, _`SelectProps`_, _`SpinnerProps`_, _`TabItem`_, _`TabsLabels`_, _`TabsProps`_, _`TextareaProps`_ |
 | `components/search-field` | `SearchField`, _`SearchFieldProps`_ |
 | `components/dropdown` | `DropdownPanel`, `DropdownSearchHeader`, `useDropdown`, `useDropdownSearch`, _`DropdownPanelProps`_, _`DropdownSearchHeaderProps`_ |
 | `components/popover` | `DEFAULT_POPOVER_LABELS`, `Popover`, _`PopoverLabels`_, _`PopoverProps`_ |
@@ -449,7 +452,7 @@ re-slicing of it, never a second API.
 | `components/entity-combobox` | `EntityCombobox`, _`EntityComboboxProps`_ |
 | `components/multi-entity-combobox` | `MultiEntityCombobox`, _`MultiEntityComboboxProps`_ |
 | `components/multi-select` | `MultiSelect`, _`MultiSelectOption`_, _`MultiSelectProps`_ |
-| `components/tooltip` | `placeTooltip`, `Tooltip`, _`TooltipPlacement`_, _`TooltipProps`_, _`TooltipSize`_, _`TooltipViewport`_ |
+| `components/tooltip` | `placeTooltip`, `Tooltip`, _`TooltipPlacement`_, _`TooltipProps`_, _`TooltipSide`_, _`TooltipSize`_, _`TooltipViewport`_ |
 | `components/user-avatar` | `avatarInitials`, `UserAvatar`, _`UserAvatarProps`_ |
 | `components/settings-fields` | `LanguageSetting`, `ThemeSetting`, _`LanguageSettingProps`_, _`ThemeSettingProps`_ |
 | `components/field-sync` | `DEFAULT_FIELD_SYNC_LABELS`, `FIELD_SYNC_FRAME`, `FIELD_SYNC_SAVED_MS`, `FieldSyncIndicator`, `FieldSyncRow`, `resolveFieldSyncLabels`, `useFieldSync`, _`FieldSyncIndicatorProps`_, _`FieldSyncLabels`_, _`FieldSyncRowProps`_, _`FieldSyncState`_, _`UseFieldSyncOptions`_, _`UseFieldSyncReturn`_ |
@@ -464,9 +467,11 @@ re-slicing of it, never a second API.
 | `components/signature-pad` | `DEFAULT_SIGNATURE_PAD_LABELS`, `SignaturePad`, `SignatureView`, _`SignatureDetail`_, _`SignaturePadHandle`_, _`SignaturePadLabels`_, _`SignaturePadProps`_, _`SignatureViewProps`_ |
 | `components/password-strength` | `DEFAULT_PASSWORD_STRENGTH_LABELS`, `passwordByteLength`, `passwordRules`, `PasswordStrengthMeter`, `scorePassword`, _`PasswordRule`_, _`PasswordRuleId`_, _`PasswordScoreOptions`_, _`PasswordStrengthLabels`_, _`PasswordStrengthMeterProps`_, _`PasswordStrengthScore`_ |
 | `components/page-contents` | `DEFAULT_PAGE_CONTENTS_LABELS`, `PageContents`, `PageContentsLayout`, `useScrollSpy`, _`PageContentsItem`_, _`PageContentsLabels`_, _`PageContentsLayoutProps`_, _`PageContentsProps`_, _`UseScrollSpyOptions`_ |
-| `components/disclosure` | `Collapse`, `Disclosure`, _`CollapseProps`_, _`DisclosureProps`_ |
+| `components/disclosure` | `Collapse`, `Disclosure`, _`CollapseProps`_, _`DisclosureProps`_, _`DisclosureTriggerProps`_ |
 | `components/dialog-frame` | `DEFAULT_DIALOG_FRAME_LABELS`, `DialogFrame`, _`DialogFrameLabels`_, _`DialogFrameProps`_ |
 | `components/danger-confirm` | `DangerConfirm`, `DEFAULT_DANGER_CONFIRM_LABELS`, _`DangerConfirmLabels`_, _`DangerConfirmProps`_ |
+| `components/confirm-dialog` | `ConfirmProvider`, `DEFAULT_CONFIRM_DIALOG_LABELS`, `useConfirm`, _`ConfirmDialogLabels`_, _`ConfirmFn`_, _`ConfirmOptions`_, _`ConfirmProviderProps`_, _`ConfirmTone`_ |
+| `components/floating-panel` | `DEFAULT_FLOATING_PANEL_LABELS`, `FloatingActionButton`, `FloatingPanel`, _`FloatingActionButtonProps`_, _`FloatingCorner`_, _`FloatingPanelLabels`_, _`FloatingPanelProps`_ |
 | `components/swatch-picker` | `DEFAULT_SWATCH_PICKER_LABELS`, `SwatchPicker`, _`SwatchOption`_, _`SwatchPickerLabels`_, _`SwatchPickerProps`_ |
 | `components/icon-picker` | `DEFAULT_ICON_PICKER_LABELS`, `IconPicker`, _`IconOption`_, _`IconPickerLabels`_, _`IconPickerProps`_ |
 | `components/choice-card` | `ChoiceCard`, `ChoiceCardGroup`, _`ChoiceCardGroupProps`_, _`ChoiceCardMultipleProps`_, _`ChoiceCardOption`_, _`ChoiceCardProps`_, _`ChoiceCardSingleProps`_, _`ChoiceCardType`_ |
@@ -474,31 +479,41 @@ re-slicing of it, never a second API.
 | `components/measured-grid` | `DEFAULT_MEASURED_GRID_LABELS`, `MeasuredGrid`, `useMeasuredRows`, _`MeasuredGridColumn`_, _`MeasuredGridLabels`_, _`MeasuredGridProps`_, _`MeasuredGridView`_, _`MeasuredRows`_, _`UseMeasuredRowsOptions`_ |
 | `components/file-button` | `DEFAULT_FILE_PICKER_LABELS`, `FileButton`, `matchesAccept`, `useFilePicker`, _`FileButtonProps`_, _`FilePickerLabels`_, _`FileRejection`_, _`FileRejectionReason`_, _`FileScreenOptions`_, _`UseFilePickerOptions`_, _`UseFilePickerReturn`_ |
 | `components/treemap` | `fitLabel`, `Treemap`, `TreemapCell`, _`TreemapCellProps`_, _`TreemapNode`_, _`TreemapProps`_ |
-| `components/series-chart` | `AXIS_TICK_WIDTH`, `AXIS_TITLE_STRIP`, `axisBandWidth`, `mergeSeries`, `oneAxis`, `padBand`, `paddedDomain`, `SeriesChart`, `seriesKey`, `soleSeriesColor`, `StaticSeriesChart`, _`SeriesChartAxis`_, _`SeriesChartProps`_, _`SeriesChartSeries`_, _`SeriesChartSpan`_, _`SeriesChartX`_, _`SeriesSource`_ |
-| `components/chart-zoom` | `DEFAULT_Y_AXIS`, `fitXToY`, `fitYToX`, `NO_ZOOM`, `selectionFromDrag`, `SharedXZoom`, `withChartZoom`, `ZOOM_MIN_DRAG`, `ZOOM_SQUARE_ENOUGH`, `zoomAfter`, `zoomAxesFor`, `zoomDomains`, _`ZoomAxes`_, _`ZoomBinding`_, _`ZoomDrag`_, _`ZoomFitSource`_, _`ZoomSelection`_, _`ZoomState`_, _`ZoomTarget`_ |
+| `components/series-chart` | `anchoredBand`, `AXIS_TICK_WIDTH`, `AXIS_TITLE_STRIP`, `axisBandWidth`, `mergeSeries`, `oneAxis`, `padBand`, `paddedDomain`, `SeriesChart`, `seriesKey`, `seriesLegendEntries`, `soleSeriesColor`, `StaticSeriesChart`, `visibleSeries`, _`SeriesChartAxis`_, _`SeriesChartHit`_, _`SeriesChartMarker`_, _`SeriesChartPoint`_, _`SeriesChartProps`_, _`SeriesChartReference`_, _`SeriesChartRow`_, _`SeriesChartSeries`_, _`SeriesChartSpan`_, _`SeriesChartTickValues`_, _`SeriesChartTone`_, _`SeriesChartTooltip`_, _`SeriesChartType`_, _`SeriesChartX`_, _`SeriesChartXTick`_, _`SeriesChartXValue`_, _`SeriesSource`_ |
+| `components/chart-zoom` | `axisExtent`, `DEFAULT_Y_AXIS`, `defaultZoomAxes`, `fitXToY`, `fitYToX`, `NO_ZOOM`, `selectionFromDrag`, `SharedXZoom`, `withChartZoom`, `ZOOM_MIN_DRAG`, `ZOOM_SQUARE_ENOUGH`, `zoomAfter`, `zoomAxesFor`, `zoomDomains`, _`ZoomAxes`_, _`ZoomAxesSetting`_, _`ZoomBinding`_, _`ZoomDrag`_, _`ZoomFitSeries`_, _`ZoomFitSource`_, _`ZoomRow`_, _`ZoomSelection`_, _`ZoomState`_, _`ZoomTarget`_ |
 | `components/toggle-legend` | `LegendColumn`, `LegendGroup`, `STEP_DASH`, `STROKE_PATTERNS`, `strokeDash`, `toggleHidden`, `ToggleLegend`, _`LegendEntry`_, _`ToggleLegendProps`_ |
 | `components/facing-pair` | `FACING_SIDES`, `facingAxes`, `facingBand`, `facingHeadingPad`, _`FacingSide`_ |
 | `components/series-chart-labels` | `DEFAULT_SERIES_CHART_LABELS`, _`SeriesChartLabels`_ |
 | `components/account-settings` | `PasswordSetting`, `ProfileSetting`, `TwoFactorSetting`, _`PasswordSettingLabels`_, _`ProfileSettingLabels`_, _`TwoFactorSettingLabels`_ |
 | `components/alert-banner` | `AlertBanner`, `alertFrameClass`, `toneFrameClass`, _`AlertBannerProps`_, _`AlertTone`_ |
 | `components/toggle-group` | `ToggleGroup`, _`ToggleGroupBaseProps`_, _`ToggleGroupClearableProps`_, _`ToggleGroupProps`_, _`ToggleGroupRequiredProps`_, _`ToggleOption`_ |
-| `components/chip` | `Chip`, `ChipInput`, `DEFAULT_CHIP_INPUT_LABELS`, `resolveChipInputLabels`, _`ChipInputLabels`_, _`ChipInputProps`_, _`ChipProps`_, _`ChipSize`_, _`ChipTone`_ |
+| `components/chip` | `Chip`, `ChipInput`, `DEFAULT_CHIP_INPUT_LABELS`, `resolveChipInputLabels`, _`ChipInputLabels`_, _`ChipInputProps`_, _`ChipLinkProps`_, _`ChipProps`_, _`ChipShape`_, _`ChipSize`_, _`ChipTone`_, _`ChipVariant`_ |
 | `components/wizard-stepper` | `WizardStepper` |
 | `components/hover-menu` | `HoverMenu`, _`HoverMenuProps`_ |
 | `components/modal` | `Modal`, `ModalCloseContext`, `useBackdropClose`, _`ModalProps`_ |
 | `components/full-bleed-dialog` | `FullBleedDialog`, _`FullBleedDialogProps`_ |
 | `components/grouped-picker` | `GroupedPicker`, _`GroupedPickerProps`_, _`PickerGroup`_ |
-| `components/file-dropzone` | `FileDropzone`, _`FileDropzoneProps`_, _`FileDropzoneRejectionFeedback`_ |
+| `components/file-dropzone` | `FileDropzone`, _`FileDropzoneProps`_, _`FileDropzoneRejectionFeedback`_, _`FileDropzoneState`_ |
 | `components/mini-calendar` | `DEFAULT_MINI_CALENDAR_LABELS`, `MiniCalendar`, _`MiniCalendarLabels`_, _`MiniCalendarProps`_, _`WeekDay`_ |
-| `components/date-picker` | `DatePicker`, `DateRangePicker`, _`DatePickerProps`_, _`DateRangePickerPreset`_, _`DateRangePickerProps`_ |
+| `components/date-picker` | `DatePicker`, `DateRangePicker`, _`DatePickerProps`_, _`DateRangeCommit`_, _`DateRangePickerPreset`_, _`DateRangePickerProps`_ |
+| `components/tree-view` | `TreeRow`, `TreeView`, _`TreeItemState`_, _`TreeNode`_, _`TreeRowProps`_, _`TreeViewProps`_ |
 | `components/chart` | `ChartContainer`, `ChartLegend`, `ChartLegendContent`, `ChartTooltip`, `ChartTooltipContent`, `useChart`, _`ChartConfig`_, _`ChartSeriesConfig`_ |
+| `components/description-list` | `DescriptionItem`, `DescriptionList`, _`DescriptionItemProps`_, _`DescriptionListDensity`_, _`DescriptionListLayout`_, _`DescriptionListProps`_ |
+| `components/progress-bar` | `ProgressBar`, _`ProgressBarProps`_, _`ProgressBarSize`_, _`ProgressBarTone`_ |
+| `components/skeleton` | `Skeleton`, _`SkeletonProps`_, _`SkeletonShape`_ |
+| `components/copy-button` | `CopyButton`, `DEFAULT_COPY_BUTTON_LABELS`, _`CopyButtonLabels`_, _`CopyButtonProps`_ |
+| `components/button-group` | `ButtonGroup`, _`ButtonGroupProps`_ |
+| `components/table` | `NUMERIC_CELL_CLASS`, `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableFoot`, `TableHead`, `TableHeaderCell`, `TableRow`, _`TableAlign`_, _`TableBodyProps`_, _`TableCaptionProps`_, _`TableCellProps`_, _`TableDensity`_, _`TableFootProps`_, _`TableHeaderCellProps`_, _`TableHeadProps`_, _`TableProps`_, _`TableRowProps`_ |
+| `components/separator` | `Separator`, _`SeparatorProps`_ |
+| `components/scroll-area` | `ScrollArea`, _`ScrollAreaProps`_ |
 | `components/data-table-labels` | `DEFAULT_DATA_TABLE_LABELS`, `missingDataTableLabels`, `resolveDataTableLabels`, _`DataTableLabels`_ |
-| `components/data-table-sort` | `decodeSorts`, `encodeSorts`, `nextSorts`, `normalizeSorts`, _`SortDir`_, _`SortState`_ |
+| `components/data-table-sort` | `decodeSorts`, `encodeSorts`, `nextSorts`, `normalizeSorts`, _`SortCycle`_, _`SortDir`_, _`SortState`_, _`SortStepOptions`_ |
 | `components/data-table-filters` | `decodeFilterValue`, `decodeFilterValueOfType`, `defaultFilterState`, `encodeFilterValue`, `isFilterActive`, `resolveFilter`, `rowMatches`, _`ColumnFilter`_, _`FilterValue`_ |
-| `components/data-table` | `DataTable`, _`DataTableColumn`_, _`DataTableProps`_, _`FilterState`_, _`MobileSwipeActions`_, _`ServerPagination`_ |
+| `components/data-table` | `DataTable`, _`DataTableChrome`_, _`DataTableColumn`_, _`DataTableDensity`_, _`DataTableProps`_, _`FilterState`_, _`MobileSwipeActions`_, _`ServerPagination`_ |
 | `components/data-table-pagination` | `PAGE_SIZE_OPTIONS`, `Pagination` |
 | `components/data-table-filter-popover` | `FilterPopover` |
 | `components/combobox-core` | _`ComboClearValue`_, _`ComboOption`_ |
+| `components/series-chart-ticks` | _`TimeTickUnit`_ |
 
 ### shell
 
@@ -523,7 +538,7 @@ re-slicing of it, never a second API.
 
 | Module | Exports |
 |---|---|
-| `wizard/types` | `DEFAULT_WIZARD_LABELS`, `resolveWizardLabels`, _`FieldErrors`_, _`StepStatus`_, _`SummaryItem`_, _`SummarySection`_, _`UseWizardOptions`_, _`UseWizardReturn`_, _`ValidateResult`_, _`WizardLabels`_, _`WizardStepConfig`_ |
+| `wizard/types` | `DEFAULT_WIZARD_LABELS`, `resolveWizardLabels`, _`FieldErrors`_, _`StepStatus`_, _`SummaryItem`_, _`SummarySection`_, _`UseWizardOptions`_, _`UseWizardReturn`_, _`ValidateResult`_, _`WizardLabels`_, _`WizardStepConfig`_, _`WizardUrlSync`_ |
 | `wizard/use-wizard` | `useWizard` |
 | `wizard/wizard-context` | `useWizardContext`, `WizardContextProvider`, _`WizardContextValue`_ |
 | `wizard/validation` | `requiredFieldsValidator`, _`RequiredFieldSpec`_ |

package/dist/chart.d.ts

@@ -1,11 +1,12 @@
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartSeriesConfig, ChartTooltip, ChartTooltipContent, useChart } from './components/chart.js';
 export { CHART_COLORS, HEATMAP_HEX, HeatStops, PALETTE_HEX, lerpHex, paletteFor, textOn } from './theme/chart-palette.js';
 export { Treemap, TreemapCell, TreemapCellProps, TreemapNode, TreemapProps, fitLabel } from './components/treemap.js';
-export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, SeriesChartAxis, SeriesChartProps, SeriesChartSeries, SeriesChartSpan, SeriesChartX, SeriesSource, StaticSeriesChart, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, seriesKey, soleSeriesColor } from './components/series-chart.js';
-export { DEFAULT_Y_AXIS, NO_ZOOM, SharedXZoom, ZOOM_MIN_DRAG, ZOOM_SQUARE_ENOUGH, ZoomAxes, ZoomBinding, ZoomDrag, ZoomFitSource, ZoomSelection, ZoomState, ZoomTarget, fitXToY, fitYToX, selectionFromDrag, withChartZoom, zoomAfter, zoomAxesFor, zoomDomains } from './components/chart-zoom.js';
+export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, SeriesChartAxis, SeriesChartHit, SeriesChartMarker, SeriesChartPoint, SeriesChartProps, SeriesChartReference, SeriesChartRow, SeriesChartSeries, SeriesChartSpan, SeriesChartTickValues, SeriesChartTone, SeriesChartTooltip, SeriesChartType, SeriesChartX, SeriesChartXTick, SeriesChartXValue, SeriesSource, StaticSeriesChart, anchoredBand, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, seriesKey, seriesLegendEntries, soleSeriesColor, visibleSeries } from './components/series-chart.js';
+export { DEFAULT_Y_AXIS, NO_ZOOM, SharedXZoom, ZOOM_MIN_DRAG, ZOOM_SQUARE_ENOUGH, ZoomAxes, ZoomAxesSetting, ZoomBinding, ZoomDrag, ZoomFitSeries, ZoomFitSource, ZoomRow, ZoomSelection, ZoomState, ZoomTarget, axisExtent, defaultZoomAxes, fitXToY, fitYToX, selectionFromDrag, withChartZoom, zoomAfter, zoomAxesFor, zoomDomains } from './components/chart-zoom.js';
 export { LegendColumn, LegendEntry, LegendGroup, STEP_DASH, STROKE_PATTERNS, ToggleLegend, ToggleLegendProps, strokeDash, toggleHidden } from './components/toggle-legend.js';
 export { FACING_SIDES, FacingSide, facingAxes, facingBand, facingHeadingPad } from './components/facing-pair.js';
 export { DEFAULT_SERIES_CHART_LABELS, SeriesChartLabels } from './components/series-chart-labels.js';
+export { TimeTickUnit } from './components/series-chart-ticks.js';
 import 'recharts';
 import 'react';
 import './lib/direction.js';

package/dist/components/alert-banner.d.ts

@@ -1,7 +1,10 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, MouseEvent } from 'react';
 
-type AlertTone = "danger" | "warning" | "neutral";
+/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's
+ *  preview and beta-performance banners, which borrowed `warning` for want of it and
+ *  so told every user of the preview build that something was wrong. */
+type AlertTone = "danger" | "warning" | "info" | "neutral";
 /** The tone's border + surface on their own — for a caller that already has a box
  * with its own radius and padding (e.g. a Card). Remember to shave 1px off that
  * padding for the colored tones, whose border is 2px wide. */
@@ -10,15 +13,61 @@ declare function toneFrameClass(tone: AlertTone): string;
  * and surface plus this component's own radius and padding, the latter
  * compensating the 2px colored border so toggling tones never shifts layout. */
 declare function alertFrameClass(tone: AlertTone): string;
-interface AlertBannerProps extends ComponentPropsWithoutRef<"div"> {
-    /** `neutral` is deliberately not offered: a callout with a warning triangle in it
-     *  and no colour is a warning that looks like a note, which is the one thing this
-     *  box must never be. The neutral frame is still available on its own through
-     *  {@link toneFrameClass}. */
-    tone?: Exclude<AlertTone, "neutral">;
+interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "onClick"> {
+    /** Default `danger`. `info` for news, `neutral` for a plain note — see
+     *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */
+    tone?: AlertTone;
+    /**
+     * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role
+     * and NOTHING else — no border, no surface, no padding — so it fits inside a
+     * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar
+     * shows "Radius below the minimum" and "Solving…" there; a box would have doubled
+     * the row's height every time either appeared.
+     *
+     * The inline variant is also a LIVE REGION by default — `role="alert"` for
+     * `danger`, `role="status"` for the rest — because a message that appears in a
+     * toolbar in answer to what the user just did is exactly the kind a screen reader
+     * otherwise never hears. The box stays role-less as it always was: it is usually
+     * page furniture present at load, and an alert that fires on every navigation is
+     * noise. Either way a `role` you pass wins.
+     */
+    variant?: "box" | "inline";
+    /** Replaces the tone's glyph — a `<Spinner label={null} />` for "Solving…", say.
+     *  `null` draws none. Always decorative; the text carries the message. */
+    icon?: ReactNode;
+    /** Renders an × at the end that calls this. The banner does not hide itself — the
+     *  caller removes it (and remembers that it did), as with every other kit control
+     *  whose state is app state. */
+    onDismiss?: () => void;
+    /** Accessible name of the ×. Default: `common.dismiss` from the
+     *  {@link UiKitProvider}, else "Dismiss". */
+    dismissLabel?: string;
     children: ReactNode;
 }
-/** Static warning/danger callout box with the shared frame and an icon. */
-declare function AlertBanner({ tone, className, children, ...rest }: AlertBannerProps): react.JSX.Element;
+/**
+ * The whole-row modes. keksdose's budget-summary card is a banner you tap to open
+ * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a
+ * banner with a link inside it was a small target inside a big one that looked like
+ * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one
+ * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.
+ *
+ * With `onDismiss` as well, the × cannot go inside the button (interactive content
+ * may not nest), so the frame becomes a wrapper holding two siblings: the row's
+ * button, stretched over the whole frame, and the × on top of it. It still looks and
+ * clicks like one banner with an × in its corner, and the two are separate tab stops.
+ */
+type AlertBannerProps = AlertBannerBaseProps & ({
+    /** Makes the whole banner one link. Mutually exclusive with `onClick`. */
+    href?: string;
+    onClick?: never;
+} | {
+    href?: never;
+    /** Makes the whole banner one button. Mutually exclusive with `href`. The
+     *  event's element is the `<button>`, not a `<div>`. */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+});
+/** Warning/danger/info callout box with the shared frame and an icon — or, with
+ *  `variant="inline"`, the same message as a frameless line of toned text. */
+declare function AlertBanner({ tone, variant, icon, onDismiss, dismissLabel, href, onClick, className, children, role, ...rest }: AlertBannerProps): react.JSX.Element;
 
 export { AlertBanner, type AlertBannerProps, type AlertTone, alertFrameClass, toneFrameClass };

package/dist/components/alert-banner.js

@@ -1,10 +1,12 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { AlertTriangle } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, ChevronRight, Info, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 const TONE_FRAME = {
   danger: "border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]",
   warning: "border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]",
+  info: "border-2 border-[var(--info-border)] bg-[var(--info-bg)]",
   neutral: "border border-[var(--border)]"
 };
 function toneFrameClass(tone) {
@@ -16,21 +18,125 @@ function alertFrameClass(tone) {
 }
 const TONE_TEXT = {
   danger: "text-[var(--danger)]",
-  warning: "text-[var(--warning)]"
+  warning: "text-[var(--warning)]",
+  info: "text-[var(--info)]",
+  neutral: "text-[var(--text-secondary)]"
 };
 const TONE_ICON = {
   danger: "text-[var(--danger)]",
-  warning: "text-[var(--warning)]"
+  warning: "text-[var(--warning)]",
+  info: "text-[var(--info)]",
+  neutral: "text-[var(--text-muted)]"
 };
-function AlertBanner({ tone = "danger", className, children, ...rest }) {
+const TONE_GLYPH = {
+  danger: AlertTriangle,
+  warning: AlertTriangle,
+  info: Info,
+  neutral: Info
+};
+function AlertBanner({
+  tone = "danger",
+  variant = "box",
+  icon,
+  onDismiss,
+  dismissLabel,
+  href,
+  onClick,
+  className,
+  children,
+  role,
+  ...rest
+}) {
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });
+  const inline = variant === "inline";
+  const interactive = href !== void 0 || onClick !== void 0;
+  const resolvedRole = role ?? (inline ? tone === "danger" ? "alert" : "status" : void 0);
+  const Glyph = TONE_GLYPH[tone];
+  const glyph = icon === null ? null : icon !== void 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("flex shrink-0 [&_svg]:size-4", !inline && "mt-0.5", TONE_ICON[tone]), children: icon }) : /* @__PURE__ */ jsx(Glyph, { "aria-hidden": true, className: cn("size-4 shrink-0", !inline && "mt-0.5", TONE_ICON[tone]) });
+  const row = inline ? "inline-flex items-center gap-1.5 text-sm" : "flex items-start gap-2 text-sm";
+  const frame = inline ? "" : alertFrameClass(tone);
+  const focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]";
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    glyph,
+    /* @__PURE__ */ jsx("span", { className: cn(!inline && "flex-1", "min-w-0 text-start"), children }),
+    interactive && /* @__PURE__ */ jsx(
+      ChevronRight,
+      {
+        "aria-hidden": true,
+        className: cn("size-4 shrink-0 opacity-70 rtl:-scale-x-100", !inline && "mt-0.5")
+      }
+    )
+  ] });
+  const dismiss = onDismiss ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": common.dismiss,
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onDismiss();
+      },
+      className: cn(
+        // Negative margins so the × does not make the box taller than its text; the
+        // hover wash takes the tone's own hue, so it works on every tone.
+        "relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10",
+        focusRing
+      ),
+      children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-4" })
+    }
+  ) : null;
+  if (!interactive) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        role: resolvedRole,
+        className: cn(row, frame, TONE_TEXT[tone], className),
+        children: [
+          content,
+          dismiss
+        ]
+      }
+    );
+  }
+  const hover = "cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110";
+  const split = dismiss !== null;
+  const actionClass = split ? cn(
+    "flex min-w-0 flex-1 gap-2 text-start",
+    inline ? "items-center" : "items-start",
+    "outline-none after:absolute after:inset-0 after:rounded-md after:content-['']",
+    "focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]"
+  ) : cn(row, !inline && "w-full", frame, TONE_TEXT[tone], hover, focusRing, className);
+  const actionRest = split ? {} : rest;
+  const action = href !== void 0 ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...actionRest,
+      href,
+      className: actionClass,
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...actionRest,
+      type: "button",
+      onClick,
+      className: actionClass,
+      children: content
+    }
+  );
+  if (!split) return action;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ...rest,
-      className: cn("flex items-start gap-2 text-sm", alertFrameClass(tone), TONE_TEXT[tone], className),
+      role: resolvedRole,
+      className: cn("relative", row, frame, TONE_TEXT[tone], hover, className),
       children: [
-        /* @__PURE__ */ jsx(AlertTriangle, { className: cn("mt-0.5 size-4 shrink-0", TONE_ICON[tone]) }),
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children })
+        action,
+        dismiss
       ]
     }
   );

package/dist/components/alert-banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { AlertTriangle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AlertTone = \"danger\" | \"warning\" | \"neutral\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]\",\n  warning: \"border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]\",\n  neutral: \"border border-[var(--border)]\",\n};\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout. */\nexport function alertFrameClass(tone: AlertTone): string {\n  const box = tone === \"neutral\" ? \"rounded-md p-3\" : \"rounded-md p-[11px]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\nconst TONE_TEXT: Record<Exclude<AlertTone, \"neutral\">, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n};\n\nconst TONE_ICON: Record<Exclude<AlertTone, \"neutral\">, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n};\n\nexport interface AlertBannerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** `neutral` is deliberately not offered: a callout with a warning triangle in it\n   *  and no colour is a warning that looks like a note, which is the one thing this\n   *  box must never be. The neutral frame is still available on its own through\n   *  {@link toneFrameClass}. */\n  tone?: Exclude<AlertTone, \"neutral\">;\n  children: ReactNode;\n}\n\n/** Static warning/danger callout box with the shared frame and an icon. */\nexport function AlertBanner({ tone = \"danger\", className, children, ...rest }: AlertBannerProps) {\n  return (\n    <div\n      // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n      // `aria-describedby` — then the layout and tone classes, which are merged\n      // through `cn` rather than spread so a caller's `className` refines the box\n      // instead of replacing it.\n      {...rest}\n      className={cn(\"flex items-start gap-2 text-sm\", alertFrameClass(tone), TONE_TEXT[tone], className)}\n    >\n      <AlertTriangle className={cn(\"mt-0.5 size-4 shrink-0\", TONE_ICON[tone])} />\n      <span className=\"flex-1\">{children}</span>\n    </div>\n  );\n}\n"],"mappings":";AA8DI,SAQE,KARF;AA7DJ,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AAiBnB,MAAM,aAAwC;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AACX;AAKO,SAAS,eAAe,MAAyB;AACtD,SAAO,WAAW,IAAI;AACxB;AAKO,SAAS,gBAAgB,MAAyB;AACvD,QAAM,MAAM,SAAS,YAAY,mBAAmB;AACpD,SAAO,GAAG,GAAG,IAAI,WAAW,IAAI,CAAC;AACnC;AAEA,MAAM,YAA2D;AAAA,EAC/D,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,MAAM,YAA2D;AAAA,EAC/D,QAAQ;AAAA,EACR,SAAS;AACX;AAYO,SAAS,YAAY,EAAE,OAAO,UAAU,WAAW,UAAU,GAAG,KAAK,GAAqB;AAC/F,SACE;AAAA,IAAC;AAAA;AAAA,MAKE,GAAG;AAAA,MACJ,WAAW,GAAG,kCAAkC,gBAAgB,IAAI,GAAG,UAAU,IAAI,GAAG,SAAS;AAAA,MAEjG;AAAA,4BAAC,iBAAc,WAAW,GAAG,0BAA0B,UAAU,IAAI,CAAC,GAAG;AAAA,QACzE,oBAAC,UAAK,WAAU,UAAU,UAAS;AAAA;AAAA;AAAA,EACrC;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { AlertTriangle, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"neutral\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]\",\n  warning: \"border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]\",\n  info: \"border-2 border-[var(--info-border)] bg-[var(--info-bg)]\",\n  neutral: \"border border-[var(--border)]\",\n};\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout. */\nexport function alertFrameClass(tone: AlertTone): string {\n  const box = tone === \"neutral\" ? \"rounded-md p-3\" : \"rounded-md p-[11px]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  neutral: \"text-[var(--text-secondary)]\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  neutral: \"text-[var(--text-muted)]\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   */\n  variant?: \"box\" | \"inline\";\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  children: ReactNode;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  icon,\n  onDismiss,\n  dismissLabel,\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const interactive = href !== undefined || onClick !== undefined;\n  const resolvedRole = role ?? (inline ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  const Glyph = TONE_GLYPH[tone];\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span aria-hidden className={cn(\"flex shrink-0 [&_svg]:size-4\", !inline && \"mt-0.5\", TONE_ICON[tone])}>\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(\"size-4 shrink-0\", !inline && \"mt-0.5\", TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below.\n  const row = inline ? \"inline-flex items-center gap-1.5 text-sm\" : \"flex items-start gap-2 text-sm\";\n  const frame = inline ? \"\" : alertFrameClass(tone);\n  const focusRing =\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]\";\n\n  const content = (\n    <>\n      {glyph}\n      <span className={cn(!inline && \"flex-1\", \"min-w-0 text-start\")}>{children}</span>\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(\"size-4 shrink-0 opacity-70 rtl:-scale-x-100\", !inline && \"mt-0.5\")}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {content}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 flex-1 gap-2 text-start\",\n        inline ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:rounded-md after:content-['']\",\n        \"focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]\",\n      )\n    : cn(row, !inline && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n\n  const action =\n    href !== undefined ? (\n      <a\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return action;\n  return (\n    <div\n      {...rest}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {action}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/amount-input.d.ts

@@ -32,6 +32,9 @@ import './file-button.js';
 import './measured-grid.js';
 import '../feedback/feedback-attachment.js';
 import '../feedback/feedback-dialog.js';
+import './confirm-dialog.js';
+import './floating-panel.js';
+import './copy-button.js';
 
 interface AmountInputProps {
     value: string;

package/dist/components/button-group.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
+    /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —
+     *  the map's zoom + over −. */
+    orientation?: "horizontal" | "vertical";
+}
+/**
+ * Adjacent `Button`s or `IconButton`s drawn as one joined control: a single frame,
+ * hairline dividers between the members, rounded only at the outer corners.
+ *
+ * keksdose asked for it twice — "collapse all / expand all" above its category
+ * tree, and the + and − of its map zoom — both hand-built with negative margins and
+ * physical `rounded-l` / `rounded-r`, which came out inside-out under `dir="rtl"`.
+ *
+ * `role="group"` with a name: a reader then introduces the pair as "Zoom, group"
+ * before reading "Zoom in", which is what tells a listener that the next button
+ * belongs with this one. Pass `aria-label` (or `aria-labelledby`); a group with no
+ * name is one more unlabelled wrapper. It is NOT a toolbar — it adds no arrow-key
+ * roving, and every member keeps its own tab stop, as plain adjacent buttons do.
+ * For one-of-many selection use `ToggleGroup`, which has the radio semantics.
+ */
+declare function ButtonGroup({ orientation, className, ...rest }: ButtonGroupProps): react.JSX.Element;
+
+export { ButtonGroup, type ButtonGroupProps };

package/dist/components/button-group.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const JOINED_COMMON = cn(
+  "inline-flex rounded-md border border-[var(--border)]",
+  // The group draws the frame; each member gives up its own border, radius and shadow.
+  "[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none",
+  "[&>*>button]:rounded-none [&>*>button]:border-0 [&>*>button]:shadow-none",
+  "[&>*]:border-[var(--border)]",
+  // A focused member rises above its neighbours so its ring is not painted over by
+  // the next one's background.
+  "[&>*]:relative [&>*:focus-within]:z-10"
+);
+const JOINED = {
+  // Logical edges and corners throughout (`border-s`, `rounded-s-*`), so in RTL the
+  // first member sits on the right with the right-hand corners rounded — the physical
+  // pair would round the outside of the last button and square off the first.
+  horizontal: cn(
+    JOINED_COMMON,
+    "flex-row items-stretch",
+    "[&>*:not(:first-child)]:border-s",
+    "[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md",
+    "[&>:first-child>button]:rounded-s-md [&>:last-child>button]:rounded-e-md"
+  ),
+  // The block axis is top-to-bottom in both reading directions, so top/bottom are
+  // already the logical edges here.
+  vertical: cn(
+    JOINED_COMMON,
+    "flex-col items-stretch",
+    "[&>*:not(:first-child)]:border-t",
+    "[&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md",
+    "[&>:first-child>button]:rounded-t-md [&>:last-child>button]:rounded-b-md"
+  )
+};
+function ButtonGroup({ orientation = "horizontal", className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      role: "group",
+      "data-orientation": orientation,
+      className: cn(JOINED[orientation], className)
+    }
+  );
+}
+export {
+  ButtonGroup
+};
+//# sourceMappingURL=button-group.js.map

package/dist/components/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/button-group.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n// Every class below is spelled out in full rather than assembled from parts: the\n// consumer's Tailwind build finds classes by scanning this package's source as text,\n// and a class that exists only after a template literal runs is never generated.\n//\n// Each rule is written twice, once for a direct child and once for a `<button>` one\n// level down. The second is for a Tooltip-wrapped IconButton — the map zoom's + and −\n// both carry a tooltip — where the direct child is the tooltip's wrapper span and the\n// button that draws the border and the corners sits inside it.\nconst JOINED_COMMON = cn(\n  \"inline-flex rounded-md border border-[var(--border)]\",\n  // The group draws the frame; each member gives up its own border, radius and shadow.\n  \"[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none\",\n  \"[&>*>button]:rounded-none [&>*>button]:border-0 [&>*>button]:shadow-none\",\n  \"[&>*]:border-[var(--border)]\",\n  // A focused member rises above its neighbours so its ring is not painted over by\n  // the next one's background.\n  \"[&>*]:relative [&>*:focus-within]:z-10\",\n);\n\nconst JOINED: Record<\"horizontal\" | \"vertical\", string> = {\n  // Logical edges and corners throughout (`border-s`, `rounded-s-*`), so in RTL the\n  // first member sits on the right with the right-hand corners rounded — the physical\n  // pair would round the outside of the last button and square off the first.\n  horizontal: cn(\n    JOINED_COMMON,\n    \"flex-row items-stretch\",\n    \"[&>*:not(:first-child)]:border-s\",\n    \"[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md\",\n    \"[&>:first-child>button]:rounded-s-md [&>:last-child>button]:rounded-e-md\",\n  ),\n  // The block axis is top-to-bottom in both reading directions, so top/bottom are\n  // already the logical edges here.\n  vertical: cn(\n    JOINED_COMMON,\n    \"flex-col items-stretch\",\n    \"[&>*:not(:first-child)]:border-t\",\n    \"[&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md\",\n    \"[&>:first-child>button]:rounded-t-md [&>:last-child>button]:rounded-b-md\",\n  ),\n};\n\nexport interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —\n   *  the map's zoom + over −. */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\n/**\n * Adjacent `Button`s or `IconButton`s drawn as one joined control: a single frame,\n * hairline dividers between the members, rounded only at the outer corners.\n *\n * keksdose asked for it twice — \"collapse all / expand all\" above its category\n * tree, and the + and − of its map zoom — both hand-built with negative margins and\n * physical `rounded-l` / `rounded-r`, which came out inside-out under `dir=\"rtl\"`.\n *\n * `role=\"group\"` with a name: a reader then introduces the pair as \"Zoom, group\"\n * before reading \"Zoom in\", which is what tells a listener that the next button\n * belongs with this one. Pass `aria-label` (or `aria-labelledby`); a group with no\n * name is one more unlabelled wrapper. It is NOT a toolbar — it adds no arrow-key\n * roving, and every member keeps its own tab stop, as plain adjacent buttons do.\n * For one-of-many selection use `ToggleGroup`, which has the radio semantics.\n */\nexport function ButtonGroup({ orientation = \"horizontal\", className, ...rest }: ButtonGroupProps) {\n  return (\n    <div\n      {...rest}\n      role=\"group\"\n      data-orientation={orientation}\n      className={cn(JOINED[orientation], className)}\n    />\n  );\n}\n"],"mappings":";AAmEI;AAlEJ,SAAS,UAAU;AAUnB,MAAM,gBAAgB;AAAA,EACpB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AACF;AAEA,MAAM,SAAoD;AAAA;AAAA;AAAA;AAAA,EAIxD,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA;AAAA;AAAA,EAGA,UAAU;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAuBO,SAAS,YAAY,EAAE,cAAc,cAAc,WAAW,GAAG,KAAK,GAAqB;AAChG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,WAAW,GAAG,OAAO,WAAW,GAAG,SAAS;AAAA;AAAA,EAC9C;AAEJ;","names":[]}

package/dist/components/calculator.d.ts

@@ -29,6 +29,9 @@ import './file-button.js';
 import './measured-grid.js';
 import '../feedback/feedback-attachment.js';
 import '../feedback/feedback-dialog.js';
+import './confirm-dialog.js';
+import './floating-panel.js';
+import './copy-button.js';
 
 /** Screen-reader names for the calculator panel's own controls — any part of the
  *  kit's `calculator` namespace. Once three optional keys of its own; widened, not