@tcn/ui 0.5.0 → 0.7.0

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/confirm/confirm.module.css

@@ -2,7 +2,6 @@
   :where(.confirm) {
     border-radius: 16px;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
-    background-color: var(--body-color);
     text-align: center;
     padding: 16px;
     width: 250px;

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,
@@ -613,8 +636,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) {
@@ -706,6 +733,10 @@
     }
   }
 
+  .tcn-confirm {
+    background-color: var(--background-color-primary);
+  }
+
   /* PANEL */
   .tcn-panel {
     background-color: var(--background-color-primary);
@@ -742,6 +773,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;
@@ -750,59 +795,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;
@@ -810,27 +840,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

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

@@ -1 +0,0 @@
-{"version":3,"file":"base_carrot.d.ts","sourceRoot":"","sources":["../../../src/overlay/carrot/base_carrot.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;CAC/C;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,QAAQ;CAAG;AAExE,eAAO,MAAM,UAAU,GAAI,uCAKxB,eAAe,4CASjB,CAAC"}

package/dist/overlay/carrot/base_carrot.js

@@ -1,21 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import t from "clsx";
-import { Box as m } from "../../stacks/box/box.js";
-const i = ({
-  direction: r,
-  className: a,
-  as: c = "span",
-  ...o
-}) => /* @__PURE__ */ s(
-  m,
-  {
-    as: "span",
-    "data-direction": r,
-    className: t("tcn-base-carrot", a),
-    ...o
-  }
-);
-export {
-  i as BaseCarrot
-};
-//# sourceMappingURL=base_carrot.js.map

package/dist/overlay/carrot/base_carrot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base_carrot.js","sources":["../../../src/overlay/carrot/base_carrot.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\n\nexport interface BaseCarrotOwnProps {\n  direction: 'top' | 'bottom' | 'start' | 'end';\n}\n\nexport interface BaseCarrotProps extends BaseCarrotOwnProps, BoxProps {}\n\nexport const BaseCarrot = ({\n  direction,\n  className,\n  as = 'span',\n  ...rest\n}: BaseCarrotProps) => {\n  return (\n    <Box\n      as=\"span\"\n      data-direction={direction}\n      className={clsx('tcn-base-carrot', className)}\n      {...rest}\n    />\n  );\n};\n"],"names":["BaseCarrot","direction","className","as","rest","jsx","Box","clsx"],"mappings":";;;AASO,MAAMA,IAAa,CAAC;AAAA,EACzB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC,IAAK;AAAA,EACL,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,IAAG;AAAA,IACH,kBAAgBL;AAAA,IAChB,WAAWM,EAAK,mBAAmBL,CAAS;AAAA,IAC3C,GAAGE;AAAA,EAAA;AAAA;"}

package/src/overlay/carrot/base_carrot.tsx

@@ -1,24 +0,0 @@
-import clsx from 'clsx';
-import { Box, type BoxProps } from '../../stacks/box/box.js';
-
-export interface BaseCarrotOwnProps {
-  direction: 'top' | 'bottom' | 'start' | 'end';
-}
-
-export interface BaseCarrotProps extends BaseCarrotOwnProps, BoxProps {}
-
-export const BaseCarrot = ({
-  direction,
-  className,
-  as = 'span',
-  ...rest
-}: BaseCarrotProps) => {
-  return (
-    <Box
-      as="span"
-      data-direction={direction}
-      className={clsx('tcn-base-carrot', className)}
-      {...rest}
-    />
-  );
-};