@ds-mo/ui 0.2.4 → 0.4.0

package/src/components/Surface/Surface.stories.tsx

@@ -1,213 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { Surface } from './Surface';
-import type { SurfaceIntent, SurfaceContrast, SurfaceElevation } from './Surface';
-
-const INTENTS: SurfaceIntent[]   = ['brand', 'positive', 'negative', 'warning', 'caution', 'ai', 'neutral'];
-const CONTRASTS: SurfaceContrast[] = ['faint', 'medium', 'bold', 'strong'];
-const ELEVATIONS: SurfaceElevation[] = ['none', 'depressed', 'depressed-md', 'flat', 'elevated', 'floating'];
-
-const meta: Meta<typeof Surface> = {
-  title: 'Primitives (Reviewed)/Surface',
-  component: Surface,
-  args: {
-    background: 'primary',
-    elevation: 'elevated',
-    radius: 'lg',
-    children: 'Surface content',
-  },
-  argTypes: {
-    background: { control: 'select', options: ['primary', 'secondary', 'transparent', 'translucent'] },
-    intent:     { control: 'select', options: INTENTS },
-    contrast:   { control: 'select', options: CONTRASTS },
-    elevation:  { control: 'select', options: [...ELEVATIONS, 'overlayTop', 'overlayRight', 'overlayBottom', 'overlayLeft'] },
-    radius:     { control: 'select', options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'] },
-    interactive:{ control: 'boolean' },
-    selected:   { control: 'boolean' },
-    inactive:   { control: 'boolean' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Surface>;
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-const monoLabel = (text: string, minWidth = 80) => (
-  <span style={{ fontSize: 10, fontFamily: 'monospace', color: 'var(--color-foreground-tertiary)', minWidth, flexShrink: 0 }}>
-    {text}
-  </span>
-);
-
-const divider = <hr style={{ border: 'none', borderTop: '1px solid var(--color-border-tertiary)', margin: '16px 0' }} />;
-
-// ─── Stories ──────────────────────────────────────────────────────────────────
-
-export const Playground: Story = {
-  args: {
-    style: { padding: 24, minWidth: 240, minHeight: 100 },
-  },
-};
-
-export const Elevations: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    /* Secondary background provides the contrast needed to see depressed vs elevated */
-    <div style={{ background: 'var(--color-background-secondary)', padding: 40, borderRadius: 16, display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'flex-start' }}>
-      {ELEVATIONS.map(elevation => (
-        <Surface
-          key={elevation}
-          background="primary"
-          elevation={elevation}
-          radius="lg"
-          style={{ padding: '20px 24px', minWidth: 130, textAlign: 'center', fontSize: 11, fontFamily: 'monospace' }}
-        >
-          {elevation}
-        </Surface>
-      ))}
-    </div>
-  ),
-};
-
-export const PanelOverlays: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
-      {(['overlayTop', 'overlayBottom', 'overlayLeft', 'overlayRight'] as const).map(elevation => {
-        const isTop    = elevation === 'overlayTop';
-        const isBottom = elevation === 'overlayBottom';
-        const isLeft   = elevation === 'overlayLeft';
-        return (
-          <div key={elevation} style={{ position: 'relative', height: 120, overflow: 'hidden', borderRadius: 10, background: 'var(--color-background-secondary)' }}>
-            <Surface
-              background="primary"
-              elevation={elevation}
-              style={{
-                position: 'absolute',
-                textAlign: 'center',
-                fontSize: 11,
-                fontFamily: 'monospace',
-                ...(isTop    ? { top: 0, left: 0, right: 0, padding: 16 } : {}),
-                ...(isBottom ? { bottom: 0, left: 0, right: 0, padding: 16 } : {}),
-                ...(isLeft   ? { top: 0, bottom: 0, left: 0, width: 130, display: 'flex', alignItems: 'center', justifyContent: 'center' } : {}),
-                ...(!isTop && !isBottom && !isLeft ? { top: 0, bottom: 0, right: 0, width: 130, display: 'flex', alignItems: 'center', justifyContent: 'center' } : {}),
-              }}
-            >
-              {elevation}
-            </Surface>
-          </div>
-        );
-      })}
-    </div>
-  ),
-};
-
-export const IntentMatrix: Story = {
-  name: 'Intent × Contrast',
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-      {/* Header */}
-      <div style={{ display: 'flex', gap: 8, marginBottom: 4, marginLeft: 88 }}>
-        {CONTRASTS.map(c => (
-          <span key={c} style={{ minWidth: 140, textAlign: 'center', fontSize: 10, fontFamily: 'monospace', color: 'var(--color-foreground-tertiary)' }}>{c}</span>
-        ))}
-      </div>
-      {INTENTS.map(intent => (
-        <div key={intent} style={{ display: 'flex', gap: 8, alignItems: 'stretch' }}>
-          {monoLabel(intent, 88)}
-          {CONTRASTS.map(contrast => (
-            <Surface
-              key={contrast}
-              intent={intent}
-              contrast={contrast}
-              radius="md"
-              style={{ minWidth: 140, padding: '10px 16px', fontSize: 11, fontFamily: 'monospace', textAlign: 'center' }}
-            >
-              {intent} / {contrast}
-            </Surface>
-          ))}
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const Backgrounds: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'flex', gap: 16 }}>
-      {(['primary', 'secondary', 'translucent', 'transparent'] as const).map(bg => (
-        <div key={bg} style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center' }}>
-          <Surface
-            background={bg}
-            elevation="flat"
-            radius="lg"
-            style={{ width: 140, height: 80, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontFamily: 'monospace' }}
-          >
-            {bg}
-          </Surface>
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const Interactive: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
-      {([
-        { label: 'default',            props: {} },
-        { label: 'interactive',        props: { interactive: true } },
-        { label: 'selected',           props: { interactive: true, selected: true } },
-        { label: 'inactive',           props: { inactive: true } },
-        { label: 'as="button"',        props: { interactive: true, as: 'button' as const } },
-      ]).map(({ label, props }) => (
-        <div key={label} style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center' }}>
-          <Surface
-            background="primary"
-            elevation="elevated"
-            radius="lg"
-            style={{ width: 160, height: 80, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontFamily: 'monospace', cursor: props.interactive ? 'pointer' : 'default' }}
-            {...props}
-          >
-            {label}
-          </Surface>
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const EdgeDividers: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'flex', gap: 40, alignItems: 'flex-start' }}>
-      {/* Single edge variants */}
-      <div style={{ display: 'flex', gap: 16 }}>
-        {(['top', 'right', 'bottom', 'left'] as const).map(edge => (
-          <div key={edge} style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center' }}>
-            {monoLabel(edge)}
-            <Surface
-              edge={edge}
-              style={{ width: 80, height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontFamily: 'monospace' }}
-            >
-              {edge}
-            </Surface>
-          </div>
-        ))}
-      </div>
-      {divider}
-      {/* Stacked sections pattern */}
-      <div>
-        {monoLabel('stacked sections')}
-        <div style={{ width: 200, marginTop: 8 }}>
-          <Surface edge="bottom" style={{ padding: '12px 16px', fontSize: 12 }}>Section 1</Surface>
-          <Surface edge="bottom" style={{ padding: '12px 16px', fontSize: 12 }}>Section 2</Surface>
-          <Surface style={{ padding: '12px 16px', fontSize: 12 }}>Section 3</Surface>
-        </div>
-      </div>
-    </div>
-  ),
-};

package/src/components/Surface/Surface.tsx

@@ -1,219 +0,0 @@
-import React, { forwardRef } from 'react';
-import styles from './Surface.module.css';
-
-/**
- * Semantic intent for colored surfaces.
- * Each intent has four contrast levels (faint, medium, bold, strong).
- */
-export type SurfaceIntent =
-  | 'brand'
-  | 'positive'
-  | 'negative'
-  | 'warning'
-  | 'caution'
-  | 'ai'
-  | 'neutral'
-  | 'walkthrough'
-  | 'guide';
-
-/** Background type for non-intent surfaces. */
-export type SurfaceBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
-
-/** Contrast level for semantic intents. */
-export type SurfaceContrast = 'faint' | 'medium' | 'bold' | 'strong';
-
-/** Elevation for depth/shadow effects. Progressive: none → flat → elevated → floating. */
-export type SurfaceElevation =
-  | 'none'
-  | 'depressed'
-  | 'depressed-md'
-  | 'flat'
-  | 'elevated'
-  | 'floating'
-  | 'overlayTop'
-  | 'overlayRight'
-  | 'overlayBottom'
-  | 'overlayLeft';
-
-/** Edge divider border direction. */
-export type SurfaceEdge = 'top' | 'right' | 'bottom' | 'left';
-
-/** Corner radius presets. */
-export type SurfaceRadiusPreset = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
-
-/** Corner radius — preset, CSS variable, or custom string (e.g. '12px 12px 0 0'). */
-export type SurfaceRadius = SurfaceRadiusPreset | (string & {});
-
-/** HTML elements Surface can render as. */
-export type SurfaceElement =
-  | 'div'
-  | 'section'
-  | 'aside'
-  | 'article'
-  | 'header'
-  | 'footer'
-  | 'main'
-  | 'nav'
-  | 'span'
-  | 'button'
-  | 'td'
-  | 'th';
-
-/** Props shared by both surface modes. */
-interface SurfaceBaseProps extends React.HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
-  /** Elevation for depth/shadow effects. Defaults to 'none'. */
-  elevation?: SurfaceElevation;
-  /** Edge divider border(s). Only applies when elevation is 'none'. */
-  edge?: SurfaceEdge | SurfaceEdge[];
-  /** Corner radius — preset or CSS variable. */
-  radius?: SurfaceRadius;
-  /** Enable hover/pressed interaction overlay. */
-  interactive?: boolean;
-  /** Apply selected background state. */
-  selected?: boolean;
-  /** Dim and disable pointer events. */
-  inactive?: boolean;
-  /** HTML element to render. Defaults to 'div'. */
-  as?: SurfaceElement;
-  /** Button type — only used when as='button'. */
-  type?: 'button' | 'submit' | 'reset';
-}
-
-/** Non-intent surface — uses a basic background color. */
-interface SurfaceDefaultProps extends SurfaceBaseProps {
-  /** Background color. Defaults to 'transparent'. */
-  background?: SurfaceBackground;
-  intent?: never;
-  contrast?: never;
-}
-
-/** Intent surface — uses a semantic color with contrast level. */
-interface SurfaceIntentProps extends SurfaceBaseProps {
-  /** Semantic intent color. */
-  intent: SurfaceIntent;
-  /** Contrast level for the intent background. Defaults to 'faint'. */
-  contrast?: SurfaceContrast;
-  background?: never;
-}
-
-export type SurfaceProps = SurfaceDefaultProps | SurfaceIntentProps;
-
-const backgroundClassMap: Record<SurfaceBackground, string> = {
-  primary: styles.bgPrimary,
-  secondary: styles.bgSecondary,
-  transparent: styles.bgTransparent,
-  translucent: styles.bgTranslucent,
-};
-
-const elevationClassMap: Record<SurfaceElevation, string> = {
-  none: styles.elevationNone,
-  depressed: styles.elevationDepressed,
-  'depressed-md': styles.elevationDepressedMd,
-  flat: styles.elevationFlat,
-  elevated: styles.elevationElevated,
-  floating: styles.elevationFloating,
-  overlayTop: styles.elevationOverlayTop,
-  overlayRight: styles.elevationOverlayRight,
-  overlayBottom: styles.elevationOverlayBottom,
-  overlayLeft: styles.elevationOverlayLeft,
-};
-
-const edgeClassMap: Record<SurfaceEdge, string> = {
-  top: styles.edgeTop,
-  right: styles.edgeRight,
-  bottom: styles.edgeBottom,
-  left: styles.edgeLeft,
-};
-
-const radiusClassMap: Record<SurfaceRadiusPreset, string> = {
-  none: styles.radiusNone,
-  xs: styles.radiusXs,
-  sm: styles.radiusSm,
-  md: styles.radiusMd,
-  lg: styles.radiusLg,
-  xl: styles.radiusXl,
-  '2xl': styles.radius2xl,
-  full: styles.radiusFull,
-};
-
-const getIntentContrastClass = (intent: SurfaceIntent, contrast: SurfaceContrast): string => {
-  const intentKey = intent.charAt(0).toUpperCase() + intent.slice(1);
-  const contrastKey = contrast.charAt(0).toUpperCase() + contrast.slice(1);
-  return styles[`intent${intentKey}${contrastKey}`] || '';
-};
-
-const isPresetRadius = (radius: SurfaceRadius): radius is SurfaceRadiusPreset =>
-  radius in radiusClassMap;
-
-export const Surface = forwardRef<HTMLElement, SurfaceProps>(
-  (
-    {
-      children,
-      background = 'transparent',
-      intent,
-      contrast = 'faint',
-      elevation = 'none',
-      edge,
-      radius,
-      interactive = false,
-      selected = false,
-      inactive = false,
-      as: Component = 'div',
-      className = '',
-      style,
-      type,
-      ...rest
-    },
-    ref
-  ) => {
-    const classes = [
-      styles.surface,
-      // Background or intent+contrast
-      intent
-        ? getIntentContrastClass(intent, contrast)
-        : backgroundClassMap[background],
-      // Elevation
-      elevationClassMap[elevation],
-      // Edge(s) — only when elevation is 'none'
-      ...(edge && elevation === 'none'
-        ? Array.isArray(edge)
-          ? edge.map(e => edgeClassMap[e])
-          : [edgeClassMap[edge]]
-        : []),
-      // Radius (preset only — custom handled via inline style)
-      radius && isPresetRadius(radius) ? radiusClassMap[radius] : '',
-      // States
-      interactive ? styles.interactive : '',
-      selected ? styles.selected : '',
-      inactive ? styles.inactive : '',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    const computedStyle: React.CSSProperties = {
-      ...style,
-      ...(radius && !isPresetRadius(radius) ? { borderRadius: radius } : {}),
-    };
-
-    const hasStyle =
-      (radius && !isPresetRadius(radius)) || (style && Object.keys(style).length > 0);
-
-    const elementProps = {
-      ref,
-      className: classes,
-      style: hasStyle ? computedStyle : undefined,
-      disabled: Component === 'button' ? inactive : undefined,
-      type: Component === 'button' ? type || 'button' : undefined,
-      ...rest,
-    };
-
-    return (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      <Component {...(elementProps as any)}>{children}</Component>
-    );
-  }
-);
-
-Surface.displayName = 'Surface';

package/src/components/Surface/index.ts

@@ -1,12 +0,0 @@
-export { Surface } from './Surface';
-export type {
-  SurfaceProps,
-  SurfaceIntent,
-  SurfaceBackground,
-  SurfaceContrast,
-  SurfaceElevation,
-  SurfaceEdge,
-  SurfaceRadius,
-  SurfaceRadiusPreset,
-  SurfaceElement,
-} from './Surface';

package/src/components/Tab/Tab.module.css

@@ -1,66 +0,0 @@
-/* ==========================================================================
-   Tab — hover/pressed via direct background-color, no pseudo-element overlay.
-   ========================================================================== */
-
-.tab {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--dimension-space-075);
-  background-color: transparent;
-  border: none;
-  border-radius: var(--dimension-radius-075);
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-  color: var(--color-foreground-secondary);
-  position: relative;
-  will-change: color;
-  transition: color var(--effect-motion-short-2),
-              background-color var(--effect-motion-short-2);
-  flex-shrink: 0;
-  height: var(--dimension-size-400);
-  box-sizing: border-box;
-
-  /* Interaction — ghost defaults */
-  --_hover-bg: var(--color-interaction-hover);
-  --_pressed-bg: var(--color-interaction-pressed);
-}
-
-.tab:hover { background-color: var(--_hover-bg); }
-.tab:active { background-color: var(--_pressed-bg); }
-
-.tabSelected { color: var(--color-foreground-primary); }
-
-/* ==========================================================================
-   Background context — parent surface awareness
-   ========================================================================== */
-
-.onMedium {
-  --_hover-bg: var(--color-interaction-on-medium-background-hover);
-  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);
-}
-
-.onBold {
-  --_hover-bg: var(--color-interaction-on-bold-background-hover);
-  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);
-  color: var(--color-foreground-on-bold-background-secondary);
-}
-
-.onBold.tabSelected { color: var(--color-foreground-on-bold-background-primary); }
-
-.onStrong {
-  --_hover-bg: var(--color-interaction-on-strong-background-hover);
-  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);
-  color: var(--color-foreground-on-bold-background-secondary);
-}
-
-.onStrong.tabSelected { color: var(--color-foreground-on-bold-background-primary); }
-
-.onAlwaysDark {
-  --_hover-bg: var(--color-always-dark-interaction-hover);
-  --_pressed-bg: var(--color-always-dark-interaction-pressed);
-  color: var(--color-always-dark-foreground-secondary);
-}
-
-.onAlwaysDark.tabSelected { color: var(--color-always-dark-foreground-primary); }

