@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-TO6MZFNQ.mjs

@@ -1,186 +0,0 @@
-// src/components/Splitter.tsx
-import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
-import {
-  classNames,
-  getSplitterContainerClasses,
-  getSplitterGutterClasses,
-  getSplitterGutterCssVars,
-  getSplitterGutterHandleClasses,
-  getPaneStyle,
-  resizePanes,
-  resolveInitialPaneSizes,
-  createDocumentDragSession
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Splitter = ({
-  direction = "horizontal",
-  sizes: controlledSizes,
-  min = 0,
-  max,
-  gutterSize = 4,
-  disabled = false,
-  className,
-  style,
-  onResizeStart,
-  onResize,
-  onResizeEnd,
-  onSizesChange,
-  children
-}) => {
-  const containerRef = useRef(null);
-  const dragSessionRef = useRef(null);
-  const [paneSizes, setPaneSizes] = useState([]);
-  const [draggingIndex, setDraggingIndex] = useState(-1);
-  const draggingRef = useRef(null);
-  const cleanupDragSession = useCallback(() => {
-    dragSessionRef.current?.dispose();
-    dragSessionRef.current = null;
-  }, []);
-  useEffect(() => cleanupDragSession, [cleanupDragSession]);
-  useEffect(() => {
-    const el = containerRef.current;
-    const paneCount2 = React.Children.count(children);
-    if (paneCount2 === 0) return;
-    const containerSize = el ? direction === "horizontal" ? el.clientWidth : el.clientHeight : 0;
-    const resolved = resolveInitialPaneSizes(
-      paneCount2,
-      containerSize,
-      gutterSize,
-      controlledSizes,
-      min,
-      max
-    );
-    if (resolved) {
-      setPaneSizes(resolved);
-    }
-  }, [children, direction, gutterSize, controlledSizes, min, max]);
-  const paneCount = paneSizes.length;
-  const mins = useMemo(() => Array.from({ length: paneCount }, () => min), [paneCount, min]);
-  const maxes = useMemo(() => Array.from({ length: paneCount }, () => max), [paneCount, max]);
-  const handleMouseDown = useCallback(
-    (index, e) => {
-      if (disabled) return;
-      e.preventDefault();
-      cleanupDragSession();
-      draggingRef.current = {
-        index,
-        startPos: direction === "horizontal" ? e.clientX : e.clientY,
-        startSizes: [...paneSizes]
-      };
-      setDraggingIndex(index);
-      onResizeStart?.({ index, sizes: [...paneSizes] });
-      dragSessionRef.current = createDocumentDragSession({
-        startX: e.clientX,
-        startY: e.clientY,
-        ownerDocument: e.currentTarget.ownerDocument,
-        onMove: ({ currentX, currentY }) => {
-          const drag = draggingRef.current;
-          if (!drag) return;
-          const currentPos = direction === "horizontal" ? currentX : currentY;
-          const delta = currentPos - drag.startPos;
-          const newSizes = resizePanes(drag.startSizes, drag.index, delta, mins, maxes);
-          if (newSizes) {
-            setPaneSizes(newSizes);
-            onSizesChange?.(newSizes);
-            onResize?.({ index: drag.index, sizes: newSizes });
-          }
-        },
-        onEnd: ({ currentX, currentY }) => {
-          const drag = draggingRef.current;
-          if (drag) {
-            const currentPos = direction === "horizontal" ? currentX : currentY;
-            const delta = currentPos - drag.startPos;
-            const finalSizes = resizePanes(drag.startSizes, drag.index, delta, mins, maxes) ?? drag.startSizes;
-            onResizeEnd?.({ index: drag.index, sizes: finalSizes });
-          }
-          draggingRef.current = null;
-          dragSessionRef.current = null;
-          setDraggingIndex(-1);
-        }
-      });
-    },
-    [
-      disabled,
-      direction,
-      paneSizes,
-      mins,
-      maxes,
-      cleanupDragSession,
-      onResizeStart,
-      onResize,
-      onResizeEnd,
-      onSizesChange
-    ]
-  );
-  const handleKeyDown = useCallback(
-    (gutterIdx, e) => {
-      if (disabled) return;
-      const step = 10;
-      let delta = 0;
-      if (direction === "horizontal" && e.key === "ArrowLeft" || direction === "vertical" && e.key === "ArrowUp") {
-        delta = -step;
-      } else if (direction === "horizontal" && e.key === "ArrowRight" || direction === "vertical" && e.key === "ArrowDown") {
-        delta = step;
-      }
-      if (delta !== 0) {
-        e.preventDefault();
-        const newSizes = resizePanes(paneSizes, gutterIdx, delta, mins, maxes);
-        if (newSizes) {
-          setPaneSizes(newSizes);
-          onSizesChange?.(newSizes);
-          onResize?.({ index: gutterIdx, sizes: newSizes });
-        }
-      }
-    },
-    [disabled, direction, paneSizes, mins, maxes, onResize, onSizesChange]
-  );
-  const childArray = React.Children.toArray(children);
-  const containerClasses = useMemo(
-    () => classNames(getSplitterContainerClasses(direction, className)),
-    [direction, className]
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className: containerClasses,
-      style: { ...style, ...getSplitterGutterCssVars(gutterSize) },
-      "data-direction": direction,
-      children: childArray.map((child, i) => {
-        const size = paneSizes[i];
-        const paneStyle = size != null ? getPaneStyle(size, direction) : void 0;
-        const isDragging = draggingIndex === i;
-        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "tiger-splitter-pane relative overflow-auto",
-              style: paneStyle,
-              "data-pane-index": i,
-              children: child
-            }
-          ),
-          i < childArray.length - 1 && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: getSplitterGutterClasses(direction, !!isDragging, disabled),
-              role: "separator",
-              "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
-              tabIndex: disabled ? -1 : 0,
-              "data-gutter-index": i,
-              onMouseDown: (e) => handleMouseDown(i, e),
-              onKeyDown: (e) => handleKeyDown(i, e),
-              children: /* @__PURE__ */ jsx("div", { className: getSplitterGutterHandleClasses(direction) })
-            }
-          )
-        ] }, i);
-      })
-    }
-  );
-};
-var Splitter_default = Splitter;
-
-export {
-  Splitter,
-  Splitter_default
-};

