@vireocodedev/ui/hello-pangea-dnd

export type VireoDndDragEndResult = VireoDndDragUpdate & {
    reason: "drop" | "cancel";
};

export type VireoDndDragStart = {
    draggable: VireoDraggableId;
    source: VireoDndLocation;
};

export type VireoDndDragUpdate = VireoDndDragStart & {
    destination: (VireoDndLocation & {
        mode: VireoDndMode;
    }) | null;
};

export type VireoDndDropProposal = {
    draggable: VireoDraggableId;
    source: VireoDndLocation;
    destination: {
        id: VireoDropZoneId;
        mode: VireoDndMode;
        group: string;
    };
};

export type VireoDndJsonObject = {
    [key: string]: VireoDndJsonValue;
};

export type VireoDndJsonValue = string | number | boolean | null | VireoDndJsonValue[] | {
    [key: string]: VireoDndJsonValue;
};

export type VireoDndLocation = {
    id: VireoDropZoneId;
    index: number;
};

export type VireoDndMode = "reorder" | "transfer";

Provides one isolated, typed Hello Pangea drag-and-drop lifecycle.

/** Provides one isolated, typed Hello Pangea drag-and-drop lifecycle. */
export declare function VireoDndProvider({ children, onBeforeCapture, onBeforeDragStart, onDragStart, onDragUpdate, onDragEnd, ...nativeOptions }: VireoDndProviderProps): React.JSX.Element;

export type VireoDndProviderProps = Pick<DragDropContextProps, "autoScrollerOptions" | "dragHandleUsageInstructions" | "enableDefaultSensors" | "nonce" | "sensors"> & {
    children?: ReactNode;
    onBeforeCapture?: (event: {
        draggable: VireoDraggableId;
    }) => void;
    onBeforeDragStart?: (event: VireoDndDragStart) => void;
    onDragStart?: (event: VireoDndDragStart, provided: VireoDndResponderProvided) => void;
    onDragUpdate?: (event: VireoDndDragUpdate, provided: VireoDndResponderProvided) => void;
    onDragEnd: (result: VireoDndDragEndResult, provided: VireoDndResponderProvided) => void;
};

export type VireoDndResponderProvided = Pick<ResponderProvided, "announce">;

export type VireoDndState = {
    isDragging: boolean;
    active: VireoDndDragStart | null;
    destination: (VireoDndLocation & {
        mode: VireoDndMode;
        accepted: boolean;
    }) | null;
};

Renders the accessible dedicated grip for an explicit-handle VireoDraggableItem.

