@tcn/ui 0.9.0 → 0.11.0

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

@@ -6,7 +6,7 @@ import { Heading, Section, VBody } from '../../../layouts/index.js';
 import { UtilityBar } from '../../../layouts/utility_bar/utility_bar.js';
 import { Box, HStack, Spacer } from '../../../stacks/index.js';
 import { Title } from '../../../typography/title/title.js';
-import { VPanel } from '../v_panel.js';
+import { Panel } from '../panel.js';
 // Styles
 import styles from './panel_stories.module.css';
 import { TTable, TBody, TD, TH, THead, TR } from '../../../layouts/table/table.js';
@@ -23,7 +23,7 @@ import { BodyText } from '../../../typography/index.js';
 
 export default {
   title: 'Surfaces/Panel',
-  component: VPanel,
+  component: Panel,
   tags: ['autodocs'],
 };
 
@@ -71,8 +71,8 @@ const UtilGroupExample = () => {
 
 export const Default = () => {
   return (
-    <div className={styles['stories-container']}>
-      <VPanel maxHeight="600px">
+    <Box className={styles['stories-container']}>
+      <Panel maxHeight="600px">
         <Header>
           <Title emphasis="strong">Panel Primary Header</Title>
           <Spacer />
@@ -109,16 +109,16 @@ export const Default = () => {
           <Button hierarchy="secondary">Secondary</Button>
           <Button hierarchy="primary">Primary</Button>
         </Footer>
-      </VPanel>
-    </div>
+      </Panel>
+    </Box>
   );
 };
 
 export const WithTable = () => {
   return (
-    <div className={styles['stories-container']}>
+    <Box className={styles['stories-container']}>
       <HStack gap="16px" maxHeight="600px" height="100%" maxWidth="1440px">
-        <VPanel minWidth="300px">
+        <Panel minWidth="300px">
           <Header>
             <Title emphasis="strong">Table Title</Title>
             <Spacer />
@@ -190,8 +190,8 @@ export const WithTable = () => {
               </Button>
             </HStack>
           </Footer>
-        </VPanel>
-        <VPanel maxHeight="600px" width="300px" minWidth="300px">
+        </Panel>
+        <Panel maxHeight="600px" width="300px" minWidth="300px">
           <Header>
             <Title emphasis="strong">John Doe</Title>
             <Spacer />
@@ -210,8 +210,8 @@ export const WithTable = () => {
               <BodyText>Email: john.doe@example.com</BodyText>
             </Section>
           </VBody>
-        </VPanel>
+        </Panel>
       </HStack>
-    </div>
+    </Box>
   );
 };

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

@@ -19,8 +19,8 @@
 
 .stories-container {
   width: 100%;
-  height: 100%;
-  padding: 16px;
+  height: 100vh;
+  min-height: 400px;
   background-color: #ccc;
-  overflow: auto;
+  padding: 16px;
 }

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

@@ -1,10 +1,5 @@
 @layer tcn-system {
-  :where(.panel-stack) {
-    width: 100%;
+  .panel {
     height: 100%;
-    overflow: auto;
   }
-  /* .page-stack > :global(.stack) {
-  gap: var(--gap);
-} */
 }

package/src/surfaces/panel/panel.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import clsx from 'clsx';
+
+import styles from './panel.module.css';
+
+export type PanelProps = ScaffoldProps;
+
+export const Panel = React.forwardRef<HTMLElement, PanelProps>(function Panel(
+  { children, className, ...props }: PanelProps,
+  ref
+) {
+  return (
+    <Scaffold
+      ref={ref}
+      className={clsx(styles['panel'], 'tcn-surface', 'tcn-panel', className)}
+      {...props}
+    >
+      {children}
+    </Scaffold>
+  );
+});

package/src/surfaces/window/window.tsx

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import React from 'react';
-import { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';
 import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';
 
 // Styles
 import styles from './window.module.css';
@@ -9,7 +9,17 @@ import styles from './window.module.css';
 export type WindowProps = FrameOwnProps & ScaffoldProps;
 
 export const Window = React.forwardRef<HTMLElement, WindowProps>(function Window(
-  { children, className, isOpen, draggable = true, veil = false, ...props }: WindowProps,
+  {
+    children,
+    className,
+    isOpen,
+    draggable = true,
+    resizable = true,
+    veil = false,
+    width,
+    height,
+    ...props
+  }: WindowProps,
   ref
 ) {
   return (
@@ -18,8 +28,8 @@ export const Window = React.forwardRef<HTMLElement, WindowProps>(function Window
       draggable={draggable}
       veil={veil}
       className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}
-      width="auto"
-      height="auto"
+      width={width}
+      height={height}
     >
       <Scaffold ref={ref} {...props}>
         {children}

package/src/themes/stories/controls_fieldset.tsx

@@ -30,7 +30,7 @@ export function ControlsFieldSet() {
   const [datePickerValueWithTime, setDatePickerValueWithTime] = useState<Date | null>(
     null
   );
-  const [phoneNumberValue, setPhoneNumberValue] = useState<string>('');
+  const [phoneNumberValue, setPhoneNumberValue] = useState<string | undefined>(undefined);
 
   // Additional input state
   const [checkboxValue, setCheckboxValue] = useState<boolean>(false);

package/src/themes/stylesheets/reset.css

@@ -81,7 +81,8 @@
   mark,
   audio,
   button,
-  video {
+  video,
+  dialog {
     margin: 0;
     padding: 0;
     border: 0;
@@ -134,4 +135,10 @@
     font: inherit;
     color: inherit;
   }
+  dialog {
+    max-width: none;
+    max-height: none;
+    background: transparent;
+    color: inherit;
+  }
 }

package/src/themes/theme.tsx

@@ -10,9 +10,10 @@ import layers from '../css/layers.css?raw';
 export interface ThemeProps extends BoxProps {
   styleSheets: CSSStyleSheet[];
   children: React.ReactNode;
+  className?: string;
 }
 
-export function Theme({ styleSheets, children, ...boxProps }: ThemeProps) {
+export function Theme({ styleSheets, children, className, ...boxProps }: ThemeProps) {
   useLayoutEffect(() => {
     document.adoptedStyleSheets = styleSheets;
   }, [styleSheets]);
@@ -33,7 +34,10 @@ export function Theme({ styleSheets, children, ...boxProps }: ThemeProps) {
   }, []);
 
   return (
-    <Box className={clsx('tcn-theme-root', styles['tcn-theme-provider'])} {...boxProps}>
+    <Box
+      className={clsx('tcn-theme-root', styles['tcn-theme-provider'], className)}
+      {...boxProps}
+    >
       {children}
     </Box>
   );

package/src/themes/themes/ergo/__stories__/material.stories.tsx

@@ -3,10 +3,9 @@ import { VStack } from '../../../../stacks/v_stack.js';
 import { clsx } from 'clsx';
 import { PlusIcon } from '@tcn/icons/plus_icon.js';
 import { Divider, Footer, Header, VBody } from '../../../../layouts/index.js';
-import { VPanel } from '../../../../surfaces/index.js';
+import { Panel } from '../../../../surfaces/index.js';
 import { Button } from '../../../../actions/button/button/button.js';
 import { Spacer } from '../../../../stacks/spacer.js';
-import { SlimButton } from '../../../../actions/button/slim_button/slim_button.js';
 import { SB_TonePicker } from './components/tone_picker/sb_tone_picker.js';
 import { formatHSLString, getContrastText, parseHSL } from './utils.js';
 import { SB_MaterialPicker } from './components/material_picker/sb_material_picker.js';
@@ -86,7 +85,7 @@ export const DynamicSurface = (args: {
         <Title>Ergo Theme: Materials and Surfaces</Title>
       </Header>
       <SB_MaterialPicker handleSurfaceClick={handleSurfaceClick} />
-      <VPanel
+      <Panel
         minHeight="200px"
         maxHeight="700px"
         height="100%"
@@ -95,30 +94,30 @@ export const DynamicSurface = (args: {
         <Header>
           Enabled Utilities
           <Spacer />
-          <SlimButton hierarchy="tertiary">
+          <Button utility hierarchy="tertiary">
             <PlusIcon />
-          </SlimButton>
-          <SlimButton hierarchy="secondary">
+          </Button>
+          <Button utility hierarchy="secondary">
             <PlusIcon />
-          </SlimButton>
+          </Button>
           <Divider vertical length="md" />
-          <SlimButton hierarchy="primary">
+          <Button utility hierarchy="primary">
             <PlusIcon />
-          </SlimButton>
+          </Button>
         </Header>
         <Header>
           Disabled Utilities
           <Spacer />
-          <SlimButton hierarchy="tertiary" disabled>
+          <Button utility hierarchy="tertiary" disabled>
             <PlusIcon />
-          </SlimButton>
-          <SlimButton hierarchy="secondary" disabled>
+          </Button>
+          <Button utility hierarchy="secondary" disabled>
             <PlusIcon />
-          </SlimButton>
+          </Button>
           <Divider vertical length="md" />
-          <SlimButton hierarchy="primary" disabled>
+          <Button utility hierarchy="primary" disabled>
             <PlusIcon />
-          </SlimButton>
+          </Button>
         </Header>
         <VBody>
           <SB_TonePicker />
@@ -143,7 +142,7 @@ export const DynamicSurface = (args: {
           <Button hierarchy="secondary">Secondary</Button>
           <Button hierarchy="primary">Primary</Button>
         </Footer>
-      </VPanel>
+      </Panel>
       <Header></Header>
     </VStack>
   );

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

@@ -63,6 +63,10 @@
     --bar-lg: 40px;
     --bar-xl: 48px;
 
+    --action-sm: 20px;
+    --action-md: 24px;
+    --action-lg: 32px;
+
     /* Status Colors */
     --status-color-disabled: var(--ergo-grey-light);
     --status-color-info: var(--ergo-status-blue);
@@ -187,7 +191,6 @@
   * Primarily manages button dimensions and sizing ratios.
   */
   .tcn-base-button {
-    /* TODO: btn size should look for "--tcn-action-size" variable before defaulting. */
     --btn-size-base: 26px;
     --btn-pad-base: 12px;
 
@@ -307,21 +310,23 @@
       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;
+      :not(.tcn-select) {
+        &::before,
+        &::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          right: 0;
+          height: 4px;
+        }
+
+        &::before {
+          top: -2px;
+        }
+
+        &::after {
+          bottom: -2px;
+        }
       }
     }
 
@@ -579,6 +584,18 @@
     color: var(--on-material);
   }
 
+  /* Divider: use material-line; emphasis variants for strong/faint */
+  .tcn-divider-line,
+  .tcn-divider-line[data-emphasis="normal"] {
+    background: var(--material-line);
+  }
+  .tcn-divider-line[data-emphasis="strong"] {
+    background: color-mix(in srgb, var(--material-line) 80%, black 20%);
+  }
+  .tcn-divider-line[data-emphasis="faint"] {
+    background: color-mix(in srgb, var(--material-line) 80%, white 20%);
+  }
+
   /* ===== SURFACES ===== */
   .tcn-draggable[data-is-draggable="true"] {
     .tcn-drag-handle {
@@ -586,8 +603,8 @@
     }
   }
 
-  .tcn-frame[data-is-veil="true"] {
-    background-color: rgba(0, 0, 0, 0.5);
+  .tcn-frame-dialog {
+    border: inherit;
   }
 
   .tcn-tooltip {
@@ -606,7 +623,22 @@
       border-radius: var(--shape-radius-medium);
     }
   }
+  /* Rail: */
+  .tcn-utility-strip {
+    min-width: var(--bar-md);
+  }
+
+  .tcn-utility-strip,
+  .tcn-side {
+    padding-block: var(--padding-medium);
+    gap: var(--gap-medium);
+  }
 
+  .tcn-rail {
+    :where(.tcn-body) {
+      gap: var(--gap-medium);
+    }
+  }
   /* Scaffold: */
   .tcn-footer,
   .tcn-header,
@@ -998,4 +1030,164 @@
       color: var(--on-material);
     }
   }
+
+  /* ===== INPUTS ===== */
+  .tcn-control {
+    --act: var(--action);
+    --mat: var(--material);
+    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);
+
+    font-size: 12px;
+    border: 1px solid var(--ergo-grey);
+    box-sizing: border-box;
+    min-height: var(--action-md);
+    border-radius: var(--shape-radius-medium);
+    padding-inline: 4px;
+  }
+
+  .tcn-control[data-is-disabled="false"]:hover {
+    background: var(--act-raised);
+  }
+
+  .tcn-control:focus-visible {
+    outline: 2px solid var(--ergo-primary);
+    outline-offset: 2px;
+  }
+
+  .tcn-control:focus {
+    border: 1px solid var(--act);
+  }
+
+  .tcn-control::placeholder {
+    color: var(--ergo-grey);
+  }
+
+  .tcn-control[data-is-disabled="true"] {
+    cursor: not-allowed;
+    background: var(--material-disabled);
+    color: var(--on-material-disabled);
+  }
+
+  .tcn-control[data-is-disabled="true"]::placeholder {
+    color: var(--on-material-disabled);
+  }
+
+  .tcn-input {
+    height: auto;
+  }
+
+  .tcn-textarea,
+  .tcn-input {
+    cursor: text;
+  }
+
+  .tcn-input-group {
+    border-radius: var(--shape-radius-medium);
+
+    &:focus-within {
+      outline: 2px solid var(--ergo-primary);
+      outline-offset: 2px;
+    }
+
+    .tcn-input-group-slot {
+      z-index: 1;
+      border-radius: 0;
+      height: auto;
+      min-height: var(--action-md);
+      padding-block: 0;
+      &:focus,
+      &:focus-visible {
+        z-index: 3;
+        outline: none;
+      }
+    }
+
+    .tcn-input-group-slot:first-child {
+      border-top-left-radius: var(--shape-radius-medium);
+      border-bottom-left-radius: var(--shape-radius-medium);
+    }
+
+    .tcn-input-group-slot:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    .tcn-input-group-slot:last-child {
+      border-top-right-radius: var(--shape-radius-medium);
+      border-bottom-right-radius: var(--shape-radius-medium);
+    }
+
+    .tcn-select,
+    .tcn-button,
+    .tcn-button[data-hierarchy] {
+      border: 1px solid var(--ergo-grey);
+      height: auto;
+      min-height: var(--action-md);
+      min-width: var(--action-md);
+      box-sizing: border-box;
+      &:hover,
+      &[data-hover] {
+        transform: none;
+      }
+    }
+
+    .tcn-select:focus-visible,
+    .tcn-button:focus-visible,
+    .tcn-button[data-hierarchy]:focus-visible {
+      border-color: var(--ergo-primary);
+    }
+  }
+
+  .tcn-slider[data-is-disabled="true"] {
+    &::-webkit-slider-runnable-track {
+      background: var(--ergo-grey-light);
+    }
+
+    &::-webkit-slider-thumb {
+      background-color: var(--ergo-white);
+      border: 1px solid var(--ergo-grey-light);
+    }
+  }
+
+  .tcn-checkbox {
+    border-color: var(--ergo-primary);
+
+    &:focus-visible,
+    &:focus {
+      outline: 2px solid var(--ergo-primary);
+      outline-offset: 2px;
+    }
+
+    &[data-is-disabled="true"] {
+      cursor: not-allowed;
+      border-color: var(--material-disabled);
+    }
+
+    &[data-checked="true"][data-is-disabled="true"] {
+      background-color: var(--ergo-grey-light);
+    }
+
+    &[data-checked="false"][data-is-disabled="true"] {
+      background: var(--material);
+      border-color: var(--ergo-grey-light);
+      color: var(--ergo-grey-light);
+    }
+  }
+
+  .tcn-switch-wrapper[data-focused="true"][data-is-checked="false"],
+  .tcn-switch-wrapper[data-focused="true"][data-is-checked="true"] {
+    outline: 2px solid var(--ergo-primary);
+    outline-offset: 2px;
+  }
+
+  /* Quick fix to use some of the default module styles.*/
+  .tcn-input,
+  .tcn-select,
+  .tcn-slider,
+  .tcn-checkbox,
+  .tcn-switch-wrapper,
+  .tcn-date-picker,
+  .tcn-date-picker-year-selector,
+  .tcn-radio {
+    --accent-color: var(--ergo-primary);
+  }
 }

package/src/typography/body_text/body_text.tsx

@@ -36,6 +36,7 @@ export const BodyText = React.forwardRef<HTMLDivElement, BodyTextProps>(function
     pad,
     selectable = true,
     breakWords = false,
+    ...props
   }: BodyTextProps,
   ref
 ) {
@@ -73,6 +74,7 @@ export const BodyText = React.forwardRef<HTMLDivElement, BodyTextProps>(function
       style={style}
       data-size={size}
       data-word-break={breakWords}
+      {...props}
     >
       {children}
     </div>

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

@@ -1,10 +1,11 @@
-import { Draggable } from '../draggable/draggable.js';
-import { useDragContainer } from '../context.js';
-import { VStack } from '../../../stacks/v_stack.js';
-import { DragHandle } from '../handle.js';
+import { Button } from '../../../actions/button/button/button.js';
 import { Box } from '../../../stacks/box/box.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import { ZStack } from '../../../stacks/z_stack.js';
 import { BodyText } from '../../../typography/index.js';
-import { Button } from '../../../actions/button/button/button.js';
+import { useDragContainer } from '../context.js';
+import { Draggable } from '../draggable/draggable.js';
+import { DragHandle } from '../handle.js';
 import styles from './draggable_stories.module.css';
 
 export default {
@@ -60,13 +61,18 @@ function ResetPositionButton() {
 
 export const WithSetPosition = () => {
   return (
-    <VStack minHeight="600px" height="100%" width="100%" gap="8px">
+    <ZStack minHeight="600px" height="100%" width="100%">
       <BodyText>
         Drag the box, then click &quot;Reset position&quot; to move it back to (0, 0).
         Dragging again should start from the new position.
       </BodyText>
       <Draggable>
-        <Box width="400px" height="300px" className={styles['handle-container']}>
+        <Box
+          as="dialog"
+          width="400px"
+          height="300px"
+          className={styles['handle-container']}
+        >
           <VStack gap="8px" padding="8px">
             <DragHandle>
               <Box className={styles.handle} width="120px" padding="8px">
@@ -77,6 +83,6 @@ export const WithSetPosition = () => {
           </VStack>
         </Box>
       </Draggable>
-    </VStack>
+    </ZStack>
   );
 };

package/src/utils/dnd/hooks/use_drag_container.ts

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from 'react';
-import { useDraggable } from './use_draggable.js';
 import type { Position } from '../../index.js';
 import type { DragContainer } from '../types.js';
+import { useDraggable } from './use_draggable.js';
 
 export interface UseDragContainerOptions {
   initialPosition?: Position;
@@ -10,7 +10,14 @@ export interface UseDragContainerOptions {
 export function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {
   const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);
   const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });
+  /**
+   *  The value that triggers re-renders. It’s updated in dragCallback so the UI
+   *  moves while dragging, and it’s what the hook returns so the consumer can
+   *  render the element at that position
+   *  (e.g. style={{ left: position.x, top: position.y }}).
+   */
   const [position, setPosition] = useState(positionRef.current);
+
   const [isDragging, setIsDragging] = useState(false);
 
   useDraggable({
@@ -24,9 +31,12 @@ export function useMakeDragContainer(options: UseDragContainerOptions): DragCont
         y: positionRef.current.y + deltaY,
       });
     },
-    endDragCallback: () => {
+    endDragCallback: (deltaX, deltaY) => {
+      positionRef.current = {
+        x: positionRef.current.x + deltaX,
+        y: positionRef.current.y + deltaY,
+      };
       setIsDragging(false);
-      positionRef.current = position;
     },
   });
 

package/dist/h_body.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._h-body_d56f4f1){min-width:0;flex-grow:1;height:100%}}

package/dist/h_panel.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._panel-stack_f1896f3){width:100%;height:100%;overflow:auto}}

package/dist/header.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._header_3155fa4){width:100%;min-height:0;padding:var(--padding) var(--padding-large);gap:var(--gap)}}

package/dist/layouts/rail/main/main.d.ts

@@ -1,6 +0,0 @@
-import { default as React } from 'react';
-import { HStackProps } from '../../../stacks/h_stack.js';
-export interface MainProps extends Omit<HStackProps, 'as'> {
-}
-export declare const Main: React.ForwardRefExoticComponent<MainProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=main.d.ts.map

package/dist/layouts/rail/main/main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../src/layouts/rail/main/main.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAKtE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;CAAG;AAG7D,eAAO,MAAM,IAAI,+EAef,CAAC"}