@tcn/ui 0.16.0 → 0.18.0

package/src/utils/decorators/resizable/resize_handle.module.css

@@ -0,0 +1,106 @@
+@layer tcn-system {
+  .resize-handle {
+    position: absolute;
+    z-index: 1;
+    pointer-events: auto;
+  }
+
+  /* Horizontal edges: start, end */
+  :where(.resize-handle[data-position="start"]),
+  :where(.resize-handle[data-position="end"]) {
+    top: 0;
+    height: 100%;
+    width: 16px;
+    cursor: ew-resize;
+  }
+
+  :where(.resize-handle[data-position="start"]:dir(ltr)) {
+    left: var(--resize-offset, 0px);
+  }
+
+  :where(.resize-handle[data-position="start"]:dir(rtl)) {
+    right: var(--resize-offset, 0px);
+  }
+
+  :where(.resize-handle[data-position="end"]:dir(ltr)) {
+    right: var(--resize-offset, 0px);
+  }
+
+  :where(.resize-handle[data-position="end"]:dir(rtl)) {
+    left: var(--resize-offset, 0px);
+  }
+
+  /* Vertical edges: top, bottom */
+  :where(.resize-handle[data-position="top"]),
+  :where(.resize-handle[data-position="bottom"]) {
+    left: 0;
+    width: 100%;
+    height: 16px;
+    cursor: ns-resize;
+  }
+
+  :where(.resize-handle[data-position="top"]) {
+    top: var(--resize-offset, 0px);
+  }
+
+  :where(.resize-handle[data-position="bottom"]) {
+    bottom: var(--resize-offset, 0px);
+  }
+
+  /* Corners: small square at intersection */
+  :where(.resize-handle[data-position="top-start"]),
+  :where(.resize-handle[data-position="top-end"]),
+  :where(.resize-handle[data-position="bottom-start"]),
+  :where(.resize-handle[data-position="bottom-end"]) {
+    width: 16px;
+    height: 16px;
+  }
+
+  :where(.resize-handle[data-position="top-start"]:dir(ltr)) {
+    top: var(--resize-offset, 0px);
+    left: var(--resize-offset, 0px);
+    cursor: nwse-resize;
+  }
+
+  :where(.resize-handle[data-position="top-start"]:dir(rtl)) {
+    top: var(--resize-offset, 0px);
+    right: var(--resize-offset, 0px);
+    cursor: nesw-resize;
+  }
+
+  :where(.resize-handle[data-position="top-end"]:dir(ltr)) {
+    top: var(--resize-offset, 0px);
+    right: var(--resize-offset, 0px);
+    cursor: nesw-resize;
+  }
+
+  :where(.resize-handle[data-position="top-end"]:dir(rtl)) {
+    top: var(--resize-offset, 0px);
+    left: var(--resize-offset, 0px);
+    cursor: nwse-resize;
+  }
+
+  :where(.resize-handle[data-position="bottom-start"]:dir(ltr)) {
+    bottom: var(--resize-offset, 0px);
+    left: var(--resize-offset, 0px);
+    cursor: nesw-resize;
+  }
+
+  :where(.resize-handle[data-position="bottom-start"]:dir(rtl)) {
+    bottom: var(--resize-offset, 0px);
+    right: var(--resize-offset, 0px);
+    cursor: nwse-resize;
+  }
+
+  :where(.resize-handle[data-position="bottom-end"]:dir(ltr)) {
+    bottom: var(--resize-offset, 0px);
+    right: var(--resize-offset, 0px);
+    cursor: nwse-resize;
+  }
+
+  :where(.resize-handle[data-position="bottom-end"]:dir(rtl)) {
+    bottom: var(--resize-offset, 0px);
+    left: var(--resize-offset, 0px);
+    cursor: nesw-resize;
+  }
+}

package/src/utils/decorators/resizable/resize_handle.tsx

