@tcn/ui 0.0.4 → 0.2.0

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

@@ -146,7 +146,8 @@ legend {
 
   --status-color-disabled: #7f7f7f;
   --status-color-info: #008cff;
-  --status-color-warning: #ff0000;
+  --status-color-warning: #ffff00;
+  --status-color-positive: #00ff00;
   --status-color-error: #ff0000;
 
   --async-color-initial: #c0c0c0;
@@ -184,24 +185,290 @@ legend {
   --foreground-color-tertiary: #222222;
   --foreground-color-quaternary: #222222;
 
-  --accent-color: #008cff;
+  --material-disabled: #d3d3d3;
+  --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;
+
+  --action: 23, 65%, 49%;
+  --on-action: 0, 0%, 100%;
+  --material: 0, 0%, 100%;
+  --on-material: 213, 35.6%, 34.7%;
 }
 
 * {
   position: relative;
   box-sizing: border-box;
 }
+/* ===== Actions ===== */
+
+.tcn-interactive {
+  cursor: pointer;
+  user-select: none;
+  transition:
+    transform 0.1s,
+    background 0.1s,
+    color 0.1s;
+
+  --act: hsl(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%);
+  --act-raised: color-mix(in srgb, var(--act), white 8%);
+  --act-faint: hsla(var(--action), 0.2);
+  --on-mat: hsl(var(--on-material));
+  --on-mat-faint: hsla(var(--on-material), 0.2);
+  --mat: hsl(var(--material));
+  --mat-down: color-mix(in srgb, var(--mat), black 8%);
+  --mat-raised: color-mix(in srgb, var(--mat), white 8%);
+}
+
+.tcn-interactive[data-is-disabled="true"] {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.tcn-interactive[data-hierarchy="primary"] {
+  background: var(--act);
+  color: var(--on-act);
+  border: 1px solid var(--act);
+}
+
+.tcn-interactive[data-hierarchy="primary"]:focus-visible {
+  outline: 2px dashed var(--act);
+}
+
+.tcn-interactive[data-hierarchy="primary"][data-is-disabled="true"] {
+  background: var(--material-disabled);
+  color: white;
+  border: 1px solid var(--material-disabled);
+}
+
+.tcn-interactive[data-hierarchy="primary"]:hover {
+  background: var(--act-raised);
+}
+
+.tcn-interactive[data-hierarchy="primary"]:active {
+  background: var(--act-down);
+}
+
+.tcn-interactive[data-hierarchy="secondary"] {
+  background: transparent;
+  color: var(--on-mat);
+  border: 1px solid var(--on-mat);
+}
+
+.tcn-interactive[data-hierarchy="secondary"]:focus-visible {
+  outline: 2px dashed var(--on-mat);
+}
+
+.tcn-interactive[data-hierarchy="secondary"][data-is-disabled="true"] {
+  color: var(--material-disabled);
+  border: 1px solid var(--material-disabled);
+}
+
+.tcn-interactive[data-hierarchy="secondary"]:hover {
+  background: var(--on-mat-faint);
+}
+
+.tcn-interactive[data-hierarchy="secondary"]:active {
+  background: var(--mat-down);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"] {
+  background: transparent;
+  color: var(--on-mat);
+  border: 1px solid transparent;
+}
+
+.tcn-interactive[data-hierarchy="tertiary"]:focus-visible {
+  outline: 2px dashed var(--on-mat);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"][data-is-disabled="true"] {
+  color: var(--material-disabled);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"]:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--on-mat);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  color: var(--on-mat);
+  background: var(--on-mat-faint);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"]:active {
+  background: var(--mat-down);
+}
+
+/* Button */
+.tcn-button {
+  border-radius: 4px;
+}
+
+.tcn-button[data-size="sm"] {
+  padding: 0px 8px;
+  min-height: 22px;
+}
+
+.tcn-button[data-size="md"] {
+  padding: 0px 12px;
+  min-height: 26px;
+}
+
+.tcn-button[data-size="lg"] {
+  padding: 0px 16px;
+  min-height: 32px;
+}
+
+.tcn-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+}
+
+.tcn-button:active {
+  transform: translateY(1px);
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
+
+.tcn-slim-button {
+  height: auto;
+  width: auto;
+  padding: 0;
+}
+
+.tcn-slim-button[data-size="sm"] {
+  min-height: 12px;
+  min-width: 12px;
+  padding: 0;
+  .tcn-icon {
+    min-height: 10px;
+    min-width: 10px;
+  }
+}
+
+.tcn-slim-button[data-size="md"] {
+  min-height: 18px;
+  min-width: 18px;
+  padding: 0;
+  .tcn-icon {
+    min-height: 14px;
+    min-width: 14px;
+  }
+}
+
+.tcn-slim-button[data-size="lg"] {
+  min-height: 24px;
+  min-width: 24px;
+  padding: 0;
+  .tcn-icon {
+    min-height: 20px;
+    min-width: 20px;
+  }
+}
+
+/* ===== 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));
+}
 
 /* ===== SURFACES ===== */
+.tcn-draggable[data-is-draggable="true"] {
+  .tcn-drag-handle {
+    cursor: move;
+  }
+}
+
+.tcn-frame[data-is-veil="true"] {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.tcn-list {
+  gap: var(--gap-medium);
+  .tcn-item {
+    height: 24px;
+    padding: 0px var(--padding-medium);
+    border-radius: var(--shape-radius-medium);
+  }
+}
 
 .tcn-veil {
   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);
@@ -210,28 +477,80 @@ legend {
   /* TODO: This should be a variable */
   border: 1px solid rgba(170, 170, 170, 1);
   overflow: hidden;
+
+  :where(.tcn-typography) {
+    color: inherit;
+  }
+
   :where(.tcn-header) {
+    --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));
     min-height: 40px;
-    /* TODO: This should be a variable */
-    background-color: rgb(73, 116, 133);
-    color: white;
     padding: 0 var(--v-inset);
     gap: var(--gap-medium);
 
-    :where(.tcn-title) {
-      color: white;
+    :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;
-      color: white;
     }
+  }
 
-    :where(.tcn-button)[data-hierarchy="tertiary"] {
-      color: white;
-    }
+  :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);
+  }
+}
+
+/* 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;
+
+  :where(.tcn-typography) {
+    color: inherit;
+  }
+
+  :where(.tcn-header) {
+    --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));
+    min-height: 40px;
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
 
     :where(.tcn-divider) {
       padding: 4px 0;
@@ -273,10 +592,10 @@ legend {
   --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;
-    border-bottom: 1px solid var(--foreground-color-primary);
     padding: 0 var(--v-inset);
     gap: var(--gap-medium);
 
@@ -284,12 +603,6 @@ legend {
       font-weight: 700;
     }
 
-    :where(.tcn-button) {
-      padding: 0;
-      min-width: 18px;
-      min-height: 18px;
-    }
-
     :where(.tcn-divider) {
       padding: 4px 0;
       :where(.tcn-divider-line) {
@@ -300,16 +613,20 @@ legend {
     }
   }
 
+  /* 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);
+  }
+
+  /* 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-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) {
@@ -320,7 +637,22 @@ legend {
   :where(.tcn-footer) {
     gap: var(--gap-medium);
     min-height: 40px;
-    border-top: 1px solid var(--foreground-color-primary);
     padding: 0 var(--v-inset);
   }
 }
+
+/* Card */
+.tcn-card {
+  padding: 0;
+  gap: 0px;
+  border: 1px solid var(--foreground-color-primary);
+  border-radius: var(--shape-radius-medium);
+  overflow: hidden;
+  :where(.tcn-header) {
+    /* TODO: Color header */
+    min-height: 32px;
+  }
+  :where(.tcn-body) {
+    padding: var(--padding-medium) var(--v-inset);
+  }
+}

