@destyler/splitter 0.0.6 → 0.0.7-beta.2

package/dist/index.d.cts

@@ -1,4 +1,151 @@
-export { SplitterGroup, SplitterGroupProps, SplitterPanel, SplitterPanelProps, SplitterResizeHandle, SplitterResizeHandleProps, SplitterRoot, SplitterRootProps, splitterGroupProps, splitterPanelProps, splitterResizeHandleProps, splitterRootProps } from './component.cjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Required, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger">;
+
+type PanelId = string | number;
+interface PanelSizeData {
+    id: PanelId;
+    size?: number | undefined;
+    minSize?: number | undefined;
+    maxSize?: number | undefined;
+}
+interface SizeChangeDetails {
+    size: PanelSizeData[];
+    activeHandleId: string | null;
+}
+type ElementIds = Partial<{
+    root: string;
+    resizeTrigger: (id: string) => string;
+    label: (id: string) => string;
+    panel: (id: string | number) => string;
+}>;
+interface PublicContext extends 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.
+     */
+    onSizeChange?: ((details: SizeChangeDetails) => void) | undefined;
+    /**
+     * Function called when the splitter resize ends.
+     */
+    onSizeChangeEnd?: ((details: SizeChangeDetails) => void) | undefined;
+    /**
+     * The ids of the elements in the splitter. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+}
+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;
+    } | undefined;
+    activeResizePanels?: {
+        before: PanelSizeData;
+        after: PanelSizeData;
+    } | undefined;
+}>;
+interface PrivateContext {
+    activeResizeId: string | null;
+    previousPanels: NormalizedPanelData;
+    activeResizeState: {
+        isAtMin: boolean;
+        isAtMax: boolean;
+    };
+    initialSize: Array<Required<Pick<PanelSizeData, 'id' | 'size'>>>;
+}
+interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
+}
+interface MachineState {
+    value: 'idle' | 'hover:temp' | 'hover' | 'dragging' | 'focused';
+    tags: 'focus';
+}
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+interface PanelProps {
+    id: PanelId;
+    snapSize?: number | undefined;
+}
+interface ResizeTriggerProps {
+    id: `${PanelId}:${PanelId}`;
+    step?: number | undefined;
+    disabled?: boolean | undefined;
+}
+interface ResizeTriggerState {
+    disabled: boolean;
+    focused: boolean;
+    panelIds: string[];
+    min: number | undefined;
+    max: number | undefined;
+    value: number;
+}
+interface PanelBounds {
+    min: number;
+    max: number;
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
+    /**
+     * Whether the splitter is focused.
+     */
+    focused: boolean;
+    /**
+     * Whether the splitter is being dragged.
+     */
+    dragging: boolean;
+    /**
+     *  The bounds of the currently dragged splitter handle.
+     */
+    bounds: PanelBounds | 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) => ResizeTriggerState;
+    getRootProps: () => T['element'];
+    getPanelProps: (props: PanelProps) => T['element'];
+    getResizeTriggerProps: (props: ResizeTriggerProps) => T['element'];
+}
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare const props: ("orientation" | "size" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "id" | "dir" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "orientation" | "size" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "id" | "dir" | "getRootNode">];
+declare const panelProps: (keyof PanelProps)[];
+declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, keyof PanelProps>];
+declare const resizeTriggerProps: (keyof ResizeTriggerProps)[];
+declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props: Props) => [ResizeTriggerProps, Omit<Props, keyof ResizeTriggerProps>];
+
+export { type MachineApi as Api, type UserDefinedContext as Context, type MachineState, type PanelProps, type PanelSizeData, type ResizeTriggerProps, type Service, type SizeChangeDetails, anatomy, connect, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };

package/dist/index.d.mts

