@tcn/ui 0.3.2 → 0.3.3

package/src/navigation/tabs/__stories__/tabs.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { TabsList } from '../primitives/tabs_list.js';
+import { TabItem } from '../primitives/tabs_list.js';
+import { TabsBar } from '../primitives/tabs_bar.js';
+import { Spacer } from '../../../stacks/spacer.js';
+import { Bubble } from '../../../tokens/bubble/bubble.js';
+
+const meta: Meta = {
+  title: 'Navigation/Tabs/Component',
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const TabDemo = () => {
+  return (
+    <TabsBar>
+      <TabsList>
+        <TabItem width={100}>Tab One</TabItem>
+        <TabItem width={100} selected>
+          Tab Two
+        </TabItem>
+        <TabItem width={100}>Tab Three</TabItem>
+        <TabItem width={100}>
+          Custom Label
+          <Spacer width="4px" />
+          <Bubble size="sm" backgroundColor="#e0383e" textColor="#fff">
+            10
+          </Bubble>
+        </TabItem>
+      </TabsList>
+    </TabsBar>
+  );
+};
+
+export const Default: Story = {
+  render: () => <TabDemo />,
+};

package/src/navigation/tabs/primitives/tabs_bar.module.css

@@ -0,0 +1,13 @@
+@layer tcn-system {
+  .tabs-bar {
+    width: auto;
+  }
+
+  .tabs-bar[data-variant="inline"] {
+    width: auto;
+  }
+
+  .tabs-bar[data-variant="default"] {
+    width: 100%;
+  }
+}

package/src/navigation/tabs/primitives/tabs_bar.tsx

@@ -0,0 +1,25 @@
+import { type FC, type PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import { HStack, type HStackProps } from '../../../stacks/h_stack.js';
+import styles from './tabs_bar.module.css';
+
+export interface TabsBarProps extends HStackProps {
+  variant?: 'default' | 'inline';
+}
+
+export const TabsBar: FC<PropsWithChildren<TabsBarProps>> = ({
+  children,
+  className,
+  variant = 'default',
+  ...props
+}) => {
+  return (
+    <HStack
+      data-variant={variant}
+      className={clsx('tcn-tabs-bar', styles['tabs-bar'], className)}
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+};

package/src/navigation/tabs/primitives/tabs_list.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, type FC, type PropsWithChildren } from 'react';
+import { BaseButton, type BaseButtonProps } from '../../../actions/index.js';
+import { HStack, type HStackProps } from '../../../stacks/h_stack.js';
+import clsx from 'clsx';
+
+export type TabsListProps = HStackProps;
+
+export const TabsList: FC<PropsWithChildren<TabsListProps>> = ({
+  children,
+  className,
+  role = 'tablist',
+  as = 'menu',
+  ...props
+}) => {
+  return (
+    <HStack as={as} role={role} className={clsx('tcn-tabs-list', className)} {...props}>
+      {children}
+    </HStack>
+  );
+};
+
+export interface TabItemProps extends Omit<BaseButtonProps, 'hierarchy'> {
+  selected?: boolean;
+}
+
+export const TabItem = forwardRef<HTMLButtonElement, PropsWithChildren<TabItemProps>>(
+  ({ children, className, role = 'tab', selected = false, ...props }, ref) => {
+    return (
+      <BaseButton
+        ref={ref}
+        role={role}
+        className={clsx(className, 'tcn-interactive', 'tcn-tab-item')}
+        hierarchy="tertiary"
+        data-is-selected={selected}
+        aria-selected={selected}
+        {...props}
+      >
+        {children}
+      </BaseButton>
+    );
+  }
+);

package/src/navigation/tabs/state/context.tsx

@@ -0,0 +1,61 @@
+import {
+  createContext,
+  useState,
+  useContext,
+  useMemo,
+  type FC,
+  type PropsWithChildren,
+} from 'react';
+import type { Rectangle } from '../../../utils/index.js';
+
+export interface TabsState {
+  value: string;
+  onChange?: (value: string) => void;
+  minItemWidth?: number;
+  maxItemWidth?: number;
+}
+
+export interface TabsContextValue extends TabsState {
+  activeTrigger: Rectangle | null;
+  setActiveTrigger: (trigger: Rectangle) => void;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+export function useTabs(): TabsContextValue {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error('useTabs must be used within a Tabs provider');
+  }
+  return context;
+}
+
+export interface TabsProps {
+  value: string;
+  onChange?: (value: string) => void;
+  minItemWidth?: number;
+  maxItemWidth?: number;
+}
+
+export const Tabs: FC<PropsWithChildren<TabsProps>> = ({
+  value,
+  onChange,
+  children,
+  minItemWidth,
+  maxItemWidth,
+}) => {
+  const [activeTrigger, setActiveTrigger] = useState<Rectangle | null>(null);
+  const contextValue = useMemo(
+    () => ({
+      value,
+      onChange,
+      activeTrigger,
+      setActiveTrigger,
+      minItemWidth,
+      maxItemWidth,
+    }),
+    [value, onChange, activeTrigger, minItemWidth, maxItemWidth]
+  );
+
+  return <TabsContext.Provider value={contextValue}>{children}</TabsContext.Provider>;
+};

package/src/navigation/tabs/state/link/tab_link.tsx

@@ -0,0 +1,45 @@
+import { forwardRef, useCallback, type PropsWithChildren } from 'react';
+import { TabItem, type TabItemProps } from '../../primitives/tabs_list.js';
+import { useForkRef } from '../../../../utils/index.js';
+import { useTabs } from '../context.js';
+import { useTabLink } from './use_tab_link.js';
+
+export interface TabLinkOwnProps {
+  value: string;
+}
+
+export interface TabLinkProps
+  extends Omit<TabItemProps, 'selected' | 'value'>,
+    TabLinkOwnProps {}
+
+export const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(
+  ({ children, value, onClick, minWidth, maxWidth, ...props }, forwardedRef) => {
+    const { ref: internalRef, isMatch } = useTabLink(value);
+    const state = useTabs();
+    const ref = useForkRef(internalRef, forwardedRef);
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        state.onChange?.(value);
+        onClick?.(event);
+      },
+      [state, value, onClick]
+    );
+
+    const pickMinWidth = state.minItemWidth ?? minWidth;
+    const pickMaxWidth = state.maxItemWidth ?? maxWidth;
+
+    return (
+      <TabItem
+        ref={ref}
+        selected={isMatch}
+        onClick={handleClick}
+        minWidth={pickMinWidth}
+        maxWidth={pickMaxWidth}
+        {...props}
+      >
+        {children}
+      </TabItem>
+    );
+  }
+);

