@tcn/ui 0.1.1 → 0.2.0

package/src/inputs/phone_number_input/phone_number_input.tsx

@@ -118,6 +118,8 @@ function getCountryCodeFromValue(
 export interface PhoneNumberInputProps
   extends Omit<HStackProps, 'onChange' | 'children'> {
   value?: string;
+  name?: string;
+  autoComplete?: string;
   defaultCountry?: string;
   /**
    * Callback fired when the phone number value changes.
@@ -135,6 +137,8 @@ export interface PhoneNumberInputProps
 export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
   {
     value = '',
+    name,
+    autoComplete,
     defaultCountry = 'US',
     onChange,
     countrySelectRef: countryRef,
@@ -345,6 +349,8 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
         {obfuscateValue ? (
           <MaskInput
             key="obfuscated"
+            name={name}
+            autoComplete={autoComplete}
             ref={forkedInputRef}
             value=""
             mask={createObfuscatedMasks(currentMasks)}
@@ -365,6 +371,8 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
         ) : (
           <MaskInput
             key="normal"
+            name={name}
+            autoComplete={autoComplete}
             ref={forkedInputRef}
             value={phoneNumber}
             mask={currentMasks}

package/src/inputs/textarea/textarea.tsx

@@ -1,10 +1,10 @@
 import { clsx } from 'clsx';
 import React from 'react';
-import { HTMLAttributes } from 'react';
+import { TextareaHTMLAttributes } from 'react';
 import styles from './textarea.module.css';
 
 export interface TextareaProps
-  extends Omit<HTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
   value?: string;
   width?: string;
   height?: string;

package/src/layouts/header/header.tsx

@@ -4,7 +4,6 @@ import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
 import styles from './header.module.css';
 
-// UtilityBar
 export interface HeaderProps extends Omit<HStackProps, 'as'> {
   hierarchy?: Hierarchy;
   size?: Size;

package/src/overlay/frame/frame.stories.tsx

@@ -0,0 +1,40 @@
+import { ZStack } from '../../stacks/z_stack.js';
+import { Frame, type FrameOwnProps } from './frame.js';
+import { DragHandle } from '../../utils/dnd/handle.js';
+import { Title } from '../../typography/title/title.js';
+import { BodyText } from '../../typography/index.js';
+import { Header } from '../../layouts/index.js';
+import styles from './frame_stories.module.css';
+export default {
+  title: 'Overlay/Floating/Frame',
+  component: Frame,
+  tags: ['autodocs'],
+
+  args: {
+    isOpen: true,
+    draggable: true,
+    veil: false,
+  },
+};
+
+export const FrameStory = (args: Omit<FrameOwnProps, 'children'>) => {
+  return (
+    <ZStack height="100%" width="100%" minHeight="600px">
+      <Frame
+        width="300px"
+        height="300px"
+        className={styles['sb-frame-container']}
+        {...args}
+      >
+        <Header className={styles['sb-frame-header']}>
+          <Title> This is a frame</Title>
+        </Header>
+        <DragHandle>
+          <Header className={styles['sb-frame-header']}>
+            <BodyText> You can drag here.</BodyText>
+          </Header>
+        </DragHandle>
+      </Frame>
+    </ZStack>
+  );
+};

package/src/overlay/frame/frame.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ZStack, type ZStackProps } from '../../stacks/index.js';
+import { Portal } from '../portal/portal.js';
+import { Draggable } from '../../utils/dnd/draggable/draggable.js';
+
+export interface FrameOwnProps {
+  isOpen?: boolean;
+  children?: React.ReactNode;
+  draggable?: boolean;
+  veil?: boolean;
+}
+
+export type FrameProps = ZStackProps & FrameOwnProps;
+
+export const Frame = React.forwardRef<HTMLDialogElement, FrameProps>(function Frame(
+  { children, isOpen = false, draggable = true, veil = false, ...rest }: FrameProps,
+  ref
+) {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <ZStack width="100%" height="100%" data-is-veil={veil} className="tcn-frame">
+        <Draggable draggable={draggable}>
+          <ZStack ref={ref} {...rest}>
+            {children}
+          </ZStack>
+        </Draggable>
+      </ZStack>
+    </Portal>
+  );
+});

package/src/overlay/frame/frame_stories.module.css

@@ -0,0 +1,14 @@
+.sb-frame-header {
+  background: var(--accent-color);
+  color: white;
+  font-weight: bold;
+  border: 2px solid black;
+  padding: var(--padding-medium);
+  border-radius: var(--shape-radius-medium);
+}
+
+.sb-frame-container {
+  background: #f7e9fe;
+  padding: var(--padding-medium);
+  border-radius: var(--shape-radius-large);
+}

package/src/overlay/index.ts

@@ -3,3 +3,4 @@ export * from './context_menu/context_menu.js';
 export * from './menu/menu.js';
 export * from './tooltip/tooltip.js';
 export * from './popper/popper.js';
+export { Frame, type FrameOwnProps, type FrameProps } from './frame/frame.js';

package/src/stacks/box/box.tsx

@@ -45,8 +45,14 @@ export interface BoxProps extends HTMLAttributes<HTMLElement> {
   enableResizeOnRight?: boolean;
   horizontalHandleProps?: HandleProps;
   verticalHandleProps?: HandleProps;
-  onWidthResize?: (width: number) => void;
-  onHeightResize?: (width: number) => void;
+  onWidthResize?: (
+    width: number
+    // origin: 'left' | 'right'
+  ) => void;
+  onHeightResize?: (
+    height: number
+    // origin: 'top' | 'bottom'
+  ) => void;
   onWidthResizeEnd?: (width: number) => void;
   onHeightResizeEnd?: (width: number) => void;
 }

package/src/surfaces/index.ts

@@ -1,14 +1,14 @@
 export * from './alert/alert.js';
 export * from './card/card.js';
 export * from './confirm/confirm.js';
-export * from './modal/modal.js';
 export * from './page/h_page.js';
 export * from './page/v_page.js';
 export * from './panel/h_panel.js';
 export * from './panel/v_panel.js';
 export * from './popover/popover.js';
-export * from './window/window.js';
 export * from './drawers/drawer_bottom/drawer_bottom.js';
 export * from './drawers/drawer_top/drawer_top.js';
 export * from './drawers/drawer_start/drawer_start.js';
 export * from './drawers/drawer_end/drawer_end.js';
+export { Window, type WindowProps } from './window/window.js';
+export { Modal, type ModalProps } from './modal/modal.js';

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

@@ -1,11 +1,9 @@
 import { useState } from 'react';
 import { Button, SlimButton } from '../../../actions/index.js';
 import { Footer, Header, VBody } from '../../../layouts/index.js';
-import { Portal } from '../../../overlay/index.js';
 import { ZStack } from '../../../stacks/z_stack.js';
 import { BodyText, Title } from '../../../typography/index.js';
 import { Modal } from '../modal.js';
-import { ClickAwayListener } from '../../../utils/index.js';
 import { Spacer } from '../../../stacks/index.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 
@@ -21,34 +19,28 @@ export const ModalStory = () => {
   function toggle() {
     setIsOpen(!isOpen);
   }
+
   return (
     <ZStack height="100%" width="100%" minHeight="600px">
       <button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</button>
-      {isOpen && (
-        <Portal>
-          <ZStack width="100%" height="100%" className="tcn-veil">
-            <ClickAwayListener onClickAway={toggle}>
-              <Modal width="400px" height="500px">
-                <Header>
-                  <Title>Modal Title</Title>
-                  <Spacer />
-                  <SlimButton hierarchy="tertiary" size="md" onClick={toggle}>
-                    <CrossIcon />
-                  </SlimButton>
-                </Header>
-                <VBody>
-                  <BodyText>This is a modal</BodyText>
-                </VBody>
-                <Footer>
-                  <Spacer />
-                  <Button hierarchy="secondary">Cancel</Button>
-                  <Button hierarchy="primary">Save</Button>
-                </Footer>
-              </Modal>
-            </ClickAwayListener>
-          </ZStack>
-        </Portal>
-      )}
+
+      <Modal isOpen={isOpen} width="400px" height="500px">
+        <Header>
+          <Title>Modal Title</Title>
+          <Spacer />
+          <SlimButton hierarchy="tertiary" size="md" onClick={toggle}>
+            <CrossIcon />
+          </SlimButton>
+        </Header>
+        <VBody>
+          <BodyText>This is a modal</BodyText>
+        </VBody>
+        <Footer>
+          <Spacer />
+          <Button hierarchy="secondary">Cancel</Button>
+          <Button hierarchy="primary">Save</Button>
+        </Footer>
+      </Modal>
     </ZStack>
   );
 };

package/src/surfaces/modal/modal.tsx

@@ -2,21 +2,24 @@ import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import { clsx } from 'clsx';
 import React from 'react';
 import styles from './modal.module.css';
+import { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';
 
-export type ModalProps = Omit<VStackProps<HTMLDialogElement>, 'as'>;
+export type ModalProps = FrameOwnProps & Omit<VStackProps<HTMLDialogElement>, 'as'>;
 
 export const Modal = React.forwardRef<HTMLDialogElement, ModalProps>(function Modal(
-  { children, className, ...props }: ModalProps,
+  { children, className, isOpen, draggable = false, veil = true, ...props }: ModalProps,
   ref
 ) {
   return (
-    <VStack
-      ref={ref}
-      className={clsx(styles['modal'], 'tcn-modal', className)}
-      as="dialog"
-      {...props}
-    >
-      {children}
-    </VStack>
+    <Frame isOpen={isOpen} draggable={draggable} veil={veil}>
+      <VStack
+        ref={ref}
+        className={clsx(styles['modal'], 'tcn-modal', className)}
+        as="dialog"
+        {...props}
+      >
+        {children}
+      </VStack>
+    </Frame>
   );
 });

package/src/surfaces/window/window.stories.tsx

@@ -1,4 +1,12 @@
+import { useState } from 'react';
 import { Window } from './window.js';
+import { Footer, Header, VBody } from '../../layouts/index.js';
+import { BodyText, Title } from '../../typography/index.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { Button, SlimButton } from '../../actions/index.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { DragHandle } from '../../utils/dnd/handle.js';
 
 export default {
   title: 'Surfaces/Window',
@@ -6,10 +14,35 @@ export default {
   tags: ['autodocs'],
 };
 
-export const ModalStory = () => {
+export const WindowStory = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function toggle() {
+    setIsOpen(!isOpen);
+  }
+
   return (
-    <Window>
-      <>window</>
-    </Window>
+    <ZStack height="100%" width="100%" minHeight="600px">
+      <button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</button>
+      <Window isOpen={isOpen} width="400px" height="500px">
+        <DragHandle>
+          <Header>
+            <Title>Window Title</Title>
+            <Spacer />
+            <SlimButton hierarchy="tertiary" size="md" onClick={toggle}>
+              <CrossIcon />
+            </SlimButton>
+          </Header>
+        </DragHandle>
+        <VBody>
+          <BodyText>This is a window</BodyText>
+        </VBody>
+        <Footer>
+          <Spacer />
+          <Button hierarchy="secondary">Cancel</Button>
+          <Button hierarchy="primary">Save</Button>
+        </Footer>
+      </Window>
+    </ZStack>
   );
 };

package/src/surfaces/window/window.tsx

@@ -2,16 +2,24 @@ import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import { clsx } from 'clsx';
 import React from 'react';
 import styles from './window.module.css';
+import { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';
 
-export type WindowProps = Omit<VStackProps, 'as'>;
+export type WindowProps = FrameOwnProps & Omit<VStackProps<HTMLDialogElement>, 'as'>;
 
-export const Window = React.forwardRef<HTMLDivElement, WindowProps>(function Window(
-  { children, className, ...props }: WindowProps,
+export const Window = React.forwardRef<HTMLDialogElement, WindowProps>(function Window(
+  { children, className, isOpen, draggable = true, veil = false, ...props }: WindowProps,
   ref
 ) {
   return (
-    <VStack ref={ref} className={clsx(styles.window, className, 'window')} {...props}>
-      {children}
-    </VStack>
+    <Frame isOpen={isOpen} draggable={draggable} veil={veil}>
+      <VStack
+        ref={ref}
+        className={clsx(styles['window'], 'tcn-window', className)}
+        as="dialog"
+        {...props}
+      >
+        {children}
+      </VStack>
+    </Frame>
   );
 });

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

@@ -445,6 +445,16 @@ legend {
 }
 
 /* ===== 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 {
@@ -518,6 +528,65 @@ legend {
   }
 }
 
+/* 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;
+      :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;
+    }
+  }
+
+  :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);
+  }
+}
+
 /* PANEL */
 .tcn-panel {
   --v-inset: var(--padding-large);

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,6 +78,7 @@ export function Title({
 
   return (
     <As
+      ref={ref}
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
@@ -85,4 +89,4 @@ export function Title({
       {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',