sdaia-ui 1.0.1

package/src/components/BarChart/index.ts

@@ -0,0 +1,2 @@
+export { BarChart } from './BarChart';
+export type { BarChartProps, BarChartSeriesCount, BarChartDataPoint } from './BarChart.types';

package/src/components/BarGroup/BarGroup.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { BarGroupProps } from './BarGroup.types';
+import {
+  BAR_COLORS,
+  DEFAULT_HEIGHT,
+  CONTAINER_BASE,
+  containerWidth,
+} from './BarGroup.variants';
+
+// ─── Internal BarItem ──────────────────────────────────────────────────────────
+
+interface BarItemProps {
+  /** Exact CSS color string for the bar fill. */
+  color: string;
+  /** Fill height as a percentage of the container height, 0–100. */
+  percent: number;
+}
+
+/**
+ * A single vertical bar. The container occupies the full height of the group;
+ * the coloured fill grows upward from the bottom via `absolute bottom-0`.
+ * Top corners are rounded (Radius/radius-2 = 2px) per Figma spec.
+ */
+function BarItem({ color, percent }: BarItemProps) {
+  const pct = Math.min(100, Math.max(0, percent));
+  return (
+    <div className="relative flex-[1_0_0] h-full max-w-[24px] min-w-[1px]">
+      <div
+        data-slot="bar"
+        className="absolute bottom-0 inset-x-0 rounded-tl-[2px] rounded-tr-[2px]"
+        style={{ height: `${pct}%`, backgroundColor: color }}
+      />
+    </div>
+  );
+}
+
+// ─── BarGroup ──────────────────────────────────────────────────────────────────
+
+/**
+ * BarGroup
+ *
+ * A single grouped bar-chart column showing 1–3 coloured series bars
+ * side by side, bottom-aligned.  Designed to be composed alongside axis
+ * labels and tick marks into a full grouped bar chart.
+ *
+ * Traced from Figma node 5423:77450.
+ *
+ * Bar colours (data-viz palette — same in light and dark mode):
+ *   Series 1  →  blue     rgba(21,112,239,1)   Chart/chart-series-1
+ *   Series 2  →  purple   rgba(122,90,248,1)   Chart/chart-series-2
+ *   Series 3  →  orange   rgba(220,104,3,1)    Chart/chart-series-3
+ *
+ * RTL: pass `rtl` — the bar order is reversed so Series 3 is rendered first
+ *   (matches Figma RTL frames exactly).
+ *
+ * Dark mode: zero extra config required — data-viz colours don't invert.
+ *
+ * @example
+ * // Single group at 70 % fill, all three series, LTR
+ * <BarGroup seriesCount={3} series1={70} series2={70} series3={70} />
+ *
+ * // Varying heights
+ * <BarGroup seriesCount={3} series1={90} series2={50} series3={30} />
+ *
+ * // RTL
+ * <BarGroup seriesCount={3} series1={70} series2={60} series3={80} rtl />
+ */
+export const BarGroup = forwardRef<HTMLDivElement, BarGroupProps>(
+  function BarGroup(
+    {
+      seriesCount = 3,
+      series1 = 70,
+      series2 = 70,
+      series3 = 70,
+      height = DEFAULT_HEIGHT,
+      dir: dirProp,
+      rtl = false,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+    const isRtl = dir === 'rtl';
+
+    // Build ordered list of bars for the requested number of series
+    const bars: BarItemProps[] = [
+      { color: BAR_COLORS.series1, percent: series1 },
+      ...(seriesCount >= 2 ? [{ color: BAR_COLORS.series2, percent: series2 }] : []),
+      ...(seriesCount >= 3 ? [{ color: BAR_COLORS.series3, percent: series3 }] : []),
+    ];
+
+    // RTL reverses the visual order (Series 3 first), matching Figma frames
+    const displayBars = isRtl ? [...bars].reverse() : bars;
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="bar-group"
+        className={cn(CONTAINER_BASE, className)}
+        style={{
+          height: `${height}px`,
+          width: `${containerWidth(seriesCount)}px`,
+        }}
+        {...props}
+      >
+        {displayBars.map((bar, i) => (
+          <BarItem key={i} color={bar.color} percent={bar.percent} />
+        ))}
+      </div>
+    );
+  },
+);
+
+BarGroup.displayName = 'BarGroup';