@@ -1,4 +1,151 @@
-export { SplitterGroup, SplitterGroupProps, SplitterPanel, SplitterPanelProps, SplitterResizeHandle, SplitterResizeHandleProps, SplitterRoot, SplitterRootProps, splitterGroupProps, splitterPanelProps, splitterResizeHandleProps, splitterRootProps } from './component.mjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Required, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger">;
+
+type PanelId = string | number;
+interface PanelSizeData {
+    id: PanelId;
+    size?: number | undefined;
+    minSize?: number | undefined;
+    maxSize?: number | undefined;
+}
+interface SizeChangeDetails {
+    size: PanelSizeData[];
+    activeHandleId: string | null;
+}
+type ElementIds = Partial<{
+    root: string;
+    resizeTrigger: (id: string) => string;
+    label: (id: string) => string;
+    panel: (id: string | number) => string;
+}>;
+interface PublicContext extends 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.
+     */
+    onSizeChange?: ((details: SizeChangeDetails) => void) | undefined;
+    /**
+     * Function called when the splitter resize ends.
+     */
+    onSizeChangeEnd?: ((details: SizeChangeDetails) => void) | undefined;
+    /**
+     * The ids of the elements in the splitter. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+}
+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;
+    } | undefined;
+    activeResizePanels?: {
+        before: PanelSizeData;
+        after: PanelSizeData;
+    } | undefined;
+}>;
+interface PrivateContext {
+    activeResizeId: string | null;
+    previousPanels: NormalizedPanelData;
+    activeResizeState: {
+        isAtMin: boolean;
+        isAtMax: boolean;
+    };
+    initialSize: Array<Required<Pick<PanelSizeData, 'id' | 'size'>>>;
+}
+interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
+}
+interface MachineState {
+    value: 'idle' | 'hover:temp' | 'hover' | 'dragging' | 'focused';
+    tags: 'focus';
+}
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+interface PanelProps {
+    id: PanelId;
+    snapSize?: number | undefined;
+}
+interface ResizeTriggerProps {
+    id: `${PanelId}:${PanelId}`;
+    step?: number | undefined;
+    disabled?: boolean | undefined;
+}
+interface ResizeTriggerState {
+    disabled: boolean;
+    focused: boolean;
+    panelIds: string[];
+    min: number | undefined;
+    max: number | undefined;
+    value: number;
+}
+interface PanelBounds {
+    min: number;
+    max: number;
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
+    /**
+     * Whether the splitter is focused.
+     */
+    focused: boolean;
+    /**
+     * Whether the splitter is being dragged.
+     */
+    dragging: boolean;
+    /**
+     *  The bounds of the currently dragged splitter handle.
+     */
+    bounds: PanelBounds | 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) => ResizeTriggerState;
+    getRootProps: () => T['element'];
+    getPanelProps: (props: PanelProps) => T['element'];
+    getResizeTriggerProps: (props: ResizeTriggerProps) => T['element'];
+}
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare const props: ("orientation" | "size" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "id" | "dir" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "orientation" | "size" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "id" | "dir" | "getRootNode">];
+declare const panelProps: (keyof PanelProps)[];
+declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, keyof PanelProps>];
+declare const resizeTriggerProps: (keyof ResizeTriggerProps)[];
+declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props: Props) => [ResizeTriggerProps, Omit<Props, keyof ResizeTriggerProps>];
+
+export { type MachineApi as Api, type UserDefinedContext as Context, type MachineState, type PanelProps, type PanelSizeData, type ResizeTriggerProps, type Service, type SizeChangeDetails, anatomy, connect, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };

package/dist/index.d.ts

@@ -1,4 +1,151 @@
-export { SplitterGroup, SplitterGroupProps, SplitterPanel, SplitterPanelProps, SplitterResizeHandle, SplitterResizeHandleProps, SplitterRoot, SplitterRootProps, splitterGroupProps, splitterPanelProps, splitterResizeHandleProps, splitterRootProps } from './component.js';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Required, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger">;
+
+type PanelId = string | number;
+interface PanelSizeData {
+    id: PanelId;
+    size?: number | undefined;
+    minSize?: number | undefined;
+    maxSize?: number | undefined;
+}
+interface SizeChangeDetails {
+    size: PanelSizeData[];
+    activeHandleId: string | null;
+}
+type ElementIds = Partial<{
+    root: string;
+    resizeTrigger: (id: string) => string;
+    label: (id: string) => string;
+    panel: (id: string | number) => string;
+}>;
+interface PublicContext extends 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.
+     */
+    onSizeChange?: ((details: SizeChangeDetails) => void) | undefined;
+    /**
+     * Function called when the splitter resize ends.
+     */
+    onSizeChangeEnd?: ((details: SizeChangeDetails) => void) | undefined;
+    /**
+     * The ids of the elements in the splitter. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+}
+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;
+    } | undefined;
+    activeResizePanels?: {
+        before: PanelSizeData;
+        after: PanelSizeData;
+    } | undefined;
+}>;
+interface PrivateContext {
+    activeResizeId: string | null;
+    previousPanels: NormalizedPanelData;
+    activeResizeState: {
+        isAtMin: boolean;
+        isAtMax: boolean;
+    };
+    initialSize: Array<Required<Pick<PanelSizeData, 'id' | 'size'>>>;
+}
+interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
+}
+interface MachineState {
+    value: 'idle' | 'hover:temp' | 'hover' | 'dragging' | 'focused';
+    tags: 'focus';
+}
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+interface PanelProps {
+    id: PanelId;
+    snapSize?: number | undefined;
+}
+interface ResizeTriggerProps {
+    id: `${PanelId}:${PanelId}`;
+    step?: number | undefined;
+    disabled?: boolean | undefined;
+}
+interface ResizeTriggerState {
+    disabled: boolean;
+    focused: boolean;
+    panelIds: string[];
+    min: number | undefined;
+    max: number | undefined;
+    value: number;
+}
+interface PanelBounds {
+    min: number;
+    max: number;
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
+    /**
+     * Whether the splitter is focused.
+     */
+    focused: boolean;
+    /**
+     * Whether the splitter is being dragged.
+     */
+    dragging: boolean;
+    /**
+     *  The bounds of the currently dragged splitter handle.
+     */
+    bounds: PanelBounds | 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) => ResizeTriggerState;
+    getRootProps: () => T['element'];
+    getPanelProps: (props: PanelProps) => T['element'];
+    getResizeTriggerProps: (props: ResizeTriggerProps) => T['element'];
+}
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare const props: ("orientation" | "size" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "id" | "dir" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "orientation" | "size" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "id" | "dir" | "getRootNode">];
+declare const panelProps: (keyof PanelProps)[];
+declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, keyof PanelProps>];
+declare const resizeTriggerProps: (keyof ResizeTriggerProps)[];
+declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props: Props) => [ResizeTriggerProps, Omit<Props, keyof ResizeTriggerProps>];
+
+export { type MachineApi as Api, type UserDefinedContext as Context, type MachineState, type PanelProps, type PanelSizeData, type ResizeTriggerProps, type Service, type SizeChangeDetails, anatomy, connect, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };