@tcn/ui 0.17.0 → 0.18.0

package/dist/utils/{resize → decorators/resizable}/resize_handle.js

@@ -4,8 +4,8 @@ import { clsx as L } from "clsx";
 import { useResizable as $ } from "./context.js";
 import { getHandleConfig as A } from "./handle_config.js";
 import { ResizeHandleStrategy as C } from "./resize_strategy.js";
-import { detectResizeBounds as p } from "../../stacks/box/detect_resize_bounds.js";
-import '../../resize_handle.css';const F = "_resize-handle_287f4e0", M = { "resize-handle": F }, W = H(
+import { detectResizeBounds as p } from "../../../stacks/box/detect_resize_bounds.js";
+import '../../../resize_handle.css';const F = "_resize-handle_5b556d5", M = { "resize-handle": F }, W = H(
   function({ position: o, className: w, ...v }, f) {
     const {
       targetRef: D,

package/dist/utils/decorators/resizable/resize_handle.js.map

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

package/dist/utils/{resize → decorators/resizable}/resize_strategy.d.ts

@@ -1,5 +1,5 @@
 import { ResizeHandlePosition, WidthResizeOrigin, HeightResizeOrigin } from './types.js';
-import { Dimensions, Position, Rectangle } from '../types/dimensions.js';
+import { Dimensions, Position, Rectangle } from '../../types/dimensions.js';
 export interface StartResizeParams {
     rectangle: Rectangle;
     languageDirection: string;

package/dist/utils/decorators/resizable/resize_strategy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize_strategy.d.ts","sourceRoot":"","sources":["../../../../src/utils/decorators/resizable/resize_strategy.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEjF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC5D,MAAM,EAAE,kBAAkB,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,QAAQ,CAAC,EAAE,oBAAoB,CAAC;CACjC;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,iBAAiB,CAAA;KAAE,CAAC;IAC1D,QAAQ,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,kBAAkB,CAAA;KAAE,CAAC;CAC3D;AA6GD;;;;;;GAMG;AACH,qBAAa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAsB;gBAE1B,QAAQ,EAAE,oBAAoB;IAW1C,WAAW,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAM5C,MAAM,CAAC,QAAQ,EAAE,QAAQ,GAAG,YAAY;IAIxC,YAAY,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI;IAM1C,SAAS,IAAI,eAAe;CAG7B"}

package/dist/utils/decorators/resizable/resize_strategy.js.map

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

package/dist/utils/{resize → decorators/resizable}/types.d.ts

@@ -1,6 +1,6 @@
-import { OnWidthResize, OnWidthResizeEnd, OnHeightResize, OnHeightResizeEnd, WidthResizeOrigin, HeightResizeOrigin } from '../../stacks/box/types.js';
+import { OnWidthResize, OnWidthResizeEnd, OnHeightResize, OnHeightResizeEnd, WidthResizeOrigin, HeightResizeOrigin } from '../../../stacks/box/types.js';
 export type { OnWidthResize, OnWidthResizeEnd, OnHeightResize, OnHeightResizeEnd, WidthResizeOrigin, HeightResizeOrigin, };
-export type ResizeHandlePosition = 'top' | 'bottom' | 'left' | 'right' | 'start' | 'end' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+export type ResizeHandlePosition = 'top' | 'bottom' | 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
 export interface AxisConfig {
     origin: WidthResizeOrigin | HeightResizeOrigin;
     invert: boolean;

package/dist/utils/decorators/resizable/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/utils/decorators/resizable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,8BAA8B,CAAC;AAEtC,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,GACnB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAE5B,KAAK,GACL,QAAQ,GACR,OAAO,GACP,KAAK,GAEL,WAAW,GACX,SAAS,GACT,cAAc,GACd,YAAY,CAAC;AAEjB,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;IAC/C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC"}

package/dist/utils/hooks/labelled_by_context.d.ts

@@ -0,0 +1,21 @@
+export interface LabelledByContextValue {
+    labelId: string;
+}
+/**
+ * Context for wiring aria-labelledby between a parent container and a child
+ * label element.
+ */
+export declare const LabelledByContext: import('react').Context<LabelledByContextValue | null>;
+export declare const useLabelledBy: () => LabelledByContextValue | null;
+/**
+ * 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 declare function useLabelledById(id?: string, ariaLabelledBy?: string): {
+    baseId: string;
+    labelId: string;
+};
+//# sourceMappingURL=labelled_by_context.d.ts.map

package/dist/utils/hooks/labelled_by_context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labelled_by_context.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/labelled_by_context.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,wDAAqD,CAAC;AAEpF,eAAO,MAAM,aAAa,qCAAsC,CAAC;AAEjE;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,MAAM;;;EAKnE"}

package/dist/utils/hooks/labelled_by_context.js

@@ -0,0 +1,12 @@
+import { createContext as s, useId as d, useContext as c } from "react";
+const a = s(null), u = () => c(a);
+function b(t, n) {
+  const o = d(), e = t ?? o, l = n || `${e}-legend`;
+  return { baseId: e, labelId: l };
+}
+export {
+  a as LabelledByContext,
+  u as useLabelledBy,
+  b as useLabelledById
+};
+//# sourceMappingURL=labelled_by_context.js.map

package/dist/utils/hooks/labelled_by_context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"labelled_by_context.js","sources":["../../../src/utils/hooks/labelled_by_context.ts"],"sourcesContent":["import { createContext, useContext, useId } from 'react';\n\nexport interface LabelledByContextValue {\n  labelId: string;\n}\n\n/**\n * Context for wiring aria-labelledby between a parent container and a child\n * label element.\n */\nexport const LabelledByContext = createContext<LabelledByContextValue | null>(null);\n\nexport const useLabelledBy = () => useContext(LabelledByContext);\n\n/**\n * Derives a stable label ID for aria-labelledby wiring.\n *\n * - If `ariaLabelledBy` is provided, it takes precedence (full override).\n * - If `id` is provided, the label ID is deterministic (`${id}-legend`).\n * - Otherwise, falls back to React's `useId()`.\n */\nexport function useLabelledById(id?: string, ariaLabelledBy?: string) {\n  const reactId = useId();\n  const baseId = id ?? reactId;\n  const labelId = ariaLabelledBy || `${baseId}-legend`;\n  return { baseId, labelId };\n}\n"],"names":["LabelledByContext","createContext","useLabelledBy","useContext","useLabelledById","id","ariaLabelledBy","reactId","useId","baseId","labelId"],"mappings":";AAUO,MAAMA,IAAoBC,EAA6C,IAAI,GAErEC,IAAgB,MAAMC,EAAWH,CAAiB;AASxD,SAASI,EAAgBC,GAAaC,GAAyB;AACpE,QAAMC,IAAUC,EAAA,GACVC,IAASJ,KAAME,GACfG,IAAUJ,KAAkB,GAAGG,CAAM;AAC3C,SAAO,EAAE,QAAAA,GAAQ,SAAAC,EAAA;AACnB;"}

package/dist/utils/index.d.ts

@@ -1,11 +1,10 @@
-export * from './click_away_listener.js';
-export * from './focus_redirect.js';
-export * from './scroll_away_listener.js';
-export * from './dnd/hooks/use_draggable.js';
+export * from './listeners/index.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';
 export * from './calendar/calendar_date.js';
 export * from './calendar/calendar_dates_generator.js';
@@ -13,8 +12,9 @@ export * from './calendar/get_days_of_week.js';
 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 './dnd/draggable/draggable.js';
-export * from './dnd/handle.js';
-export * from './resize/index.js';
+export * from './types/sides.js';
+export * from './system/index.js';
+export * from './decorators/draggable/draggable.js';
+export * from './decorators/draggable/drag_handle.js';
+export * from './decorators/resizable/index.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC;AAEpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAEhC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AAErC,cAAc,yCAAyC,CAAC;AACxD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC;AAEpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAElC,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AAEtD,cAAc,iCAAiC,CAAC"}

package/dist/utils/index.js

@@ -1,48 +1,52 @@
-import { ClickAwayListener as o, isEventWithinElement as t } from "./click_away_listener.js";
-import { FocusRedirect as a } from "./focus_redirect.js";
-import { ScrollAwayListener as p } from "./scroll_away_listener.js";
-import { useDraggable as x } from "./dnd/hooks/use_draggable.js";
-import { makeContextHook as n } from "./hooks/make_context_hook.js";
+import { ClickAwayListener as o, isEventWithinElement as t } from "./listeners/click_away_listener.js";
+import { FocusRedirect as f } from "./listeners/focus_redirect.js";
+import { ScrollAwayListener as m } from "./listeners/scroll_away_listener.js";
+import { useDraggable as x } from "./decorators/draggable/use_draggable.js";
+import { makeContextHook as i } from "./hooks/make_context_hook.js";
 import { useForkRef as g } from "./hooks/use_fork_ref.js";
-import { TriggerConfig as d, useResizeObserver as R } from "./hooks/use_resize_observer.js";
-import { useMediaQuery as z } from "./hooks/use_media_query.js";
-import { defaultValue as D } from "./default_value.js";
-import { CalendarDatesGenerator as b } from "./calendar/calendar_dates_generator.js";
-import { getDaysOfWeek as y } from "./calendar/get_days_of_week.js";
-import { getMonthsOfYear as h } from "./calendar/get_months_of_year.js";
-import { Month as O } from "./calendar/month.js";
-import { Draggable as w } from "./dnd/draggable/draggable.js";
-import { DragHandle as E } from "./dnd/handle.js";
-import { Resizable as L } from "./resize/resizable.js";
-import { ResizeHandle as G } from "./resize/resize_handle.js";
-import { useResizable as T } from "./resize/context.js";
-import { computeResizeState as Y, getHandleConfig as j, resolveDirection as q, resolveHandleConfig as B } from "./resize/handle_config.js";
-import { ResizeHandleStrategy as J } from "./resize/resize_strategy.js";
+import { TriggerConfig as u, useResizeObserver as b } from "./hooks/use_resize_observer.js";
+import { useMediaQuery as R } from "./hooks/use_media_query.js";
+import { LabelledByContext as c, useLabelledBy as z, useLabelledById as D } from "./hooks/labelled_by_context.js";
+import { defaultValue as k } from "./default_value.js";
+import { CalendarDatesGenerator as v } from "./calendar/calendar_dates_generator.js";
+import { getDaysOfWeek as B } from "./calendar/get_days_of_week.js";
+import { getMonthsOfYear as O } from "./calendar/get_months_of_year.js";
+import { Month as w } from "./calendar/month.js";
+import { Draggable as E } from "./decorators/draggable/draggable.js";
+import { DragHandle as W } from "./decorators/draggable/drag_handle.js";
+import { Resizable as I } from "./decorators/resizable/resizable.js";
+import { ResizeHandle as T } from "./decorators/resizable/resize_handle.js";
+import { useResizable as Y } from "./decorators/resizable/context.js";
+import { computeResizeState as q, getHandleConfig as J, resolveDirection as K, resolveHandleConfig as N } from "./decorators/resizable/handle_config.js";
+import { ResizeHandleStrategy as U } from "./decorators/resizable/resize_strategy.js";
 export {
-  b as CalendarDatesGenerator,
+  v as CalendarDatesGenerator,
   o as ClickAwayListener,
-  E as DragHandle,
-  w as Draggable,
-  a as FocusRedirect,
-  O as Month,
-  L as Resizable,
-  G as ResizeHandle,
-  J as ResizeHandleStrategy,
-  p as ScrollAwayListener,
-  d as TriggerConfig,
-  Y as computeResizeState,
-  D as defaultValue,
-  y as getDaysOfWeek,
-  j as getHandleConfig,
-  h as getMonthsOfYear,
+  W as DragHandle,
+  E as Draggable,
+  f as FocusRedirect,
+  c as LabelledByContext,
+  w as Month,
+  I as Resizable,
+  T as ResizeHandle,
+  U as ResizeHandleStrategy,
+  m as ScrollAwayListener,
+  u as TriggerConfig,
+  q as computeResizeState,
+  k as defaultValue,
+  B as getDaysOfWeek,
+  J as getHandleConfig,
+  O as getMonthsOfYear,
   t as isEventWithinElement,
-  n as makeContextHook,
-  q as resolveDirection,
-  B as resolveHandleConfig,
+  i as makeContextHook,
+  K as resolveDirection,
+  N as resolveHandleConfig,
   x as useDraggable,
   g as useForkRef,
-  z as useMediaQuery,
-  T as useResizable,
-  R as useResizeObserver
+  z as useLabelledBy,
+  D as useLabelledById,
+  R as useMediaQuery,
+  Y as useResizable,
+  b as useResizeObserver
 };
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

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

package/dist/utils/listeners/click_away_listener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"click_away_listener.d.ts","sourceRoot":"","sources":["../../../src/utils/listeners/click_away_listener.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,SAAS,CAAC;IACrD,UAAU,CAAC,EAAE,cAAc,GAAG,YAAY,CAAC;IAC3C,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IAE/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;CACnC;AAWD,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,UAAU,GAAG,UAAU,EAC9B,IAAI,EAAE,WAAW,GAAG,IAAI,EACxB,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,WAsBzB;AAED,eAAO,MAAM,iBAAiB,4FA0E7B,CAAC"}

package/dist/utils/{click_away_listener.js → listeners/click_away_listener.js}

@@ -1,5 +1,5 @@
 import d, { useRef as p, useCallback as L, useEffect as W } from "react";
-import { useForkRef as T } from "./hooks/use_fork_ref.js";
+import { useForkRef as T } from "../hooks/use_fork_ref.js";
 const C = {
   onClick: "click",
   onMouseDown: "mousedown",

package/dist/utils/listeners/click_away_listener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"click_away_listener.js","sources":["../../../src/utils/listeners/click_away_listener.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef } from 'react';\nimport { useForkRef } from '../hooks/use_fork_ref.js';\nexport interface ClickAwayListenerProps {\n  children: React.ReactElement;\n  onClickAway: (event: React.MouseEvent | React.TouchEvent) => void;\n  mouseEvent?: 'onMouseUp' | 'onMouseDown' | 'onClick';\n  touchEvent?: 'onTouchStart' | 'onTouchEnd';\n  isException?: (target: HTMLElement) => boolean;\n  // An array of refs that wont trigger the click away listener\n  refs?: React.RefObject<Element>[];\n}\nconst eventMap = {\n  onClick: 'click',\n  onMouseDown: 'mousedown',\n  onMouseUp: 'mouseup',\n};\nconst touchMap = {\n  onTouchStart: 'touchstart',\n  onTouchEnd: 'touchend',\n};\n\nexport function isEventWithinElement(\n  event: MouseEvent | TouchEvent,\n  node: HTMLElement | null,\n  activated: boolean,\n  refs: (Element | null)[]\n) {\n  if (!activated) {\n    return true;\n  }\n\n  let isWithinElement: boolean;\n\n  if (event.composedPath) {\n    isWithinElement =\n      [node, ...refs].find((ref: any) => {\n        return event.composedPath().indexOf(ref) > -1;\n      }) !== undefined;\n  } else {\n    isWithinElement =\n      !document.documentElement.contains(event.target as any) ||\n      [node, ...refs].find((ref: any) => {\n        return ref?.contains(event.target);\n      }) !== undefined;\n  }\n\n  return isWithinElement;\n}\n\nexport const ClickAwayListener = React.forwardRef<HTMLElement, ClickAwayListenerProps>(\n  function ClickAwayListener(\n    { children, mouseEvent, touchEvent, onClickAway, refs = [], isException },\n    ref\n  ) {\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const startedActionWithinElementRef = useRef<boolean>(true);\n    const DOMMouseEvent = eventMap[mouseEvent || 'onClick'];\n    const DOMTouchEvent = touchMap[touchEvent || 'onTouchEnd'];\n    const newRef = useForkRef(ref, nodeRef, (children as any).ref);\n    const activatedRef = React.useRef(false);\n\n    React.useEffect(() => {\n      // Ensure that this component is not \"activated\" synchronously.\n      // https://github.com/facebook/react/issues/20074\n      window.setTimeout(() => {\n        activatedRef.current = true;\n      }, 0);\n      return () => {\n        activatedRef.current = false;\n      };\n    }, []);\n\n    const trackAction = useCallback(\n      (event: any) => {\n        startedActionWithinElementRef.current = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n      },\n      [refs]\n    );\n\n    const eventHandler = useCallback(\n      (event: any) => {\n        const startedFromWithinElement = startedActionWithinElementRef.current;\n        const isWithinElement = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n\n        if (\n          !isWithinElement &&\n          !startedFromWithinElement &&\n          (!isException || !isException(event.target))\n        ) {\n          onClickAway(event);\n        }\n      },\n      [onClickAway, refs, isException]\n    );\n\n    useEffect(() => {\n      document.addEventListener('mousedown', trackAction);\n      document.addEventListener('touchstart', trackAction);\n      document.addEventListener(DOMMouseEvent, eventHandler);\n      document.addEventListener(DOMTouchEvent, eventHandler);\n      return () => {\n        document.removeEventListener('mousedown', trackAction);\n        document.removeEventListener('touchstart', trackAction);\n        document.removeEventListener(DOMMouseEvent, eventHandler);\n        document.removeEventListener(DOMTouchEvent, eventHandler);\n      };\n    }, [DOMTouchEvent, DOMMouseEvent, eventHandler, trackAction]);\n\n    return React.cloneElement(children, {\n      ...children.props,\n      ref: newRef,\n    });\n  }\n);\n"],"names":["eventMap","touchMap","isEventWithinElement","event","node","activated","refs","isWithinElement","ref","ClickAwayListener","React","children","mouseEvent","touchEvent","onClickAway","isException","nodeRef","useRef","startedActionWithinElementRef","DOMMouseEvent","DOMTouchEvent","newRef","useForkRef","activatedRef","trackAction","useCallback","r","eventHandler","startedFromWithinElement","useEffect"],"mappings":";;AAWA,MAAMA,IAAW;AAAA,EACf,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AACb,GACMC,IAAW;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AACd;AAEO,SAASC,EACdC,GACAC,GACAC,GACAC,GACA;AACA,MAAI,CAACD;AACH,WAAO;AAGT,MAAIE;AAEJ,SAAIJ,EAAM,eACRI,IACE,CAACH,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbL,EAAM,aAAA,EAAe,QAAQK,CAAG,IAAI,EAC5C,MAAM,SAETD,IACE,CAAC,SAAS,gBAAgB,SAASJ,EAAM,MAAa,KACtD,CAACC,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbA,GAAK,SAASL,EAAM,MAAM,CAClC,MAAM,QAGJI;AACT;AAEO,MAAME,IAAoBC,EAAM;AAAA,EACrC,SACE,EAAE,UAAAC,GAAU,YAAAC,GAAY,YAAAC,GAAY,aAAAC,GAAa,MAAAR,IAAO,CAAA,GAAI,aAAAS,EAAA,GAC5DP,GACA;AACA,UAAMQ,IAAUC,EAA2B,IAAI,GACzCC,IAAgCD,EAAgB,EAAI,GACpDE,IAAgBnB,EAASY,KAAc,SAAS,GAChDQ,IAAgBnB,EAASY,KAAc,YAAY,GACnDQ,IAASC,EAAWd,GAAKQ,GAAUL,EAAiB,GAAG,GACvDY,IAAeb,EAAM,OAAO,EAAK;AAEvCA,IAAAA,EAAM,UAAU,OAGd,OAAO,WAAW,MAAM;AACtB,MAAAa,EAAa,UAAU;AAAA,IACzB,GAAG,CAAC,GACG,MAAM;AACX,MAAAA,EAAa,UAAU;AAAA,IACzB,IACC,CAAA,CAAE;AAEL,UAAMC,IAAcC;AAAA,MAClB,CAACtB,MAAe;AACd,QAAAe,EAA8B,UAAUhB;AAAA,UACtCC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA;AAAA,MAE3B;AAAA,MACA,CAACpB,CAAI;AAAA,IAAA,GAGDqB,IAAeF;AAAA,MACnB,CAACtB,MAAe;AACd,cAAMyB,IAA2BV,EAA8B;AAQ/D,QACE,CARsBhB;AAAA,UACtBC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA,KAKvB,CAACE,MACA,CAACb,KAAe,CAACA,EAAYZ,EAAM,MAAM,MAE1CW,EAAYX,CAAK;AAAA,MAErB;AAAA,MACA,CAACW,GAAaR,GAAMS,CAAW;AAAA,IAAA;AAGjC,WAAAc,EAAU,OACR,SAAS,iBAAiB,aAAaL,CAAW,GAClD,SAAS,iBAAiB,cAAcA,CAAW,GACnD,SAAS,iBAAiBL,GAAeQ,CAAY,GACrD,SAAS,iBAAiBP,GAAeO,CAAY,GAC9C,MAAM;AACX,eAAS,oBAAoB,aAAaH,CAAW,GACrD,SAAS,oBAAoB,cAAcA,CAAW,GACtD,SAAS,oBAAoBL,GAAeQ,CAAY,GACxD,SAAS,oBAAoBP,GAAeO,CAAY;AAAA,IAC1D,IACC,CAACP,GAAeD,GAAeQ,GAAcH,CAAW,CAAC,GAErDd,EAAM,aAAaC,GAAU;AAAA,MAClC,GAAGA,EAAS;AAAA,MACZ,KAAKU;AAAA,IAAA,CACN;AAAA,EACH;AACF;"}

package/dist/utils/listeners/focus_redirect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus_redirect.d.ts","sourceRoot":"","sources":["../../../src/utils/listeners/focus_redirect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,2FAmBxB,CAAC"}

package/dist/utils/listeners/focus_redirect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus_redirect.js","sources":["../../../src/utils/listeners/focus_redirect.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface FocusRedirectProps {\n  onRedirect: () => void;\n}\n\nexport const FocusRedirect = React.forwardRef(function FocusRedirect(\n  { onRedirect }: FocusRedirectProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  return (\n    <div\n      ref={ref}\n      tabIndex={0}\n      onFocus={onRedirect}\n      style={{\n        padding: 0,\n        margin: 0,\n        width: 0,\n        height: 0,\n        opacity: 0,\n        position: 'relative',\n      }}\n    ></div>\n  );\n});\n"],"names":["FocusRedirect","React","onRedirect","ref","jsx"],"mappings":";;AAMO,MAAMA,IAAgBC,EAAM,WAAW,SAC5C,EAAE,YAAAC,EAAA,GACFC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,UAAU;AAAA,MACV,SAASD;AAAA,MACT,OAAO;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN,CAAC;"}

package/dist/utils/listeners/index.d.ts

@@ -0,0 +1,4 @@
+export * from './click_away_listener.js';
+export * from './focus_redirect.js';
+export * from './scroll_away_listener.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/listeners/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/listeners/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC"}

package/dist/utils/listeners/index.js

@@ -0,0 +1,10 @@
+import { ClickAwayListener as t, isEventWithinElement as o } from "./click_away_listener.js";
+import { FocusRedirect as n } from "./focus_redirect.js";
+import { ScrollAwayListener as l } from "./scroll_away_listener.js";
+export {
+  t as ClickAwayListener,
+  n as FocusRedirect,
+  l as ScrollAwayListener,
+  o as isEventWithinElement
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/listeners/index.js.map

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

package/dist/utils/listeners/mouse_leave_region.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mouse_leave_region.d.ts","sourceRoot":"","sources":["../../../src/utils/listeners/mouse_leave_region.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC;IAC7E,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,YAAY,EAAE,WAAW,EACzB,MAAU,GACX,EAAE,qBAAqB,QAyBvB"}

package/dist/utils/listeners/mouse_leave_region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mouse_leave_region.js","sources":["../../../src/utils/listeners/mouse_leave_region.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nexport interface MouseLeaveRegionProps {\n  elementsRefs: (React.RefObject<Element> | React.MutableRefObject<Element>)[];\n  onMouseLeave: () => void;\n  buffer?: number;\n}\n\nexport function MouseLeaveRegion({\n  onMouseLeave,\n  elementsRefs: elementRefs,\n  buffer = 8,\n}: MouseLeaveRegionProps) {\n  useEffect(() => {\n    const update = (event: MouseEvent) => {\n      const intersects = elementRefs.some(ref => {\n        const element = ref.current;\n        if (element != null) {\n          const rect = element.getBoundingClientRect();\n          const overlapLeft = Math.max(event.clientX - buffer, rect.left);\n          const overlapRight = Math.min(event.clientX + buffer, rect.right);\n          const overlapTop = Math.max(event.clientY - buffer, rect.top);\n          const overlapBottom = Math.min(event.clientY + buffer, rect.bottom);\n          return overlapLeft <= overlapRight && overlapTop <= overlapBottom;\n        }\n        return false;\n      });\n      if (!intersects) {\n        onMouseLeave();\n      }\n    };\n    window.addEventListener('mousemove', update);\n    return () => {\n      window.removeEventListener('mousemove', update);\n    };\n  }, [onMouseLeave, elementRefs, buffer]);\n  return null;\n}\n"],"names":["MouseLeaveRegion","onMouseLeave","elementRefs","buffer","useEffect","update","event","ref","element","rect","overlapLeft","overlapRight","overlapTop","overlapBottom"],"mappings":";AAQO,SAASA,EAAiB;AAAA,EAC/B,cAAAC;AAAA,EACA,cAAcC;AAAA,EACd,QAAAC,IAAS;AACX,GAA0B;AACxB,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAS,CAACC,MAAsB;AAapC,MAZmBJ,EAAY,KAAK,CAAAK,MAAO;AACzC,cAAMC,IAAUD,EAAI;AACpB,YAAIC,KAAW,MAAM;AACnB,gBAAMC,IAAOD,EAAQ,sBAAA,GACfE,IAAc,KAAK,IAAIJ,EAAM,UAAUH,GAAQM,EAAK,IAAI,GACxDE,IAAe,KAAK,IAAIL,EAAM,UAAUH,GAAQM,EAAK,KAAK,GAC1DG,IAAa,KAAK,IAAIN,EAAM,UAAUH,GAAQM,EAAK,GAAG,GACtDI,IAAgB,KAAK,IAAIP,EAAM,UAAUH,GAAQM,EAAK,MAAM;AAClE,iBAAOC,KAAeC,KAAgBC,KAAcC;AAAA,QACtD;AACA,eAAO;AAAA,MACT,CAAC,KAECZ,EAAA;AAAA,IAEJ;AACA,kBAAO,iBAAiB,aAAaI,CAAM,GACpC,MAAM;AACX,aAAO,oBAAoB,aAAaA,CAAM;AAAA,IAChD;AAAA,EACF,GAAG,CAACJ,GAAcC,GAAaC,CAAM,CAAC,GAC/B;AACT;"}

package/dist/utils/listeners/scroll_away_listener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll_away_listener.d.ts","sourceRoot":"","sources":["../../../src/utils/listeners/scroll_away_listener.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IAC/C,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,6FAoC9B,CAAC"}

package/dist/utils/{scroll_away_listener.js → listeners/scroll_away_listener.js}

@@ -1,5 +1,5 @@
 import u, { useRef as m, useEffect as a } from "react";
-import { useForkRef as d } from "./hooks/use_fork_ref.js";
+import { useForkRef as d } from "../hooks/use_fork_ref.js";
 const L = u.forwardRef(
   function({ children: r, onScrollAway: c, isException: o }, f) {
     const n = m(null), l = d(f, n, r.ref);

package/dist/utils/listeners/scroll_away_listener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll_away_listener.js","sources":["../../../src/utils/listeners/scroll_away_listener.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { useForkRef } from '../hooks/use_fork_ref.js';\nexport interface ScrollAwayListenerProps {\n  children: React.ReactElement;\n  isException?: (target: HTMLElement) => boolean;\n  onScrollAway: () => void;\n}\n\n/**\n * This can be used for things that need to disappear when the user scrolls somewhere other\n * than the place this component surrounds.\n *\n * Mainly this will be used for tooltips and popovers. It should be used with caution and\n * correctly. If too many things are listening for other things scrolling it can become\n * quite inefficient. Within the Popover it doesn't add it to the JSX until the popover is\n * visible. That way the scroll away isn't alway listening to scroll events on the\n * document.\n */\nexport const ScrollAwayListener = React.forwardRef<HTMLElement, ScrollAwayListenerProps>(\n  function ScrollAwayListener(\n    { children, onScrollAway, isException }: ScrollAwayListenerProps,\n    ref\n  ) {\n    const nodeRef = useRef<any>(null);\n    const newRef = useForkRef(ref, nodeRef, (children as any).ref);\n    useEffect(() => {\n      const onScroll = (event: any) => {\n        let insideDOM: boolean;\n        if (isException && isException(event.target)) {\n          insideDOM = true;\n        } else if (event.composedPath) {\n          insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;\n        } else {\n          insideDOM =\n            !document.documentElement.contains(event.target) ||\n            nodeRef.current.contains(event.target);\n        }\n\n        if (!insideDOM) {\n          onScrollAway();\n          document.removeEventListener('scroll', onScroll, true);\n          event.preventDefault();\n        }\n      };\n      document.addEventListener('scroll', onScroll, true);\n      return () => {\n        document.removeEventListener('scroll', onScroll, true);\n      };\n    }, [onScrollAway, isException]);\n    return React.cloneElement(children, {\n      ...children.props,\n      ref: newRef,\n    });\n  }\n);\n"],"names":["ScrollAwayListener","React","children","onScrollAway","isException","ref","nodeRef","useRef","newRef","useForkRef","useEffect","onScroll","event","insideDOM"],"mappings":";;AAkBO,MAAMA,IAAqBC,EAAM;AAAA,EACtC,SACE,EAAE,UAAAC,GAAU,cAAAC,GAAc,aAAAC,EAAA,GAC1BC,GACA;AACA,UAAMC,IAAUC,EAAY,IAAI,GAC1BC,IAASC,EAAWJ,GAAKC,GAAUJ,EAAiB,GAAG;AAC7D,WAAAQ,EAAU,MAAM;AACd,YAAMC,IAAW,CAACC,MAAe;AAC/B,YAAIC;AACJ,QAAIT,KAAeA,EAAYQ,EAAM,MAAM,IACzCC,IAAY,KACHD,EAAM,eACfC,IAAYD,EAAM,aAAA,EAAe,QAAQN,EAAQ,OAAO,IAAI,KAE5DO,IACE,CAAC,SAAS,gBAAgB,SAASD,EAAM,MAAM,KAC/CN,EAAQ,QAAQ,SAASM,EAAM,MAAM,GAGpCC,MACHV,EAAA,GACA,SAAS,oBAAoB,UAAUQ,GAAU,EAAI,GACrDC,EAAM,eAAA;AAAA,MAEV;AACA,sBAAS,iBAAiB,UAAUD,GAAU,EAAI,GAC3C,MAAM;AACX,iBAAS,oBAAoB,UAAUA,GAAU,EAAI;AAAA,MACvD;AAAA,IACF,GAAG,CAACR,GAAcC,CAAW,CAAC,GACvBH,EAAM,aAAaC,GAAU;AAAA,MAClC,GAAGA,EAAS;AAAA,MACZ,KAAKM;AAAA,IAAA,CACN;AAAA,EACH;AACF;"}

package/dist/utils/system/index.d.ts

@@ -0,0 +1,2 @@
+export * from './variations.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/system/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/system/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/utils/system/index.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.js.map

package/dist/utils/system/index.js.map

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

package/dist/utils/system/variations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variations.d.ts","sourceRoot":"","sources":["../../../src/utils/system/variations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,YAAY,CAAC"}

package/dist/utils/system/variations.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=variations.js.map

package/dist/utils/system/variations.js.map

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

package/dist/utils/types/sides.d.ts

@@ -0,0 +1,3 @@
+export type HorizontalSide = 'start' | 'end';
+export type VerticalSide = 'top' | 'bottom';
+//# sourceMappingURL=sides.d.ts.map

package/dist/utils/types/sides.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sides.d.ts","sourceRoot":"","sources":["../../../src/utils/types/sides.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -41,12 +41,6 @@
       "import": "./dist/actions/index.js",
       "default": "./dist/actions/index.js"
     },
-    "./dnd": {
-      "@bc-monorepo/source": "./src/dnd/index.ts",
-      "types": "./dist/dnd/index.d.ts",
-      "import": "./dist/dnd/index.js",
-      "default": "./dist/dnd/index.js"
-    },
     "./feedback": {
       "@bc-monorepo/source": "./src/feedback/index.ts",
       "types": "./dist/feedback/index.d.ts",
@@ -143,7 +137,7 @@
     "libphonenumber-js": "^1.12.38",
     "react-color": "^2.19.3",
     "react-phone-number-input": "^3.4.16",
-    "@tcn/icons": "2.3.0",
+    "@tcn/icons": "2.4.0",
     "@tcn/state": "1.3.3"
   },
   "scripts": {

package/src/actions/button/__stories__/button_group.stories.tsx

@@ -4,7 +4,6 @@ import { Spacer } from '../../../stacks/spacer.js';
 import React from 'react';
 import { Button } from '../button/button.js';
 import { ButtonGroup } from '../button_group/button_group.js';
-import { SlimButton } from '../slim_button/slim_button.js';
 import { PlusIcon } from '@tcn/icons/plus_icon.js';
 import { SearchIcon } from '@tcn/icons/search_icon.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
@@ -110,41 +109,41 @@ export function PrimaryCustomColor() {
   );
 }
 
-export function SlimButtonGroup() {
+export function UtilityButtonGroup() {
   return (
     <VStack gap="12px">
       <ButtonGroup hierarchy="tertiary">
-        <SlimButton>
+        <Button utility>
           <CrossIcon />
-        </SlimButton>
-        <SlimButton>
+        </Button>
+        <Button utility>
           <SearchIcon />
-        </SlimButton>
-        <SlimButton>
+        </Button>
+        <Button utility>
           <PlusIcon />
-        </SlimButton>
+        </Button>
       </ButtonGroup>
       <ButtonGroup hierarchy="secondary">
-        <SlimButton>
+        <Button utility>
           <CrossIcon />
-        </SlimButton>
-        <SlimButton>
+        </Button>
+        <Button utility>
           <SearchIcon />
-        </SlimButton>
-        <SlimButton>
+        </Button>
+        <Button utility>
           <PlusIcon />
-        </SlimButton>
+        </Button>
       </ButtonGroup>
       <ButtonGroup hierarchy="primary">
-        <SlimButton>
+        <Button utility>
           <CrossIcon />
-        </SlimButton>
-        <SlimButton>
+        </Button>
+        <Button utility>
           <SearchIcon />
-        </SlimButton>
-        <SlimButton>
+        </Button>
+        <Button utility>
           <PlusIcon />
-        </SlimButton>
+        </Button>
       </ButtonGroup>
     </VStack>
   );
@@ -153,12 +152,12 @@ export function SlimButtonGroup() {
 export function MixedTesting() {
   return (
     <ButtonGroup hierarchy="primary">
-      <SlimButton>
+      <Button utility>
         <SearchIcon />
-      </SlimButton>
-      <SlimButton>
+      </Button>
+      <Button utility>
         <PlusIcon />
-      </SlimButton>
+      </Button>
       <Button>
         Third
         <Spacer width="4px" />

package/src/actions/index.ts

@@ -7,6 +7,5 @@ export {
   ButtonGroup,
   type ButtonGroupProps,
 } from './button/button_group/button_group.js';
-export { SlimButton } from './button/slim_button/slim_button.js';
 export { Button, type ButtonProps } from './button/button/button.js';
 export { Toggle, type ToggleProps } from './toggle/toggle.js';

package/src/form/field/field.stories.tsx

@@ -24,7 +24,7 @@ export default {
 
 export function Baseline() {
   return (
-    <FieldSet minWidth="200px" padding="8px" gap="8px" maxWidth="600px">
+    <FieldSet minWidth="200px" maxWidth="600px">
       <Field label="Default" id="field-1">
         <Input />
       </Field>
@@ -94,7 +94,7 @@ export function ResponsiveDemo() {
         <strong>Vertical layout (VField):</strong> Screens 800px or narrower
       </BodyText>
 
-      <FieldSet minWidth="200px" padding="8px" gap="8px" maxWidth="900px">
+      <FieldSet minWidth="200px" maxWidth="900px">
         <Field
           label="Email Address"
           description="Enter your primary email address"

package/src/form/field/h_field/h_field.stories.tsx

@@ -23,7 +23,7 @@ export default {
 
 export function Baseline() {
   return (
-    <FieldSet maxWidth="600px" minWidth="300px" padding="8px" gap="8px">
+    <FieldSet maxWidth="600px" minWidth="300px">
       <HField label="Default" id="field-1">
         <Input />
       </HField>

package/src/form/field/v_field/v_field.stories.tsx

@@ -23,7 +23,7 @@ export default {
 
 export function Baseline() {
   return (
-    <FieldSet maxWidth="350px" minWidth="150px" padding="8px" gap="8px">
+    <FieldSet maxWidth="350px" minWidth="150px">
       <VField label="Default" id="field-1">
         <Input />
       </VField>

package/src/form/field_set/field_set.module.css

@@ -1,19 +1,5 @@
 @layer tcn-system {
   :where(.field-set) {
     position: relative;
-    border-radius: 4px;
-  }
-
-  :where(.field-set) {
-    gap: 4px;
-  }
-
-  :where(.field-set > .field-set-body) {
-    background: #ffffff; /* tcn neutral white */
-    width: 100%;
-    max-width: 100%;
-    border-radius: 4px;
-    gap: 8px;
-    padding: 8px;
   }
 }