@ahrowe/ui 0.23.0 → 0.24.0

package/dist/types/package/common/button/button.types.d.ts

@@ -1,6 +1,6 @@
-import { CSSProperties } from 'react';
+import { default as React, CSSProperties } from 'react';
 import { IconContent } from '../types/icon.types';
-import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
+import { SlotClassNames, SlotStyles, DataProps } from '../types/slots.types';
 export declare enum ButtonStyleType {
     Primary = "primary",
     Default = "default",
@@ -10,7 +10,9 @@ export declare enum ButtonSize {
     Default = "default",
     Small = "small",
     Medium = "medium",
-    Large = "large"
+    Large = "large",
+    /** Square, padding-free button for a lone icon. Give it its own width/height. */
+    Icon = "icon"
 }
 export declare enum ButtonType {
     Button = "button",
@@ -18,7 +20,11 @@ export declare enum ButtonType {
     Submit = "submit"
 }
 export type ButtonSlots = 'background' | 'content' | 'loadingContainer' | 'label';
-export interface ButtonProps extends HtmlProps {
+/**
+ * `DataProps` supplies the `data-*` index signature, which `ButtonHTMLAttributes` doesn't cover.
+ * `type` and `onClick` below deliberately narrow their inherited counterparts.
+ */
+export interface ButtonProps extends DataProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;
     style?: CSSProperties;
     type?: ButtonType;

package/dist/types/package/common/card/card.types.d.ts

@@ -7,7 +7,7 @@ export declare enum CardStyleType {
     Outlined = "outlined",
     Filled = "filled"
 }
-export interface CardProps extends HtmlProps {
+export interface CardProps extends Omit<HtmlProps, 'tabIndex'> {
     className?: string | undefined;
     children?: ReactNode;
     styleType?: CardStyleType;

package/dist/types/package/common/carousel/carousel.types.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type CarouselSlots = 'root' | 'track' | 'slide' | 'prevButton' | 'nextButton' | 'dots' | 'dot';
-export interface CarouselProps extends HtmlProps {
+export interface CarouselProps extends Omit<HtmlProps, 'onChange'> {
     children?: ReactNode;
     currentIndex?: number;
     defaultIndex?: number;

package/dist/types/package/common/checkbox/checkbox.types.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties, ReactNode } from 'react';
 import { FormValidator } from '../../services/formValidation';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type CheckboxSlots = 'icon' | 'checkmark' | 'label';
-export interface CheckboxProps extends HtmlProps {
+export interface CheckboxProps extends Omit<HtmlProps, 'onToggle'> {
     label?: string;
     selected?: boolean;
     onToggle?: (isToggled: boolean, event?: React.MouseEvent | React.KeyboardEvent) => void;

package/dist/types/package/common/chip/chip.types.d.ts

@@ -12,6 +12,8 @@ export interface ChipProps extends HtmlProps {
     thumbnail?: React.ReactNode;
     styleType?: ChipStyleType;
     showRemoveIcon?: boolean;
+    /** Accessible name for the remove button. Default `'Remove'`. */
+    removeLabel?: string;
     onClick?: () => void;
     onRemove?: () => void;
 }

package/dist/types/package/common/colorPicker/colorPicker.types.d.ts

@@ -1,5 +1,5 @@
 import { HtmlProps } from '../types/slots.types';
-export interface ColorPickerProps extends HtmlProps {
+export interface ColorPickerProps extends Omit<HtmlProps, 'onChange'> {
     className?: string;
     value?: string;
     onChange?: (hex: string) => void;

package/dist/types/package/common/configProvider/configProvider.types.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { InputProps } from '../input/input.types';
 import { TextareaProps } from '../textarea/textarea.types';
-import { NumberInputProps } from '../numberInput/numberInput';
+import { NumberInputProps } from '../numberInput/numberInput.types';
 import { DropdownProps } from '../dropdown/dropdown.types';
 import { InputDropdownProps } from '../inputDropdown/inputDropdown.types';
 import { CheckboxProps } from '../checkbox/checkbox.types';

package/dist/types/package/common/dropZone/dropZone.types.d.ts

@@ -48,7 +48,7 @@ export interface DropZoneRenderState {
     disabled: boolean;
 }
 export type DropZoneSlots = 'root' | 'content' | 'fileList' | 'fileItem' | 'input';
-export interface DropZoneProps extends HtmlProps {
+export interface DropZoneProps extends Omit<HtmlProps, 'children'> {
     /** Static content, or a render function that receives the live drop state. */
     children?: React.ReactNode | ((state: DropZoneRenderState) => React.ReactNode);
     /**

package/dist/types/package/common/dropdown/dropdown.types.d.ts

@@ -6,7 +6,7 @@ export interface DropdownItem {
     label: ReactNode;
     disabled?: boolean;
 }
-export interface DropdownProps extends HtmlProps {
+export interface DropdownProps extends Omit<HtmlProps, 'onFocus' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'> {
     formValidator?: FormValidator | null;
     onMouseEnter?: ((event: React.MouseEvent) => void) | null;
     onMouseLeave?: ((event: React.MouseEvent) => void) | null;

package/dist/types/package/common/errorBoundary/errorBoundary.types.d.ts

@@ -24,7 +24,7 @@ export interface ErrorBoundaryLabels {
     /** Toast shown if the copy fails (only visible if `ToastProvider` is mounted). */
     copyErrorToast?: string;
 }
-export interface ErrorBoundaryProps extends HtmlProps {
+export interface ErrorBoundaryProps extends Omit<HtmlProps, 'title' | 'onError'> {
     children?: ReactNode;
     /** Heading shown above the error message. Default: "Something went wrong". */
     title?: ReactNode;

package/dist/types/package/common/floatingMenu/floatingMenu.types.d.ts

@@ -6,7 +6,7 @@ export declare enum Align {
     Center = "center"
 }
 export type FloatingMenuSlots = 'root' | 'trigger' | 'menu' | 'menuContainer';
-export interface FloatingMenuProps extends HtmlProps {
+export interface FloatingMenuProps extends Omit<HtmlProps, 'content'> {
     align?: Align;
     children?: ReactNode;
     content?: ReactNode;

package/dist/types/package/common/hooks/useCoarsePointer.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `true` when the primary pointing device is coarse (touch), kept current so a device that
+ * switches input modes re-renders.
+ *
+ * `useSyncExternalStore` rather than `useState` + `useEffect`: callers pick *markup* with this,
+ * so hydration has to start from the server's answer. Reading `matchMedia` in a `useState`
+ * initialiser makes the client's first render disagree with the server's HTML.
+ */
+export declare function useCoarsePointer(): boolean;
+export default useCoarsePointer;

package/dist/types/package/common/iconPicker/iconPicker.types.d.ts

@@ -9,7 +9,7 @@ export interface IconPickerItem {
     icon?: IconDefinition;
     customIcon?: React.ReactNode;
 }
-export interface IconPickerProps extends HtmlProps {
+export interface IconPickerProps extends Omit<HtmlProps, 'onChange'> {
     data?: IconPickerItem[];
     selectedId?: string | null;
     label?: string;

package/dist/types/package/common/input/input.types.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { FormValidator } from '../../services/formValidation';
-import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
+import { SlotClassNames, SlotStyles, DataProps } from '../types/slots.types';
 export declare enum InputType {
     Edit = "edit",
     Phone = "phone",
@@ -17,7 +17,7 @@ export declare enum InputIconPosition {
 }
 export type InputSlots = 'label' | 'container' | 'input' | 'suffix' | 'upperRightLabel' | 'fieldset';
 type OverriddenInputAttributes = 'onChange' | 'onFocus' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave' | 'onClick' | 'type' | 'value' | 'min' | 'max' | 'autoComplete';
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, OverriddenInputAttributes>, HtmlProps {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, OverriddenInputAttributes>, DataProps {
     onMouseEnter?: ((event: React.MouseEvent) => void) | null;
     onMouseLeave?: ((event: React.MouseEvent) => void) | null;
     onFocus?: ((event: React.FocusEvent) => void) | null;

package/dist/types/package/common/inputDropdown/inputDropdown.types.d.ts

@@ -6,7 +6,7 @@ export interface InputDropdownItem {
     label?: string;
     value: string;
 }
-export interface InputDropdownProps extends HtmlProps {
+export interface InputDropdownProps extends Omit<HtmlProps, 'onSelect'> {
     label?: string;
     value?: string;
     formValidator?: FormValidator | null;

package/dist/types/package/common/interactableDiv/interactableDiv.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { HtmlProps } from '../types/baseProps.types';
-interface Properties extends HtmlProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {
+import { DataProps } from '../types/baseProps.types';
+interface Properties extends DataProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {
     tabIndex?: number | null;
 }
 declare const InteractableDiv: React.ForwardRefExoticComponent<Properties & React.RefAttributes<HTMLDivElement>>;

package/dist/types/package/common/kanbanBoard/kanbanBoard.types.d.ts

@@ -25,7 +25,7 @@ export interface KanbanColumnDef {
     hasMore?: boolean;
 }
 export type KanbanBoardSlots = 'dragOverlay';
-export interface KanbanBoardProps<T = unknown> extends HtmlProps {
+export interface KanbanBoardProps<T = unknown> extends Omit<HtmlProps, 'onChange'> {
     /** Ordered list of column definitions. Each column owns its itemIds. */
     columns: KanbanColumnDef[];
     /** Flat map of all items keyed by their id. */

package/dist/types/package/common/numberInput/index.d.ts

@@ -1,2 +1,3 @@
 import { default as NumberInput } from './numberInput';
+export type { NumberInputProps, NumberInputArrowsLayout } from './numberInput.types';
 export default NumberInput;

package/dist/types/package/common/numberInput/numberInput.d.ts

@@ -1,34 +1,5 @@
-import { ReactElement, default as React } from 'react';
-import { NumericFormatProps } from 'react-number-format';
-import { FormValidator } from '../../services/formValidation';
-export interface NumberInputProps extends Omit<NumericFormatProps, 'onValueChange' | 'value' | 'customInput' | 'onChange' | 'step' | 'onKeyDown'> {
-    value?: number | string;
-    onChange?: (value: number | undefined) => void;
-    formValidator?: FormValidator | null;
-    label?: string;
-    error?: string;
-    className?: string;
-    allowNegative?: boolean;
-    decimalSeparator?: string;
-    thousandSeparator?: string | boolean;
-    prefix?: string;
-    suffix?: string;
-    decimalScale?: number;
-    /**
-     * Whether to pad the value to exactly `decimalScale` decimals. Default `true`
-     * (e.g. with `decimalScale={2}`, `12` displays as `12.00`). Set `false` to make
-     * `decimalScale` an upper limit only — the user may type fewer decimals and they
-     * are kept as-is (`12` stays `12`, `12.1` stays `12.1`), while anything beyond
-     * `decimalScale` is still truncated.
-     */
-    fixedDecimalScale?: boolean;
-    placeholder?: string;
-    sign?: '+' | '-';
-    showArrows?: boolean;
-    step?: number;
-    readOnly?: boolean;
-    isRequired?: boolean;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-}
+import { ReactElement } from 'react';
+import { NumberInputProps } from './numberInput.types';
+export type { NumberInputProps, NumberInputArrowsLayout } from './numberInput.types';
 declare function NumberInput(props: NumberInputProps): ReactElement;
 export default NumberInput;

package/dist/types/package/common/numberInput/numberInput.types.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { NumericFormatProps } from 'react-number-format';
+import { FormValidator } from '../../services/formValidation';
+/**
+ * How the stepper buttons are laid out.
+ *
+ * - `stacked` — chevrons stacked inside the field's right edge. Compact; suits a mouse.
+ * - `split` — square `−` / `+` buttons flanking the field, each as tall and wide as the field.
+ *   Far apart with the field between them, so a mis-tap can't step the value the wrong way.
+ * - `auto` — `split` on a coarse (touch) pointer, `stacked` otherwise.
+ */
+export type NumberInputArrowsLayout = 'auto' | 'stacked' | 'split';
+export interface NumberInputProps extends Omit<NumericFormatProps, 'onValueChange' | 'value' | 'customInput' | 'onChange' | 'step' | 'onKeyDown' | 'min' | 'max'> {
+    value?: number | string;
+    onChange?: (value: number | undefined) => void;
+    formValidator?: FormValidator | null;
+    label?: string;
+    error?: string;
+    className?: string;
+    allowNegative?: boolean;
+    decimalSeparator?: string;
+    thousandSeparator?: string | boolean;
+    prefix?: string;
+    suffix?: string;
+    decimalScale?: number;
+    /**
+     * Whether to pad the value to exactly `decimalScale` decimals. Default `true`
+     * (e.g. with `decimalScale={2}`, `12` displays as `12.00`). Set `false` to make
+     * `decimalScale` an upper limit only — the user may type fewer decimals and they
+     * are kept as-is (`12` stays `12`, `12.1` stays `12.1`), while anything beyond
+     * `decimalScale` is still truncated.
+     */
+    fixedDecimalScale?: boolean;
+    placeholder?: string;
+    sign?: '+' | '-';
+    showArrows?: boolean;
+    step?: number;
+    /**
+     * Lower bound. Constrains the steppers and the ArrowDown key, disables the decrease button
+     * once reached, and clamps a typed value on blur and on Enter — the two moments it stops
+     * being mid-edit. Typing is never blocked; see {@link NumberInputProps.max}.
+     */
+    min?: number;
+    /**
+     * Upper bound. Behaves exactly like {@link NumberInputProps.min} in the other direction.
+     *
+     * Neither bound rejects a keystroke as it is typed — an edit passes through out-of-range
+     * states on its way somewhere valid — and an empty field is never clamped. Use a
+     * `formValidator` if out-of-range input must be *rejected* rather than corrected.
+     */
+    max?: number;
+    /** Stepper layout. Default `'auto'`. */
+    arrowsLayout?: NumberInputArrowsLayout;
+    /** Accessible name for the increase button. Default `'Increase'`. */
+    increaseLabel?: string;
+    /** Accessible name for the decrease button. Default `'Decrease'`. */
+    decreaseLabel?: string;
+    readOnly?: boolean;
+    isRequired?: boolean;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}

package/dist/types/package/common/numberInput/useStepRepeat.d.ts

@@ -0,0 +1,17 @@
+export interface UseStepRepeatResult {
+    /** Fires one step immediately, then starts the hold-to-repeat timer. */
+    start: (direction: 1 | -1, multiplier: number) => void;
+    /** Cancels a running repeat. Safe to call when nothing is running. */
+    stop: () => void;
+}
+/**
+ * Hold-to-repeat for the stepper buttons: one step on press, then an accelerating repeat.
+ *
+ * The release is watched on `window` rather than by capturing the pointer, which would retarget
+ * the following click past the node Button's ripple listens on. Capture would have guaranteed a
+ * `pointerup`, so the extra listeners cover the ways a press can end without one.
+ *
+ * `onStep` returns whether anything changed; `false` ends the repeat, so a hold at a bound stops.
+ */
+export declare function useStepRepeat(onStep: (delta: number) => boolean): UseStepRepeatResult;
+export default useStepRepeat;

package/dist/types/package/common/optionPicker/optionPicker.types.d.ts

@@ -5,7 +5,7 @@ export interface Option {
     key: string;
 }
 export type OptionPickerSlots = 'root' | 'chip' | 'option';
-export interface OptionPickerProps extends HtmlProps {
+export interface OptionPickerProps extends Omit<HtmlProps, 'onChange'> {
     className?: string;
     style?: React.CSSProperties;
     classNames?: SlotClassNames<OptionPickerSlots>;

package/dist/types/package/common/otpInput/otpInput.types.d.ts

@@ -8,7 +8,7 @@ export declare enum OtpInputCharset {
     /** Letters and digits. */
     Alphanumeric = "alphanumeric"
 }
-export interface OtpInputProps extends HtmlProps {
+export interface OtpInputProps extends Omit<HtmlProps, 'onChange'> {
     /** Number of character boxes. Default 6. */
     length?: number;
     /** Current code as a plain string, e.g. "123456". */

package/dist/types/package/common/popover/popover.types.d.ts

@@ -20,7 +20,7 @@ export declare enum PopoverTrigger {
     Focus = "focus"
 }
 export type PopoverSlots = 'root' | 'trigger' | 'floating' | 'panel' | 'arrow';
-export interface PopoverProps extends HtmlProps {
+export interface PopoverProps extends Omit<HtmlProps, 'content'> {
     /** The trigger element. */
     children?: ReactNode;
     /** The popover body. */

package/dist/types/package/common/radioGroup/radioGroup.types.d.ts

@@ -16,7 +16,7 @@ export interface RadioOption {
     disabled?: boolean;
 }
 export type RadioGroupSlots = 'root' | 'option' | 'radio' | 'dot' | 'label' | 'description';
-export interface RadioGroupProps extends HtmlProps {
+export interface RadioGroupProps extends Omit<HtmlProps, 'onChange'> {
     /** The selectable options. */
     options: RadioOption[];
     /** Controlled selected value. Omit for uncontrolled. */

package/dist/types/package/common/rating/rating.types.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import { IconContent } from '../types/icon.types';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type RatingSlots = 'root' | 'item' | 'iconEmpty' | 'iconFilled';
-export interface RatingProps extends HtmlProps {
+export interface RatingProps extends Omit<HtmlProps, 'onChange'> {
     value?: number;
     defaultValue?: number;
     onChange?: (value: number) => void;

package/dist/types/package/common/searchInput/searchInput.types.d.ts

@@ -1,5 +1,5 @@
 import { HtmlProps } from '../types/slots.types';
-export interface SearchInputProps extends HtmlProps {
+export interface SearchInputProps extends Omit<HtmlProps, 'onChange'> {
     value: string;
     onChange: (value: string) => void;
     onDebounce?: (value: string) => void;

package/dist/types/package/common/sectionHeader/sectionHeader.types.d.ts

@@ -9,7 +9,7 @@ export declare enum SectionHeaderSize {
 }
 export type SectionHeaderAction = IconAction;
 export type SectionHeaderSlots = 'root' | 'identity' | 'leading' | 'titles' | 'title' | 'subtitle' | 'trailing' | 'left' | 'center' | 'actions';
-export interface SectionHeaderProps extends HtmlProps {
+export interface SectionHeaderProps extends Omit<HtmlProps, 'title'> {
     title?: ReactNode;
     subtitle?: ReactNode;
     icon?: IconContent;

package/dist/types/package/common/slider/slider.types.d.ts

@@ -7,7 +7,7 @@ export interface SliderMark {
     label?: ReactNode;
 }
 export type SliderSlots = 'root' | 'track' | 'range' | 'thumb' | 'mark' | 'markLabel' | 'value';
-export interface SliderProps extends HtmlProps {
+export interface SliderProps extends Omit<HtmlProps, 'onChange'> {
     /** Controlled value. Omit for uncontrolled. */
     value?: number;
     /** Initial value when uncontrolled (default `min`). */

package/dist/types/package/common/switch/switch.types.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties, ReactNode } from 'react';
 import { FormValidator } from '../../services/formValidation';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type SwitchSlots = 'track' | 'thumb' | 'label';
-export interface SwitchProps extends HtmlProps {
+export interface SwitchProps extends Omit<HtmlProps, 'onToggle'> {
     label?: string;
     selected?: boolean;
     onToggle?: (isToggled: boolean, event?: React.MouseEvent | React.KeyboardEvent) => void;

package/dist/types/package/common/tabHeader/tabHeader.types.d.ts

@@ -9,7 +9,7 @@ export interface TabHeaderTab {
     subtitle?: string;
     disabled?: boolean;
 }
-export interface TabHeaderProps extends HtmlProps {
+export interface TabHeaderProps extends Omit<HtmlProps, 'onChange'> {
     tabs: TabHeaderTab[];
     currentTab: string;
     onChange: (id: string) => void;

package/dist/types/package/common/timeInput/timeInput.types.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { FormValidator } from '../../services/formValidation';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type TimeInputSlots = 'root' | 'clock' | 'clockHeader' | 'headerSegment' | 'meridiem' | 'clockFace' | 'clockHand' | 'clockNumber' | 'footer';
-export interface TimeInputProps extends HtmlProps {
+export interface TimeInputProps extends Omit<HtmlProps, 'onChange' | 'onSelect'> {
     /** Current time as a "HH:MM" (24-hour) string. */
     value?: string | null;
     /** Alias for `value`, to mirror DatePicker. */

package/dist/types/package/common/types/baseProps.types.d.ts

@@ -1,8 +1,23 @@
 import { default as React } from 'react';
-/** HTML pass-through props accepted on the root element of every component. */
-export type HtmlProps = React.AriaAttributes & {
-    id?: string;
-    role?: React.AriaRole;
-} & {
+/**
+ * TypeScript allows hyphenated attributes on *intrinsic* elements only, so a component's props
+ * interface has to declare these itself — no React attribute type provides them.
+ */
+type DataAttributes = {
     [K in `data-${string}`]?: string;
 };
+/**
+ * HTML pass-through props accepted on the root element of every component: the full native
+ * attribute set for that element, plus `data-*`.
+ *
+ * Pass the root's element type for correctly-typed event handlers (`HtmlProps<HTMLDivElement>`);
+ * the default is the loose `HTMLElement`. Where the root is not a plain container, extend the
+ * matching React type instead and add `DataProps` for the `data-*` half — `Button` does this
+ * with `React.ButtonHTMLAttributes<HTMLButtonElement>`.
+ *
+ * A component prop that collides with a native one of the same name must `Omit` the native one.
+ */
+export type HtmlProps<E extends HTMLElement = HTMLElement> = React.HTMLAttributes<E> & DataAttributes;
+/** The `data-*` half of {@link HtmlProps}, for components that source attributes elsewhere. */
+export type DataProps = DataAttributes;
+export {};

package/dist/types/package/common/types/slots.types.d.ts

@@ -1,4 +1,4 @@
 import { CSSProperties } from 'react';
 export type SlotClassNames<Keys extends string> = Partial<Record<Keys, string>>;
 export type SlotStyles<Keys extends string> = Partial<Record<Keys, CSSProperties>>;
-export type { HtmlProps } from './baseProps.types';
+export type { HtmlProps, DataProps } from './baseProps.types';

package/docs/Button.md

@@ -29,6 +29,18 @@ import { faSave } from '@fortawesome/free-solid-svg-icons';
 // Small
 <Button size={ButtonSize.Small}>Cancel</Button>
 
+// Icon-only — padding-free and square; give it the box size you want
+<Button size={ButtonSize.Icon} icon={faPlus} aria-label="Add" style={{ width: 44, height: 44 }} />
+
+// Press-and-hold: act on press rather than release
+<Button
+  icon={faPlus}
+  aria-label="Increase"
+  onPointerDown={startRepeat}
+  onPointerUp={stopRepeat}
+  onPointerCancel={stopRepeat}
+/>
+
 // Submit button in a form
 <Button type={ButtonType.Submit} styleType={ButtonStyleType.Primary}>Submit</Button>
 ```
@@ -36,7 +48,7 @@ import { faSave } from '@fortawesome/free-solid-svg-icons';
 **Enums:**
 
 - `ButtonStyleType`: `Primary` | `Default` | `Delete`
-- `ButtonSize`: `Default` | `Small` | `Medium` | `Large`
+- `ButtonSize`: `Default` | `Small` | `Medium` | `Large` | `Icon`
 - `ButtonType`: `Button` | `Reset` | `Submit`
 
 **Key props:**
@@ -44,13 +56,19 @@ import { faSave } from '@fortawesome/free-solid-svg-icons';
 | Prop | Type | Description |
 |------|------|-------------|
 | `styleType` | `ButtonStyleType` | Visual variant |
-| `size` | `ButtonSize` | Size variant |
+| `size` | `ButtonSize` | Size variant. `Icon` strips all padding, inherits the surrounding text size, and centres a lone icon — set the width/height yourself |
 | `type` | `ButtonType` | HTML button type |
 | `icon` | `IconDefinition \| ReactElement` | FontAwesome icon or any React element, shown before label |
 | `isLoading` | `boolean` | Replaces content with a spinner |
 | `disabled` | `boolean` | |
 | `onClick` | `(e: MouseEvent) => void \| Promise<void>` | |
 
+`ButtonProps` extends `React.ButtonHTMLAttributes<HTMLButtonElement>`, so every native `<button>`
+attribute is accepted and forwarded — pointer handlers (`onPointerDown` and friends, for
+press-and-hold controls that act on press rather than release), `onContextMenu`, `tabIndex`,
+`name`, `value`, `form`, `autoFocus`, and the rest. `type` and `onClick` are narrowed: `type`
+takes the `ButtonType` enum, and `onClick` may return a promise.
+
 **Theming (default style):** the `Default` style is transparent text-coloured by default. Override it theme-wide (or per button via `style`) without touching `Primary`/`Delete`:
 
 - `--button-default-background` — fill (default transparent)
@@ -73,3 +91,6 @@ const theme: Theme = {
 ```
 
 **Slots:** `background` `content` `loadingContainer` `label`
+
+**Sizing in a flex row:** a Button never shrinks below its own content (`min-width: min-content`),
+so an icon is never cut off by a flexible sibling. A multi-word label still wraps above that floor.

package/docs/Chip.md

@@ -56,6 +56,7 @@ import { Chip, ChipContainer, ChipStyleType } from '@ahrowe/ui';
 | `text` | `string` | Chip label |
 | `styleType` | `ChipStyleType` | Colour variant (default `Default`) |
 | `thumbnail` | `string` | Avatar image URL |
+| `removeLabel` | `string` | Accessible name for the remove button. Default: `'Remove'` |
 | `showRemoveIcon` | `boolean` | Show × icon |
 | `onRemove` | `() => void` | Remove button handler |
 | `onClick` | `() => void` | Makes chip clickable |

package/docs/NumberInput.md

@@ -2,7 +2,7 @@
 
 **When to use:** Numeric input with formatting — prices, quantities, percentages, phone numbers with separators. Wraps `react-number-format` with the same floating-label style as `Input`.
 
-**Keywords:** currency input, quantity field, numeric field
+**Keywords:** currency input, quantity field, numeric field, spinner, stepper, up down arrows, increment, decrement, plus minus, range, bounds, disabled
 
 **Import:** `import { NumberInput } from '@ahrowe/ui'`
 
@@ -32,7 +32,18 @@ const priceValidator = new FormValidator<number | undefined>(undefined, [Validat
 <NumberInput label="Price" formValidator={priceValidator} prefix="€" decimalScale={2} />
 
 // Percentage
-<NumberInput label="Discount" suffix="%" decimalScale={1} max={100} />
+<NumberInput label="Discount" suffix="%" decimalScale={1} />
+
+// Stepper buttons — hold to repeat, shift for ±10, clamped to min/max
+<NumberInput
+  label="Guests"
+  value={guests}
+  onChange={setGuests}
+  decimalScale={0}
+  showArrows
+  min={0}
+  max={10}
+/>
 
 // Max decimals without padding — cap at 2 decimals, but keep what the user typed
 // (12 stays "12", 12.1 stays "12.1"; 12.111 is truncated to "12.11")
@@ -58,5 +69,58 @@ const priceValidator = new FormValidator<number | undefined>(undefined, [Validat
 | `isRequired` | `boolean` | Shows the required mark (`*`) next to the label. Also inferred automatically when `formValidator` has a `required` validator. Default: `false` |
 | `placeholder` | `string` | |
 | `error` | `string` | Manual error message |
+| `showArrows` | `boolean` | Show stepper buttons. Default: `false` |
+| `step` | `number` | Amount one step changes the value by. Default: `1` (hold shift for ×10) |
+| `min` | `number` | Lower bound — see the note below |
+| `max` | `number` | Upper bound — see the note below |
+| `arrowsLayout` | `'auto' \| 'stacked' \| 'split'` | Stepper layout. Default: `'auto'` |
+| `increaseLabel` | `string` | Accessible name for the increase button. Default: `'Increase'` |
+| `decreaseLabel` | `string` | Accessible name for the decrease button. Default: `'Decrease'` |
+
+**Steppers (`showArrows`):** two layouts, picked by `arrowsLayout`:
+
+- `'stacked'` — chevrons inside the field's right edge, each roughly 27x17 at the default text
+  size. Compact and mouse-oriented: two targets stacked inside a 34px field cannot reach the 24px
+  minimum that WCAG 2.5.8 asks for, which is why `'auto'` prefers `'split'` on touch.
+- `'split'` — full-height `−` / `+` buttons flanking the field, each a 44px touch target. The two
+  are far apart, so a mis-tap can't step the value the wrong way.
+- `'auto'` (default) — `split` on a coarse (touch) pointer, `stacked` otherwise, detected with
+  `matchMedia('(pointer: coarse)')` and re-evaluated when the pointer type changes.
+
+The split buttons are the shared `Button` component, so press feedback is the same ripple as everywhere else in the library.
+
+Press and hold a button to repeat: one step immediately, then a repeat after 400ms that accelerates
+after about a second. Hold shift for ×10. The field itself carries `role="spinbutton"` with
+`aria-valuenow` / `aria-valuemin` / `aria-valuemax`, so ↑/↓ stepping is announced; the buttons stay
+out of the tab order rather than adding two tab stops per field.
+
+**`min` / `max` clamp, they do not block typing.** Both bounds constrain the steppers and the
+↑/↓ keys, disable the corresponding button once reached, and pull a typed value back into range
+when it stops being mid-edit: on blur, and on Enter (which submits a surrounding form without ever
+blurring the field). An empty field is never clamped, so blurring an untouched field does not fill
+in `min`.
+
+Nothing is rejected as it is typed, deliberately. Editing inserts digits into an existing value, so
+the intermediate state routinely leaves the range even when the destination is inside it — with
+`max={10}`, putting the caret in front of `8` and typing `1` on the way to `18` would simply do
+nothing, with no feedback. Blocking input suits *format* rules (digits only, a fixed length), where
+every rejected keystroke is unambiguously wrong; a value range is not one of those.
+
+The Enter clamp is exact for a `formValidator`-driven field, because `formValidator.set` is
+imperative and lands before the submit handler runs. For a plain `value`/`onChange` field it is
+best-effort: the consumer's own state update may not have flushed by the time their `onSubmit`
+reads it. If an out-of-range value must be *impossible* to submit rather than merely corrected, add
+a validator — `@ahrowe/form-validation` has no numeric range validator (`minLength`/`maxLength` are
+string length), so write one:
+
+```tsx
+const inRange = (min: number, max: number): ValidatorFunction => (value) =>
+  typeof value === 'number' && (value < min || value > max)
+    ? { id: 'range', message: `Must be between ${min} and ${max}` }
+    : null;
+
+const qty = new FormValidator<number | undefined>(undefined, [inRange(10, 100)]);
+<NumberInput label="Quantity" formValidator={qty} min={10} max={100} showArrows decimalScale={0} />
+```
 
 **Mobile keyboard layout:** shows the numeric on-screen keyboard automatically (`inputMode="numeric"` when `decimalScale={0}`, `"decimal"` otherwise, so a decimal separator key is available whenever fractional values are allowed). Pass `inputMode` directly to override.