@tcn/ui 0.1.1 → 0.3.0

package/src/utils/{__stories__ → dnd/__stories__}/use_draggable.stories.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useRef } from 'react';
 import { useDraggable } from '../hooks/use_draggable';
-import { Box } from '../../stacks/box/box.js';
+import { Box } from '../../../stacks/box/box.js';
 
 export default {
-  title: 'Hooks/useDraggable',
+  title: 'Utils/useDraggable',
   component: <></>,
   args: {
     startX: 200,
@@ -16,8 +16,9 @@ export const BasicDraggable = {
     const [position, setPosition] = useState({ x: args.startX, y: args.startY });
     const [isDragging, setIsDragging] = useState(false);
     const elementStartPosition = useRef({ x: args.startX, y: args.startY });
-
-    const dragRef = useDraggable({
+    const dragRef = useRef<HTMLDivElement>(null);
+    useDraggable({
+      handles: dragRef,
       startDragCallback: () => {
         setIsDragging(true);
         elementStartPosition.current = { x: position.x, y: position.y };
@@ -76,8 +77,10 @@ export const MultipleDraggables = {
 
     const createDragHandlers = (
       id: number,
-      elementStartPosition: React.RefObject<{ x: number; y: number }>
+      elementStartPosition: React.RefObject<{ x: number; y: number }>,
+      handleRef: React.RefObject<HTMLDivElement>
     ) => ({
+      handles: handleRef,
       startDragCallback: () => {
         const box = boxes.find(b => b.id === id);
         if (box && elementStartPosition.current) {
@@ -120,11 +123,12 @@ export const MultipleDraggables = {
         </p>
         {boxes.map(box => {
           const elementStartPosition = useRef({ x: box.x, y: box.y });
-          const dragRef = useDraggable(createDragHandlers(box.id, elementStartPosition));
+          const handleRef = useRef<HTMLDivElement>(null);
+          useDraggable(createDragHandlers(box.id, elementStartPosition, handleRef));
           return (
             <Box
               key={box.id}
-              ref={dragRef as React.RefObject<HTMLDivElement>}
+              ref={handleRef}
               style={{
                 width: '90px',
                 height: '100px',
@@ -155,8 +159,9 @@ export const CustomDragHandle = {
     const [position, setPosition] = useState({ x: args.startX, y: args.startY });
     const [isDragging, setIsDragging] = useState(false);
     const elementStartPosition = useRef({ x: args.startX, y: args.startY });
-
-    const dragRef = useDraggable({
+    const handleRef = useRef<HTMLDivElement>(null);
+    useDraggable({
+      handles: handleRef,
       startDragCallback: () => {
         setIsDragging(true);
         elementStartPosition.current = { x: position.x, y: position.y };
@@ -189,7 +194,7 @@ export const CustomDragHandle = {
           }}
         >
           <Box
-            ref={dragRef as React.RefObject<HTMLDivElement>}
+            ref={handleRef}
             style={{
               height: '30px',
               backgroundColor: '#2196F3',

package/src/utils/dnd/context.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+import type { DragContainer } from './types.js';
+
+const defaultValue: DragContainer = {
+  registerHandle: () => {},
+  unregisterHandle: () => {},
+  isDragging: false,
+  position: { x: 0, y: 0 },
+};
+
+export const DragContainerContext = createContext<DragContainer>(defaultValue);
+
+export function useDragContainer(): DragContainer {
+  const context = useContext(DragContainerContext);
+
+  if (context === defaultValue) {
+    // biome-ignore lint/suspicious/noConsole: Let devs know if they're not using the context correctly
+    console.warn(
+      'useDragContainer: No DragContainerContext found. Handles may will not register or trigger drag events.'
+    );
+  }
+
+  return context;
+}

package/src/utils/dnd/draggable/draggable.module.css

@@ -0,0 +1,8 @@
+.draggable {
+  position: relative;
+}
+
+.draggable[data-is-draggable="true"] {
+  left: var(--position-x);
+  top: var(--position-y);
+}

package/src/utils/dnd/draggable/draggable.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo, type CSSProperties } from 'react';
+
+import { DragContainerContext } from '../context.js';
+import clsx from 'clsx';
+import { useMakeDragContainer } from '../hooks/use_drag_container.js';
+
+import styles from './draggable.module.css';
+
+export interface DraggableProps {
+  children: React.ReactElement;
+  draggable?: boolean;
+}
+
+export const Draggable: React.FC<DraggableProps> = ({
+  children,
+  draggable: isDraggable = true,
+}) => {
+  const context = useMakeDragContainer({});
+
+  const cssVariables = useMemo(
+    () =>
+      ({
+        '--position-x': `${context.position.x}px`,
+        '--position-y': `${context.position.y}px`,
+      }) as CSSProperties,
+
+    [context.position]
+  );
+
+  const clonedChildren = React.cloneElement(children, {
+    className: clsx('tcn-draggable', styles.draggable, children.props.className),
+    style: { ...cssVariables, ...children.props.style },
+    'data-is-dragging': context.isDragging,
+    'data-is-draggable': isDraggable,
+  });
+
+  return (
+    <DragContainerContext.Provider value={context}>
+      {clonedChildren}
+    </DragContainerContext.Provider>
+  );
+};

package/src/utils/dnd/handle.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { useDragContainer } from './context.js';
+import { useForkRef } from '../hooks/use_fork_ref.js';
+
+export interface DragHandleProps {
+  children: React.ReactElement;
+}
+
+export const DragHandle: React.FC<DragHandleProps> = ({ children }) => {
+  const { registerHandle, unregisterHandle } = useDragContainer();
+  const ref = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current == null) {
+      return;
+    }
+    registerHandle(ref);
+    return () => {
+      if (ref.current == null) {
+        return;
+      }
+      unregisterHandle(ref);
+    };
+  }, [registerHandle, unregisterHandle]);
+
+  const mergedRef = useForkRef(ref, children.props.ref);
+  return React.cloneElement(children, {
+    className: clsx('tcn-drag-handle', children.props.className),
+    ref: mergedRef,
+  });
+};

package/src/utils/dnd/hooks/use_drag_container.ts

@@ -0,0 +1,42 @@
+import { useCallback, useRef, useState } from 'react';
+import { useDraggable } from './use_draggable.js';
+import type { Position } from '../../index.js';
+import type { DragContainer } from '../types.js';
+
+export interface UseDragContainerOptions {
+  initialPosition?: Position;
+}
+
+export function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {
+  const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);
+  const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });
+  const [position, setPosition] = useState(positionRef.current);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useDraggable({
+    handles: handles,
+    startDragCallback: () => {
+      setIsDragging(true);
+    },
+    dragCallback: (deltaX, deltaY) => {
+      setPosition({
+        x: positionRef.current.x + deltaX,
+        y: positionRef.current.y + deltaY,
+      });
+    },
+    endDragCallback: () => {
+      setIsDragging(false);
+      positionRef.current = position;
+    },
+  });
+
+  const registerHandle = useCallback((handle: React.RefObject<HTMLElement>) => {
+    setHandles(prev => [...prev, handle]);
+  }, []);
+
+  const unregisterHandle = useCallback((handle: React.RefObject<HTMLElement>) => {
+    setHandles(prev => prev.filter(h => h !== handle));
+  }, []);
+
+  return { registerHandle, unregisterHandle, position, isDragging };
+}

package/src/utils/{hooks → dnd/hooks}/use_draggable.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-interface DraggableOptions {
+export interface UseDraggableOptions {
   startDragCallback: (startX: number, startY: number) => void;
   dragCallback: (deltaX: number, deltaY: number, startX: number, startY: number) => void;
   endDragCallback: (
@@ -9,16 +9,10 @@ interface DraggableOptions {
     startX: number,
     startY: number
   ) => void;
+  handles?: React.RefObject<HTMLElement>[] | React.RefObject<HTMLElement>;
 }
 
-// const handleRef: Ref<HTMLElement> = useDraggable(
-//   (startX: number, startY: number) => {},
-//   (deltaX: number, deltaY: number, startX: number, startY: number) => {},
-//   (deltaX: number, deltaY: number, startX: number, startY: number) => {}
-// );
-
-export function useDraggable(options: DraggableOptions) {
-  const ref = useRef<HTMLElement | null>(null);
+export function useDraggable(options: UseDraggableOptions) {
   const startDragCallbackRef = useRef(options.startDragCallback);
   startDragCallbackRef.current = options.startDragCallback;
   const dragCallbackRef = useRef(options.dragCallback);
@@ -27,7 +21,8 @@ export function useDraggable(options: DraggableOptions) {
   endDragCallbackRef.current = options.endDragCallback;
 
   useEffect(() => {
-    const element = ref.current;
+    const handles = options.handles;
+    if (handles === undefined) return;
     let startX = 0;
     let startY = 0;
 
@@ -58,17 +53,28 @@ export function useDraggable(options: DraggableOptions) {
       document.body.addEventListener('mouseleave', endDrag);
     }
 
-    if (element != null) {
-      element.addEventListener('mousedown', startDrag);
+    if (Array.isArray(handles)) {
+      for (const element of handles) {
+        if (element != null) {
+          element.current?.addEventListener('mousedown', startDrag);
+        }
+      }
+    } else {
+      handles?.current?.addEventListener('mousedown', startDrag);
     }
-
     return () => {
-      element?.removeEventListener('mousedown', startDrag);
+      if (Array.isArray(handles)) {
+        for (const element of handles) {
+          if (element != null) {
+            element.current?.removeEventListener('mousedown', startDrag);
+          }
+        }
+      } else {
+        handles?.current?.removeEventListener('mousedown', startDrag);
+      }
       document.body.removeEventListener('mousemove', drag);
       document.body.removeEventListener('mouseup', endDrag);
       document.body.removeEventListener('mouseleave', endDrag);
     };
-  }, []);
-
-  return ref;
+  }, [options.handles]);
 }

package/src/utils/dnd/types.ts

@@ -0,0 +1,6 @@
+export interface DragContainer {
+  registerHandle: (handle: React.RefObject<HTMLElement>) => void;
+  unregisterHandle: (handle: React.RefObject<HTMLElement>) => void;
+  isDragging: boolean;
+  position: { x: number; y: number };
+}

package/src/utils/index.ts

@@ -1,9 +1,9 @@
-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';
@@ -12,9 +12,11 @@ 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 './calendar/get_months_of_year.js';
+export * from './calendar/month.js';
 
-export * from './types/variations.js';
 export * from './types/dimensions.js';
+export * from './types/variations.js';
+
+export * from './responsive/responsive_renderer.js';

package/src/utils/mouse_leave_region.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+
+export interface MouseLeaveRegionProps {
+  elementsRefs: (React.RefObject<Element> | React.MutableRefObject<Element>)[];
+  onMouseLeave: () => void;
+  buffer?: number;
+}
+
+export function MouseLeaveRegion({
+  onMouseLeave,
+  elementsRefs: elementRefs,
+  buffer = 8,
+}: MouseLeaveRegionProps) {
+  useEffect(() => {
+    const update = (event: MouseEvent) => {
+      const intersects = elementRefs.some(ref => {
+        const element = ref.current;
+        if (element != null) {
+          const rect = element.getBoundingClientRect();
+          const overlapLeft = Math.max(event.clientX - buffer, rect.left);
+          const overlapRight = Math.min(event.clientX + buffer, rect.right);
+          const overlapTop = Math.max(event.clientY - buffer, rect.top);
+          const overlapBottom = Math.min(event.clientY + buffer, rect.bottom);
+          return overlapLeft <= overlapRight && overlapTop <= overlapBottom;
+        }
+        return false;
+      });
+      if (!intersects) {
+        onMouseLeave();
+      }
+    };
+    window.addEventListener('mousemove', update);
+    return () => {
+      window.removeEventListener('mousemove', update);
+    };
+  }, [onMouseLeave, elementRefs, buffer]);
+  return null;
+}

package/src/utils/types/dimensions.ts

@@ -8,7 +8,19 @@ export interface Dimensions {
   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/tsconfig.json

@@ -6,6 +6,9 @@
       "~aip-160/*": [
         "../aip-160/src/*"
       ],
+      "~aip-160-editor/*": [
+        "../aip-160-editor/src/*"
+      ],
       "~icons/*": [
         "../icons/src/*"
       ],

package/dist/overlay/popper/popper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"popper.d.ts","sourceRoot":"","sources":["../../../src/overlay/popper/popper.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAIjE,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;IAC/C,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IACxD,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,MAAM,CAAC,EACrB,aAAa,EACb,cAAyB,EACzB,cAAsB,EACtB,cAAkB,EAClB,gBAA0B,EAC1B,gBAA0B,EAC1B,gBAAoB,EACpB,YAAoB,EACpB,IAAY,EACZ,WAAW,EACX,aAAkB,EAClB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,gBAAwB,EACxB,oBAAoB,EACpB,qBAAqB,GACtB,EAAE,WAAW,kDA8Kb"}

package/dist/overlay/popper/popper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popper.js","sources":["../../../src/overlay/popper/popper.tsx"],"sourcesContent":["import { ClickAwayListener, ScrollAwayListener } from '../../utils/index.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { Portal } from '../portal/portal.js';\nimport styles from './popper.module.css';\n\nexport interface PopperProps {\n  anchorElement: HTMLElement | null;\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'start' | 'center' | 'end';\n  horizontalOrigin?: 'start' | 'center' | 'end';\n  horizontalOffset?: number;\n  open: boolean;\n  onClose: () => void;\n  restoreFocus?: boolean;\n  children: React.ReactNode;\n  veil?: boolean;\n  onVeilClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  clickAwayRefs?: React.RefObject<HTMLElement>[];\n  isClickAwayException?: (target: HTMLElement) => boolean;\n  isScrollAwayException?: (target: HTMLElement) => boolean;\n  disableClickAway?: boolean;\n}\n\nexport function Popper({\n  anchorElement,\n  verticalAnchor = 'bottom',\n  verticalOrigin = 'top',\n  verticalOffset = 0,\n  horizontalAnchor = 'start',\n  horizontalOrigin = 'start',\n  horizontalOffset = 0,\n  restoreFocus = false,\n  veil = false,\n  onVeilClick,\n  clickAwayRefs = [],\n  open,\n  onClose,\n  children,\n  disableClickAway = false,\n  isClickAwayException,\n  isScrollAwayException,\n}: PopperProps) {\n  const anchorElementRef = useRef(anchorElement);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const activeElementRef = useRef<HTMLElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const canOpen = open && anchorElement != null;\n  const finalClickAwayRefs: React.RefObject<HTMLElement>[] = clickAwayRefs ?? [];\n  const enableClickAway = !disableClickAway;\n  const veilRef = useRef<HTMLDivElement>(null);\n  function close() {\n    onClose && onClose();\n  }\n\n  // eslint-disable-next-line complexity\n  const updatePosition = () => {\n    if (!anchorElement || !popoverRef.current) return;\n\n    const anchorRect = anchorElement.getBoundingClientRect();\n    const popoverRect = popoverRef.current.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    // Determine the text direction (ltr or rtl)\n    const computedStyle = getComputedStyle(anchorElement);\n    const isRtl = computedStyle.direction === 'rtl';\n\n    let top = anchorRect.top;\n    let left = anchorRect.left;\n\n    // Calculate vertical position\n    switch (verticalAnchor) {\n      case 'top':\n        top += verticalOffset;\n        break;\n      case 'center':\n        top += anchorRect.height / 2;\n        break;\n      case 'bottom':\n        top += anchorRect.height - verticalOffset;\n        break;\n    }\n\n    switch (verticalOrigin) {\n      case 'top':\n        break;\n      case 'center':\n        top -= popoverRect.height / 2;\n        break;\n      case 'bottom':\n        top -= popoverRect.height;\n        break;\n    }\n\n    // Calculate horizontal position with direction sensitivity\n    if (horizontalAnchor === 'start') {\n      left += isRtl ? anchorRect.width + horizontalOffset : horizontalOffset;\n    } else if (horizontalAnchor === 'center') {\n      left += anchorRect.width / 2;\n    } else if (horizontalAnchor === 'end') {\n      left += isRtl ? -horizontalOffset : anchorRect.width + horizontalOffset;\n    }\n\n    // Adjust the origin based on RTL direction\n    let adjustedHorizontalOrigin = horizontalOrigin;\n    if (isRtl) {\n      if (horizontalOrigin === 'start') {\n        adjustedHorizontalOrigin = 'end';\n      } else if (horizontalOrigin === 'end') {\n        adjustedHorizontalOrigin = 'start';\n      }\n    }\n\n    // Apply adjusted origin to the position calculation\n    if (adjustedHorizontalOrigin === 'start') {\n      // No adjustment needed\n    } else if (adjustedHorizontalOrigin === 'center') {\n      left -= popoverRect.width / 2;\n    } else if (adjustedHorizontalOrigin === 'end') {\n      left -= popoverRect.width;\n    }\n\n    // Ensure the popover stays within the viewport\n    // Prevent overflow to the right\n    if (left + popoverRect.width > viewportWidth) {\n      left = viewportWidth - popoverRect.width;\n    }\n\n    // Prevent overflow to the left\n    if (left < 0) {\n      left = 0;\n    }\n\n    // Prevent overflow to the bottom\n    if (top + popoverRect.height > viewportHeight) {\n      top = viewportHeight - popoverRect.height;\n    }\n\n    // Prevent overflow to the top\n    if (top < 0) {\n      top = 0;\n    }\n\n    // Only update if position has changed to avoid unnecessary re-renders\n    if (top !== position.top || left !== position.left) {\n      setPosition({ top, left });\n    }\n  };\n\n  useLayoutEffect(() => {\n    updatePosition();\n    window.addEventListener('resize', updatePosition);\n    return () => {\n      window.removeEventListener('resize', updatePosition);\n    };\n  });\n\n  useLayoutEffect(() => {\n    if (open) {\n      activeElementRef.current = window.document.activeElement as HTMLElement;\n    } else {\n      const restoreToElement = activeElementRef.current;\n      requestAnimationFrame(() => {\n        restoreFocus && restoreToElement?.focus();\n      });\n    }\n  }, [open, restoreFocus]);\n\n  if (!canOpen) {\n    return null;\n  }\n\n  anchorElementRef.current = anchorElement;\n\n  let content = (\n    <ScrollAwayListener onScrollAway={close} isException={isScrollAwayException}>\n      <div\n        ref={popoverRef}\n        className={styles.popover}\n        style={{\n          top: `${position.top}px`,\n          left: `${position.left}px`,\n        }}\n      >\n        {children}\n      </div>\n    </ScrollAwayListener>\n  );\n\n  if (enableClickAway) {\n    content = (\n      <ClickAwayListener\n        onClickAway={close}\n        refs={[anchorElementRef, ...finalClickAwayRefs]}\n        isException={isClickAwayException}\n      >\n        {content}\n      </ClickAwayListener>\n    );\n  }\n\n  return (\n    <Portal>\n      {veil && (\n        <div\n          ref={veilRef}\n          onClick={e => veilRef.current === e.target && onVeilClick && onVeilClick(e)}\n          className={styles['popover-veil']}\n        >\n          {content}\n        </div>\n      )}\n      {!veil && content}\n    </Portal>\n  );\n}\n"],"names":["Popper","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","restoreFocus","veil","onVeilClick","clickAwayRefs","open","onClose","children","disableClickAway","isClickAwayException","isScrollAwayException","anchorElementRef","useRef","position","setPosition","useState","activeElementRef","popoverRef","canOpen","finalClickAwayRefs","enableClickAway","veilRef","close","updatePosition","anchorRect","popoverRect","viewportWidth","viewportHeight","isRtl","top","left","adjustedHorizontalOrigin","useLayoutEffect","restoreToElement","content","jsx","ScrollAwayListener","styles","ClickAwayListener","Portal"],"mappings":"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"}

package/dist/overlay/tooltip/tooltip.d.ts

@@ -1,7 +0,0 @@
-import { VStackProps } from '../../stacks/v_stack.js';
-import { default as React } from 'react';
-export interface TooltipProps extends Omit<VStackProps, 'as' | 'children'> {
-    children?: React.ReactNode;
-}
-export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=tooltip.d.ts.map

package/dist/overlay/tooltip/tooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlay/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,OAAO,kFAclB,CAAC"}

package/dist/overlay/tooltip/tooltip.js

@@ -1,20 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { VStack as i } from "../../stacks/v_stack.js";
-import { clsx as e } from "clsx";
-import l from "react";
-import '../../tooltip.css';const m = "_tooltip_e324d7e", a = { tooltip: m }, u = l.forwardRef(function({ children: o, className: t, ...r }, p) {
-  return /* @__PURE__ */ s(
-    i,
-    {
-      ref: p,
-      as: "span",
-      className: e(t, a.tooltip, "tooltip"),
-      ...r,
-      children: o
-    }
-  );
-});
-export {
-  u as Tooltip
-};
-//# sourceMappingURL=tooltip.js.map

package/dist/overlay/tooltip/tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/overlay/tooltip/tooltip.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './tooltip.module.css';\n\nexport interface TooltipProps extends Omit<VStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(function VPanel(\n  { children, className, ...props }: TooltipProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      as=\"span\"\n      className={clsx(className, styles.tooltip, 'tooltip')}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["Tooltip","React","children","className","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;kDASaA,IAAUC,EAAM,WAAsC,SACjE,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAKL,GAAWM,EAAO,SAAS,SAAS;AAAA,MACnD,GAAGL;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/panel.module-DwGKncon.js

@@ -1,5 +0,0 @@
-import './panel.css';const s = "_panel-stack_f1896f3", a = { "panel-stack": s };
-export {
-  a as s
-};
-//# sourceMappingURL=panel.module-DwGKncon.js.map

package/dist/panel.module-DwGKncon.js.map

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

package/dist/title.module-B16de2jd.js

@@ -1,5 +0,0 @@
-import './title.css';const t = "_title_64bd0fd", s = { title: t };
-export {
-  s
-};
-//# sourceMappingURL=title.module-B16de2jd.js.map

package/dist/title.module-B16de2jd.js.map

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"use_draggable.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use_draggable.ts"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,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;CACX;AAQD,wBAAgB,YAAY,CAAC,OAAO,EAAE,gBAAgB,wDAsDrD"}

package/dist/utils/hooks/use_draggable.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"use_draggable.js","sources":["../../../src/utils/hooks/use_draggable.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ninterface DraggableOptions {\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}\n\n// const handleRef: Ref<HTMLElement> = useDraggable(\n//   (startX: number, startY: number) => {},\n//   (deltaX: number, deltaY: number, startX: number, startY: number) => {},\n//   (deltaX: number, deltaY: number, startX: number, startY: number) => {}\n// );\n\nexport function useDraggable(options: DraggableOptions) {\n  const ref = useRef<HTMLElement | null>(null);\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 element = ref.current;\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 (element != null) {\n      element.addEventListener('mousedown', startDrag);\n    }\n\n    return () => {\n      element?.removeEventListener('mousedown', startDrag);\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseleave', endDrag);\n    };\n  }, []);\n\n  return ref;\n}\n"],"names":["useDraggable","options","ref","useRef","startDragCallbackRef","dragCallbackRef","endDragCallbackRef","useEffect","element","startX","startY","drag","event","deltaX","deltaY","endDrag","startDrag"],"mappings":";AAmBO,SAASA,EAAaC,GAA2B;AACtD,QAAMC,IAAMC,EAA2B,IAAI,GACrCC,IAAuBD,EAAOF,EAAQ,iBAAiB;AAC7D,EAAAG,EAAqB,UAAUH,EAAQ;AACvC,QAAMI,IAAkBF,EAAOF,EAAQ,YAAY;AACnD,EAAAI,EAAgB,UAAUJ,EAAQ;AAClC,QAAMK,IAAqBH,EAAOF,EAAQ,eAAe;AACzD,SAAAK,EAAmB,UAAUL,EAAQ,iBAErCM,EAAU,MAAM;AACd,UAAMC,IAAUN,EAAI;AACpB,QAAIO,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,SAEfR,EAAqB,QAAQK,GAAQC,CAAM,GAE3C,SAAS,KAAK,iBAAiB,aAAaC,CAAI,GAChD,SAAS,KAAK,iBAAiB,WAAWI,CAAO,GACjD,SAAS,KAAK,iBAAiB,cAAcA,CAAO;AAAA,IACtD;AAEA,WACEP,GAAQ,iBAAiB,aAAaQ,CAAS,GAG1C,MAAM;AACX,MAAAR,GAAS,oBAAoB,aAAaQ,CAAS,GACnD,SAAS,KAAK,oBAAoB,aAAaL,CAAI,GACnD,SAAS,KAAK,oBAAoB,WAAWI,CAAO,GACpD,SAAS,KAAK,oBAAoB,cAAcA,CAAO;AAAA,IACzD;AAAA,EACF,GAAG,CAAA,CAAE,GAEEb;AACT;"}

package/src/overlay/tooltip/tooltip.stories.tsx

@@ -1,22 +0,0 @@
-import { Tooltip } from './tooltip.js';
-
-export default {
-  title: 'Overlays/Tooltip',
-  component: Tooltip,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'A tooltip component that displays a tooltip when hovered.',
-      },
-    },
-  },
-};
-
-export const TooltipStory = () => {
-  return (
-    <Tooltip>
-      <>TODO: TOOLTIP</>
-    </Tooltip>
-  );
-};

package/src/overlay/tooltip/tooltip.tsx

@@ -1,24 +0,0 @@
-import { VStack, type VStackProps } from '../../stacks/v_stack.js';
-import { clsx } from 'clsx';
-import React from 'react';
-import styles from './tooltip.module.css';
-
-export interface TooltipProps extends Omit<VStackProps, 'as' | 'children'> {
-  children?: React.ReactNode;
-}
-
-export const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(function VPanel(
-  { children, className, ...props }: TooltipProps,
-  ref
-) {
-  return (
-    <VStack
-      ref={ref}
-      as="span"
-      className={clsx(className, styles.tooltip, 'tooltip')}
-      {...props}
-    >
-      {children}
-    </VStack>
-  );
-});