@tcn/ui 0.15.0 → 0.17.0

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

@@ -609,8 +609,7 @@
     min-width: var(--ergo-sizing-bar-md);
   }
 
-  .tcn-utility-strip,
-  .tcn-side {
+  .tcn-utility-strip {
     padding-block: var(--padding-medium);
     gap: var(--gap-medium);
   }
@@ -635,20 +634,19 @@
   .tcn-scaffold {
     --scaffold-divide-footer: var(--divide-footer, 1);
     --scaffold-divide-header: var(--divide-header, 1);
-    --pad-inline: var(--padding-large);
+    /* Since Scaffold now acts as body too - there is no pad inline default - each outer container should set it */
+    /* --pad-inline: var(--padding-large); */
 
     /* Border appears on nested scaffold/rail when it follows header or utility-bar */
-    :where(.tcn-header) + :where(.tcn-scaffold),
-    :where(.tcn-header) + :where(.tcn-rail),
-    :where(.tcn-utility-bar) + :where(.tcn-scaffold),
-    :where(.tcn-utility-bar) + :where(.tcn-rail) {
-      border-top: calc(var(--scaffold-divide-header) * 1px) solid
+    :where(.tcn-header) {
+      border-bottom: calc(var(--scaffold-divide-header) * 1px) solid
         var(--ergo-material-border);
     }
+    :where(.tcn-utility-bar) {
+      border-bottom: 1px solid var(--ergo-material-border);
+    }
 
-    /* Border appears on footer when it follows scaffold/rail */
-    :where(.tcn-scaffold) + :where(.tcn-footer),
-    :where(.tcn-rail) + :where(.tcn-footer) {
+    :where(.tcn-footer) {
       border-top: calc(var(--scaffold-divide-footer) * 1px) solid
         var(--ergo-material-border);
     }
@@ -662,20 +660,15 @@
   .tcn-page {
     --divide-header: 0;
     --divide-footer: 0;
+    --pad-inline: var(--padding-large);
     --material: var(--background-color-tertiary);
     background-color: var(--material);
-    padding: var(--padding-medium);
-  }
-
-  /* TODO: remove - shim to replicate Column at Page level */
-  .tcn-page > .tcn-scaffold-stack > .tcn-scaffold > .tcn-scaffold-stack,
-  .tcn-page > .tcn-scaffold-stack > .tcn-rail > .tcn-rail-stack {
-    gap: var(--gap-medium);
   }
 
   /* MODAL: */
   .tcn-modal {
     --divide-header: 0;
+    --pad-inline: var(--padding-large);
     box-shadow: 0px 4px 34px 0px #00000096;
     border-radius: var(--ergo-shape-radius-medium);
     background-color: var(--background-color-primary);
@@ -699,6 +692,7 @@
   /* DRAWER: */
   .tcn-drawer {
     --divide-header: 0;
+    --pad-inline: var(--padding-large);
     box-shadow: 0px 4px 34px 0px #00000096;
     background-color: var(--background-color-primary);
     overflow: hidden;
@@ -721,6 +715,7 @@
   .tcn-window {
     box-shadow: 0px 4px 34px 0px #00000096;
     --divide-header: 0;
+    --pad-inline: var(--padding-large);
     border-radius: var(--ergo-shape-radius-medium);
     background-color: var(--background-color-primary);
     overflow: hidden;
@@ -745,7 +740,7 @@
     --tether-pad-size: 16px;
     --pad-inline: var(--padding-medium);
 
-    .tcn-pop-confirm-scaffold > .tcn-scaffold-stack {
+    .tcn-pop-confirm-scaffold {
       border-radius: var(--ergo-shape-radius-medium);
       box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
       background-color: var(--background-color-primary);
@@ -802,6 +797,7 @@
   .tcn-panel {
     --divide-header: 1;
     --divide-footer: 1;
+    --pad-inline: var(--padding-large);
     --material: var(--background-color-primary);
     background-color: var(--material);
     border-radius: var(--ergo-shape-radius-medium);
@@ -816,6 +812,7 @@
   .tcn-aside {
     --divide-header: 1;
     --divide-footer: 1;
+    --pad-inline: var(--padding-large);
 
     --material: var(--background-color-secondary);
     background-color: var(--material);
@@ -863,12 +860,70 @@
     :where(.tcn-utility-bar) {
       min-height: var(--ergo-sizing-bar-sm);
     }
+  }
+
+  /* Columns: */
+  .tcn-panel {
+    :where(.tcn-columns) {
+      padding: var(--padding-large);
+
+      :where(.tcn-column) {
+        gap: var(--gap-medium);
+        border-right: 1px solid var(--ergo-material-border);
+        padding-inline-end: var(--padding-medium);
+      }
+
+      :where(.tcn-column):not(:first-child) {
+        padding-inline-start: var(--padding-medium);
+      }
+    }
+  }
+
+  /* Resize handle offsets  */
+  :where(.tcn-rail.tcn-columns) {
+    --resize-offset: calc(-1 * var(--padding-medium));
+  }
+
+  :where(.tcn-rail):not(.tcn-columns) {
+    --resize-offset: 0px;
+  }
+
+  .tcn-page {
+    :where(.tcn-columns) {
+      padding: var(--padding-medium);
+
+      :where(.tcn-column) {
+        gap: var(--gap-medium);
+      }
+
+      > .tcn-column:not(:last-child) {
+        padding-inline-end: var(--padding-medium);
+      }
+    }
+  }
+
+  /* Rows: */
+  .tcn-panel,
+  .tcn-card {
+    :where(.tcn-rows) {
+      :where(.tcn-row):not(:last-child) {
+        border-bottom: 1px solid var(--ergo-material-border);
+        padding-block-end: var(--padding-medium);
+      }
+
+      :where(.tcn-row):not(:first-child) {
+        padding-block-start: var(--padding-medium);
+      }
+    }
+  }
+
+  .tcn-page {
+    :where(.tcn-rows) {
+      padding: var(--padding-medium);
 
-    :where(.tcn-scaffold-stack) > :where(.tcn-scaffold) > :where(.tcn-scaffold-stack),
-    :where(.tcn-scaffold-stack) > :where(.tcn-rail) > :where(.tcn-rail-stack),
-    :where(.tcn-rail-stack) > :where(.tcn-scaffold) > :where(.tcn-scaffold-stack),
-    :where(.tcn-rail-stack) > :where(.tcn-rail) > :where(.tcn-rail-stack) {
-      padding-inline: var(--padding-medium);
+      :where(.tcn-row):not(:last-child) {
+        padding-block-end: var(--padding-medium);
+      }
     }
   }
 
@@ -920,7 +975,7 @@
     padding-inline-end: var(--pad-inline, var(--padding-medium));
   }
 
-  .tcn-scaffold-stack > .tcn-detail {
+  .tcn-scaffold > .tcn-detail {
     padding-inline: var(--pad-inline, var(--padding-medium));
   }
 
@@ -1405,4 +1460,147 @@
       --accent-color: var(--ergo-accent-blue);
     }
   }
+
+  /* ===== Resize Handle ===== */
+
+  /* Edge indicators: centered pill chip */
+  .tcn-resize-handle[data-axis="horizontal"] {
+    width: 8px;
+  }
+
+  .tcn-resize-handle[data-axis="vertical"] {
+    height: 8px;
+  }
+
+  .tcn-resize-handle[data-axis="horizontal"]::after,
+  .tcn-resize-handle[data-axis="vertical"]::after {
+    content: "";
+    position: absolute;
+    border-radius: var(--ergo-shape-radius-medium);
+    background-color: var(--ergo-grey-light);
+    pointer-events: none;
+    transition: background-color 0.3s;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .tcn-resize-handle[data-axis="horizontal"]::after {
+    width: 4px;
+    height: 16px;
+  }
+
+  .tcn-resize-handle[data-axis="vertical"]::after {
+    width: 16px;
+    height: 4px;
+  }
+
+  /* Corner L-shape indicator */
+  .tcn-resize-handle[data-axis="corner"]::after {
+    content: "";
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-style: solid;
+    border-color: var(--ergo-grey-light);
+    border-width: 0;
+    pointer-events: none;
+    transition: border-color 0.15s;
+  }
+
+  /* Physical corners */
+  .tcn-resize-handle[data-position="top-left"]::after {
+    top: 0;
+    left: 0;
+    border-top-width: 4px;
+    border-left-width: 4px;
+  }
+
+  .tcn-resize-handle[data-position="top-right"]::after {
+    top: 0;
+    right: 0;
+    border-top-width: 4px;
+    border-right-width: 4px;
+  }
+
+  .tcn-resize-handle[data-position="bottom-left"]::after {
+    bottom: 0;
+    left: 0;
+    border-bottom-width: 4px;
+    border-left-width: 4px;
+  }
+
+  .tcn-resize-handle[data-position="bottom-right"]::after {
+    bottom: 0;
+    right: 0;
+    border-bottom-width: 4px;
+    border-right-width: 4px;
+  }
+
+  /* Logical corners (RTL-aware) */
+  .tcn-resize-handle[data-position="top-start"]:dir(ltr)::after {
+    top: 0;
+    left: 0;
+    border-top-width: 4px;
+    border-left-width: 4px;
+  }
+
+  .tcn-resize-handle[data-position="top-start"]:dir(rtl)::after {
+    top: 0;
+    right: 0;
+    border-top-width: 4px;
+    border-right-width: 4px;
+  }
+
+  .tcn-resize-handle[data-position="top-end"]:dir(ltr)::after {
+    top: 0;
+    right: 0;
+    border-top-width: 4px;
+    border-right-width: 4px;
+  }
+
+  .tcn-resize-handle[data-position="top-end"]:dir(rtl)::after {
+    top: 0;
+    left: 0;
+    border-top-width: 4px;
+    border-left-width: 4px;
+  }
+
+  .tcn-resize-handle[data-position="bottom-start"]:dir(ltr)::after {
+    bottom: 0;
+    left: 0;
+    border-bottom-width: 4px;
+    border-left-width: 4px;
+  }
+
+  .tcn-resize-handle[data-position="bottom-start"]:dir(rtl)::after {
+    bottom: 0;
+    right: 0;
+    border-bottom-width: 4px;
+    border-right-width: 4px;
+  }
+
+  .tcn-resize-handle[data-position="bottom-end"]:dir(ltr)::after {
+    bottom: 0;
+    right: 0;
+    border-bottom-width: 4px;
+    border-right-width: 4px;
+  }
+
+  .tcn-resize-handle[data-position="bottom-end"]:dir(rtl)::after {
+    bottom: 0;
+    left: 0;
+    border-bottom-width: 4px;
+    border-left-width: 4px;
+  }
+
+  /* Hover */
+  .tcn-resize-handle[data-axis="horizontal"]:hover::after,
+  .tcn-resize-handle[data-axis="vertical"]:hover::after {
+    background-color: var(--ergo-grey-dark);
+  }
+
+  .tcn-resize-handle:hover::after {
+    border-color: var(--ergo-grey-dark);
+  }
 }

package/src/utils/index.ts

@@ -21,3 +21,5 @@ export * from './types/variations.js';
 
 export * from './dnd/draggable/draggable.js';
 export * from './dnd/handle.js';
+
+export * from './resize/index.js';

package/src/utils/resize/__stories__/resizable.stories.tsx

@@ -0,0 +1,214 @@
+import { useRef, useState } from 'react';
+import { Resizable } from '../resizable.js';
+import { ResizeHandle } from '../resize_handle.js';
+import { Box } from '../../../stacks/box/box.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import { BodyText } from '../../../typography/index.js';
+import styles from './resizable_stories.module.css';
+
+export default {
+  title: 'Utils/Resizable',
+  component: Resizable,
+  tags: ['autodocs'],
+};
+
+export const HorizontalResize = () => {
+  const [width, setWidth] = useState(300);
+
+  return (
+    <VStack gap="8px" padding="16px" minHeight="400px">
+      <BodyText>Drag the right edge to resize horizontally.</BodyText>
+      <Resizable onWidthResize={({ width: w }) => setWidth(Math.round(w))}>
+        <Box width={`${width}px`} height="200px" className={styles['demo-box']}>
+          <BodyText>Resizable content</BodyText>
+          <div className={styles['size-display']}>width: {width}px</div>
+        </Box>
+        <ResizeHandle position="right" className={styles['demo-handle']} />
+      </Resizable>
+    </VStack>
+  );
+};
+
+export const VerticalResize = () => {
+  const [height, setHeight] = useState(200);
+
+  return (
+    <VStack gap="8px" padding="16px" minHeight="600px">
+      <BodyText>Drag the bottom edge to resize vertically.</BodyText>
+      <Resizable onHeightResize={({ height: h }) => setHeight(Math.round(h))}>
+        <Box width="400px" height={`${height}px`} className={styles['demo-box']}>
+          <BodyText>Resizable content</BodyText>
+          <div className={styles['size-display']}>height: {height}px</div>
+        </Box>
+        <ResizeHandle position="bottom" className={styles['demo-handle']} />
+      </Resizable>
+    </VStack>
+  );
+};
+
+export const CornerResize = () => {
+  const [width, setWidth] = useState(300);
+  const [height, setHeight] = useState(200);
+
+  return (
+    <VStack gap="8px" padding="16px" minHeight="600px">
+      <BodyText>
+        Drag the bottom-right corner to resize both axes simultaneously.
+      </BodyText>
+      <Resizable
+        onWidthResize={({ width: w }) => setWidth(Math.round(w))}
+        onHeightResize={({ height: h }) => setHeight(Math.round(h))}
+      >
+        <Box width={`${width}px`} height={`${height}px`} className={styles['demo-box']}>
+          <BodyText>Resizable content</BodyText>
+          <div className={styles['size-display']}>
+            {width}px × {height}px
+          </div>
+        </Box>
+        <ResizeHandle position="bottom-right" className={styles['demo-handle']} />
+      </Resizable>
+    </VStack>
+  );
+};
+
+export const MultipleHandles = () => {
+  const [width, setWidth] = useState(400);
+  const [height, setHeight] = useState(300);
+
+  return (
+    <VStack gap="8px" padding="16px" minHeight="600px">
+      <BodyText>Left, right, bottom edges and bottom-right corner — all active.</BodyText>
+      <Resizable
+        onWidthResize={({ width: w }) => setWidth(Math.round(w))}
+        onHeightResize={({ height: h }) => setHeight(Math.round(h))}
+      >
+        <Box width={`${width}px`} height={`${height}px`} className={styles['demo-box']}>
+          <BodyText>Resizable content</BodyText>
+          <div className={styles['size-display']}>
+            {width}px × {height}px
+          </div>
+        </Box>
+        <ResizeHandle position="left" className={styles['demo-handle']} />
+        <ResizeHandle position="right" className={styles['demo-handle']} />
+        <ResizeHandle position="bottom" className={styles['demo-handle']} />
+        <ResizeHandle
+          position="bottom-right"
+          className={styles['demo-handle']}
+          style={{
+            zIndex: 2,
+          }}
+        />
+      </Resizable>
+    </VStack>
+  );
+};
+
+export const RTL = () => {
+  const [widthStart, setWidthStart] = useState(300);
+  const [widthLeft, setWidthLeft] = useState(300);
+
+  return (
+    <VStack gap="16px" padding="16px" minHeight="400px">
+      <BodyText>
+        RTL context: &quot;start&quot; flips to the right edge, &quot;left&quot; stays
+        physical left.
+      </BodyText>
+      <div className={styles['rtl-container']}>
+        <VStack gap="16px">
+          <BodyText>position=&quot;start&quot; (logical — flips in RTL)</BodyText>
+          <Resizable onWidthResize={({ width: w }) => setWidthStart(Math.round(w))}>
+            <Box width={`${widthStart}px`} height="100px" className={styles['demo-box']}>
+              <div className={styles['size-display']}>start handle: {widthStart}px</div>
+            </Box>
+            <ResizeHandle position="start" className={styles['demo-handle']} />
+          </Resizable>
+
+          <BodyText>position=&quot;left&quot; (physical — stays on left in RTL)</BodyText>
+          <Resizable onWidthResize={({ width: w }) => setWidthLeft(Math.round(w))}>
+            <Box width={`${widthLeft}px`} height="100px" className={styles['demo-box']}>
+              <div className={styles['size-display']}>left handle: {widthLeft}px</div>
+            </Box>
+            <ResizeHandle position="left" className={styles['demo-handle']} />
+          </Resizable>
+        </VStack>
+      </div>
+    </VStack>
+  );
+};
+
+export const NestedResizable = () => {
+  const [outerWidth, setOuterWidth] = useState(500);
+  const [innerWidth, setInnerWidth] = useState(250);
+
+  return (
+    <VStack gap="8px" padding="16px" minHeight="400px">
+      <BodyText>Nested: each handle binds to its nearest Resizable provider.</BodyText>
+      <Resizable onWidthResize={({ width: w }) => setOuterWidth(Math.round(w))}>
+        <Box width={`${outerWidth}px`} height="300px" className={styles['nested-outer']}>
+          <BodyText>Outer ({outerWidth}px)</BodyText>
+          <Resizable onWidthResize={({ width: w }) => setInnerWidth(Math.round(w))}>
+            <Box
+              width={`${innerWidth}px`}
+              height="150px"
+              className={styles['nested-inner']}
+            >
+              <BodyText>Inner ({innerWidth}px)</BodyText>
+            </Box>
+            <ResizeHandle position="right" className={styles['demo-handle']} />
+          </Resizable>
+        </Box>
+        <ResizeHandle position="right" className={styles['demo-handle']} />
+      </Resizable>
+    </VStack>
+  );
+};
+
+export const OverflowHidden = () => {
+  const [width, setWidth] = useState(300);
+
+  return (
+    <VStack gap="8px" padding="16px" minHeight="400px">
+      <BodyText>
+        Outer box is the resize target (minWidth: 100px). Inner box clips content with
+        overflow:hidden. Shrink below 200px to clip the purple box. It stops at 100px due
+        to the min-width constraint.
+      </BodyText>
+      <Resizable onWidthResize={({ width: w }) => setWidth(Math.round(w))}>
+        <Box width={`${width}px`} minWidth="100px" height="200px">
+          <Box height="100%" overflow="hidden" className={styles['demo-box']}>
+            <Box minWidth="200px" height="80px" className={styles['clip-target']} />
+            <div className={styles['size-display']}>width: {width}px</div>
+          </Box>
+        </Box>
+        <ResizeHandle position="right" className={styles['demo-handle']} />
+      </Resizable>
+    </VStack>
+  );
+};
+
+export const CustomHandle = () => {
+  const handleRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(300);
+
+  return (
+    <VStack gap="8px" padding="16px" minHeight="400px">
+      <BodyText>Custom styled handle with forwarded ref and aria attributes.</BodyText>
+      <Resizable onWidthResize={({ width: w }) => setWidth(Math.round(w))}>
+        <Box width={`${width}px`} height="200px" className={styles['demo-box']}>
+          <BodyText>Resizable content</BodyText>
+          <div className={styles['size-display']}>width: {width}px</div>
+        </Box>
+        <ResizeHandle
+          ref={handleRef}
+          position="right"
+          style={{
+            background: 'rgba(234, 67, 53, 0.4)',
+            width: '8px',
+          }}
+          aria-label="Resize handle"
+          data-testid="custom-handle"
+        />
+      </Resizable>
+    </VStack>
+  );
+};

package/src/utils/resize/__stories__/resizable_stories.module.css

@@ -0,0 +1,47 @@
+@layer tcn-system {
+  :where(.demo-box) {
+    background: var(--tcn-color-surface-secondary, #f0f0f0);
+    border: 1px solid var(--tcn-color-border, #ccc);
+    padding: 16px;
+    position: relative;
+  }
+
+  :where(.demo-handle) {
+    background: rgba(0, 120, 212, 0.3);
+  }
+
+  :where(.demo-handle:hover) {
+    background: rgba(0, 120, 212, 0.6);
+  }
+
+  :where(.size-display) {
+    font-family: monospace;
+    font-size: 12px;
+    color: var(--tcn-color-text-secondary, #666);
+    margin-top: 8px;
+  }
+
+  :where(.rtl-container) {
+    direction: rtl;
+    border: 2px dashed #999;
+    padding: 16px;
+  }
+
+  :where(.clip-target) {
+    background: #7b1fa2;
+    border-radius: 4px;
+    flex-shrink: 0;
+  }
+
+  :where(.nested-outer) {
+    background: #e8f0fe;
+    border: 2px solid #4285f4;
+    padding: 24px;
+  }
+
+  :where(.nested-inner) {
+    background: #fce8e6;
+    border: 2px solid #ea4335;
+    padding: 16px;
+  }
+}