@zag-js/splitter 0.10.5 → 0.11.1

package/dist/splitter.types.d.ts

@@ -1,92 +0,0 @@
-import type { StateMachine as S } from "@zag-js/core";
-import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
-export 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;
-};
-export type UserDefinedContext = RequiredBy<PublicContext, "id">;
-export 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">>>;
-}>;
-export type MachineContext = PublicContext & ComputedContext & PrivateContext;
-export type MachineState = {
-    value: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
-    tags: "focus";
-};
-export type State = S.State<MachineContext, MachineState>;
-export type Send = S.Send<S.AnyEventObject>;
-export type PanelProps = {
-    id: PanelId;
-    snapSize?: number;
-};
-export type ResizeTriggerProps = {
-    id: `${PanelId}:${PanelId}`;
-    step?: number;
-    disabled?: boolean;
-};
-export {};

package/dist/splitter.utils.d.ts

@@ -1,49 +0,0 @@
-import type { PanelId, MachineContext as Ctx,  NormalizedPanelData } from './splitter.types';
-export declare function getNormalizedPanels(ctx: Ctx): NormalizedPanelData;
-export declare function getHandlePanels(ctx: Ctx, id?: string | null): {
-    before: {
-        index: number;
-        id: PanelId;
-        size: number;
-        minSize: number;
-        maxSize: number;
-        remainingSize: number;
-        start: number;
-        end: number;
-    };
-    after: {
-        index: number;
-        id: PanelId;
-        size: number;
-        minSize: number;
-        maxSize: number;
-        remainingSize: number;
-        start: number;
-        end: number;
-    };
-} | undefined;
-export declare function getHandleBounds(ctx: Ctx, id?: string | null): {
-    min: number;
-    max: number;
-} | undefined;
-export declare function getPanelBounds(ctx: Ctx, id?: string | null): {
-    before: {
-        index: number;
-        min: number;
-        max: number;
-        isAtMin: boolean;
-        isAtMax: boolean;
-        up(step: number): number;
-        down(step: number): number;
-    };
-    after: {
-        index: number;
-        min: number;
-        max: number;
-        isAtMin: boolean;
-        isAtMax: boolean;
-        up(step: number): number;
-        down(step: number): number;
-    };
-} | undefined;
-export declare function clamp(value: number, min: number, max: number): number;

package/dist/splitter.utils.js

@@ -1,130 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-function validateSize(key, size) {
-  if (Math.floor(size) > 100) {
-    throw new Error(`Total ${key} of panels cannot be greater than 100`);
-  }
-}
-function getNormalizedPanels(ctx) {
-  let numOfPanelsWithoutSize = 0;
-  let totalSize = 0;
-  let totalMinSize = 0;
-  const panels = ctx.size.map((panel) => {
-    const minSize = panel.minSize ?? 0;
-    const maxSize = panel.maxSize ?? 100;
-    totalMinSize += minSize;
-    if (panel.size == null) {
-      numOfPanelsWithoutSize++;
-    } else {
-      totalSize += panel.size;
-    }
-    return {
-      ...panel,
-      minSize,
-      maxSize
-    };
-  });
-  validateSize("minSize", totalMinSize);
-  validateSize("size", totalSize);
-  let end = 0;
-  let remainingSize = 0;
-  const result = panels.map((panel) => {
-    let start = end;
-    if (panel.size != null) {
-      end += panel.size;
-      remainingSize = panel.size - panel.minSize;
-      return {
-        ...panel,
-        start,
-        end,
-        remainingSize
-      };
-    }
-    const size = (100 - totalSize) / numOfPanelsWithoutSize;
-    end += size;
-    remainingSize = size - panel.minSize;
-    return { ...panel, size, start, end, remainingSize };
-  });
-  return result;
-}
-function getHandlePanels(ctx, id = ctx.activeResizeId) {
-  const [beforeId, afterId] = id?.split(":") ?? [];
-  if (!beforeId || !afterId)
-    return;
-  const beforeIndex = ctx.previousPanels.findIndex((panel) => panel.id === beforeId);
-  const afterIndex = ctx.previousPanels.findIndex((panel) => panel.id === afterId);
-  if (beforeIndex === -1 || afterIndex === -1)
-    return;
-  const before = ctx.previousPanels[beforeIndex];
-  const after = ctx.previousPanels[afterIndex];
-  return {
-    before: {
-      ...before,
-      index: beforeIndex
-    },
-    after: {
-      ...after,
-      index: afterIndex
-    }
-  };
-}
-function getHandleBounds(ctx, id = ctx.activeResizeId) {
-  const panels = getHandlePanels(ctx, id);
-  if (!panels)
-    return;
-  const { before, after } = panels;
-  return {
-    min: Math.max(before.start + before.minSize, after.end - after.maxSize),
-    max: Math.min(after.end - after.minSize, before.maxSize + before.start)
-  };
-}
-function getPanelBounds(ctx, id) {
-  const bounds = getHandleBounds(ctx, id);
-  const panels = getHandlePanels(ctx, id);
-  if (!bounds || !panels)
-    return;
-  const { before, after } = panels;
-  const beforeMin = Math.abs(before.start - bounds.min);
-  const afterMin = after.size + (before.size - beforeMin);
-  const beforeMax = Math.abs(before.start - bounds.max);
-  const afterMax = after.size - (beforeMax - before.size);
-  return {
-    before: {
-      index: before.index,
-      min: beforeMin,
-      max: beforeMax,
-      isAtMin: beforeMin === before.size,
-      isAtMax: beforeMax === before.size,
-      up(step) {
-        return Math.min(before.size + step, beforeMax);
-      },
-      down(step) {
-        return Math.max(before.size - step, beforeMin);
-      }
-    },
-    after: {
-      index: after.index,
-      min: afterMin,
-      max: afterMax,
-      isAtMin: afterMin === after.size,
-      isAtMax: afterMax === after.size,
-      up(step) {
-        return Math.min(after.size + step, afterMin);
-      },
-      down(step) {
-        return Math.max(after.size - step, afterMax);
-      }
-    }
-  };
-}
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-
-exports.clamp = clamp;
-exports.getHandleBounds = getHandleBounds;
-exports.getHandlePanels = getHandlePanels;
-exports.getNormalizedPanels = getNormalizedPanels;
-exports.getPanelBounds = getPanelBounds;

