@tcn/ui 0.1.1 → 0.3.0

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

@@ -1,13 +1,12 @@
 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 { Footer, Header, UtilityBar, VBody } from '../../../layouts/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';
+import { BugIcon } from '@tcn/icons/bug_icon.js';
 
 export default {
   title: 'Surfaces/Modal',
@@ -21,34 +20,38 @@ 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>
+        <UtilityBar>
+          <Title>Utility Bar</Title>
+          <Spacer />
+          <SlimButton hierarchy="tertiary">
+            <BugIcon />
+          </SlimButton>
+          <SlimButton hierarchy="tertiary">
+            <BugIcon />
+          </SlimButton>
+        </UtilityBar>
+        <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.module.css

@@ -1,4 +1,4 @@
 .modal {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }

package/src/surfaces/modal/modal.tsx

@@ -1,22 +1,27 @@
-import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 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';
+
+// Styles
 import styles from './modal.module.css';
 
-export type ModalProps = Omit<VStackProps<HTMLDialogElement>, 'as'>;
+export type ModalProps = FrameOwnProps & ScaffoldProps;
 
-export const Modal = React.forwardRef<HTMLDialogElement, ModalProps>(function Modal(
-  { children, className, ...props }: ModalProps,
+export const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(
+  { children, className, isOpen, draggable = false, veil = true, ...props }: ModalProps,
   ref
 ) {
   return (
-    <VStack
-      ref={ref}
-      className={clsx(styles['modal'], 'tcn-modal', className)}
-      as="dialog"
-      {...props}
+    <Frame
+      isOpen={isOpen}
+      draggable={draggable}
+      veil={veil}
+      className={clsx(styles['modal'], 'tcn-surface', 'tcn-modal', className)}
     >
-      {children}
-    </VStack>
+      <Scaffold ref={ref} {...props}>
+        {children}
+      </Scaffold>
+    </Frame>
   );
 });

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

@@ -24,7 +24,7 @@ export const Default = () => {
     <div className={styles['stories-container']}>
       <VPanel maxHeight="600px">
         <Header>
-          <Title>Panel Primary Header</Title>
+          <Title emphasis="strong">Panel Primary Header</Title>
           <Spacer />
           <SlimButton hierarchy="tertiary">
             <GridOneIcon />

package/src/surfaces/panel/v_panel.tsx

@@ -1,65 +1,20 @@
 import React from 'react';
-import { clsx } from 'clsx';
-import { Box, type BoxProps } from '../../stacks/box/box.js';
-import type { Alignment } from '../../stacks/types/alignment.js';
-import { VStack } from '../../stacks/v_stack.js';
-// Styles
-import styles from './panel.module.css';
+import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import clsx from 'clsx';
 
-export interface VPanelProps extends Omit<BoxProps, 'as'> {
-  vAlign?: Alignment;
-  hAlign?: Alignment;
-}
+export type VPanelProps = ScaffoldProps;
 
 export const VPanel = React.forwardRef<HTMLElement, VPanelProps>(function VPanel(
-  {
-    children,
-    width,
-    height = '100%',
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    hAlign,
-    vAlign = 'start',
-    className,
-    ...props
-  }: VPanelProps,
+  { children, className, ...props }: VPanelProps,
   ref
 ) {
   return (
-    <Box
+    <Scaffold
       ref={ref}
-      width={width}
-      height={height}
-      minWidth={minWidth}
-      maxWidth={maxWidth}
-      minHeight={minHeight}
-      maxHeight={maxHeight}
-      data-h-alignment={hAlign}
-      data-v-alignment={vAlign}
-      className={clsx(className, 'panel', 'tcn-panel', 'tcn-v-panel')}
+      className={clsx('tcn-surface', 'tcn-panel', 'tcn-v-panel', className)}
       {...props}
     >
-      <VStack
-        as="section"
-        minWidth={minWidth}
-        maxWidth={maxWidth}
-        minHeight={minHeight}
-        maxHeight={maxHeight}
-        hAlign={hAlign}
-        vAlign={vAlign}
-        ref={ref}
-        className={clsx(
-          styles['panel-stack'],
-          className,
-          'panel-stack',
-          'tcn-panel-stack'
-        )}
-        zIndex={0}
-      >
-        {children}
-      </VStack>
-    </Box>
+      {children}
+    </Scaffold>
   );
 });

package/src/surfaces/pop_confirm/pop_confirm.stories.tsx

@@ -0,0 +1,70 @@
+import { useRef, useState } from 'react';
+import { Button } from '../../actions/index.js';
+import { Footer, Header, VBody } from '../../layouts/index.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { PopConfirm as PopConfirmComponent } from './pop_confirm.js';
+import { BodyText, Title } from '../../typography/index.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+
+export default {
+  title: 'Surfaces/Pop Confirm',
+  component: PopConfirmComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A tooltip component that displays a tooltip when hovered.',
+      },
+    },
+  },
+};
+
+export const DefaultPopConfirm = () => {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const cancel = () => {
+    setOpen(false);
+  };
+
+  const confirm = () => {
+    setOpen(false);
+  };
+
+  const prompt = () => {
+    setOpen(true);
+  };
+
+  return (
+    <VStack hAlign="center" vAlign="center" height="100%" width="100%">
+      <HStack hAlign="center" vAlign="center">
+        <Button ref={anchorRef} onClick={prompt}>
+          Click to Confirm
+        </Button>
+        <PopConfirmComponent
+          height={'200px'}
+          open={open}
+          onDismissal={cancel}
+          anchorElement={anchorRef}
+        >
+          <Header>
+            <Title>Confirmation Title</Title>
+          </Header>
+          <VBody>
+            <BodyText>Are you sure you want to confirm this action?</BodyText>
+          </VBody>
+          <Footer>
+            <Spacer />
+            <Button hierarchy="secondary" onClick={cancel}>
+              Cancel
+            </Button>
+            <Button hierarchy="primary" onClick={confirm}>
+              Confirm
+            </Button>
+          </Footer>
+        </PopConfirmComponent>
+      </HStack>
+    </VStack>
+  );
+};