@@ -0,0 +1,165 @@
+import React, { forwardRef, useMemo } from 'react';
+import { clsx } from 'clsx';
+import { useResizable } from './context.js';
+import { getHandleConfig } from './handle_config.js';
+import { ResizeHandleStrategy } from './resize_strategy.js';
+import { detectResizeBounds } from '../../../stacks/box/detect_resize_bounds.js';
+import type { ResizeHandlePosition } from './types.js';
+import styles from './resize_handle.module.css';
+
+export interface ResizeHandleProps extends React.HTMLAttributes<HTMLDivElement> {
+  position: ResizeHandlePosition;
+}
+
+export const ResizeHandle = forwardRef<HTMLDivElement, ResizeHandleProps>(
+  function ResizeHandle({ position, className, ...rest }, ref) {
+    const {
+      targetRef,
+      onWidthResize,
+      onWidthResizeEnd,
+      onHeightResize,
+      onHeightResizeEnd,
+    } = useResizable();
+
+    const config = getHandleConfig(position);
+    const axis =
+      config.horizontal && config.vertical
+        ? 'corner'
+        : config.horizontal
+          ? 'horizontal'
+          : 'vertical';
+
+    const strategy = useMemo(() => new ResizeHandleStrategy(position), [position]);
+
+    const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+      const target = targetRef.current;
+      if (target == null) return;
+
+      const rect = target.getBoundingClientRect();
+      strategy.startResize({
+        rectangle: {
+          dimensions: {
+            width: rect.width,
+            height: rect.height,
+          },
+          position: {
+            x: event.clientX,
+            y: event.clientY,
+          },
+        },
+        languageDirection: window.getComputedStyle(target).direction,
+      });
+
+      let frameId = 0;
+
+      const drag = (e: MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        cancelAnimationFrame(frameId);
+        frameId = requestAnimationFrame(() => {
+          const result = strategy.resize({ x: e.clientX, y: e.clientY });
+
+          let appliedWidth = rect.width;
+          let appliedHeight = rect.height;
+
+          if (result.horizontal) {
+            const bounds = detectResizeBounds({
+              element: target,
+              axis: 'width',
+              nextSize: result.horizontal.newSize,
+            });
+            if (!bounds.clamped) {
+              appliedWidth = result.horizontal.newSize;
+              target.style.width = `${result.horizontal.newSize}px`;
+              onWidthResize?.({
+                width: result.horizontal.newSize,
+                origin: result.horizontal.origin,
+                totalDelta: result.horizontal.totalDelta,
+                currentDelta: result.horizontal.currentDelta,
+              });
+            } else if (
+              bounds.clampedSize !== null &&
+              bounds.clampedSize !== appliedWidth
+            ) {
+              appliedWidth = bounds.clampedSize;
+              target.style.width = `${bounds.clampedSize}px`;
+              onWidthResize?.({
+                width: bounds.clampedSize,
+                origin: result.horizontal.origin,
+                totalDelta: result.horizontal.totalDelta,
+                currentDelta: result.horizontal.currentDelta,
+              });
+            }
+          }
+
+          if (result.vertical) {
+            const bounds = detectResizeBounds({
+              element: target,
+              axis: 'height',
+              nextSize: result.vertical.newSize,
+            });
+            if (!bounds.clamped) {
+              appliedHeight = result.vertical.newSize;
+              target.style.height = `${result.vertical.newSize}px`;
+              onHeightResize?.({
+                height: result.vertical.newSize,
+                origin: result.vertical.origin,
+                totalDelta: result.vertical.totalDelta,
+                currentDelta: result.vertical.currentDelta,
+              });
+            } else if (
+              bounds.clampedSize !== null &&
+              bounds.clampedSize !== appliedHeight
+            ) {
+              appliedHeight = bounds.clampedSize;
+              target.style.height = `${bounds.clampedSize}px`;
+              onHeightResize?.({
+                height: bounds.clampedSize,
+                origin: result.vertical.origin,
+                totalDelta: result.vertical.totalDelta,
+                currentDelta: result.vertical.currentDelta,
+              });
+            }
+          }
+
+          strategy.commitResize({ width: appliedWidth, height: appliedHeight });
+        });
+      };
+
+      const endDrag = () => {
+        cancelAnimationFrame(frameId);
+        document.body.removeEventListener('mousemove', drag);
+        document.body.removeEventListener('mouseup', endDrag);
+        window.removeEventListener('blur', endDrag);
+
+        const result = strategy.endResize();
+        if (result.horizontal) {
+          onWidthResizeEnd?.(result.horizontal.width, result.horizontal.origin);
+        }
+        if (result.vertical) {
+          onHeightResizeEnd?.(result.vertical.height, result.vertical.origin);
+        }
+      };
+
+      document.body.addEventListener('mousemove', drag);
+      document.body.addEventListener('mouseup', endDrag);
+      window.addEventListener('blur', endDrag);
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(styles['resize-handle'], 'tcn-resize-handle', className)}
+        data-position={position}
+        data-axis={axis}
+        onMouseDown={handleMouseDown}
+        {...rest}
+      />
+    );
+  }
+);
+
+ResizeHandle.displayName = 'ResizeHandle';