package/src/components/Tab/Tab.stories.tsx

@@ -1,103 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Tab } from './Tab';
-import type { TabBackground } from './Tab';
-import { Surface } from '@/components/Surface';
-
-const meta: Meta<typeof Tab> = {
-  title: 'Primitives/Tab',
-  component: Tab,
-};
-
-export default meta;
-type Story = StoryObj<typeof Tab>;
-
-export const Default: Story = {
-  render: () => {
-    const [selected, setSelected] = useState('overview');
-    const tabs = ['Overview', 'Activity', 'Settings', 'Members'];
-    return (
-      <div style={{ display: 'flex', gap: 0, padding: 24 }}>
-        {tabs.map(tab => (
-          <Tab
-            key={tab}
-            label={tab}
-            isSelected={selected === tab.toLowerCase()}
-            onClick={() => setSelected(tab.toLowerCase())}
-          />
-        ))}
-      </div>
-    );
-  },
-};
-
-export const SingleTab: Story = {
-  args: {
-    label: 'Selected Tab',
-    isSelected: true,
-  },
-};
-
-export const UnselectedTab: Story = {
-  args: {
-    label: 'Unselected Tab',
-    isSelected: false,
-  },
-};
-
-// ─── Background Context ──────────────────────────────────────────────────────
-
-const BG_CONTEXTS: { bg: TabBackground; contrast: 'faint' | 'medium' | 'bold' | 'strong' }[] = [
-  { bg: 'faint',  contrast: 'faint'  },
-  { bg: 'medium', contrast: 'medium' },
-  { bg: 'bold',   contrast: 'bold'   },
-  { bg: 'strong', contrast: 'strong' },
-];
-
-export const BackgroundContext: Story = {
-  parameters: { layout: 'padded' },
-  render: () => {
-    const [selected, setSelected] = useState<Record<string, string>>({
-      faint: 'overview', medium: 'overview', bold: 'overview', strong: 'overview', dark: 'overview',
-    });
-    const tabs = ['Overview', 'Activity', 'Settings'];
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-        {BG_CONTEXTS.map(({ bg, contrast }) => (
-          <Surface key={bg} intent="brand" contrast={contrast} radius="md" style={{ padding: 16 }}>
-            <span style={{ fontSize: 10, fontFamily: 'monospace', opacity: 0.7, display: 'block', marginBottom: 8 }}>
-              background="{bg}"
-            </span>
-            <div style={{ display: 'flex', gap: 0 }}>
-              {tabs.map(tab => (
-                <Tab
-                  key={tab}
-                  label={tab}
-                  background={bg}
-                  isSelected={selected[bg] === tab.toLowerCase()}
-                  onClick={() => setSelected(s => ({ ...s, [bg]: tab.toLowerCase() }))}
-                />
-              ))}
-            </div>
-          </Surface>
-        ))}
-        <div style={{ background: '#1a1a2e', borderRadius: 8, padding: 16 }}>
-          <span style={{ fontSize: 10, fontFamily: 'monospace', color: 'rgba(255,255,255,0.5)', display: 'block', marginBottom: 8 }}>
-            background="always-dark"
-          </span>
-          <div style={{ display: 'flex', gap: 0 }}>
-            {tabs.map(tab => (
-              <Tab
-                key={tab}
-                label={tab}
-                background="always-dark"
-                isSelected={selected.dark === tab.toLowerCase()}
-                onClick={() => setSelected(s => ({ ...s, dark: tab.toLowerCase() }))}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  },
-};

package/src/components/Tab/Tab.tsx

@@ -1,41 +0,0 @@
-import React, { forwardRef } from 'react';
-import { cn } from '@/utils/cn';
-import { Text } from '@/components/Text';
-import styles from './Tab.module.css';
-
-export type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-
-export interface TabProps {
-  id?: string;
-  label: string;
-  isSelected?: boolean;
-  /** Parent surface context. Adjusts hover tokens and fg for tabs on colored backgrounds. */
-  background?: TabBackground;
-  onClick?: () => void;
-  className?: string;
-}
-
-export const Tab = forwardRef<HTMLButtonElement, TabProps>(
-  ({ id, label, isSelected = false, background, onClick, className }, ref) => {
-    const bgClass = background && background !== 'faint'
-      ? styles[background === 'always-dark' ? 'onAlwaysDark' : `on${background.charAt(0).toUpperCase() + background.slice(1)}`]
-      : undefined;
-    return (
-    <button
-      ref={ref}
-      id={id}
-      className={cn(styles.tab, isSelected && styles.tabSelected, bgClass, className)}
-      onClick={onClick}
-      type="button"
-      aria-selected={isSelected}
-      role="tab"
-    >
-      <Text variant={isSelected ? 'text-body-medium-emphasis' : 'text-body-medium'} as="span">
-        {label}
-      </Text>
-    </button>
-    );
-  }
-);
-
-Tab.displayName = 'Tab';

package/src/components/Tab/index.ts

@@ -1,2 +0,0 @@
-export { Tab } from './Tab';
-export type { TabProps, TabBackground } from './Tab';

package/src/components/TabGroup/TabGroup.module.css

@@ -1,26 +0,0 @@
-.tabGroup {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.tabsRow {
-  display: flex;
-  gap: var(--dimension-space-025);
-}
-
-.track {
-  height: 2px;
-  background-color: var(--color-border-secondary);
-  position: relative;
-}
-
-.indicator {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  background-color: var(--color-foreground-primary);
-  border-radius: 1px;
-  transition: transform var(--effect-motion-short-3), width var(--effect-motion-short-3);
-  will-change: transform, width;
-}