@tcn/ui 0.1.1 → 0.3.0

package/dist/utils/click_away_listener.js.map

@@ -1 +1 @@
-{"version":3,"file":"click_away_listener.js","sources":["../../src/utils/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\nfunction 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;AAEA,SAASC,EACPC,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;AAEvC,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;"}
+{"version":3,"file":"click_away_listener.js","sources":["../../src/utils/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;AAEvC,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/dnd/context.d.ts

@@ -0,0 +1,4 @@
+import { DragContainer } from './types.js';
+export declare const DragContainerContext: import('react').Context<DragContainer>;
+export declare function useDragContainer(): DragContainer;
+//# sourceMappingURL=context.d.ts.map

package/dist/utils/dnd/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/utils/dnd/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAShD,eAAO,MAAM,oBAAoB,wCAA6C,CAAC;AAE/E,wBAAgB,gBAAgB,IAAI,aAAa,CAWhD"}

package/dist/utils/dnd/context.js

@@ -0,0 +1,20 @@
+import { createContext as t, useContext as r } from "react";
+const n = {
+  registerHandle: () => {
+  },
+  unregisterHandle: () => {
+  },
+  isDragging: !1,
+  position: { x: 0, y: 0 }
+}, o = t(n);
+function i() {
+  const e = r(o);
+  return e === n && console.warn(
+    "useDragContainer: No DragContainerContext found. Handles may will not register or trigger drag events."
+  ), e;
+}
+export {
+  o as DragContainerContext,
+  i as useDragContainer
+};
+//# sourceMappingURL=context.js.map

package/dist/utils/dnd/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/utils/dnd/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { DragContainer } from './types.js';\n\nconst defaultValue: DragContainer = {\n  registerHandle: () => {},\n  unregisterHandle: () => {},\n  isDragging: false,\n  position: { x: 0, y: 0 },\n};\n\nexport const DragContainerContext = createContext<DragContainer>(defaultValue);\n\nexport function useDragContainer(): DragContainer {\n  const context = useContext(DragContainerContext);\n\n  if (context === defaultValue) {\n    // biome-ignore lint/suspicious/noConsole: Let devs know if they're not using the context correctly\n    console.warn(\n      'useDragContainer: No DragContainerContext found. Handles may will not register or trigger drag events.'\n    );\n  }\n\n  return context;\n}\n"],"names":["defaultValue","DragContainerContext","createContext","useDragContainer","context","useContext"],"mappings":";AAGA,MAAMA,IAA8B;AAAA,EAClC,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,YAAY;AAAA,EACZ,UAAU,EAAE,GAAG,GAAG,GAAG,EAAA;AACvB,GAEaC,IAAuBC,EAA6BF,CAAY;AAEtE,SAASG,IAAkC;AAChD,QAAMC,IAAUC,EAAWJ,CAAoB;AAE/C,SAAIG,MAAYJ,KAEd,QAAQ;AAAA,IACN;AAAA,EAAA,GAIGI;AACT;"}

package/dist/utils/dnd/draggable/draggable.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface DraggableProps {
+    children: React.ReactElement;
+    draggable?: boolean;
+}
+export declare const Draggable: React.FC<DraggableProps>;
+//# sourceMappingURL=draggable.d.ts.map

package/dist/utils/dnd/draggable/draggable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.d.ts","sourceRoot":"","sources":["../../../../src/utils/dnd/draggable/draggable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4B9C,CAAC"}

package/dist/utils/dnd/draggable/draggable.js

@@ -0,0 +1,27 @@
+import { jsx as s } from "react/jsx-runtime";
+import i, { useMemo as n } from "react";
+import { DragContainerContext as g } from "../context.js";
+import l from "clsx";
+import { useMakeDragContainer as p } from "../hooks/use_drag_container.js";
+import '../../../draggable.css';const c = "_draggable_db40376", m = { draggable: c }, y = ({
+  children: a,
+  draggable: t = !0
+}) => {
+  const o = p({}), r = n(
+    () => ({
+      "--position-x": `${o.position.x}px`,
+      "--position-y": `${o.position.y}px`
+    }),
+    [o.position]
+  ), e = i.cloneElement(a, {
+    className: l("tcn-draggable", m.draggable, a.props.className),
+    style: { ...r, ...a.props.style },
+    "data-is-dragging": o.isDragging,
+    "data-is-draggable": t
+  });
+  return /* @__PURE__ */ s(g.Provider, { value: o, children: e });
+};
+export {
+  y as Draggable
+};
+//# sourceMappingURL=draggable.js.map

package/dist/utils/dnd/draggable/draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.js","sources":["../../../../src/utils/dnd/draggable/draggable.tsx"],"sourcesContent":["import React, { useMemo, type CSSProperties } from 'react';\n\nimport { DragContainerContext } from '../context.js';\nimport clsx from 'clsx';\nimport { useMakeDragContainer } from '../hooks/use_drag_container.js';\n\nimport styles from './draggable.module.css';\n\nexport interface DraggableProps {\n  children: React.ReactElement;\n  draggable?: boolean;\n}\n\nexport const Draggable: React.FC<DraggableProps> = ({\n  children,\n  draggable: isDraggable = true,\n}) => {\n  const context = useMakeDragContainer({});\n\n  const cssVariables = useMemo(\n    () =>\n      ({\n        '--position-x': `${context.position.x}px`,\n        '--position-y': `${context.position.y}px`,\n      }) as CSSProperties,\n\n    [context.position]\n  );\n\n  const clonedChildren = React.cloneElement(children, {\n    className: clsx('tcn-draggable', styles.draggable, children.props.className),\n    style: { ...cssVariables, ...children.props.style },\n    'data-is-dragging': context.isDragging,\n    'data-is-draggable': isDraggable,\n  });\n\n  return (\n    <DragContainerContext.Provider value={context}>\n      {clonedChildren}\n    </DragContainerContext.Provider>\n  );\n};\n"],"names":["Draggable","children","isDraggable","context","useMakeDragContainer","cssVariables","useMemo","clonedChildren","React","clsx","styles","DragContainerContext"],"mappings":";;;;;sDAaaA,IAAsC,CAAC;AAAA,EAClD,UAAAC;AAAA,EACA,WAAWC,IAAc;AAC3B,MAAM;AACJ,QAAMC,IAAUC,EAAqB,EAAE,GAEjCC,IAAeC;AAAA,IACnB,OACG;AAAA,MACC,gBAAgB,GAAGH,EAAQ,SAAS,CAAC;AAAA,MACrC,gBAAgB,GAAGA,EAAQ,SAAS,CAAC;AAAA,IAAA;AAAA,IAGzC,CAACA,EAAQ,QAAQ;AAAA,EAAA,GAGbI,IAAiBC,EAAM,aAAaP,GAAU;AAAA,IAClD,WAAWQ,EAAK,iBAAiBC,EAAO,WAAWT,EAAS,MAAM,SAAS;AAAA,IAC3E,OAAO,EAAE,GAAGI,GAAc,GAAGJ,EAAS,MAAM,MAAA;AAAA,IAC5C,oBAAoBE,EAAQ;AAAA,IAC5B,qBAAqBD;AAAA,EAAA,CACtB;AAED,2BACGS,EAAqB,UAArB,EAA8B,OAAOR,GACnC,UAAAI,GACH;AAEJ;"}

package/dist/utils/dnd/handle.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface DragHandleProps {
+    children: React.ReactElement;
+}
+export declare const DragHandle: React.FC<DragHandleProps>;
+//# sourceMappingURL=handle.d.ts.map

package/dist/utils/dnd/handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["../../../src/utils/dnd/handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsBhD,CAAC"}

package/dist/utils/dnd/handle.js

@@ -0,0 +1,22 @@
+import s, { useRef as f, useEffect as u } from "react";
+import a from "clsx";
+import { useDragContainer as l } from "./context.js";
+import { useForkRef as m } from "../hooks/use_fork_ref.js";
+const d = ({ children: e }) => {
+  const { registerHandle: t, unregisterHandle: n } = l(), r = f(null);
+  u(() => {
+    if (r.current != null)
+      return t(r), () => {
+        r.current != null && n(r);
+      };
+  }, [t, n]);
+  const o = m(r, e.props.ref);
+  return s.cloneElement(e, {
+    className: a("tcn-drag-handle", e.props.className),
+    ref: o
+  });
+};
+export {
+  d as DragHandle
+};
+//# sourceMappingURL=handle.js.map

package/dist/utils/dnd/handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle.js","sources":["../../../src/utils/dnd/handle.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useDragContainer } from './context.js';\nimport { useForkRef } from '../hooks/use_fork_ref.js';\n\nexport interface DragHandleProps {\n  children: React.ReactElement;\n}\n\nexport const DragHandle: React.FC<DragHandleProps> = ({ children }) => {\n  const { registerHandle, unregisterHandle } = useDragContainer();\n  const ref = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (ref.current == null) {\n      return;\n    }\n    registerHandle(ref);\n    return () => {\n      if (ref.current == null) {\n        return;\n      }\n      unregisterHandle(ref);\n    };\n  }, [registerHandle, unregisterHandle]);\n\n  const mergedRef = useForkRef(ref, children.props.ref);\n  return React.cloneElement(children, {\n    className: clsx('tcn-drag-handle', children.props.className),\n    ref: mergedRef,\n  });\n};\n"],"names":["DragHandle","children","registerHandle","unregisterHandle","useDragContainer","ref","useRef","useEffect","mergedRef","useForkRef","React","clsx"],"mappings":";;;;AASO,MAAMA,IAAwC,CAAC,EAAE,UAAAC,QAAe;AACrE,QAAM,EAAE,gBAAAC,GAAgB,kBAAAC,EAAA,IAAqBC,EAAA,GACvCC,IAAMC,EAA2B,IAAI;AAE3C,EAAAC,EAAU,MAAM;AACd,QAAIF,EAAI,WAAW;AAGnB,aAAAH,EAAeG,CAAG,GACX,MAAM;AACX,QAAIA,EAAI,WAAW,QAGnBF,EAAiBE,CAAG;AAAA,MACtB;AAAA,EACF,GAAG,CAACH,GAAgBC,CAAgB,CAAC;AAErC,QAAMK,IAAYC,EAAWJ,GAAKJ,EAAS,MAAM,GAAG;AACpD,SAAOS,EAAM,aAAaT,GAAU;AAAA,IAClC,WAAWU,EAAK,mBAAmBV,EAAS,MAAM,SAAS;AAAA,IAC3D,KAAKO;AAAA,EAAA,CACN;AACH;"}

package/dist/utils/dnd/hooks/use_drag_container.d.ts

@@ -0,0 +1,7 @@
+import { Position } from '../../index.js';
+import { DragContainer } from '../types.js';
+export interface UseDragContainerOptions {
+    initialPosition?: Position;
+}
+export declare function useMakeDragContainer(options: UseDragContainerOptions): DragContainer;
+//# sourceMappingURL=use_drag_container.d.ts.map

package/dist/utils/dnd/hooks/use_drag_container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_drag_container.d.ts","sourceRoot":"","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,uBAAuB;IACtC,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,uBAAuB,GAAG,aAAa,CAgCpF"}

package/dist/utils/dnd/hooks/use_drag_container.js

@@ -0,0 +1,30 @@
+import { useState as n, useRef as b, useCallback as o } from "react";
+import { useDraggable as k } from "./use_draggable.js";
+function m(l) {
+  const [c, a] = n([]), r = b(l.initialPosition ?? { x: 0, y: 0 }), [s, g] = n(r.current), [u, i] = n(!1);
+  k({
+    handles: c,
+    startDragCallback: () => {
+      i(!0);
+    },
+    dragCallback: (e, t) => {
+      g({
+        x: r.current.x + e,
+        y: r.current.y + t
+      });
+    },
+    endDragCallback: () => {
+      i(!1), r.current = s;
+    }
+  });
+  const f = o((e) => {
+    a((t) => [...t, e]);
+  }, []), d = o((e) => {
+    a((t) => t.filter((D) => D !== e));
+  }, []);
+  return { registerHandle: f, unregisterHandle: d, position: s, isDragging: u };
+}
+export {
+  m as useMakeDragContainer
+};
+//# sourceMappingURL=use_drag_container.js.map

package/dist/utils/dnd/hooks/use_drag_container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_drag_container.js","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useDraggable } from './use_draggable.js';\nimport type { Position } from '../../index.js';\nimport type { DragContainer } from '../types.js';\n\nexport interface UseDragContainerOptions {\n  initialPosition?: Position;\n}\n\nexport function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {\n  const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);\n  const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });\n  const [position, setPosition] = useState(positionRef.current);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useDraggable({\n    handles: handles,\n    startDragCallback: () => {\n      setIsDragging(true);\n    },\n    dragCallback: (deltaX, deltaY) => {\n      setPosition({\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      });\n    },\n    endDragCallback: () => {\n      setIsDragging(false);\n      positionRef.current = position;\n    },\n  });\n\n  const registerHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => [...prev, handle]);\n  }, []);\n\n  const unregisterHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => prev.filter(h => h !== handle));\n  }, []);\n\n  return { registerHandle, unregisterHandle, position, isDragging };\n}\n"],"names":["useMakeDragContainer","options","handles","setHandles","useState","positionRef","useRef","position","setPosition","isDragging","setIsDragging","useDraggable","deltaX","deltaY","registerHandle","useCallback","handle","prev","unregisterHandle","h"],"mappings":";;AASO,SAASA,EAAqBC,GAAiD;AACpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAyC,CAAA,CAAE,GACnEC,IAAcC,EAAiBL,EAAQ,mBAAmB,EAAE,GAAG,GAAG,GAAG,GAAG,GACxE,CAACM,GAAUC,CAAW,IAAIJ,EAASC,EAAY,OAAO,GACtD,CAACI,GAAYC,CAAa,IAAIN,EAAS,EAAK;AAElD,EAAAO,EAAa;AAAA,IACX,SAAAT;AAAA,IACA,mBAAmB,MAAM;AACvB,MAAAQ,EAAc,EAAI;AAAA,IACpB;AAAA,IACA,cAAc,CAACE,GAAQC,MAAW;AAChC,MAAAL,EAAY;AAAA,QACV,GAAGH,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,CAC5B;AAAA,IACH;AAAA,IACA,iBAAiB,MAAM;AACrB,MAAAH,EAAc,EAAK,GACnBL,EAAY,UAAUE;AAAA,IACxB;AAAA,EAAA,CACD;AAED,QAAMO,IAAiBC,EAAY,CAACC,MAAyC;AAC3E,IAAAb,EAAW,CAAAc,MAAQ,CAAC,GAAGA,GAAMD,CAAM,CAAC;AAAA,EACtC,GAAG,CAAA,CAAE,GAECE,IAAmBH,EAAY,CAACC,MAAyC;AAC7E,IAAAb,EAAW,OAAQc,EAAK,OAAO,CAAAE,MAAKA,MAAMH,CAAM,CAAC;AAAA,EACnD,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,gBAAAF,GAAgB,kBAAAI,GAAkB,UAAAX,GAAU,YAAAE,EAAA;AACvD;"}

