@tcn/ui 0.6.0 → 0.8.0

package/src/overlay/tethered/hooks/useTetherOrigin.ts

@@ -0,0 +1,49 @@
+import { useRef } from 'react';
+import type { Position } from '../../../utils/index.js';
+import type { HorizontalTether, VerticalTether } from '../types.js';
+import {
+  getOriginDirection,
+  getOriginOffset,
+  getOriginPosition,
+  type CaretDirection,
+} from './calculate_origin.js';
+import { useTetherContentRect } from './useTetherContentRect.js';
+
+export interface UseTetherOriginResult {
+  originPosition: Position;
+  originOffset: { yOffset: number; xOffset: number };
+  containerRef: React.RefObject<HTMLDivElement>;
+  originDirection: CaretDirection;
+}
+
+export function useTetherOrigin(
+  tetherPosition: Position,
+  hOrigin: HorizontalTether,
+  vOrigin: VerticalTether,
+  precision: 'high' | 'low'
+): UseTetherOriginResult {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerRect = useTetherContentRect(containerRef);
+
+  // If precision is low, return default values
+  if (precision === 'low') {
+    return {
+      originPosition: tetherPosition,
+      originOffset: { yOffset: 0, xOffset: 0 },
+      containerRef,
+      originDirection: 'none',
+    };
+  }
+
+  // Calculate origin values for high precision
+  const originOffset = getOriginOffset(containerRect, hOrigin, vOrigin);
+  const originPosition = getOriginPosition(containerRect.position, originOffset);
+  const originDirection = getOriginDirection(vOrigin, hOrigin);
+
+  return {
+    originPosition,
+    originOffset,
+    containerRef,
+    originDirection,
+  };
+}

package/src/overlay/tethered/tethered.module.css

@@ -1,4 +1,8 @@
 @layer tcn-system {
+  :where(.origin-indicator) {
+    z-index: 2;
+  }
+
   :where(.tethered) {
     display: inline-block;
     position: absolute;
@@ -6,5 +10,56 @@
     height: auto;
     left: var(--tethered-left, 0);
     top: var(--tethered-top, 0);
+
+    .origin-indicator {
+      position: absolute;
+      display: inline-block;
+      left: var(--tethered-origin-delta-x, 0);
+      top: var(--tethered-origin-delta-y, 0);
+      --caret-tx: 0%;
+      --caret-ty: 0%;
+      transform: translateX(var(--caret-tx)) translateY(var(--caret-ty));
+    }
+
+    &[data-anchor-direction="top"] {
+      .origin-indicator {
+        --caret-tx: -50%;
+        --caret-ty: -100%;
+      }
+    }
+
+    &[data-anchor-direction="bottom"] {
+      .origin-indicator {
+        --caret-tx: -50%;
+        --caret-ty: -100%;
+      }
+    }
+
+    &[data-anchor-direction="start"] {
+      .origin-indicator {
+        --caret-tx: -100%;
+        --caret-ty: -50%;
+      }
+    }
+
+    &[data-anchor-direction="end"] {
+      .origin-indicator {
+        --caret-tx: -100%;
+        --caret-ty: -50%;
+      }
+    }
+
+    &[data-anchor-direction="bottom"] {
+      padding-bottom: var(--origin-indicator-dimensions-height);
+    }
+    &[data-anchor-direction="top"] {
+      padding-top: var(--origin-indicator-dimensions-height);
+    }
+    &[data-anchor-direction="start"] {
+      padding-left: var(--origin-indicator-dimensions-width);
+    }
+    &[data-anchor-direction="end"] {
+      padding-right: var(--origin-indicator-dimensions-width);
+    }
   }
 }

package/src/overlay/tethered/tethered.tsx

@@ -1,10 +1,13 @@
+import { clsx } from 'clsx';
 import { forwardRef, type PropsWithChildren } from 'react';