package/src/utils/decorators/resizable/resize_strategy.ts

@@ -0,0 +1,190 @@
+import {
+  getHandleConfig,
+  resolveDirection,
+  computeResizeState,
+} from './handle_config.js';
+import type {
+  AxisConfig,
+  ResizeHandlePosition,
+  WidthResizeOrigin,
+  HeightResizeOrigin,
+} from './types.js';
+import type { Dimensions, Position, Rectangle } from '../../types/dimensions.js';
+
+export interface StartResizeParams {
+  rectangle: Rectangle;
+  languageDirection: string;
+}
+
+export interface AxisResizeResult {
+  newSize: number;
+  totalDelta: number;
+  currentDelta: number;
+}
+
+export interface HorizontalResizeResult extends AxisResizeResult {
+  origin: WidthResizeOrigin;
+}
+
+export interface VerticalResizeResult extends AxisResizeResult {
+  origin: HeightResizeOrigin;
+}
+
+export interface ResizeResult {
+  horizontal?: HorizontalResizeResult;
+  vertical?: VerticalResizeResult;
+}
+
+export interface EndResizeResult {
+  horizontal?: { width: number; origin: WidthResizeOrigin };
+  vertical?: { height: number; origin: HeightResizeOrigin };
+}
+
+/**
+ * Single-axis resize handler. Pure — no DOM, no React.
+ * Subclasses extract the correct axis from uniform args.
+ */
+abstract class AxisResizeHandler {
+  protected direction = 1;
+  protected startSize = 0;
+  protected startCoord = 0;
+  protected currentSize = 0;
+
+  constructor(protected axisConfig: AxisConfig) {}
+
+  get origin() {
+    return this.axisConfig.origin;
+  }
+
+  get size() {
+    return this.currentSize;
+  }
+
+  protected abstract extractSize(dimensions: Dimensions): number;
+  protected abstract extractCoord(coord: Position): number;
+  abstract applyResize(coord: Position): Partial<ResizeResult>;
+  abstract applyEnd(): Partial<EndResizeResult>;
+
+  start(rect: Rectangle, languageDirection: string) {
+    this.direction = resolveDirection(
+      languageDirection,
+      this.axisConfig.invert,
+      this.axisConfig.disableDirection
+    );
+    this.startSize = this.extractSize(rect.dimensions);
+    this.startCoord = this.extractCoord(rect.position);
+    this.currentSize = this.startSize;
+  }
+
+  resize(coord: Position): AxisResizeResult {
+    return computeResizeState(
+      this.startSize,
+      this.startCoord,
+      this.extractCoord(coord),
+      this.direction,
+      this.currentSize
+    );
+  }
+
+  commit(dimensions: Dimensions) {
+    this.currentSize = this.extractSize(dimensions);
+  }
+}
+
+class HorizontalAxisResizeHandler extends AxisResizeHandler {
+  protected extractSize(dimensions: Dimensions) {
+    return dimensions.width;
+  }
+
+  protected extractCoord(coord: Position) {
+    return coord.x;
+  }
+
+  applyResize(coord: Position): Partial<ResizeResult> {
+    return {
+      horizontal: {
+        ...this.resize(coord),
+        origin: this.origin as WidthResizeOrigin,
+      },
+    };
+  }
+
+  applyEnd(): Partial<EndResizeResult> {
+    return {
+      horizontal: {
+        width: this.size,
+        origin: this.origin as WidthResizeOrigin,
+      },
+    };
+  }
+}
+
+class VerticalAxisResizeHandler extends AxisResizeHandler {
+  protected extractSize(dimensions: Dimensions) {
+    return dimensions.height;
+  }
+
+  protected extractCoord(coord: Position) {
+    return coord.y;
+  }
+
+  applyResize(coord: Position): Partial<ResizeResult> {
+    return {
+      vertical: {
+        ...this.resize(coord),
+        origin: this.origin as HeightResizeOrigin,
+      },
+    };
+  }
+
+  applyEnd(): Partial<EndResizeResult> {
+    return {
+      vertical: {
+        height: this.size,
+        origin: this.origin as HeightResizeOrigin,
+      },
+    };
+  }
+}
+
+/**
+ * Flow:
+ *   1. adapter calls startResize() with rect/coords from DOM
+ *   2. adapter calls resize() on each mousemove with coord
+ *   3. adapter checks bounds (DOM), applies style, then calls commitResize()
+ *   4. adapter calls endResize() on mouseup to get final state
+ */
+export class ResizeHandleStrategy {
+  private handlers: AxisResizeHandler[];
+
+  constructor(position: ResizeHandlePosition) {
+    const config = getHandleConfig(position);
+    this.handlers = [];
+    if (config.horizontal) {
+      this.handlers.push(new HorizontalAxisResizeHandler(config.horizontal));
+    }
+    if (config.vertical) {
+      this.handlers.push(new VerticalAxisResizeHandler(config.vertical));
+    }
+  }
+
+  startResize(params: StartResizeParams): void {
+    for (const handler of this.handlers) {
+      handler.start(params.rectangle, params.languageDirection);
+    }
+  }
+
+  resize(position: Position): ResizeResult {
+    return Object.assign({}, ...this.handlers.map(h => h.applyResize(position)));
+  }
+
+  commitResize(dimensions: Dimensions): void {
+    for (const handler of this.handlers) {
+      handler.commit(dimensions);
+    }
+  }
+
+  endResize(): EndResizeResult {
+    return Object.assign({}, ...this.handlers.map(h => h.applyEnd()));
+  }
+}

