@zyncat/ui 0.11.0 → 0.13.0

package/dist/types/components/primitives/collapse/collapse.typecheck.d.ts

@@ -0,0 +1,2 @@
+export declare const ok: import("react").JSX.Element;
+export declare const bad: import("react").JSX.Element;

package/dist/{number-field.d.ts → types/components/primitives/input/NumberField.d.ts}

@@ -1,8 +1,7 @@
-import * as react from 'react';
-import { CSSProperties, InputHTMLAttributes } from 'react';
-import { F as FieldIdProps, a as FieldCoreMessagingProps } from './field-chrome-CMPOQSLs.js';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-
+import './input.css';
+import type { CSSProperties, InputHTMLAttributes } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import { type FieldCoreMessagingProps, type FieldIdProps } from './field-chrome';
 interface NumberFieldOwnProps extends FieldIdProps, FieldCoreMessagingProps {
     /** Unit suffix shown inside the field (e.g. "days", "%"). */
     unit?: string;
@@ -27,10 +26,9 @@ interface NumberFieldOwnProps extends FieldIdProps, FieldCoreMessagingProps {
     /** Inline styles merged onto the field root. */
     style?: CSSProperties;
 }
-interface NumberFieldProps extends NumberFieldOwnProps {
+export interface NumberFieldProps extends NumberFieldOwnProps {
     /** Standard <input> attributes (name, aria-*, ...) forwarded to the input. */
     htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, keyof NumberFieldOwnProps | 'size' | 'value' | 'onChange' | 'min' | 'max' | 'step'> & DataAttributes;
 }
-declare function NumberField({ id, label, helper, error, unit, min, max, step, value, defaultValue, onChange, disabled, size, className, style, htmlProps, }: NumberFieldProps): react.JSX.Element;
-
-export { NumberField, type NumberFieldProps };
+export declare function NumberField({ id, label, helper, error, unit, min, max, step, value, defaultValue, onChange, disabled, size, className, style, htmlProps, }: NumberFieldProps): import("react").JSX.Element;
+export {};

package/dist/{otp-field.d.ts → types/components/primitives/input/OtpField.d.ts}

@@ -1,7 +1,6 @@
-import * as react from 'react';
-import { CSSProperties, HTMLAttributes } from 'react';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-
+import './input.css';
+import type { CSSProperties, HTMLAttributes } from 'react';
+import type { DataAttributes } from '../../../dom-props';
 interface OtpFieldOwnProps {
     /** Number of slots. @default 6 */
     length?: number;
@@ -22,10 +21,9 @@ interface OtpFieldOwnProps {
     /** Inline styles merged onto the root wrapper. */
     style?: CSSProperties;
 }
-interface OtpFieldProps extends OtpFieldOwnProps {
+export interface OtpFieldProps extends OtpFieldOwnProps {
     /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the root wrapper. */
     htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof OtpFieldOwnProps> & DataAttributes;
 }
-declare function OtpField({ length, value, onChange, group, error, disabled, size, className, style, htmlProps, }: OtpFieldProps): react.JSX.Element;
-
-export { OtpField, type OtpFieldProps };
+export declare function OtpField({ length, value, onChange, group, error, disabled, size, className, style, htmlProps, }: OtpFieldProps): import("react").JSX.Element;
+export {};

package/dist/{text-field.d.ts → types/components/primitives/input/TextField.d.ts}

@@ -1,8 +1,7 @@
-import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, CSSProperties } from 'react';
-import { b as FieldMessagingProps } from './field-chrome-CMPOQSLs.js';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-
+import './input.css';
+import type { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import { type FieldMessagingProps } from './field-chrome';
 /** The native <input> props TextField surfaces at the top level (the rest live in `htmlProps`). */
 type TextFieldNative = Pick<InputHTMLAttributes<HTMLInputElement>, 'placeholder' | 'value' | 'onChange' | 'disabled' | 'readOnly' | 'maxLength' | 'minLength' | 'hidden' | 'pattern' | 'onKeyDown'>;
 interface TextFieldOwnProps extends FieldMessagingProps, TextFieldNative {
@@ -19,10 +18,9 @@ interface TextFieldOwnProps extends FieldMessagingProps, TextFieldNative {
     /** Available text like types */
     type?: 'text' | 'search' | 'email' | 'url' | 'password';
 }
-interface TextFieldProps extends TextFieldOwnProps {
+export interface TextFieldProps extends TextFieldOwnProps {
     /** Standard <input> attributes (name, autoComplete, maxLength, aria-*, ...) forwarded to the input. */
     htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, keyof TextFieldOwnProps | 'size'> & DataAttributes;
 }
-declare function TextField({ label, helper, error, warning, success, leadingIcon, clearable, size, value, htmlProps, className, style, optional, ...rest }: TextFieldProps): react.JSX.Element;
-
-export { TextField, type TextFieldProps };
+export declare function TextField({ label, helper, error, warning, success, leadingIcon, clearable, size, value, htmlProps, className, style, optional, ...rest }: TextFieldProps): import("react").JSX.Element;
+export {};

package/dist/types/components/primitives/input/field-chrome.d.ts

@@ -0,0 +1,45 @@
+import './input.css';
+import type { ReactNode } from 'react';
+import { type IconName } from '../../internal/icon/Icon';
+export interface FieldIdProps {
+    /** Field id, ties the label to the control. */
+    id?: string;
+}
+export interface FieldRequirementProps {
+    /** Mark the control required - reaches the native element and shows a danger `*` after the label. */
+    required?: boolean;
+    /** Show a muted "(optional)" after the label. */
+    optional?: boolean;
+}
+export interface FieldCoreMessagingProps {
+    /** Label text (sentence case). */
+    label?: ReactNode;
+    /** Neutral helper text - shown when there's no validation message. */
+    helper?: ReactNode;
+    /** Error message - sets the error state (border + icon + colour). Wins over warning/success/helper. */
+    error?: ReactNode;
+}
+export interface FieldMessagingProps extends FieldIdProps, FieldRequirementProps, FieldCoreMessagingProps {
+    /** Warning message - amber state. Loses to `error`; wins over `success`/`helper`. */
+    warning?: ReactNode;
+    /** Success message - green state. Loses to `error`/`warning`; wins over `helper`. */
+    success?: ReactNode;
+}
+export interface FieldLabelProps extends FieldIdProps, FieldRequirementProps {
+    /** Label text (sentence case). */
+    label?: ReactNode;
+}
+export declare function FieldLabel({ id, label, required, optional }: FieldLabelProps): import("react").JSX.Element;
+export interface FieldMessageProps {
+    id?: string;
+    message?: ReactNode;
+    icon?: IconName | null;
+}
+export declare function FieldMessage({ id, message, icon }: FieldMessageProps): import("react").JSX.Element;
+export declare const fieldMessageId: (baseId: string, message: ReactNode) => string | undefined;
+export declare const joinIds: (...ids: (string | undefined | null)[]) => string | undefined;
+export declare function resolveFieldMessage(error: ReactNode, warning: ReactNode, success: ReactNode, helper: ReactNode): {
+    state: string;
+    msg: ReactNode;
+    msgIcon: IconName | null;
+};

package/dist/{radio-group.d.ts → types/components/primitives/radio-group/RadioGroup.d.ts}

@@ -1,9 +1,8 @@
-import * as react from 'react';
-import { ReactNode, CSSProperties, FieldsetHTMLAttributes } from 'react';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-import { c as FieldRequirementProps } from './field-chrome-CMPOQSLs.js';
-
-interface RadioOption {
+import './radio-group.css';
+import { type CSSProperties, type FieldsetHTMLAttributes, type ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { FieldRequirementProps } from '../input/field-chrome';
+export interface RadioOption {
     /** The stored value - what `onChange` returns and `value` matches. */
     value: string;
     /** Visible label (sentence case). */
@@ -43,10 +42,9 @@ interface RadioGroupOwnProps extends FieldRequirementProps {
     /** Inline styles merged onto the root element. */
     style?: CSSProperties;
 }
-interface RadioGroupProps extends RadioGroupOwnProps {
+export interface RadioGroupProps extends RadioGroupOwnProps {
     /** Standard <fieldset> attributes (aria-*, data-*, ...) forwarded to the root. */
     htmlProps?: Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, keyof RadioGroupOwnProps> & DataAttributes;
 }
-declare function RadioGroup({ name, value, onChange, label, helper, error, required, optional, variant, orientation, size, disabled, options, className, style, htmlProps, }: RadioGroupProps): react.JSX.Element;
-
-export { RadioGroup, type RadioGroupProps, type RadioOption };
+export declare function RadioGroup({ name, value, onChange, label, helper, error, required, optional, variant, orientation, size, disabled, options, className, style, htmlProps, }: RadioGroupProps): import("react").JSX.Element;
+export {};

package/dist/{tag.d.ts → types/components/primitives/tag/Tag.d.ts}

@@ -1,9 +1,7 @@
-import * as react from 'react';
-import { ReactNode, CSSProperties, HTMLAttributes, Ref } from 'react';
-import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-import './motion-scale-Canq4stZ.js';
-
+import './tag.css';
+import { type CSSProperties, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import type { DisableableAnimation } from '../../../motion/timing';
 interface TagOwnProps {
     /** Tag content; a string label also seeds the default remove-button `aria-label`. */
     children: ReactNode;
@@ -23,7 +21,7 @@ interface TagOwnProps {
     style?: CSSProperties;
 }
 /** Tag - the removable, editable label (stateless; the parent owns the list). */
-interface TagProps extends TagOwnProps {
+export interface TagProps extends TagOwnProps {
     /** Standard <span> attributes forwarded to the tag root. */
     htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof TagOwnProps> & DataAttributes;
     /** Ref to the tag root span. */
@@ -42,11 +40,10 @@ interface TagGroupOwnProps {
     animation?: DisableableAnimation;
 }
 /** TagGroup - wrapping flex row + removal/insertion choreography. */
-interface TagGroupProps extends TagGroupOwnProps {
+export interface TagGroupProps extends TagGroupOwnProps {
     /** Standard <div> attributes forwarded to the group wrapper. */
     htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TagGroupOwnProps> & DataAttributes;
 }
-declare function Tag({ children, icon, onRemove, removeLabel, size, disabled, className, style, htmlProps, ref, }: TagProps): react.JSX.Element;
-declare function TagGroup({ ariaLabel, className, style, children, htmlProps, animation }: TagGroupProps): react.JSX.Element;
-
-export { Tag, TagGroup, type TagGroupProps, type TagProps };
+export declare function Tag({ children, icon, onRemove, removeLabel, size, disabled, className, style, htmlProps, ref, }: TagProps): import("react").JSX.Element;
+export declare function TagGroup({ ariaLabel, className, style, children, htmlProps, animation }: TagGroupProps): import("react").JSX.Element;
+export {};

package/dist/{toggle-tag.d.ts → types/components/primitives/tag/ToggleTag.d.ts}

@@ -1,7 +1,7 @@
-import * as react from 'react';
-import { ReactNode, CSSProperties, ButtonHTMLAttributes } from 'react';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-
+import './tag.css';
+import '../collapse/collapse.css';
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
 interface ToggleTagOwnProps {
     /** Chip content; the label shown beside the tick or `icon`. */
     children: ReactNode;
@@ -25,10 +25,9 @@ interface ToggleTagOwnProps {
     style?: CSSProperties;
 }
 /** ToggleTag - the on/off filter chip (<button aria-pressed>). */
-interface ToggleTagProps extends ToggleTagOwnProps {
+export interface ToggleTagProps extends ToggleTagOwnProps {
     /** Standard <button> attributes forwarded to the chip. */
     htmlProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ToggleTagOwnProps> & DataAttributes;
 }
-declare function ToggleTag({ children, selected: selectedProp, defaultSelected, onChange, icon, count, size, disabled, className, style, htmlProps, }: ToggleTagProps): react.JSX.Element;
-
-export { ToggleTag, type ToggleTagProps };
+export declare function ToggleTag({ children, selected: selectedProp, defaultSelected, onChange, icon, count, size, disabled, className, style, htmlProps, }: ToggleTagProps): import("react").JSX.Element;
+export {};

package/dist/{textarea.d.ts → types/components/primitives/textarea/Textarea.d.ts}

@@ -1,8 +1,7 @@
-import * as react from 'react';
-import { TextareaHTMLAttributes, ChangeEventHandler, ReactNode, CSSProperties } from 'react';
-import { b as FieldMessagingProps } from './field-chrome-CMPOQSLs.js';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-
+import './textarea.css';
+import { type ChangeEventHandler, type CSSProperties, type ReactNode, type TextareaHTMLAttributes } from 'react';
+import type { DataAttributes } from '../../../dom-props';
+import { type FieldMessagingProps } from '../input/field-chrome';
 /** The native <textarea> props Textarea surfaces at the top level (the rest live in `htmlProps`). */
 type TextareaNative = Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder' | 'disabled' | 'readOnly' | 'onKeyDown'>;
 interface TextareaOwnProps extends FieldMessagingProps, TextareaNative {
@@ -29,10 +28,9 @@ interface TextareaOwnProps extends FieldMessagingProps, TextareaNative {
     /** Inline styles merged onto the field root. */
     style?: CSSProperties;
 }
-interface TextareaProps extends TextareaOwnProps {
+export interface TextareaProps extends TextareaOwnProps {
     /** Standard <textarea> attributes (name, maxLength, aria-*, onKeyDown, ...) forwarded to the textarea. */
     htmlProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof TextareaOwnProps | 'rows'> & DataAttributes;
 }
-declare function Textarea({ id, label, required, optional, placeholder, helper, error, warning, success, value, onChange, onKeyDown, onSubmit, max, minRows, maxRows, warnAt, hint, size, disabled, readOnly, className, style, htmlProps, }: TextareaProps): react.JSX.Element;
-
-export { Textarea, type TextareaProps };
+export declare function Textarea({ id, label, required, optional, placeholder, helper, error, warning, success, value, onChange, onKeyDown, onSubmit, max, minRows, maxRows, warnAt, hint, size, disabled, readOnly, className, style, htmlProps, }: TextareaProps): import("react").JSX.Element;
+export {};

package/dist/{toggle.d.ts → types/components/primitives/toggle/Toggle.d.ts}

@@ -1,7 +1,6 @@
-import * as react from 'react';
-import { ReactNode, ChangeEventHandler, CSSProperties, InputHTMLAttributes } from 'react';
-import { D as DataAttributes } from './dom-props-C0jrllBw.js';
-
+import './toggle.css';
+import { type ChangeEventHandler, type CSSProperties, type InputHTMLAttributes, type ReactNode } from 'react';
+import type { DataAttributes } from '../../../dom-props';
 interface ToggleOwnProps {
     /** Controlled checked state. Omit for uncontrolled (use `defaultChecked`). */
     checked?: boolean;
@@ -22,10 +21,9 @@ interface ToggleOwnProps {
     /** Inline styles merged onto the root label. */
     style?: CSSProperties;
 }
-interface ToggleProps extends ToggleOwnProps {
+export interface ToggleProps extends ToggleOwnProps {
     /** Standard <input> attributes (name, value, required, aria-*, ...) forwarded to the switch input. */
     htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, keyof ToggleOwnProps | 'type'> & DataAttributes;
 }
-declare function Toggle({ checked, defaultChecked, disabled, size, label, description, className, style, onChange, htmlProps, }: ToggleProps): react.JSX.Element;
-
-export { Toggle, type ToggleProps };
+export declare function Toggle({ checked, defaultChecked, disabled, size, label, description, className, style, onChange, htmlProps, }: ToggleProps): import("react").JSX.Element;
+export {};

package/dist/{dom-props-C0jrllBw.d.ts → types/dom-props.d.ts}

@@ -1,5 +1,3 @@
-type DataAttributes = {
+export type DataAttributes = {
     [key: `data-${string}`]: string | number | boolean | undefined;
 };
-
-export type { DataAttributes as D };

package/dist/types/engine/animate.d.ts

@@ -0,0 +1,30 @@
+import { type Timing } from './ease';
+export declare const clock: {
+    scale: number;
+};
+export interface Playback {
+    stop(): void;
+    finished: Promise<void>;
+}
+type Vec = [number, number];
+export type Length = number | `${number}%`;
+export type Size = Length | 'auto';
+export interface Layer {
+    x?: Length[];
+    y?: Length[];
+    scale?: number[] | Vec[];
+    opacity?: number[];
+    width?: Size[];
+    height?: Size[];
+    timing?: Timing;
+    composite?: CompositeOperation;
+}
+export type Placement = Omit<Layer, 'timing' | 'composite'>;
+export interface PropertyHolder {
+    cancel(): void;
+}
+export declare function claim(el: HTMLElement, keys: string[], holder: PropertyHolder | null): void;
+export declare function release(el: HTMLElement, keys: string[], holder: PropertyHolder): void;
+export declare function animate(el: HTMLElement, ...layers: Layer[]): Playback;
+export declare function set(el: HTMLElement, ...placements: Placement[]): void;
+export {};

package/dist/types/engine/drag.d.ts

@@ -0,0 +1,17 @@
+interface Axes {
+    x: number;
+    y: number;
+}
+export interface PanInfo {
+    offset: Axes;
+    velocity: Axes;
+}
+interface DragHandlers {
+    onMove?: (info: PanInfo) => void;
+    onEnd?: (info: PanInfo) => void;
+}
+export declare function startDrag(origin: {
+    clientX: number;
+    clientY: number;
+}, handlers: DragHandlers): () => void;
+export {};

package/dist/types/engine/ease.d.ts

@@ -0,0 +1,15 @@
+import type { MotionTransition } from '../tokens/motion-tokens';
+export type EaseValue = NonNullable<MotionTransition['ease']>;
+export interface Timing extends Omit<MotionTransition, 'ease'> {
+    ease?: EaseValue | EaseValue[];
+    times?: number[];
+    fill?: FillMode;
+    release?: boolean;
+}
+export interface ResolvedTiming {
+    duration: number;
+    delay: number;
+    easing: string;
+    segments: string[] | null;
+}
+export declare function resolveTiming(timing?: Timing): ResolvedTiming;

package/dist/types/engine/flip.d.ts

@@ -0,0 +1,18 @@
+import { type Playback } from './animate';
+import type { Timing } from './ease';
+export interface Box {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export declare function measure(el: HTMLElement): Box;
+export declare function keepShared(key: string, box: Box): void;
+export declare function readShared(key: string): Box | null;
+export declare function dropShared(key: string): void;
+export interface FlipOptions {
+    /** How a changed box size is reconciled: cheap scale correction, a real width/height morph, or left alone. */
+    size?: 'scale' | 'morph' | 'none';
+    timing?: Timing;
+}
+export declare function flip(el: HTMLElement, from: Box, options?: FlipOptions): Playback | null;

package/dist/types/engine/index.d.ts

@@ -0,0 +1,4 @@
+export { animate, set, clock, type Layer, type Placement, type Playback } from './animate';
+export { loop, type LoopOptions, type SimulationFrame } from './loop';
+export { flip, measure, keepShared, readShared, dropShared, type Box, type FlipOptions } from './flip';
+export { startDrag, type PanInfo } from './drag';

package/dist/types/engine/loop.d.ts

@@ -0,0 +1,9 @@
+import { type Playback } from './animate';
+export type SimulationFrame = (k: number, dt: number, now: number) => void;
+export interface LoopOptions {
+    el?: HTMLElement;
+    claims?: string[];
+    speed?: () => number;
+    snap?: () => void;
+}
+export declare function loop(frame: SimulationFrame, options?: LoopOptions): Playback;

package/dist/types/motion/element.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode, type Ref } from 'react';
+import { type FlipTuning } from './flip';
+import { type MotionSpecs } from './use-motion';
+export interface MotionProps extends MotionSpecs {
+    /** Tag for the element this renders. @default 'div' */
+    as?: string;
+    /** FLIP this element from its previous box on every render. Implied by `layoutId`. */
+    layout?: boolean;
+    /** FLIP from whatever element last held this id, so the box travels between nodes. */
+    layoutId?: string;
+    /** Tunes whichever layout animation is active; ignored without `layout` or `layoutId`. */
+    layoutTransition?: FlipTuning;
+    ref?: Ref<HTMLElement | null>;
+    children?: ReactNode;
+    [prop: string]: unknown;
+}
+export declare function Motion({ as, animate, exit, initial, deps, layout, layoutId, layoutTransition, ref, children, ...rest }: MotionProps): import("react").DOMElement<import("react").DOMAttributes<HTMLElement>, HTMLElement>;

package/dist/types/motion/flip.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+import { type FlipOptions } from '../engine';
+export type FlipTuning = FlipOptions;
+export declare function useFlip<T extends HTMLElement>(sharedId: string | null, tuning?: FlipTuning, enabled?: boolean): RefObject<T | null>;

package/dist/types/motion/glide.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+export type GlideApi = ReturnType<typeof useGlide>;
+export declare function useGlide<T extends HTMLElement>(containerRef: RefObject<T | null>): {
+    ref: RefObject<HTMLSpanElement>;
+    enter: (target: HTMLElement | null) => void;
+    leave: () => void;
+};
+export declare function GlidePill({ className, glide }: {
+    className?: string;
+    glide: GlideApi;
+}): import("react").JSX.Element;

package/dist/types/motion/motion-timing.d.ts

@@ -0,0 +1,16 @@
+import type { DurationToken, EaseToken } from '../tokens/motion-scale';
+import { type MotionTransition } from '../tokens/motion-tokens';
+import { type DisableableAnimation } from './timing';
+export interface DirectionDefault {
+    duration: DurationToken;
+    ease: EaseToken;
+}
+export interface MotionTimingDefaults {
+    open: DirectionDefault;
+    close: DirectionDefault;
+}
+export interface MotionTimings {
+    open: MotionTransition;
+    close: MotionTransition;
+}
+export declare function resolveMotionTiming(animation: DisableableAnimation | undefined, defaults: MotionTimingDefaults): MotionTimings;

package/dist/types/motion/presence-context.d.ts

@@ -0,0 +1,11 @@
+export interface PresenceState {
+    /** False once the child has been removed from `children` but is still mounted for its exit. */
+    isPresent: boolean;
+    /** False for children present at the Presence's own first paint when `initial={false}`. */
+    initial: boolean;
+    /** Claims responsibility for animating this child out; call the returned release once the
+     *  exit has finished. A child nobody claims is dropped as soon as it leaves `children`. */
+    claimExit: () => () => void;
+}
+export declare const PresenceContext: import("react").Context<PresenceState>;
+export declare const usePresence: () => PresenceState;

package/dist/types/motion/presence.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export interface PresenceProps {
+    /** Keyed children. A child animates out only if it renders a `<Motion>` carrying `exit`. */
+    children?: ReactNode;
+    /** Let children present on the first paint play their `animate`. @default true */
+    initial?: boolean;
+    /** `wait` holds entering children back until the outgoing ones have left. @default 'sync' */
+    mode?: 'sync' | 'wait';
+    /** Fires once the last exiting child has been removed. */
+    onExitComplete?: () => void;
+}
+export declare function Presence({ children, initial, mode, onExitComplete }: PresenceProps): import("react").FunctionComponentElement<import("react").FragmentProps>;

package/dist/types/motion/presets.d.ts

@@ -0,0 +1,6 @@
+import type { Layer } from '../engine';
+type LayerTiming = Layer['timing'];
+export declare const popIn: (scale: number, timing: LayerTiming) => Layer;
+export declare const popOut: (scale: number, timing: LayerTiming) => Layer;
+export declare const slideIn: (distance: number, timing: LayerTiming) => Layer;
+export {};

package/dist/{timing-7JA_zQHP.d.ts → types/motion/timing.d.ts}

@@ -1,13 +1,13 @@
-import { D as DurationToken, E as EaseToken } from './motion-scale-Canq4stZ.js';
-
-type TimingDirection = 'open' | 'close';
+import type { CSSProperties } from 'react';
+import type { DurationToken, EaseToken } from '../tokens/motion-scale';
+export type TimingDirection = 'open' | 'close';
 /** One token for both directions, or split per direction; an omitted direction keeps its default. */
-type DirectionalToken<Token extends string> = Token | {
+export type DirectionalToken<Token extends string> = Token | {
     [D in TimingDirection]?: Token;
 };
 /** Timing of an open/close transition, constrained to the motion token vocabulary -
  *  see DurationToken / EaseToken for what each token means. */
-interface AnimationTiming {
+export interface AnimationTiming {
     /** Duration token(s); an omitted field or direction keeps the component's default. */
     duration?: DirectionalToken<DurationToken>;
     /** Ease token(s); an omitted field or direction keeps the component's default. */
@@ -15,13 +15,13 @@ interface AnimationTiming {
 }
 /** The `animation` prop shape: tokens to retime, omit for the component's defaults, or
  *  `null` to disable the transition entirely (it plays instantly). */
-type DisableableAnimation = AnimationTiming | null;
+export type DisableableAnimation = AnimationTiming | null;
 /** Extend this to expose the timing API on a component; redeclare `animation`
  *  to document the component's own default tokens. */
-interface TimingProps {
+export interface TimingProps {
     /** Transition timing - motion tokens only, each field a single token or { open, close };
      *  `null` disables the transition (it plays instantly). */
     animation?: DisableableAnimation;
 }
-
-export type { AnimationTiming as A, DisableableAnimation as D, TimingProps as T, DirectionalToken as a };
+export declare function resolveDirection<Token extends string>(timing: DirectionalToken<Token> | undefined, dir: TimingDirection): Token | undefined;
+export declare function timingVars(prefix: string, animation: DisableableAnimation | undefined): CSSProperties | undefined;

package/dist/types/motion/use-motion.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from 'react';
+import { type Layer, type Playback } from '../engine';
+export type Plays = Playback | Playback[] | null | undefined | void;
+export type MotionSpec = Layer | Layer[] | ((el: HTMLElement) => Plays);
+export declare function run(spec: MotionSpec | undefined, el: HTMLElement): Playback[];
+export interface MotionSpecs {
+    /** Plays on mount, and again whenever `deps` change. */
+    animate?: MotionSpec;
+    /** Plays when a parent `<Presence>` drops this child; it stays mounted until this finishes. */
+    exit?: MotionSpec;
+    /** Play `animate` on mount. Falls back to the parent Presence's own `initial`. @default true */
+    initial?: boolean;
+    /** Replay `animate` when these change. Must keep a stable length. @default [] */
+    deps?: unknown[];
+}
+/** Drives `<Motion>`; use it directly on elements you hold a ref to but do not render. */
+export declare function useMotion(ref: RefObject<HTMLElement | null>, { animate, exit, initial, deps }: MotionSpecs): void;