package/dist/chunk-TULQETJ5.mjs

@@ -1,45 +0,0 @@
-// src/components/Row.tsx
-import { createContext, useMemo } from "react";
-import {
-  classNames,
-  getAlignClasses,
-  getJustifyClasses,
-  getRowGutterClasses,
-  getRowGutterStyleVars
-} from "@expcat/tigercat-core";
-import { jsx } from "react/jsx-runtime";
-var RowContext = createContext({});
-var Row = ({
-  gutter = 0,
-  align = "top",
-  justify = "start",
-  wrap = true,
-  children,
-  className,
-  style,
-  ...divProps
-}) => {
-  const rowClasses = useMemo(
-    () => classNames(
-      "flex",
-      "w-full",
-      wrap && "flex-wrap",
-      getRowGutterClasses(gutter),
-      getAlignClasses(align),
-      getJustifyClasses(justify),
-      className
-    ),
-    [gutter, wrap, align, justify, className]
-  );
-  const mergedStyle = useMemo(
-    () => ({ ...getRowGutterStyleVars(gutter), ...style }),
-    [gutter, style]
-  );
-  const contextValue = useMemo(() => ({ gutter }), [gutter]);
-  return /* @__PURE__ */ jsx(RowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: rowClasses, style: mergedStyle, ...divProps, children }) });
-};
-
-export {
-  RowContext,
-  Row
-};

package/dist/chunk-U2ZXZ2KQ.mjs