package/src/utils/decorators/resizable/types.ts

@@ -0,0 +1,58 @@
+import type {
+  OnWidthResize,
+  OnWidthResizeEnd,
+  OnHeightResize,
+  OnHeightResizeEnd,
+  WidthResizeOrigin,
+  HeightResizeOrigin,
+} from '../../../stacks/box/types.js';
+
+export type {
+  OnWidthResize,
+  OnWidthResizeEnd,
+  OnHeightResize,
+  OnHeightResizeEnd,
+  WidthResizeOrigin,
+  HeightResizeOrigin,
+};
+
+export type ResizeHandlePosition =
+  // Edges (single axis)
+  | 'top'
+  | 'bottom'
+  | 'start'
+  | 'end'
+  // Corners (dual axis)
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end';
+
+export interface AxisConfig {
+  origin: WidthResizeOrigin | HeightResizeOrigin;
+  invert: boolean;
+  disableDirection: boolean;
+}
+
+export interface HandleConfig {
+  horizontal?: AxisConfig;
+  vertical?: AxisConfig;
+}
+
+export interface ResolvedAxisConfig {
+  origin: WidthResizeOrigin | HeightResizeOrigin;
+  direction: number;
+}
+
+export interface ResolvedHandleConfig {
+  horizontal?: ResolvedAxisConfig;
+  vertical?: ResolvedAxisConfig;
+}
+
+export interface ResizableContextValue {
+  targetRef: React.RefObject<HTMLElement | null>;
+  onWidthResize?: OnWidthResize;
+  onWidthResizeEnd?: OnWidthResizeEnd;
+  onHeightResize?: OnHeightResize;
+  onHeightResizeEnd?: OnHeightResizeEnd;
+}