package/src/surfaces/pop_confirm/pop_confirm.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { clsx } from 'clsx';
+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;
+
+export const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(
+  function PopConfirm(
+    { children, className, dismissals = [PopperDismissal.CLICK_AWAY], ...props },
+    ref
+  ) {
+    return (
+      <ElementPopper
+        ref={ref}
+        className={clsx(className, 'tcn-pop-confirm')}
+        dismissals={dismissals}
+        {...props}
+      >
+        <Scaffold width={'100%'} height={'100%'}>
+          {children}
+        </Scaffold>
+      </ElementPopper>
+    );
+  }
+);

package/src/surfaces/popconfirm/pop_confirm.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import {
+  ElementPopper,
+  type ElementPopperProps,
+} from '../../overlay/popper/element_popper.js';
+
+export type PopConfirmProps = ElementPopperProps;
+
+export const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(
+  function PopConfirm({ children, className, ...props }, ref) {
+    return (
+      <ElementPopper ref={ref} className={clsx(className, 'tcn-popconfirm')} {...props}>
+        {children}
+      </ElementPopper>
+    );
+  }
+);

package/src/surfaces/popover/popover.tsx

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import { VStack } from '../../stacks/v_stack.js';
-import { Popper, type PopperProps } from '../../overlay/popper/popper.js';
+import { Popper, type PopperProps } from '../../overlay/popper/legacy/popper.js';
 import { VStackProps } from '../../stacks/v_stack.js';
 
 export interface PopoverProps extends Omit<PopperProps, 'children'>, VStackProps {}

package/src/surfaces/tooltip/tooltip.stories.tsx

@@ -0,0 +1,54 @@
+import { StyleBox } from '../../stacks/story_components/style_box.js';
+import { BodyText } from '../../typography/index.js';
+import { Tooltip as TooltipComponent } from './tooltip.js';
+
+export default {
+  title: 'Surfaces/Tooltip',
+  component: TooltipComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A tooltip component that displays a tooltip when hovered.',
+      },
+    },
+  },
+};
+
+export const DefaultTooltip = () => {
+  return (
+    <TooltipComponent label={'Tooltip content'}>
+      <StyleBox
+        backgroundColor="red"
+        padding="8px"
+        borderRadius={'8px'}
+        width="200px"
+        height="100px"
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+      >
+        Hover to open
+      </StyleBox>
+    </TooltipComponent>
+  );
+};
+
+export const CustomTooltip = () => {
+  return (
+    <TooltipComponent label={<BodyText>Tooltip content</BodyText>}>
+      <StyleBox
+        backgroundColor="red"
+        padding="8px"
+        borderRadius={'8px'}
+        width="200px"
+        height="100px"
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+      >
+        Hover to open
+      </StyleBox>
+    </TooltipComponent>
+  );
+};

package/src/surfaces/tooltip/tooltip.tsx

