sdaia-ui 1.0.1 → 1.0.2

package/src/components/NavHeaderMenuButton/NavHeaderMenuButton.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import { HamburgerIcon, XIcon } from '../../icons/IconFactory';
-import type { NavHeaderMenuButtonProps } from './NavHeaderMenuButton.types';
-import { ROOT_BASE, ICON_SLOT } from './NavHeaderMenuButton.variants';
-
-/**
- * NavHeaderMenuButton — the 40×40 icon-only control that opens and
- * closes the mobile navigation drawer in the app header.
- *
- * States — driven entirely by CSS pseudo-classes (no prop coupling):
- *   - default       → transparent background
- *   - hover         → neutral-hovered background
- *   - active/press  → neutral-pressed background
- *   - focus-visible → 2px solid black border (inset, no layout shift)
- *   - disabled      → 50% opacity, hover/active neutralised
- *
- * The `opened` prop only controls which glyph renders (hamburger ↔ ×)
- * and the default `aria-label` / `aria-expanded` values.
- *
- * Keyboard: native `<button>` gives Enter / Space activation and Tab
- * focus. `aria-expanded` communicates the open/closed state to assistive
- * technologies.
- */
-export const NavHeaderMenuButton = forwardRef<
-  HTMLButtonElement,
-  NavHeaderMenuButtonProps
->(function NavHeaderMenuButton(
-  { opened = false, className, type = 'button', 'aria-label': ariaLabel, ...rest },
-  ref,
-) {
-  const resolvedAriaLabel = ariaLabel ?? (opened ? 'Close menu' : 'Open menu');
-
-  return (
-    <button
-      ref={ref}
-      type={type}
-      data-slot="nav-header-menu-button"
-      data-opened={opened || undefined}
-      aria-expanded={opened}
-      aria-label={resolvedAriaLabel}
-      className={cn(ROOT_BASE, className)}
-      {...rest}
-    >
-      <span data-slot="icon" className={ICON_SLOT}>
-        {opened ? <XIcon /> : <HamburgerIcon />}
-      </span>
-    </button>
-  );
-});

package/src/components/NavHeaderMenuButton/NavHeaderMenuButton.types.ts

@@ -1,17 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react';
-
-export interface NavHeaderMenuButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * Whether the associated menu/drawer is currently open.
-   * Toggles the glyph between the hamburger (closed) and the × (open) icon.
-   * @default false
-   */
-  opened?: boolean;
-  /**
-   * Accessible label for the button. Strongly recommended — defaults
-   * are provided (`Open menu` / `Close menu`) but consumers should
-   * override to match their product copy or localisation.
-   */
-  'aria-label'?: string;
-}

package/src/components/NavHeaderMenuButton/NavHeaderMenuButton.variants.ts

