@zag-js/splitter 0.10.5 → 0.11.1

package/dist/index.d.mts

@@ -0,0 +1,144 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "toggleTrigger" | "resizeTrigger">;
+
+type PanelId = string | number;
+type PanelSizeData = {
+    id: PanelId;
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+};
+type ResizeDetails = {
+    size: PanelSizeData[];
+    activeHandleId: string | null;
+};
+type ElementIds = Partial<{
+    root: string;
+    resizeTrigger(id: string): string;
+    toggleTrigger(id: string): string;
+    label(id: string): string;
+    panel(id: string | number): string;
+}>;
+type PublicContext = DirectionProperty & CommonProperties & {
+    /**
+     * The orientation of the splitter. Can be `horizontal` or `vertical`
+     */
+    orientation: "horizontal" | "vertical";
+    /**
+     * The size data of the panels
+     */
+    size: PanelSizeData[];
+    /**
+     * Function called when the splitter is resized.
+     */
+    onResize?: (details: ResizeDetails) => void;
+    /**
+     * Function called when the splitter resize starts.
+     */
+    onResizeStart?: (details: ResizeDetails) => void;
+    /**
+     * Function called when the splitter resize ends.
+     */
+    onResizeEnd?: (details: ResizeDetails) => void;
+    /**
+     * The ids of the elements in the splitter. Useful for composition.
+     */
+    ids?: ElementIds;
+};
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type NormalizedPanelData = Array<Required<PanelSizeData> & {
+    remainingSize: number;
+    minSize: number;
+    maxSize: number;
+    start: number;
+    end: number;
+}>;
+type ComputedContext = Readonly<{
+    isHorizontal: boolean;
+    panels: NormalizedPanelData;
+    activeResizeBounds?: {
+        min: number;
+        max: number;
+    };
+    activeResizePanels?: {
+        before: PanelSizeData;
+        after: PanelSizeData;
+    };
+}>;
+type PrivateContext = Context<{
+    activeResizeId: string | null;
+    previousPanels: NormalizedPanelData;
+    activeResizeState: {
+        isAtMin: boolean;
+        isAtMax: boolean;
+    };
+    initialSize: Array<Required<Pick<PanelSizeData, "id" | "size">>>;
+}>;
+type MachineContext = PublicContext & ComputedContext & PrivateContext;
+type MachineState = {
+    value: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
+    tags: "focus";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type PanelProps = {
+    id: PanelId;
+    snapSize?: number;
+};
+type ResizeTriggerProps = {
+    id: `${PanelId}:${PanelId}`;
+    step?: number;
+    disabled?: boolean;
+};
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the splitter is focused.
+     */
+    isFocused: boolean;
+    /**
+     * Whether the splitter is being dragged.
+     */
+    isDragging: boolean;
+    /**
+     *  The bounds of the currently dragged splitter handle.
+     */
+    bounds: {
+        min: number;
+        max: number;
+    } | undefined;
+    /**
+     * Function to set a panel to its minimum size.
+     */
+    setToMinSize(id: PanelId): void;
+    /**
+     * Function to set a panel to its maximum size.
+     */
+    setToMaxSize(id: PanelId): void;
+    /**
+     * Function to set the size of a panel.
+     */
+    setSize(id: PanelId, size: number): void;
+    /**
+     * Returns the state details for a resize trigger.
+     */
+    getResizeTriggerState(props: ResizeTriggerProps): {
+        isDisabled: boolean;
+        isFocused: boolean;
+        panelIds: string[];
+        min: number | undefined;
+        max: number | undefined;
+        value: number;
+    };
+    rootProps: T["element"];
+    getPanelProps(props: PanelProps): T["element"];
+    getResizeTriggerProps(props: ResizeTriggerProps): T["element"];
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, MachineState, PanelProps, ResizeTriggerProps, anatomy, connect, machine };

package/dist/index.d.ts

