@tcn/ui 0.0.3 → 0.0.4

package/src/surfaces/drawers/drawer_start/drawer_start.tsx

@@ -1,5 +1,5 @@
 import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './drawer_start.module.css';
 
@@ -13,7 +13,7 @@ export const DrawerStart = React.forwardRef<HTMLElement, DrawerStartProps>(
       <VStack
         ref={ref}
         as="section"
-        className={classNames(styles.drawerStart, className, 'drawerStart')}
+        className={clsx(styles.drawerStart, className, 'drawerStart')}
         {...props}
       >
         {children}

package/src/surfaces/drawers/drawer_top/drawer_top.tsx

@@ -1,5 +1,5 @@
 import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './drawer_top.module.css';
 
@@ -15,7 +15,7 @@ export const DrawerTop = React.forwardRef<HTMLElement, DrawerTopProps>(function
     <VStack
       ref={ref}
       as="section"
-      className={classNames(styles.drawerTop, className, 'drawerTop')}
+      className={clsx(styles.drawerTop, className, 'drawerTop')}
       {...props}
     >
       {children}

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

@@ -0,0 +1,54 @@
+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';
+
+export default {
+  title: 'Surfaces/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+};
+
+export const ModalStory = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  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" 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>
+      )}
+    </ZStack>
+  );
+};

package/src/surfaces/modal/modal.module.css

@@ -1,3 +1,4 @@
 .modal {
-  background-color: var(--background-color-primary);
+  width: 100%;
+  height: 100%;
 }

package/src/surfaces/modal/modal.tsx

@@ -1,18 +1,21 @@
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './modal.module.css';
 
-export interface ModalProps extends Omit<VStackProps, 'as' | 'children'> {
-  children?: React.ReactNode;
-}
+export type ModalProps = Omit<VStackProps<HTMLDialogElement>, 'as'>;
 
