@tcn/ui 0.2.0 → 0.3.1

package/src/themes/themes/ergo/ergo_theme.css

@@ -136,6 +136,14 @@ legend {
 /* ===== CSS VARIABLES ===== */
 :root {
   --scalar: 1;
+  --accent-color: #cd6b2c;
+
+  /* Typography */
+  --font-color: #395578;
+  --font-family: "Lato", sans-serif;
+  --font-size: 12px;
+
+  /* Spacing */
   --gap-small: 4px;
   --gap-medium: 8px;
   --gap-large: 16px;
@@ -144,6 +152,7 @@ legend {
   --padding-medium: 8px;
   --padding-large: 16px;
 
+  /* Status Colors */
   --status-color-disabled: #7f7f7f;
   --status-color-info: #008cff;
   --status-color-warning: #ffff00;
@@ -155,6 +164,12 @@ legend {
   --async-color-success: #00ff00;
   --async-color-failed: #ff0000;
 
+  /* Shape */
+  --shape-radius-small: 2px;
+  --shape-radius-medium: 4px;
+  --shape-radius-large: 8px;
+
+  /* Palette */
   --primary-color-faint: #c0c0c0;
   --primary-color: #008cff;
   --primary-color-strong: #008cff;
@@ -171,10 +186,6 @@ legend {
   --quaternary-color: #008cff;
   --quaternary-color-strong: #008cff;
 
-  --font-color: #395578;
-  --font-family: "Lato", sans-serif;
-  --font-size: 12px;
-
   --background-color-primary: #ffffff;
   --background-color-secondary: #ffffff;
   --background-color-tertiary: #ffffff;
@@ -189,16 +200,17 @@ legend {
   --material-secondary-dark: 197 29.1% 40.4%;
   --material-tan: 33, 22%, 84%;
 
-  --shape-radius-small: 2px;
-  --shape-radius-medium: 4px;
-  --shape-radius-large: 8px;
-
-  --accent-color: #cd6b2c;
-
+  /* Default Material */
   --action: 23, 65%, 49%;
   --on-action: 0, 0%, 100%;
   --material: 0, 0%, 100%;
   --on-material: 213, 35.6%, 34.7%;
+
+  --action-dangerous: 0, 90%, 50%;
+  --action-cautious: 53, 90%, 60%;
+  --action-neutral: var(--action);
+  --action-suggested: 202, 90%, 40%;
+  --action-encouraged: 120, 90%, 40%;
 }
 
 * {
@@ -215,7 +227,7 @@ legend {
     background 0.1s,
     color 0.1s;
 
-  --act: hsl(var(--action));
+  --act: hsl(var(--interactive-color, var(--action)));
   --on-act: hsl(var(--on-action));
   /* Could use hsl here if we made three color variables for each of the hsl values */
   --act-down: color-mix(in srgb, var(--act), black 8%);
@@ -308,6 +320,32 @@ legend {
 }
 
 /* Button */
+
+.tcn-base-button {
+  --action: var(var(--button-color), var(--action));
+}
+
+.tcn-base-button[data-severity="dangerous"] {
+  --action: var(--action-dangerous);
+}
+
+.tcn-base-button[data-severity="cautious"] {
+  --action: var(--action-cautious);
+  --on-action: var(--on-material);
+}
+
+/* .tcn-base-button[data-severity="neutral"] {
+  --action: var(--action-neutral);
+} */
+
+.tcn-base-button[data-severity="suggested"] {
+  --action: var(--action-suggested);
+}
+
+.tcn-base-button[data-severity="encouraged"] {
+  --action: var(--action-encouraged);
+}
+
 .tcn-button {
   border-radius: 4px;
 }
@@ -373,72 +411,6 @@ legend {
   }
 }
 
-/* ===== Materials ===== */
-
-/* White on Gray */
-.material-status-disabled {
-  --action: 0, 0%, 100%;
-  --on-action: 0, 0%, 49.8%;
-  --material: 0, 0%, 49.8%;
-  --on-material: 0, 0%, 100%;
-}
-
-/* White on Vivid Blue */
-.material-status-info {
-  --action: 0, 0%, 100%;
-  --on-action: 207, 100%, 50%;
-  --material: 207, 100%, 50%;
-  --on-material: 0, 0%, 100%;
-}
-
-/* Navy on Yellow */
-.material-status-warning {
-  --action: 213, 35.6%, 34.7%;
-  --on-action: 60, 100%, 50%;
-  --material: 60, 100%, 50%;
-  --on-material: 213, 35.6%, 34.7%;
-}
-
-/* White on Red  */
-.material-status-error {
-  --action: 0, 0%, 100%;
-  --on-action: 0, 100%, 50%;
-  --material: 0, 100%, 50%;
-  --on-material: 0, 0%, 100%;
-}
-
-/* Navy on Light Grey */
-.material-async-initial {
-  --action: 213, 35.6%, 34.7%;
-  --on-action: 0, 0%, 75.3%;
-  --material: 0, 0%, 75.3%;
-  --on-material: 213, 35.6%, 34.7%;
-}
-
-/* White on Loading Blue */
-.material-async-pending {
-  --action: 0, 0%, 100%;
-  --on-action: 207, 100%, 50%;
-  --material: 207, 100%, 50%;
-  --on-material: 0, 0%, 100%;
-}
-
-/* White on Vivid Green */
-.material-async-success {
-  --action: 0, 0%, 100%;
-  --on-action: 120, 100%, 50%;
-  --material: 120, 100%, 50%;
-  --on-material: 0, 0%, 100%;
-}
-
-/* White on Red */
-.material-async-failed {
-  --action: 0, 0%, 100%;
-  --on-action: 0, 100%, 50%;
-  --material: 0, 100%, 50%;
-  --on-material: 0, 0%, 100%;
-}
-
 .material {
   background-color: hsl(var(--material));
   color: hsl(var(--on-material));
@@ -455,6 +427,14 @@ legend {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
+.tcn-tooltip {
+  background: rgba(57, 85, 120, 0.85);
+  box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);
+  color: rgba(255, 255, 255, 1);
+  border-radius: var(--shape-radius-medium);
+  padding: var(--padding-medium);
+}
+
 .tcn-list {
   gap: var(--gap-medium);
   .tcn-item {
@@ -464,19 +444,66 @@ legend {
   }
 }
 
-.tcn-veil {
+/* Scaffold: */
+.tcn-scaffold {
+  --scaffold-v-inset: var(--v-inset, var(--padding-large));
+  --scaffold-header-size: var(--header-size, 40px);
+  --scaffold-footer-size: var(--footer-size, 40px);
+  --scaffold-utility-bar-size: var(--utility-bar-size, 32px);
+  --scaffold-divide-footer: var(--divide-footer, 1);
+  --scaffold-divide-header: var(--divide-header, 1);
+
+  :where(.tcn-header) {
+    min-height: var(--scaffold-header-size);
+    padding: 0 var(--scaffold-v-inset);
+    gap: var(--gap-medium);
+  }
+
+  /* Border appears on body only when it follows header or utility-bar */
+  :where(.tcn-header) + :where(.tcn-body),
+  :where(.tcn-utility-bar) + :where(.tcn-body) {
+    border-top: calc(var(--scaffold-divide-header) * 1px) solid
+      var(--foreground-color-primary);
+  }
+
+  /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */
+  :where(.tcn-body) + :where(.tcn-footer) {
+    border-top: calc(var(--scaffold-divide-footer) * 1px) solid
+      var(--foreground-color-primary);
+  }
+
+  :where(.tcn-utility-bar) {
+    min-height: var(--scaffold-utility-bar-size);
+    padding: 0 var(--scaffold-v-inset);
+    gap: var(--gap-medium);
+  }
+
+  :where(.tcn-body) {
+    padding: 0 var(--scaffold-v-inset);
+    gap: var(--gap-medium);
+  }
+
+  :where(.tcn-footer) {
+    gap: var(--gap-medium);
+    min-height: var(--scaffold-footer-size);
+    padding: 0 var(--scaffold-v-inset);
+  }
+}
+
+.tcn-frame-veil[data-is-veil="true"] {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-/* TODO: FIX Borders on modal header and footer -- when there are multiple header/footers */
 /* MODAL: */
 .tcn-modal {
-  --v-inset: var(--padding-large);
-  background-color: var(--background-color-primary);
-  border-radius: var(--shape-radius-medium);
-  /* TODO: This should be a variable */
-  border: 1px solid rgba(170, 170, 170, 1);
-  overflow: hidden;
+  --divide-header: 0;
+
+  :where(.tcn-scaffold) {
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
+    border: 1px solid var(--foreground-color-primary);
+  }
 
   :where(.tcn-typography) {
     color: inherit;
@@ -489,53 +516,29 @@ legend {
     --on-action: 0, 0%, 100%;
     background-color: hsl(var(--material));
     color: hsl(var(--on-material));
-    min-height: 40px;
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
-
-    :where(.tcn-divider) {
-      padding: 4px 0;
-      :where(.tcn-divider-line) {
-        width: 1.5px;
-        min-height: 18px;
-        height: auto;
-      }
-    }
   }
 
   :where(.tcn-utility-bar) {
-    min-height: 32px;
-    border-bottom: 1px solid var(--foreground-color-primary);
-    padding: 0 var(--v-inset);
-
-    :where(.tcn-button) {
-      padding: 0;
-      min-width: 18px;
-      min-height: 18px;
-    }
-  }
-
-  :where(.tcn-body) {
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
-  }
-
-  :where(.tcn-footer) {
-    gap: var(--gap-medium);
-    min-height: 40px;
-    border-top: 1px solid var(--foreground-color-primary);
-    padding: 0 var(--v-inset);
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
   }
 }
 
 /* WINDOW: */
 .tcn-window {
-  --v-inset: var(--padding-large);
-  background-color: var(--background-color-primary);
-  border-radius: var(--shape-radius-medium);
-  /* TODO: This should be a variable */
-  border: 1px solid rgba(170, 170, 170, 1);
-  overflow: hidden;
+  --divide-header: 0;
+
+  :where(.tcn-scaffold) {
+    box-shadow: 0px 4px 34px 0px #00000096;
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
+    border: 2px solid white;
+  }
 
   :where(.tcn-typography) {
     color: inherit;
@@ -548,111 +551,79 @@ legend {
     --on-action: 0, 0%, 100%;
     background-color: hsl(var(--material));
     color: hsl(var(--on-material));
-    min-height: 40px;
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
-
-    :where(.tcn-divider) {
-      padding: 4px 0;
-      :where(.tcn-divider-line) {
-        width: 1.5px;
-        min-height: 18px;
-        height: auto;
-      }
-    }
   }
 
   :where(.tcn-utility-bar) {
-    min-height: 32px;
-    border-bottom: 1px solid var(--foreground-color-primary);
-    padding: 0 var(--v-inset);
-
-    :where(.tcn-button) {
-      padding: 0;
-      min-width: 18px;
-      min-height: 18px;
-    }
-  }
-
-  :where(.tcn-body) {
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
-  }
-
-  :where(.tcn-footer) {
-    gap: var(--gap-medium);
-    min-height: 40px;
-    border-top: 1px solid var(--foreground-color-primary);
-    padding: 0 var(--v-inset);
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
   }
 }
 
-/* PANEL */
-.tcn-panel {
-  --v-inset: var(--padding-large);
-  background-color: var(--background-color-primary);
-  border-radius: var(--shape-radius-medium);
-  overflow: hidden;
-
-  :where(.tcn-header) {
-    min-height: 40px;
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
-
-    :where(.tcn-title) {
-      font-weight: 700;
-    }
-
-    :where(.tcn-divider) {
-      padding: 4px 0;
-      :where(.tcn-divider-line) {
-        width: 1.5px;
-        min-height: 18px;
-        height: auto;
-      }
-    }
-  }
+.tcn-pop-confirm {
+  --divide-header: 0;
+  --v-inset: var(--padding-medium);
 
-  /* Border appears on body only when it follows header or utility-bar */
-  :where(.tcn-header) + :where(.tcn-body),
-  :where(.tcn-utility-bar) + :where(.tcn-body) {
-    border-top: 1px solid var(--foreground-color-primary);
+  :where(.tcn-scaffold) {
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
   }
 
-  /* Border appears on footer only when it follows body */
-  :where(.tcn-body) + :where(.tcn-footer) {
-    border-top: 1px solid var(--foreground-color-primary);
+  :where(.tcn-typography) {
+    color: inherit;
   }
 
-  :where(.tcn-utility-bar) {
+  :where(.tcn-header) {
     min-height: 32px;
-    padding: 0 var(--v-inset);
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
   }
 
-  :where(.tcn-body) {
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
+  :where(.tcn-utility-bar) {
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
   }
+}
 
-  :where(.tcn-footer) {
-    gap: var(--gap-medium);
-    min-height: 40px;
-    padding: 0 var(--v-inset);
-  }
+/* PANEL */
+.tcn-panel {
+  background-color: var(--background-color-primary);
+  border-radius: var(--shape-radius-medium);
+  overflow: hidden;
 }
 
 /* Card */
 .tcn-card {
-  padding: 0;
-  gap: 0px;
-  border: 1px solid var(--foreground-color-primary);
+  --header-size: 32px;
+  --footer-size: 32px;
+  --utility-bar-size: 24px;
+  --divide-header: 0;
+
+  background-color: var(--background-color-primary);
   border-radius: var(--shape-radius-medium);
+  border: 1px solid var(--foreground-color-primary);
   overflow: hidden;
+
   :where(.tcn-header) {
-    /* TODO: Color header */
-    min-height: 32px;
+    /* TODO: This should be a variable */
+    background-color: #ecf4fb;
   }
-  :where(.tcn-body) {
-    padding: var(--padding-medium) var(--v-inset);
+
+  :where(.tcn-utility-bar) {
+    /* TODO: This should be a variable */
+    background-color: #ecf4fb;
   }
 }

package/src/utils/click_away_listener.tsx

@@ -19,7 +19,7 @@ const touchMap = {
   onTouchEnd: 'touchend',
 };
 
-function isEventWithinElement(
+export function isEventWithinElement(
   event: MouseEvent | TouchEvent,
   node: HTMLElement | null,
   activated: boolean,

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 './hooks/make_context_hook.js';
 export * from './dnd/hooks/use_draggable.js';
+export * from './hooks/make_context_hook.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;"}