@@ -1,73 +0,0 @@
-/*
- * NavHeaderMenuButton — class constants
- *
- * State model (CSS-driven, NOT props):
- *   default   → base (transparent background, icon #161616)
- *   hovered   → `hover:` pseudo → bg #f3f4f6 (button-background-neutral-hovered)
- *   pressed   → `active:` pseudo → bg #e5e7eb (button-background-neutral-pressed)
- *   focused   → `focus-visible:` pseudo → 2px solid #161616 border, inset via box-sizing
- *
- * Figma: node 5069:58898 ("_Nav Header Menu Button"). 40×40 outer box,
- * 24×24 icon, 8px padding, 8px corner radius.
- */
-
-/* ── Root button ───────────────────────────────────────────────── */
-/**
- * Base class string applied to the `<button>` element.
- *
- * Token mapping:
- *   p-spacing-md       → 8px padding (matches Global/spacing-md)
- *   rounded-[8px]      → matches Radius/radius-8 (no responsive alias)
- *   size-[40px]        → 24px icon + 2×8px padding → fixed 40×40 per Figma
- *
- * Colour & focus:
- *   Default text colour = Icon/icon-default (#161616); the icon inherits
- *   it via `fill="currentColor"`.
- *   Hover   → button-background-neutral-hovered (#f3f4f6)
- *   Active  → button-background-neutral-pressed (#e5e7eb)
- *   Focus   → 2px solid #161616 border (Border/border-black)
- *
- * Dark-mode values follow the package convention: low-alpha white
- * overlays for hover/pressed, and a light border for focus.
- *
- * `focus-visible:outline-none` prevents the browser default ring from
- * stacking with our custom 2px border. The 2px border is applied via
- * a transparent default `border-2 border-transparent` so the button
- * does not shift by 2px when focus lands on it.
- */
-export const ROOT_BASE = [
-  // Layout
-  'inline-flex items-center justify-center',
-  'size-[40px] shrink-0',
-  'p-spacing-md',
-  'rounded-[8px]',
-  // Reserve space for the focus border so default/hover/pressed don't shift
-  'border-2 border-transparent',
-  // Colours — default (text drives icon colour via currentColor)
-  'bg-transparent',
-  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
-  // Cursor / transition
-  'cursor-pointer',
-  'motion-feedback',
-  // Hover
-  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(255,255,255,0.06)]',
-  // Pressed / active
-  'active:bg-[rgba(229,231,235,1)] dark:active:bg-[rgba(255,255,255,0.1)]',
-  // Focus-visible — 2px solid black border, background returns to transparent
-  'focus-visible:outline-none',
-  'focus-visible:border-[rgba(22,22,22,1)] dark:focus-visible:border-[rgba(210,214,219,1)]',
-  'focus-visible:bg-transparent dark:focus-visible:bg-transparent',
-  // Disabled
-  'disabled:cursor-not-allowed disabled:opacity-50',
-  'disabled:hover:bg-transparent disabled:active:bg-transparent',
-].join(' ');
-
-/* ── Icon slot ─────────────────────────────────────────────────── */
-/**
- * Fixed 24×24 wrapper around the inline SVG. Figma specifies a
- * constant 24px glyph at every breakpoint, and no `size-icon-*`
- * token resolves to 24 across all three breakpoints, so this is
- * an intentional hardcode.
- */
-export const ICON_SLOT =
-  'inline-flex items-center justify-center shrink-0 size-[24px]';

package/src/components/NavHeaderMenuButton/index.ts

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

package/src/components/NavHeaderMenuCard/NavHeaderMenuCard.tsx