-export const Modal = React.forwardRef<HTMLElement, ModalProps>(function VPanel(
+export const Modal = React.forwardRef<HTMLDialogElement, ModalProps>(function Modal(
   { children, className, ...props }: ModalProps,
   ref
 ) {
   return (
-    <VStack ref={ref} className={classNames(className, styles.Modal, 'modal')} {...props}>
+    <VStack
+      ref={ref}
+      className={clsx(styles['modal'], 'tcn-modal', className)}
+      as="dialog"
+      {...props}
+    >
       {children}
     </VStack>
   );

package/src/surfaces/page/h_page.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './page.module.css';
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
@@ -13,7 +13,7 @@ export const HPage = React.forwardRef<HTMLElement, HPageProps>(function HPage(
     <HStack
       ref={ref}
       as="main"
-      className={classNames(styles.page, className, 'page')}
+      className={clsx(styles.page, className, 'page')}
       vAlign="start"
       {...props}
     >

package/src/surfaces/page/v_page.tsx

@@ -1,5 +1,5 @@
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './page.module.css';
 
@@ -13,7 +13,7 @@ export const VPage = React.forwardRef<HTMLElement, VPageProps>(function VPage(
     <VStack
       ref={ref}
       as="main"
-      className={classNames(styles.page, className, 'page')}
+      className={clsx(styles.page, className, 'page')}
       {...props}
     >
       {children}

package/src/surfaces/panel/h_panel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Box, type BoxProps } from '../../stacks/box/box.js';
 import { HStack } from '../../stacks/h_stack.js';
 import type { Alignment } from '../../stacks/types/alignment.js';
@@ -38,13 +38,7 @@ export const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel
       maxHeight={maxHeight}
       data-h-alignment={hAlign}
       data-v-alignment={vAlign}
-      className={classNames(
-        styles['panel'],
-        className,
-        'panel',
-        'tcn-panel',
-        'tcn-h-panel'
-      )}
+      className={clsx(styles['panel'], className, 'panel', 'tcn-panel', 'tcn-h-panel')}
       {...props}
     >
       <HStack
@@ -56,7 +50,7 @@ export const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel
         hAlign={hAlign}
         vAlign={vAlign}
         ref={ref}
-        className={classNames(
+        className={clsx(
           styles['panel-stack'],
           className,
           'panel-stack',

package/src/surfaces/panel/v_panel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+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';
@@ -38,7 +38,7 @@ export const VPanel = React.forwardRef<HTMLElement, VPanelProps>(function VPanel
       maxHeight={maxHeight}
       data-h-alignment={hAlign}
       data-v-alignment={vAlign}
-      className={classNames(className, 'panel', 'tcn-panel', 'tcn-v-panel')}
+      className={clsx(className, 'panel', 'tcn-panel', 'tcn-v-panel')}
       {...props}
     >
       <VStack
@@ -50,7 +50,7 @@ export const VPanel = React.forwardRef<HTMLElement, VPanelProps>(function VPanel
         hAlign={hAlign}
         vAlign={vAlign}
         ref={ref}
-        className={classNames(
+        className={clsx(
           styles['panel-stack'],
           className,
           'panel-stack',

package/src/surfaces/popover/popover.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { VStack } from '../../stacks/v_stack.js';
 import { Popper, type PopperProps } from '../../overlay/popper/popper.js';
 import { VStackProps } from '../../stacks/v_stack.js';
@@ -45,7 +45,7 @@ export function Popover({
       open={open}
       onClose={onClose}
     >
-      <VStack inline width="auto" className={classnames(className, 'popover')} {...props}>
+      <VStack inline width="auto" className={clsx(className, 'popover')} {...props}>
         {children}
       </VStack>
     </Popper>

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

@@ -1,7 +1,7 @@
 import { Window } from './window.js';
 
 export default {
-  title: 'Frame / Window',
+  title: 'Surfaces/Window',
   component: Window,
   tags: ['autodocs'],
 };

package/src/surfaces/window/window.tsx

@@ -1,5 +1,5 @@
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './window.module.css';
 
@@ -10,11 +10,7 @@ export const Window = React.forwardRef<HTMLDivElement, WindowProps>(function Win
   ref
 ) {
   return (
-    <VStack
-      ref={ref}
-      className={classNames(styles.window, className, 'window')}
-      {...props}
-    >
+    <VStack ref={ref} className={clsx(styles.window, className, 'window')} {...props}>
       {children}
     </VStack>
   );

package/src/themes/index.ts

@@ -1,5 +1,3 @@
 export * from './theme_variables.js';
 export * from './theme.js';
-export * from './themes/windows_98/windows_98_theme.js';
-export * from './themes/ergo/ergo_theme.js';
 export * from './stylesheets/reset.js';

package/src/themes/stories/themes.stories.tsx

@@ -10,7 +10,7 @@ export default {
   title: 'Themes',
 };
 
-export function ThemesStories() {
+export function Themes() {
   const [theme, setTheme] = useState<'windows98' | 'ergo'>('windows98');
 
   const styleSheet = theme === 'windows98' ? windows98StyleSheet : ergoStyleSheet;

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

@@ -198,6 +198,76 @@ legend {
 
 /* ===== SURFACES ===== */
 
+.tcn-veil {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* MODAL: */
+.tcn-modal {
+  --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-header) {
+    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-button) {
+      padding: 0;
+      min-width: 18px;
+      min-height: 18px;
+      color: white;
+    }
+
+    :where(.tcn-button)[data-hierarchy="tertiary"] {
+      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;
+    }
+  }
+
+  :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/tokens/badge/badge.stories.tsx

@@ -1,25 +1,25 @@
 import { ZStack } from '../../stacks/z_stack.js';
 import React from 'react';
-import { Badge } from './badge.js';
+import { Badge as BadgeComponent } from './badge.js';
 import { Button } from '../../actions/index.js';
 
 export default {
-  title: 'src/Badge',
-  component: Badge,
+  title: 'Tokens/Badge',
+  component: BadgeComponent,
   tags: ['autodocs'],
 };
 
-export function Default(props: any) {
+export function Badge(props: any) {
   return (
     <ZStack>
-      <Badge
+      <BadgeComponent
         value={10}
         // backgroundColor="var(--accent-color)"
         // textColor="white"
         {...props}
       >
         <Button>Hello</Button>
-      </Badge>
+      </BadgeComponent>
     </ZStack>
   );
 }

package/src/tokens/badge/badge.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { ZStack } from '../../stacks/z_stack.js';
@@ -33,7 +33,7 @@ export const Badge = React.forwardRef(
         vAlign="end"
         hAlign="end"
         zIndex={0}
-        className={classNames('badge', className)}
+        className={clsx('badge', className)}
         {...props}
       >
         <ZStack zIndex={0} inline width="auto" height="auto">
@@ -41,7 +41,7 @@ export const Badge = React.forwardRef(
         </ZStack>
         <VStack zIndex={1} height="100%" width="auto">
           <Bubble
-            className={classNames(styles['badge-bubble'], 'badge-bubble')}
+            className={clsx(styles['badge-bubble'], 'badge-bubble')}
             backgroundColor={backgroundColor}
             textColor={color}
             elevate

package/src/tokens/bubble/bubble.stories.tsx

@@ -1,10 +1,23 @@
 import React from 'react';
-import { Bubble } from './bubble.js';
+import { Bubble as BubbleComponent } from './bubble.js';
 
-export const Base = (args: any) => {
-  return <Bubble {...args}>0</Bubble>;
+export default {
+  title: 'Tokens/Bubble',
+  component: BubbleComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A bubble component that can be used to display a badge.',
+      },
+    },
+  },
 };
 
+export function Bubble(args: any) {
+  return <BubbleComponent {...args}>0</BubbleComponent>;
+}
+
 export const Styled = () => {
   return (
     <div>This story needs to be updated.</div>
@@ -160,9 +173,3 @@ const _randomWords = [
   'Enduring',
   'Lasting',
 ];
-
-export default {
-  title: 'src/Bubble',
-  component: Bubble,
-  tags: ['autodocs'],
-};

package/src/tokens/bubble/bubble.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes } from 'react';
 import styles from './bubble.module.css';
 import { theme } from '../../themes/index.js';
@@ -35,7 +35,7 @@ export const Bubble = React.forwardRef(function Bubble(
   return (
     <HStack
       inline
-      className={classNames(styles.bubble, 'bubble', className)}
+      className={clsx(styles.bubble, 'bubble', className)}
       width="auto"
       height="auto"
       ref={ref}

package/src/tokens/chip/chip.stories.tsx

@@ -7,7 +7,7 @@ import { BodyText } from '../../typography/index.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 
 export default {
-  title: 'src/Chip',
+  title: 'Tokens/Chip',
   component: Chip,
   tags: ['autodocs'],
 };

package/src/tokens/chip/chip.tsx

@@ -1,5 +1,5 @@
 import { HStack, HStackProps } from '../../stacks/h_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './chip.module.css';
 import { theme } from '../../themes/index.js';
@@ -26,7 +26,7 @@ export const Chip = React.forwardRef(function Chip(
       width="auto"
       height="auto"
       vAlign="center"
-      className={classNames(styles.chip, 'chip', className)}
+      className={clsx(styles.chip, 'chip', className)}
       style={finalStyle}
       {...props}
     >

package/src/typography/body_text/body_text.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import styles from './body_text.module.css';
 
 export interface BodyTextOwnProps {
@@ -65,7 +65,7 @@ export function BodyText({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['body-text'], 'body-text', className)}
+      className={clsx(styles['body-text'], 'body-text', className)}
       style={style}
       data-size={size}
       data-word-break={breakWords}

package/src/typography/callout/callout.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import styles from './callout.module.css';
@@ -64,7 +64,7 @@ export function Callout({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['callout'], 'callout', className)}
+      className={clsx(styles['callout'], 'callout', className)}
       style={style}
       data-size={size}
     >

package/src/typography/caption/caption.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import styles from './caption.module.css';
@@ -64,7 +64,7 @@ export function Caption({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['caption'], 'caption', className)}
+      className={clsx(styles['caption'], 'caption', className)}
       style={style}
       data-size={size}
     >

package/src/typography/footnote/footnote.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import styles from './footnote.module.css';
@@ -64,7 +64,7 @@ export function Footnote({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['footnote'], 'footnote', className)}
+      className={clsx(styles['footnote'], 'footnote', className)}
       style={style}
       data-size={size}
     >

package/src/typography/headline/headline.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import styles from './headline.module.css';
@@ -74,7 +74,7 @@ export function Headline({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['headline'], 'headline', className)}
+      className={clsx(styles['headline'], 'headline', className)}
       style={style}
       data-size={size}
     >

package/src/typography/subheadline/subheadline.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import styles from './subheadline.module.css';
@@ -77,7 +77,7 @@ export function Subheadline({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['subheadline'], 'subheadline', className)}
+      className={clsx(styles['subheadline'], 'subheadline', className)}
       style={style}
       data-size={size}
     >

package/src/typography/title/title.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import type { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import styles from './title.module.css';
@@ -78,7 +78,7 @@ export function Title({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['title'], 'title', 'tcn-title', className)}
+      className={clsx(styles['title'], 'title', 'tcn-title', className)}
       style={style}
       data-size={size}
     >

package/src/typography/typography-showcase.stories.tsx

@@ -11,13 +11,13 @@ import { Subheadline } from './subheadline/subheadline.js';
 import { Title } from './title/title.js';
 
 export default {
-  title: 'Showcase',
+  title: 'Typography/Showcase',
   parameters: {
     layout: 'fullscreen',
   },
 };
 
-export function Typography() {
+export function Showcase() {
   return (
     <VStack gap="30px" maxWidth="800px">
       <HStack height="auto">