package/src/components/BarGroup/BarGroup.types.ts

@@ -0,0 +1,50 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Number of series (bars) to render in the group.
+ * 1 = Series 1 only.
+ * 2 = Series 1 + Series 2.
+ * 3 = all three series.
+ */
+export type BarGroupSeriesCount = 1 | 2 | 3;
+
+export interface BarGroupProps extends HTMLAttributes<HTMLDivElement> {
+  /** Layout direction — controls both `dir` attribute and bar render order. */
+  dir?: 'ltr' | 'rtl';
+
+  /**
+   * How many series bars to show side by side.
+   * @default 3
+   */
+  seriesCount?: BarGroupSeriesCount;
+
+  /**
+   * Fill height for Series 1 (green), 0–100.
+   * @default 70
+   */
+  series1?: number;
+
+  /**
+   * Fill height for Series 2 (lavender), 0–100.
+   * @default 70
+   */
+  series2?: number;
+
+  /**
+   * Fill height for Series 3 (gold), 0–100.
+   * @default 70
+   */
+  series3?: number;
+
+  /**
+   * Container height in px — the full axis height of the bar chart column.
+   * @default 293
+   */
+  height?: number;
+
+  /**
+   * @deprecated Use `dir="rtl"` instead.
+   * @default false
+   */
+  rtl?: boolean;
+}

package/src/components/BarGroup/BarGroup.variants.ts

@@ -0,0 +1,76 @@
+/**
+ * BarGroup.variants.ts
+ *
+ * All sizing, colour, and layout constants for BarGroup.
+ * Traced from Figma node 5423:77450.
+ *
+ * ── Color tokens (get_variable_defs) ──────────────────────────────────────────
+ *   Chart/chart-series-1  →  rgba(21,112,239,1)   Series 1 (blue)    #1570ef
+ *   Chart/chart-series-2  →  rgba(122,90,248,1)   Series 2 (purple)  #7a5af8
+ *   Chart/chart-series-3  →  rgba(220,104,3,1)    Series 3 (orange)  #dc6803
+ *
+ *   Data-visualisation colours: identical in light mode and dark mode.
+ *   No dark-mode Figma frames exist for this component.
+ *
+ * ── Radius tokens ─────────────────────────────────────────────────────────────
+ *   Radius/radius-2  →  2px  → rounded-tl-[2px] rounded-tr-[2px] on bar fill
+ *
+ * ── Spacing tokens ────────────────────────────────────────────────────────────
+ *   Global/spacing-xs  →  4px  → gap-spacing-xs  (between bars inside a group)
+ *
+ * ── Dimensions (Figma pixel values) ──────────────────────────────────────────
+ *   Bar width          24px  (each individual bar)
+ *   Bar gap            4px   (spacing-xs)
+ *   Default height     293px (full axis height)
+ *
+ *   Container widths derived from seriesCount:
+ *     1 bar  →  1×24 + 0×4 = 24px
+ *     2 bars →  2×24 + 1×4 = 52px
+ *     3 bars →  3×24 + 2×4 = 80px
+ */
+
+// ─── Bar fill colours ──────────────────────────────────────────────────────────
+// Static brand / data-viz palette — no light/dark swap required.
+
+export const BAR_COLORS = {
+  /** Series 1 — Chart/chart-series-1 (#1570ef) */
+  series1: 'rgba(21,112,239,1)',
+  /** Series 2 — Chart/chart-series-2 (#7a5af8) */
+  series2: 'rgba(122,90,248,1)',
+  /** Series 3 — Chart/chart-series-3 (#dc6803) */
+  series3: 'rgba(220,104,3,1)',
+} as const;
+
+// ─── Dimensions ───────────────────────────────────────────────────────────────
+
+/** Width in px of a single bar (max-w). */
+export const BAR_WIDTH = 24;
+
+/** Gap in px between bars (Global/spacing-xs). Applied via gap-spacing-xs. */
+export const BAR_GAP = 4;
+
+/** Default container height in px (Figma fixed value). */
+export const DEFAULT_HEIGHT = 293;
+
+// ─── Container ────────────────────────────────────────────────────────────────
+
+/**
+ * Root container classes.
+ * flex items-end — bars are bottom-aligned (they grow upward).
+ * justify-center — centre-aligns the bar group within any parent container.
+ * gap-spacing-xs  — 4px gap between bars (Global/spacing-xs).
+ */
+export const CONTAINER_BASE =
+  'flex items-end justify-center gap-spacing-xs';
+
+// ─── Computed width helper ─────────────────────────────────────────────────────
+
+/**
+ * Returns the container width in px for a given number of series bars.
+ *   1 bar  →  24px
+ *   2 bars →  52px
+ *   3 bars →  80px
+ */
+export function containerWidth(seriesCount: number): number {
+  return seriesCount * BAR_WIDTH + Math.max(0, seriesCount - 1) * BAR_GAP;
+}

