@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/dist/Resizable/ResizeHandle.d.ts

@@ -0,0 +1,84 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+import type { ResizableProps } from './useResizable';
+type PillPlacement = 'start' | 'end' | 'center' | 'auto';
+export interface ResizeHandleProps extends Omit<BaseProps<HTMLDivElement>, 'style'> {
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Layout direction — determines cursor and indicator orientation.
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Positioning mode. `'inline'` (default) puts the handle in normal
+     * flex flow between siblings. `'overlay'` uses absolute positioning
+     * so the handle sits inside a parent panel's bounds — useful when
+     * the parent has `overflow: clip`.
+     * @default 'inline'
+     */
+    position?: 'inline' | 'overlay';
+    /**
+    /**
+     * Reverse the drag direction. Use when the handle controls a panel
+     * on the end/right/bottom side.
+     * @default false
+     */
+    isReversed?: boolean;
+    /**
+     * Whether the handle is disabled (not interactive).
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Show a 1px divider line. The line IS the handle — it takes only
+     * 1px in the layout with a wider invisible hit area for interaction.
+     * Ignored in overlay mode.
+     * @default false
+     */
+    hasDivider?: boolean;
+    /**
+     * Show the pill grip indicator at rest. Set to `false` to only
+     * reveal the pill on hover/focus.
+     * @default true
+     */
+    isAlwaysVisible?: boolean;
+    /**
+     * Which side of the divider line the pill sits on.
+     * - `'auto'` — panel side by default, flips when panel is collapsed to 0px
+     * - `'start'` — left (horizontal) or top (vertical)
+     * - `'end'` — right (horizontal) or bottom (vertical)
+     * - `'center'` — centered on the divider line (original behavior)
+     * @default 'auto'
+     */
+    pillPlacement?: PillPlacement;
+    /**
+     * Accessible label for the separator.
+     * @default 'Resize handle'
+     */
+    label?: string;
+    /** Resize props from useResizable region. */
+    resizable?: ResizableProps;
+    /** Custom handle content. Overrides the default pill. */
+    children?: ReactNode;
+}
+/**
+ * Draggable resize handle placed between resizable panels. Renders as a thin
+ * divider line with a wider invisible hit area and optional pill grip indicator.
+ * Supports keyboard resizing via arrow keys and WAI-ARIA separator role.
+ *
+ * The pill element uses class `astryx-resize-handle-pill` for theme targeting.
+ *
+ * @example
+ * ```
+ * <ResizeHandle
+ *   resizable={sidebar.props}
+ *   direction="horizontal"
+ *   hasDivider />
+ * ```
+ */
+export declare function ResizeHandle({ direction, position: positionMode, isReversed, isDisabled, hasDivider, isAlwaysVisible, pillPlacement, label, resizable, children, xstyle, className, ref, ...props }: ResizeHandleProps): import("react").JSX.Element;
+export declare namespace ResizeHandle {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=ResizeHandle.d.ts.map

package/dist/Resizable/ResizeHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAMnD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AA8KzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAiPnB;yBAhQe,YAAY"}

package/dist/Resizable/ResizeHandle.js

@@ -0,0 +1,423 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ResizeHandle.tsx
+ * @input direction, isReversed, hasDivider, isAlwaysVisible, pillPlacement, ResizableProps
+ * @output Styled drag handle with WAI-ARIA separator role and keyboard support
+ * @position Between resizable panels; consumed directly by builders
+ *
+ * The handle element is 1px wide (the divider line itself), with an
+ * absolutely-positioned wider hit area for pointer interaction.
+ * Pill grip indicator can sit on either side of the divider (or centered)
+ * via pillPlacement. Default 'auto' places the pill on the panel side and
+ * flips when the panel collapses to 0px so it stays accessible.
+ *
+ * Pill placement uses a single stylex dynamic style that accepts a direction
+ * multiplier (-1 or 1). The pill element has its own themeProps
+ * ('resize-handle-pill') so themes can target size/shape directly.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
+import { mergeProps, mergeRefs } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const KEYBOARD_STEP = 10;
+const KEYBOARD_LARGE_STEP = 50;
+function resolveEffectiveSide(pillPlacement, isReversed, isCollapsed) {
+  if (pillPlacement !== 'auto') {
+    return pillPlacement;
+  }
+  const panelSide = isReversed ? 'end' : 'start';
+  if (isCollapsed) {
+    return panelSide === 'start' ? 'end' : 'start';
+  }
+  return panelSide;
+}
+
+/**
+ * Hit area bias percentage. When the pill is off-center, the grab zone
+ * shifts ~2:1 toward the pill so users can reach the visible grip easily.
+ */
+function hitAreaBias(effectiveSide) {
+  if (effectiveSide === 'center') {
+    return '50%';
+  }
+  return effectiveSide === 'start' ? '66.67%' : '33.33%';
+}
+const styles = {
+  handle: {
+    kVAEAm: "x1n2onr6",
+    kmuXW: "x2lah0s",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kWkggS: "x1m4xfpy",
+    k1ekBW: "x15406qy",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    kI3sdo: "x1a2a7pz x17nn4n9",
+    kInvED: "xh2nty3",
+    $$css: true
+  },
+  overlay: {
+    kVAEAm: "x10l6tqk",
+    kY2c9j: "xhtitgo",
+    kWkggS: "xjbqb8w",
+    $$css: true
+  },
+  overlayHorizontal: {
+    kt4wiu: "xtijo5x",
+    k87sOh: "x13vifvy",
+    krVfgx: "x1ey2m1c",
+    kzqmXN: "xkhob8h",
+    $$css: true
+  },
+  overlayVertical: {
+    krVfgx: "x1ey2m1c",
+    kbCHJM: "xu96u03",
+    kCIrl2: "x3m8u43",
+    kZKoxP: "x5kfih4",
+    $$css: true
+  },
+  horizontal: {
+    kzqmXN: "x1i1rx1s",
+    kZKoxP: "x5yr21d",
+    kkrTdU: "xicojor",
+    $$css: true
+  },
+  vertical: {
+    kZKoxP: "xjm9jq1",
+    kzqmXN: "xh8yej3",
+    kkrTdU: "xyozgr7",
+    $$css: true
+  },
+  noDividerHorizontal: {
+    kWkggS: "xjbqb8w",
+    kzqmXN: "xnalus7",
+    $$css: true
+  },
+  noDividerVertical: {
+    kWkggS: "xjbqb8w",
+    kZKoxP: "xqtp20y",
+    $$css: true
+  },
+  handleHover: {
+    kWkggS: "x1m4xfpy",
+    $$css: true
+  },
+  handleActive: {
+    kWkggS: "x7njt3n",
+    $$css: true
+  },
+  disabled: {
+    kkrTdU: "xt0e3qv",
+    kfzvcC: "x47corl",
+    $$css: true
+  },
+  hitArea: {
+    kVAEAm: "x10l6tqk",
+    kY2c9j: "x1vjfegm",
+    kFalU9: "x5ve5x3",
+    kfSwDN: "x87ps6o",
+    $$css: true
+  },
+  hitAreaHorizontal: {
+    kzqmXN: "x12xnipv",
+    k87sOh: "x13vifvy",
+    krVfgx: "x1ey2m1c",
+    kbCHJM: "x1nrll8i",
+    kkrTdU: "xicojor",
+    $$css: true
+  },
+  hitAreaVertical: {
+    kZKoxP: "x6b6gus",
+    kbCHJM: "xu96u03",
+    kCIrl2: "x3m8u43",
+    k87sOh: "xwa60dl",
+    kkrTdU: "xyozgr7",
+    $$css: true
+  },
+  pill: {
+    kVAEAm: "x10l6tqk",
+    kY2c9j: "xhtitgo",
+    kfzvcC: "x47corl",
+    kaIpWk: "xjspbzw",
+    kWkggS: "x1m4xfpy",
+    k1ekBW: "x1wbls7o",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    k87sOh: "xwa60dl",
+    kbCHJM: "x1nrll8i",
+    k3aq6I: "x11lhmoz",
+    $$css: true
+  },
+  pillHorizontal: {
+    kzqmXN: "x1g8rjiy",
+    kZKoxP: "x18to7ep",
+    $$css: true
+  },
+  pillVertical: {
+    kzqmXN: "xgc8j7m",
+    kZKoxP: "xuoj239",
+    $$css: true
+  },
+  pillHidden: {
+    kSiTet: "xg01cxk",
+    $$css: true
+  },
+  pillVisible: {
+    kSiTet: "x1hc1fzr",
+    $$css: true
+  },
+  pillHover: {
+    kSiTet: "x1hc1fzr",
+    kWkggS: "x1m4xfpy",
+    $$css: true
+  },
+  pillActive: {
+    kSiTet: "x1hc1fzr",
+    kWkggS: "x7njt3n",
+    $$css: true
+  }
+};
+
+// Dynamic styles — avoids inline style overrides.
+// Each axis gets its own function since StyleX requires static structure.
+const _temp = {
+  k3aq6I: "xsqj5wx",
+  "$$css": true
+};
+const _temp2 = {
+  k3aq6I: "xsqj5wx",
+  "$$css": true
+};
+const _temp3 = {
+  kbCHJM: "xu96u03",
+  k3aq6I: "xsqj5wx",
+  "$$css": true
+};
+const _temp4 = {
+  k87sOh: "x13vifvy",
+  k3aq6I: "xsqj5wx",
+  "$$css": true
+};
+const dynamicStyles = {
+  hitAreaBiasX: pct => [_temp, {
+    "--x-transform": `translateX(-${pct})` != null ? `translateX(-${pct})` : undefined
+  }],
+  hitAreaBiasY: pct => [_temp2, {
+    "--x-transform": `translateY(-${pct})` != null ? `translateY(-${pct})` : undefined
+  }],
+  pillOffsetX: dir => [_temp3, {
+    "--x-transform": `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)` != null ? `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)` : undefined
+  }],
+  pillOffsetY: dir => [_temp4, {
+    "--x-transform": `translate(-50%, calc(${dir} * (100% + ${spacingVars['--spacing-1']})))` != null ? `translate(-50%, calc(${dir} * (100% + ${spacingVars['--spacing-1']})))` : undefined
+  }]
+};
+/**
+ * Draggable resize handle placed between resizable panels. Renders as a thin
+ * divider line with a wider invisible hit area and optional pill grip indicator.
+ * Supports keyboard resizing via arrow keys and WAI-ARIA separator role.
+ *
+ * The pill element uses class `astryx-resize-handle-pill` for theme targeting.
+ *
+ * @example
+ * ```
+ * <ResizeHandle
+ *   resizable={sidebar.props}
+ *   direction="horizontal"
+ *   hasDivider />
+ * ```
+ */
+export function ResizeHandle({
+  direction = 'horizontal',
+  position: positionMode = 'inline',
+  isReversed = false,
+  isDisabled = false,
+  hasDivider = false,
+  isAlwaysVisible = true,
+  pillPlacement = 'auto',
+  label = 'Resize handle',
+  resizable,
+  children,
+  xstyle,
+  className,
+  ref,
+  ...props
+}) {
+  const handleRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const isHorizontal = direction === 'horizontal';
+  const isOverlay = positionMode === 'overlay';
+  const sign = isReversed ? -1 : 1;
+  const effectiveSide = resolveEffectiveSide(pillPlacement, isReversed, resizable?._isCollapsed ?? false);
+  const getRTLMultiplier = useCallback(() => {
+    const el = handleRef.current;
+    if (!el) {
+      return 1;
+    }
+    return getComputedStyle(el).direction === 'rtl' ? -1 : 1;
+  }, []);
+  const isInteracting = isHovered || isFocused;
+
+  // --- Pointer drag ---
+  const handlePointerDown = useCallback(e => {
+    if (isDisabled || !resizable) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    resizable._onResizeStart();
+    const startPos = isHorizontal ? e.clientX : e.clientY;
+    const rtl = isHorizontal ? getRTLMultiplier() : 1;
+    document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
+    document.body.style.userSelect = 'none';
+    const onMove = ev => {
+      const currentPos = isHorizontal ? ev.clientX : ev.clientY;
+      const delta = (currentPos - startPos) * rtl * sign;
+      resizable._onResizeMove(delta);
+    };
+    const onUp = () => {
+      cleanup();
+      setIsDragging(false);
+      resizable._onResizeEnd();
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+    const onCancel = () => {
+      cleanup();
+      setIsDragging(false);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+    function cleanup() {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onCancel);
+    }
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onCancel);
+  }, [isDisabled, resizable, isHorizontal, getRTLMultiplier, sign]);
+
+  // --- Keyboard ---
+  const handleKeyDown = useCallback(e => {
+    if (isDisabled || !resizable) {
+      return;
+    }
+    const step = e.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;
+    const rtl = isHorizontal ? getRTLMultiplier() : 1;
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          resizable._onResizeStart();
+          resizable._onResizeMove(step * (isHorizontal ? rtl : 1) * sign);
+          resizable._onResizeEnd();
+          break;
+        }
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          resizable._onResizeStart();
+          resizable._onResizeMove(-step * (isHorizontal ? rtl : 1) * sign);
+          resizable._onResizeEnd();
+          break;
+        }
+      case 'Home':
+        {
+          e.preventDefault();
+          resizable._onResizeStart();
+          resizable._onResizeMove(resizable._minSizePx - resizable._size);
+          resizable._onResizeEnd();
+          break;
+        }
+      case 'End':
+        {
+          e.preventDefault();
+          if (resizable._maxSizePx !== Infinity) {
+            resizable._onResizeStart();
+            resizable._onResizeMove(resizable._maxSizePx - resizable._size);
+            resizable._onResizeEnd();
+          }
+          break;
+        }
+      case 'Enter':
+        {
+          e.preventDefault();
+          if (resizable._collapsible) {
+            resizable._onResizeStart();
+            resizable._onResizeMove(resizable._isCollapsed ? resizable._minSizePx : -resizable._size);
+            resizable._onResizeEnd();
+          }
+          break;
+        }
+    }
+  }, [isDisabled, resizable, isHorizontal, getRTLMultiplier, sign]);
+
+  // --- Double-click collapse ---
+  const handleDoubleClick = useCallback(() => {
+    if (isDisabled || !resizable || !resizable._collapsible) {
+      return;
+    }
+    resizable._onResizeStart();
+    resizable._onResizeMove(resizable._isCollapsed ? resizable._minSizePx : -resizable._size);
+    resizable._onResizeEnd();
+  }, [isDisabled, resizable]);
+
+  // --- Cleanup on unmount ---
+  useEffect(() => {
+    return () => {
+      if (isDragging) {
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      }
+    };
+  }, [isDragging]);
+
+  // --- ARIA ---
+  const ariaValueNow = resizable ? resizable._size : undefined;
+  const ariaValueMin = resizable ? resizable._minSizePx : undefined;
+  const ariaValueMax = resizable && resizable._maxSizePx !== Infinity ? resizable._maxSizePx : undefined;
+  return /*#__PURE__*/_jsxs("div", {
+    ref: mergeRefs(ref, handleRef),
+    role: "separator",
+    "aria-orientation": isHorizontal ? 'vertical' : 'horizontal',
+    "aria-valuenow": ariaValueNow,
+    "aria-valuemin": ariaValueMin,
+    "aria-valuemax": ariaValueMax,
+    "aria-label": label,
+    "aria-disabled": isDisabled || undefined,
+    tabIndex: isDisabled ? -1 : 0,
+    onDoubleClick: handleDoubleClick,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    "data-resizing": isDragging || undefined,
+    ...mergeProps(themeProps('resize-handle'), stylex.props(styles.handle, isOverlay && styles.overlay, isOverlay && (isHorizontal ? styles.overlayHorizontal : styles.overlayVertical), !isOverlay && (isHorizontal ? styles.horizontal : styles.vertical), !isOverlay && !hasDivider && (isHorizontal ? styles.noDividerHorizontal : styles.noDividerVertical), !isOverlay && hasDivider && isInteracting && !isDragging && styles.handleHover, !isOverlay && hasDivider && isDragging && styles.handleActive, isDisabled && styles.disabled, xstyle), className),
+    ...props,
+    children: [/*#__PURE__*/_jsx("div", {
+      ...stylex.props(styles.hitArea, isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical, isHorizontal ? dynamicStyles.hitAreaBiasX(hitAreaBias(effectiveSide)) : dynamicStyles.hitAreaBiasY(hitAreaBias(effectiveSide)), isDisabled && styles.disabled),
+      onPointerDown: handlePointerDown,
+      onPointerEnter: () => setIsHovered(true),
+      onPointerLeave: () => {
+        if (!isDragging) {
+          setIsHovered(false);
+        }
+      },
+      onKeyDown: handleKeyDown
+    }), children ?? /*#__PURE__*/_jsx("div", {
+      ...mergeProps(themeProps('resize-handle-pill'), stylex.props(styles.pill, isHorizontal ? styles.pillHorizontal : styles.pillVertical, effectiveSide !== 'center' && (isHorizontal ? dynamicStyles.pillOffsetX(effectiveSide === 'start' ? -1 : 1) : dynamicStyles.pillOffsetY(effectiveSide === 'start' ? -1 : 1)), isAlwaysVisible ? styles.pillVisible : styles.pillHidden, isInteracting && !isDragging && styles.pillHover, isDragging && styles.pillActive))
+    })]
+  });
+}
+ResizeHandle.displayName = 'ResizeHandle';