package/dist/utils/{hooks → dnd/hooks}/use_draggable.d.ts

@@ -1,8 +1,8 @@
-interface DraggableOptions {
+export interface UseDraggableOptions {
     startDragCallback: (startX: number, startY: number) => void;
     dragCallback: (deltaX: number, deltaY: number, startX: number, startY: number) => void;
     endDragCallback: (deltaX: number, deltaY: number, startX: number, startY: number) => void;
+    handles?: React.RefObject<HTMLElement>[] | React.RefObject<HTMLElement>;
 }
-export declare function useDraggable(options: DraggableOptions): import('react').MutableRefObject<HTMLElement | null>;
-export {};
+export declare function useDraggable(options: UseDraggableOptions): void;
 //# sourceMappingURL=use_draggable.d.ts.map

package/dist/utils/dnd/hooks/use_draggable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_draggable.d.ts","sourceRoot":"","sources":["../../../../src/utils/dnd/hooks/use_draggable.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvF,eAAe,EAAE,CACf,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,KACX,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CACzE;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,QAiExD"}

package/dist/utils/dnd/hooks/use_draggable.js

@@ -0,0 +1,41 @@
+import { useRef as s, useEffect as f } from "react";
+function g(t) {
+  const m = s(t.startDragCallback);
+  m.current = t.startDragCallback;
+  const i = s(t.dragCallback);
+  i.current = t.dragCallback;
+  const v = s(t.endDragCallback);
+  v.current = t.endDragCallback, f(() => {
+    const r = t.handles;
+    if (r === void 0) return;
+    let n = 0, a = 0;
+    function d(e) {
+      const l = e.clientX - n, u = e.clientY - a;
+      i.current(l, u, n, a);
+    }
+    function o(e) {
+      const l = e.clientX !== void 0 ? e.clientX - n : 0, u = e.clientY !== void 0 ? e.clientY - a : 0;
+      v.current(l, u, n, a), document.body.removeEventListener("mousemove", d), document.body.removeEventListener("mouseup", o), document.body.removeEventListener("mouseleave", o);
+    }
+    function c(e) {
+      n = e.clientX, a = e.clientY, m.current(n, a), document.body.addEventListener("mousemove", d), document.body.addEventListener("mouseup", o), document.body.addEventListener("mouseleave", o);
+    }
+    if (Array.isArray(r))
+      for (const e of r)
+        e?.current?.addEventListener("mousedown", c);
+    else
+      r?.current?.addEventListener("mousedown", c);
+    return () => {
+      if (Array.isArray(r))
+        for (const e of r)
+          e?.current?.removeEventListener("mousedown", c);
+      else
+        r?.current?.removeEventListener("mousedown", c);
+      document.body.removeEventListener("mousemove", d), document.body.removeEventListener("mouseup", o), document.body.removeEventListener("mouseleave", o);
+    };
+  }, [t.handles]);
+}
+export {
+  g as useDraggable
+};
+//# sourceMappingURL=use_draggable.js.map

package/dist/utils/dnd/hooks/use_draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_draggable.js","sources":["../../../../src/utils/dnd/hooks/use_draggable.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport interface UseDraggableOptions {\n  startDragCallback: (startX: number, startY: number) => void;\n  dragCallback: (deltaX: number, deltaY: number, startX: number, startY: number) => void;\n  endDragCallback: (\n    deltaX: number,\n    deltaY: number,\n    startX: number,\n    startY: number\n  ) => void;\n  handles?: React.RefObject<HTMLElement>[] | React.RefObject<HTMLElement>;\n}\n\nexport function useDraggable(options: UseDraggableOptions) {\n  const startDragCallbackRef = useRef(options.startDragCallback);\n  startDragCallbackRef.current = options.startDragCallback;\n  const dragCallbackRef = useRef(options.dragCallback);\n  dragCallbackRef.current = options.dragCallback;\n  const endDragCallbackRef = useRef(options.endDragCallback);\n  endDragCallbackRef.current = options.endDragCallback;\n\n  useEffect(() => {\n    const handles = options.handles;\n    if (handles === undefined) return;\n    let startX = 0;\n    let startY = 0;\n\n    function drag(event: MouseEvent) {\n      const deltaX = event.clientX - startX;\n      const deltaY = event.clientY - startY;\n\n      dragCallbackRef.current(deltaX, deltaY, startX, startY);\n    }\n\n    function endDrag(event: MouseEvent) {\n      const deltaX = event.clientX !== undefined ? event.clientX - startX : 0;\n      const deltaY = event.clientY !== undefined ? event.clientY - startY : 0;\n      endDragCallbackRef.current(deltaX, deltaY, startX, startY);\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseleave', endDrag);\n    }\n\n    function startDrag(event: MouseEvent) {\n      startX = event.clientX;\n      startY = event.clientY;\n\n      startDragCallbackRef.current(startX, startY);\n\n      document.body.addEventListener('mousemove', drag);\n      document.body.addEventListener('mouseup', endDrag);\n      document.body.addEventListener('mouseleave', endDrag);\n    }\n\n    if (Array.isArray(handles)) {\n      for (const element of handles) {\n        if (element != null) {\n          element.current?.addEventListener('mousedown', startDrag);\n        }\n      }\n    } else {\n      handles?.current?.addEventListener('mousedown', startDrag);\n    }\n    return () => {\n      if (Array.isArray(handles)) {\n        for (const element of handles) {\n          if (element != null) {\n            element.current?.removeEventListener('mousedown', startDrag);\n          }\n        }\n      } else {\n        handles?.current?.removeEventListener('mousedown', startDrag);\n      }\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseleave', endDrag);\n    };\n  }, [options.handles]);\n}\n"],"names":["useDraggable","options","startDragCallbackRef","useRef","dragCallbackRef","endDragCallbackRef","useEffect","handles","startX","startY","drag","event","deltaX","deltaY","endDrag","startDrag","element"],"mappings":";AAcO,SAASA,EAAaC,GAA8B;AACzD,QAAMC,IAAuBC,EAAOF,EAAQ,iBAAiB;AAC7D,EAAAC,EAAqB,UAAUD,EAAQ;AACvC,QAAMG,IAAkBD,EAAOF,EAAQ,YAAY;AACnD,EAAAG,EAAgB,UAAUH,EAAQ;AAClC,QAAMI,IAAqBF,EAAOF,EAAQ,eAAe;AACzD,EAAAI,EAAmB,UAAUJ,EAAQ,iBAErCK,EAAU,MAAM;AACd,UAAMC,IAAUN,EAAQ;AACxB,QAAIM,MAAY,OAAW;AAC3B,QAAIC,IAAS,GACTC,IAAS;AAEb,aAASC,EAAKC,GAAmB;AAC/B,YAAMC,IAASD,EAAM,UAAUH,GACzBK,IAASF,EAAM,UAAUF;AAE/B,MAAAL,EAAgB,QAAQQ,GAAQC,GAAQL,GAAQC,CAAM;AAAA,IACxD;AAEA,aAASK,EAAQH,GAAmB;AAClC,YAAMC,IAASD,EAAM,YAAY,SAAYA,EAAM,UAAUH,IAAS,GAChEK,IAASF,EAAM,YAAY,SAAYA,EAAM,UAAUF,IAAS;AACtE,MAAAJ,EAAmB,QAAQO,GAAQC,GAAQL,GAAQC,CAAM,GACzD,SAAS,KAAK,oBAAoB,aAAaC,CAAI,GACnD,SAAS,KAAK,oBAAoB,WAAWI,CAAO,GACpD,SAAS,KAAK,oBAAoB,cAAcA,CAAO;AAAA,IACzD;AAEA,aAASC,EAAUJ,GAAmB;AACpC,MAAAH,IAASG,EAAM,SACfF,IAASE,EAAM,SAEfT,EAAqB,QAAQM,GAAQC,CAAM,GAE3C,SAAS,KAAK,iBAAiB,aAAaC,CAAI,GAChD,SAAS,KAAK,iBAAiB,WAAWI,CAAO,GACjD,SAAS,KAAK,iBAAiB,cAAcA,CAAO;AAAA,IACtD;AAEA,QAAI,MAAM,QAAQP,CAAO;AACvB,iBAAWS,KAAWT;AACpB,QACES,GAAQ,SAAS,iBAAiB,aAAaD,CAAS;AAAA;AAI5D,MAAAR,GAAS,SAAS,iBAAiB,aAAaQ,CAAS;AAE3D,WAAO,MAAM;AACX,UAAI,MAAM,QAAQR,CAAO;AACvB,mBAAWS,KAAWT;AACpB,UACES,GAAQ,SAAS,oBAAoB,aAAaD,CAAS;AAAA;AAI/D,QAAAR,GAAS,SAAS,oBAAoB,aAAaQ,CAAS;AAE9D,eAAS,KAAK,oBAAoB,aAAaL,CAAI,GACnD,SAAS,KAAK,oBAAoB,WAAWI,CAAO,GACpD,SAAS,KAAK,oBAAoB,cAAcA,CAAO;AAAA,IACzD;AAAA,EACF,GAAG,CAACb,EAAQ,OAAO,CAAC;AACtB;"}

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