@@ -0,0 +1,59 @@
+import { clsx } from 'clsx';
+import React, { isValidElement, cloneElement, useRef } from 'react';
+import styles from './tooltip.module.css';
+import {
+  PreviewPopper,
+  type PreviewPopperProps,
+} from '../../overlay/popper/preview_popper.js';
+import { HStack } from '../../stacks/h_stack.js';
+
+export interface TooltipProps extends Omit<PreviewPopperProps, 'anchorElement'> {
+  /** The element that triggers the tooltip on hover */
+  children: React.ReactNode;
+  /** Content to display in the tooltip */
+  label: React.ReactNode;
+}
+
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(
+  {
+    children,
+    className,
+    verticalAnchor = 'top',
+    verticalOrigin = 'bottom',
+    horizontalAnchor = 'center',
+    horizontalOrigin = 'center',
+    label,
+    ...props
+  },
+  ref
+) {
+  const anchorRef = useRef<HTMLElement>(null);
+
+  // If children is a valid element, clone it and attach the ref
+  // Otherwise, wrap it in a span
+  const anchor = isValidElement(children) ? (
+    cloneElement(children, { ref: anchorRef } as React.Attributes)
+  ) : (
+    <HStack as="span" ref={anchorRef}>
+      {children}
+    </HStack>
+  );
+
+  return (
+    <>
+      {anchor}
+      <PreviewPopper
+        ref={ref}
+        anchorElement={anchorRef}
+        verticalAnchor={verticalAnchor}
+        verticalOrigin={verticalOrigin}
+        horizontalAnchor={horizontalAnchor}
+        horizontalOrigin={horizontalOrigin}
+        className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}
+        {...props}
+      >
+        {label}
+      </PreviewPopper>
+    </>
+  );
+});

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

@@ -1,4 +1,13 @@
+import { useState } from 'react';
 import { Window } from './window.js';
+import { Footer, Header, UtilityBar, 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';
+import { BugIcon } from '@tcn/icons/bug_icon.js';
 
 export default {
   title: 'Surfaces/Window',
@@ -6,10 +15,48 @@ 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>
+        <UtilityBar>
+          <Title>Utility Bar</Title>
+          <Spacer />
+          <SlimButton hierarchy="tertiary">
+            <BugIcon />
+          </SlimButton>
+          <SlimButton hierarchy="tertiary">
+            <BugIcon />
+          </SlimButton>
+          <SlimButton size="md" hierarchy="tertiary">
+            <BugIcon />
+          </SlimButton>
+        </UtilityBar>
+        <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

@@ -1,17 +1,29 @@
-import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 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';
+
+// Styles
 import styles from './window.module.css';
 
-export type WindowProps = Omit<VStackProps, 'as'>;
+export type WindowProps = FrameOwnProps & ScaffoldProps;
 
-export const Window = React.forwardRef<HTMLDivElement, WindowProps>(function Window(
-  { children, className, ...props }: WindowProps,
+export const Window = React.forwardRef<HTMLElement, 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}
+      className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}
+      width="auto"
+      height="auto"
+    >
+      <Scaffold ref={ref} {...props}>
+        {children}
+      </Scaffold>
+    </Frame>
   );
 });

package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_picker.tsx

@@ -48,22 +48,20 @@ export const SB_TonePicker = () => {
       growWeight={1}
       paddingTop={theme.padding.md}
       paddingBottom={theme.padding.md}
+      vAlign="start"
+      hAlign="start"
     >
       <VStack
         height="100%"
         width="auto"
         gap={theme.gap.md}
         hAlign="start"
-        minWidth="300px"
+        vAlign="start"
+        maxWidth="300px"
+        minWidth="200px"
       >
         <SectionHeader>Tone Picker (WIP)</SectionHeader>
-        <List
-          padding={theme.padding.md}
-          maxWidth="200px"
-          growWeight={1}
-          height="100%"
-          overflowY="auto"
-        >
+        <List padding={theme.padding.md} growWeight={1} height="100%" overflowY="auto">
           {items.map(item => (
             <Item
               key={item.id}
@@ -75,7 +73,7 @@ export const SB_TonePicker = () => {
           ))}
         </List>
       </VStack>
-      <VStack height="100%">
+      <VStack height="100%" minWidth="200px" growWeight={1}>
         <SB_ToneCard item={selectedItem || null} />
       </VStack>
     </HStack>

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

@@ -87,10 +87,6 @@ export const DynamicSurface = (args: {
       </Header>
       <SB_MaterialPicker handleSurfaceClick={handleSurfaceClick} />
       <VPanel
-        // TODO: Find a better way to have typography inherit the on material color
-        style={{
-          color: 'inherit',
-        }}
         minHeight="200px"
         maxHeight="700px"
         height="100%"
@@ -105,7 +101,7 @@ export const DynamicSurface = (args: {
           <SlimButton hierarchy="secondary">
             <PlusIcon />
           </SlimButton>
-          <Divider vertical />
+          <Divider vertical length="md" />
           <SlimButton hierarchy="primary">
             <PlusIcon />
           </SlimButton>
@@ -119,7 +115,7 @@ export const DynamicSurface = (args: {
           <SlimButton hierarchy="secondary" disabled>
             <PlusIcon />
           </SlimButton>
-          <Divider vertical />
+          <Divider vertical length="md" />
           <SlimButton hierarchy="primary" disabled>
             <PlusIcon />
           </SlimButton>