sdaia-ui 1.0.1

package/src/components/ColumnChart/ColumnChart.types.ts

@@ -0,0 +1,98 @@
+import type { HTMLAttributes } from 'react';
+
+export type ColumnChartVariant =
+  | 'Insight'
+  | 'Score'
+  | 'TrendMatrix'
+  | 'ValuePanel'
+  | 'InsightGrid'
+  | 'GaugeChart'
+  | 'PulseBox'
+  | 'MetricCell'
+  | 'DataCluster'
+  | 'ProgressMeter'
+  | 'Forecast'
+  | 'ScorePod'
+  | 'IndexTile';
+
+export interface ColumnChartDataPoint {
+  /** 0–100 percentage height (or absolute value scaled against maxValue). */
+  value: number;
+  /** Optional label rendered above each bar (Forecast variant). */
+  label?: string;
+}
+
+export interface ColumnChartMetric {
+  label: string;
+  value: string;
+  badge?: { type?: 'increase' | 'decrease'; value: string };
+  /** Left-border accent colour for MetricCell. */
+  color?: 'green' | 'lavender';
+}
+
+export interface ColumnChartLegendItem {
+  label: string;
+  color: 'green' | 'lavender';
+}
+
+export interface ColumnChartTab {
+  value: string;
+  label: string;
+}
+
+export interface ColumnChartProps extends HTMLAttributes<HTMLDivElement> {
+  /** Which variant layout to render. @default 'Insight' */
+  type?: ColumnChartVariant;
+  /** RTL/LTR direction. */
+  dir?: 'ltr' | 'rtl';
+
+  // ── Header ──────────────────────────────────────────────────────────────
+  /** Main card title (Insight, Score, DataCluster, Forecast, IndexTile). */
+  title?: string;
+  /** Subtitle / note below title. */
+  note?: string;
+  /** Date range text shown in the header badge (Insight, DataCluster). */
+  dateBadge?: string;
+
+  // ── Primary metric ───────────────────────────────────────────────────────
+  /** Indicator label. */
+  label?: string;
+  /** Metric value string (e.g. `'422.61'`). */
+  value?: string;
+  /** ChartBadge config for the primary metric. */
+  badge?: { type?: 'increase' | 'decrease'; value?: string };
+
+  // ── Second indicator (InsightGrid-style twins) ───────────────────────────
+  label2?: string;
+  value2?: string;
+  badge2?: { type?: 'increase' | 'decrease'; value?: string };
+
+  // ── Bar data ─────────────────────────────────────────────────────────────
+  /** Indicator 1 / green series. Values are percentages 0–100 (or absolute, scaled by maxValue). */
+  data?: ColumnChartDataPoint[];
+  /** Indicator 2 / lavender series. */
+  data2?: ColumnChartDataPoint[];
+  /** Maximum Y value used to compute bar heights in full-chart modes. @default 250 */
+  maxValue?: number;
+
+  // ── Axis labels (Insight, Score) ──────────────────────────────────────────
+  /** X-axis labels. */
+  xLabels?: string[];
+  /** Y-axis labels listed top→bottom. @default ['250','200','150','100','50','0'] */
+  yLabels?: string[];
+
+  // ── Score variant ────────────────────────────────────────────────────────
+  tabs?: ColumnChartTab[];
+  defaultTab?: string;
+  onTabChange?: (value: string) => void;
+  legend?: ColumnChartLegendItem[];
+
+  // ── Multi-metric variants ─────────────────────────────────────────────────
+  /** Two metrics for Score, ProgressMeter, ScorePod, IndexTile (bottom rows), MetricCell. */
+  metrics?: ColumnChartMetric[];
+
+  // ── Action button (Forecast, IndexTile) ──────────────────────────────────
+  onActionClick?: () => void;
+  /** Bottom indicator label for Forecast. */
+  actionLabel?: string;
+}

package/src/components/ColumnChart/ColumnChart.variants.ts

