react-panel-layout 0.6.0 → 0.6.1

package/dist/ResizeHandle-CBcAS918.cjs

@@ -0,0 +1,2 @@
+"use strict";const R=require("react/jsx-runtime"),I=require("react"),_=require("./useDocumentPointerEvents-DxDSOtip.cjs"),u=require("./styles-qf6ptVLD.cjs");function b(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const t=b(I),v=e=>{const n=t.useRef(null),r=t.useRef(null),s=t.useRef(0),[a,c]=t.useState(!1),l=_.useEffectEvent(o=>{e.onResize?.(o)}),i=t.useCallback(o=>e.axis==="x"?o.clientX:o.clientY,[e.axis]),p=t.useCallback(o=>{o.preventDefault(),n.current=o.currentTarget,r.current=o.pointerId,s.current=i(o),c(!0)},[i]),d=t.useCallback(o=>{const E=i(o),g=E-s.current;g!==0&&(s.current=E,l(g))},[i,l]),f=t.useCallback(()=>{c(!1),r.current=null},[]);return _.useDragPointerEvents(n,a,{onMove:d,onUp:f,pointerId:r.current??void 0,capturePointer:!0,preventDefaults:!1}),{ref:n,onPointerDown:p,isDragging:a}},h=({element:e,component:n})=>t.forwardRef(({children:r,...s},a)=>e?t.cloneElement(e,{...s,ref:a},r??e.props.children):n?R.jsx(n,{...s,ref:a,children:r}):R.jsx("div",{...s,ref:a,children:r}));function S({element:e,component:n}){return t.useMemo(()=>h({element:e,component:n}),[n,e])}const m={position:"absolute",zIndex:u.RESIZE_HANDLE_Z_INDEX},z={vertical:{width:u.RESIZE_HANDLE_THICKNESS,height:"100%",top:0,cursor:"col-resize"},horizontal:{width:"100%",height:u.RESIZE_HANDLE_THICKNESS,left:0,cursor:"row-resize"}},H={idle:u.COLOR_RESIZE_HANDLE_IDLE,hovered:u.COLOR_RESIZE_HANDLE_HOVER,dragging:u.COLOR_RESIZE_HANDLE_ACTIVE},P=({direction:e,onResize:n,component:r,element:s,children:a})=>{const c=e==="vertical"?"x":"y",{ref:l,isDragging:i,onPointerDown:p}=v({axis:c,onResize:n}),[d,f]=t.useState(!1),o=t.useCallback(()=>{f(!0)},[]),E=t.useCallback(()=>{f(!1)},[]),g=S({element:s,component:r}),D=t.useMemo(()=>i?"dragging":d?"hovered":"idle",[i,d]),C=t.useMemo(()=>({...m,...z[e],backgroundColor:H[D],touchAction:"none"}),[e,D]);return R.jsx(g,{ref:l,style:C,role:"separator","aria-orientation":e,"aria-hidden":void 0,"data-resize-handle":"true","data-direction":e,"data-is-dragging":i?"true":void 0,onPointerDown:p,onPointerEnter:o,onPointerLeave:E,children:a})};exports.ResizeHandle=P;exports.useElementComponentWrapper=S;exports.useResizeDrag=v;
+//# sourceMappingURL=ResizeHandle-CBcAS918.cjs.map

package/dist/{ResizeHandle-CScipO5l.cjs.map → ResizeHandle-CBcAS918.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle-CScipO5l.cjs","sources":["../src/modules/resizer/useResizeDrag.ts","../src/hooks/useElementComponentWrapper.tsx","../src/components/resizer/ResizeHandle.tsx"],"sourcesContent":["/**\n * @file Shared logic for draggable resize handles.\n */\nimport * as React from \"react\";\nimport { useDragPointerEvents } from \"../../hooks/useDocumentPointerEvents\";\nimport { useEffectEvent } from \"../../hooks/useEffectEvent\";\n\nexport type ResizeDragAxis = \"x\" | \"y\";\n\nexport type UseResizeDragOptions = {\n  /** Axis along which the drag should compute deltas */\n  axis: ResizeDragAxis;\n  /** Callback invoked with the delta value when dragging */\n  onResize?: (delta: number) => void;\n};\n\nexport type UseResizeDragResult<TElement extends HTMLElement> = {\n  /** Ref to attach to the draggable element */\n  ref: React.RefObject<TElement | null>;\n  /** Pointer down handler to initiate dragging */\n  onPointerDown: (event: React.PointerEvent<TElement>) => void;\n  /** Whether a drag interaction is currently active */\n  isDragging: boolean;\n};\n\n/**\n * Provides unified pointer handling for resize-capable UI elements.\n *\n * @param options - Configuration for the drag interaction.\n * @returns Handlers and state for wiring into a draggable element.\n */\nexport const useResizeDrag = <TElement extends HTMLElement = HTMLElement>(\n  options: UseResizeDragOptions,\n): UseResizeDragResult<TElement> => {\n  const elementRef = React.useRef<TElement | null>(null);\n  const pointerIdRef = React.useRef<number | null>(null);\n  const previousCoordinateRef = React.useRef<number>(0);\n  const [isDragging, setIsDragging] = React.useState(false);\n\n  const emitResize = useEffectEvent((delta: number) => {\n    options.onResize?.(delta);\n  });\n\n  const getCoordinate = React.useCallback(\n    (event: PointerEvent | React.PointerEvent) => {\n      return options.axis === \"x\" ? event.clientX : event.clientY;\n    },\n    [options.axis],\n  );\n\n  const handlePointerDown = React.useCallback(\n    (event: React.PointerEvent<TElement>) => {\n      event.preventDefault();\n      elementRef.current = event.currentTarget;\n      pointerIdRef.current = event.pointerId;\n      previousCoordinateRef.current = getCoordinate(event);\n      setIsDragging(true);\n    },\n    [getCoordinate],\n  );\n\n  const handlePointerMove = React.useCallback(\n    (event: PointerEvent) => {\n      const coordinate = getCoordinate(event);\n      const delta = coordinate - previousCoordinateRef.current;\n      if (delta === 0) {\n        return;\n      }\n      previousCoordinateRef.current = coordinate;\n      emitResize(delta);\n    },\n    [getCoordinate, emitResize],\n  );\n\n  const handlePointerUp = React.useCallback(() => {\n    setIsDragging(false);\n    pointerIdRef.current = null;\n  }, []);\n\n  useDragPointerEvents(elementRef as React.RefObject<HTMLElement | null>, isDragging, {\n    onMove: handlePointerMove,\n    onUp: handlePointerUp,\n    pointerId: pointerIdRef.current ?? undefined,\n    capturePointer: true,\n    preventDefaults: false,\n  });\n\n  return {\n    ref: elementRef,\n    onPointerDown: handlePointerDown,\n    isDragging,\n  };\n};\n\n","/**\n * @file Hook for building wrapper components that accept either an element or a component override.\n */\nimport * as React from \"react\";\n\ntype WrapperProps = React.HTMLAttributes<HTMLDivElement>;\n\ntype CloneableProps = WrapperProps & {\n  ref?: React.Ref<HTMLDivElement>;\n};\n\ntype UseElementComponentWrapperOptions = {\n  element?: React.ReactElement<WrapperProps>;\n  component?: React.ComponentType<WrapperProps & { ref?: React.Ref<HTMLDivElement> }>;\n};\n\ntype WrapperComponent = React.ForwardRefExoticComponent<\n  React.PropsWithChildren<WrapperProps> & React.RefAttributes<HTMLDivElement>\n>;\n\nconst createWrapperComponent = ({\n  element,\n  component: Component,\n}: UseElementComponentWrapperOptions): WrapperComponent =>\n  React.forwardRef<HTMLDivElement, React.PropsWithChildren<WrapperProps>>(({ children, ...rest }, forwardedRef) => {\n    if (element) {\n      return React.cloneElement(\n        element,\n        { ...rest, ref: forwardedRef } as CloneableProps,\n        children ?? element.props.children\n      );\n    }\n    if (Component) {\n      return (\n        <Component {...rest} ref={forwardedRef}>\n          {children}\n        </Component>\n      );\n    }\n    return (\n      <div {...rest} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  });\n\n/**\n * Memoizes a wrapper component that can render either a provided element, a provided component, or a default tag.\n * @returns Wrapper component honoring the overrides.\n */\nexport function useElementComponentWrapper({\n  element,\n  component,\n}: UseElementComponentWrapperOptions): WrapperComponent {\n  return React.useMemo(\n    () =>\n      createWrapperComponent({\n        element,\n        component,\n      }),\n    [component, element]\n  );\n}\n","/**\n * @file Resize handle component\n */\nimport * as React from \"react\";\nimport { useResizeDrag } from \"../../modules/resizer/useResizeDrag\";\nimport {\n  RESIZE_HANDLE_THICKNESS,\n  RESIZE_HANDLE_Z_INDEX,\n  COLOR_RESIZE_HANDLE_IDLE,\n  COLOR_RESIZE_HANDLE_ACTIVE,\n  COLOR_RESIZE_HANDLE_HOVER,\n} from \"../../constants/styles\";\nimport { useElementComponentWrapper } from \"../../hooks/useElementComponentWrapper\";\n\ntype ResizeHandleDirection = \"horizontal\" | \"vertical\";\n\nexport type ResizeHandleProps = {\n  /** Direction of resize */\n  direction: ResizeHandleDirection;\n  /** Callback when resize occurs */\n  onResize?: (delta: number) => void;\n  /** Custom component for the handle */\n  component?: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }>;\n  /** Custom element for the handle */\n  element?: React.ReactElement<React.HTMLAttributes<HTMLDivElement>>;\n  /** Optional children rendered inside the handle */\n  children?: React.ReactNode;\n};\n\nconst baseResizeHandleStyle: React.CSSProperties = {\n  position: \"absolute\",\n  zIndex: RESIZE_HANDLE_Z_INDEX,\n};\n\nconst sizeStylesByDirection: Record<ResizeHandleDirection, React.CSSProperties> = {\n  vertical: {\n    width: RESIZE_HANDLE_THICKNESS,\n    height: \"100%\",\n    top: 0,\n    cursor: \"col-resize\",\n  },\n  horizontal: {\n    width: \"100%\",\n    height: RESIZE_HANDLE_THICKNESS,\n    left: 0,\n    cursor: \"row-resize\",\n  },\n};\n\ntype ResizeHandleVisualState = \"idle\" | \"hovered\" | \"dragging\";\n\nconst backgroundByVisualState: Record<ResizeHandleVisualState, string> = {\n  idle: COLOR_RESIZE_HANDLE_IDLE,\n  hovered: COLOR_RESIZE_HANDLE_HOVER,\n  dragging: COLOR_RESIZE_HANDLE_ACTIVE,\n};\n\n/**\n * ResizeHandle - Draggable handle for resizing grid areas\n */\nexport const ResizeHandle: React.FC<ResizeHandleProps> = ({\n  direction,\n  onResize,\n  component: Component,\n  element,\n  children,\n}) => {\n  const axis = direction === \"vertical\" ? \"x\" : \"y\";\n  const { ref, isDragging, onPointerDown } = useResizeDrag<HTMLDivElement>({ axis, onResize });\n  const [isHovered, setIsHovered] = React.useState(false);\n  const handlePointerEnter = React.useCallback(() => {\n    setIsHovered(true);\n  }, []);\n  const handlePointerLeave = React.useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const Wrapper = useElementComponentWrapper({\n    element,\n    component: Component,\n  });\n  const visualState: ResizeHandleVisualState = React.useMemo(() => {\n    if (isDragging) {\n      return \"dragging\";\n    }\n    if (isHovered) {\n      return \"hovered\";\n    }\n    return \"idle\";\n  }, [isDragging, isHovered]);\n\n  const style = React.useMemo(() => {\n    return {\n      ...baseResizeHandleStyle,\n      ...sizeStylesByDirection[direction],\n      backgroundColor: backgroundByVisualState[visualState],\n      touchAction: \"none\",\n    };\n  }, [direction, visualState]);\n\n  return (\n    <Wrapper\n      ref={ref}\n      style={style}\n      role=\"separator\"\n      aria-orientation={direction}\n      aria-hidden={undefined}\n      data-resize-handle=\"true\"\n      data-direction={direction}\n      data-is-dragging={isDragging ? \"true\" : undefined}\n      onPointerDown={onPointerDown}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n    >\n      {children}\n    </Wrapper>\n  );\n};\n"],"names":["useResizeDrag","options","elementRef","React","pointerIdRef","previousCoordinateRef","isDragging","setIsDragging","emitResize","useEffectEvent","delta","getCoordinate","event","handlePointerDown","handlePointerMove","coordinate","handlePointerUp","useDragPointerEvents","createWrapperComponent","element","Component","children","rest","forwardedRef","useElementComponentWrapper","component","baseResizeHandleStyle","RESIZE_HANDLE_Z_INDEX","sizeStylesByDirection","RESIZE_HANDLE_THICKNESS","backgroundByVisualState","COLOR_RESIZE_HANDLE_IDLE","COLOR_RESIZE_HANDLE_HOVER","COLOR_RESIZE_HANDLE_ACTIVE","ResizeHandle","direction","onResize","axis","ref","onPointerDown","isHovered","setIsHovered","handlePointerEnter","handlePointerLeave","Wrapper","visualState","style","jsx"],"mappings":"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"}
+{"version":3,"file":"ResizeHandle-CBcAS918.cjs","sources":["../src/modules/resizer/useResizeDrag.ts","../src/hooks/useElementComponentWrapper.tsx","../src/components/resizer/ResizeHandle.tsx"],"sourcesContent":["/**\n * @file Shared logic for draggable resize handles.\n */\nimport * as React from \"react\";\nimport { useDragPointerEvents } from \"../../hooks/useDocumentPointerEvents\";\nimport { useEffectEvent } from \"../../hooks/useEffectEvent\";\n\nexport type ResizeDragAxis = \"x\" | \"y\";\n\nexport type UseResizeDragOptions = {\n  /** Axis along which the drag should compute deltas */\n  axis: ResizeDragAxis;\n  /** Callback invoked with the delta value when dragging */\n  onResize?: (delta: number) => void;\n};\n\nexport type UseResizeDragResult<TElement extends HTMLElement> = {\n  /** Ref to attach to the draggable element */\n  ref: React.RefObject<TElement | null>;\n  /** Pointer down handler to initiate dragging */\n  onPointerDown: (event: React.PointerEvent<TElement>) => void;\n  /** Whether a drag interaction is currently active */\n  isDragging: boolean;\n};\n\n/**\n * Provides unified pointer handling for resize-capable UI elements.\n *\n * @param options - Configuration for the drag interaction.\n * @returns Handlers and state for wiring into a draggable element.\n */\nexport const useResizeDrag = <TElement extends HTMLElement = HTMLElement>(\n  options: UseResizeDragOptions,\n): UseResizeDragResult<TElement> => {\n  const elementRef = React.useRef<TElement | null>(null);\n  const pointerIdRef = React.useRef<number | null>(null);\n  const previousCoordinateRef = React.useRef<number>(0);\n  const [isDragging, setIsDragging] = React.useState(false);\n\n  const emitResize = useEffectEvent((delta: number) => {\n    options.onResize?.(delta);\n  });\n\n  const getCoordinate = React.useCallback(\n    (event: PointerEvent | React.PointerEvent) => {\n      return options.axis === \"x\" ? event.clientX : event.clientY;\n    },\n    [options.axis],\n  );\n\n  const handlePointerDown = React.useCallback(\n    (event: React.PointerEvent<TElement>) => {\n      event.preventDefault();\n      elementRef.current = event.currentTarget;\n      pointerIdRef.current = event.pointerId;\n      previousCoordinateRef.current = getCoordinate(event);\n      setIsDragging(true);\n    },\n    [getCoordinate],\n  );\n\n  const handlePointerMove = React.useCallback(\n    (event: PointerEvent) => {\n      const coordinate = getCoordinate(event);\n      const delta = coordinate - previousCoordinateRef.current;\n      if (delta === 0) {\n        return;\n      }\n      previousCoordinateRef.current = coordinate;\n      emitResize(delta);\n    },\n    [getCoordinate, emitResize],\n  );\n\n  const handlePointerUp = React.useCallback(() => {\n    setIsDragging(false);\n    pointerIdRef.current = null;\n  }, []);\n\n  useDragPointerEvents(elementRef as React.RefObject<HTMLElement | null>, isDragging, {\n    onMove: handlePointerMove,\n    onUp: handlePointerUp,\n    pointerId: pointerIdRef.current ?? undefined,\n    capturePointer: true,\n    preventDefaults: false,\n  });\n\n  return {\n    ref: elementRef,\n    onPointerDown: handlePointerDown,\n    isDragging,\n  };\n};\n\n","/**\n * @file Hook for building wrapper components that accept either an element or a component override.\n */\nimport * as React from \"react\";\n\ntype WrapperProps = React.HTMLAttributes<HTMLDivElement>;\n\ntype CloneableProps = WrapperProps & {\n  ref?: React.Ref<HTMLDivElement>;\n};\n\ntype UseElementComponentWrapperOptions = {\n  element?: React.ReactElement<WrapperProps>;\n  component?: React.ComponentType<WrapperProps & { ref?: React.Ref<HTMLDivElement> }>;\n};\n\ntype WrapperComponent = React.ForwardRefExoticComponent<\n  React.PropsWithChildren<WrapperProps> & React.RefAttributes<HTMLDivElement>\n>;\n\nconst createWrapperComponent = ({\n  element,\n  component: Component,\n}: UseElementComponentWrapperOptions): WrapperComponent =>\n  React.forwardRef<HTMLDivElement, React.PropsWithChildren<WrapperProps>>(({ children, ...rest }, forwardedRef) => {\n    if (element) {\n      return React.cloneElement(\n        element,\n        { ...rest, ref: forwardedRef } as CloneableProps,\n        children ?? element.props.children\n      );\n    }\n    if (Component) {\n      return (\n        <Component {...rest} ref={forwardedRef}>\n          {children}\n        </Component>\n      );\n    }\n    return (\n      <div {...rest} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  });\n\n/**\n * Memoizes a wrapper component that can render either a provided element, a provided component, or a default tag.\n * @returns Wrapper component honoring the overrides.\n */\nexport function useElementComponentWrapper({\n  element,\n  component,\n}: UseElementComponentWrapperOptions): WrapperComponent {\n  return React.useMemo(\n    () =>\n      createWrapperComponent({\n        element,\n        component,\n      }),\n    [component, element]\n  );\n}\n","/**\n * @file Resize handle component\n */\nimport * as React from \"react\";\nimport { useResizeDrag } from \"../../modules/resizer/useResizeDrag\";\nimport {\n  RESIZE_HANDLE_THICKNESS,\n  RESIZE_HANDLE_Z_INDEX,\n  COLOR_RESIZE_HANDLE_IDLE,\n  COLOR_RESIZE_HANDLE_ACTIVE,\n  COLOR_RESIZE_HANDLE_HOVER,\n} from \"../../constants/styles\";\nimport { useElementComponentWrapper } from \"../../hooks/useElementComponentWrapper\";\n\ntype ResizeHandleDirection = \"horizontal\" | \"vertical\";\n\nexport type ResizeHandleProps = {\n  /** Direction of resize */\n  direction: ResizeHandleDirection;\n  /** Callback when resize occurs */\n  onResize?: (delta: number) => void;\n  /** Custom component for the handle */\n  component?: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }>;\n  /** Custom element for the handle */\n  element?: React.ReactElement<React.HTMLAttributes<HTMLDivElement>>;\n  /** Optional children rendered inside the handle */\n  children?: React.ReactNode;\n};\n\nconst baseResizeHandleStyle: React.CSSProperties = {\n  position: \"absolute\",\n  zIndex: RESIZE_HANDLE_Z_INDEX,\n};\n\nconst sizeStylesByDirection: Record<ResizeHandleDirection, React.CSSProperties> = {\n  vertical: {\n    width: RESIZE_HANDLE_THICKNESS,\n    height: \"100%\",\n    top: 0,\n    cursor: \"col-resize\",\n  },\n  horizontal: {\n    width: \"100%\",\n    height: RESIZE_HANDLE_THICKNESS,\n    left: 0,\n    cursor: \"row-resize\",\n  },\n};\n\ntype ResizeHandleVisualState = \"idle\" | \"hovered\" | \"dragging\";\n\nconst backgroundByVisualState: Record<ResizeHandleVisualState, string> = {\n  idle: COLOR_RESIZE_HANDLE_IDLE,\n  hovered: COLOR_RESIZE_HANDLE_HOVER,\n  dragging: COLOR_RESIZE_HANDLE_ACTIVE,\n};\n\n/**\n * ResizeHandle - Draggable handle for resizing grid areas\n */\nexport const ResizeHandle: React.FC<ResizeHandleProps> = ({\n  direction,\n  onResize,\n  component: Component,\n  element,\n  children,\n}) => {\n  const axis = direction === \"vertical\" ? \"x\" : \"y\";\n  const { ref, isDragging, onPointerDown } = useResizeDrag<HTMLDivElement>({ axis, onResize });\n  const [isHovered, setIsHovered] = React.useState(false);\n  const handlePointerEnter = React.useCallback(() => {\n    setIsHovered(true);\n  }, []);\n  const handlePointerLeave = React.useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const Wrapper = useElementComponentWrapper({\n    element,\n    component: Component,\n  });\n  const visualState: ResizeHandleVisualState = React.useMemo(() => {\n    if (isDragging) {\n      return \"dragging\";\n    }\n    if (isHovered) {\n      return \"hovered\";\n    }\n    return \"idle\";\n  }, [isDragging, isHovered]);\n\n  const style = React.useMemo(() => {\n    return {\n      ...baseResizeHandleStyle,\n      ...sizeStylesByDirection[direction],\n      backgroundColor: backgroundByVisualState[visualState],\n      touchAction: \"none\",\n    };\n  }, [direction, visualState]);\n\n  return (\n    <Wrapper\n      ref={ref}\n      style={style}\n      role=\"separator\"\n      aria-orientation={direction}\n      aria-hidden={undefined}\n      data-resize-handle=\"true\"\n      data-direction={direction}\n      data-is-dragging={isDragging ? \"true\" : undefined}\n      onPointerDown={onPointerDown}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n    >\n      {children}\n    </Wrapper>\n  );\n};\n"],"names":["useResizeDrag","options","elementRef","React","pointerIdRef","previousCoordinateRef","isDragging","setIsDragging","emitResize","useEffectEvent","delta","getCoordinate","event","handlePointerDown","handlePointerMove","coordinate","handlePointerUp","useDragPointerEvents","createWrapperComponent","element","Component","children","rest","forwardedRef","useElementComponentWrapper","component","baseResizeHandleStyle","RESIZE_HANDLE_Z_INDEX","sizeStylesByDirection","RESIZE_HANDLE_THICKNESS","backgroundByVisualState","COLOR_RESIZE_HANDLE_IDLE","COLOR_RESIZE_HANDLE_HOVER","COLOR_RESIZE_HANDLE_ACTIVE","ResizeHandle","direction","onResize","axis","ref","onPointerDown","isHovered","setIsHovered","handlePointerEnter","handlePointerLeave","Wrapper","visualState","style","jsx"],"mappings":"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"}