@@ -1,4 +1,144 @@
-export { anatomy } from "./splitter.anatomy";
-export { connect } from "./splitter.connect";
-export { machine } from "./splitter.machine";
-export type { MachineState, UserDefinedContext as Context, PanelProps, ResizeTriggerProps } from "./splitter.types";
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "toggleTrigger" | "resizeTrigger">;
+
+type PanelId = string | number;
+type PanelSizeData = {
+    id: PanelId;
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+};
+type ResizeDetails = {
+    size: PanelSizeData[];
+    activeHandleId: string | null;
+};
+type ElementIds = Partial<{
+    root: string;
+    resizeTrigger(id: string): string;
+    toggleTrigger(id: string): string;
+    label(id: string): string;
+    panel(id: string | number): string;
+}>;
+type PublicContext = DirectionProperty & CommonProperties & {
+    /**
+     * The orientation of the splitter. Can be `horizontal` or `vertical`
+     */
+    orientation: "horizontal" | "vertical";
+    /**
+     * The size data of the panels
+     */
+    size: PanelSizeData[];
+    /**
+     * Function called when the splitter is resized.
+     */
+    onResize?: (details: ResizeDetails) => void;
+    /**
+     * Function called when the splitter resize starts.
+     */
+    onResizeStart?: (details: ResizeDetails) => void;
+    /**
+     * Function called when the splitter resize ends.
+     */
+    onResizeEnd?: (details: ResizeDetails) => void;
+    /**
+     * The ids of the elements in the splitter. Useful for composition.
+     */
+    ids?: ElementIds;
+};
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type NormalizedPanelData = Array<Required<PanelSizeData> & {
+    remainingSize: number;
+    minSize: number;
+    maxSize: number;
+    start: number;
+    end: number;
+}>;
+type ComputedContext = Readonly<{
+    isHorizontal: boolean;
+    panels: NormalizedPanelData;
+    activeResizeBounds?: {
+        min: number;
+        max: number;
+    };
+    activeResizePanels?: {
+        before: PanelSizeData;
+        after: PanelSizeData;
+    };
+}>;
+type PrivateContext = Context<{
+    activeResizeId: string | null;
+    previousPanels: NormalizedPanelData;
+    activeResizeState: {
+        isAtMin: boolean;
+        isAtMax: boolean;
+    };
+    initialSize: Array<Required<Pick<PanelSizeData, "id" | "size">>>;
+}>;
+type MachineContext = PublicContext & ComputedContext & PrivateContext;
+type MachineState = {
+    value: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
+    tags: "focus";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type PanelProps = {
+    id: PanelId;
+    snapSize?: number;
+};
+type ResizeTriggerProps = {
+    id: `${PanelId}:${PanelId}`;
+    step?: number;
+    disabled?: boolean;
+};
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the splitter is focused.
+     */
+    isFocused: boolean;
+    /**
+     * Whether the splitter is being dragged.
+     */
+    isDragging: boolean;
+    /**
+     *  The bounds of the currently dragged splitter handle.
+     */
+    bounds: {
+        min: number;
+        max: number;
+    } | undefined;
+    /**
+     * Function to set a panel to its minimum size.
+     */
+    setToMinSize(id: PanelId): void;
+    /**
+     * Function to set a panel to its maximum size.
+     */
+    setToMaxSize(id: PanelId): void;
+    /**
+     * Function to set the size of a panel.
+     */
+    setSize(id: PanelId, size: number): void;
+    /**
+     * Returns the state details for a resize trigger.
+     */
+    getResizeTriggerState(props: ResizeTriggerProps): {
+        isDisabled: boolean;
+        isFocused: boolean;
+        panelIds: string[];
+        min: number | undefined;
+        max: number | undefined;
+        value: number;
+    };
+    rootProps: T["element"];
+    getPanelProps(props: PanelProps): T["element"];
+    getResizeTriggerProps(props: ResizeTriggerProps): T["element"];
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, MachineState, PanelProps, ResizeTriggerProps, anatomy, connect, machine };