@@ -0,0 +1,117 @@
+import type {
+  ColumnChartDataPoint,
+  ColumnChartLegendItem,
+  ColumnChartMetric,
+  ColumnChartTab,
+} from './ColumnChart.types';
+
+// ── Series bar colours (same in light + dark — data-viz palette rule) ─────
+/** Colors/Primary-SA-Flag/600-primary → rgba(27,131,84,1) */
+export const GREEN_BAR_CLASS = 'bg-[rgba(27,131,84,1)]';
+/** Colors/Tertiary-Lavendar/400 → rgba(165,123,186,1) */
+export const LAVENDER_BAR_CLASS = 'bg-[rgba(165,123,186,1)]';
+
+// ── Full-chart grid (match LineChart / AreaChart) ────────────────────────────
+/** 5px dash, 4px gap (9px period) */
+export const GRID_LINE =
+  'w-full h-px shrink-0 bg-[repeating-linear-gradient(to_right,#d2d6db_0_5px,transparent_5px_9px)] dark:bg-[repeating-linear-gradient(to_right,#374151_0_5px,transparent_5px_9px)]';
+
+/** Bottom baseline (y = 0) — solid; pair chart layer with `pt-spacing-md pb-0` */
+export const GRID_LINE_BASELINE =
+  'w-full h-0 shrink-0 border-t border-solid border-[#d2d6db] dark:border-[#374151]';
+
+// ── Card root ─────────────────────────────────────────────────────────────
+export const CARD_BASE =
+  'bg-white dark:bg-[rgba(20,27,52,1)] rounded-radius-8 px-spacing-xl py-spacing-lg';
+
+// ── Default data sets ─────────────────────────────────────────────────────
+export const DEFAULT_FULL_DATA: ColumnChartDataPoint[] = [
+  { value: 150 },
+  { value: 200 },
+  { value: 75 },
+  { value: 150 },
+  { value: 225 },
+  { value: 175 },
+  { value: 50 },
+];
+export const DEFAULT_FULL_DATA2: ColumnChartDataPoint[] = [
+  { value: 100 },
+  { value: 100 },
+  { value: 100 },
+  { value: 100 },
+  { value: 100 },
+  { value: 100 },
+  { value: 100 },
+];
+export const DEFAULT_Y_LABELS: string[] = ['250', '200', '150', '100', '50', '0'];
+export const DEFAULT_X_LABELS: string[] = ['1', '2', '3', '4', '5', '6', '7'];
+export const DEFAULT_MAX_VALUE = 250;
+
+export const DEFAULT_FORECAST_DATA: ColumnChartDataPoint[] = [
+  { value: 100, label: '99' },
+  { value: 78, label: '78' },
+  { value: 88, label: '88' },
+  { value: 65, label: '65' },
+  { value: 92, label: '92' },
+];
+
+export const DEFAULT_INDEX_DATA: ColumnChartDataPoint[] = [
+  { value: 60 },
+  { value: 80 },
+  { value: 30 },
+  { value: 60 },
+  { value: 90 },
+  { value: 70 },
+  { value: 20 },
+];
+
+export const DEFAULT_SPARKLINE_DATA: ColumnChartDataPoint[] = [
+  { value: 40 },
+  { value: 70 },
+  { value: 55 },
+  { value: 80 },
+  { value: 45 },
+  { value: 65 },
+  { value: 75 },
+];
+
+// ── Score variant defaults ─────────────────────────────────────────────────
+export const DEFAULT_TABS: ColumnChartTab[] = [
+  { value: 'option-one', label: 'Option One' },
+  { value: 'option-two', label: 'Option Two' },
+];
+export const DEFAULT_LEGEND: ColumnChartLegendItem[] = [
+  { label: 'Legend', color: 'lavender' },
+  { label: 'Legend', color: 'green' },
+];
+export const DEFAULT_METRICS_SCORE: ColumnChartMetric[] = [
+  { label: 'Metric Name', value: '422.61', badge: { type: 'increase', value: '12%' } },
+  { label: 'Metric Name', value: '422.61', badge: { type: 'increase', value: '12%' } },
+];
+export const DEFAULT_METRICS_METRIC_CELL: ColumnChartMetric[] = [
+  { label: 'Indicator Name', value: '422.61', color: 'green' },
+  { label: 'Indicator Name', value: '422.61', color: 'lavender' },
+];
+export const DEFAULT_METRICS_INDEX: ColumnChartMetric[] = [
+  { label: 'Indicator Name', value: '422.61', badge: { type: 'increase', value: '12%' } },
+  { label: 'Indicator Name', value: '422.61', badge: { type: 'increase', value: '12%' } },
+];
+export const DEFAULT_METRICS_PROGRESS: ColumnChartMetric[] = [
+  { label: 'Indicator Name', value: '422.61', badge: { type: 'increase', value: '12%' } },
+  { label: 'Indicator Name', value: '422.61', badge: { type: 'decrease', value: '12%' } },
+];
+export const DEFAULT_METRICS_SCORE_POD: ColumnChartMetric[] = [
+  { label: 'Indicator Name', value: '422.61', badge: { type: 'increase', value: '12%' } },
+  { label: 'Indicator Name', value: '422.61', badge: { type: 'increase', value: '12%' } },
+];
+
+// ── Typography helpers ─────────────────────────────────────────────────────
+/** Secondary/paragraph text — light: rgba(108,115,127) · dark: rgba(156,163,175) */
+export const LBL_LG = 'text-text-lg font-normal text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+export const LBL_MD = 'text-text-md font-medium text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+export const LBL_SM = 'text-text-sm font-normal text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+/** Default/primary text — light: rgba(22,22,22) · dark: rgba(229,231,235) */
+export const VAL_DISPLAY_SM = 'text-display-sm font-bold text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+export const VAL_DISPLAY_XS = 'text-display-xs font-bold text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+export const VAL_TEXT_LG = 'text-text-lg font-bold text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+export const VAL_TEXT_XL_MEDIUM = 'text-text-xl font-medium text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';