package/dist/Resizable/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file index.ts
+ * @input Imports from useResizable and ResizeHandle
+ * @output Re-exports all public Resizable API
+ * @position Package entry point for Resizable
+ */
+export { useResizable } from './useResizable';
+export type { ResizableRegion, ResizableRegionConfig, ResizableProps, ResizableConfig, UseResizableSingleConfig, UseResizableMultiConfig, } from './useResizable';
+export { ResizeHandle } from './ResizeHandle';
+export type { ResizeHandleProps } from './ResizeHandle';
+//# sourceMappingURL=index.d.ts.map

package/dist/Resizable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Resizable/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC"}

package/dist/Resizable/index.js

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports from useResizable and ResizeHandle
+ * @output Re-exports all public Resizable API
+ * @position Package entry point for Resizable
+ */
+export { useResizable } from "./useResizable.js";
+export { ResizeHandle } from "./ResizeHandle.js";

package/dist/Resizable/useResizable.d.ts

@@ -0,0 +1,80 @@
+export interface ResizableRegionConfig {
+    /** Default size in pixels, or percentage string (e.g. '20%'). */
+    defaultSize?: number | string;
+    /** Minimum size in pixels. @default 50 */
+    minSizePx?: number;
+    /** Maximum size in pixels. @default Infinity */
+    maxSizePx?: number;
+    /** Whether this region can collapse to 0. @default false */
+    collapsible?: boolean;
+    /** Size in px at which dragging triggers collapse. @default 40 */
+    collapsedSize?: number;
+    /** Pixel values to snap to during resize. */
+    snaps?: number[];
+    /** Cascade priority — lower number shrinks first. */
+    shrinkOrder?: number;
+}
+/**
+ * Shared config shape for any component that integrates built-in resize
+ * (e.g. SideNav `resizable` prop). Provides a simplified API surface
+ * over the full ResizableRegionConfig.
+ */
+export interface ResizableConfig {
+    /** Initial width in pixels. @default 260 */
+    defaultWidth?: number;
+    /** Minimum width in pixels. @default 180 */
+    minWidth?: number;
+    /** Maximum width in pixels. @default 480 */
+    maxWidth?: number;
+    /** localStorage key for persisting width. */
+    autoSaveId?: string;
+    /** Called when the width changes (on drag end). */
+    onWidthChange?: (width: number) => void;
+}
+export interface UseResizableSingleConfig extends ResizableRegionConfig {
+    /** Unique key for localStorage persistence. */
+    autoSaveId?: string;
+    /** Called when size changes during drag. */
+    onSizeChange?: (size: number) => void;
+    /** Called when collapse state changes (via drag or programmatic). */
+    onCollapseChange?: (isCollapsed: boolean) => void;
+}
+export interface UseResizableMultiConfig {
+    /** Layout direction. @default 'horizontal' */
+    direction?: 'horizontal' | 'vertical';
+    /** Named region configurations. */
+    regions: Record<string, ResizableRegionConfig>;
+    /** Unique key for localStorage persistence. */
+    autoSaveId?: string;
+}
+export interface ResizableRegion {
+    /** Current size in pixels. */
+    size: number;
+    /** Whether the region is currently collapsed. */
+    isCollapsed: boolean;
+    /** Collapse the region (if collapsible). */
+    collapse: () => void;
+    /** Expand from collapsed state. */
+    expand: () => void;
+    /** Resize to a specific pixel value. */
+    resize: (size: number) => void;
+    /** Props to pass to a component's `resizable` prop or ResizeHandle. */
+    props: ResizableProps;
+}
+export interface ResizableProps {
+    _size: number;
+    _isCollapsed: boolean;
+    _onResizeStart: () => void;
+    _onResizeMove: (delta: number) => void;
+    _onResizeEnd: () => void;
+    _minSizePx: number;
+    _maxSizePx: number;
+    _snaps: number[];
+    _collapsedSize: number;
+    /** Whether the region supports collapsing. */
+    _collapsible: boolean;
+    _isResizableProps: true;
+}
+export declare function useResizable(config: UseResizableSingleConfig): ResizableRegion;
+export declare function useResizable(config: UseResizableMultiConfig): Record<string, ResizableRegion>;
+//# sourceMappingURL=useResizable.d.ts.map

package/dist/Resizable/useResizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizable.d.ts","sourceRoot":"","sources":["../../src/Resizable/useResizable.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,uBAAuB;IACtC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAC/C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,WAAW,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,mCAAmC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,wCAAwC;IACxC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,uEAAuE;IACvE,KAAK,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IAEd,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAE9C,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,IAAI,CAAC;CACzB;AAyQD,wBAAgB,YAAY,CAAC,MAAM,EAAE,wBAAwB,GAAG,eAAe,CAAC;AAChF,wBAAgB,YAAY,CAC1B,MAAM,EAAE,uBAAuB,GAC9B,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC"}