@tcn/ui 0.3.1 → 0.3.3

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

@@ -0,0 +1,136 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Tabs } from '../state/context.js';
+import { TabLink } from '../state/link/tab_link.js';
+import { Tab } from '../state/tab.js';
+import { HStack } from '../../../stacks/h_stack.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import { TabsNavbar } from '../state/nav_bar.js';
+
+const meta: Meta = {
+  title: 'Navigation/Tabs/Stateful',
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+type ColorTab = 'coral' | 'teal' | 'violet' | 'opalescent';
+
+const ColorPanel = ({
+  color,
+  label,
+  description,
+}: {
+  color: string;
+  label: string;
+  description: string;
+}) => (
+  <VStack
+    role="tabpanel"
+    hAlign="center"
+    vAlign="center"
+    padding="32px"
+    minHeight="200px"
+    style={{
+      borderRadius: 12,
+      background: color,
+    }}
+  >
+    <span style={{ fontSize: 24, fontWeight: 700, color: 'white' }}>{label}</span>
+    <span style={{ fontSize: 14, color: 'rgba(255,255,255,0.85)', marginTop: 8 }}>
+      {description}
+    </span>
+  </VStack>
+);
+
+interface TabsDemoProps {
+  variant?: 'inline';
+  minItemWidth?: number;
+}
+
+const TabsDemo = ({ variant, minItemWidth }: TabsDemoProps) => {
+  const [currentTab, setCurrentTab] = useState<ColorTab>('coral');
+
+  const isInline = variant === 'inline';
+
+  return (
+    <Tabs
+      value={currentTab}
+      onChange={v => setCurrentTab(v as ColorTab)}
+      minItemWidth={minItemWidth}
+    >
+      <VStack minWidth="400px" gap="8px">
+        <HStack
+          hAlign={isInline ? 'center' : 'start'}
+          gap={isInline ? 'small' : undefined}
+        >
+          <TabsNavbar variant={variant}>
+            <TabLink value="coral">Coral</TabLink>
+            <TabLink value="teal">Teal</TabLink>
+            <TabLink value="violet">Violet</TabLink>
+            <TabLink value="opalescent">Opalescent Periwinkle</TabLink>
+          </TabsNavbar>
+        </HStack>
+
+        <Tab value="coral">
+          <ColorPanel color="#FF6B6B" label="Coral" description="Warm and energetic" />
+        </Tab>
+
+        <Tab value="teal">
+          <ColorPanel color="#20B2AA" label="Teal" description="Calm and balanced" />
+        </Tab>
+
+        <Tab value="violet">
+          <ColorPanel
+            color="#9B59B6"
+            label="Violet"
+            description="Creative and mysterious"
+          />
+        </Tab>
+
+        <Tab value="opalescent">
+          <ColorPanel
+            color="#C7C9E8"
+            label="Opalescent Periwinkle"
+            description="Soft, luminous and serene"
+          />
+        </Tab>
+      </VStack>
+    </Tabs>
+  );
+};
+
+export const Baseline: Story = {
+  render: () => {
+    const [currentTab, setCurrentTab] = useState('1');
+    return (
+      <Tabs value={currentTab} onChange={v => setCurrentTab(v)}>
+        <TabsNavbar>
+          <TabLink value="1">One</TabLink>
+          <TabLink value="2">Two</TabLink>
+          <TabLink value="3">Three</TabLink>
+          <TabLink value="4">Four</TabLink>
+        </TabsNavbar>
+
+        <Tab value="1">Page One</Tab>
+        <Tab value="2">Page Two</Tab>
+        <Tab value="3">Page Three</Tab>
+        <Tab value="4">Page Four</Tab>
+      </Tabs>
+    );
+  },
+};
+
+export const MinItemWidth: Story = {
+  render: () => <TabsDemo minItemWidth={100} />,
+};
+
+export const InlineVariant: Story = {
+  render: () => <TabsDemo variant="inline" minItemWidth={100} />,
+};
+
+export const AutoWidth: Story = {
+  render: () => <TabsDemo />,
+};

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/context_menu/context_menu.tsx

@@ -46,7 +46,7 @@ export function ContextMenu({ open, position, children, onClose }: ContextMenuPr
         open={open}
         onClose={onClose}
         minWidth="150px"
-        className="context-menu"
+        className="tcn-context-menu"
       >
         {children}
       </Menu>

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

@@ -1,5 +1,7 @@
-.frame {
-  padding: 0;
-  border: none;
-  background: none;
+@layer tcn-system {
+  :where(.frame) {
+    padding: 0;
+    border: none;
+    background: none;
+  }
 }

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

@@ -1,14 +1,16 @@
-.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);
-}
+@layer tcn-system {
+  :where(.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);
+  :where(.sb-frame-container) {
+    background: #f7e9fe;
+    padding: var(--padding-medium);
+    border-radius: var(--shape-radius-large);
+  }
 }

package/src/overlay/menu/menu.module.css

@@ -1,33 +1,35 @@
-.menu {
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
-  border-radius: 8px;
-  background-color: rgb(255, 255, 255);
-  padding: 8px;
-}
+@layer tcn-system {
+  :where(.menu) {
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+    border-radius: 8px;
+    background-color: rgb(255, 255, 255);
+    padding: 8px;
+  }
 
-.menu-item {
-  border-radius: 4px;
-  padding: 4px;
-  padding-inline: 8px;
-  height: auto;
-  outline: none;
-  border: none;
-  background-color: transparent;
-  color: var(--text-color);
-  cursor: pointer;
-}
+  :where(.menu-item) {
+    border-radius: 4px;
+    padding: 4px;
+    padding-inline: 8px;
+    height: auto;
+    outline: none;
+    border: none;
+    background-color: transparent;
+    color: var(--text-color);
+    cursor: pointer;
+  }
 
-.menu-item:active {
-  opacity: 0.75;
-}
+  :where(.menu-item:active) {
+    opacity: 0.75;
+  }
 
-.menu-item:hover,
-.menu-item[data-is-open="true"] {
-  background-color: var(--accent-color);
-  color: rgba(255, 255, 255, 0.9);
-}
+  :where(.menu-item:hover),
+  :where(.menu-item[data-is-open="true"]) {
+    background-color: var(--accent-color);
+    color: rgba(255, 255, 255, 0.9);
+  }
 
-.menu-item:focus {
-  background-color: var(--accent-color);
-  color: rgba(255, 255, 255, 0.9);
+  :where(.menu-item:focus) {
+    background-color: var(--accent-color);
+    color: rgba(255, 255, 255, 0.9);
+  }
 }

package/src/overlay/menu/menu.tsx

@@ -105,7 +105,7 @@ export const Menu = React.forwardRef(function Menu(
       restoreFocus={restoreFocus}
       veil={veil}
     >
-      <VStack ref={ref} className={clsx(styles.menu, className, 'menu')} {...props}>
+      <VStack ref={ref} className={clsx(styles.menu, className, 'tcn-menu')} {...props}>
         {clonedChildren}
       </VStack>
     </Popper>
@@ -235,7 +235,7 @@ export const MenuItem = React.forwardRef(function MenuItem(
         ref={forkedRef}
         data-is-selected={Boolean(selected)}
         data-has-children={Boolean(hasSubmenu)}
-        className={clsx(className, styles['menu-item'], 'menu-item')}
+        className={clsx(className, styles['menu-item'], 'tcn-menu-item')}
         data-is-open={open}
         {...props}
       >

package/src/overlay/popper/legacy/popper.module.css

@@ -1,10 +1,12 @@
-.popover {
-  display: inline-block;
-  position: absolute;
-}
+@layer tcn-system {
+  :where(.popover) {
+    display: inline-block;
+    position: absolute;
+  }
 
-.popover-veil {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0);
+  :where(.popover-veil) {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0);
+  }
 }

package/src/overlay/popper/legacy/popper.tsx

@@ -2,6 +2,7 @@ import { ClickAwayListener, ScrollAwayListener } from '../../../utils/index.js';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { Portal } from '../../portal/portal.js';
 import styles from './popper.module.css';
+import clsx from 'clsx';
 
 export interface PopperProps {
   anchorElement: HTMLElement | null;
@@ -179,7 +180,7 @@ export function Popper({
     <ScrollAwayListener onScrollAway={close} isException={isScrollAwayException}>
       <div
         ref={popoverRef}
-        className={styles.popover}
+        className={clsx(styles.popover, 'tcn-popper')}
         style={{
           top: `${position.top}px`,
           left: `${position.left}px`,

package/src/overlay/popper/preview_popper.tsx

@@ -39,7 +39,7 @@ export const PreviewPopper = forwardRef<
         onDismissal={close}
         isException={isException}
         dismissals={dismissals}
-        acceptedRefs={[popperRef, ...acceptedRefs]}
+        acceptedRefs={[popperRef, anchorElement, ...acceptedRefs]}
       >
         <ElementTethered
           ref={merged}