-import type { HorizontalTether, VerticalTether } from './types.js';
 import { ZStack, type ZStackProps } from '../../stacks/index.js';
 import { useForkRef, type Rectangle } from '../../utils/index.js';
-import { useTether } from './hooks/useTether.js';
-import { clsx } from 'clsx';
+import { Caret } from '../caret/caret.js';
 import { Portal } from '../portal/portal.js';
+import { useCaretRefDimensions } from './hooks/useCaretRefDimensions.js';
+import { useTether } from './hooks/useTether.js';
+import { useTetherOrigin } from './hooks/useTetherOrigin.js';
+import type { HorizontalTether, VerticalTether } from './types.js';
 
 // Styles
 import styles from './tethered.module.css';
@@ -20,6 +23,7 @@ export interface BaseTetheredOwnProps {
 
 export interface TetheredOwnProp extends BaseTetheredOwnProps {
   anchor: Rectangle | null;
+  precision?: 'high' | 'low';
 }
 export interface TetheredProps extends TetheredOwnProp, ZStackProps {}
 
@@ -33,6 +37,7 @@ export const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>
       horizontalOrigin = 'start',
       verticalOffset = 0,
       horizontalOffset = 0,
+      precision = 'low',
       children,
       style,
       className,
@@ -49,22 +54,55 @@ export const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>
       verticalOffset,
       horizontalOffset,
     });
-    const forkedRef = useForkRef(ref, tetherRef);
+
+    // Convert position from { top, left } to Position type { x, y }
+    const tetherPosition = { x: position.left, y: position.top };
+
+    const { originPosition, originOffset, containerRef, originDirection } =
+      useTetherOrigin(tetherPosition, horizontalOrigin, verticalOrigin, precision);
+
+    const { caretElementRef: setCaretElement, caretSize } = useCaretRefDimensions(
+      precision,
+      originDirection
+    );
+
+    const forkedRef = useForkRef(ref, tetherRef, containerRef);
 
     const cssVariables = {
       '--tethered-top': `${position.top}px`,
       '--tethered-left': `${position.left}px`,
+      '--tethered-origin-y': `${originPosition.y}px`,
+      '--tethered-origin-x': `${originPosition.x}px`,
+      '--tethered-origin-delta-y': `${originOffset.yOffset}px`,
+      '--tethered-origin-delta-x': `${originOffset.xOffset}px`,
+      '--origin-indicator-dimensions-width': `${caretSize.width}px`,
+      '--origin-indicator-dimensions-height': `${caretSize.height}px`,
     };
 
     return (
       <Portal>
         <ZStack
           ref={forkedRef}
-          className={clsx(styles.tethered, className)}
-          style={{ position: 'absolute', ...cssVariables, ...style }}
+          className={clsx(styles.tethered, 'tcn-tethered', className)}
+          style={{ ...cssVariables, ...style }}
+          data-v-anchor={verticalAnchor}
+          data-h-anchor={horizontalAnchor}
+          data-v-origin={verticalOrigin}
+          data-h-origin={horizontalOrigin}
+          data-anchor-direction={originDirection}
           {...rest}
         >
           {children}
+          {precision === 'high' && originDirection !== 'none' && (
+            <Caret
+              ref={setCaretElement}
+              direction={originDirection}
+              className={clsx(
+                styles['origin-indicator'],
+                'tcn-tethered-origin-indicator'
+              )}
+            />
+          )}
         </ZStack>
       </Portal>
     );

package/src/surfaces/panel/__stories__/panel.stories.tsx

@@ -1,17 +1,14 @@
-import { BugIcon } from '@tcn/icons/bug_icon.js';
-import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import { GridOneIcon } from '@tcn/icons/grid_one_icon.js';
 import { Button } from '../../../actions/button/button/button.js';
 import { Footer } from '../../../layouts/footer/footer.js';
 import { Header } from '../../../layouts/header/header.js';