package/dist/splitter.utils.mjs

@@ -1,122 +0,0 @@
-function validateSize(key, size) {
-  if (Math.floor(size) > 100) {
-    throw new Error(`Total ${key} of panels cannot be greater than 100`);
-  }
-}
-function getNormalizedPanels(ctx) {
-  let numOfPanelsWithoutSize = 0;
-  let totalSize = 0;
-  let totalMinSize = 0;
-  const panels = ctx.size.map((panel) => {
-    const minSize = panel.minSize ?? 0;
-    const maxSize = panel.maxSize ?? 100;
-    totalMinSize += minSize;
-    if (panel.size == null) {
-      numOfPanelsWithoutSize++;
-    } else {
-      totalSize += panel.size;
-    }
-    return {
-      ...panel,
-      minSize,
-      maxSize
-    };
-  });
-  validateSize("minSize", totalMinSize);
-  validateSize("size", totalSize);
-  let end = 0;
-  let remainingSize = 0;
-  const result = panels.map((panel) => {
-    let start = end;
-    if (panel.size != null) {
-      end += panel.size;
-      remainingSize = panel.size - panel.minSize;
-      return {
-        ...panel,
-        start,
-        end,
-        remainingSize
-      };
-    }
-    const size = (100 - totalSize) / numOfPanelsWithoutSize;
-    end += size;
-    remainingSize = size - panel.minSize;
-    return { ...panel, size, start, end, remainingSize };
-  });
-  return result;
-}
-function getHandlePanels(ctx, id = ctx.activeResizeId) {
-  const [beforeId, afterId] = id?.split(":") ?? [];
-  if (!beforeId || !afterId)
-    return;
-  const beforeIndex = ctx.previousPanels.findIndex((panel) => panel.id === beforeId);
-  const afterIndex = ctx.previousPanels.findIndex((panel) => panel.id === afterId);
-  if (beforeIndex === -1 || afterIndex === -1)
-    return;
-  const before = ctx.previousPanels[beforeIndex];
-  const after = ctx.previousPanels[afterIndex];
-  return {
-    before: {
-      ...before,
-      index: beforeIndex
-    },
-    after: {
-      ...after,
-      index: afterIndex
-    }
-  };
-}
-function getHandleBounds(ctx, id = ctx.activeResizeId) {
-  const panels = getHandlePanels(ctx, id);
-  if (!panels)
-    return;
-  const { before, after } = panels;
-  return {
-    min: Math.max(before.start + before.minSize, after.end - after.maxSize),
-    max: Math.min(after.end - after.minSize, before.maxSize + before.start)
-  };
-}
-function getPanelBounds(ctx, id) {
-  const bounds = getHandleBounds(ctx, id);
-  const panels = getHandlePanels(ctx, id);
-  if (!bounds || !panels)
-    return;
-  const { before, after } = panels;
-  const beforeMin = Math.abs(before.start - bounds.min);
-  const afterMin = after.size + (before.size - beforeMin);
-  const beforeMax = Math.abs(before.start - bounds.max);
-  const afterMax = after.size - (beforeMax - before.size);
-  return {
-    before: {
-      index: before.index,
-      min: beforeMin,
-      max: beforeMax,
-      isAtMin: beforeMin === before.size,
-      isAtMax: beforeMax === before.size,
-      up(step) {
-        return Math.min(before.size + step, beforeMax);
-      },
-      down(step) {
-        return Math.max(before.size - step, beforeMin);
-      }
-    },
-    after: {
-      index: after.index,
-      min: afterMin,
-      max: afterMax,
-      isAtMin: afterMin === after.size,
-      isAtMax: afterMax === after.size,
-      up(step) {
-        return Math.min(after.size + step, afterMin);
-      },
-      down(step) {
-        return Math.max(after.size - step, afterMax);
-      }
-    }
-  };
-}
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-
-export { clamp, getHandleBounds, getHandlePanels, getNormalizedPanels, getPanelBounds };