package/src/components/BarGroup/index.ts

@@ -0,0 +1,2 @@
+export { BarGroup } from './BarGroup';
+export type { BarGroupProps, BarGroupSeriesCount } from './BarGroup.types';

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,137 @@
+import { forwardRef, Fragment } from 'react';
+import { cn } from '../../lib/cn';
+import type { BreadcrumbProps } from './Breadcrumb.types';
+
+const MUTED = 'text-[rgba(157,164,174,1)] dark:text-[rgba(107,114,128,1)]';
+const CURRENT = 'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]';
+
+/**
+ * Default home icon — a simple house outline.
+ * Kept inline so the component works without external SVG imports.
+ */
+function DefaultHomeIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" aria-hidden="true">
+      <path
+        fill="currentColor"
+        d="M7.998.833c.578 0 1.094.185 1.65.498.54.303 1.16.75 1.938 1.313l1.006.727c.624.451 1.123.812 1.5 1.146.388.344.678.688.863 1.12.184.433.228.877.204 1.388-.024.494-.116 1.09-.23 1.833l-.21 1.368c-.162 1.055-.291 1.896-.481 2.551-.197.678-.473 1.215-.967 1.626-.492.41-1.079.592-1.795.679-.697.085-1.575.085-2.685.085H7.206c-1.11 0-1.989 0-2.685-.085-.716-.087-1.303-.27-1.795-.679-.494-.41-.77-.948-.967-1.626-.19-.655-.319-1.496-.481-2.551l-.21-1.368C.954 8.115.862 7.52.838 7.025c-.024-.511.02-.955.204-1.388.185-.432.475-.776.864-1.12.376-.334.875-.695 1.499-1.146l1.007-.727c.777-.563 1.396-1.01 1.936-1.313.557-.313 1.073-.498 1.65-.498Zm0 1c-.344 0-.688.105-1.16.37-.485.272-1.057.684-1.866 1.269l-.96.694c-.65.47-1.108.802-1.442 1.099-.327.29-.502.518-.608.764-.104.246-.145.524-.125.948.021.435.104.98.223 1.756l.201 1.306c.169 1.099.29 1.875.46 2.46.164.57.36.9.645 1.136.286.238.658.38 1.275.455.63.076 1.448.077 2.599.077h1.517c1.151 0 1.97 0 2.599-.077.617-.075.989-.217 1.275-.455.285-.237.482-.566.647-1.136.17-.585.289-1.361.458-2.46l.201-1.306c.12-.776.202-1.32.223-1.756.02-.424-.02-.702-.125-.948-.106-.246-.281-.475-.608-.764-.334-.297-.792-.629-1.442-1.099l-.96-.694c-.809-.585-1.381-.997-1.865-1.269-.473-.265-.817-.37-1.162-.37ZM9.332 11.5a.5.5 0 0 1 0 1H6.665a.5.5 0 0 1 0-1h2.667Z"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Default chevron icon — a right-pointing arrow.
+ */
+function DefaultChevronIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" aria-hidden="true">
+      <path
+        fill="currentColor"
+        d="M5.704 11.597a34.365 34.365 0 0 0 1.969-1.58C8.165 9.59 8.646 9.14 9 8.74c.178-.201.312-.377.4-.523.082-.136.1-.217.1-.217s-.018-.079-.1-.215A3.792 3.792 0 0 0 9 7.26c-.353-.4-.834-.85-1.328-1.279a34.322 34.322 0 0 0-1.968-1.579.5.5 0 0 1 .593-.806l.001.002a35.316 35.316 0 0 1 2.03 1.628c.506.44 1.025.924 1.422 1.372.197.224.375.45.506.668.123.204.244.462.244.733 0 .271-.12.529-.244.733a4.759 4.759 0 0 1-.506.668c-.397.449-.916.932-1.422 1.372a35.29 35.29 0 0 1-1.395 1.144c-.19.148-.522.4-.635.484l-.001.001a.5.5 0 0 1-.593-.805Z"
+      />
+    </svg>
+  );
+}
+
+/** Maximum visible items before collapsing middle links. */
+const COLLAPSE_THRESHOLD = 4;
+
+export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(
+  {
+    items,
+    divider = 'chevron',
+    homeIcon,
+    chevronIcon,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const shouldCollapse = items.length > COLLAPSE_THRESHOLD;
+
+  // When collapsed, show: home > ... > second-to-last > last
+  const visibleItems = shouldCollapse
+    ? [items[items.length - 2], items[items.length - 1]]
+    : items;
+
+  const home = homeIcon ?? <DefaultHomeIcon />;
+  const chevron = chevronIcon ?? <DefaultChevronIcon />;
+
+  const renderDivider = (key: string) => {
+    if (divider === 'slash') {
+      return (
+        <span key={key} className={cn(MUTED, 'text-text-sm leading-[20px] font-[400] select-none')} aria-hidden="true">
+          /
+        </span>
+      );
+    }
+    return (
+      <span key={key} className={cn(MUTED, 'flex-shrink-0 rtl:rotate-180')} aria-hidden="true">
+        {chevron}
+      </span>
+    );
+  };
+
+  return (
+    <nav
+      ref={ref}
+      data-slot="breadcrumb"
+      aria-label="Breadcrumb"
+      className={cn('inline-flex items-center gap-spacing-xs', className)}
+      {...rest}
+    >
+      {/* Home icon */}
+      <span data-slot="breadcrumb-home" className={cn(MUTED, 'flex-shrink-0')}>
+        {home}
+      </span>
+
+      {/* Divider after home */}
+      {renderDivider('div-home')}
+
+      {/* Ellipsis when collapsed */}
+      {shouldCollapse && (
+        <>
+          <span className={cn(MUTED, 'text-text-sm leading-[20px] font-[400] select-none')}>
+            ...
+          </span>
+          {renderDivider('div-ellipsis')}
+        </>
+      )}
+
+      {/* Visible items */}
+      {visibleItems.map((item, index) => {
+        const isLast = index === visibleItems.length - 1;
+        return (
+          <Fragment key={`item-${item.label}-${index}`}>
+            {index > 0 && renderDivider(`div-${index}`)}
+            {item.href && !isLast ? (
+              <a
+                href={item.href}
+                data-slot="breadcrumb-link"
+                className={cn(
+                  'text-text-sm leading-[20px] font-[400] whitespace-nowrap',
+                  MUTED,
+                  'hover:underline',
+                )}
+              >
+                {item.label}
+              </a>
+            ) : (
+              <span
+                data-slot={isLast ? 'breadcrumb-current' : 'breadcrumb-link'}
+                aria-current={isLast ? 'page' : undefined}
+                className={cn(
+                  'text-text-sm leading-[20px] whitespace-nowrap',
+                  isLast ? cn('font-[500]', CURRENT) : cn('font-[400]', MUTED),
+                )}
+              >
+                {item.label}
+              </span>
+            )}
+          </Fragment>
+        );
+      })}
+    </nav>
+  );
+});