-import { Divider, VBody } from '../../../layouts/index.js';
+import { Heading, Section, VBody } from '../../../layouts/index.js';
 import { UtilityBar } from '../../../layouts/utility_bar/utility_bar.js';
 import { Box, Spacer } from '../../../stacks/index.js';
 import { Title } from '../../../typography/title/title.js';
 import { VPanel } from '../v_panel.js';
 // Styles
 import styles from './panel_stories.module.css';
-import { SlimButton } from '../../../actions/index.js';
 
 export default {
   title: 'Surfaces/Panel',
@@ -19,6 +16,48 @@ export default {
   tags: ['autodocs'],
 };
 
+const Ipsum = () => {
+  return (
+    <Box className={styles['content-container']}>
+      <Box className={styles['content']} />
+    </Box>
+  );
+};
+
+const SectionMockData: React.FC<{
+  depth: number;
+  count: number;
+  children?: React.ReactNode;
+}> = ({ depth = 0, count = 0, children }) => {
+  return (
+    <Section>
+      <Heading>
+        Section: {depth} - {count}
+        <Spacer />
+        <UtilGroupExample />
+      </Heading>
+      <Ipsum />
+      {children}
+    </Section>
+  );
+};
+
+const UtilGroupExample = () => {
+  return (
+    <>
+      <Button utility hierarchy="tertiary">
+        <GridOneIcon />
+      </Button>
+      <Button utility hierarchy="secondary">
+        <GridOneIcon />
+      </Button>
+      <Button utility hierarchy="primary">
+        <GridOneIcon />
+      </Button>
+    </>
+  );
+};
+
 export const Default = () => {
   return (
     <div className={styles['stories-container']}>
@@ -26,36 +65,32 @@ export const Default = () => {
         <Header>
           <Title emphasis="strong">Panel Primary Header</Title>
           <Spacer />
-          <SlimButton hierarchy="tertiary">
-            <GridOneIcon />
-          </SlimButton>
-          <Divider length="md" vertical />
-          <SlimButton hierarchy="tertiary">
-            <CrossIcon />
-          </SlimButton>
+          <UtilGroupExample />
         </Header>
         <UtilityBar>
           <Title>Utility Bar</Title>
           <Spacer />
-          <SlimButton hierarchy="tertiary">
-            <BugIcon />
-          </SlimButton>
-          <SlimButton hierarchy="tertiary">
-            <BugIcon />
-          </SlimButton>
-          <SlimButton size="md" hierarchy="tertiary">
-            <BugIcon />
-          </SlimButton>
-          <SlimButton hierarchy="tertiary">
-            <BugIcon />
-          </SlimButton>
+          <UtilGroupExample />
         </UtilityBar>
 
         <VBody>
-          <Box className={styles['content-box']} />
-          <Box className={styles['content-box']} />
-          <Box className={styles['content-box']} />
-          <Box className={styles['content-box']} />
+          <SectionMockData depth={1} count={1}>
+            <SectionMockData depth={2} count={1}>
+              <SectionMockData depth={3} count={1}>
+                <SectionMockData depth={4} count={1} />
+              </SectionMockData>
+            </SectionMockData>
+          </SectionMockData>
+          <SectionMockData depth={1} count={2}>
+            <SectionMockData depth={2} count={1}>
+              <SectionMockData depth={3} count={1}>
+                <SectionMockData depth={4} count={1} />
+              </SectionMockData>
+            </SectionMockData>
+          </SectionMockData>
+          <Ipsum />
+          <Ipsum />
+          <Ipsum />
         </VBody>
         <Footer>
           <Title>Footer</Title>

package/src/surfaces/panel/__stories__/panel_stories.module.css

@@ -1,9 +1,22 @@
-.content-box {
+.content-container {
   background: rgba(0, 128, 0, 0.5);
+  width: 100%;
+  height: auto;
+  min-height: auto;
+}
+
+.content {
+  background: rgba(0, 128, 0, 0.8);
   min-height: 200px;
   width: 100%;
 }
 
+.content-2 {
+  background: rgba(185, 1, 142, 0.8);
+  min-height: 100px;
+  width: 100%;
+}
+
 .stories-container {
   width: 100%;
   height: 100%;

package/src/surfaces/pop_confirm/pop_confirm.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
 import { clsx } from 'clsx';
+import React from 'react';
+import { Scaffold } from '../../layouts/index.js';
+import { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';
 import {
   ElementPopper,
   type ElementPopperProps,
 } from '../../overlay/popper/element_popper.js';
-import { Scaffold } from '../../layouts/index.js';
-import { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';
 
 export type PopConfirmProps = ElementPopperProps;
 
@@ -17,6 +17,7 @@ export const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(
     return (
       <ElementPopper
         ref={ref}
+        precision="high"
         className={clsx(className, 'tcn-pop-confirm')}
         dismissals={dismissals}
         {...props}

package/src/surfaces/tooltip/tooltip.tsx

@@ -49,6 +49,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function T
         verticalOrigin={verticalOrigin}
         horizontalAnchor={horizontalAnchor}
         horizontalOrigin={horizontalOrigin}
+        precision="high"
         className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}
         {...props}
       >

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

@@ -14,12 +14,17 @@
     --ergo-secondary-light: #ecf4fb;
     --ergo-secondary-dark: #497485;
     --ergo-tertiary: #dfd7cd;
+    --ergo-tertiary-light: #f9f4ed;
+    --ergo-tertiary-dark: #7e6c5d;
     --ergo-white: #ffffff;
 
     --ergo-accent-blue: #395578;
+    --ergo-accent-blue-light: #f3f4f6;
     --ergo-accent-green: #97bba3;
+    --ergo-accent-green-light: #eef8ef;
+    --ergo-accent-green-dark: #4f785c;
     --ergo-accent-yellow: #dbc97e;
-    --ergo-accent-green: #97bba3;
+    --ergo-accent-yellow-light: #fef9e7;
 
     --ergo-grey: #aaaaaa;
     --ergo-grey-light: #d3d3d3;
@@ -298,6 +303,24 @@
     &[data-hover] {
       transform: translateY(-1px);
       box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
+
+      /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 4px;
+      }
+
+      &::before {
+        top: -2px;
+      }
+
+      &::after {
+        bottom: -2px;
+      }
     }
 
     &:active,
@@ -476,8 +499,12 @@
         --act: var(--ergo-primary);
       }
 
+      .tcn-tab-item:focus-visible {
+        z-index: 2;
+      }
       /* Hover Indicator */
-      .tcn-tab-item[data-is-selected="false"]:hover::after {
+      .tcn-tab-item[data-is-selected="false"]:hover::after,
+      .tcn-tab-item[data-is-selected="false"]:focus-visible::after {
         content: "";
         display: block;
         position: absolute;
@@ -613,8 +640,12 @@
     }
 
     :where(.tcn-body) {
-      padding: 0 var(--scaffold-v-inset);
+      --section-tab-start: var(--scaffold-v-inset);
+
       gap: var(--gap-medium);
+      .tcn-section {
+        --section-tab-start: var(--scaffold-v-inset);
+      }
     }
 
     :where(.tcn-footer) {
@@ -746,6 +777,20 @@
   }
 
   /* SECTION */
+  .tcn-section {
+    --max-section-depth: 4;
+    --section-tab-width: 4px;
+    --section-tab-start: 8px;
+    --section-tab-depth: 0;
+    --section-tab: calc(
+      var(--section-tab-start) +
+      (var(--section-tab-width) * var(--section-tab-depth))
+    );
+    --section-action: var(--ergo-secondary);
+    --section-mat: var(--ergo-secondary-light);
+    --section-on-mat: var(--ergo-ink-primary);
+  }
+
   .tcn-heading {
     background-color: #f1f1f1;
     padding-inline-start: 8px;
@@ -754,59 +799,44 @@
   }
 
   .tcn-section > .tcn-heading {
-    background-color: #f2f4f6;
-    padding-inline-start: 8px;
-    color: rgb(51, 51, 51);
-    z-index: 4;
-  }
-
-  .tcn-section > .tcn-section > .tcn-heading {
-    background-color: #fff7f0;
-    padding-inline-start: 12px;
-    color: #395578;
-    z-index: 3;
-  }
-
-  .tcn-section > .tcn-section > .tcn-section > .tcn-heading {
-    background-color: #eef8ef;
-    padding-inline-start: 16px;
-    color: #395578;
-    z-index: 2;
-  }
-
-  .tcn-section > .tcn-section > .tcn-section > .tcn-section .tcn-heading {
-    background-color: #ecf4fb;
-    padding-inline-start: 20px;
-    color: #395578;
-    z-index: 1;
+    z-index: calc(var(--max-section-depth) - var(--section-tab-depth));
+    padding-inline-start: var(--section-tab);
+    --material: var(--section-mat);
+    --on-material: var(--section-on-mat);
+    --action: var(--section-action);
+    background-color: var(--material);
+    color: var(--on-material);
+    gap: var(--gap-small);
   }
 
   .tcn-section > :not(.tcn-heading, .tcn-section) {
-    padding-inline-start: 8px;
+    padding-inline-start: var(--section-tab);
   }
 
-  .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {
-    padding-inline-start: 12px;
+  .tcn-section > .tcn-section {
+    --section-tab-depth: 1;
+    --section-mat: var(--ergo-accent-blue-light);
+    --section-action: var(--ergo-accent-blue);
   }
 
-  .tcn-section > .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {
-    padding-inline-start: 16px;
+  .tcn-section > .tcn-section > .tcn-section {
+    --section-tab-depth: 2;
+    --section-mat: var(--ergo-accent-green-light);
+    --section-action: var(--ergo-accent-green-dark);
   }
 
-  .tcn-section
-    > .tcn-section
-    > .tcn-section
-    > .tcn-section
-    > :not(.tcn-heading, .tcn-section) {
-    padding-inline-start: 20px;
+  .tcn-section > .tcn-section > .tcn-section > .tcn-section {
+    --section-tab-depth: 3;
+    --section-mat: var(--ergo-tertiary-light);
+    --section-action: var(--ergo-tertiary-dark);
   }
 
-  .tcn-base-carrot {
-    --carrot-size: 12px;
-    --carrot-triangle-height: calc(var(--carrot-size) / 2);
-    --carrot-triangle-width: var(--carrot-size);
-    --carrot-triangle-base: var(--carrot-triangle-height) solid transparent;
-    --carrot-triangle-peak: var(--carrot-triangle-width) solid var(--material);
+  .tcn-caret {
+    --caret-size: 12px;
+    --caret-triangle-height: calc(var(--caret-size) / 2);
+    --caret-triangle-width: var(--caret-size);
+    --caret-triangle-base: var(--caret-triangle-height) solid transparent;
+    --caret-triangle-peak: var(--caret-triangle-width) solid var(--material);
 
     width: 0;
     height: 0;
@@ -814,27 +844,27 @@
     display: inline-block;
 
     &[data-direction="top"] {
-      border-bottom: var(--carrot-triangle-peak);
-      border-left: var(--carrot-triangle-base);
-      border-right: var(--carrot-triangle-base);
+      border-bottom: var(--caret-triangle-peak);
+      border-left: var(--caret-triangle-base);
+      border-right: var(--caret-triangle-base);
     }
 
     &[data-direction="bottom"] {
-      border-top: var(--carrot-triangle-peak);
-      border-left: var(--carrot-triangle-base);
-      border-right: var(--carrot-triangle-base);
+      border-top: var(--caret-triangle-peak);
+      border-left: var(--caret-triangle-base);
+      border-right: var(--caret-triangle-base);
     }
 
     &[data-direction="start"] {
-      border-right: var(--carrot-triangle-peak);
-      border-top: var(--carrot-triangle-base);
-      border-bottom: var(--carrot-triangle-base);
+      border-right: var(--caret-triangle-peak);
+      border-top: var(--caret-triangle-base);
+      border-bottom: var(--caret-triangle-base);
     }
 
     &[data-direction="end"] {
-      border-left: var(--carrot-triangle-peak);
-      border-top: var(--carrot-triangle-base);
-      border-bottom: var(--carrot-triangle-base);
+      border-left: var(--caret-triangle-peak);
+      border-top: var(--caret-triangle-base);
+      border-bottom: var(--caret-triangle-base);
     }
   }
 }

package/src/themes/themes/windows_98/windows_98.css

@@ -1107,12 +1107,12 @@
     gap: 4px;
   }
 
-  .tcn-base-carrot {
-    --carrot-size: 12px;
-    --carrot-triangle-height: calc(var(--carrot-size) / 2);
-    --carrot-triangle-width: var(--carrot-size);
-    --carrot-triangle-base: var(--carrot-triangle-height) solid transparent;
-    --carrot-triangle-peak: var(--carrot-triangle-width) solid #000;
+  .tcn-caret {
+    --caret-size: 12px;
+    --caret-triangle-height: calc(var(--caret-size) / 2);
+    --caret-triangle-width: var(--caret-size);
+    --caret-triangle-base: var(--caret-triangle-height) solid transparent;
+    --caret-triangle-peak: var(--caret-triangle-width) solid #000;
 
     width: 0;
     height: 0;
@@ -1120,27 +1120,27 @@
     display: inline-block;
 
     &[data-direction="top"] {
-      border-bottom: var(--carrot-triangle-peak);
-      border-left: var(--carrot-triangle-base);
-      border-right: var(--carrot-triangle-base);
+      border-bottom: var(--caret-triangle-peak);
+      border-left: var(--caret-triangle-base);
+      border-right: var(--caret-triangle-base);
     }
 
     &[data-direction="bottom"] {
-      border-top: var(--carrot-triangle-peak);
-      border-left: var(--carrot-triangle-base);
-      border-right: var(--carrot-triangle-base);
+      border-top: var(--caret-triangle-peak);
+      border-left: var(--caret-triangle-base);
+      border-right: var(--caret-triangle-base);
     }
 
     &[data-direction="start"] {
-      border-right: var(--carrot-triangle-peak);
-      border-top: var(--carrot-triangle-base);
-      border-bottom: var(--carrot-triangle-base);
+      border-right: var(--caret-triangle-peak);
+      border-top: var(--caret-triangle-base);
+      border-bottom: var(--caret-triangle-base);
     }
 
     &[data-direction="end"] {
-      border-left: var(--carrot-triangle-peak);
-      border-top: var(--carrot-triangle-base);
-      border-bottom: var(--carrot-triangle-base);
+      border-left: var(--caret-triangle-peak);
+      border-top: var(--caret-triangle-base);
+      border-bottom: var(--caret-triangle-base);
     }
   }
 }

package/src/utils/index.ts

@@ -20,3 +20,6 @@ export * from './types/dimensions.js';
 export * from './types/variations.js';
 
 export * from './responsive/responsive_renderer.js';
+
+export * from './dnd/draggable/draggable.js';
+export * from './dnd/handle.js';

package/dist/overlay/carrot/base_carrot.d.ts

@@ -1,8 +0,0 @@
-import { BoxProps } from '../../stacks/box/box.js';
-export interface BaseCarrotOwnProps {
-    direction: 'top' | 'bottom' | 'start' | 'end';
-}
-export interface BaseCarrotProps extends BaseCarrotOwnProps, BoxProps {
-}
-export declare const BaseCarrot: ({ direction, className, as, ...rest }: BaseCarrotProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=base_carrot.d.ts.map