package/src/utils/hooks/labelled_by_context.ts

@@ -0,0 +1,27 @@
+import { createContext, useContext, useId } from 'react';
+
+export interface LabelledByContextValue {
+  labelId: string;
+}
+
+/**
+ * Context for wiring aria-labelledby between a parent container and a child
+ * label element.
+ */
+export const LabelledByContext = createContext<LabelledByContextValue | null>(null);
+
+export const useLabelledBy = () => useContext(LabelledByContext);
+
+/**
+ * Derives a stable label ID for aria-labelledby wiring.
+ *
+ * - If `ariaLabelledBy` is provided, it takes precedence (full override).
+ * - If `id` is provided, the label ID is deterministic (`${id}-legend`).
+ * - Otherwise, falls back to React's `useId()`.
+ */
+export function useLabelledById(id?: string, ariaLabelledBy?: string) {
+  const reactId = useId();
+  const baseId = id ?? reactId;
+  const labelId = ariaLabelledBy || `${baseId}-legend`;
+  return { baseId, labelId };
+}

package/src/utils/index.ts

@@ -1,12 +1,11 @@
-export * from './click_away_listener.js';
-export * from './focus_redirect.js';
-export * from './scroll_away_listener.js';
+export * from './listeners/index.js';
 
-export * from './dnd/hooks/use_draggable.js';
+export * from './decorators/draggable/use_draggable.js';
 export * from './hooks/make_context_hook.js';
 export * from './hooks/use_fork_ref.js';
 export * from './hooks/use_resize_observer.js';
 export * from './hooks/use_media_query.js';
+export * from './hooks/labelled_by_context.js';
 
 export * from './default_value.js';
 
@@ -17,7 +16,10 @@ export * from './calendar/get_months_of_year.js';
 export * from './calendar/month.js';
 
 export * from './types/dimensions.js';
-export * from './types/variations.js';
+export * from './types/sides.js';
+export * from './system/index.js';
 
-export * from './dnd/draggable/draggable.js';
-export * from './dnd/handle.js';
+export * from './decorators/draggable/draggable.js';
+export * from './decorators/draggable/drag_handle.js';
+
+export * from './decorators/resizable/index.js';