/** Renders the accessible dedicated grip for an explicit-handle VireoDraggableItem. */
export declare const VireoDragHandle: React.ForwardRefExoticComponent<(Omit<import("./VireoDragHandle.types.js").VireoDragHandleSlotsAndSlotProps & {
    children?: React.ReactNode;
    classes?: Partial<import("./VireoDragHandle.classes.js").VireoDragHandleClasses>;
} & {
    "aria-label": string;
    "aria-labelledby"?: string;
} & import("./VireoDragHandle.types.js").VireoDragHandleInheritedProps, "ref"> | Omit<import("./VireoDragHandle.types.js").VireoDragHandleSlotsAndSlotProps & {
    children?: React.ReactNode;
    classes?: Partial<import("./VireoDragHandle.classes.js").VireoDragHandleClasses>;
} & {
    "aria-label"?: string;
    "aria-labelledby": string;
} & import("./VireoDragHandle.types.js").VireoDragHandleInheritedProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;

export type VireoDragHandleAccessibleName = {
    "aria-label": string;
    "aria-labelledby"?: string;
} | {
    "aria-label"?: string;
    "aria-labelledby": string;
};

Valid keys for VireoDragHandle utility classes and theme style overrides.

/** Valid keys for VireoDragHandle utility classes and theme style overrides. */
export type VireoDragHandleClassKey = keyof VireoDragHandleClasses;

Utility classes available to VireoDragHandle.

/** Utility classes available to VireoDragHandle. */
export type VireoDragHandleClasses = Record<VireoDragHandleSlotName | "disabled" | "dragging", string>;

export interface VireoDragHandleIconSlotPropsOverrides {
    [key: `data-${string}`]: VireoDataAttributeValue;
}

Props VireoDragHandle inherits from its default root after excluding component-owned props.

/** Props VireoDragHandle inherits from its default root after excluding component-owned props. */
export type VireoDragHandleInheritedProps = Omit<IconButtonProps, "aria-label" | "aria-labelledby" | "children" | "component" | "disabled">;

Props owned by {@link VireoDragHandle }.

/** Props owned by {@link VireoDragHandle}. */
export type VireoDragHandleOwnProps = VireoDragHandleSlotsAndSlotProps & {
    children?: React.ReactNode;
    /** Override or extend the utility classes applied to each slot. */
    classes?: Partial<VireoDragHandleClasses>;
};

export type VireoDragHandleOwnerState = {
    disabled: boolean;
    isDragging: boolean;
};

Props accepted by {@link VireoDragHandle }.

/** Props accepted by {@link VireoDragHandle}. */
export type VireoDragHandleProps = VireoDragHandleOwnProps & VireoDragHandleAccessibleName & VireoDragHandleInheritedProps;

export interface VireoDragHandleRootSlotPropsOverrides {
    [key: `data-${string}`]: VireoDataAttributeValue;
}

Replaceable semantic regions exposed by {@link VireoDragHandle }.

/** Replaceable semantic regions exposed by {@link VireoDragHandle}. */
export type VireoDragHandleSlots = {
    [TSlotName in VireoDragHandleSlotName]: React.ElementType;
};

Slot props exposed by {@link VireoDragHandle }.

/** Slot props exposed by {@link VireoDragHandle}. */
export type VireoDragHandleSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoDragHandleSlots, {
    /** @default IconButton */
    root: SlotProps<typeof IconButton, VireoDragHandleRootSlotPropsOverrides, VireoDragHandleOwnerState>;
    /** @default DragIndicatorRounded */
    icon: SlotProps<typeof DragIndicatorRounded, VireoDragHandleIconSlotPropsOverrides, VireoDragHandleOwnerState>;
}>;

export type VireoDraggableId = keyof VireoDraggableIdRegistry extends never ? UnregisteredIdentifier : RegisteredIdentifier<VireoDraggableIdRegistry>;

Application-wide draggable identifier registry extended through declaration merging.

/** Application-wide draggable identifier registry extended through declaration merging. */
export interface VireoDraggableIdRegistry {
}

Makes one rendered item draggable through its root or an explicit VireoDragHandle.

/** Makes one rendered item draggable through its root or an explicit VireoDragHandle. */
export declare const VireoDraggableItem: React.ForwardRefExoticComponent<Omit<VireoDraggableItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

Valid keys for VireoDraggableItem utility classes and theme style overrides.

/** Valid keys for VireoDraggableItem utility classes and theme style overrides. */
export type VireoDraggableItemClassKey = keyof VireoDraggableItemClasses;

Utility classes available to VireoDraggableItem.

/** Utility classes available to VireoDraggableItem. */
export type VireoDraggableItemClasses = Record<VireoDraggableItemSlotName | "disabled" | "dragging", string>;

Props VireoDraggableItem inherits from its default root after excluding component-owned props.

/** Props VireoDraggableItem inherits from its default root after excluding component-owned props. */
export type VireoDraggableItemInheritedProps = Omit<BoxProps<"div">, "children" | "component" | "id" | "onDragStart">;

Props owned by {@link VireoDraggableItem }.

/** Props owned by {@link VireoDraggableItem}. */
export type VireoDraggableItemOwnProps = VireoDraggableItemSlotsAndSlotProps & {
    /** Allows a drag to begin from interactive descendants. @default false */
    allowDragFromInteractiveElements?: boolean;
    children?: React.ReactNode;
    /** Override or extend the utility classes applied to each slot. */
    classes?: Partial<VireoDraggableItemClasses>;
    /** @default false */
    disabled?: boolean;
    /** @default false */
    disableDefaultFeedback?: boolean;
    /** @default 'root' */
    dragHandle?: "explicit" | "root";
    /** Structured identifier unique within the nearest provider. */
    id: VireoDraggableId;
    /** Current zero-based position inside its source zone. */
    index: number;
    /** @default true */
    respectForcePress?: boolean;
};

export type VireoDraggableItemOwnerState = {
    disabled: boolean;
    disableDefaultFeedback: boolean;
    dragHandle: "explicit" | "root";
    isDragging: boolean;
};

Props accepted by {@link VireoDraggableItem }.

/** Props accepted by {@link VireoDraggableItem}. */
export type VireoDraggableItemProps = VireoDraggableItemOwnProps & VireoDraggableItemInheritedProps;

export interface VireoDraggableItemRootSlotPropsOverrides {
    [key: `data-${string}`]: VireoDataAttributeValue;
}

Replaceable semantic regions exposed by {@link VireoDraggableItem }.

/** Replaceable semantic regions exposed by {@link VireoDraggableItem}. */
export type VireoDraggableItemSlots = {
    [TSlotName in VireoDraggableItemSlotName]: React.ElementType;
};

Slot props exposed by {@link VireoDraggableItem }.

/** Slot props exposed by {@link VireoDraggableItem}. */
export type VireoDraggableItemSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoDraggableItemSlots, {
    /** @default 'div' */
    root: SlotProps<"div", VireoDraggableItemRootSlotPropsOverrides, VireoDraggableItemOwnerState>;
}>;

Renders a typed reorder list or transfer destination inside VireoDndProvider.

/** Renders a typed reorder list or transfer destination inside VireoDndProvider. */
export declare const VireoDropZone: React.ForwardRefExoticComponent<Omit<VireoDropZoneProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

Valid keys for VireoDropZone utility classes and theme style overrides.

/** Valid keys for VireoDropZone utility classes and theme style overrides. */
export type VireoDropZoneClassKey = keyof VireoDropZoneClasses;

Utility classes available to VireoDropZone.

/** Utility classes available to VireoDropZone. */
export type VireoDropZoneClasses = Record<VireoDropZoneSlotName | "candidate" | "disabled" | "over" | "rejected", string>;

export type VireoDropZoneId = keyof VireoDropZoneIdRegistry extends never ? UnregisteredIdentifier : RegisteredIdentifier<VireoDropZoneIdRegistry>;

Application-wide drop-zone identifier registry extended through declaration merging.

/** Application-wide drop-zone identifier registry extended through declaration merging. */
export interface VireoDropZoneIdRegistry {
}

Props VireoDropZone inherits from its default root after excluding component-owned props.

/** Props VireoDropZone inherits from its default root after excluding component-owned props. */
export type VireoDropZoneInheritedProps = Omit<BoxProps<"div">, "children" | "component" | "id">;

Props owned by {@link VireoDropZone }.

/** Props owned by {@link VireoDropZone}. */
export type VireoDropZoneOwnProps = VireoDropZoneSlotsAndSlotProps & {
    children?: React.ReactNode;
    /** Override or extend the utility classes applied to each slot. */
    classes?: Partial<VireoDropZoneClasses>;
    /** Determines whether the active draggable is accepted by this compatible zone. */
    canDrop?: (proposal: VireoDndDropProposal) => boolean;
    /** @default false */
    disabled?: boolean;
    /** @default false */
    disableDefaultFeedback?: boolean;
    /** @default 'vertical' */
    direction?: "horizontal" | "vertical";
    /** Native compatibility group. Zones exchange items only inside the same group. @default 'default' */
    group?: string;
    /** Structured identifier unique within the nearest provider. */
    id: VireoDropZoneId;
    /** Controls insertion semantics at this destination. */
    mode: VireoDndMode;
};

export type VireoDropZoneOwnerState = {
    direction: "horizontal" | "vertical";
    disabled: boolean;
    disableDefaultFeedback: boolean;
    dropState: VireoDropZoneState;
    mode: VireoDndMode;
};

Props accepted by {@link VireoDropZone }.

/** Props accepted by {@link VireoDropZone}. */
export type VireoDropZoneProps = VireoDropZoneOwnProps & VireoDropZoneInheritedProps;

export interface VireoDropZoneRootSlotPropsOverrides {
    [key: `data-${string}`]: VireoDataAttributeValue;
}

Replaceable semantic regions exposed by {@link VireoDropZone }.

/** Replaceable semantic regions exposed by {@link VireoDropZone}. */
export type VireoDropZoneSlots = {
    [TSlotName in VireoDropZoneSlotName]: React.ElementType;
};

Slot props exposed by {@link VireoDropZone }.

/** Slot props exposed by {@link VireoDropZone}. */
export type VireoDropZoneSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoDropZoneSlots, {
    /** @default 'div' */
    root: SlotProps<"div", VireoDropZoneRootSlotPropsOverrides, VireoDropZoneOwnerState>;
}>;

export type VireoDropZoneState = "candidate" | "idle" | "over" | "rejected";

Returns the generated utility class name for a VireoDragHandle slot or state.

/** Returns the generated utility class name for a VireoDragHandle slot or state. */
export declare function getVireoDragHandleUtilityClass(slot: string): string;

Returns the generated utility class name for a VireoDraggableItem slot or state.

/** Returns the generated utility class name for a VireoDraggableItem slot or state. */
export declare function getVireoDraggableItemUtilityClass(slot: string): string;

Returns the generated utility class name for a VireoDropZone slot or state.

/** Returns the generated utility class name for a VireoDropZone slot or state. */
export declare function getVireoDropZoneUtilityClass(slot: string): string;

export declare function useVireoDndState(): VireoDndState;

Generated utility class names keyed by each public VireoDragHandle class key.

/** Generated utility class names keyed by each public VireoDragHandle class key. */
export declare const vireoDragHandleClasses: VireoDragHandleClasses;

Generated utility class names keyed by each public VireoDraggableItem class key.

/** Generated utility class names keyed by each public VireoDraggableItem class key. */
export declare const vireoDraggableItemClasses: VireoDraggableItemClasses;

Generated utility class names keyed by each public VireoDropZone class key.

/** Generated utility class names keyed by each public VireoDropZone class key. */
export declare const vireoDropZoneClasses: VireoDropZoneClasses;