package/dist/{ResizeHandle-CdA_JYfN.js → ResizeHandle-CXjc1meV.js}

@@ -1,29 +1,28 @@
-import { jsx as g } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import * as r from "react";
-import { u as h } from "./useDocumentPointerEvents-CKdhGXd0.js";
-import { u as v } from "./useEffectEvent-Dp7HLCf0.js";
-import { a as C, b as I, c as _, R as D, q as S } from "./styles-DPPuJ0sf.js";
+import { u as v, a as m } from "./useDocumentPointerEvents-DXxw3qWj.js";
+import { a as C, b as I, c as _, R as D, q as S } from "./styles-NkjuMOVS.js";
 const b = (e) => {
-  const n = r.useRef(null), o = r.useRef(null), s = r.useRef(0), [a, u] = r.useState(!1), c = v((t) => {
+  const n = r.useRef(null), o = r.useRef(null), a = r.useRef(0), [s, u] = r.useState(!1), c = v((t) => {
     e.onResize?.(t);
   }), i = r.useCallback(
     (t) => e.axis === "x" ? t.clientX : t.clientY,
     [e.axis]
-  ), E = r.useCallback(
+  ), g = r.useCallback(
     (t) => {
-      t.preventDefault(), n.current = t.currentTarget, o.current = t.pointerId, s.current = i(t), u(!0);
+      t.preventDefault(), n.current = t.currentTarget, o.current = t.pointerId, a.current = i(t), u(!0);
     },
     [i]
   ), l = r.useCallback(
     (t) => {
-      const f = i(t), p = f - s.current;
-      p !== 0 && (s.current = f, c(p));
+      const f = i(t), E = f - a.current;
+      E !== 0 && (a.current = f, c(E));
     },
     [i, c]
   ), d = r.useCallback(() => {
     u(!1), o.current = null;
   }, []);
-  return h(n, a, {
+  return m(n, s, {
     onMove: l,
     onUp: d,
     pointerId: o.current ?? void 0,
@@ -31,17 +30,17 @@ const b = (e) => {
     preventDefaults: !1
   }), {
     ref: n,
-    onPointerDown: E,
-    isDragging: a
+    onPointerDown: g,
+    isDragging: s
   };
 }, z = ({
   element: e,
   component: n
-}) => r.forwardRef(({ children: o, ...s }, a) => e ? r.cloneElement(
+}) => r.forwardRef(({ children: o, ...a }, s) => e ? r.cloneElement(
   e,
-  { ...s, ref: a },
+  { ...a, ref: s },
   o ?? e.props.children
-) : n ? /* @__PURE__ */ g(n, { ...s, ref: a, children: o }) : /* @__PURE__ */ g("div", { ...s, ref: a, children: o }));
+) : n ? /* @__PURE__ */ p(n, { ...a, ref: s, children: o }) : /* @__PURE__ */ p("div", { ...a, ref: s, children: o }));
 function H({
   element: e,
   component: n
@@ -74,47 +73,47 @@ const L = {
   idle: _,
   hovered: I,
   dragging: C
-}, y = ({
+}, O = ({
   direction: e,
   onResize: n,
   component: o,
-  element: s,
-  children: a
+  element: a,
+  children: s
 }) => {
-  const u = e === "vertical" ? "x" : "y", { ref: c, isDragging: i, onPointerDown: E } = b({ axis: u, onResize: n }), [l, d] = r.useState(!1), t = r.useCallback(() => {
+  const u = e === "vertical" ? "x" : "y", { ref: c, isDragging: i, onPointerDown: g } = b({ axis: u, onResize: n }), [l, d] = r.useState(!1), t = r.useCallback(() => {
     d(!0);
   }, []), f = r.useCallback(() => {
     d(!1);
-  }, []), p = H({
-    element: s,
+  }, []), E = H({
+    element: a,
     component: o
-  }), R = r.useMemo(() => i ? "dragging" : l ? "hovered" : "idle", [i, l]), m = r.useMemo(() => ({
+  }), R = r.useMemo(() => i ? "dragging" : l ? "hovered" : "idle", [i, l]), h = r.useMemo(() => ({
     ...L,
     ...P[e],
     backgroundColor: k[R],
     touchAction: "none"
   }), [e, R]);
-  return /* @__PURE__ */ g(
-    p,
+  return /* @__PURE__ */ p(
+    E,
     {
       ref: c,
-      style: m,
+      style: h,
       role: "separator",
       "aria-orientation": e,
       "aria-hidden": void 0,
       "data-resize-handle": "true",
       "data-direction": e,
       "data-is-dragging": i ? "true" : void 0,
-      onPointerDown: E,
+      onPointerDown: g,
       onPointerEnter: t,
       onPointerLeave: f,
-      children: a
+      children: s
     }
   );
 };
 export {
-  y as R,
+  O as R,
   H as a,
   b as u
 };
-//# sourceMappingURL=ResizeHandle-CdA_JYfN.js.map
+//# sourceMappingURL=ResizeHandle-CXjc1meV.js.map

package/dist/{ResizeHandle-CdA_JYfN.js.map → ResizeHandle-CXjc1meV.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle-CdA_JYfN.js","sources":["../src/modules/resizer/useResizeDrag.ts","../src/hooks/useElementComponentWrapper.tsx","../src/components/resizer/ResizeHandle.tsx"],"sourcesContent":["/**\n * @file Shared logic for draggable resize handles.\n */\nimport * as React from \"react\";\nimport { useDragPointerEvents } from \"../../hooks/useDocumentPointerEvents\";\nimport { useEffectEvent } from \"../../hooks/useEffectEvent\";\n\nexport type ResizeDragAxis = \"x\" | \"y\";\n\nexport type UseResizeDragOptions = {\n  /** Axis along which the drag should compute deltas */\n  axis: ResizeDragAxis;\n  /** Callback invoked with the delta value when dragging */\n  onResize?: (delta: number) => void;\n};\n\nexport type UseResizeDragResult<TElement extends HTMLElement> = {\n  /** Ref to attach to the draggable element */\n  ref: React.RefObject<TElement | null>;\n  /** Pointer down handler to initiate dragging */\n  onPointerDown: (event: React.PointerEvent<TElement>) => void;\n  /** Whether a drag interaction is currently active */\n  isDragging: boolean;\n};\n\n/**\n * Provides unified pointer handling for resize-capable UI elements.\n *\n * @param options - Configuration for the drag interaction.\n * @returns Handlers and state for wiring into a draggable element.\n */\nexport const useResizeDrag = <TElement extends HTMLElement = HTMLElement>(\n  options: UseResizeDragOptions,\n): UseResizeDragResult<TElement> => {\n  const elementRef = React.useRef<TElement | null>(null);\n  const pointerIdRef = React.useRef<number | null>(null);\n  const previousCoordinateRef = React.useRef<number>(0);\n  const [isDragging, setIsDragging] = React.useState(false);\n\n  const emitResize = useEffectEvent((delta: number) => {\n    options.onResize?.(delta);\n  });\n\n  const getCoordinate = React.useCallback(\n    (event: PointerEvent | React.PointerEvent) => {\n      return options.axis === \"x\" ? event.clientX : event.clientY;\n    },\n    [options.axis],\n  );\n\n  const handlePointerDown = React.useCallback(\n    (event: React.PointerEvent<TElement>) => {\n      event.preventDefault();\n      elementRef.current = event.currentTarget;\n      pointerIdRef.current = event.pointerId;\n      previousCoordinateRef.current = getCoordinate(event);\n      setIsDragging(true);\n    },\n    [getCoordinate],\n  );\n\n  const handlePointerMove = React.useCallback(\n    (event: PointerEvent) => {\n      const coordinate = getCoordinate(event);\n      const delta = coordinate - previousCoordinateRef.current;\n      if (delta === 0) {\n        return;\n      }\n      previousCoordinateRef.current = coordinate;\n      emitResize(delta);\n    },\n    [getCoordinate, emitResize],\n  );\n\n  const handlePointerUp = React.useCallback(() => {\n    setIsDragging(false);\n    pointerIdRef.current = null;\n  }, []);\n\n  useDragPointerEvents(elementRef as React.RefObject<HTMLElement | null>, isDragging, {\n    onMove: handlePointerMove,\n    onUp: handlePointerUp,\n    pointerId: pointerIdRef.current ?? undefined,\n    capturePointer: true,\n    preventDefaults: false,\n  });\n\n  return {\n    ref: elementRef,\n    onPointerDown: handlePointerDown,\n    isDragging,\n  };\n};\n\n","/**\n * @file Hook for building wrapper components that accept either an element or a component override.\n */\nimport * as React from \"react\";\n\ntype WrapperProps = React.HTMLAttributes<HTMLDivElement>;\n\ntype CloneableProps = WrapperProps & {\n  ref?: React.Ref<HTMLDivElement>;\n};\n\ntype UseElementComponentWrapperOptions = {\n  element?: React.ReactElement<WrapperProps>;\n  component?: React.ComponentType<WrapperProps & { ref?: React.Ref<HTMLDivElement> }>;\n};\n\ntype WrapperComponent = React.ForwardRefExoticComponent<\n  React.PropsWithChildren<WrapperProps> & React.RefAttributes<HTMLDivElement>\n>;\n\nconst createWrapperComponent = ({\n  element,\n  component: Component,\n}: UseElementComponentWrapperOptions): WrapperComponent =>\n  React.forwardRef<HTMLDivElement, React.PropsWithChildren<WrapperProps>>(({ children, ...rest }, forwardedRef) => {\n    if (element) {\n      return React.cloneElement(\n        element,\n        { ...rest, ref: forwardedRef } as CloneableProps,\n        children ?? element.props.children\n      );\n    }\n    if (Component) {\n      return (\n        <Component {...rest} ref={forwardedRef}>\n          {children}\n        </Component>\n      );\n    }\n    return (\n      <div {...rest} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  });\n\n/**\n * Memoizes a wrapper component that can render either a provided element, a provided component, or a default tag.\n * @returns Wrapper component honoring the overrides.\n */\nexport function useElementComponentWrapper({\n  element,\n  component,\n}: UseElementComponentWrapperOptions): WrapperComponent {\n  return React.useMemo(\n    () =>\n      createWrapperComponent({\n        element,\n        component,\n      }),\n    [component, element]\n  );\n}\n","/**\n * @file Resize handle component\n */\nimport * as React from \"react\";\nimport { useResizeDrag } from \"../../modules/resizer/useResizeDrag\";\nimport {\n  RESIZE_HANDLE_THICKNESS,\n  RESIZE_HANDLE_Z_INDEX,\n  COLOR_RESIZE_HANDLE_IDLE,\n  COLOR_RESIZE_HANDLE_ACTIVE,\n  COLOR_RESIZE_HANDLE_HOVER,\n} from \"../../constants/styles\";\nimport { useElementComponentWrapper } from \"../../hooks/useElementComponentWrapper\";\n\ntype ResizeHandleDirection = \"horizontal\" | \"vertical\";\n\nexport type ResizeHandleProps = {\n  /** Direction of resize */\n  direction: ResizeHandleDirection;\n  /** Callback when resize occurs */\n  onResize?: (delta: number) => void;\n  /** Custom component for the handle */\n  component?: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }>;\n  /** Custom element for the handle */\n  element?: React.ReactElement<React.HTMLAttributes<HTMLDivElement>>;\n  /** Optional children rendered inside the handle */\n  children?: React.ReactNode;\n};\n\nconst baseResizeHandleStyle: React.CSSProperties = {\n  position: \"absolute\",\n  zIndex: RESIZE_HANDLE_Z_INDEX,\n};\n\nconst sizeStylesByDirection: Record<ResizeHandleDirection, React.CSSProperties> = {\n  vertical: {\n    width: RESIZE_HANDLE_THICKNESS,\n    height: \"100%\",\n    top: 0,\n    cursor: \"col-resize\",\n  },\n  horizontal: {\n    width: \"100%\",\n    height: RESIZE_HANDLE_THICKNESS,\n    left: 0,\n    cursor: \"row-resize\",\n  },\n};\n\ntype ResizeHandleVisualState = \"idle\" | \"hovered\" | \"dragging\";\n\nconst backgroundByVisualState: Record<ResizeHandleVisualState, string> = {\n  idle: COLOR_RESIZE_HANDLE_IDLE,\n  hovered: COLOR_RESIZE_HANDLE_HOVER,\n  dragging: COLOR_RESIZE_HANDLE_ACTIVE,\n};\n\n/**\n * ResizeHandle - Draggable handle for resizing grid areas\n */\nexport const ResizeHandle: React.FC<ResizeHandleProps> = ({\n  direction,\n  onResize,\n  component: Component,\n  element,\n  children,\n}) => {\n  const axis = direction === \"vertical\" ? \"x\" : \"y\";\n  const { ref, isDragging, onPointerDown } = useResizeDrag<HTMLDivElement>({ axis, onResize });\n  const [isHovered, setIsHovered] = React.useState(false);\n  const handlePointerEnter = React.useCallback(() => {\n    setIsHovered(true);\n  }, []);\n  const handlePointerLeave = React.useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const Wrapper = useElementComponentWrapper({\n    element,\n    component: Component,\n  });\n  const visualState: ResizeHandleVisualState = React.useMemo(() => {\n    if (isDragging) {\n      return \"dragging\";\n    }\n    if (isHovered) {\n      return \"hovered\";\n    }\n    return \"idle\";\n  }, [isDragging, isHovered]);\n\n  const style = React.useMemo(() => {\n    return {\n      ...baseResizeHandleStyle,\n      ...sizeStylesByDirection[direction],\n      backgroundColor: backgroundByVisualState[visualState],\n      touchAction: \"none\",\n    };\n  }, [direction, visualState]);\n\n  return (\n    <Wrapper\n      ref={ref}\n      style={style}\n      role=\"separator\"\n      aria-orientation={direction}\n      aria-hidden={undefined}\n      data-resize-handle=\"true\"\n      data-direction={direction}\n      data-is-dragging={isDragging ? \"true\" : undefined}\n      onPointerDown={onPointerDown}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n    >\n      {children}\n    </Wrapper>\n  );\n};\n"],"names":["useResizeDrag","options","elementRef","React","pointerIdRef","previousCoordinateRef","isDragging","setIsDragging","emitResize","useEffectEvent","delta","getCoordinate","event","handlePointerDown","handlePointerMove","coordinate","handlePointerUp","useDragPointerEvents","createWrapperComponent","element","Component","children","rest","forwardedRef","useElementComponentWrapper","component","baseResizeHandleStyle","RESIZE_HANDLE_Z_INDEX","sizeStylesByDirection","RESIZE_HANDLE_THICKNESS","backgroundByVisualState","COLOR_RESIZE_HANDLE_IDLE","COLOR_RESIZE_HANDLE_HOVER","COLOR_RESIZE_HANDLE_ACTIVE","ResizeHandle","direction","onResize","axis","ref","onPointerDown","isHovered","setIsHovered","handlePointerEnter","handlePointerLeave","Wrapper","visualState","style","jsx"],"mappings":"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"}
+{"version":3,"file":"ResizeHandle-CXjc1meV.js","sources":["../src/modules/resizer/useResizeDrag.ts","../src/hooks/useElementComponentWrapper.tsx","../src/components/resizer/ResizeHandle.tsx"],"sourcesContent":["/**\n * @file Shared logic for draggable resize handles.\n */\nimport * as React from \"react\";\nimport { useDragPointerEvents } from \"../../hooks/useDocumentPointerEvents\";\nimport { useEffectEvent } from \"../../hooks/useEffectEvent\";\n\nexport type ResizeDragAxis = \"x\" | \"y\";\n\nexport type UseResizeDragOptions = {\n  /** Axis along which the drag should compute deltas */\n  axis: ResizeDragAxis;\n  /** Callback invoked with the delta value when dragging */\n  onResize?: (delta: number) => void;\n};\n\nexport type UseResizeDragResult<TElement extends HTMLElement> = {\n  /** Ref to attach to the draggable element */\n  ref: React.RefObject<TElement | null>;\n  /** Pointer down handler to initiate dragging */\n  onPointerDown: (event: React.PointerEvent<TElement>) => void;\n  /** Whether a drag interaction is currently active */\n  isDragging: boolean;\n};\n\n/**\n * Provides unified pointer handling for resize-capable UI elements.\n *\n * @param options - Configuration for the drag interaction.\n * @returns Handlers and state for wiring into a draggable element.\n */\nexport const useResizeDrag = <TElement extends HTMLElement = HTMLElement>(\n  options: UseResizeDragOptions,\n): UseResizeDragResult<TElement> => {\n  const elementRef = React.useRef<TElement | null>(null);\n  const pointerIdRef = React.useRef<number | null>(null);\n  const previousCoordinateRef = React.useRef<number>(0);\n  const [isDragging, setIsDragging] = React.useState(false);\n\n  const emitResize = useEffectEvent((delta: number) => {\n    options.onResize?.(delta);\n  });\n\n  const getCoordinate = React.useCallback(\n    (event: PointerEvent | React.PointerEvent) => {\n      return options.axis === \"x\" ? event.clientX : event.clientY;\n    },\n    [options.axis],\n  );\n\n  const handlePointerDown = React.useCallback(\n    (event: React.PointerEvent<TElement>) => {\n      event.preventDefault();\n      elementRef.current = event.currentTarget;\n      pointerIdRef.current = event.pointerId;\n      previousCoordinateRef.current = getCoordinate(event);\n      setIsDragging(true);\n    },\n    [getCoordinate],\n  );\n\n  const handlePointerMove = React.useCallback(\n    (event: PointerEvent) => {\n      const coordinate = getCoordinate(event);\n      const delta = coordinate - previousCoordinateRef.current;\n      if (delta === 0) {\n        return;\n      }\n      previousCoordinateRef.current = coordinate;\n      emitResize(delta);\n    },\n    [getCoordinate, emitResize],\n  );\n\n  const handlePointerUp = React.useCallback(() => {\n    setIsDragging(false);\n    pointerIdRef.current = null;\n  }, []);\n\n  useDragPointerEvents(elementRef as React.RefObject<HTMLElement | null>, isDragging, {\n    onMove: handlePointerMove,\n    onUp: handlePointerUp,\n    pointerId: pointerIdRef.current ?? undefined,\n    capturePointer: true,\n    preventDefaults: false,\n  });\n\n  return {\n    ref: elementRef,\n    onPointerDown: handlePointerDown,\n    isDragging,\n  };\n};\n\n","/**\n * @file Hook for building wrapper components that accept either an element or a component override.\n */\nimport * as React from \"react\";\n\ntype WrapperProps = React.HTMLAttributes<HTMLDivElement>;\n\ntype CloneableProps = WrapperProps & {\n  ref?: React.Ref<HTMLDivElement>;\n};\n\ntype UseElementComponentWrapperOptions = {\n  element?: React.ReactElement<WrapperProps>;\n  component?: React.ComponentType<WrapperProps & { ref?: React.Ref<HTMLDivElement> }>;\n};\n\ntype WrapperComponent = React.ForwardRefExoticComponent<\n  React.PropsWithChildren<WrapperProps> & React.RefAttributes<HTMLDivElement>\n>;\n\nconst createWrapperComponent = ({\n  element,\n  component: Component,\n}: UseElementComponentWrapperOptions): WrapperComponent =>\n  React.forwardRef<HTMLDivElement, React.PropsWithChildren<WrapperProps>>(({ children, ...rest }, forwardedRef) => {\n    if (element) {\n      return React.cloneElement(\n        element,\n        { ...rest, ref: forwardedRef } as CloneableProps,\n        children ?? element.props.children\n      );\n    }\n    if (Component) {\n      return (\n        <Component {...rest} ref={forwardedRef}>\n          {children}\n        </Component>\n      );\n    }\n    return (\n      <div {...rest} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  });\n\n/**\n * Memoizes a wrapper component that can render either a provided element, a provided component, or a default tag.\n * @returns Wrapper component honoring the overrides.\n */\nexport function useElementComponentWrapper({\n  element,\n  component,\n}: UseElementComponentWrapperOptions): WrapperComponent {\n  return React.useMemo(\n    () =>\n      createWrapperComponent({\n        element,\n        component,\n      }),\n    [component, element]\n  );\n}\n","/**\n * @file Resize handle component\n */\nimport * as React from \"react\";\nimport { useResizeDrag } from \"../../modules/resizer/useResizeDrag\";\nimport {\n  RESIZE_HANDLE_THICKNESS,\n  RESIZE_HANDLE_Z_INDEX,\n  COLOR_RESIZE_HANDLE_IDLE,\n  COLOR_RESIZE_HANDLE_ACTIVE,\n  COLOR_RESIZE_HANDLE_HOVER,\n} from \"../../constants/styles\";\nimport { useElementComponentWrapper } from \"../../hooks/useElementComponentWrapper\";\n\ntype ResizeHandleDirection = \"horizontal\" | \"vertical\";\n\nexport type ResizeHandleProps = {\n  /** Direction of resize */\n  direction: ResizeHandleDirection;\n  /** Callback when resize occurs */\n  onResize?: (delta: number) => void;\n  /** Custom component for the handle */\n  component?: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }>;\n  /** Custom element for the handle */\n  element?: React.ReactElement<React.HTMLAttributes<HTMLDivElement>>;\n  /** Optional children rendered inside the handle */\n  children?: React.ReactNode;\n};\n\nconst baseResizeHandleStyle: React.CSSProperties = {\n  position: \"absolute\",\n  zIndex: RESIZE_HANDLE_Z_INDEX,\n};\n\nconst sizeStylesByDirection: Record<ResizeHandleDirection, React.CSSProperties> = {\n  vertical: {\n    width: RESIZE_HANDLE_THICKNESS,\n    height: \"100%\",\n    top: 0,\n    cursor: \"col-resize\",\n  },\n  horizontal: {\n    width: \"100%\",\n    height: RESIZE_HANDLE_THICKNESS,\n    left: 0,\n    cursor: \"row-resize\",\n  },\n};\n\ntype ResizeHandleVisualState = \"idle\" | \"hovered\" | \"dragging\";\n\nconst backgroundByVisualState: Record<ResizeHandleVisualState, string> = {\n  idle: COLOR_RESIZE_HANDLE_IDLE,\n  hovered: COLOR_RESIZE_HANDLE_HOVER,\n  dragging: COLOR_RESIZE_HANDLE_ACTIVE,\n};\n\n/**\n * ResizeHandle - Draggable handle for resizing grid areas\n */\nexport const ResizeHandle: React.FC<ResizeHandleProps> = ({\n  direction,\n  onResize,\n  component: Component,\n  element,\n  children,\n}) => {\n  const axis = direction === \"vertical\" ? \"x\" : \"y\";\n  const { ref, isDragging, onPointerDown } = useResizeDrag<HTMLDivElement>({ axis, onResize });\n  const [isHovered, setIsHovered] = React.useState(false);\n  const handlePointerEnter = React.useCallback(() => {\n    setIsHovered(true);\n  }, []);\n  const handlePointerLeave = React.useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const Wrapper = useElementComponentWrapper({\n    element,\n    component: Component,\n  });\n  const visualState: ResizeHandleVisualState = React.useMemo(() => {\n    if (isDragging) {\n      return \"dragging\";\n    }\n    if (isHovered) {\n      return \"hovered\";\n    }\n    return \"idle\";\n  }, [isDragging, isHovered]);\n\n  const style = React.useMemo(() => {\n    return {\n      ...baseResizeHandleStyle,\n      ...sizeStylesByDirection[direction],\n      backgroundColor: backgroundByVisualState[visualState],\n      touchAction: \"none\",\n    };\n  }, [direction, visualState]);\n\n  return (\n    <Wrapper\n      ref={ref}\n      style={style}\n      role=\"separator\"\n      aria-orientation={direction}\n      aria-hidden={undefined}\n      data-resize-handle=\"true\"\n      data-direction={direction}\n      data-is-dragging={isDragging ? \"true\" : undefined}\n      onPointerDown={onPointerDown}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n    >\n      {children}\n    </Wrapper>\n  );\n};\n"],"names":["useResizeDrag","options","elementRef","React","pointerIdRef","previousCoordinateRef","isDragging","setIsDragging","emitResize","useEffectEvent","delta","getCoordinate","event","handlePointerDown","handlePointerMove","coordinate","handlePointerUp","useDragPointerEvents","createWrapperComponent","element","Component","children","rest","forwardedRef","useElementComponentWrapper","component","baseResizeHandleStyle","RESIZE_HANDLE_Z_INDEX","sizeStylesByDirection","RESIZE_HANDLE_THICKNESS","backgroundByVisualState","COLOR_RESIZE_HANDLE_IDLE","COLOR_RESIZE_HANDLE_HOVER","COLOR_RESIZE_HANDLE_ACTIVE","ResizeHandle","direction","onResize","axis","ref","onPointerDown","isHovered","setIsHovered","handlePointerEnter","handlePointerLeave","Wrapper","visualState","style","jsx"],"mappings":"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"}

package/dist/SwipePivotTabBar-DWrCuwEI.js

@@ -0,0 +1,411 @@
+import { jsx as E, Fragment as Q, jsxs as B } from "react/jsx-runtime";
+import * as e from "react";
+import { P as Z, r as G } from "./styles-NkjuMOVS.js";
+import { u as W } from "./useContentCache-CO3LYNmz.js";
+const tt = 1e3;
+function et({
+  isVisible: c,
+  leaveAnimation: o,
+  skipAnimation: s = !1,
+  animationTimeout: h = tt
+}) {
+  const g = e.useRef(c), [n, i] = e.useState(!1), l = e.useRef(null), R = (v, P) => !!(v || !P || P === "none"), y = (v, P) => !!(v || P);
+  e.useEffect(() => () => {
+    l.current && clearTimeout(l.current);
+  }, []), e.useEffect(() => {
+    const v = g.current;
+    g.current = c, l.current && (clearTimeout(l.current), l.current = null), v && !c ? R(s, o) ? i(!1) : (i(!0), l.current = setTimeout(() => {
+      i(!1);
+    }, h)) : !v && c && i(!1);
+  }, [c, o, s, h]);
+  const m = e.useCallback(
+    (v) => {
+      v.target === v.currentTarget && n && (l.current && (clearTimeout(l.current), l.current = null), i(!1));
+    },
+    [n]
+  ), A = y(c, n);
+  return {
+    state: {
+      shouldDisplay: A,
+      isAnimatingOut: n
+    },
+    props: {
+      onAnimationEnd: m
+    },
+    style: {
+      display: A ? "block" : "none"
+    }
+  };
+}
+const nt = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%"
+}, rt = e.memo(({ id: c, isActive: o, transitionMode: s, children: h }) => {
+  const g = et({
+    isVisible: o,
+    leaveAnimation: s === "css" ? G : void 0,
+    skipAnimation: s !== "css"
+  }), n = e.useMemo(() => {
+    const l = {
+      ...nt,
+      ...g.style,
+      pointerEvents: o ? "auto" : "none"
+    };
+    return s === "css" && (l.animation = o ? Z : G), l;
+  }, [o, s, g.style]), i = /* @__PURE__ */ E(
+    "div",
+    {
+      "data-pivot-content": c,
+      "data-active": o ? "true" : "false",
+      style: n,
+      ...g.props,
+      children: h
+    }
+  );
+  return s === "none" ? /* @__PURE__ */ E(e.Activity, { mode: o ? "visible" : "hidden", children: i }) : i;
+}), H = e.createContext(null), st = e.memo(() => {
+  const c = e.useContext(H);
+  if (!c)
+    throw new Error("PivotOutlet must be used within usePivot");
+  const [, o] = e.useReducer((n) => n + 1, 0);
+  e.useEffect(() => c.subscribe(o), [c]);
+  const { items: s, activeId: h, transitionMode: g } = c.getState();
+  return /* @__PURE__ */ E(Q, { children: s.map((n) => /* @__PURE__ */ E(rt, { id: n.id, isActive: n.id === h, transitionMode: g, children: n.cache ? c.getCachedContent(n.id) : n.content }, n.id)) });
+});
+function dt(c) {
+  const { items: o, activeId: s, defaultActiveId: h, onActiveChange: g, transitionMode: n = "css", navigationMode: i = "linear" } = c, l = s !== void 0, [R, y] = e.useState(() => {
+    if (h !== void 0)
+      return h;
+    const t = o.find((r) => r.disabled !== !0);
+    if (!t)
+      throw new Error("usePivot: No enabled items provided");
+    return t.id;
+  }), m = l ? s : R, [A, v] = e.useState(!1), P = e.useCallback(
+    (t, r) => {
+      const a = o.find((w) => w.id === t);
+      if (!a || a.disabled)
+        return;
+      const d = r?.animated ?? n === "css";
+      v(d), l || y(t), g?.(t);
+    },
+    [o, l, g, n]
+  ), L = e.useCallback(() => {
+    v(!1);
+  }, []), V = e.useCallback((t) => t === m, [m]), I = e.useMemo(
+    () => o.filter((t) => t.disabled !== !0),
+    [o]
+  ), f = e.useMemo(() => {
+    const t = I.findIndex((r) => r.id === m);
+    return t === -1 ? 0 : t;
+  }, [I, m]), p = I.length, b = e.useCallback(
+    (t) => {
+      if (t === 0)
+        return !1;
+      if (i === "loop")
+        return p >= 2;
+      const r = f + t;
+      return r >= 0 && r < p;
+    },
+    [f, p, i]
+  ), O = e.useCallback(
+    (t) => {
+      const r = f + t;
+      return i === "loop" ? (r % p + p) % p : r;
+    },
+    [f, i, p]
+  ), T = e.useCallback(
+    (t, r) => {
+      if (!b(t))
+        return;
+      const a = O(t), d = I[a];
+      d && P(d.id, r);
+    },
+    [b, O, I, P]
+  ), k = e.useCallback(
+    (t) => {
+      const r = I.findIndex((d) => d.id === t);
+      if (r === -1)
+        return null;
+      if (i === "linear") {
+        const d = r - f;
+        return Math.abs(d) > 1 ? null : d;
+      }
+      const a = ((r - f) % p + p) % p;
+      return a === 0 ? 0 : a === 1 ? 1 : p - a === 1 ? -1 : null;
+    },
+    [I, f, i, p]
+  ), _ = e.useCallback(
+    (t) => {
+      const r = I.findIndex((w) => w.id === t);
+      if (r === -1)
+        return null;
+      if (i === "linear")
+        return r - f;
+      const a = ((r - f) % p + p) % p, d = p - a;
+      return a <= d ? a : -d;
+    },
+    [I, f, i, p]
+  ), C = e.useCallback(
+    (t) => ({
+      "data-pivot-item": t,
+      "data-active": t === m ? "true" : "false",
+      "aria-selected": t === m,
+      tabIndex: t === m ? 0 : -1,
+      onClick: () => {
+        P(t);
+      }
+    }),
+    [m, P]
+  ), M = e.useMemo(
+    () => ({
+      position: "relative",
+      width: "100%",
+      height: "100%"
+    }),
+    []
+  ), S = e.useRef({
+    items: o,
+    activeId: m,
+    transitionMode: n
+  });
+  S.current = {
+    items: o,
+    activeId: m,
+    transitionMode: n
+  };
+  const F = e.useRef(/* @__PURE__ */ new Set());
+  e.useEffect(() => {
+    F.current.forEach((t) => t());
+  }, [m, n]);
+  const U = e.useCallback(
+    (t) => S.current.items.find((a) => a.id === t)?.content ?? null,
+    []
+  ), x = e.useMemo(() => o.map((t) => t.id), [o]), { getCachedContent: N } = W({
+    resolveContent: U,
+    validIds: x
+  }), D = e.useMemo(
+    () => ({
+      getState: () => S.current,
+      subscribe: (t) => (F.current.add(t), () => F.current.delete(t)),
+      getCachedContent: N
+    }),
+    [N]
+  ), u = e.useMemo(() => {
+    const t = () => /* @__PURE__ */ E(H.Provider, { value: D, children: /* @__PURE__ */ E("div", { style: M, "data-pivot-container": !0, children: /* @__PURE__ */ E(st, {}) }) });
+    return t.displayName = "PivotOutlet", t;
+  }, [D, M]);
+  return { activeId: m, setActiveId: P, isActive: V, getItemProps: C, Outlet: u, go: T, canGo: b, activeIndex: f, itemCount: p, isAnimating: A, endAnimation: L, navigationMode: i, getVirtualPosition: k, getItemPosition: _ };
+}
+const ot = 300, ct = (c, o) => c.phase === "idle" ? 0 : o === "horizontal" ? c.displacement.x : c.displacement.y, J = (c, o) => (c % o + o) % o, it = (c, o, s, h) => {
+  const g = o + c, n = (i, l) => i < 0 || i >= l;
+  return h === "linear" ? n(g, s) ? null : g : J(g, s);
+}, ut = e.memo(({
+  slotPosition: c,
+  item: o,
+  itemIndex: s,
+  isActive: h,
+  centerX: g,
+  tabWidth: n,
+  viewportWidth: i,
+  offsetPx: l,
+  axis: R,
+  renderTab: y
+}) => {
+  const m = c * n, A = g + m + l, v = A + n > 0 && A < i, P = R === "horizontal" ? "translateX" : "translateY";
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      "data-pivot-tab": o.id,
+      "data-slot": c,
+      "data-active": h ? "true" : "false",
+      style: {
+        position: "absolute",
+        left: g,
+        top: 0,
+        width: n,
+        height: "100%",
+        visibility: v ? "visible" : "hidden",
+        willChange: "transform",
+        transform: `${P}(${m + l}px)`
+      },
+      children: y(o, h, s)
+    }
+  );
+}), Y = (c) => c === 1 ? 1 : 1 - Math.pow(2, -10 * c);
+function mt({
+  items: c,
+  activeId: o,
+  activeIndex: s,
+  itemCount: h,
+  inputState: g,
+  tabWidth: n,
+  viewportWidth: i,
+  navigationMode: l = "linear",
+  axis: R = "horizontal",
+  renderTab: y,
+  animationDuration: m = ot,
+  fixedTabs: A = !1,
+  renderIndicator: v
+}) {
+  const P = (u) => u === "swiping" || u === "tracking", L = (u, t) => u !== null || t !== null, V = (u, t, r, a) => {
+    if (u === "loop") {
+      const d = J(t - r, a), w = a - d;
+      return d <= w ? d : -w;
+    }
+    return t - r;
+  }, I = ct(g, R), f = P(g.phase), [p, b] = e.useState(0), O = e.useRef(null), [T, k] = e.useState(s * n), _ = e.useRef(s * n), C = e.useRef(null), M = e.useRef(null);
+  e.useEffect(() => {
+    _.current = T;
+  }, [T]);
+  const S = e.useRef(s), F = Math.ceil(i / n / 2) + 1, U = (i - n) / 2;
+  e.useEffect(() => {
+    if (!A || !f)
+      return;
+    const u = s * n - I;
+    M.current = u, k(u);
+  }, [A, f, s, n, I]), e.useEffect(() => {
+    if (!A || f)
+      return;
+    const u = s * n, t = M.current ?? _.current;
+    if (M.current = null, Math.abs(t - u) < 1) {
+      k(u);
+      return;
+    }
+    C.current && cancelAnimationFrame(C.current.rafId);
+    const r = performance.now(), a = t, d = (w) => {
+      const j = w - r, q = Math.min(j / m, 1), z = Y(q), X = a + (u - a) * z;
+      k(X), q < 1 ? C.current = {
+        rafId: requestAnimationFrame(d)
+      } : (C.current = null, k(u));
+    };
+    C.current = {
+      rafId: requestAnimationFrame(d)
+    };
+  }, [A, f, s, n, m]), e.useEffect(() => {
+    if (A || S.current === s)
+      return;
+    const u = S.current;
+    S.current = s;
+    const r = -V(l, s, u, h) * n, a = f ? I : p;
+    if (O.current && cancelAnimationFrame(O.current.rafId), Math.abs(a - r) < 1) {
+      b(0);
+      return;
+    }
+    const d = performance.now(), w = (j) => {
+      const q = j - d, z = Math.min(q / m, 1), X = Y(z), $ = a - r, K = $ * (1 - X);
+      b(K), z < 1 ? O.current = {
+        startTime: d,
+        startOffset: $,
+        targetOffset: 0,
+        rafId: requestAnimationFrame(w)
+      } : (O.current = null, b(0));
+    };
+    O.current = {
+      startTime: d,
+      startOffset: a - r,
+      targetOffset: 0,
+      rafId: requestAnimationFrame(w)
+    };
+  }, [A, s, h, n, m, l, I, f, p]), e.useEffect(() => {
+    A && (S.current = s);
+  }, [A, s]), e.useEffect(() => () => {
+    O.current && cancelAnimationFrame(O.current.rafId), C.current && cancelAnimationFrame(C.current.rafId);
+  }, []);
+  const x = f ? I : p, N = L(O.current, C.current);
+  if (e.useEffect(() => {
+    f && O.current && (cancelAnimationFrame(O.current.rafId), O.current = null, b(0));
+  }, [f]), A) {
+    const u = c.length * n, t = (i - u) / 2;
+    return /* @__PURE__ */ B(
+      "div",
+      {
+        "data-active-id": o,
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          display: "flex",
+          justifyContent: "center"
+        },
+        children: [
+          v?.({
+            offsetPx: T,
+            tabWidth: n,
+            centerX: t,
+            isSwiping: f,
+            isAnimating: N
+          }),
+          c.map((r, a) => /* @__PURE__ */ E(
+            "div",
+            {
+              "data-pivot-tab": r.id,
+              "data-active": a === s ? "true" : "false",
+              style: {
+                position: "relative",
+                width: n,
+                height: "100%",
+                flexShrink: 0
+              },
+              children: y(r, a === s, a)
+            },
+            r.id
+          ))
+        ]
+      }
+    );
+  }
+  const D = [];
+  for (let u = -F; u <= F; u++) {
+    const t = it(u, s, h, l);
+    t !== null && D.push({
+      slotPosition: u,
+      itemIndex: t,
+      item: c[t]
+    });
+  }
+  return /* @__PURE__ */ B(
+    "div",
+    {
+      "data-active-id": o,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden"
+      },
+      children: [
+        v?.({
+          offsetPx: x,
+          tabWidth: n,
+          centerX: U,
+          isSwiping: f,
+          isAnimating: N
+        }),
+        D.map(({ slotPosition: u, itemIndex: t, item: r }) => /* @__PURE__ */ E(
+          ut,
+          {
+            slotPosition: u,
+            item: r,
+            itemIndex: t,
+            isActive: t === s,
+            centerX: U,
+            tabWidth: n,
+            viewportWidth: i,
+            offsetPx: x,
+            axis: R,
+            renderTab: y
+          },
+          u
+        ))
+      ]
+    }
+  );
+}
+export {
+  mt as S,
+  dt as u
+};
+//# sourceMappingURL=SwipePivotTabBar-DWrCuwEI.js.map