@@ -1,213 +0,0 @@
-// src/components/Resizable.tsx
-import { useState, useRef, useEffect, useCallback, useMemo } from "react";
-import {
-  classNames,
-  resizableBaseClasses,
-  getResizableHandleClasses,
-  calculateResizeDelta,
-  clampDimensions,
-  applyAspectRatio,
-  defaultResizeHandles,
-  createDocumentDragSession,
-  getResizeKeyboardDelta,
-  getResizeHandleOrientation
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Resizable = ({
-  defaultWidth,
-  defaultHeight,
-  minWidth = 0,
-  minHeight = 0,
-  maxWidth,
-  maxHeight,
-  handles = defaultResizeHandles,
-  axis = "both",
-  disabled = false,
-  lockAspectRatio = false,
-  className,
-  style,
-  onResizeStart,
-  onResize,
-  onResizeEnd,
-  children
-}) => {
-  const [width, setWidth] = useState(defaultWidth);
-  const [height, setHeight] = useState(defaultHeight);
-  const [draggingHandle, setDraggingHandle] = useState(null);
-  const dragSessionRef = useRef(null);
-  const dragRef = useRef(null);
-  const cleanupDragSession = useCallback(() => {
-    dragSessionRef.current?.dispose();
-    dragSessionRef.current = null;
-  }, []);
-  useEffect(() => cleanupDragSession, [cleanupDragSession]);
-  const handleMouseDown = useCallback(
-    (handle, e) => {
-      if (disabled) return;
-      e.preventDefault();
-      cleanupDragSession();
-      const sw = width ?? 0;
-      const sh = height ?? 0;
-      dragRef.current = {
-        handle,
-        startX: e.clientX,
-        startY: e.clientY,
-        startW: sw,
-        startH: sh
-      };
-      setDraggingHandle(handle);
-      onResizeStart?.({ width: sw, height: sh, handle, deltaX: 0, deltaY: 0 });
-      const calculateResize = (currentX, currentY) => {
-        const drag = dragRef.current;
-        if (!drag) return null;
-        const mouseDeltaX = currentX - drag.startX;
-        const mouseDeltaY = currentY - drag.startY;
-        const { deltaWidth, deltaHeight } = calculateResizeDelta(
-          drag.handle,
-          mouseDeltaX,
-          mouseDeltaY,
-          axis
-        );
-        let newW = drag.startW + deltaWidth;
-        let newH = drag.startH + deltaHeight;
-        if (lockAspectRatio) {
-          const ar = applyAspectRatio(newW, newH, drag.startW, drag.startH);
-          newW = ar.width;
-          newH = ar.height;
-        }
-        const clamped = clampDimensions(newW, newH, minWidth, minHeight, maxWidth, maxHeight);
-        return {
-          width: clamped.width,
-          height: clamped.height,
-          handle: drag.handle,
-          deltaX: clamped.width - drag.startW,
-          deltaY: clamped.height - drag.startH
-        };
-      };
-      dragSessionRef.current = createDocumentDragSession({
-        startX: e.clientX,
-        startY: e.clientY,
-        ownerDocument: e.currentTarget.ownerDocument,
-        onMove: ({ currentX, currentY }) => {
-          const next = calculateResize(currentX, currentY);
-          if (!next) return;
-          setWidth(next.width);
-          setHeight(next.height);
-          onResize?.(next);
-        },
-        onEnd: ({ currentX, currentY }) => {
-          const next = calculateResize(currentX, currentY);
-          if (next) onResizeEnd?.(next);
-          dragRef.current = null;
-          dragSessionRef.current = null;
-          setDraggingHandle(null);
-        }
-      });
-    },
-    [
-      disabled,
-      width,
-      height,
-      axis,
-      lockAspectRatio,
-      minWidth,
-      minHeight,
-      maxWidth,
-      maxHeight,
-      cleanupDragSession,
-      onResizeStart,
-      onResize,
-      onResizeEnd
-    ]
-  );
-  const handleKeyDown = useCallback(
-    (handle, e) => {
-      if (disabled) return;
-      const delta = getResizeKeyboardDelta(e.key);
-      if (!delta) return;
-      e.preventDefault();
-      const startW = width ?? 0;
-      const startH = height ?? 0;
-      const { deltaWidth, deltaHeight } = calculateResizeDelta(
-        handle,
-        delta.deltaX,
-        delta.deltaY,
-        axis
-      );
-      let newW = startW + deltaWidth;
-      let newH = startH + deltaHeight;
-      if (lockAspectRatio) {
-        const ar = applyAspectRatio(newW, newH, startW, startH);
-        newW = ar.width;
-        newH = ar.height;
-      }
-      const clamped = clampDimensions(newW, newH, minWidth, minHeight, maxWidth, maxHeight);
-      setWidth(clamped.width);
-      setHeight(clamped.height);
-      const evt = {
-        width: clamped.width,
-        height: clamped.height,
-        handle,
-        deltaX: clamped.width - startW,
-        deltaY: clamped.height - startH
-      };
-      onResize?.(evt);
-      onResizeEnd?.(evt);
-    },
-    [
-      disabled,
-      width,
-      height,
-      axis,
-      lockAspectRatio,
-      minWidth,
-      minHeight,
-      maxWidth,
-      maxHeight,
-      onResize,
-      onResizeEnd
-    ]
-  );
-  const containerClasses = useMemo(
-    () => classNames(resizableBaseClasses, "group/resizable", className),
-    [className]
-  );
-  const containerStyle = useMemo(() => {
-    const s = { ...style };
-    if (width != null) s.width = `${width}px`;
-    if (height != null) s.height = `${height}px`;
-    return s;
-  }, [width, height, style]);
-  return /* @__PURE__ */ jsxs("div", { className: containerClasses, style: containerStyle, "data-resizable": "", children: [
-    children,
-    handles.map((pos) => {
-      const usesHeight = pos === "top" || pos === "bottom";
-      const valueNow = Math.round((usesHeight ? height : width) ?? 0);
-      const valueMin = usesHeight ? minHeight : minWidth;
-      const valueMax = usesHeight ? maxHeight : maxWidth;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: getResizableHandleClasses(pos, draggingHandle === pos, disabled),
-          "data-handle": pos,
-          role: "separator",
-          "aria-label": `Resize ${pos}`,
-          "aria-orientation": getResizeHandleOrientation(pos),
-          "aria-valuenow": valueNow,
-          "aria-valuemin": valueMin,
-          "aria-valuemax": valueMax,
-          tabIndex: disabled ? -1 : 0,
-          onMouseDown: (e) => handleMouseDown(pos, e),
-          onKeyDown: (e) => handleKeyDown(pos, e)
-        },
-        pos
-      );
-    })
-  ] });
-};
-var Resizable_default = Resizable;
-
-export {
-  Resizable,
-  Resizable_default
-};