krts.ui 0.0.0-stage → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,715 @@
+import { ClassValue } from 'clsx';
+import * as react from 'react';
+import { ReactNode, DOMAttributes, PointerEvent, CSSProperties, HTMLAttributes, SVGProps } from 'react';
+import { PressEvent, PressEvents } from 'react-aria';
+import { ButtonProps as ButtonProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps, MenuProps as MenuProps$1, PopoverProps as PopoverProps$1, MenuItemProps as MenuItemProps$1, MenuSectionProps as MenuSectionProps$1, MenuTriggerProps, SubmenuTriggerProps, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, TextProps, FieldErrorProps, InputProps, LabelProps, NumberFieldProps as NumberFieldProps$1, ValidationResult, SearchFieldProps as SearchFieldProps$1, TextFieldProps as TextFieldProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, SliderProps as SliderProps$1, SelectProps as SelectProps$1, ListBoxItemProps, DialogProps as DialogProps$1, DialogTriggerProps, ModalOverlayProps, TabProps as TabProps$1, TabListProps, TabPanelProps, TabsProps as TabsProps$1, MeterProps as MeterProps$1, ProgressBarProps as ProgressBarProps$1, DisclosureGroupProps, DisclosureProps as DisclosureProps$1, LinkProps, SeparatorProps } from 'react-aria-components';
+
+/** Merge class names, letting later Tailwind utilities win over earlier ones. */
+declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Merge a component's base classes with a React Aria `className` prop,
+ * which may be a string or a render-prop function of the component state.
+ */
+declare function composeTw<T>(className: string | ((v: T) => string) | undefined, tw: string | ((v: T) => string)): string | ((v: T) => string);
+/** Focus ring shared by every interactive control. */
+declare const focusRing = "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";
+
+/**
+ * Names of the DOM CustomEvents krts.ui dispatches. They bubble, so
+ * non-React code can listen with `el.addEventListener('krts:doubletap', …)`.
+ */
+declare const KRTS_EVENTS: {
+    readonly singleTap: "krts:singletap";
+    readonly doubleTap: "krts:doubletap";
+    readonly multiTap: "krts:multitap";
+    readonly holdStart: "krts:holdstart";
+    readonly hold: "krts:hold";
+    readonly holdTick: "krts:holdtick";
+    readonly holdEnd: "krts:holdend";
+    readonly holdCancel: "krts:holdcancel";
+    readonly swipe: "krts:swipe";
+    readonly confirm: "krts:confirm";
+};
+type KrtsEventName = (typeof KRTS_EVENTS)[keyof typeof KRTS_EVENTS];
+declare function dispatchKrtsEvent<D>(target: EventTarget | null | undefined, name: KrtsEventName, detail: D): void;
+
+/** How floating menus (Menu, Select, DropdownButton, Popover) appear. */
+type OverlayAnimation = 'fade' | 'scale' | 'none';
+interface KrtsConfig {
+    /**
+     * Default animation for menus, selects and popovers.
+     * `'fade'` (default) is a quick opacity fade — calm enough for dashboards
+     * where menus open dozens of times a day. `'scale'` grows the menu out of
+     * its trigger. `'none'` shows it instantly.
+     */
+    menuAnimation: OverlayAnimation;
+}
+/** Optional. Sets app-wide defaults; any component prop still wins. */
+declare function KrtsProvider({ children, ...config }: Partial<KrtsConfig> & {
+    children: ReactNode;
+}): react.JSX.Element;
+declare function useKrtsConfig(): KrtsConfig;
+
+type GesturePointerType = PressEvent['pointerType'];
+interface TapGestureEvent {
+    type: 'singletap' | 'doubletap' | 'multitap';
+    /** Number of taps in the sequence (1 = single, 2 = double, …). */
+    count: number;
+    pointerType: GesturePointerType;
+    target: Element;
+}
+interface HoldGestureEvent {
+    type: 'holdstart' | 'hold' | 'holdtick' | 'holdend' | 'holdcancel';
+    /** Milliseconds since the press started. */
+    duration: number;
+    /** Whole seconds held (handy for `hold(sec)`-style logic). */
+    seconds: number;
+    /** 0 → 1 progress toward `holdDuration`. */
+    progress: number;
+    pointerType: GesturePointerType;
+    target: Element;
+}
+type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+interface SwipeGestureEvent {
+    type: 'swipe';
+    direction: SwipeDirection;
+    /** Distance travelled along the dominant axis, in px. */
+    distance: number;
+    /** px / ms along the dominant axis. */
+    velocity: number;
+    target: Element;
+}
+interface GestureOptions {
+    /** Fires once a tap is confirmed *not* to be part of a double/multi tap. */
+    onSingleTap?: (e: TapGestureEvent) => void;
+    /** Fires when two taps land within `multiTapDelay`. */
+    onDoubleTap?: (e: TapGestureEvent) => void;
+    /** Fires at the end of every tap sequence with the final `count`. */
+    onMultiTap?: (e: TapGestureEvent) => void;
+    /** Highest tap count to wait for when `onMultiTap` is used. Default 3. */
+    maxTaps?: number;
+    /** Max gap between taps in a sequence, ms. Default 250. */
+    multiTapDelay?: number;
+    /** Press began; a hold is now possible. */
+    onHoldStart?: (e: HoldGestureEvent) => void;
+    /** Held for `holdDuration` ms. A hold never also counts as a tap. */
+    onHold?: (e: HoldGestureEvent) => void;
+    /** Fires every `holdTickInterval` ms while held — e.g. at 1s, 2s, 3s. */
+    onHoldTick?: (e: HoldGestureEvent) => void;
+    /** Called every animation frame with 0 → 1 progress while held. */
+    onHoldProgress?: (progress: number) => void;
+    /** Released after `onHold` fired. */
+    onHoldEnd?: (e: HoldGestureEvent) => void;
+    /** Released (or interrupted) before `holdDuration`. */
+    onHoldCancel?: (e: HoldGestureEvent) => void;
+    /** ms before `onHold` fires. Default 500. */
+    holdDuration?: number;
+    /** ms between `onHoldTick` calls. Default 1000. */
+    holdTickInterval?: number;
+    /** Quick flick or long drag on touch/pen/mouse. */
+    onSwipe?: (e: SwipeGestureEvent) => void;
+    /** Minimum travel for a swipe, px. Default 40. */
+    swipeThreshold?: number;
+    /** A flick faster than this (px/ms) counts even under the threshold. Default 0.11. */
+    swipeVelocity?: number;
+    /** Movement (px) after which a press stops counting as a tap or hold. Default 10. */
+    moveTolerance?: number;
+    /** Also dispatch bubbling `krts:*` DOM CustomEvents. Default true. */
+    dispatchDomEvents?: boolean;
+    isDisabled?: boolean;
+}
+interface GestureState {
+    isPressed: boolean;
+    isHolding: boolean;
+    /** True once `onHold` has fired during the current press. */
+    didHold: boolean;
+}
+/**
+ * Low-level gesture engine. Returns React Aria press handlers (so it
+ * composes with any RAC component that takes `onPressStart`/`onPress`…)
+ * and pointer handlers for movement-based gestures (swipe, tap cancel).
+ */
+declare function useGestureHandlers(options: GestureOptions): {
+    pressHandlers: Required<Pick<PressEvents, "onPress" | "onPressStart" | "onPressEnd">>;
+    pointerProps: {
+        onPointerDown: (e: PointerEvent<Element>) => void;
+        onPointerMove: (e: PointerEvent<Element>) => void;
+        onPointerUp: (e: PointerEvent<Element>) => void;
+        onPointerCancel: (e: PointerEvent<Element>) => void;
+        onContextMenu: (e: React.MouseEvent) => void;
+        'data-krts-gesture': string;
+    };
+    state: GestureState;
+};
+interface UseGestureResult {
+    /** Spread onto any element (div, img, canvas…) to give it gesture events. */
+    gestureProps: DOMAttributes<Element> & Record<string, unknown>;
+    isPressed: boolean;
+    isHolding: boolean;
+    didHold: boolean;
+}
+/**
+ * Give any element `singleTap`, `doubleTap`, `multiTap`, `hold`,
+ * `holdTick` and `swipe` events — with keyboard (Enter/Space) and
+ * screen-reader support via React Aria's `usePress`.
+ *
+ * ```tsx
+ * const { gestureProps } = useGesture({
+ *   onSingleTap: () => select(),
+ *   onDoubleTap: () => like(),
+ *   onHold: () => openMenu(),
+ *   holdDuration: 600,
+ * });
+ * return <div {...gestureProps} tabIndex={0}>…</div>;
+ * ```
+ */
+declare function useGesture(options: GestureOptions): UseGestureResult;
+
+/**
+ * Honest-but-kind loading state.
+ *
+ * - Don't flash a spinner for work that finishes almost instantly
+ *   (`delay`, default 150ms).
+ * - Once a spinner *is* shown, keep it up long enough to read
+ *   (`minDuration`, default 500ms) so it never flickers.
+ */
+declare function useSmoothPending(isPending: boolean, { delay, minDuration }?: {
+    delay?: number | undefined;
+    minDuration?: number | undefined;
+}): boolean;
+/**
+ * Progress for work whose real progress is unknown. Moves fast at first,
+ * then eases toward `ceiling` (never claiming to be done), and jumps to
+ * 100 the moment `isDone` flips. Returns a 0–100 number.
+ */
+declare function usePerceivedProgress(isRunning: boolean, isDone: boolean, { expectedDuration, ceiling }?: {
+    expectedDuration?: number | undefined;
+    ceiling?: number | undefined;
+}): number;
+/** True when the user asked the OS for reduced motion. */
+declare function usePrefersReducedMotion(): boolean;
+
+interface AnimatedWidthOptions {
+    enabled?: boolean;
+    /** ms. Default 250. */
+    duration?: number;
+}
+/**
+ * Smoothly resizes a box when its content changes ("Save" → "Saved ✓").
+ *
+ * Attach `contentRef` to an element that hugs the content (it must not
+ * shrink — give it `shrink-0`). The host gets an explicit, transitioned
+ * `width` = content width + the host's padding and border.
+ *
+ * The first measurement (and the swap to web fonts) is applied without
+ * animation, so nothing slides around on page load.
+ */
+declare function useAnimatedWidth({ enabled, duration }?: AnimatedWidthOptions): {
+    contentRef: react.RefObject<HTMLElement | null>;
+    /** Spread into the host's `style`. */
+    widthStyle: CSSProperties | undefined;
+    /** Append to the host's `transition` list. */
+    widthTransition: string;
+};
+
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+type ButtonSize = 'xs' | 'sm' | 'md';
+declare function buttonStyles({ variant, size, isIconOnly, className, }?: {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isIconOnly?: boolean;
+    className?: string;
+}): string;
+type GestureProps = Pick<GestureOptions, 'onSingleTap' | 'onDoubleTap' | 'onMultiTap' | 'maxTaps' | 'multiTapDelay' | 'onHoldStart' | 'onHold' | 'onHoldTick' | 'onHoldProgress' | 'onHoldEnd' | 'onHoldCancel' | 'holdDuration' | 'holdTickInterval' | 'onSwipe'>;
+interface ButtonProps extends Omit<ButtonProps$1, 'children'>, GestureProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Square button for a lone icon. Remember an `aria-label`. */
+    isIconOnly?: boolean;
+    children?: ButtonProps$1['children'];
+    /** Shown before the label. */
+    startContent?: ReactNode;
+    /** Shown after the label. */
+    endContent?: ReactNode;
+    /**
+     * When the label changes ("Save" → "Saved"), glide to the new width with
+     * an ease-out curve instead of jumping. Default true (off for icon-only).
+     * Turn off if you size the button yourself (e.g. `w-full`).
+     */
+    animateWidth?: boolean;
+}
+/**
+ * The krts.ui button. Accepts every React Aria `Button` prop plus gesture
+ * events: `onSingleTap`, `onDoubleTap`, `onMultiTap`, `onHold`,
+ * `onHoldTick`, `onSwipe`…
+ *
+ * `isPending` shows a spinner only if the work takes longer than 150ms,
+ * and then keeps it for at least 500ms — no flicker.
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type HoldButtonVariant = 'danger' | 'primary' | 'secondary';
+interface HoldButtonProps extends Omit<ButtonProps$1, 'children' | 'onPress' | 'onPressStart' | 'onPressEnd' | 'className' | 'style'> {
+    children: ReactNode;
+    /** Fires once the button has been held for `holdDuration`. */
+    onConfirm: (e: HoldGestureEvent | {
+        type: 'virtual';
+    }) => void;
+    /** How long to hold, ms. Default 2000. */
+    holdDuration?: number;
+    /** 0 → 1 while held (every frame). */
+    onHoldProgress?: (progress: number) => void;
+    /** Released before confirming. */
+    onHoldCancel?: (e: HoldGestureEvent) => void;
+    /** Shown briefly if someone taps instead of holding. */
+    hint?: ReactNode;
+    /** Shown after confirming. Pass `null` to keep the label. */
+    confirmedContent?: ReactNode;
+    /** How long the confirmed state is shown before resetting, ms. Default 1600. */
+    resetAfter?: number;
+    variant?: HoldButtonVariant;
+    size?: 'sm' | 'md';
+    /** Glide to the new width when the label swaps (hint / done). Default true. */
+    animateWidth?: boolean;
+    className?: string;
+}
+/**
+ * Hold-to-confirm button — a calmer alternative to an "Are you sure?"
+ * dialog for destructive actions.
+ *
+ * Holding fills the button left→right (linear, deliberate). Letting go
+ * snaps back fast (ease-out). Works with a mouse, touch, and by holding
+ * Space/Enter. Screen-reader activation confirms immediately, since a
+ * virtual click can't be held.
+ */
+declare const HoldButton: react.ForwardRefExoticComponent<HoldButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface CopyButtonProps extends Omit<ButtonProps, 'onPress' | 'children' | 'value'> {
+    /** Text to copy (or a function returning it). */
+    value: string | (() => string);
+    label?: string;
+    copiedLabel?: string;
+    onCopy?: (value: string) => void;
+}
+/**
+ * Copies to the clipboard and morphs its icon. The swap is a crossfade
+ * with a touch of blur so it reads as one object changing, not two
+ * objects swapping. Says "copied" immediately — the clipboard write is
+ * effectively instant and rarely fails.
+ */
+declare function CopyButton({ value, label, copiedLabel, onCopy, isIconOnly, size, variant, ...props }: CopyButtonProps): react.JSX.Element;
+
+interface GestureAreaProps extends GestureOptions, Omit<HTMLAttributes<HTMLDivElement>, keyof GestureOptions | 'onContextMenu'> {
+    /** Name for assistive tech. Gesture areas are focusable and act like buttons. */
+    'aria-label'?: string;
+}
+/**
+ * A focusable box that understands `onSingleTap`, `onDoubleTap`,
+ * `onMultiTap`, `onHold`, `onHoldTick` and `onSwipe`. Exposes
+ * `data-pressed` / `data-holding` for styling.
+ *
+ * Keyboard: Enter/Space taps; holding Enter/Space holds.
+ */
+declare const GestureArea: react.ForwardRefExoticComponent<GestureAreaProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SpinnerProps {
+    size?: number;
+    className?: string;
+    /** Accessible label. Omit when the spinner is decorative (e.g. inside a pending button). */
+    label?: string;
+}
+/**
+ * A fast spinner (600ms/turn). A faster spinner makes the same wait
+ * *feel* shorter.
+ */
+declare function Spinner({ size, className, label }: SpinnerProps): react.JSX.Element;
+
+interface ToggleButtonProps extends Omit<ToggleButtonProps$1, 'children'> {
+    children?: ReactNode;
+    size?: ButtonSize;
+    isIconOnly?: boolean;
+}
+/** A button that stays pressed. Selected state uses the primary fill. */
+declare function ToggleButton({ size, isIconOnly, className, ...props }: ToggleButtonProps): react.JSX.Element;
+interface SegmentedControlProps extends Omit<ToggleButtonGroupProps, 'children'> {
+    children: ReactNode;
+    size?: 'sm' | 'md';
+}
+/**
+ * iOS-style segmented control. Single selection by default; the thumb
+ * slides between segments.
+ */
+declare function SegmentedControl({ size, className, selectionMode, disallowEmptySelection, ...props }: SegmentedControlProps): react.JSX.Element;
+declare function Segment({ children, className, ...props }: Omit<ToggleButtonProps$1, 'children'> & {
+    children?: ReactNode;
+}): react.JSX.Element;
+
+interface DropdownButtonProps<T> extends Omit<MenuProps$1<T>, 'children' | 'className'> {
+    /** Button label. */
+    label: ReactNode;
+    /** Menu items (`<MenuItem>`s or a render function). */
+    children: MenuProps$1<T>['children'];
+    variant?: ButtonProps['variant'];
+    size?: ButtonProps['size'];
+    isDisabled?: boolean;
+    placement?: PopoverProps$1['placement'];
+    /** Menu animation: `'fade'` (default), `'scale'` or `'none'`. */
+    animation?: OverlayAnimation;
+    className?: string;
+}
+/**
+ * The Figma "Dropdown Button": label │ divider │ chevron, opening a menu.
+ * The chevron flips while the menu is open.
+ */
+declare function DropdownButton<T extends object>({ label, children, variant, size, isDisabled, placement, className, ...menuProps }: DropdownButtonProps<T>): react.JSX.Element;
+interface SplitButtonProps<T> extends DropdownButtonProps<T> {
+    /** Main action when the label half is pressed. */
+    onAction?: () => void;
+    onMenuAction?: MenuProps$1<T>['onAction'];
+    /** Accessible label for the chevron half. */
+    menuLabel?: string;
+}
+/** A main action and a menu of related actions, joined. */
+declare function SplitButton<T extends object>({ label, children, variant, size, isDisabled, placement, onAction, onMenuAction, menuLabel, className, ...menuProps }: SplitButtonProps<T>): react.JSX.Element;
+
+declare function MenuTrigger(props: MenuTriggerProps): react.JSX.Element;
+declare function SubmenuTrigger(props: SubmenuTriggerProps): react.JSX.Element;
+interface MenuProps<T> extends MenuProps$1<T> {
+    placement?: PopoverProps$1['placement'];
+    /** Set false when rendering a Menu inline (not in a popover). */
+    withPopover?: boolean;
+    popoverClassName?: string;
+    /** `'fade'` (default), `'scale'` or `'none'`. */
+    animation?: OverlayAnimation;
+}
+declare function Menu<T extends object>({ placement, withPopover, popoverClassName, animation, className, ...props }: MenuProps<T>): react.JSX.Element;
+interface MenuItemProps<T> extends Omit<MenuItemProps$1<T>, 'children'> {
+    children?: ReactNode;
+    /** Secondary line under the label. */
+    description?: ReactNode;
+    /** Leading icon. */
+    icon?: ReactNode;
+    /** Keyboard shortcut shown on the right. */
+    shortcut?: string;
+    variant?: 'default' | 'danger';
+}
+declare function MenuItem<T extends object>({ children, description, icon, shortcut, variant, className, ...props }: MenuItemProps<T>): react.JSX.Element;
+interface MenuSectionProps<T> extends MenuSectionProps$1<T> {
+    title?: ReactNode;
+}
+declare function MenuSection<T extends object>({ title, children, className, ...props }: MenuSectionProps<T>): react.JSX.Element;
+declare function MenuSeparator(): react.JSX.Element;
+
+/** Shared floating-surface look (Figma "Dropdown menu": 12px radius). */
+declare const floatingSurface: string;
+/**
+ * Enter/exit motion for floating menus. Exits are quicker than entrances.
+ *
+ * - `fade`: a quick opacity fade (default — good for dashboards).
+ * - `scale`: grows out of the trigger (`--trigger-anchor-point`), never from
+ *   the centre and never from scale(0).
+ * - `none`: instant.
+ */
+declare const floatingMotion: Record<OverlayAnimation, string>;
+interface PopoverProps extends PopoverProps$1 {
+    /** Defaults to `menuAnimation` from `<KrtsProvider>`, which defaults to `'fade'`. */
+    animation?: OverlayAnimation;
+}
+declare function Popover({ className, offset, animation, ...props }: PopoverProps): react.JSX.Element;
+
+interface TooltipProps extends Omit<TooltipProps$1, 'children'> {
+    children: ReactNode;
+    /** Small keyboard shortcut shown on the right, e.g. "⌘K". */
+    shortcut?: ReactNode;
+    showArrow?: boolean;
+}
+/**
+ * Origin-aware tooltip. React Aria handles the warm-up: the first tooltip
+ * waits, neighbours open instantly *and* skip their animation.
+ */
+declare function Tooltip({ children, shortcut, showArrow, offset, className, ...props }: TooltipProps): react.JSX.Element;
+interface TooltipTriggerProps extends TooltipTriggerComponentProps {
+}
+/** Wraps a focusable trigger and a `<Tooltip>`. Default delay 600ms. */
+declare function TooltipTrigger({ delay, closeDelay, ...props }: TooltipTriggerProps): react.JSX.Element;
+/** One-liner: `<WithTooltip content="Save"><Button…/></WithTooltip>` */
+declare function WithTooltip({ content, children, placement, shortcut, delay, }: {
+    content: ReactNode;
+    children: React.ReactElement;
+    placement?: TooltipProps$1['placement'];
+    shortcut?: ReactNode;
+    delay?: number;
+}): react.JSX.Element;
+
+declare function Label(props: LabelProps): react.JSX.Element;
+declare function Description(props: TextProps): react.JSX.Element;
+declare function FieldError(props: FieldErrorProps): react.JSX.Element;
+/** Shared look for text-like controls (from the Figma "Input Field"). */
+declare const inputFrame: string;
+declare const inputSizes: {
+    readonly sm: "h-9 text-sm";
+    readonly md: "h-12 text-base";
+};
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+interface FieldChrome {
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: string | ((v: ValidationResult) => string);
+    size?: keyof typeof inputSizes;
+}
+interface TextFieldProps extends TextFieldProps$1, FieldChrome {
+    placeholder?: string;
+    /** Rendered inside the field, before the input. */
+    startContent?: ReactNode;
+    endContent?: ReactNode;
+}
+declare function TextField({ label, description, errorMessage, placeholder, size, startContent, endContent, className, ...props }: TextFieldProps): react.JSX.Element;
+interface TextAreaFieldProps extends TextFieldProps$1, Omit<FieldChrome, 'size'> {
+    placeholder?: string;
+    rows?: number;
+}
+declare function TextAreaField({ label, description, errorMessage, placeholder, rows, className, ...props }: TextAreaFieldProps): react.JSX.Element;
+interface SearchFieldProps extends SearchFieldProps$1, FieldChrome {
+    placeholder?: string;
+}
+declare function SearchField({ label, description, errorMessage, placeholder, size, className, ...props }: SearchFieldProps): react.JSX.Element;
+interface NumberFieldProps extends NumberFieldProps$1, FieldChrome {
+    placeholder?: string;
+}
+declare function NumberField({ label, description, errorMessage, placeholder, size, className, ...props }: NumberFieldProps): react.JSX.Element;
+
+interface CheckboxProps extends Omit<CheckboxProps$1, 'children'> {
+    children?: ReactNode;
+}
+/** 24px box from the Figma file; the check draws itself in on select. */
+declare function Checkbox({ children, className, ...props }: CheckboxProps): react.JSX.Element;
+interface CheckboxGroupProps extends Omit<CheckboxGroupProps$1, 'children'> {
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: string;
+    children?: ReactNode;
+}
+declare function CheckboxGroup({ label, description, errorMessage, children, className, ...props }: CheckboxGroupProps): react.JSX.Element;
+
+interface RadioGroupProps extends Omit<RadioGroupProps$1, 'children'> {
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: string;
+    children?: ReactNode;
+}
+declare function RadioGroup({ label, description, errorMessage, children, className, ...props }: RadioGroupProps): react.JSX.Element;
+declare function Radio({ children, className, ...props }: RadioProps): react.JSX.Element;
+
+interface SwitchProps extends Omit<SwitchProps$1, 'children'> {
+    children?: ReactNode;
+    size?: 'sm' | 'md';
+}
+/**
+ * From the Figma "Toggle" frames — including the "halfway" frame, where
+ * the thumb stretches while pressed and then settles on the other side.
+ */
+declare function Switch({ children, size, className, ...props }: SwitchProps): react.JSX.Element;
+
+interface SliderProps<T extends number | number[]> extends SliderProps$1<T> {
+    label?: ReactNode;
+    /** Show the current value next to the label. Default true when a label is given. */
+    showValue?: boolean;
+    /** Show the filled portion of the track (Figma "Slider Fill"). Default true. */
+    showFill?: boolean;
+    /** Accessible names for each thumb (range sliders). */
+    thumbLabels?: string[];
+}
+declare function Slider<T extends number | number[]>({ label, showValue, showFill, thumbLabels, className, ...props }: SliderProps<T>): react.JSX.Element;
+
+interface SelectProps<T extends object> extends Omit<SelectProps$1<T>, 'children'> {
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: string;
+    items?: Iterable<T>;
+    children: ReactNode | ((item: T) => ReactNode);
+    size?: keyof typeof inputSizes;
+    /** Listbox animation: `'fade'` (default), `'scale'` or `'none'`. */
+    animation?: OverlayAnimation;
+}
+declare function Select<T extends object>({ label, description, errorMessage, children, items, size, animation, className, ...props }: SelectProps<T>): react.JSX.Element;
+declare function SelectItem(props: ListBoxItemProps & {
+    children?: ReactNode;
+}): react.JSX.Element;
+
+declare function DialogTrigger(props: DialogTriggerProps): react.JSX.Element;
+interface ModalProps extends ModalOverlayProps {
+    size?: 'sm' | 'md' | 'lg';
+}
+/** Modals stay centred (they aren't anchored to a trigger). */
+declare function Modal({ size, className, children, ...props }: ModalProps): react.JSX.Element;
+interface DialogProps extends Omit<DialogProps$1, 'children'> {
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: DialogProps$1['children'];
+    /** Footer actions. Receives `close`. */
+    footer?: (close: () => void) => ReactNode;
+    showClose?: boolean;
+}
+declare function Dialog({ title, description, children, footer, showClose, className, ...props }: DialogProps): react.JSX.Element;
+interface AlertDialogProps extends Omit<DialogProps, 'footer' | 'role'> {
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+    variant?: 'primary' | 'danger';
+    onConfirm?: () => void | Promise<void>;
+}
+declare function AlertDialog({ confirmLabel, cancelLabel, variant, onConfirm, ...props }: AlertDialogProps): react.JSX.Element;
+interface DrawerProps extends Omit<ModalOverlayProps, 'children'> {
+    side?: 'right' | 'left' | 'bottom';
+}
+/**
+ * A panel that slides in from an edge. Uses translate percentages so it
+ * works at any size, with the iOS-like drawer curve.
+ */
+declare function Drawer({ side, className, children, ...props }: DrawerProps & {
+    children?: ReactNode;
+}): react.JSX.Element;
+
+type TabsVariant = 'pill' | 'underline';
+interface TabsProps extends TabsProps$1 {
+}
+declare function Tabs({ className, ...props }: TabsProps): react.JSX.Element;
+declare function TabList<T extends object>({ variant, className, ...props }: TabListProps<T> & {
+    variant?: TabsVariant;
+}): react.JSX.Element;
+interface TabProps extends Omit<TabProps$1, 'children'> {
+    children?: ReactNode;
+}
+/**
+ * The selection indicator glides between tabs (shared-element transition);
+ * text colour changes in sync with it.
+ */
+declare function Tab({ children, className, ...props }: TabProps): react.JSX.Element;
+declare function TabPanel({ className, ...props }: TabPanelProps): react.JSX.Element;
+
+interface ProgressBarProps extends ProgressBarProps$1 {
+    label?: ReactNode;
+    showValue?: boolean;
+}
+/** Progress uses linear motion: it's a constant process, not a gesture. */
+declare function ProgressBar({ label, showValue, className, ...props }: ProgressBarProps): react.JSX.Element;
+interface MeterProps extends MeterProps$1 {
+    label?: ReactNode;
+    /** Colour the fill by thresholds (fractions of the range). */
+    thresholds?: {
+        warning: number;
+        danger: number;
+    };
+}
+declare function Meter({ label, thresholds, className, ...props }: MeterProps): react.JSX.Element;
+
+interface DisclosureProps extends Omit<DisclosureProps$1, 'children'> {
+    title: ReactNode;
+    children: ReactNode;
+}
+/**
+ * Expandable section. Height animates via `--disclosure-panel-height`
+ * which React Aria measures for us.
+ */
+declare function Disclosure({ title, children, className, ...props }: DisclosureProps): react.JSX.Element;
+declare function Accordion({ className, ...props }: DisclosureGroupProps): react.JSX.Element;
+
+type ToastType = 'default' | 'success' | 'error' | 'loading';
+interface ToastAction {
+    label: ReactNode;
+    onPress: () => void;
+}
+interface ToastOptions {
+    id?: string | number;
+    description?: ReactNode;
+    /** ms before auto-dismiss. `Infinity` keeps it. Default 4000 (loading: Infinity). */
+    duration?: number;
+    action?: ToastAction;
+    onDismiss?: () => void;
+}
+declare function dismiss(id?: string | number): void;
+/**
+ * Call from anywhere — no hooks or context needed. Render `<Toaster />` once.
+ *
+ * ```ts
+ * toast('Saved');
+ * toast.success('Uploaded', { description: 'photo.jpg' });
+ * toast('Message archived', { action: { label: 'Undo', onPress: restore } });
+ * toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Failed' });
+ * ```
+ */
+declare const toast: ((title: ReactNode, opts?: ToastOptions) => string | number) & {
+    success: (title: ReactNode, opts?: ToastOptions) => string | number;
+    error: (title: ReactNode, opts?: ToastOptions) => string | number;
+    loading: (title: ReactNode, opts?: ToastOptions) => string | number;
+    dismiss: typeof dismiss;
+    promise<T>(promise: Promise<T>, msgs: {
+        loading: ReactNode;
+        success: ReactNode | ((v: T) => ReactNode);
+        error: ReactNode | ((e: unknown) => ReactNode);
+    }, opts?: ToastOptions): Promise<T>;
+};
+interface ToasterProps {
+    position?: 'bottom-right' | 'bottom-center' | 'bottom-left' | 'top-right' | 'top-center' | 'top-left';
+    /** How many toasts are visible in the collapsed stack. Default 3. */
+    visibleToasts?: number;
+    /** Always show the stack expanded. */
+    expand?: boolean;
+}
+declare function Toaster({ position, visibleToasts, expand }: ToasterProps): react.JSX.Element;
+
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Render a circle (avatars). */
+    circle?: boolean;
+}
+/**
+ * Placeholder in the exact shape of the content to come, so the layout
+ * doesn't jump when it arrives.
+ */
+declare function Skeleton({ circle, className, ...props }: SkeletonProps): react.JSX.Element;
+declare const badgeTones: {
+    readonly neutral: "bg-surface text-fg border-line";
+    readonly solid: "bg-primary text-primary-fg border-primary-line";
+    readonly danger: "bg-danger-soft text-danger border-danger/25";
+    readonly success: "bg-success/10 text-success border-success/25";
+    readonly warning: "bg-warning/10 text-warning border-warning/25";
+};
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: keyof typeof badgeTones;
+    /** Show a leading status dot. */
+    dot?: boolean;
+}
+declare function Badge({ tone, dot, className, children, ...props }: BadgeProps): react.JSX.Element;
+declare function Kbd({ className, ...props }: HTMLAttributes<HTMLElement>): react.JSX.Element;
+interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    src?: string;
+    alt?: string;
+    /** Used for initials when there's no image. */
+    name?: string;
+    size?: number;
+}
+declare function Avatar({ src, alt, name, size, className, ...props }: AvatarProps): react.JSX.Element;
+declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare function CardHeader({ title, description, action }: {
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+}): react.JSX.Element;
+declare function Separator({ className, ...props }: SeparatorProps & {
+    className?: string;
+}): react.JSX.Element;
+declare function Link({ className, ...props }: LinkProps): react.JSX.Element;
+
+type IconProps = SVGProps<SVGSVGElement> & {
+    size?: number;
+};
+declare const ChevronDownIcon: (p: IconProps) => react.JSX.Element;
+declare const ChevronRightIcon: (p: IconProps) => react.JSX.Element;
+declare const CheckIcon: (p: IconProps) => react.JSX.Element;
+declare const MinusIcon: (p: IconProps) => react.JSX.Element;
+declare const XIcon: (p: IconProps) => react.JSX.Element;
+declare const SearchIcon: (p: IconProps) => react.JSX.Element;
+declare const CopyIcon: (p: IconProps) => react.JSX.Element;
+declare const PlusIcon: (p: IconProps) => react.JSX.Element;
+
+export { Accordion, AlertDialog, Avatar, Badge, Button, Card, CardHeader, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronRightIcon, CopyButton, CopyIcon, Description, Dialog, DialogTrigger, Disclosure, Drawer, DropdownButton, FieldError, GestureArea, HoldButton, Input, KRTS_EVENTS, Kbd, KrtsProvider, Label, Link, Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, Meter, MinusIcon, Modal, NumberField, PlusIcon, Popover, ProgressBar, Radio, RadioGroup, SearchField, SearchIcon, Segment, SegmentedControl, Select, SelectItem, Separator, Skeleton, Slider, Spinner, SplitButton, SubmenuTrigger, Switch, Tab, TabList, TabPanel, Tabs, TextAreaField, TextField, Toaster, ToggleButton, Tooltip, TooltipTrigger, WithTooltip, XIcon, buttonStyles, cn, composeTw, dispatchKrtsEvent, floatingMotion, floatingSurface, focusRing, inputFrame, toast, useAnimatedWidth, useGesture, useGestureHandlers, useKrtsConfig, usePerceivedProgress, usePrefersReducedMotion, useSmoothPending };
+export type { AlertDialogProps, AnimatedWidthOptions, AvatarProps, BadgeProps, ButtonProps, ButtonSize, ButtonVariant, CheckboxGroupProps, CheckboxProps, CopyButtonProps, DialogProps, DisclosureProps, DrawerProps, DropdownButtonProps, GestureAreaProps, GestureOptions, GesturePointerType, HoldButtonProps, HoldButtonVariant, HoldGestureEvent, KrtsConfig, KrtsEventName, MenuItemProps, MenuProps, MenuSectionProps, MeterProps, ModalProps, NumberFieldProps, OverlayAnimation, PopoverProps, ProgressBarProps, RadioGroupProps, SearchFieldProps, SegmentedControlProps, SelectProps, SkeletonProps, SliderProps, SpinnerProps, SplitButtonProps, SwipeDirection, SwipeGestureEvent, SwitchProps, TabProps, TabsProps, TapGestureEvent, TextAreaFieldProps, TextFieldProps, ToastAction, ToastOptions, ToastType, ToasterProps, ToggleButtonProps, TooltipProps, TooltipTriggerProps, UseGestureResult };