@@ -1,126 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import { PlayIcon } from '../../icons/IconFactory';
-import type { NavHeaderMenuCardProps } from './NavHeaderMenuCard.types';
-import {
-  ROOT_BY_LAYOUT,
-  ACTIVE_BG,
-  IMAGE_WRAPPER_BY_LAYOUT,
-  PLAY_OVERLAY_BASE,
-  PLAY_ICON_SLOT,
-  CONTENT_BY_LAYOUT,
-  TEXT_BLOCK,
-  TITLE_TEXT,
-  DESCRIPTION_TEXT,
-  ACTIONS_ROW_BY_TYPE,
-} from './NavHeaderMenuCard.variants';
-
-/**
- * NavHeaderMenuCard — the content card rendered inside the mobile
- * nav-header expanded drawer / desktop mega-menu. Supports three
- * visual types (image / video / featured) and two layouts
- * (inline / stacked), plus an `active` state for "currently selected".
- *
- * Structure:
- *   ┌────────────────────────────────────────────┐
- *   │  [image]  ┐  Title              (inline)   │
- *   │           │  Description                   │
- *   │           └  [ actions … ]                 │
- *   └────────────────────────────────────────────┘
- *
- * Composition:
- *   - `image`   → consumer-supplied ReactNode (no hardcoded asset path).
- *   - `actions` → consumer-supplied ReactNode — typically pre-configured
- *                 `<Button>`s from sdaia-ui.
- *
- * States:
- *   - `active` (prop) → background-body fill
- *   - hover / focus / press of inner buttons are handled by `<Button>`
- *   - the video play overlay is itself a focusable `<button>`
- *
- * RTL: ambient `dir="rtl"` is fully supported — the card uses logical
- * flex direction so the image swaps sides automatically.
- */
-export const NavHeaderMenuCard = forwardRef<
-  HTMLDivElement,
-  NavHeaderMenuCardProps
->(function NavHeaderMenuCard(
-  {
-    type = 'image',
-    layout = 'inline',
-    active = false,
-    title,
-    description,
-    image,
-    onPlayClick,
-    playAriaLabel = 'Play video',
-    actions,
-    className,
-    ...rest
-  },
-  ref,
-) {
-  const isVideo = type === 'video';
-
-  /* ── Image wrapper content (image + optional play overlay) ───── */
-  const imageContent = image ? (
-    <div
-      data-slot="image-wrapper"
-      className={IMAGE_WRAPPER_BY_LAYOUT[layout]}
-    >
-      {image}
-      {isVideo ? (
-        <button
-          type="button"
-          data-slot="play-overlay"
-          onClick={onPlayClick}
-          aria-label={playAriaLabel}
-          className={PLAY_OVERLAY_BASE}
-        >
-          <span className={PLAY_ICON_SLOT}>
-            <PlayIcon />
-          </span>
-        </button>
-      ) : null}
-    </div>
-  ) : null;
-
-  return (
-    <div
-      ref={ref}
-      data-slot="nav-header-menu-card"
-      data-type={type}
-      data-layout={layout}
-      data-active={active || undefined}
-      className={cn(
-        ROOT_BY_LAYOUT[layout],
-        active && ACTIVE_BG,
-        className,
-      )}
-      {...rest}
-    >
-      {imageContent}
-
-      <div data-slot="content" className={CONTENT_BY_LAYOUT[layout]}>
-        <div data-slot="text-block" className={TEXT_BLOCK}>
-          <p data-slot="title" className={TITLE_TEXT}>
-            {title}
-          </p>
-          {description ? (
-            <p data-slot="description" className={DESCRIPTION_TEXT}>
-              {description}
-            </p>
-          ) : null}
-        </div>
-
-        {actions ? (
-          <div data-slot="actions" className={ACTIONS_ROW_BY_TYPE[type]}>
-            {actions}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-});

package/src/components/NavHeaderMenuCard/NavHeaderMenuCard.types.ts

@@ -1,74 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-/** Visual type — drives which action pattern and image treatment is used. */
-export type NavHeaderMenuCardType = 'image' | 'video' | 'featured';
-
-/** Layout orientation of image relative to content. */
-export type NavHeaderMenuCardLayout = 'inline' | 'stacked';
-
-export interface NavHeaderMenuCardProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * Visual type:
-   *  - `image`    → image on the side (inline) or on top (stacked)
-   *  - `video`    → same layout as image + a play-button overlay on the image
-   *  - `featured` → image + two text-only action buttons under the content
-   * @default 'image'
-   */
-  type?: NavHeaderMenuCardType;
-
-  /**
-   * Layout orientation:
-   *  - `inline`  → image next to content, card is a 420 px row
-   *  - `stacked` → image on top, card is a 320 px column
-   * @default 'inline'
-   */
-  layout?: NavHeaderMenuCardLayout;
-
-  /**
-   * Marks the card as active (e.g. the currently selected item in the nav
-   * header menu). Applies a subtle background-body fill.
-   * @default false
-   */
-  active?: boolean;
-
-  /** Card title — rendered as a `<p>` with Text md/Semibold styling. */
-  title: ReactNode;
-
-  /** Helper / description text below the title. Omit to hide. */
-  description?: ReactNode;
-
-  /**
-   * The image element shown in the image wrapper. Usually an `<img />` or
-   * a `<div>` with a background image. Consumer-supplied so the component
-   * ships with no hardcoded asset path — this keeps the card fully usable
-   * on a fresh project install where local `public/` assets don't exist.
-   */
-  image?: ReactNode;
-
-  /**
-   * When `type='video'`, fires when the play-button overlay is clicked
-   * or activated via keyboard. Ignored for other types.
-   */
-  onPlayClick?: () => void;
-
-  /**
-   * When `type='video'`, the accessible label for the play-button overlay.
-   * @default 'Play video'
-   */
-  playAriaLabel?: string;
-
-  /**
-   * The action row under the content. Consumer passes pre-configured
-   * `<Button />`s. Recommended patterns per type:
-   *  - image    → 1× `<Button variant="secondary-outline" trailingIcon={<ArrowRightIcon />}>Read Post</Button>`
-   *  - video    → 1× `<Button variant="secondary-outline" leadingIcon={<PlayIcon />}>Watch Video</Button>`
-   *  - featured → 2× `<Button variant="subtle">…</Button>`
-   * The component does not inject buttons so consumers keep full control
-   * over labels, hrefs, destructive variants, localisation, etc.
-   */
-  actions?: ReactNode;
-
-  /** Extra classes merged onto the root `<div>`. */
-  className?: string;
-}

package/src/components/NavHeaderMenuCard/NavHeaderMenuCard.variants.ts

@@ -1,169 +0,0 @@
-import type {
-  NavHeaderMenuCardLayout,
-  NavHeaderMenuCardType,
-} from './NavHeaderMenuCard.types';
-
-/*
- * NavHeaderMenuCard — class constants
- *
- * Figma: node 5098:59841 "_Nav Header Menu Card". Matrix:
- *   type    × layout  × state   × rtl
- *   3       × 2       × 2       × 2  → 24 visual permutations
- *
- * State model:
- *   active (prop)  → background-body fill on the root
- *   RTL            → ambient `dir` attribute, no code change required
- *                    (logical properties handle flip)
- *   hover/press/focus of the inner action buttons → handled by <Button>
- */
-
-/* ── Root container (per layout) ───────────────────────────────── */
-/**
- * Token mapping:
- *   p-spacing-lg   → 12 px padding
- *   gap-spacing-lg → 12 px gap (inline: horizontal; stacked: vertical)
- *   rounded-[8px]  → Radius/radius-8 (no responsive alias)
- *   w-[420px]      → Figma inline card width
- *   w-[320px]      → Figma stacked card width
- *
- * `overflow-clip` mirrors the Figma frame so the image radius clips.
- * Transition is tokenised via `--motion-duration-fast` so the active-bg
- * change is animated consistently with the rest of the design system.
- */
-export const ROOT_BY_LAYOUT: Record<NavHeaderMenuCardLayout, string> = {
-  inline: [
-    'content-stretch flex gap-spacing-lg items-center',
-    'p-spacing-lg rounded-[8px] overflow-clip',
-    'w-[420px] max-w-full',
-    'motion-feedback',
-  ].join(' '),
-  stacked: [
-    'content-stretch flex flex-col gap-spacing-lg items-start',
-    'p-spacing-lg rounded-[8px] overflow-clip',
-    'w-[320px] max-w-full',
-    'motion-feedback',
-  ].join(' '),
-};
-
-/* ── Active-state background ───────────────────────────────────── */
-/**
- * Light: Background/background-body (#f9fafb)
- * Dark:  low-alpha white overlay matching the rest of the package
- *        (see MenuButtonItem, Chip, etc. for the same convention).
- */
-export const ACTIVE_BG =
-  'bg-[rgba(249,250,251,1)] dark:bg-[rgba(255,255,255,0.06)]';
-
-/* ── Image wrapper ─────────────────────────────────────────────── */
-/**
- * Inline  → fixed 120×120 square (matches Figma exactly across breakpoints)
- * Stacked → full-width, aspect ratio preserved per Figma (356:250).
- *
- * `relative` is required for the video play-overlay to absolute-center.
- * `overflow-hidden` ensures the image's `object-cover` respects the
- * rounded corners.
- */
-export const IMAGE_WRAPPER_BY_LAYOUT: Record<NavHeaderMenuCardLayout, string> =
-  {
-    inline:
-      'relative shrink-0 size-[120px] rounded-[8px] overflow-hidden ' +
-      'flex items-center justify-center',
-    stacked:
-      'relative w-full aspect-[356/250] rounded-[8px] overflow-hidden ' +
-      'flex items-center justify-center',
-  };
-
-/**
- * Applied to user-supplied `<img>` children implicitly via a wrapping
- * div + explicit Tailwind classes on the child when it is an `<img>`.
- * Here exposed as a constant so the component and any future variants
- * agree on the exact image fitting behaviour.
- */
-export const IMAGE_FIT_CLASSES =
-  'block size-full object-cover';
-
-/* ── Video play overlay ────────────────────────────────────────── */
-/**
- * Absolutely centered pill on top of the image.
- * Token mapping:
- *   p-spacing-xs  → 4 px padding
- *   rounded-[8px] → Radius/radius-8
- *   bg            → Button/button-background-transparent-selected (rgba 255,255,255,0.3)
- *
- * Focus ring matches Button's ring token family so it feels consistent
- * when a user tabs onto the overlay.
- */
-export const PLAY_OVERLAY_BASE = [
-  'absolute inset-0 m-auto',
-  'inline-flex items-center justify-center',
-  'size-fit p-spacing-xs rounded-[8px]',
-  'bg-[rgba(255,255,255,0.3)]',
-  'text-white',
-  'cursor-pointer',
-  'motion-feedback',
-  'hover:bg-[rgba(255,255,255,0.4)]',
-  'active:bg-[rgba(255,255,255,0.5)]',
-  'focus-visible:outline-none',
-  'focus-visible:ring-2 focus-visible:ring-[rgba(255,255,255,0.8)]',
-  'focus-visible:ring-offset-2 focus-visible:ring-offset-black/20',
-].join(' ');
-
-/** Fixed 24 px glyph — Figma-specific size, no responsive token matches. */
-export const PLAY_ICON_SLOT =
-  'inline-flex items-center justify-center shrink-0 size-[24px]';
-
-/* ── Content column ────────────────────────────────────────────── */
-/**
- * Inline  → grows to fill remaining row width, `min-w-0` enables
- *           child text truncation / wrapping.
- * Stacked → full-width column.
- *
- * `gap-spacing-lg` is the 12 px vertical gap between the title/helper
- * block and the actions row.
- */
-export const CONTENT_BY_LAYOUT: Record<NavHeaderMenuCardLayout, string> = {
-  inline:
-    'content-stretch flex flex-1 min-w-0 flex-col gap-spacing-lg items-start',
-  stacked:
-    'content-stretch flex w-full flex-col gap-spacing-lg items-start',
-};
-
-/* ── Text block ────────────────────────────────────────────────── */
-/** Gap between title and description: 4 px (Global/spacing-xs). */
-export const TEXT_BLOCK =
-  'flex w-full flex-col items-start gap-spacing-xs';
-
-/**
- * Title — Text md/Semibold.
- *   Font size uses responsive `text-text-md` token.
- *   Line height is baked into the `@utility` in globals.css.
- *   Color: Text/text-display.
- */
-export const TITLE_TEXT = [
-  'text-text-md font-[600]',
-  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
-  'w-full',
-].join(' ');
-
-/**
- * Description — Text sm/Regular.
- *   Color: Text/text-primary-paragraph.
- */
-export const DESCRIPTION_TEXT = [
-  'text-text-sm font-[400]',
-  'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
-  'w-full',
-].join(' ');
-
-/* ── Actions row ───────────────────────────────────────────────── */
-/**
- * Featured card uses 8 px gap between its two text-only buttons.
- * Image / Video cards typically render a single button so the gap is
- * inert there — kept the same for simplicity and so that a consumer
- * choosing to render two buttons on those types still gets spacing.
- */
-export const ACTIONS_ROW_BY_TYPE: Record<NavHeaderMenuCardType, string> = {
-  image: 'flex w-full items-center gap-spacing-md',
-  video: 'flex w-full items-center gap-spacing-md',
-  featured: 'flex w-full items-center gap-spacing-md',
-};

package/src/components/NavHeaderMenuCard/index.ts

@@ -1,6 +0,0 @@
-export { NavHeaderMenuCard } from './NavHeaderMenuCard';
-export type {
-  NavHeaderMenuCardProps,
-  NavHeaderMenuCardType,
-  NavHeaderMenuCardLayout,
-} from './NavHeaderMenuCard.types';

package/src/components/NavHeaderMenuItem/NavHeaderMenuItem.tsx

@@ -1,164 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import type { NavHeaderMenuItemProps } from './NavHeaderMenuItem.types';
-import {
-  CONTAINER_BASE,
-  CONTAINER_DESKTOP,
-  CONTAINER_MOBILE,
-  HOVER_BG,
-  FOCUS_CLOSED,
-  FOCUS_OPEN,
-  LABEL_BASE,
-  LABEL_CLOSED,
-  LABEL_OPEN,
-  LABEL_MOBILE,
-  LABEL_DESKTOP,
-  LEADING_ICON_WRAPPER,
-  LEADING_ICON_SIZE,
-  LEADING_ICON_CLOSED,
-  LEADING_ICON_OPEN,
-  TRAILING_ICON_WRAPPER,
-  TRAILING_ICON_SIZE,
-  TRAILING_ICON_CLOSED,
-  TRAILING_ICON_OPEN,
-} from './NavHeaderMenuItem.variants';
-import { PlayIconTwotone, ArrowUpIcon, ArrowDownIcon } from '../../icons/IconFactory';
-
-/**
- * NavHeaderMenuItem — a navigation top-bar menu trigger item.
- *
- * Combines a leading play icon, a text label, and a trailing chevron into a
- * single focusable, hoverable, clickable button. Intended to sit inside a
- * horizontal navigation header and act as the trigger for a dropdown panel.
- *
- * Pixel-perfect match to Figma node 5069-58559 ("_Nav Header Menu Item") across
- * all 20 variants (2 RTL × 3 states × 2 open × 2 mobile combinations).
- *
- * ── States ────────────────────────────────────────────────────────────────────
- *   Default  → transparent background, neutral colour palette
- *   Hovered  → `background-body` (#f9fafb) fill, darker icon/text
- *   Focused  → 2 px border + 3 px white outer ring (desktop only)
- *
- * ── Open vs closed ────────────────────────────────────────────────────────────
- *   open=false → grey play icon, regular-weight label, arrow-down, black focus border
- *   open=true  → brand-green play icon, medium-weight label, arrow-up, green focus border
- *
- * ── Layout ────────────────────────────────────────────────────────────────────
- *   mobile=false (default) → 40 px high, compact padding, content-width
- *   mobile=true            → 48 px high, larger padding, full-width flex label
- *
- * ── RTL ───────────────────────────────────────────────────────────────────────
- *   Fully automatic via `dir="rtl"` on an ancestor element.
- *   Flex `row` direction respects the inline start/end direction: play icon
- *   moves to the trailing (right) edge and the arrow to the leading (left) edge
- *   without any extra code.
- *
- * @example
- * // Controlled open/close toggle
- * const [open, setOpen] = useState(false);
- * <NavHeaderMenuItem
- *   open={open}
- *   label="Products"
- *   onClick={() => setOpen(o => !o)}
- * />
- *
- * // Mobile layout
- * <NavHeaderMenuItem mobile open label="Solutions" />
- *
- * // RTL — wrap in a dir="rtl" ancestor
- * <div dir="rtl">
- *   <NavHeaderMenuItem label="المنتجات" />
- * </div>
- */
-export const NavHeaderMenuItem = forwardRef<HTMLButtonElement, NavHeaderMenuItemProps>(
-  function NavHeaderMenuItem(
-    {
-      open = false,
-      selected = false,
-      mobile = false,
-      label = 'Header Item',
-      showLeadingIcon = true,
-      showTrailingIcon = true,
-      leadingIcon,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    /* Either `open` (transient — dropdown showing) or `selected`
-     * (persistent — current page) gets the brand-green colour treatment.
-     * `open` continues to own the chevron direction. */
-    const isHighlighted = open || selected;
-
-    return (
-      <button
-        ref={ref}
-        type="button"
-        data-slot="nav-header-menu-item"
-        data-state={open ? 'open' : 'closed'}
-        data-selected={selected || undefined}
-        aria-expanded={open}
-        aria-current={selected ? 'page' : undefined}
-        className={cn(
-          CONTAINER_BASE,
-          mobile ? CONTAINER_MOBILE : CONTAINER_DESKTOP,
-          HOVER_BG,
-          /* Focus ring: color depends on highlight; suppressed on mobile (Figma) */
-          !mobile && (isHighlighted ? FOCUS_OPEN : FOCUS_CLOSED),
-          className,
-        )}
-        {...rest}
-      >
-        {/* ── Leading play icon ──────────────────────────────────────────── */}
-        {showLeadingIcon && (
-          <span
-            data-slot="nav-header-menu-item-leading-icon"
-            className={cn(
-              LEADING_ICON_WRAPPER,
-              LEADING_ICON_SIZE,
-              isHighlighted ? LEADING_ICON_OPEN : LEADING_ICON_CLOSED,
-            )}
-          >
-            {leadingIcon ?? (
-              <PlayIconTwotone aria-hidden="true" />
-            )}
-          </span>
-        )}
-
-        {/* ── Label ─────────────────────────────────────────────────────── */}
-        <span
-          data-slot="nav-header-menu-item-label"
-          className={cn(
-            LABEL_BASE,
-            mobile ? LABEL_MOBILE : LABEL_DESKTOP,
-            isHighlighted ? LABEL_OPEN : LABEL_CLOSED,
-          )}
-        >
-          {label}
-        </span>
-
-        {/* ── Trailing chevron arrow ─────────────────────────────────────── */}
-        {showTrailingIcon && (
-          <span
-            data-slot="nav-header-menu-item-trailing-icon"
-            className={cn(
-              TRAILING_ICON_WRAPPER,
-              TRAILING_ICON_SIZE,
-              isHighlighted ? TRAILING_ICON_OPEN : TRAILING_ICON_CLOSED,
-            )}
-          >
-            {open ? (
-              <ArrowUpIcon aria-hidden="true" width="100%" height="100%" />
-            ) : (
-              <ArrowDownIcon aria-hidden="true" width="100%" height="100%" />
-            )}
-          </span>
-        )}
-      </button>
-    );
-  },
-);
-
-NavHeaderMenuItem.displayName = 'NavHeaderMenuItem';