@tcn/ui 0.3.2 → 0.4.0

package/src/navigation/index.ts

@@ -0,0 +1,18 @@
+// Stateful Components
+export { Tabs, useTabs, type TabsProps, type TabsState } from './tabs/state/context.js';
+export {
+  TabLink,
+  type TabLinkProps,
+  type TabLinkOwnProps,
+} from './tabs/state/link/tab_link.js';
+export { Tab, type TabProps } from './tabs/state/tab.js';
+export { TabsNavbar, type TabsNavbarProps } from './tabs/state/nav_bar.js';
+
+// Primitive Components
+export { TabsBar, type TabsBarProps } from './tabs/primitives/tabs_bar.js';
+export {
+  TabsList,
+  TabItem,
+  type TabsListProps,
+  type TabItemProps,
+} from './tabs/primitives/tabs_list.js';

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,41 @@
+import { forwardRef, type FC, type PropsWithChildren } from 'react';
+import { type BaseButtonProps } from '../../../actions/index.js';
+import { HStack, type HStackProps } from '../../../stacks/h_stack.js';
+import clsx from 'clsx';
+import { Toggle } from '../../../actions/toggle/toggle.js';
+
+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 (
+      <Toggle
+        ref={ref}
+        role={role}
+        className={clsx(className, 'tcn-interactive', 'tcn-tab-item')}
+        selected={selected}
+        {...props}
+      >
+        {children}
+      </Toggle>
+    );
+  }
+);

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/carrot/base_carrot.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import { Box, type BoxProps } from '../../stacks/box/box.js';
+
+export interface BaseCarrotOwnProps {
+  direction: 'top' | 'bottom' | 'start' | 'end';
+}
+
+export interface BaseCarrotProps extends BaseCarrotOwnProps, BoxProps {}
+
+export const BaseCarrot = ({
+  direction,
+  className,
+  as = 'span',
+  ...rest
+}: BaseCarrotProps) => {
+  return (
+    <Box
+      as="span"
+      data-direction={direction}
+      className={clsx('tcn-base-carrot', className)}
+      {...rest}
+    />
+  );
+};

package/src/overlay/carrot/carrot.stories.tsx

@@ -0,0 +1,54 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Box } from '../../stacks/index.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { BaseCarrot } from './base_carrot.js';
+
+export default {
+  title: 'Overlays/Carrot',
+  component: BaseCarrot,
+  tags: ['autodocs'],
+};
+
+interface CarrotStoryProps {
+  direction: 'top' | 'bottom' | 'start' | 'end';
+}
+
+const CarrotStory = ({ direction }: CarrotStoryProps) => {
+  return (
+    <VStack
+      minWidth="100px"
+      minHeight="100px"
+      height="100%"
+      style={{ backgroundColor: 'gray' }}
+    >
+      <Box width="100px" height="100px" padding="24px" style={{ backgroundColor: 'red' }}>
+        <BaseCarrot direction={direction} />
+      </Box>
+    </VStack>
+  );
+};
+
+export const Top: StoryObj<CarrotStoryProps> = {
+  render: args => <CarrotStory {...args} />,
+  args: {
+    direction: 'top',
+  },
+};
+export const Bottom: StoryObj<CarrotStoryProps> = {
+  render: args => <CarrotStory {...args} />,
+  args: {
+    direction: 'bottom',
+  },
+};
+export const Start: StoryObj<CarrotStoryProps> = {
+  render: args => <CarrotStory {...args} />,
+  args: {
+    direction: 'start',
+  },
+};
+export const End: StoryObj<CarrotStoryProps> = {
+  render: args => <CarrotStory {...args} />,
+  args: {
+    direction: 'end',
+  },
+};

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/card/card.stories.tsx

@@ -5,7 +5,7 @@ import { VBody } from '../../layouts/body/v_body.js';
 import { UtilityBar } from '../../layouts/utility_bar/utility_bar.js';
 import { Box, Spacer } from '../../stacks/index.js';
 import { Title } from '../../typography/title/title.js';
-import { SlimButton } from '../../actions/index.js';
+import { Button } from '../../actions/index.js';
 import { Card } from './card.js';
 
 // Styles
@@ -24,28 +24,28 @@ export const Default = () => {
         <Header>
           <Title>Card Header</Title>
           <Spacer />
-          <SlimButton hierarchy="tertiary">
+          <Button utility hierarchy="tertiary">
             <GridOneIcon />
-          </SlimButton>
-          <SlimButton hierarchy="tertiary">
+          </Button>
+          <Button utility hierarchy="secondary">
             <GridOneIcon />
-          </SlimButton>
+          </Button>
+          <Button utility hierarchy="primary">
+            <GridOneIcon />
+          </Button>
         </Header>
         <UtilityBar>
           <Title>Utility Bar</Title>
           <Spacer />
-          <SlimButton hierarchy="tertiary">
-            <BugIcon />
-          </SlimButton>
-          <SlimButton hierarchy="tertiary">
+          <Button utility hierarchy="tertiary">
             <BugIcon />
-          </SlimButton>
-          <SlimButton size="md" hierarchy="tertiary">
+          </Button>
+          <Button utility hierarchy="secondary">
             <BugIcon />
-          </SlimButton>
-          <SlimButton hierarchy="tertiary">
+          </Button>
+          <Button utility size="md" hierarchy="primary">
             <BugIcon />
-          </SlimButton>
+          </Button>
         </UtilityBar>
 
         <VBody>

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, SlimButton } from '../../../actions/index.js';
+import { Button } from '../../../actions/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';
@@ -23,25 +23,36 @@ 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>
           <Title>Modal Title</Title>
           <Spacer />
-          <SlimButton hierarchy="tertiary" size="md" onClick={toggle}>
+          <Button utility hierarchy="tertiary" size="md" onClick={toggle}>
             <CrossIcon />
-          </SlimButton>
+          </Button>
+          <Button hierarchy="secondary" size="md" onClick={toggle}>
+            <CrossIcon />
+          </Button>
+          <Button utility hierarchy="primary" size="md" onClick={toggle}>
+            <CrossIcon />
+          </Button>
         </Header>
         <UtilityBar>
           <Title>Utility Bar</Title>
           <Spacer />
-          <SlimButton hierarchy="tertiary">
+          <Button utility hierarchy="tertiary">
+            <BugIcon />
+          </Button>
+          <Button hierarchy="secondary">
             <BugIcon />
-          </SlimButton>
-          <SlimButton hierarchy="tertiary">
+          </Button>
+          <Button utility size="md" hierarchy="primary">
             <BugIcon />
-          </SlimButton>
+          </Button>
         </UtilityBar>
         <VBody>
           <BodyText>This is a modal</BodyText>