package/src/components/ColumnChart/index.ts

@@ -0,0 +1,9 @@
+export { ColumnChart } from './ColumnChart';
+export type {
+  ColumnChartProps,
+  ColumnChartVariant,
+  ColumnChartDataPoint,
+  ColumnChartMetric,
+  ColumnChartLegendItem,
+  ColumnChartTab,
+} from './ColumnChart.types';

package/src/components/ComplexComposition/ComplexComposition.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Skeleton } from '../Skeleton';
+import { SkeletonAvatar } from '../SkeletonAvatar';
+import type { ComplexCompositionProps } from './ComplexComposition.types';
+import {
+  HEADER_LEFT_WIDTH,
+  HEADER_PILL_CLASS,
+  HEADER_RIGHT_GAP,
+  LINE_75,
+  LINE_FLEX,
+  RIGHT_PILL_GAP_20,
+  RIGHT_PILL_GAP_32,
+  ROOT_CLASS,
+  ROW_128_GAP,
+  ROW_160_GAP,
+} from './ComplexComposition.variants';
+
+export const ComplexComposition = forwardRef<HTMLDivElement, ComplexCompositionProps>(
+  function ComplexComposition({ className, ...rest }, ref) {
+    return (
+      <div ref={ref} data-slot="complex-composition" className={cn(ROOT_CLASS, className)} {...rest}>
+        <div data-slot="complex-composition-header" className="flex w-full items-center justify-between">
+          <div data-slot="complex-composition-header-left" className={cn('flex items-center', HEADER_LEFT_WIDTH)}>
+            <Skeleton data-slot="complex-composition-header-title" className={LINE_FLEX} />
+          </div>
+
+          <div
+            data-slot="complex-composition-header-right"
+            className={cn('flex items-center', HEADER_RIGHT_GAP)}
+          >
+            <SkeletonAvatar data-slot="complex-composition-header-avatar" size="sm" />
+            <Skeleton data-slot="complex-composition-header-pill" className={HEADER_PILL_CLASS} />
+          </div>
+        </div>
+
+        <div data-slot="complex-composition-row-128" className={cn('flex w-full items-center justify-center', ROW_128_GAP)}>
+          <div data-slot="complex-composition-row-128-left" className="flex flex-1 items-center gap-[40px]">
+            <Skeleton data-slot="complex-composition-row-128-line-1" className={LINE_FLEX} />
+            <Skeleton data-slot="complex-composition-row-128-line-2" className={LINE_FLEX} />
+          </div>
+          <Skeleton data-slot="complex-composition-row-128-line-3" className={LINE_FLEX} />
+        </div>
+
+        <div data-slot="complex-composition-row-160-1" className={cn('flex w-full items-center', ROW_160_GAP)}>
+          <div data-slot="complex-composition-row-160-1-left" className={cn('flex flex-1 items-center', RIGHT_PILL_GAP_20)}>
+            <SkeletonAvatar data-slot="complex-composition-row-160-1-avatar" size="sm" />
+            <Skeleton data-slot="complex-composition-row-160-1-line" className={LINE_FLEX} />
+          </div>
+          <div data-slot="complex-composition-row-160-1-right" className={cn('flex items-center', RIGHT_PILL_GAP_20)}>
+            <Skeleton data-slot="complex-composition-row-160-1-label" className={LINE_75} />
+            <Skeleton data-slot="complex-composition-row-160-1-pill" className={HEADER_PILL_CLASS} />
+          </div>
+        </div>
+
+        <div data-slot="complex-composition-row-160-2" className={cn('flex w-full items-center', ROW_160_GAP)}>
+          <div data-slot="complex-composition-row-160-2-left" className={cn('flex flex-1 items-center', RIGHT_PILL_GAP_20)}>
+            <SkeletonAvatar data-slot="complex-composition-row-160-2-avatar" size="sm" />
+            <Skeleton data-slot="complex-composition-row-160-2-line" className={LINE_FLEX} />
+          </div>
+          <div data-slot="complex-composition-row-160-2-right" className={cn('flex items-center', RIGHT_PILL_GAP_32)}>
+            <Skeleton data-slot="complex-composition-row-160-2-label" className={LINE_75} />
+            <Skeleton data-slot="complex-composition-row-160-2-pill" className={HEADER_PILL_CLASS} />
+          </div>
+        </div>
+
+        <div data-slot="complex-composition-row-160-3" className={cn('flex w-full items-center', ROW_160_GAP)}>
+          <div data-slot="complex-composition-row-160-3-left" className={cn('flex flex-1 items-center', RIGHT_PILL_GAP_20)}>
+            <SkeletonAvatar data-slot="complex-composition-row-160-3-avatar" size="sm" />
+            <Skeleton data-slot="complex-composition-row-160-3-line" className={LINE_FLEX} />
+          </div>
+          <div data-slot="complex-composition-row-160-3-right" className={cn('flex items-center', RIGHT_PILL_GAP_32)}>
+            <Skeleton data-slot="complex-composition-row-160-3-label" className={LINE_75} />
+            <Skeleton data-slot="complex-composition-row-160-3-pill" className={HEADER_PILL_CLASS} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/ComplexComposition/ComplexComposition.types.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+
+export interface ComplexCompositionProps extends HTMLAttributes<HTMLDivElement> {}

package/src/components/ComplexComposition/ComplexComposition.variants.ts

@@ -0,0 +1,14 @@
+export const ROOT_CLASS = 'flex w-[916px] flex-col items-start gap-spacing-5xl p-[10px]';
+
+export const HEADER_LEFT_WIDTH = 'w-[170px]';
+export const HEADER_RIGHT_GAP = 'gap-spacing-5xl';
+export const HEADER_PILL_CLASS = 'h-[32px] w-[89px] rounded-full';
+
+export const ROW_128_GAP = 'gap-spacing-11xl';
+export const ROW_160_GAP = 'gap-spacing-11xl';
+
+export const LINE_FLEX = 'h-[16px] flex-1';
+export const LINE_75 = 'h-[16px] w-[75px]';
+
+export const RIGHT_PILL_GAP_20 = 'gap-spacing-4xl';
+export const RIGHT_PILL_GAP_32 = 'gap-spacing-6xl';

package/src/components/ComplexComposition/index.ts

@@ -0,0 +1,2 @@
+export { ComplexComposition } from './ComplexComposition';
+export type { ComplexCompositionProps } from './ComplexComposition.types';

package/src/components/ContentSwitcher/ContentSwitcher.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import React, { forwardRef, useState } from 'react';
+import { cn } from '../../lib/cn';
+import {
+  SIZE_MAP,
+  CONTAINER_BG,
+  BORDER_STYLE,
+  ITEM_DIVIDER,
+  SELECTED_ITEM_BG,
+  SELECTED_TEXT,
+  UNSELECTED_TEXT,
+  HOVER_BG,
+  FOCUS_RING_SELECTED,
+  FOCUS_RING_UNSELECTED,
+} from './ContentSwitcher.variants';
+import type { ContentSwitcherProps } from './ContentSwitcher.types';
+
+export const ContentSwitcher = forwardRef<HTMLDivElement, ContentSwitcherProps>(
+  function ContentSwitcher(
+    {
+      items,
+      size = 'sm',
+      border = false,
+      dir: dirProp,
+      rtl = false,
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+    const sizeConfig = SIZE_MAP[size];
+    const lastIndex = items.length - 1;
+
+    const resolveItemKey = (index: number) =>
+      items[index]?.value ?? String(index);
+
+    const [internalValue, setInternalValue] = useState<string>(
+      () => defaultValue ?? resolveItemKey(0),
+    );
+    const selectedValue =
+      controlledValue !== undefined ? controlledValue : internalValue;
+
+    const handleSelect = (itemValue: string) => {
+      if (controlledValue === undefined) setInternalValue(itemValue);
+      onValueChange?.(itemValue);
+    };
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="content-switcher"
+        role="tablist"
+        className={cn(
+          'inline-flex items-stretch rounded-[8px]',
+          CONTAINER_BG,
+          border && BORDER_STYLE,
+          className,
+        )}
+        {...rest}
+      >
+        {items.map((item, index) => {
+          const itemValue = item.value ?? String(index);
+          const isSelected = itemValue === selectedValue;
+          const isFirst = index === 0;
+          const isLast = index === lastIndex;
+
+          return (
+            <button
+              key={itemValue}
+              type="button"
+              role="tab"
+              aria-selected={isSelected}
+              data-slot="content-switcher-tab"
+              data-selected={isSelected || undefined}
+              onClick={() => handleSelect(itemValue)}
+              className={cn(
+                'relative flex-1 min-w-0 inline-flex items-center justify-center whitespace-nowrap cursor-pointer select-none font-normal',
+                'motion-feedback',
+                'active:scale-[0.97]',
+                sizeConfig.px,
+                sizeConfig.py,
+                sizeConfig.text,
+                isFirst && 'rounded-s-[8px]',
+                isLast && 'rounded-e-[8px]',
+                !isFirst && ITEM_DIVIDER,
+                isSelected
+                  ? cn(SELECTED_ITEM_BG, SELECTED_TEXT, FOCUS_RING_SELECTED)
+                  : cn(UNSELECTED_TEXT, HOVER_BG, FOCUS_RING_UNSELECTED),
+              )}
+            >
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+    );
+  },
+);

package/src/components/ContentSwitcher/ContentSwitcher.types.ts

@@ -0,0 +1,28 @@
+export type ContentSwitcherSize = 'sm' | 'md' | 'lg';
+
+export interface ContentSwitcherItem {
+  /** Label displayed in the switcher tab */
+  label: string;
+  /** Value identifier — used for controlled/uncontrolled selection */
+  value?: string;
+}
+
+export interface ContentSwitcherProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Array of switcher items (2–5) */
+  items: ContentSwitcherItem[];
+  /** Size of the switcher */
+  size?: ContentSwitcherSize;
+  /** Show outer border */
+  border?: boolean;
+  /** Layout direction */
+  dir?: 'ltr' | 'rtl';
+  /** @deprecated Use dir="rtl" instead */
+  rtl?: boolean;
+  /** Controlled selected value */
+  value?: string;
+  /** Initial selected value (uncontrolled) — defaults to first item */
+  defaultValue?: string;
+  /** Called with the selected item's value when selection changes */
+  onValueChange?: (value: string) => void;
+}

package/src/components/ContentSwitcher/ContentSwitcher.variants.ts

@@ -0,0 +1,70 @@
+import type { ContentSwitcherSize } from './ContentSwitcher.types';
+
+/* ── Size configuration ───────────────────────────────────────── */
+export interface ContentSwitcherSizeConfig {
+  px: string;
+  py: string;
+  text: string;
+}
+
+export const SIZE_MAP: Record<ContentSwitcherSize, ContentSwitcherSizeConfig> = {
+  sm: {
+    px: 'px-spacing-xl',
+    py: 'py-spacing-xs',
+    text: 'text-text-md',
+  },
+  md: {
+    px: 'px-spacing-2xl',
+    py: 'py-spacing-sm',
+    text: 'text-text-lg',
+  },
+  lg: {
+    px: 'px-spacing-3xl',
+    py: 'py-spacing-md',
+    text: 'text-text-xl',
+  },
+};
+
+/* ── Color tokens ─────────────────────────────────────────────── */
+
+/** Container background — token: button/button-background-neutral-default */
+export const CONTAINER_BG = 'bg-[rgba(243,244,246,1)] dark:bg-[rgba(255,255,255,0.1)]';
+
+/** Outer border when border={true} — token: border/border-neutral-primary */
+export const BORDER_STYLE =
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(255,255,255,0.2)]';
+
+/** 0.5px divider on the start edge of every non-first item */
+export const ITEM_DIVIDER =
+  'border-s-[0.5px] border-solid border-[rgba(210,214,219,1)] dark:border-[rgba(255,255,255,0.2)]';
+
+/** Selected item fill — token: button/button-background-black-default (#0d121c) */
+export const SELECTED_ITEM_BG = 'bg-[#0d121c] dark:bg-[rgba(27,131,84,1)]';
+
+/** Text on the selected tab */
+export const SELECTED_TEXT = 'text-white';
+
+/** Text on unselected tabs — token: text/text-default → #161616 */
+export const UNSELECTED_TEXT = 'text-[#161616] dark:text-[rgba(255,255,255,0.6)]';
+
+/** Hover overlay on unselected tabs */
+export const HOVER_BG =
+  'hover:bg-[rgba(0,0,0,0.05)] dark:hover:bg-[rgba(255,255,255,0.06)]';
+
+/** Focus ring for unselected tabs: 2px inset ring on neutral background, no bg/text override */
+export const FOCUS_RING_UNSELECTED = [
+  'focus-visible:outline-none',
+  'focus-visible:ring-2',
+  'focus-visible:ring-inset',
+  'focus-visible:ring-[#0d121c]',
+  'dark:focus-visible:ring-[rgba(255,255,255,0.9)]',
+].join(' ');
+
+/** Focus ring for selected tabs: 2px inset white ring on dark selected background */
+export const FOCUS_RING_SELECTED = [
+  'focus-visible:outline-none',
+  'focus-visible:ring-2',
+  'focus-visible:ring-inset',
+  'focus-visible:ring-white',
+  'dark:focus-visible:ring-[rgba(255,255,255,0.9)]',
+].join(' ');

package/src/components/ContentSwitcher/index.ts

@@ -0,0 +1,6 @@
+export { ContentSwitcher } from './ContentSwitcher';
+export type {
+  ContentSwitcherProps,
+  ContentSwitcherSize,
+  ContentSwitcherItem,
+} from './ContentSwitcher.types';

package/src/components/ContentSwitcherItem/ContentSwitcherItem.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { ContentSwitcherItemProps } from './ContentSwitcherItem.types';
+import {
+  SIZE_MAP,
+  STANDALONE_CLASSES,
+  PLACEMENT_MAP,
+  DEFAULT_COLORS,
+  HOVER_COLORS,
+  SELECTED_COLORS,
+  ACTIVE_SCALE,
+  FOCUS_RING,
+} from './ContentSwitcherItem.variants';
+
+export const ContentSwitcherItem = forwardRef<HTMLButtonElement, ContentSwitcherItemProps>(
+  function ContentSwitcherItem(
+    {
+      size = 'md',
+      placement,
+      selected = false,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const sizeConfig = SIZE_MAP[size];
+    const placementClasses = placement ? PLACEMENT_MAP[placement] : STANDALONE_CLASSES;
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-slot="content-switcher-item"
+        data-selected={selected || undefined}
+        className={cn(
+          'inline-flex items-center justify-center font-[400] whitespace-nowrap cursor-pointer select-none',
+          'motion-feedback',
+          ACTIVE_SCALE,
+          sizeConfig.text,
+          sizeConfig.padding,
+          placementClasses,
+          selected ? SELECTED_COLORS : DEFAULT_COLORS,
+          !selected && HOVER_COLORS,
+          FOCUS_RING,
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  },
+);

package/src/components/ContentSwitcherItem/ContentSwitcherItem.types.ts

@@ -0,0 +1,14 @@
+export type ContentSwitcherItemSize = 'sm' | 'md' | 'lg';
+export type ContentSwitcherItemPlacement = 'start' | 'center' | 'end';
+
+export interface ContentSwitcherItemProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Size of the switcher item */
+  size?: ContentSwitcherItemSize;
+  /** Placement controls border-radius and side borders */
+  placement?: ContentSwitcherItemPlacement;
+  /** Whether the item is currently selected */
+  selected?: boolean;
+  /** Label text */
+  children: React.ReactNode;
+}