@sovereignfs/ui 0.33.1 → 0.40.0

package/README.md

@@ -19,7 +19,7 @@ npm install @sovereignfs/ui
 import { Button, Input, Card, Dialog, Drawer } from '@sovereignfs/ui';
 ```
 
-Available components: `Avatar`, `Badge`, `Button`, `Card`, `Dialog`, `Drawer`, `EmptyState`, `FormField`, `Icon`, `Input`, `NavTabs`, `PageHeader`, `Popover`, `SegmentedControl`, `Select`, `Spinner`, `SystemBanner`, `Tabs`, `Toast` / `useToast`, `Toggle`, `Tooltip`.
+Available components and hooks: `Avatar`, `Badge`, `Button`, `Calendar`, `Card`, `CheckableListRow`, `Checkbox`, `CodeTextarea`, `ConfirmDialog`, `DatePicker`, `Dialog`, `DragHandleRow`, `Drawer`, `EmptyState`, `FormField`, `Icon`, `IconPicker`, `Input`, `Menu`, `NavTabs`, `OverlayHeader`, `PageHeader`, `Popover`, `QuantityStepper`, `SegmentedControl`, `Select`, `Sheet`, `Spinner`, `SplitPane`, `StatusBadge`, `SuggestionInput`, `SystemBanner`, `Tabs`, `TagInput`, `Textarea`, `Toast` / `useToast`, `Toggle`, `Tooltip`, `useDoubleTapHandler`, `useIsMobile`, `useLongPress`, and `useSingleOrDoubleTap`.
 
 ### Tokens
 

package/dist/CheckableListRow.module.css

@@ -0,0 +1,95 @@
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-3);
+  width: 100%;
+}
+
+.tapTarget {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  flex: 1;
+  min-width: 0;
+  min-height: var(--sv-touch-target-min);
+  cursor: pointer;
+}
+
+.tapTarget:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--sv-radius-sm);
+}
+
+/* Visual box — matches Checkbox.module.css's .box/.checked/.tick. */
+.box {
+  --checkbox-box-size: 18px;
+  flex-shrink: 0;
+  width: var(--checkbox-box-size);
+  height: var(--checkbox-box-size);
+  border-radius: var(--sv-radius-sm);
+  border: 1.5px solid var(--sv-color-border-strong);
+  background: var(--sv-color-surface);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checked {
+  background-color: var(--sv-color-accent);
+  border-color: var(--sv-color-accent);
+  color: var(--sv-white);
+}
+
+.tick {
+  width: 10px;
+  height: 8px;
+  pointer-events: none;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--sv-color-text-muted);
+}
+
+.label {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.15s ease;
+  position: relative;
+}
+
+.label::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  height: 1.5px;
+  background: var(--sv-color-text-muted);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 0.2s ease;
+}
+
+.struck {
+  color: var(--sv-color-text-muted);
+}
+
+.struck::after {
+  transform: scaleX(1);
+}
+
+.trailing {
+  flex-shrink: 0;
+}

package/dist/FileDropzone.module.css

@@ -0,0 +1,63 @@
+.dropzone {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-4);
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--sv-space-4) var(--sv-space-5);
+  border: 1.5px dashed var(--sv-color-border);
+  border-radius: var(--sv-radius-md);
+  background-color: var(--sv-color-surface-raised);
+  cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    border-color 0.12s ease;
+}
+
+@media (hover: hover) {
+  .dropzone:hover {
+    background-color: var(--sv-color-surface-sunken);
+    border-color: var(--sv-color-border-strong);
+  }
+}
+
+.dropzoneActive {
+  background-color: var(--sv-color-surface-sunken);
+  border-color: var(--sv-color-border-strong);
+}
+
+.dropzoneDisabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--sv-color-text-muted);
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.title {
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+  color: var(--sv-color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hint {
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-muted);
+}
+
+.hiddenInput {
+  display: none;
+}

package/dist/IconPicker.module.css

@@ -0,0 +1,63 @@
+.trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  padding: var(--sv-space-2);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-md);
+  background: var(--sv-color-surface);
+  color: var(--sv-color-text-primary);
+  cursor: pointer;
+}
+
+.trigger:hover {
+  background: var(--sv-color-surface-sunken);
+}
+
+.trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sv-icon-size-md);
+  height: var(--sv-icon-size-md);
+  color: var(--sv-color-text-subtle);
+  font-size: var(--sv-font-size-sm);
+}
+
+.triggerLabel {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--sv-space-1);
+  padding: var(--sv-space-2);
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sv-touch-target-min);
+  height: var(--sv-touch-target-min);
+  border: none;
+  border-radius: var(--sv-radius-sm);
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  cursor: pointer;
+}
+
+.option:hover {
+  background: var(--sv-color-surface-sunken);
+}
+
+.optionSelected {
+  background: var(--sv-color-accent-subtle);
+}

package/dist/QuantityStepper.module.css

@@ -0,0 +1,67 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  padding: var(--sv-space-1);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-surface-sunken);
+}
+
+.button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sv-space-6);
+  height: var(--sv-space-6);
+  border-radius: var(--sv-radius-full);
+  color: var(--sv-color-text-primary);
+  font-size: var(--sv-font-size-md);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.button:hover:not(:disabled) {
+  background: var(--sv-color-surface);
+}
+
+.button:disabled {
+  color: var(--sv-color-text-subtle);
+  cursor: not-allowed;
+}
+
+.input {
+  all: unset;
+  width: 3ch;
+  text-align: center;
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+  /* Hide the native spinner — the +/- buttons are the stepper affordance,
+     a second one from the browser would be redundant and often looks
+     inconsistent across browsers anyway. */
+  -moz-appearance: textfield;
+}
+
+.input::-webkit-outer-spin-button,
+.input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.input:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+  border-radius: var(--sv-radius-sm);
+}
+
+.input:disabled {
+  color: var(--sv-color-text-muted);
+}
+
+.unit {
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-subtle);
+  white-space: nowrap;
+}

package/dist/SuggestionInput.module.css

@@ -0,0 +1,103 @@
+.input {
+  display: block;
+  width: 100%;
+  padding: var(--sv-space-2) var(--sv-space-3);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.5;
+  color: var(--sv-color-text-primary);
+  background-color: var(--sv-color-surface);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-md);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+/* iOS Safari auto-zooms on focused inputs under 16px — see Input.module.css
+   for the full rationale; kept in sync here since this isn't built on Input. */
+@media (pointer: coarse) {
+  .input {
+    font-size: var(--sv-font-size-md);
+  }
+}
+
+.input::placeholder {
+  color: var(--sv-color-text-muted);
+}
+
+.input:focus-visible {
+  outline: none;
+  border-color: var(--sv-color-accent);
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+}
+
+.input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: var(--sv-space-1);
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.status {
+  padding: var(--sv-space-2) var(--sv-space-3);
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-muted);
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  width: 100%;
+  padding: var(--sv-space-2) var(--sv-space-3);
+  border: none;
+  border-radius: var(--sv-radius-sm);
+  background: transparent;
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+  text-align: left;
+  cursor: pointer;
+}
+
+.option:hover,
+.optionActive {
+  background: var(--sv-color-surface-sunken);
+}
+
+.optionIcon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.optionLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.optionMeta {
+  flex-shrink: 0;
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-subtle);
+}
+
+.optionCreate {
+  font-style: italic;
+  color: var(--sv-color-text-muted);
+}
+
+.divider {
+  margin: var(--sv-space-1) var(--sv-space-2);
+  border-top: 1px solid var(--sv-color-border);
+}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, SelectHTMLAttributes, ReactElement, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, PointerEvent, MouseEvent } from 'react';
+import { ReactNode, ButtonHTMLAttributes, SelectHTMLAttributes, ReactElement, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, PointerEvent, MouseEvent, KeyboardEvent } from 'react';
 
 type BadgeVariant = 'role' | 'status' | 'mono';
 type BadgeStatus = 'active' | 'enabled' | 'deactivated' | 'failed' | 'invited' | 'pending' | 'neutral';
@@ -18,7 +18,7 @@ interface BadgeProps {
  */
 declare function Badge({ variant, status, children }: BadgeProps): react.JSX.Element;
 
-type IconName = 'house' | 'settings' | 'log-out' | 'chevron-right' | 'chevron-left' | 'chevron-down' | 'chevron-up' | 'x' | 'check' | 'plus' | 'trash-2' | 'pencil' | 'rotate-ccw' | 'search' | 'user' | 'shield' | 'lock' | 'eye' | 'eye-off' | 'mail' | 'bell' | 'activity' | 'package' | 'grid-2x2' | 'info' | 'alert-triangle' | 'calendar' | 'sliders-horizontal' | 'ellipsis-vertical';
+type IconName = 'house' | 'settings' | 'log-out' | 'chevron-right' | 'chevron-left' | 'chevron-down' | 'chevron-up' | 'x' | 'check' | 'plus' | 'trash-2' | 'pencil' | 'rotate-ccw' | 'search' | 'user' | 'shield' | 'lock' | 'eye' | 'eye-off' | 'mail' | 'bell' | 'activity' | 'package' | 'grid-2x2' | 'info' | 'alert-triangle' | 'calendar' | 'sliders-horizontal' | 'ellipsis-vertical' | 'file' | 'upload' | 'external-link' | 'banana' | 'apple' | 'carrot' | 'egg' | 'beef' | 'fish' | 'coffee' | 'wine' | 'beer' | 'cookie' | 'pizza' | 'candy' | 'salad' | 'milk' | 'drumstick' | 'croissant' | 'cup-soda' | 'spray-can' | 'snowflake' | 'shopping-basket';
 
 /** Decorative icon — visually meaningful but described by surrounding text. */
 type DecorativeProps = {
@@ -701,6 +701,45 @@ interface DragHandleRowProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function DragHandleRow({ children, handleProps, isDragging, className, ...rest }: DragHandleRowProps): react.JSX.Element;
 
+interface FileDropzoneProps {
+    /** Native `<input type="file">` `name` attribute — set this to submit the
+     * file as part of a native `<form action={...}>` (Server Action) request. */
+    name?: string;
+    /** Native `<input type="file">` `accept` attribute, e.g. `".zip,application/zip"`. */
+    accept?: string;
+    /** Icon shown beside the label — a file-type glyph. Defaults to a generic file icon. */
+    icon?: ReactNode;
+    /** Primary label — e.g. "Choose a ZIP file", or the selected file's name. */
+    label: string;
+    /** Secondary hint — e.g. "or drag and drop here", or the selected file's size. */
+    hint?: string;
+    /** Called with the picked or dropped file, or `null` if the input is cleared. */
+    onFileSelect: (file: File | null) => void;
+    /** Accessible name for the control — describe what will be uploaded. */
+    ariaLabel: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A styled drag-and-drop file picker: a dashed-border dropzone wrapping a
+ * visually-hidden native `<input type="file">`, so the native picker still
+ * opens on click and the field participates in normal form semantics. A
+ * dropped file is written into the input's own `FileList` (via `DataTransfer`)
+ * so `name` + native `<form action>` submission sees it exactly like a
+ * click-picked file — not just the `onFileSelect` callback.
+ *
+ * Caller owns the selected-file state and passes `label`/`hint` accordingly
+ * (e.g. swap to the picked file's name/size) — this component is otherwise
+ * uncontrolled and stateless beyond its own drag-hover visual.
+ *
+ * Do not pass `required` through to a wrapping form's validation via this
+ * field — `display: none` on the hidden input does not exempt it from HTML5
+ * constraint validation, so a `required` hidden input can block submission
+ * with no visible field for the user to focus. Validate `onFileSelect`'s
+ * result in application code instead.
+ */
+declare function FileDropzone({ name, accept, icon, label, hint, onFileSelect, ariaLabel, disabled, className, }: FileDropzoneProps): react.JSX.Element;
+
 interface CalendarProps {
     /** Selected date, or `null` for no selection. */
     value: Date | null;
@@ -747,6 +786,132 @@ interface DatePickerProps {
  */
 declare function DatePicker({ value, onChange, minDate, maxDate, placeholder, 'aria-label': ariaLabel, disabled, }: DatePickerProps): react.JSX.Element;
 
+interface SuggestionOption {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Secondary text shown right-aligned on the row, e.g. "bought 4× recently". */
+    meta?: string;
+}
+interface SuggestionInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: SuggestionOption[];
+    onSelect: (option: SuggestionOption) => void;
+    placeholder?: string;
+    'aria-label': string;
+    id?: string;
+    disabled?: boolean;
+    /** Shown in place of the options list while a suggestion fetch is in flight. */
+    loading?: boolean;
+    /**
+     * Label for a trailing, always-selectable row that commits the raw typed
+     * text instead of a matched option — e.g. `(v) => \`Add "${v}" as a new item\`}`.
+     * Shown whenever `value` is non-empty and `onCreate` is provided, even
+     * when `options` is empty, so the input is never a dead end.
+     */
+    createLabel?: (value: string) => string;
+    onCreate?: (value: string) => void;
+    className?: string;
+}
+/**
+ * SuggestionInput — a text field with an anchored, keyboard-navigable list
+ * of async suggestions (a combobox), plus an optional trailing "create new"
+ * row so free text is always a valid commit, not just a matched option.
+ *
+ * Fully controlled: the caller owns `value`/`onChange` and supplies
+ * `options` (e.g. debounced server-fetched results) — this component only
+ * handles open/close, keyboard navigation, and selection. Built on `Popover`
+ * for positioning (`width: 'trigger'`, so the panel always matches the
+ * input's own width).
+ */
+declare function SuggestionInput({ value, onChange, options, onSelect, placeholder, 'aria-label': ariaLabel, id, disabled, loading, createLabel, onCreate, className, }: SuggestionInputProps): react.JSX.Element;
+
+interface IconPickerProps {
+    value: IconName | null;
+    onChange: (icon: IconName) => void;
+    /** Icons offered in the grid, in display order. */
+    options: readonly IconName[];
+    'aria-label': string;
+    /** Shown next to the trigger's icon preview, e.g. the item's name. */
+    triggerLabel?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * IconPicker — a trigger button showing the current icon that opens a
+ * `Popover` grid of selectable icons. Built for cases with a curated,
+ * bounded icon set (e.g. Sovereign Shopper's grocery category icons,
+ * SHP-05) rather than the full design-system icon library.
+ *
+ * Selecting an icon both closes the picker and calls `onChange` — a
+ * consumer's `onChange` never needs to close the picker itself.
+ */
+declare function IconPicker({ value, onChange, options, 'aria-label': ariaLabel, triggerLabel, disabled, className, }: IconPickerProps): react.JSX.Element;
+
+interface QuantityStepperProps {
+    value: number;
+    onChange: (value: number) => void;
+    /** Smallest selectable value. Default `0`. */
+    min?: number;
+    /** Largest selectable value. Default unbounded. */
+    max?: number;
+    /** Amount +/- adjusts by. Default `1` — pass e.g. `0.5` for fractional
+     *  quantities (kg, L). */
+    step?: number;
+    /** Read-only suffix shown after the number, e.g. "pcs" or "kg" — for
+     *  compact contexts (a list row) where a separate unit selector doesn't
+     *  fit. Editable unit selection (a `<Select>` of units) lives outside
+     *  this component. */
+    unit?: string;
+    'aria-label': string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+}
+/**
+ * QuantityStepper — a numeric input with +/- buttons and an optional
+ * read-only unit suffix. Built for grocery/inventory-style quantities
+ * (Sovereign Shopper, SHP-06) — supports fractional `step` values since
+ * quantities like "1.5 kg" are common, unlike a typical integer counter.
+ *
+ * The middle field is a real `<input type="number">` so keyboard entry,
+ * paste, and the browser's native numeric affordances all work — the
+ * buttons are a convenience on top, not the only way to change the value.
+ */
+declare function QuantityStepper({ value, onChange, min, max, step, unit, 'aria-label': ariaLabel, disabled, id, className, }: QuantityStepperProps): react.JSX.Element;
+
+interface CheckableListRowProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    label: string;
+    /** Leading icon, e.g. a per-item `<Icon>`. */
+    icon?: ReactNode;
+    /** Trailing content, e.g. a quantity, a `QuantityStepper`, or a badge. */
+    trailing?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * CheckableListRow — a whole-row tap target that toggles a checked state,
+ * with strike-through on the label when checked. Built for "tap the row to
+ * mark it done" lists (Sovereign Shopper's tap-to-buy, SHP-07) where the
+ * checkbox itself is too small a target on mobile and the row already has
+ * nothing else competing for the tap.
+ *
+ * Renders as `role="checkbox"` on the row itself rather than composing
+ * `Checkbox`'s native `<input>` — nesting a real checkbox input inside the
+ * row's own click handler would mean two overlapping interactive elements
+ * (invalid HTML, and the input's own click would double-fire the row's
+ * toggle). The visual box matches `Checkbox`'s styling for consistency.
+ *
+ * `trailing` content (e.g. a `QuantityStepper`) is rendered outside the
+ * `role="checkbox"` element so its own interactive controls (+/- buttons)
+ * don't sit inside another interactive element either — clicking those
+ * doesn't toggle the row.
+ */
+declare function CheckableListRow({ checked, onCheckedChange, label, icon, trailing, disabled, className, }: CheckableListRowProps): react.JSX.Element;
+
 interface UseLongPressOptions {
     /** Called once the press has been held for `delay` without exceeding `moveTolerance`. */
     onLongPress: () => void;
@@ -853,4 +1018,32 @@ declare const MOBILE_BREAKPOINT_PX = 768;
  */
 declare function useIsMobile(breakpointPx?: number): boolean;
 
-export { Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeStatus, type BadgeVariant, type BannerVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeTextarea, type CodeTextareaProps, ConfirmDialog, type ConfirmDialogProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, type DialogSize, DragHandleRow, type DragHandleRowProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, type FormFieldRenderProps, Icon, type IconName, type IconProps, Input, type InputProps, type LongPressHandlers, MOBILE_BREAKPOINT_PX, Menu, type MenuEntry, type MenuItem, type MenuLabel, type MenuProps, type MenuSeparator, type NavTabItem, NavTabs, type NavTabsProps, OverlayHeader, type OverlayHeaderProps, PageHeader, type PageHeaderProps, Popover, type PopoverProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectProps, Sheet, type SheetProps, Spinner, type SpinnerProps, SplitPane, type SplitPaneProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, SystemBanner, type SystemBannerProps, type TabItem, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipProps, type UseLongPressOptions, useDoubleTapHandler, useIsMobile, useLongPress, useOverlaySecondRow, useSingleOrDoubleTap, useToast };
+interface CommitOnEnterOrBlurHandlers {
+    onKeyDown: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onBlur: () => void;
+}
+/**
+ * useCommitOnEnterOrBlur — spreads onto a quick-entry input/textarea so
+ * Enter and losing focus both commit through the same callback.
+ *
+ * iOS Safari adds its own "Previous / Next / Done" toolbar above the
+ * software keyboard whenever more than one focusable field is nearby (a
+ * Sheet with several fields, a form, etc.) — there is no supported way to
+ * suppress it, since it's WebKit's own field-detection heuristic, not
+ * something the page controls. Tapping that toolbar's Done/checkmark only
+ * ever fires a native `blur`; it is not a form submit and dispatches no
+ * keydown, so a field that commits only on Enter silently discards whatever
+ * was typed the moment a user dismisses the keyboard that way instead of
+ * pressing the on-screen Return key — the two dismissal paths look
+ * identical to the user but produce different outcomes.
+ *
+ * `onCommit` is called unconditionally on both Enter and blur — it owns any
+ * empty-value no-op itself, matching how every call site's own commit
+ * function already guards against an empty value before doing anything.
+ * Callers needing more key handling (e.g. Escape-to-cancel) compose their
+ * own `onKeyDown` around the returned one rather than this hook growing
+ * options for every caller's own key bindings.
+ */
+declare function useCommitOnEnterOrBlur(onCommit: () => void): CommitOnEnterOrBlurHandlers;
+
+export { Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeStatus, type BadgeVariant, type BannerVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, CheckableListRow, type CheckableListRowProps, Checkbox, type CheckboxProps, CodeTextarea, type CodeTextareaProps, type CommitOnEnterOrBlurHandlers, ConfirmDialog, type ConfirmDialogProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, type DialogSize, DragHandleRow, type DragHandleRowProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, FileDropzone, type FileDropzoneProps, FormField, type FormFieldProps, type FormFieldRenderProps, Icon, type IconName, IconPicker, type IconPickerProps, type IconProps, Input, type InputProps, type LongPressHandlers, MOBILE_BREAKPOINT_PX, Menu, type MenuEntry, type MenuItem, type MenuLabel, type MenuProps, type MenuSeparator, type NavTabItem, NavTabs, type NavTabsProps, OverlayHeader, type OverlayHeaderProps, PageHeader, type PageHeaderProps, Popover, type PopoverProps, QuantityStepper, type QuantityStepperProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectProps, Sheet, type SheetProps, Spinner, type SpinnerProps, SplitPane, type SplitPaneProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, SuggestionInput, type SuggestionInputProps, type SuggestionOption, SystemBanner, type SystemBannerProps, type TabItem, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipProps, type UseLongPressOptions, useCommitOnEnterOrBlur, useDoubleTapHandler, useIsMobile, useLongPress, useOverlaySecondRow, useSingleOrDoubleTap, useToast };