@@ -0,0 +1,10 @@
+export interface DragContainer {
+    registerHandle: (handle: React.RefObject<HTMLElement>) => void;
+    unregisterHandle: (handle: React.RefObject<HTMLElement>) => void;
+    isDragging: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/dnd/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,gBAAgB,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACjE,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpC"}

package/dist/utils/dnd/types.js

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

package/dist/utils/dnd/types.js.map

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

package/dist/utils/index.d.ts

@@ -1,17 +1,18 @@
-export * from './focus_redirect.js';
 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 './hooks/make_context_hook.js';
-export * from './hooks/use_draggable.js';
 export * from './hooks/use_fork_ref.js';
 export * from './hooks/use_media_query.js';
 export * from './hooks/use_resize_observer.js';
 export * from './default_value.js';
 export * from './calendar/calendar_date.js';
 export * from './calendar/calendar_dates_generator.js';
-export * from './calendar/month.js';
-export * from './calendar/get_months_of_year.js';
 export * from './calendar/get_days_of_week.js';
-export * from './types/variations.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 './responsive/responsive_renderer.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,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,qBAAqB,CAAC;AACpC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAE/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC"}
+{"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,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,uBAAuB,CAAC;AAEtC,cAAc,qCAAqC,CAAC"}

package/dist/utils/index.js

@@ -1,30 +1,33 @@
-import { FocusRedirect as o } from "./focus_redirect.js";
-import { ClickAwayListener as f } from "./click_away_listener.js";
-import { ScrollAwayListener as m } from "./scroll_away_listener.js";
-import { makeContextHook as p } from "./hooks/make_context_hook.js";
-import { useDraggable as i } from "./hooks/use_draggable.js";
+import { ClickAwayListener as o, isEventWithinElement as t } from "./click_away_listener.js";
+import { FocusRedirect as m } from "./focus_redirect.js";
+import { ScrollAwayListener as s } from "./scroll_away_listener.js";
+import { useDraggable as a } from "./dnd/hooks/use_draggable.js";
+import { makeContextHook as i } from "./hooks/make_context_hook.js";
 import { useForkRef as u } from "./hooks/use_fork_ref.js";
-import { useMediaQuery as l } from "./hooks/use_media_query.js";
-import { TriggerConfig as c, useResizeObserver as d } from "./hooks/use_resize_observer.js";
+import { useMediaQuery as d } from "./hooks/use_media_query.js";
+import { TriggerConfig as R, useResizeObserver as c } from "./hooks/use_resize_observer.js";
 import { defaultValue as C } from "./default_value.js";
-import { CalendarDatesGenerator as M } from "./calendar/calendar_dates_generator.js";
-import { Month as R } from "./calendar/month.js";
-import { getMonthsOfYear as h } from "./calendar/get_months_of_year.js";
-import { getDaysOfWeek as A } from "./calendar/get_days_of_week.js";
+import { CalendarDatesGenerator as v } from "./calendar/calendar_dates_generator.js";
+import { getDaysOfWeek as M } from "./calendar/get_days_of_week.js";
+import { getMonthsOfYear as b } from "./calendar/get_months_of_year.js";
+import { Month as A } from "./calendar/month.js";
+import { ResponsiveRenderer as F } from "./responsive/responsive_renderer.js";
 export {
-  M as CalendarDatesGenerator,
-  f as ClickAwayListener,
-  o as FocusRedirect,
-  R as Month,
-  m as ScrollAwayListener,
-  c as TriggerConfig,
+  v as CalendarDatesGenerator,
+  o as ClickAwayListener,
+  m as FocusRedirect,
+  A as Month,
+  F as ResponsiveRenderer,
+  s as ScrollAwayListener,
+  R as TriggerConfig,
   C as defaultValue,
-  A as getDaysOfWeek,
-  h as getMonthsOfYear,
-  p as makeContextHook,
-  i as useDraggable,
+  M as getDaysOfWeek,
+  b as getMonthsOfYear,
+  t as isEventWithinElement,
+  i as makeContextHook,
+  a as useDraggable,
   u as useForkRef,
-  l as useMediaQuery,
-  d as useResizeObserver
+  d as useMediaQuery,
+  c 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/mouse_leave_region.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface MouseLeaveRegionProps {
+    elementsRefs: (React.RefObject<Element> | React.MutableRefObject<Element>)[];
+    onMouseLeave: () => void;
+    buffer?: number;
+}
+export declare function MouseLeaveRegion({ onMouseLeave, elementsRefs: elementRefs, buffer, }: MouseLeaveRegionProps): null;
+//# sourceMappingURL=mouse_leave_region.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mouse_leave_region.d.ts","sourceRoot":"","sources":["../../src/utils/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/mouse_leave_region.js

@@ -0,0 +1,26 @@
+import { useEffect as u } from "react";
+function v({
+  onMouseLeave: o,
+  elementsRefs: i,
+  buffer: t = 8
+}) {
+  return u(() => {
+    const r = (e) => {
+      i.some((c) => {
+        const s = c.current;
+        if (s != null) {
+          const n = s.getBoundingClientRect(), l = Math.max(e.clientX - t, n.left), m = Math.min(e.clientX + t, n.right), a = Math.max(e.clientY - t, n.top), p = Math.min(e.clientY + t, n.bottom);
+          return l <= m && a <= p;
+        }
+        return !1;
+      }) || o();
+    };
+    return window.addEventListener("mousemove", r), () => {
+      window.removeEventListener("mousemove", r);
+    };
+  }, [o, i, t]), null;
+}
+export {
+  v as MouseLeaveRegion
+};
+//# sourceMappingURL=mouse_leave_region.js.map

package/dist/utils/mouse_leave_region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mouse_leave_region.js","sources":["../../src/utils/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/types/dimensions.d.ts

@@ -6,7 +6,17 @@ export interface Dimensions {
     width: number;
     height: number;
 }
-export interface Rect {
+export interface Rectangle {
+    dimensions: Dimensions;
+    position: Position;
+}
+export interface RectCorners {
+    topLeft: Position;
+    topRight: Position;
+    bottomLeft: Position;
+    bottomRight: Position;
+}
+export interface RectEdges {
     top: number;
     right: number;
     bottom: number;

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

@@ -1 +1 @@
-{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../../src/utils/types/dimensions.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,IAAI;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd"}
+{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../../src/utils/types/dimensions.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,QAAQ,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,QAAQ,CAAC;IACrB,WAAW,EAAE,QAAQ,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -41,6 +41,12 @@
       "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",
@@ -128,8 +134,8 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "react-color": "^2.19.3",
-    "@tcn/icons": "2.1.1",
-    "@tcn/state": "1.0.1"
+    "@tcn/icons": "2.2.0",
+    "@tcn/state": "1.1.0"
   },
   "scripts": {
     "build": "vite build",

package/src/inputs/color_input/color_input.tsx

@@ -11,7 +11,7 @@ import { ColorPicker } from './color_picker.js';
 import { Input } from '../input/input.js';
 import styles from './color_input.module.css';
 
-import { Popper } from '../../overlay/popper/popper.js';
+import { Popper } from '../../overlay/popper/legacy/popper.js';
 
 export interface ColorInputProps
   extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {

package/src/inputs/date_picker/date_picker_input.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Hierarchy } from '../../utils/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
-import { Popper } from '../../overlay/popper/popper.js';
+import { Popper } from '../../overlay/popper/legacy/popper.js';
 import { clsx } from 'clsx';
 import { HTMLAttributes } from 'react';
 import { Button } from '../../actions/index.js';

package/src/inputs/date_picker/date_picker_year_input.tsx

@@ -2,7 +2,7 @@ import { Button } from '../../actions/index.js';
 import { clsx } from 'clsx';
 import styles from './date_picker_year_input.module.css';
 import { useState } from 'react';
-import { Popper } from '../../overlay/popper/popper.js';
+import { Popper } from '../../overlay/popper/legacy/popper.js';
 import { DatePickerPresenter } from './date_picker_presenter.js';
 import { DatePickerYearSelector } from './date_picker_year_selector.js';
 import { useSignalValue } from '@tcn/state';

package/src/inputs/phone_number_input/phone_number_input.tsx

@@ -118,6 +118,8 @@ function getCountryCodeFromValue(
 export interface PhoneNumberInputProps
   extends Omit<HStackProps, 'onChange' | 'children'> {
   value?: string;
+  name?: string;
+  autoComplete?: string;
   defaultCountry?: string;
   /**
    * Callback fired when the phone number value changes.
@@ -135,6 +137,8 @@ export interface PhoneNumberInputProps
 export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
   {
     value = '',
+    name,
+    autoComplete,
     defaultCountry = 'US',
     onChange,
     countrySelectRef: countryRef,
@@ -345,6 +349,8 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
         {obfuscateValue ? (
           <MaskInput
             key="obfuscated"
+            name={name}
+            autoComplete={autoComplete}
             ref={forkedInputRef}
             value=""
             mask={createObfuscatedMasks(currentMasks)}
@@ -365,6 +371,8 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
         ) : (
           <MaskInput
             key="normal"
+            name={name}
+            autoComplete={autoComplete}
             ref={forkedInputRef}
             value={phoneNumber}
             mask={currentMasks}

package/src/inputs/suggestions/suggestion_list.tsx

@@ -10,7 +10,7 @@ import { OptionProps, Option } from '../options/option.js';
 import styles from './suggestion_list.module.css';
 
 import { Button } from '../../actions/index.js';
-import { Popper } from '../../overlay/popper/popper.js';
+import { Popper } from '../../overlay/popper/legacy/popper.js';
 
 const MAX_RESULTS = 50;
 const BATCH_SIZE = 50;

package/src/inputs/textarea/textarea.tsx

@@ -1,10 +1,10 @@
 import { clsx } from 'clsx';
 import React from 'react';
-import { HTMLAttributes } from 'react';
+import { TextareaHTMLAttributes } from 'react';
 import styles from './textarea.module.css';
 
 export interface TextareaProps
-  extends Omit<HTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
   value?: string;
   width?: string;
   height?: string;

package/src/layouts/header/header.tsx

@@ -4,7 +4,6 @@ import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
 import styles from './header.module.css';
 
-// UtilityBar
 export interface HeaderProps extends Omit<HStackProps, 'as'> {
   hierarchy?: Hierarchy;
   size?: Size;