package/src/typography/title/title.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { clsx } from 'clsx';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import type { Emphasis, Hierarchy, Size } from '../../utils/index.js';
@@ -21,22 +21,25 @@ export interface TitleOwnProps {
 
 export type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;
 
-export function Title({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-  as,
-}: TitleProps) {
+export const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(
+  {
+    size = 'md',
+    emphasis = 'normal',
+    hierarchy = 'primary',
+    color,
+    children,
+    className,
+    style = {},
+    padStart,
+    padEnd,
+    padBottom,
+    padTop,
+    pad,
+    selectable = true,
+    as,
+  },
+  ref
+) {
   let As: React.ElementType = as as React.ElementType;
 
   if (as == null) {
@@ -75,14 +78,15 @@ export function Title({
 
   return (
     <As
+      ref={ref}
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={clsx(styles['title'], 'title', 'tcn-title', className)}
+      className={clsx(styles['title'], 'title', 'tcn-typography', 'tcn-title', className)}
       style={style}
       data-size={size}
     >
       {children}
     </As>
   );
-}
+});

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

@@ -0,0 +1,48 @@
+import { Draggable } from '../draggable/draggable.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import { DragHandle } from '../handle.js';
+import { Box } from '../../../stacks/box/box.js';
+import { BodyText } from '../../../typography/index.js';
+import styles from './draggable_stories.module.css';
+
+export default {
+  title: 'Utils/Draggable',
+  component: Draggable,
+  tags: ['autodocs'],
+};
+
+export const DraggableStory = () => {
+  return (
+    <VStack minHeight="600px" height="100%" width="100%">
+      <Draggable>
+        <Box width="400px" height="300px" className={styles['handle-container']}>
+          <DragHandle>
+            <Box
+              className={styles.handle}
+              width="100px"
+              style={{
+                top: 50,
+                left: 100,
+              }}
+            >
+              <BodyText>Drag Handle</BodyText>
+            </Box>
+          </DragHandle>
+
+          <DragHandle>
+            <Box
+              className={styles.handle}
+              width="150px"
+              style={{
+                top: 200,
+                left: 50,
+              }}
+            >
+              <BodyText>Another Drag Handle</BodyText>
+            </Box>
+          </DragHandle>
+        </Box>
+      </Draggable>
+    </VStack>
+  );
+};

package/src/utils/dnd/__stories__/draggable_stories.module.css

@@ -0,0 +1,21 @@
+.handle {
+  position: relative;
+  background: var(--accent-color);
+  color: white;
+  font-weight: bold;
+  border: 2px solid black;
+  padding: var(--padding-medium);
+  border-radius: var(--shape-radius-medium);
+}
+
+.handle-container {
+  background: #f7e9fe;
+  padding: var(--padding-medium);
+  border-radius: var(--shape-radius-large);
+}
+
+.handle-container[data-is-dragging="true"] {
+  box-shadow:
+    0 4px 16px 0 rgba(25, 118, 210, 0.2),
+    0 1.5px 4px 0 rgba(21, 101, 192, 0.15);
+}

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);
+}