@tcn/ui 0.16.0 → 0.18.0

package/dist/stacks/box/box.js

@@ -1,118 +1,120 @@
-import { jsxs as h, jsx as a } from "react/jsx-runtime";
-import { clsx as O } from "clsx";
-import oo, { useRef as ro } from "react";
-import "../../utils/click_away_listener.js";
-import "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
-import { useForkRef as to } from "../../utils/hooks/use_fork_ref.js";
+import { jsxs as oo, jsx as a } from "react/jsx-runtime";
+import { clsx as ro } from "clsx";
+import to, { useRef as ao } from "react";
+import "../../utils/listeners/click_away_listener.js";
+import "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
+import { useForkRef as fo } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
-import "../../draggable.module-BgelQsuJ.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
 import { s as y } from "../../stack.module-CBV1f12Z.js";
 import { isCustomSizeProp as k } from "../utils/isCustomSizeProp.js";
-import { removeUndefinedProperties as ao } from "../utils/remove_undefined_properties.js";
+import { removeUndefinedProperties as so } from "../utils/remove_undefined_properties.js";
 import { BottomResizeHandle as eo } from "./bottom_resize_handle.js";
-import { EndResizeHandle as fo } from "./end_resize_handle.js";
-import { LeftResizeHandle as so } from "./left_resize_handle.js";
-import { RightResizeHandle as lo } from "./right_resize_handle.js";
-import { StartResizeHandle as mo } from "./start_resize_handle.js";
-import { TopResizeHandle as no } from "./top_resize_handle.js";
-const Bo = oo.forwardRef(function({
-  style: v,
-  className: P,
-  as: _ = "div",
-  children: H,
+import { EndResizeHandle as v } from "./end_resize_handle.js";
+import { StartResizeHandle as P } from "./start_resize_handle.js";
+import { TopResizeHandle as lo } from "./top_resize_handle.js";
+const Co = to.forwardRef(function({
+  style: _,
+  className: V,
+  as: b = "div",
+  children: j,
   width: r = "default",
-  minWidth: V,
-  maxWidth: b,
+  minWidth: w,
+  maxWidth: Y,
   height: t = "default",
-  minHeight: j,
-  maxHeight: w,
-  zIndex: Y,
-  padding: A,
-  paddingInline: B,
-  paddingBlock: C,
-  margin: N,
-  marginBlock: U,
-  marginInline: q,
-  marginInlineStart: D,
-  marginInlineEnd: G,
-  marginTop: I,
-  marginBottom: J,
-  overflow: K,
-  overflowX: M,
-  overflowY: Q,
-  enableResizeOnTop: s = !1,
+  minHeight: A,
+  maxHeight: B,
+  zIndex: C,
+  padding: H,
+  paddingInline: N,
+  paddingBlock: U,
+  margin: q,
+  marginBlock: D,
+  marginInline: G,
+  marginInlineStart: I,
+  marginInlineEnd: J,
+  marginTop: K,
+  marginBottom: M,
+  overflow: Q,
+  overflowX: X,
+  overflowY: Z,
+  enableResizeOnTop: e = !1,
   enableResizeOnEnd: l = !1,
   enableResizeOnBottom: m = !1,
   enableResizeOnStart: n = !1,
-  enableResizeOnLeft: c = !1,
-  enableResizeOnRight: p = !1,
-  onWidthResize: e,
+  enableResizeOnLeft: p = !1,
+  enableResizeOnRight: c = !1,
+  onWidthResize: f,
   onHeightResize: d,
-  onWidthResizeEnd: f,
+  onWidthResizeEnd: s,
   onHeightResizeEnd: u,
-  horizontalHandleProps: i,
-  verticalHandleProps: x,
-  ...X
-}, Z) {
-  const $ = _, o = ro(null), L = to(Z, o), R = l || n || c || p, T = m || s, z = R, E = T, g = z && r === "flex", S = E && t === "flex", F = !g && !S && (r === "flex" || t === "flex");
+  horizontalHandleProps: x,
+  verticalHandleProps: i,
+  ...$
+}, T) {
+  const L = b, o = ao(null), z = fo(T, o), R = l || n || p || c, E = m || e, W = R, h = E, g = W && r === "flex", S = h && t === "flex", F = !g && !S && (r === "flex" || t === "flex");
   g && (r = "100%", console.warn("You cannot have a resizable box and flex simultaneously")), S && (t = "auto", console.warn("You cannot have a resizable box and flex simultaneously"));
-  const W = {
+  const O = {
     width: k(r) ? void 0 : r,
-    minWidth: V,
-    maxWidth: b,
+    minWidth: w,
+    maxWidth: Y,
     height: k(t) ? void 0 : t,
-    minHeight: j,
-    maxHeight: w,
-    padding: A,
-    paddingInline: B,
-    paddingBlock: C,
-    margin: N,
-    marginBlock: U,
-    marginInline: q,
-    marginInlineStart: D,
-    marginInlineEnd: G,
-    marginTop: I,
-    marginBottom: J,
-    overflow: K,
-    overflowX: M,
-    overflowY: Q,
-    zIndex: Y
+    minHeight: A,
+    maxHeight: B,
+    padding: H,
+    paddingInline: N,
+    paddingBlock: U,
+    margin: q,
+    marginBlock: D,
+    marginInline: G,
+    marginInlineStart: I,
+    marginInlineEnd: J,
+    marginTop: K,
+    marginBottom: M,
+    overflow: Q,
+    overflowX: X,
+    overflowY: Z,
+    zIndex: C
   };
-  return /* @__PURE__ */ h(
-    $,
+  return /* @__PURE__ */ oo(
+    L,
     {
       "data-enabled-resize-on-start": String(n),
       "data-enabled-resize-on-end": String(l),
-      "data-enabled-resize-on-top": String(s),
+      "data-enabled-resize-on-top": String(e),
       "data-enabled-resize-on-bottom": String(m),
-      "data_enabled-resize-on-left": String(c),
-      "data_enabled-resize-on-right": String(p),
+      "data_enabled-resize-on-left": String(p),
+      "data_enabled-resize-on-right": String(c),
       "data-height": t,
       "data-width": r,
-      ref: L,
+      ref: z,
       style: {
-        ...ao(W),
-        ...v
+        ...so(O),
+        ..._
       },
-      className: O(
+      className: ro(
         y.box,
-        P,
+        V,
         F && "stack-flex",
         F && y["stack-flex"],
         "tcn-box"
       ),
-      ...X,
+      ...$,
       children: [
-        H,
-        s && /* @__PURE__ */ a(
-          no,
+        j,
+        e && /* @__PURE__ */ a(
+          lo,
           {
             onHeightResize: d,
             onHeightResizeEnd: u,
             targetRef: o,
-            handleProps: i
+            handleProps: x
           }
         ),
         m && /* @__PURE__ */ a(
@@ -121,43 +123,43 @@ const Bo = oo.forwardRef(function({
             onHeightResize: d,
             onHeightResizeEnd: u,
             targetRef: o,
-            handleProps: x
+            handleProps: i
           }
         ),
         n && /* @__PURE__ */ a(
-          mo,
+          P,
           {
-            onWidthResize: e,
-            onWidthResizeEnd: f,
+            onWidthResize: f,
+            onWidthResizeEnd: s,
             targetRef: o,
-            handleProps: i
+            handleProps: x
           }
         ),
         l && /* @__PURE__ */ a(
-          fo,
+          v,
           {
-            onWidthResize: e,
-            onWidthResizeEnd: f,
+            onWidthResize: f,
+            onWidthResizeEnd: s,
             targetRef: o,
-            handleProps: i
+            handleProps: x
           }
         ),
-        c && /* @__PURE__ */ a(
-          so,
+        p && /* @__PURE__ */ a(
+          P,
           {
-            onWidthResize: e,
-            onWidthResizeEnd: f,
+            onWidthResize: f,
+            onWidthResizeEnd: s,
             targetRef: o,
-            handleProps: x
+            handleProps: i
           }
         ),
-        p && /* @__PURE__ */ a(
-          lo,
+        c && /* @__PURE__ */ a(
+          v,
           {
-            onWidthResize: e,
-            onWidthResizeEnd: f,
+            onWidthResize: f,
+            onWidthResizeEnd: s,
             targetRef: o,
-            handleProps: x
+            handleProps: i
           }
         )
       ]
@@ -165,6 +167,6 @@ const Bo = oo.forwardRef(function({
   );
 });
 export {
-  Bo as Box
+  Co as Box
 };
 //# sourceMappingURL=box.js.map

package/dist/stacks/box/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../../src/stacks/box/box.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { CSSProperties, HTMLAttributes, useRef } from 'react';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from '../stack.module.css';\nimport { isCustomSizeProp } from '../utils/isCustomSizeProp.js';\nimport { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';\nimport { BottomResizeHandle } from './bottom_resize_handle.js';\nimport { EndResizeHandle } from './end_resize_handle.js';\nimport { HandleProps } from './handle_props.js';\nimport { LeftResizeHandle } from './left_resize_handle.js';\nimport { RightResizeHandle } from './right_resize_handle.js';\nimport { StartResizeHandle } from './start_resize_handle.js';\nimport { TopResizeHandle } from './top_resize_handle.js';\nimport type {\n  OnHeightResize,\n  OnHeightResizeEnd,\n  OnWidthResize,\n  OnWidthResizeEnd,\n} from './types.js';\n\nexport interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {\n  as?: string;\n  style?: React.CSSProperties;\n  className?: string;\n  children?: React.ReactNode;\n  width?: 'default' | 'flex' | 'auto' | string | number;\n  minWidth?: CSSProperties['minWidth'];\n  maxWidth?: CSSProperties['maxWidth'];\n  height?: 'default' | 'flex' | 'auto' | string | number;\n  minHeight?: CSSProperties['minHeight'];\n  maxHeight?: CSSProperties['maxHeight'];\n  zIndex?: number;\n  padding?: CSSProperties['padding'];\n  paddingInline?: CSSProperties['paddingInline'];\n  paddingBlock?: CSSProperties['paddingBlock'];\n  margin?: CSSProperties['margin'];\n  marginBlock?: CSSProperties['marginBlock'];\n  marginInline?: CSSProperties['marginInline'];\n  marginInlineStart?: CSSProperties['marginInlineStart'];\n  marginInlineEnd?: CSSProperties['marginInlineEnd'];\n  marginTop?: CSSProperties['marginTop'];\n  marginBottom?: CSSProperties['marginBottom'];\n  overflow?: React.CSSProperties['overflow'];\n  overflowX?: React.CSSProperties['overflowX'];\n  overflowY?: React.CSSProperties['overflowY'];\n  enableResizeOnTop?: boolean;\n  enableResizeOnEnd?: boolean;\n  enableResizeOnBottom?: boolean;\n  enableResizeOnStart?: boolean;\n  enableResizeOnLeft?: boolean;\n  enableResizeOnRight?: boolean;\n  horizontalHandleProps?: HandleProps;\n  verticalHandleProps?: HandleProps;\n  onWidthResize?: OnWidthResize;\n  onHeightResize?: OnHeightResize;\n  onWidthResizeEnd?: OnWidthResizeEnd;\n  onHeightResizeEnd?: OnHeightResizeEnd;\n}\n\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\n  {\n    style,\n    className,\n    as = 'div',\n    children,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    minHeight,\n    maxHeight,\n    zIndex,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    enableResizeOnTop = false,\n    enableResizeOnEnd = false,\n    enableResizeOnBottom = false,\n    enableResizeOnStart = false,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    onWidthResize,\n    onHeightResize,\n    onWidthResizeEnd,\n    onHeightResizeEnd,\n    horizontalHandleProps,\n    verticalHandleProps,\n    ...otherProps\n  }: BoxProps,\n  ref\n) {\n  const As = as as React.ElementType;\n  const boxRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, boxRef);\n  const hasHorizontalResize =\n    enableResizeOnEnd || enableResizeOnStart || enableResizeOnLeft || enableResizeOnRight;\n  const hasVerticalResize = enableResizeOnBottom || enableResizeOnTop;\n\n  const cannotHorizontalFlex = hasHorizontalResize;\n  const cannotVerticalFlex = hasVerticalResize;\n  const warnHorizontalFlex = cannotHorizontalFlex && width === 'flex';\n  const warnVerticalFlex = cannotVerticalFlex && height === 'flex';\n  const isFlexing =\n    !warnHorizontalFlex && !warnVerticalFlex && (width === 'flex' || height === 'flex');\n\n  if (warnHorizontalFlex) {\n    width = '100%';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  if (warnVerticalFlex) {\n    height = 'auto';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  const propStyles = {\n    width: !isCustomSizeProp(width) ? width : undefined,\n    minWidth,\n    maxWidth,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    minHeight,\n    maxHeight,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    zIndex,\n  };\n\n  return (\n    <As\n      data-enabled-resize-on-start={String(enableResizeOnStart)}\n      data-enabled-resize-on-end={String(enableResizeOnEnd)}\n      data-enabled-resize-on-top={String(enableResizeOnTop)}\n      data-enabled-resize-on-bottom={String(enableResizeOnBottom)}\n      data_enabled-resize-on-left={String(enableResizeOnLeft)}\n      data_enabled-resize-on-right={String(enableResizeOnRight)}\n      data-height={height}\n      data-width={width}\n      ref={forkedRef}\n      style={{\n        ...removeUndefinedProperties(propStyles),\n        ...style,\n      }}\n      className={clsx(\n        styles['box'],\n        className,\n        isFlexing && 'stack-flex',\n        isFlexing && styles['stack-flex'],\n        'tcn-box'\n      )}\n      {...otherProps}\n    >\n      {children}\n      {enableResizeOnTop && (\n        <TopResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnBottom && (\n        <BottomResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnStart && (\n        <StartResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnEnd && (\n        <EndResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnLeft && (\n        <LeftResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnRight && (\n        <RightResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n    </As>\n  );\n});\n"],"names":["Box","React","style","className","as","children","width","minWidth","maxWidth","height","minHeight","maxHeight","zIndex","padding","paddingInline","paddingBlock","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","overflow","overflowX","overflowY","enableResizeOnTop","enableResizeOnEnd","enableResizeOnBottom","enableResizeOnStart","enableResizeOnLeft","enableResizeOnRight","onWidthResize","onHeightResize","onWidthResizeEnd","onHeightResizeEnd","horizontalHandleProps","verticalHandleProps","otherProps","ref","As","boxRef","useRef","forkedRef","useForkRef","hasHorizontalResize","hasVerticalResize","cannotHorizontalFlex","cannotVerticalFlex","warnHorizontalFlex","warnVerticalFlex","isFlexing","propStyles","isCustomSizeProp","jsxs","removeUndefinedProperties","clsx","styles","jsx","TopResizeHandle","BottomResizeHandle","StartResizeHandle","EndResizeHandle","LeftResizeHandle","RightResizeHandle"],"mappings":"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"}
+{"version":3,"file":"box.js","sources":["../../../src/stacks/box/box.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { CSSProperties, HTMLAttributes, useRef } from 'react';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from '../stack.module.css';\nimport { isCustomSizeProp } from '../utils/isCustomSizeProp.js';\nimport { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';\nimport { BottomResizeHandle } from './bottom_resize_handle.js';\nimport { EndResizeHandle } from './end_resize_handle.js';\nimport { HandleProps } from './handle_props.js';\nimport { StartResizeHandle } from './start_resize_handle.js';\nimport { TopResizeHandle } from './top_resize_handle.js';\nimport type {\n  OnHeightResize,\n  OnHeightResizeEnd,\n  OnWidthResize,\n  OnWidthResizeEnd,\n} from './types.js';\n\nexport interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {\n  as?: string;\n  style?: React.CSSProperties;\n  className?: string;\n  children?: React.ReactNode;\n  width?: 'default' | 'flex' | 'auto' | string | number;\n  minWidth?: CSSProperties['minWidth'];\n  maxWidth?: CSSProperties['maxWidth'];\n  height?: 'default' | 'flex' | 'auto' | string | number;\n  minHeight?: CSSProperties['minHeight'];\n  maxHeight?: CSSProperties['maxHeight'];\n  zIndex?: number;\n  padding?: CSSProperties['padding'];\n  paddingInline?: CSSProperties['paddingInline'];\n  paddingBlock?: CSSProperties['paddingBlock'];\n  margin?: CSSProperties['margin'];\n  marginBlock?: CSSProperties['marginBlock'];\n  marginInline?: CSSProperties['marginInline'];\n  marginInlineStart?: CSSProperties['marginInlineStart'];\n  marginInlineEnd?: CSSProperties['marginInlineEnd'];\n  marginTop?: CSSProperties['marginTop'];\n  marginBottom?: CSSProperties['marginBottom'];\n  overflow?: React.CSSProperties['overflow'];\n  overflowX?: React.CSSProperties['overflowX'];\n  overflowY?: React.CSSProperties['overflowY'];\n  /** @deprecated Use Resizable + ResizeHandle instead */\n  enableResizeOnTop?: boolean;\n  /** @deprecated Use Resizable + ResizeHandle instead */\n  enableResizeOnEnd?: boolean;\n  /** @deprecated Use Resizable + ResizeHandle instead */\n  enableResizeOnBottom?: boolean;\n  /** @deprecated Use Resizable + ResizeHandle instead */\n  enableResizeOnStart?: boolean;\n  /** @deprecated Use Resizable + ResizeHandle instead */\n  enableResizeOnLeft?: boolean;\n  /** @deprecated Use Resizable + ResizeHandle instead */\n  enableResizeOnRight?: boolean;\n  /** @deprecated Use Resizable + ResizeHandle instead */\n  horizontalHandleProps?: HandleProps;\n  /** @deprecated Use Resizable + ResizeHandle instead */\n  verticalHandleProps?: HandleProps;\n  /** @deprecated Use Resizable + ResizeHandle instead */\n  onWidthResize?: OnWidthResize;\n  /** @deprecated Use Resizable + ResizeHandle instead */\n  onHeightResize?: OnHeightResize;\n  /** @deprecated Use Resizable + ResizeHandle instead */\n  onWidthResizeEnd?: OnWidthResizeEnd;\n  /** @deprecated Use Resizable + ResizeHandle instead */\n  onHeightResizeEnd?: OnHeightResizeEnd;\n}\n\n/** Union of deprecated resize-related prop names on BoxProps. Useful for Omit<BoxProps, DeprecatedBoxResizeProps>. */\nexport type DeprecatedBoxResizeProps =\n  | 'enableResizeOnTop'\n  | 'enableResizeOnEnd'\n  | 'enableResizeOnBottom'\n  | 'enableResizeOnStart'\n  | 'enableResizeOnLeft'\n  | 'enableResizeOnRight'\n  | 'horizontalHandleProps'\n  | 'verticalHandleProps'\n  | 'onWidthResize'\n  | 'onHeightResize'\n  | 'onWidthResizeEnd'\n  | 'onHeightResizeEnd';\n\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\n  {\n    style,\n    className,\n    as = 'div',\n    children,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    minHeight,\n    maxHeight,\n    zIndex,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    enableResizeOnTop = false,\n    enableResizeOnEnd = false,\n    enableResizeOnBottom = false,\n    enableResizeOnStart = false,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    onWidthResize,\n    onHeightResize,\n    onWidthResizeEnd,\n    onHeightResizeEnd,\n    horizontalHandleProps,\n    verticalHandleProps,\n    ...otherProps\n  }: BoxProps,\n  ref\n) {\n  const As = as as React.ElementType;\n  const boxRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, boxRef);\n  const hasHorizontalResize =\n    enableResizeOnEnd || enableResizeOnStart || enableResizeOnLeft || enableResizeOnRight;\n  const hasVerticalResize = enableResizeOnBottom || enableResizeOnTop;\n\n  const cannotHorizontalFlex = hasHorizontalResize;\n  const cannotVerticalFlex = hasVerticalResize;\n  const warnHorizontalFlex = cannotHorizontalFlex && width === 'flex';\n  const warnVerticalFlex = cannotVerticalFlex && height === 'flex';\n  const isFlexing =\n    !warnHorizontalFlex && !warnVerticalFlex && (width === 'flex' || height === 'flex');\n\n  if (warnHorizontalFlex) {\n    width = '100%';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  if (warnVerticalFlex) {\n    height = 'auto';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  const propStyles = {\n    width: !isCustomSizeProp(width) ? width : undefined,\n    minWidth,\n    maxWidth,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    minHeight,\n    maxHeight,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    zIndex,\n  };\n\n  return (\n    <As\n      data-enabled-resize-on-start={String(enableResizeOnStart)}\n      data-enabled-resize-on-end={String(enableResizeOnEnd)}\n      data-enabled-resize-on-top={String(enableResizeOnTop)}\n      data-enabled-resize-on-bottom={String(enableResizeOnBottom)}\n      data_enabled-resize-on-left={String(enableResizeOnLeft)}\n      data_enabled-resize-on-right={String(enableResizeOnRight)}\n      data-height={height}\n      data-width={width}\n      ref={forkedRef}\n      style={{\n        ...removeUndefinedProperties(propStyles),\n        ...style,\n      }}\n      className={clsx(\n        styles['box'],\n        className,\n        isFlexing && 'stack-flex',\n        isFlexing && styles['stack-flex'],\n        'tcn-box'\n      )}\n      {...otherProps}\n    >\n      {children}\n      {enableResizeOnTop && (\n        <TopResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnBottom && (\n        <BottomResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnStart && (\n        <StartResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnEnd && (\n        <EndResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnLeft && (\n        <StartResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnRight && (\n        <EndResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n    </As>\n  );\n});\n"],"names":["Box","React","style","className","as","children","width","minWidth","maxWidth","height","minHeight","maxHeight","zIndex","padding","paddingInline","paddingBlock","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","overflow","overflowX","overflowY","enableResizeOnTop","enableResizeOnEnd","enableResizeOnBottom","enableResizeOnStart","enableResizeOnLeft","enableResizeOnRight","onWidthResize","onHeightResize","onWidthResizeEnd","onHeightResizeEnd","horizontalHandleProps","verticalHandleProps","otherProps","ref","As","boxRef","useRef","forkedRef","useForkRef","hasHorizontalResize","hasVerticalResize","cannotHorizontalFlex","cannotVerticalFlex","warnHorizontalFlex","warnVerticalFlex","isFlexing","propStyles","isCustomSizeProp","jsxs","removeUndefinedProperties","clsx","styles","jsx","TopResizeHandle","BottomResizeHandle","StartResizeHandle","EndResizeHandle"],"mappings":"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"}

package/dist/stacks/box/detect_resize_bounds.d.ts

@@ -9,6 +9,7 @@ export type DetectResizeBoundsResult = {
     hitMin: boolean;
     hitMax: boolean;
     clamped: boolean;
+    clampedSize: number | null;
 };
 export declare function detectResizeBounds({ element, axis, nextSize, epsilon, }: DetectResizeBoundsParams): DetectResizeBoundsResult;
 export {};

package/dist/stacks/box/detect_resize_bounds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"detect_resize_bounds.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/detect_resize_bounds.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEzC,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAgCF,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,OAAa,GACd,EAAE,wBAAwB,GAAG,wBAAwB,CAiCrD"}
+{"version":3,"file":"detect_resize_bounds.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/detect_resize_bounds.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEzC,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,CAAC;AAkCF,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,OAAa,GACd,EAAE,wBAAwB,GAAG,wBAAwB,CAkCrD"}

package/dist/stacks/box/detect_resize_bounds.js

@@ -1,4 +1,4 @@
-const u = {
+const p = {
   width: {
     size: "width",
     min: "minWidth",
@@ -10,40 +10,42 @@ const u = {
     max: "maxHeight"
   }
 };
-function l(e) {
+function h(e) {
   const n = /^(-?\d+(?:\.\d+)?)px$/.exec(e.trim());
   return n ? Number(n[1]) : null;
 }
-function x(e, n, i) {
-  const c = l(n), t = l(i), s = c !== null && e < c, o = t !== null && e > t;
+function y(e, n, o) {
+  const i = h(n), t = h(o), c = i !== null && e < i, l = t !== null && e > t, s = c || l;
   return {
-    hitMin: s,
-    hitMax: o,
-    clamped: s || o
+    hitMin: c,
+    hitMax: l,
+    clamped: s,
+    clampedSize: s ? c ? i : t : null
   };
 }
-function z({
+function g({
   element: e,
   axis: n,
-  nextSize: i,
-  epsilon: c = 0.5
+  nextSize: o,
+  epsilon: i = 0.5
 }) {
-  const t = u[n], s = getComputedStyle(e), o = x(i, s[t.min], s[t.max]);
-  if (o.clamped) return o;
-  const d = e.style, h = d[t.size];
+  const t = p[n], c = getComputedStyle(e), l = y(o, c[t.min], c[t.max]);
+  if (l.clamped) return l;
+  const s = e.style, x = s[t.size];
   try {
-    d[t.size] = `${i}px`;
-    const r = e.getBoundingClientRect()[t.size] - i, a = r > c, m = r < -c;
+    s[t.size] = `${o}px`;
+    const a = e.getBoundingClientRect()[t.size], d = a - o, m = d > i, r = d < -i, u = m || r;
     return {
-      hitMin: a,
-      hitMax: m,
-      clamped: a || m
+      hitMin: m,
+      hitMax: r,
+      clamped: u,
+      clampedSize: u ? a : null
     };
   } finally {
-    d[t.size] = h;
+    s[t.size] = x;
   }
 }
 export {
-  z as detectResizeBounds
+  g as detectResizeBounds
 };
 //# sourceMappingURL=detect_resize_bounds.js.map

package/dist/stacks/box/detect_resize_bounds.js.map

@@ -1 +1 @@
-{"version":3,"file":"detect_resize_bounds.js","sources":["../../../src/stacks/box/detect_resize_bounds.ts"],"sourcesContent":["type ConstraintAxis = 'width' | 'height';\n\nexport type DetectResizeBoundsParams = {\n  element: HTMLElement;\n  axis: ConstraintAxis;\n  nextSize: number;\n  epsilon?: number; // Tolerance for the constraint hit detection.\n};\n\nexport type DetectResizeBoundsResult = {\n  hitMin: boolean;\n  hitMax: boolean;\n  clamped: boolean;\n};\n\nconst styleKeys = {\n  width: {\n    size: 'width',\n    min: 'minWidth',\n    max: 'maxWidth',\n  },\n  height: {\n    size: 'height',\n    min: 'minHeight',\n    max: 'maxHeight',\n  },\n} as const;\n\nfunction parsePx(value: string): number | null {\n  const match = /^(-?\\d+(?:\\.\\d+)?)px$/.exec(value.trim());\n  return match ? Number(match[1]) : null;\n}\n\nfunction detectByPixelValue(nextSize: number, min: string, max: string) {\n  const minPx = parsePx(min);\n  const maxPx = parsePx(max);\n  const hitMin = minPx !== null && nextSize < minPx;\n  const hitMax = maxPx !== null && nextSize > maxPx;\n  return {\n    hitMin,\n    hitMax,\n    clamped: hitMin || hitMax,\n  };\n}\n\nexport function detectResizeBounds({\n  element,\n  axis,\n  nextSize,\n  epsilon = 0.5,\n}: DetectResizeBoundsParams): DetectResizeBoundsResult {\n  const keys = styleKeys[axis];\n\n  const computed = getComputedStyle(element);\n  const fastPath = detectByPixelValue(nextSize, computed[keys.min], computed[keys.max]);\n  if (fastPath.clamped) return fastPath;\n\n  const style = element.style;\n  const prevInlineSize = style[keys.size]; // Save the previous size to revert later.\n\n  try {\n    // Temporarily apply the new size to the element to offload bound test to browser.\n    style[keys.size] = `${nextSize}px`;\n\n    // Force layout so browser resolves min/max/intrinsic constraints.\n    const rect = element.getBoundingClientRect();\n    const renderedSize = rect[keys.size];\n\n    const delta = renderedSize - nextSize;\n\n    const hitMin = delta > epsilon;\n    const hitMax = delta < -epsilon;\n    const clamped = hitMin || hitMax;\n\n    return {\n      hitMin,\n      hitMax,\n      clamped,\n    };\n  } finally {\n    // revert the style change\n    style[keys.size] = prevInlineSize;\n  }\n}\n"],"names":["styleKeys","parsePx","value","match","detectByPixelValue","nextSize","min","max","minPx","maxPx","hitMin","hitMax","detectResizeBounds","element","axis","epsilon","keys","computed","fastPath","style","prevInlineSize","delta"],"mappings":"AAeA,MAAMA,IAAY;AAAA,EAChB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAAA,EAEP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAET;AAEA,SAASC,EAAQC,GAA8B;AAC7C,QAAMC,IAAQ,wBAAwB,KAAKD,EAAM,MAAM;AACvD,SAAOC,IAAQ,OAAOA,EAAM,CAAC,CAAC,IAAI;AACpC;AAEA,SAASC,EAAmBC,GAAkBC,GAAaC,GAAa;AACtE,QAAMC,IAAQP,EAAQK,CAAG,GACnBG,IAAQR,EAAQM,CAAG,GACnBG,IAASF,MAAU,QAAQH,IAAWG,GACtCG,IAASF,MAAU,QAAQJ,IAAWI;AAC5C,SAAO;AAAA,IACL,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAASD,KAAUC;AAAA,EAAA;AAEvB;AAEO,SAASC,EAAmB;AAAA,EACjC,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAT;AAAA,EACA,SAAAU,IAAU;AACZ,GAAuD;AACrD,QAAMC,IAAOhB,EAAUc,CAAI,GAErBG,IAAW,iBAAiBJ,CAAO,GACnCK,IAAWd,EAAmBC,GAAUY,EAASD,EAAK,GAAG,GAAGC,EAASD,EAAK,GAAG,CAAC;AACpF,MAAIE,EAAS,QAAS,QAAOA;AAE7B,QAAMC,IAAQN,EAAQ,OAChBO,IAAiBD,EAAMH,EAAK,IAAI;AAEtC,MAAI;AAEF,IAAAG,EAAMH,EAAK,IAAI,IAAI,GAAGX,CAAQ;AAM9B,UAAMgB,IAHOR,EAAQ,sBAAA,EACKG,EAAK,IAAI,IAENX,GAEvBK,IAASW,IAAQN,GACjBJ,IAASU,IAAQ,CAACN;AAGxB,WAAO;AAAA,MACL,QAAAL;AAAA,MACA,QAAAC;AAAA,MACA,SALcD,KAAUC;AAAA,IAKxB;AAAA,EAEJ,UAAA;AAEE,IAAAQ,EAAMH,EAAK,IAAI,IAAII;AAAA,EACrB;AACF;"}
+{"version":3,"file":"detect_resize_bounds.js","sources":["../../../src/stacks/box/detect_resize_bounds.ts"],"sourcesContent":["type ConstraintAxis = 'width' | 'height';\n\nexport type DetectResizeBoundsParams = {\n  element: HTMLElement;\n  axis: ConstraintAxis;\n  nextSize: number;\n  epsilon?: number; // Tolerance for the constraint hit detection.\n};\n\nexport type DetectResizeBoundsResult = {\n  hitMin: boolean;\n  hitMax: boolean;\n  clamped: boolean;\n  clampedSize: number | null;\n};\n\nconst styleKeys = {\n  width: {\n    size: 'width',\n    min: 'minWidth',\n    max: 'maxWidth',\n  },\n  height: {\n    size: 'height',\n    min: 'minHeight',\n    max: 'maxHeight',\n  },\n} as const;\n\nfunction parsePx(value: string): number | null {\n  const match = /^(-?\\d+(?:\\.\\d+)?)px$/.exec(value.trim());\n  return match ? Number(match[1]) : null;\n}\n\nfunction detectByPixelValue(nextSize: number, min: string, max: string) {\n  const minPx = parsePx(min);\n  const maxPx = parsePx(max);\n  const hitMin = minPx !== null && nextSize < minPx;\n  const hitMax = maxPx !== null && nextSize > maxPx;\n  const clamped = hitMin || hitMax;\n  return {\n    hitMin,\n    hitMax,\n    clamped,\n    clampedSize: clamped ? (hitMin ? minPx : maxPx) : null,\n  };\n}\n\nexport function detectResizeBounds({\n  element,\n  axis,\n  nextSize,\n  epsilon = 0.5,\n}: DetectResizeBoundsParams): DetectResizeBoundsResult {\n  const keys = styleKeys[axis];\n\n  const computed = getComputedStyle(element);\n  const fastPath = detectByPixelValue(nextSize, computed[keys.min], computed[keys.max]);\n  if (fastPath.clamped) return fastPath;\n\n  const style = element.style;\n  const prevInlineSize = style[keys.size]; // Save the previous size to revert later.\n\n  try {\n    // Temporarily apply the new size to the element to offload bound test to browser.\n    style[keys.size] = `${nextSize}px`;\n\n    // Force layout so browser resolves min/max/intrinsic constraints.\n    const rect = element.getBoundingClientRect();\n    const renderedSize = rect[keys.size];\n\n    const delta = renderedSize - nextSize;\n\n    const hitMin = delta > epsilon;\n    const hitMax = delta < -epsilon;\n    const clamped = hitMin || hitMax;\n\n    return {\n      hitMin,\n      hitMax,\n      clamped,\n      clampedSize: clamped ? renderedSize : null,\n    };\n  } finally {\n    // revert the style change\n    style[keys.size] = prevInlineSize;\n  }\n}\n"],"names":["styleKeys","parsePx","value","match","detectByPixelValue","nextSize","min","max","minPx","maxPx","hitMin","hitMax","clamped","detectResizeBounds","element","axis","epsilon","keys","computed","fastPath","style","prevInlineSize","renderedSize","delta"],"mappings":"AAgBA,MAAMA,IAAY;AAAA,EAChB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAAA,EAEP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAET;AAEA,SAASC,EAAQC,GAA8B;AAC7C,QAAMC,IAAQ,wBAAwB,KAAKD,EAAM,MAAM;AACvD,SAAOC,IAAQ,OAAOA,EAAM,CAAC,CAAC,IAAI;AACpC;AAEA,SAASC,EAAmBC,GAAkBC,GAAaC,GAAa;AACtE,QAAMC,IAAQP,EAAQK,CAAG,GACnBG,IAAQR,EAAQM,CAAG,GACnBG,IAASF,MAAU,QAAQH,IAAWG,GACtCG,IAASF,MAAU,QAAQJ,IAAWI,GACtCG,IAAUF,KAAUC;AAC1B,SAAO;AAAA,IACL,QAAAD;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAaA,IAAWF,IAASF,IAAQC,IAAS;AAAA,EAAA;AAEtD;AAEO,SAASI,EAAmB;AAAA,EACjC,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAV;AAAA,EACA,SAAAW,IAAU;AACZ,GAAuD;AACrD,QAAMC,IAAOjB,EAAUe,CAAI,GAErBG,IAAW,iBAAiBJ,CAAO,GACnCK,IAAWf,EAAmBC,GAAUa,EAASD,EAAK,GAAG,GAAGC,EAASD,EAAK,GAAG,CAAC;AACpF,MAAIE,EAAS,QAAS,QAAOA;AAE7B,QAAMC,IAAQN,EAAQ,OAChBO,IAAiBD,EAAMH,EAAK,IAAI;AAEtC,MAAI;AAEF,IAAAG,EAAMH,EAAK,IAAI,IAAI,GAAGZ,CAAQ;AAI9B,UAAMiB,IADOR,EAAQ,sBAAA,EACKG,EAAK,IAAI,GAE7BM,IAAQD,IAAejB,GAEvBK,IAASa,IAAQP,GACjBL,IAASY,IAAQ,CAACP,GAClBJ,IAAUF,KAAUC;AAE1B,WAAO;AAAA,MACL,QAAAD;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,aAAaA,IAAUU,IAAe;AAAA,IAAA;AAAA,EAE1C,UAAA;AAEE,IAAAF,EAAMH,EAAK,IAAI,IAAII;AAAA,EACrB;AACF;"}

package/dist/stacks/box/end_resize_handle.js

@@ -1,4 +1,4 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { clsx as l } from "clsx";
 import { createHorizontalResizeHandler as c } from "./resize_handlers.js";
 import '../../end_resize_handle.css';const f = "_end-resize-handle_1c5e6ba", z = { "end-resize-handle": f };
@@ -12,18 +12,18 @@ function x({
     n,
     s,
     t,
-    "right"
-  ), o = e?.offset ? e.offset : -8, r = {
+    "end"
+  ), o = e?.offset ? e.offset : -8, d = {
     ...e?.style,
     "--resize-offset": `${o}px`,
     width: e?.size || "16px"
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ r(
     "div",
     {
       className: l(z["end-resize-handle"], "tcn-end-resize-handle"),
       onMouseDown: i,
-      style: r,
+      style: d,
       children: e?.children
     }
   );

package/dist/stacks/box/end_resize_handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"end_resize_handle.js","sources":["../../../src/stacks/box/end_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport styles from './end_resize_handle.module.css';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport type { HorizontalResizeHandleProps } from './types.js';\n\nexport type EndResizeHandleProps = HorizontalResizeHandleProps;\n\nexport function EndResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: EndResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd,\n    'right'\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const endResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['end-resize-handle'], 'tcn-end-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={endResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["EndResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","endResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAOO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAAyB;AACvB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA4B;AAAA,IAChC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,MACpE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
+{"version":3,"file":"end_resize_handle.js","sources":["../../../src/stacks/box/end_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport styles from './end_resize_handle.module.css';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport type { HorizontalResizeHandleProps } from './types.js';\n\nexport type EndResizeHandleProps = HorizontalResizeHandleProps;\n\nexport function EndResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: EndResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd,\n    'end'\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const endResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['end-resize-handle'], 'tcn-end-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={endResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["EndResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","endResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAOO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAAyB;AACvB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA4B;AAAA,IAChC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,MACpE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

package/dist/stacks/box/resize_handlers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resize_handlers.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/resize_handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AAYjB,wBAAgB,6BAA6B,CAC3C,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACrD,aAAa,CAAC,EAAE,aAAa,EAC7B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,EACrE,MAAM,GAAE,iBAA2B,EACnC,MAAM,UAAQ,EACd,gBAAgB,UAAQ,IAEc,OAAO,KAAK,CAAC,UAAU,UAgE9D;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACrD,cAAc,CAAC,EAAE,cAAc,EAC/B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,KAAK,IAAI,EACxE,MAAM,UAAQ,EACd,MAAM,GAAE,kBAA6B,IAGD,OAAO,KAAK,CAAC,UAAU,UA2D5D"}
+{"version":3,"file":"resize_handlers.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/resize_handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AAYjB,wBAAgB,6BAA6B,CAC3C,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACrD,aAAa,CAAC,EAAE,aAAa,EAC7B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,EACrE,MAAM,GAAE,iBAAyB,EACjC,MAAM,UAAQ,EACd,gBAAgB,UAAQ,IAEc,OAAO,KAAK,CAAC,UAAU,UAgE9D;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACrD,cAAc,CAAC,EAAE,cAAc,EAC/B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,KAAK,IAAI,EACxE,MAAM,UAAQ,EACd,MAAM,GAAE,kBAA6B,IAGD,OAAO,KAAK,CAAC,UAAU,UA2D5D"}

package/dist/stacks/box/resize_handlers.js

@@ -3,16 +3,16 @@ function w() {
   const n = window.document.createElement("div");
   return n.style.position = "absolute", n.style.inset = "-500px", n.style.backgroundColor = "transparent", n.style.pointerEvents = "auto", n;
 }
-function C(n, v, f, p = "right", c = !1, b = !1) {
+function C(n, v, f, p = "end", c = !1, b = !1) {
   return function(t) {
     const e = n.current;
     if (e == null) return;
-    const a = w();
-    e.appendChild(a);
-    const d = (window.getComputedStyle(e).direction === "rtl" && !b ? !c : c) ? -1 : 1, g = t.clientX, u = e.getBoundingClientRect();
+    const d = w();
+    e.appendChild(d);
+    const a = (window.getComputedStyle(e).direction === "rtl" && !b ? !c : c) ? -1 : 1, g = t.clientX, u = e.getBoundingClientRect();
     let s = u.width;
     const r = (i) => {
-      const h = d * (i.clientX - g), m = u.width + h;
+      const h = a * (i.clientX - g), m = u.width + h;
       if (D({
         element: e,
         axis: "width",
@@ -23,7 +23,7 @@ function C(n, v, f, p = "right", c = !1, b = !1) {
     }, l = (i) => {
       i.buttons === 0 && o();
     }, o = () => {
-      e.removeChild(a), document.body.removeEventListener("mousemove", r), document.body.removeEventListener("mouseup", o), document.body.removeEventListener("mouseenter", l), t.stopPropagation(), t.preventDefault(), f?.(s, p);
+      e.removeChild(d), document.body.removeEventListener("mousemove", r), document.body.removeEventListener("mouseup", o), document.body.removeEventListener("mouseenter", l), t.stopPropagation(), t.preventDefault(), f?.(s, p);
     };
     document.body.addEventListener("mousemove", r), document.body.addEventListener("mouseup", o), document.body.addEventListener("mouseenter", l), t.stopPropagation(), t.preventDefault();
   };
@@ -33,10 +33,10 @@ function P(n, v, f, p = !1, c = "bottom") {
   return function(t) {
     const e = n.current;
     if (e == null) return;
-    const a = w();
-    e.appendChild(a);
+    const d = w();
+    e.appendChild(d);
     const E = t.clientY, y = e.getBoundingClientRect();
-    let d = y.height;
+    let a = y.height;
     const g = (r) => {
       const l = b * (r.clientY - E), o = y.height + l;
       if (D({
@@ -44,12 +44,12 @@ function P(n, v, f, p = !1, c = "bottom") {
         axis: "height",
         nextSize: o
       }).clamped) return;
-      const h = o - d;
-      d = o, e.style.height = `${o}px`, v?.({ height: o, origin: c, totalDelta: l, currentDelta: h }), r.stopPropagation(), r.preventDefault();
+      const h = o - a;
+      a = o, e.style.height = `${o}px`, v?.({ height: o, origin: c, totalDelta: l, currentDelta: h }), r.stopPropagation(), r.preventDefault();
     }, u = (r) => {
       r.buttons === 0 && s();
     }, s = () => {
-      e.removeChild(a), document.body.removeEventListener("mousemove", g), document.body.removeEventListener("mouseup", s), document.body.removeEventListener("mouseenter", u), t.stopPropagation(), t.preventDefault(), f?.(d, c);
+      e.removeChild(d), document.body.removeEventListener("mousemove", g), document.body.removeEventListener("mouseup", s), document.body.removeEventListener("mouseenter", u), t.stopPropagation(), t.preventDefault(), f?.(a, c);
     };
     document.body.addEventListener("mousemove", g), document.body.addEventListener("mouseup", s), document.body.addEventListener("mouseenter", u), t.stopPropagation(), t.preventDefault();
   };

package/dist/stacks/box/resize_handlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize_handlers.js","sources":["../../../src/stacks/box/resize_handlers.ts"],"sourcesContent":["import {\n  OnWidthResize,\n  type HeightResizeOrigin,\n  type OnHeightResize,\n  type WidthResizeOrigin,\n} from './types';\nimport { detectResizeBounds } from './detect_resize_bounds.js';\n\nfunction createVeil() {\n  const veil = window.document.createElement('div');\n  veil.style.position = 'absolute';\n  veil.style.inset = '-500px';\n  veil.style.backgroundColor = 'transparent';\n  veil.style.pointerEvents = 'auto';\n  return veil;\n}\n\nexport function createHorizontalResizeHandler(\n  targetRef: React.MutableRefObject<HTMLElement | null>,\n  onWidthResize?: OnWidthResize,\n  onWidthResizeEnd?: (width: number, origin: WidthResizeOrigin) => void,\n  origin: WidthResizeOrigin = 'right',\n  invert = false,\n  disableDirection = false\n) {\n  return function startHorizontalResize(event: React.MouseEvent) {\n    const box = targetRef.current;\n\n    if (box == null) return;\n\n    const veil = createVeil();\n    box.appendChild(veil);\n\n    const languageDirection = window.getComputedStyle(box).direction;\n    const finalInvert =\n      languageDirection === 'rtl' && !disableDirection ? !invert : invert;\n    const direction = finalInvert ? -1 : 1;\n\n    const startX = event.clientX;\n    const startRect = box.getBoundingClientRect();\n    let width = startRect.width;\n\n    const drag = (event: MouseEvent) => {\n      const totalDelta = direction * (event.clientX - startX);\n      const newWidth = startRect.width + totalDelta;\n\n      const result = detectResizeBounds({\n        element: box,\n        axis: 'width',\n        nextSize: newWidth,\n      });\n\n      if (result.clamped) return;\n\n      const currentDelta = newWidth - width;\n\n      // apply the new width\n      width = newWidth;\n      box.style.width = `${newWidth}px`;\n\n      onWidthResize?.({ width: newWidth, origin, totalDelta, currentDelta });\n      event.stopPropagation();\n      event.preventDefault();\n    };\n\n    const mouseEnter = (event: MouseEvent) => {\n      if (event.buttons === 0) {\n        endDrag();\n      }\n    };\n\n    const endDrag = () => {\n      box.removeChild(veil);\n\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseenter', mouseEnter);\n      event.stopPropagation();\n      event.preventDefault();\n\n      onWidthResizeEnd?.(width, origin);\n    };\n\n    document.body.addEventListener('mousemove', drag);\n    document.body.addEventListener('mouseup', endDrag);\n    document.body.addEventListener('mouseenter', mouseEnter);\n    event.stopPropagation();\n    event.preventDefault();\n  };\n}\n\nexport function createVerticalResizeHandler(\n  targetRef: React.MutableRefObject<HTMLElement | null>,\n  onHeightResize?: OnHeightResize,\n  onHeightResizeEnd?: (height: number, origin: HeightResizeOrigin) => void,\n  invert = false,\n  origin: HeightResizeOrigin = 'bottom'\n) {\n  const direction = invert ? -1 : 1;\n  return function startVerticalResize(event: React.MouseEvent) {\n    const box = targetRef.current;\n\n    if (box == null) return;\n\n    const veil = createVeil();\n    box.appendChild(veil);\n\n    const startY = event.clientY;\n    const startRect = box.getBoundingClientRect();\n    let height = startRect.height;\n\n    const drag = (event: MouseEvent) => {\n      const totalDelta = direction * (event.clientY - startY);\n      const newHeight = startRect.height + totalDelta;\n\n      const result = detectResizeBounds({\n        element: box,\n        axis: 'height',\n        nextSize: newHeight,\n      });\n\n      if (result.clamped) return;\n\n      const currentDelta = newHeight - height;\n\n      // apply the new height\n      height = newHeight;\n      box.style.height = `${newHeight}px`;\n\n      onHeightResize?.({ height: newHeight, origin, totalDelta, currentDelta });\n      event.stopPropagation();\n      event.preventDefault();\n    };\n\n    const mouseEnter = (event: MouseEvent) => {\n      if (event.buttons === 0) {\n        endDrag();\n      }\n    };\n\n    const endDrag = () => {\n      box.removeChild(veil);\n\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseenter', mouseEnter);\n      event.stopPropagation();\n      event.preventDefault();\n\n      onHeightResizeEnd?.(height, origin);\n    };\n\n    document.body.addEventListener('mousemove', drag);\n    document.body.addEventListener('mouseup', endDrag);\n    document.body.addEventListener('mouseenter', mouseEnter);\n    event.stopPropagation();\n    event.preventDefault();\n  };\n}\n"],"names":["createVeil","veil","createHorizontalResizeHandler","targetRef","onWidthResize","onWidthResizeEnd","origin","invert","disableDirection","event","box","direction","startX","startRect","width","drag","totalDelta","newWidth","detectResizeBounds","currentDelta","mouseEnter","endDrag","createVerticalResizeHandler","onHeightResize","onHeightResizeEnd","startY","height","newHeight"],"mappings":"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"}
+{"version":3,"file":"resize_handlers.js","sources":["../../../src/stacks/box/resize_handlers.ts"],"sourcesContent":["import {\n  OnWidthResize,\n  type HeightResizeOrigin,\n  type OnHeightResize,\n  type WidthResizeOrigin,\n} from './types';\nimport { detectResizeBounds } from './detect_resize_bounds.js';\n\nfunction createVeil() {\n  const veil = window.document.createElement('div');\n  veil.style.position = 'absolute';\n  veil.style.inset = '-500px';\n  veil.style.backgroundColor = 'transparent';\n  veil.style.pointerEvents = 'auto';\n  return veil;\n}\n\nexport function createHorizontalResizeHandler(\n  targetRef: React.MutableRefObject<HTMLElement | null>,\n  onWidthResize?: OnWidthResize,\n  onWidthResizeEnd?: (width: number, origin: WidthResizeOrigin) => void,\n  origin: WidthResizeOrigin = 'end',\n  invert = false,\n  disableDirection = false\n) {\n  return function startHorizontalResize(event: React.MouseEvent) {\n    const box = targetRef.current;\n\n    if (box == null) return;\n\n    const veil = createVeil();\n    box.appendChild(veil);\n\n    const languageDirection = window.getComputedStyle(box).direction;\n    const finalInvert =\n      languageDirection === 'rtl' && !disableDirection ? !invert : invert;\n    const direction = finalInvert ? -1 : 1;\n\n    const startX = event.clientX;\n    const startRect = box.getBoundingClientRect();\n    let width = startRect.width;\n\n    const drag = (event: MouseEvent) => {\n      const totalDelta = direction * (event.clientX - startX);\n      const newWidth = startRect.width + totalDelta;\n\n      const result = detectResizeBounds({\n        element: box,\n        axis: 'width',\n        nextSize: newWidth,\n      });\n\n      if (result.clamped) return;\n\n      const currentDelta = newWidth - width;\n\n      // apply the new width\n      width = newWidth;\n      box.style.width = `${newWidth}px`;\n\n      onWidthResize?.({ width: newWidth, origin, totalDelta, currentDelta });\n      event.stopPropagation();\n      event.preventDefault();\n    };\n\n    const mouseEnter = (event: MouseEvent) => {\n      if (event.buttons === 0) {\n        endDrag();\n      }\n    };\n\n    const endDrag = () => {\n      box.removeChild(veil);\n\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseenter', mouseEnter);\n      event.stopPropagation();\n      event.preventDefault();\n\n      onWidthResizeEnd?.(width, origin);\n    };\n\n    document.body.addEventListener('mousemove', drag);\n    document.body.addEventListener('mouseup', endDrag);\n    document.body.addEventListener('mouseenter', mouseEnter);\n    event.stopPropagation();\n    event.preventDefault();\n  };\n}\n\nexport function createVerticalResizeHandler(\n  targetRef: React.MutableRefObject<HTMLElement | null>,\n  onHeightResize?: OnHeightResize,\n  onHeightResizeEnd?: (height: number, origin: HeightResizeOrigin) => void,\n  invert = false,\n  origin: HeightResizeOrigin = 'bottom'\n) {\n  const direction = invert ? -1 : 1;\n  return function startVerticalResize(event: React.MouseEvent) {\n    const box = targetRef.current;\n\n    if (box == null) return;\n\n    const veil = createVeil();\n    box.appendChild(veil);\n\n    const startY = event.clientY;\n    const startRect = box.getBoundingClientRect();\n    let height = startRect.height;\n\n    const drag = (event: MouseEvent) => {\n      const totalDelta = direction * (event.clientY - startY);\n      const newHeight = startRect.height + totalDelta;\n\n      const result = detectResizeBounds({\n        element: box,\n        axis: 'height',\n        nextSize: newHeight,\n      });\n\n      if (result.clamped) return;\n\n      const currentDelta = newHeight - height;\n\n      // apply the new height\n      height = newHeight;\n      box.style.height = `${newHeight}px`;\n\n      onHeightResize?.({ height: newHeight, origin, totalDelta, currentDelta });\n      event.stopPropagation();\n      event.preventDefault();\n    };\n\n    const mouseEnter = (event: MouseEvent) => {\n      if (event.buttons === 0) {\n        endDrag();\n      }\n    };\n\n    const endDrag = () => {\n      box.removeChild(veil);\n\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseenter', mouseEnter);\n      event.stopPropagation();\n      event.preventDefault();\n\n      onHeightResizeEnd?.(height, origin);\n    };\n\n    document.body.addEventListener('mousemove', drag);\n    document.body.addEventListener('mouseup', endDrag);\n    document.body.addEventListener('mouseenter', mouseEnter);\n    event.stopPropagation();\n    event.preventDefault();\n  };\n}\n"],"names":["createVeil","veil","createHorizontalResizeHandler","targetRef","onWidthResize","onWidthResizeEnd","origin","invert","disableDirection","event","box","direction","startX","startRect","width","drag","totalDelta","newWidth","detectResizeBounds","currentDelta","mouseEnter","endDrag","createVerticalResizeHandler","onHeightResize","onHeightResizeEnd","startY","height","newHeight"],"mappings":"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"}

package/dist/stacks/box/start_resize_handle.js

@@ -1,22 +1,22 @@
 import { jsx as o } from "react/jsx-runtime";
 import { clsx as l } from "clsx";
-import { createHorizontalResizeHandler as f } from "./resize_handlers.js";
-import '../../start_resize_handle.css';const c = "_start-resize-handle_22a3d5a", z = { "start-resize-handle": c };
+import { createHorizontalResizeHandler as c } from "./resize_handlers.js";
+import '../../start_resize_handle.css';const f = "_start-resize-handle_22a3d5a", z = { "start-resize-handle": f };
 function x({
   targetRef: t,
   handleProps: e,
   onWidthResize: s,
   onWidthResizeEnd: r
 }) {
-  const i = f(
+  const i = c(
     t,
     s,
     r,
-    "left",
+    "start",
     !0
-  ), n = e?.offset ? e.offset : -8, a = {
+  ), a = e?.offset ? e.offset : -8, n = {
     ...e?.style,
-    "--resize-offset": `${n}px`,
+    "--resize-offset": `${a}px`,
     width: e?.size || "16px"
   };
   return /* @__PURE__ */ o(
@@ -24,7 +24,7 @@ function x({
     {
       className: l(z["start-resize-handle"], "tcn-start-resize-handle"),
       onMouseDown: i,
-      style: a,
+      style: n,
       children: e?.children
     }
   );