@tcn/ui 0.0.3 → 0.1.1

package/src/surfaces/drawers/drawer_end/drawer_end.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_end.module.css';
 
@@ -15,7 +15,7 @@ export const DrawerEnd = React.forwardRef<HTMLElement, DrawerEndProps>(function
     <VStack
       ref={ref}
       as="section"
-      className={classNames(styles.drawerEnd, className, 'drawerEnd')}
+      className={clsx(styles.drawerEnd, className, 'drawerEnd')}
       {...props}
     >
       {children}

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" 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>
+      )}
+    </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/__stories__/panel.stories.tsx

@@ -11,6 +11,7 @@ import { Title } from '../../../typography/title/title.js';
 import { VPanel } from '../v_panel.js';
 // Styles
 import styles from './panel_stories.module.css';
+import { SlimButton } from '../../../actions/index.js';
 
 export default {
   title: 'Surfaces/Panel',
@@ -25,29 +26,29 @@ export const Default = () => {
         <Header>
           <Title>Panel Primary Header</Title>
           <Spacer />
-          <Button hierarchy="tertiary">
+          <SlimButton hierarchy="tertiary">
             <GridOneIcon />
-          </Button>
+          </SlimButton>
           <Divider length="md" vertical />
-          <Button hierarchy="tertiary">
+          <SlimButton hierarchy="tertiary">
             <CrossIcon />
-          </Button>
+          </SlimButton>
         </Header>
         <UtilityBar>
           <Title>Utility Bar</Title>
           <Spacer />
-          <Button hierarchy="tertiary">
+          <SlimButton hierarchy="tertiary">
             <BugIcon />
-          </Button>
-          <Button hierarchy="tertiary">
+          </SlimButton>
+          <SlimButton hierarchy="tertiary">
             <BugIcon />
-          </Button>
-          <Button hierarchy="tertiary">
+          </SlimButton>
+          <SlimButton size="md" hierarchy="tertiary">
             <BugIcon />
-          </Button>
-          <Button hierarchy="tertiary">
+          </SlimButton>
+          <SlimButton hierarchy="tertiary">
             <BugIcon />
-          </Button>
+          </SlimButton>
         </UtilityBar>
 
         <VBody>

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/__stories__/components/material_picker/sb_inverted_materials.module.css

@@ -0,0 +1,34 @@
+.light-primary-inverted {
+  --action: var(--primary);
+  --on-action: var(--white);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.light-secondary-inverted {
+  --action: var(--tan);
+  --on-action: var(--navy);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.dark-primary-inverted {
+  --action: var(--slate);
+  --on-action: var(--white);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.dark-secondary-inverted {
+  --action: var(--navy);
+  --on-action: var(--white);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.surface-custom-inverted {
+  --action: var(--custom-material);
+  --on-action: var(--custom-on-material);
+  --material: var(--navy);
+  --on-material: var(--white);
+}

package/src/themes/themes/ergo/__stories__/components/material_picker/sb_material_picker.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { Header } from '../../../../../../layouts/index.js';
+import { Button } from '../../../../../../actions/button/button/button.js';
+import { theme } from '../../../../../theme_variables.js';
+
+// Styles
+import styles from './sb_inverted_materials.module.css';
+
+export const SB_MaterialPicker: React.FC<{
+  handleSurfaceClick: (surface: string) => () => void;
+}> = ({ handleSurfaceClick }) => {
+  return (
+    <Header gap={theme.gap.md} height="48px">
+      <Button
+        hierarchy="primary"
+        className={clsx(styles['light-primary-inverted'])}
+        onClick={handleSurfaceClick('light-primary')}
+      >
+        Light
+      </Button>
+      <Button
+        onClick={handleSurfaceClick('light-secondary')}
+        hierarchy="primary"
+        className={clsx(styles['light-secondary-inverted'])}
+      >
+        Light Variant
+      </Button>
+      <Button
+        onClick={handleSurfaceClick('dark-primary')}
+        hierarchy="primary"
+        className={clsx(styles['dark-primary-inverted'])}
+      >
+        Dark
+      </Button>
+      <Button
+        onClick={handleSurfaceClick('dark-secondary')}
+        hierarchy="primary"
+        className={clsx(styles['dark-secondary-inverted'])}
+      >
+        Dark Variant
+      </Button>
+      <Button
+        onClick={handleSurfaceClick('surface-custom')}
+        hierarchy="primary"
+        className={clsx(styles['surface-custom-inverted'])}
+      >
+        Custom
+      </Button>
+    </Header>
+  );
+};

package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_card.module.css

@@ -0,0 +1,5 @@
+.box {
+  height: 100px;
+  width: 100%;
+  background-color: rgba(120, 180, 255, 0.18);
+}

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

@@ -0,0 +1,40 @@
+import { Header, VBody } from '../../../../../../layouts/index.js';
+import { Card } from '../../../../../../surfaces/index.js';
+import { SlimButton } from '../../../../../../actions/button/slim_button/slim_button.js';
+import { Spacer } from '../../../../../../stacks/spacer.js';
+import { Box } from '../../../../../../stacks/index.js';
+import { InfoIcon } from '@tcn/icons/info_icon.js';
+import { AlertCircleIcon } from '@tcn/icons/alert_circle_icon.js';
+import { CheckCircleIcon } from '@tcn/icons/check_circle_icon.js';
+import { theme } from '../../../../../theme_variables.js';
+
+// Styles
+import styles from './sb_card.module.css';
+import type { SB_ToneListItem } from './types.js';
+
+export const SB_ToneCard: React.FC<{
+  item: SB_ToneListItem | null;
+}> = ({ item }) => {
+  return (
+    <Card data-tone={item?.tone || 'neutral'}>
+      <Header>
+        {item?.name ?? 'Neutral'}
+        <Spacer />
+        <SlimButton size="sm" hierarchy="tertiary">
+          <InfoIcon />
+        </SlimButton>
+        <SlimButton size="sm" hierarchy="secondary">
+          <AlertCircleIcon />
+        </SlimButton>
+        <SlimButton size="sm" hierarchy="primary">
+          <CheckCircleIcon />
+        </SlimButton>
+      </Header>
+      <VBody gap={theme.gap.md}>
+        <Box className={styles.box} />
+        <Box className={styles.box} />
+        <Box className={styles.box} />
+      </VBody>
+    </Card>
+  );
+};

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

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { BodyText } from '../../../../../../typography/body_text/body_text.js';
+import { Item, List, SectionHeader } from '../../../../../../layouts/index.js';
+import { HStack } from '../../../../../../stacks/h_stack.js';
+import type { SB_ToneListItem } from './types.js';
+import { SB_ToneCard } from './sb_tone_card.js';
+import { theme } from '../../../../../theme_variables.js';
+import { VStack } from '../../../../../../stacks/v_stack.js';
+
+const items: SB_ToneListItem[] = [
+  {
+    id: 'positive',
+    name: 'Positive',
+    tone: 'positive',
+  },
+  {
+    id: 'notice',
+    name: 'Notice',
+    tone: 'notice',
+  },
+  {
+    id: 'neutral',
+    name: 'Neutral',
+    tone: 'neutral',
+  },
+  {
+    id: 'warning',
+    name: 'Warning',
+    tone: 'warning',
+  },
+  {
+    id: 'danger',
+    name: 'Danger',
+    tone: 'danger',
+  },
+];
+
+export const SB_TonePicker = () => {
+  const [selectedItem, setSelectedItem] = useState<SB_ToneListItem | null>(null);
+
+  const handleItemClick = (item: SB_ToneListItem) => () => {
+    setSelectedItem(item);
+  };
+
+  return (
+    <HStack
+      gap={theme.gap.md}
+      growWeight={1}
+      paddingTop={theme.padding.md}
+      paddingBottom={theme.padding.md}
+    >
+      <VStack
+        height="100%"
+        width="auto"
+        gap={theme.gap.md}
+        hAlign="start"
+        minWidth="300px"
+      >
+        <SectionHeader>Tone Picker (WIP)</SectionHeader>
+        <List
+          padding={theme.padding.md}
+          maxWidth="200px"
+          growWeight={1}
+          height="100%"
+          overflowY="auto"
+        >
+          {items.map(item => (
+            <Item
+              key={item.id}
+              onClick={handleItemClick(item)}
+              selected={selectedItem?.id === item.id}
+            >
+              <BodyText>{item.name}</BodyText>
+            </Item>
+          ))}
+        </List>
+      </VStack>
+      <VStack height="100%">
+        <SB_ToneCard item={selectedItem || null} />
+      </VStack>
+    </HStack>
+  );
+};

package/src/themes/themes/ergo/__stories__/components/tone_picker/types.ts

@@ -0,0 +1,7 @@
+export type SB_WipTone = 'positive' | 'notice' | 'neutral' | 'warning' | 'danger';
+
+export interface SB_ToneListItem {
+  id: string;
+  name: string;
+  tone: SB_WipTone;
+}