package/src/utils/{click_away_listener.tsx → listeners/click_away_listener.tsx}

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef } from 'react';
-import { useForkRef } from './hooks/use_fork_ref.js';
+import { useForkRef } from '../hooks/use_fork_ref.js';
 export interface ClickAwayListenerProps {
   children: React.ReactElement;
   onClickAway: (event: React.MouseEvent | React.TouchEvent) => void;

package/src/utils/listeners/index.ts

@@ -0,0 +1,3 @@
+export * from './click_away_listener.js';
+export * from './focus_redirect.js';
+export * from './scroll_away_listener.js';

package/src/utils/{scroll_away_listener.tsx → listeners/scroll_away_listener.tsx}

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { useForkRef } from './hooks/use_fork_ref.js';
+import { useForkRef } from '../hooks/use_fork_ref.js';
 export interface ScrollAwayListenerProps {
   children: React.ReactElement;
   isException?: (target: HTMLElement) => boolean;

package/src/utils/system/index.ts

@@ -0,0 +1 @@
+export * from './variations.js';

package/src/utils/types/sides.ts

@@ -0,0 +1,2 @@
+export type HorizontalSide = 'start' | 'end';
+export type VerticalSide = 'top' | 'bottom';

package/dist/actions/button/slim_button/slim_button.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-import { ButtonProps } from '../button/button.js';
-/**
- * @deprecated - use Button instead (utility=true)
- * @param props - ButtonProps
- * @returns SlimButton
- */
-export declare const SlimButton: React.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "utility">, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=slim_button.d.ts.map

package/dist/actions/button/slim_button/slim_button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"slim_button.d.ts","sourceRoot":"","sources":["../../../../src/actions/button/slim_button/slim_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAK1D;;;;GAIG;AACH,eAAO,MAAM,UAAU,qHAcrB,CAAC"}

package/dist/actions/button/slim_button/slim_button.js

@@ -1,18 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import i from "react";
-import { Button as n } from "../button/button.js";
-import { clsx as l } from "clsx";
-import '../../../slim_button.css';const u = "_slim-button_188fdc3", c = { "slim-button": u }, b = i.forwardRef(({ children: t, className: o, ...m }, r) => /* @__PURE__ */ s(
-  n,
-  {
-    ref: r,
-    className: l(c["slim-button"], "tcn-slim-button", o),
-    utility: !0,
-    ...m,
-    children: t
-  }
-));
-export {
-  b as SlimButton
-};
-//# sourceMappingURL=slim_button.js.map

package/dist/actions/button/slim_button/slim_button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slim_button.js","sources":["../../../../src/actions/button/slim_button/slim_button.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, ButtonProps } from '../button/button.js';\nimport { clsx } from 'clsx';\n// Styles\nimport styles from './slim_button.module.css';\n\n/**\n * @deprecated - use Button instead (utility=true)\n * @param props - ButtonProps\n * @returns SlimButton\n */\nexport const SlimButton = React.forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, 'utility'>\n>(({ children, className, ...props }, ref) => {\n  return (\n    <Button\n      ref={ref}\n      className={clsx(styles['slim-button'], 'tcn-slim-button', className)}\n      utility={true}\n      {...props}\n    >\n      {children}\n    </Button>\n  );\n});\n"],"names":["SlimButton","React","children","className","props","ref","jsx","Button","clsx","styles"],"mappings":";;;;4DAWaA,IAAaC,EAAM,WAG9B,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAElC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAKC,EAAO,aAAa,GAAG,mBAAmBN,CAAS;AAAA,IACnE,SAAS;AAAA,IACR,GAAGC;AAAA,IAEH,UAAAF;AAAA,EAAA;AAAA,CAGN;"}

package/dist/containers.module-DlGySre0.js

@@ -1,5 +0,0 @@
-import './containers.css';const a = "_scaffold_7e9ff51", c = "_rail_9474c96", t = "_container_336e83e", s = "_container-stack_0d2e80a", o = "_scaffold-stack_3a72ba8", n = "_rail-stack_2e4d934", e = { scaffold: a, rail: c, container: t, "container-stack": s, "scaffold-stack": o, "rail-stack": n };
-export {
-  e as s
-};
-//# sourceMappingURL=containers.module-DlGySre0.js.map

package/dist/containers.module-DlGySre0.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"containers.module-DlGySre0.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/draggable.module-BgelQsuJ.js

@@ -1,5 +0,0 @@
-import './draggable.css';const s = "_draggable_db40376", a = { draggable: s };
-export {
-  a as s
-};
-//# sourceMappingURL=draggable.module-BgelQsuJ.js.map

package/dist/draggable.module-BgelQsuJ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"draggable.module-BgelQsuJ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/frame.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._frame-dialog_2a77c1d){overflow:hidden}}

package/dist/left_resize_handle.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._left-resize-handle_215501a){position:fixed;bottom:0;left:var(--resize-offset, -8px);height:100%;width:16px;z-index:1;cursor:ew-resize;pointer-events:auto}}

package/dist/right_resize_handle.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._right-resize-handle_7f232b9){position:fixed;bottom:0;right:var(--resize-offset, -8px);height:100%;width:16px;z-index:1;cursor:ew-resize;pointer-events:auto}}

package/dist/slim_button.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._slim-button_188fdc3){min-height:auto}:where(._slim-button_188fdc3[data-is-disabled=true]){pointer-events:none}}

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

@@ -1,4 +0,0 @@
-import { HorizontalResizeHandleProps } from './types.js';
-export type LeftResizeHandleProps = HorizontalResizeHandleProps;
-export declare function LeftResizeHandle({ targetRef, handleProps, onWidthResize, onWidthResizeEnd, }: LeftResizeHandleProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=left_resize_handle.d.ts.map