package/src/navigation/tabs/state/link/use_tab_link.ts

@@ -0,0 +1,17 @@
+import { useLayoutEffect } from 'react';
+import { useTabs } from '../context.js';
+import { useTrackActiveItemRectangle } from '../../../../utils/css_utils.js';
+
+export function useTabLink(value: string) {
+  const state = useTabs();
+  const isMatch = state.value === value;
+  const { ref, rectangle } = useTrackActiveItemRectangle(isMatch);
+
+  useLayoutEffect(() => {
+    if (rectangle) {
+      state.setActiveTrigger(rectangle);
+    }
+  }, [rectangle, state.setActiveTrigger]);
+
+  return { ref, isMatch };
+}

package/src/navigation/tabs/state/nav_bar.tsx

@@ -0,0 +1,37 @@
+import { type FC, type PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import { TabsBar, type TabsBarProps } from '../primitives/tabs_bar.js';
+import { TabsList } from '../primitives/tabs_list.js';
+import { useTabs } from './context.js';
+import { convertRectangleToCssVariables } from '../../../utils/css_utils.js';
+
+export type TabsNavbarProps = TabsBarProps;
+
+export const TabsNavbar: FC<PropsWithChildren<TabsNavbarProps>> = ({
+  children,
+  className,
+  variant = 'default',
+  style,
+  ...props
+}) => {
+  const state = useTabs();
+  const cssVariables = convertRectangleToCssVariables(
+    'tabs',
+    'active',
+    state.activeTrigger
+  );
+  const finalStyle = {
+    ...cssVariables,
+    ...style,
+  };
+  return (
+    <TabsBar
+      style={finalStyle}
+      className={clsx('tcn-tabs-navbar', className)}
+      variant={variant}
+      {...props}
+    >
+      <TabsList>{children}</TabsList>
+    </TabsBar>
+  );
+};

package/src/navigation/tabs/state/tab.tsx

@@ -0,0 +1,12 @@
+import type { FC, PropsWithChildren } from 'react';
+import { useTabs } from './context.js';
+
+export interface TabProps {
+  value: string;
+}
+
+export const Tab: FC<PropsWithChildren<TabProps>> = ({ value, children }) => {
+  const state = useTabs();
+  if (state.value !== value) return null;
+  return children;
+};

package/src/overlay/portal/portal_platform.tsx

@@ -51,6 +51,7 @@ export class PortalPlatform {
       const portalPlatform = this._window.document.createElement('div');
       portalPlatform.id = 'tcn-portal-platform';
       portalPlatform.classList.add('tcn-portal-platform');
+      portalPlatform.classList.add('tcn-theme-root');
       root.appendChild(portalPlatform);
       root.classList.add('tcn-platform-root');
 

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

@@ -23,7 +23,9 @@ export const ModalStory = () => {
 
   return (
     <ZStack height="100%" width="100%" minHeight="600px">
-      <button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</button>
+      <Button hierarchy="secondary" onClick={toggle}>
+        {isOpen ? 'Close' : 'Open'}
+      </Button>
 
       <Modal isOpen={isOpen} width="400px" height="500px">
         <Header>

package/src/themes/stylesheets/reset.css

@@ -80,6 +80,7 @@
   time,
   mark,
   audio,
+  button,
   video {
     margin: 0;
     padding: 0;

package/src/themes/theme.tsx

@@ -1,13 +1,18 @@
 import React, { useLayoutEffect } from 'react';
-import layers from '../css/layers.css?raw';
+import { Box, type BoxProps } from '../stacks/index.js';
+import { clsx } from 'clsx';
+
+// Styles
 import './stylesheets/reset.css';
+import styles from './theme_provider.module.css';
+import layers from '../css/layers.css?raw';
 
-export interface ThemeProps {
+export interface ThemeProps extends BoxProps {
   styleSheets: CSSStyleSheet[];
   children: React.ReactNode;
 }
 
-export function Theme({ styleSheets, children }: ThemeProps) {
+export function Theme({ styleSheets, children, ...boxProps }: ThemeProps) {
   useLayoutEffect(() => {
     document.adoptedStyleSheets = styleSheets;
   }, [styleSheets]);
@@ -27,5 +32,9 @@ export function Theme({ styleSheets, children }: ThemeProps) {
     };
   }, []);
 
-  return children;
+  return (
+    <Box className={clsx('tcn-theme-root', styles['tcn-theme-provider'])} {...boxProps}>
+      {children}
+    </Box>
+  );
 }

package/src/themes/theme_provider.module.css

@@ -0,0 +1,6 @@
+@layer tcn-system {
+  .tcn-theme-provider {
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -70,6 +70,7 @@
     --foreground-color-quaternary: #222222;
 
     --material-disabled: #d3d3d3;
+    --material-line: #aaaaaa;
     --material-secondary-dark: 197 29.1% 40.4%;
     --material-tan: 33, 22%, 84%;
 
@@ -87,6 +88,12 @@
     --action-encouraged: 120, 90%, 40%;
   }
 
+  .tcn-theme-root {
+    font-family: var(--font-family);
+    color: var(--font-color);
+    background-color: var(--background-color-primary);
+  }
+
   /* ===== Actions ===== */
 
   .tcn-interactive {
@@ -105,6 +112,7 @@
     --act-faint: hsla(var(--action), 0.2);
     --on-mat: hsl(var(--on-material));
     --on-mat-faint: hsla(var(--on-material), 0.2);
+    --on-mat-down: color-mix(in srgb, var(--on-mat), black 8%);
     --mat: hsl(var(--material));
     --mat-down: color-mix(in srgb, var(--mat), black 8%);
     --mat-raised: color-mix(in srgb, var(--mat), white 8%);
@@ -368,6 +376,107 @@
     }
   }
 
+  /* ===== Tabs ===== */
+  .tcn-tabs-bar {
+    .tcn-tabs-list {
+      .tcn-tab-item {
+        min-height: 24px;
+        padding: 0px var(--padding-medium);
+        text-decoration: none;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  /* Default */
+  .tcn-tabs-bar[data-variant="default"] {
+    .tcn-tabs-list {
+      .tcn-tab-item {
+        box-sizing: border-box;
+        border: none;
+        padding: 0px var(--padding-medium);
+      }
+      .tcn-tab-item[data-is-selected="true"] {
+        --on-material: var(--action);
+      }
+      .tcn-tab-item[data-is-selected="false"]:hover::after {
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0px;
+        height: 1px;
+        background: var(--on-mat);
+        pointer-events: none;
+        z-index: 2;
+        width: 100%;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        min-height: 2px;
+        transform: translateX(var(--tabs-active-rectangle-position-x, 0));
+        width: var(--tabs-active-rectangle-width, 0);
+        background: hsl(var(--action));
+        pointer-events: none;
+        border-bottom-left-radius: 2px;
+        border-bottom-right-radius: 2px;
+        transition:
+          transform 300ms ease-in-out,
+          width 300ms ease-in-out;
+        will-change: transform, width;
+        z-index: 2;
+      }
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: var(--material-line);
+      pointer-events: none;
+    }
+  }
+
+  /* Inline  */
+  .tcn-tabs-bar[data-variant="inline"] {
+    min-width: min-content;
+    width: auto;
+    flex-grow: 0;
+    border-radius: var(--shape-radius-medium);
+    border: 1px solid hsl(var(--on-material));
+    --action: var(--on-material);
+
+    .tcn-tabs-list {
+      gap: var(--gap-small);
+      padding: var(--padding-small);
+      .tcn-tab-item {
+        border-radius: var(--shape-radius-medium);
+      }
+      .tcn-tab-item[data-is-selected="true"] {
+        background: var(--on-mat);
+        color: var(--mat);
+      }
+      .tcn-tab-item[data-is-selected="true"]:hover {
+        background: color-mix(in srgb, var(--on-mat), white 8%);
+      }
+      .tcn-tab-item[data-is-selected="true"]:active {
+        background: color-mix(in srgb, var(--on-mat), black 8%);
+      }
+    }
+  }
+
+  /* ===== MATERIAL ===== */
+
   .material {
     background-color: hsl(var(--material));
     color: hsl(var(--on-material));

package/src/themes/themes/ergo/ergo_theme.ts

@@ -1,4 +1,5 @@
 import css from './ergo_theme.css?raw';
+import '@fontsource/lato';
 
 export const ergoStyleSheet = new CSSStyleSheet();
 ergoStyleSheet.replaceSync(css);

package/src/themes/themes/windows_98/windows_98.css

@@ -36,10 +36,6 @@
     --quaternary-color: #000080;
     --quaternary-color-strong: #000080;
 
-    --font-color: #222222;
-    --font-family: "Pixelated MS Sans Serif", Arial;
-    --font-size: 12px;
-
     --background-color-primary: #c0c0c0;
     --background-color-secondary: #c0c0c0;
     --background-color-tertiary: #c0c0c0;
@@ -51,6 +47,17 @@
     --foreground-color-quaternary: #222222;
 
     --accent-color: #000080;
+
+    --font-color: #222222;
+    --font-family: "Microsoft Sans Serif", "Arial", sans-serif;
+    --font-size: 12px;
+  }
+
+  .tcn-theme-root {
+    font-family: var(--font-family);
+    color: var(--font-color);
+    -webkit-font-smoothing: none;
+    background-color: var(--background-color-primary);
   }
 
   /* ===== TYPOGRAPHY ===== */
@@ -82,6 +89,7 @@
 
   /* ===== BUTTONS ===== */
   /* Base button styles */
+  .tcn-base-button,
   .tcn-button,
   .tcn-button[data-hierarchy="primary"],
   .tcn-button[data-hierarchy="secondary"],
@@ -1029,3 +1037,33 @@
     border-left: 1px solid #808080;
   }
 }
+
+/* ===== TABS ===== */
+
+.tcn-tabs-list {
+  display: flex;
+  list-style-type: none;
+  margin: 0 0 -2px;
+  padding-left: 3px;
+  position: relative;
+  text-indent: 0;
+
+  .tcn-tab-item {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    box-shadow:
+      inset -1px 0 #0a0a0a,
+      inset 1px 1px #dfdfdf,
+      inset -2px 0 grey,
+      inset 2px 2px #fff;
+  }
+
+  .tcn-tab-item[data-is-selected="true"] {
+    background-color: silver;
+    margin-left: -3px;
+    margin-top: -2px;
+    padding-bottom: 2px;
+    position: relative;
+    z-index: 8;
+  }
+}

package/src/utils/css_utils.ts

@@ -0,0 +1,64 @@
+import type { Rectangle } from './types/dimensions.js';
+import { useLayoutEffect, useRef, useState } from 'react';
+
+export const convertRectangleToCssVariables = (
+  componentName: string,
+  stateName: string,
+  rectangle?: Rectangle | null
+) => {
+  if (!rectangle) {
+    return {};
+  }
+  const prefix = `--${componentName}-${stateName}-rectangle-`;
+  return {
+    [`${prefix}position-x`]: rectangle.position.x + 'px',
+    [`${prefix}position-y`]: rectangle.position.y + 'px',
+    [`${prefix}width`]: rectangle.dimensions.width + 'px',
+    [`${prefix}height`]: rectangle.dimensions.height + 'px',
+  };
+};
+
+function getElementRect(element: HTMLElement | null): Rectangle | null {
+  if (!element) return null;
+
+  return {
+    dimensions: {
+      width: element.offsetWidth,
+      height: element.offsetHeight,
+    },
+    position: {
+      x: element.offsetLeft,
+      y: element.offsetTop,
+    },
+  };
+}
+
+export function useTrackActiveItemRectangle(isActive: boolean) {
+  const ref = useRef<HTMLElement>(null);
+  const [rectangle, setRectangle] = useState<Rectangle | null>(null);
+
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const update = () => {
+      const rect = getElementRect(element);
+      if (isActive && rect) {
+        setRectangle(rect);
+      }
+    };
+
+    update();
+
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(element);
+    window.addEventListener('resize', update);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', update);
+    };
+  }, [isActive]);
+
+  return { ref, rectangle };
+}