package/src/components/Breadcrumb/Breadcrumb.types.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type BreadcrumbDivider = 'chevron' | 'slash';
+
+export interface BreadcrumbItem {
+  /** Display label */
+  label: string;
+  /** Optional href for the link */
+  href?: string;
+}
+
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+  /** Array of breadcrumb items (home icon is always prepended) */
+  items: BreadcrumbItem[];
+  /** Divider style between items */
+  divider?: BreadcrumbDivider;
+  /** Custom home icon */
+  homeIcon?: ReactNode;
+  /** Custom chevron icon (used when divider="chevron") */
+  chevronIcon?: ReactNode;
+}

package/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
+import { cn } from '../../lib/cn';
+import type { BreadcrumbItemProps } from './BreadcrumbItem.types';
+import {
+  ITEM_BASE,
+  TEXT_MUTED,
+  TEXT_CURRENT,
+  HOVER_TEXT,
+  FOCUS_RING,
+  ACTIVE_BG,
+  DROPDOWN_TRIGGER,
+  DROPDOWN_PANEL,
+  DROPDOWN_ITEM,
+} from './BreadcrumbItem.variants';
+
+/* ── Default home icon ───────────────────────────────────────────────────── */
+/**
+ * House outline icon, 16×16. Uses `currentColor` so it inherits the item's
+ * text color class in every state — no separate color assets needed.
+ */
+function HomeIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={16}
+      height={16}
+      fill="none"
+      aria-hidden="true"
+      className="shrink-0"
+    >
+      <path
+        fill="currentColor"
+        d="M7.998.833c.578 0 1.094.185 1.65.498.54.303 1.16.75 1.938 1.313l1.006.727c.624.451 1.123.812 1.5 1.146.388.344.678.688.863 1.12.184.433.228.877.204 1.388-.024.494-.116 1.09-.23 1.833l-.21 1.368c-.162 1.055-.291 1.896-.481 2.551-.197.678-.473 1.215-.967 1.626-.492.41-1.079.592-1.795.679-.697.085-1.575.085-2.685.085H7.206c-1.11 0-1.989 0-2.685-.085-.716-.087-1.303-.27-1.795-.679-.494-.41-.77-.948-.967-1.626-.19-.655-.319-1.496-.481-2.551l-.21-1.368C.954 8.115.862 7.52.838 7.025c-.024-.511.02-.955.204-1.388.185-.432.475-.776.864-1.12.376-.334.875-.695 1.499-1.146l1.007-.727c.777-.563 1.396-1.01 1.936-1.313.557-.313 1.073-.498 1.65-.498Zm0 1c-.344 0-.688.105-1.16.37-.485.272-1.057.684-1.866 1.269l-.96.694c-.65.47-1.108.802-1.442 1.099-.327.29-.502.518-.608.764-.104.246-.145.524-.125.948.021.435.104.98.223 1.756l.201 1.306c.169 1.099.29 1.875.46 2.46.164.57.36.9.645 1.136.286.238.658.38 1.275.455.63.076 1.448.077 2.599.077h1.517c1.151 0 1.97 0 2.599-.077.617-.075.989-.217 1.275-.455.285-.237.482-.566.647-1.136.17-.585.289-1.361.458-2.46l.201-1.306c.12-.776.202-1.32.223-1.756.02-.424-.02-.702-.125-.948-.106-.246-.281-.475-.608-.764-.334-.297-.792-.629-1.442-1.099l-.96-.694c-.809-.585-1.381-.997-1.865-1.269-.473-.265-.817-.37-1.162-.37ZM9.332 11.5a.5.5 0 0 1 0 1H6.665a.5.5 0 0 1 0-1h2.667Z"
+      />
+    </svg>
+  );
+}
+
+/* ── BreadcrumbItem ──────────────────────────────────────────────────────── */
+
+/**
+ * BreadcrumbItem
+ *
+ * A single node in a breadcrumb trail. Supports three layout types, four
+ * CSS-driven interaction states, `current` page marking, and a `dropdown`
+ * mode for collapsed overflow items.
+ *
+ * ── Types ─────────────────────────────────────────────────────────────────
+ *   `icon`          — home icon only  (default; used for the root/home slot)
+ *   `text`          — text label only
+ *   `icon-and-text` — home icon + text label
+ *
+ * ── States (CSS pseudo-classes, not a prop) ────────────────────────────────
+ *   Default  → muted gray (#9da4ae) or neutral dark (#384250) when current
+ *   Hovered  → :hover   — secondary-paragraph gray (#6c737f)
+ *   Focused  → :focus-visible — 2px green ring rgba(27,131,84,0.7)
+ *   Selected → :active  — white bg pill (px-spacing-xs py-spacing-xxs)
+ *
+ * ── Current ───────────────────────────────────────────────────────────────
+ *   `current=true` marks the active page; renders as a `<span>` (not a link),
+ *   uses neutral-dark text, and sets `aria-current="page"`.
+ *
+ * ── Dropdown ──────────────────────────────────────────────────────────────
+ *   `dropdown=true` renders a "..." trigger that opens a panel of overflow
+ *   breadcrumb links. Panel closes on outside click or Escape.
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────
+ *   The component is direction-aware. In a `dir="rtl"` context the icon and
+ *   text swap positions naturally via the `flex-row-reverse` that is applied
+ *   when the logical direction is RTL — or you can wrap with `dir="rtl"`.
+ *   The dropdown panel anchors to `start-0` so it stays aligned in RTL.
+ *
+ * @example
+ * <BreadcrumbItem type="icon" href="/" />
+ * <BreadcrumbItem type="text" label="Products" href="/products" />
+ * <BreadcrumbItem type="icon-and-text" label="Home" href="/" />
+ * <BreadcrumbItem type="text" label="Current Page" current />
+ * <BreadcrumbItem
+ *   dropdown
+ *   dropdownItems={[
+ *     { label: 'Category', href: '/category' },
+ *     { label: 'Sub-category', href: '/sub' },
+ *   ]}
+ * />
+ */
+export const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>(
+  function BreadcrumbItem(
+    {
+      type = 'icon',
+      current = false,
+      label = 'Link',
+      icon,
+      href,
+      dropdown = false,
+      dropdownItems = [],
+      onClick,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* ── Dropdown open state ──────────────────────────────────────── */
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const wrapperRef = useRef<HTMLElement>(null);
+
+    const closeDropdown = useCallback(() => setDropdownOpen(false), []);
+
+    /* Close on outside click or Escape */
+    useEffect(() => {
+      if (!dropdownOpen) return;
+
+      const handlePointerDown = (e: PointerEvent) => {
+        if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+          closeDropdown();
+        }
+      };
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') closeDropdown();
+      };
+
+      document.addEventListener('pointerdown', handlePointerDown);
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('pointerdown', handlePointerDown);
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }, [dropdownOpen, closeDropdown]);
+
+    /* Merge forwarded ref with internal wrapperRef */
+    const setRef = (el: HTMLElement | null) => {
+      (wrapperRef as React.MutableRefObject<HTMLElement | null>).current = el;
+      if (typeof ref === 'function') ref(el);
+      else if (ref) (ref as React.MutableRefObject<HTMLElement | null>).current = el;
+    };
+
+    /* ── Resolved icon ────────────────────────────────────────────── */
+    const resolvedIcon = icon ?? <HomeIcon />;
+
+    /* ── Inner content ────────────────────────────────────────────── */
+    const iconNode = (type === 'icon' || type === 'icon-and-text') && (
+      <span className="shrink-0 size-[16px] flex items-center justify-center">
+        {resolvedIcon}
+      </span>
+    );
+
+    const textNode = (type === 'text' || type === 'icon-and-text') && (
+      <span>{label}</span>
+    );
+
+    /* ── Color classes ────────────────────────────────────────────── */
+    const colorClass = current ? TEXT_CURRENT : TEXT_MUTED;
+
+    /* ── Dropdown variant ─────────────────────────────────────────── */
+    if (dropdown) {
+      return (
+        <span
+          ref={setRef}
+          data-slot="breadcrumb-item"
+          data-dropdown="true"
+          className={cn('relative inline-flex', className)}
+          {...(rest as React.HTMLAttributes<HTMLSpanElement>)}
+        >
+          <button
+            type="button"
+            aria-haspopup="menu"
+            aria-expanded={dropdownOpen}
+            onClick={() => setDropdownOpen((v) => !v)}
+            className={DROPDOWN_TRIGGER}
+          >
+            …
+          </button>
+
+          {dropdownOpen && dropdownItems.length > 0 && (
+            <div
+              data-slot="breadcrumb-dropdown"
+              role="menu"
+              className={DROPDOWN_PANEL}
+            >
+              {dropdownItems.map((item, i) =>
+                item.href ? (
+                  <a
+                    key={i}
+                    href={item.href}
+                    role="menuitem"
+                    onClick={() => {
+                      item.onClick?.();
+                      closeDropdown();
+                    }}
+                    className={DROPDOWN_ITEM}
+                  >
+                    {item.label}
+                  </a>
+                ) : (
+                  <button
+                    key={i}
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      item.onClick?.();
+                      closeDropdown();
+                    }}
+                    className={DROPDOWN_ITEM}
+                  >
+                    {item.label}
+                  </button>
+                ),
+              )}
+            </div>
+          )}
+        </span>
+      );
+    }
+
+    /* ── Current page — non-interactive span ──────────────────────── */
+    if (current) {
+      return (
+        <span
+          ref={setRef as React.Ref<HTMLSpanElement>}
+          data-slot="breadcrumb-item"
+          data-current="true"
+          aria-current="page"
+          className={cn(ITEM_BASE, TEXT_CURRENT, className)}
+          {...(rest as React.HTMLAttributes<HTMLSpanElement>)}
+        >
+          {iconNode}
+          {textNode}
+        </span>
+      );
+    }
+
+    /* ── Link item — <a> when href is provided ────────────────────── */
+    if (href) {
+      return (
+        <a
+          ref={setRef as React.Ref<HTMLAnchorElement>}
+          href={href}
+          data-slot="breadcrumb-item"
+          onClick={onClick}
+          className={cn(ITEM_BASE, colorClass, HOVER_TEXT, FOCUS_RING, ACTIVE_BG, className)}
+          {...(rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+        >
+          {iconNode}
+          {textNode}
+        </a>
+      );
+    }
+
+    /* ── Button item — <button> when no href ──────────────────────── */
+    return (
+      <button
+        ref={setRef as React.Ref<HTMLButtonElement>}
+        type="button"
+        data-slot="breadcrumb-item"
+        onClick={onClick}
+        className={cn(ITEM_BASE, colorClass, HOVER_TEXT, FOCUS_RING, ACTIVE_BG, className)}
+        {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+      >
+        {iconNode}
+        {textNode}
+      </button>
+    );
+  },
+);
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';