sdaia-ui 1.0.1

package/src/components/NavHeaderMenuItem/NavHeaderMenuItem.types.ts

@@ -0,0 +1,64 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * NavHeaderMenuItem — props interface.
+ *
+ * Extends native `<button>` attributes so consumers get full DOM prop
+ * pass-through (onClick, aria-*, data-*, etc.) for free.
+ */
+export interface NavHeaderMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Whether the associated dropdown / panel is currently open.
+   *
+   * Controls icon direction (↓ closed / ↑ open), text weight, and the
+   * brand-green colour applied to every sub-element.  Also determines which
+   * focus-border colour is used (black when closed, green when open).
+   */
+  open?: boolean;
+
+  /**
+   * Whether this item represents the *current* page / section. Persistent
+   * indicator independent of `open`. Visually applies the brand-green
+   * label + leading-icon colour and medium font-weight, but unlike `open`
+   * it does NOT flip the trailing chevron — the dropdown can still be
+   * closed while the item is marked as current.
+   *
+   * Precedence: when both `open` and `selected` are true, `open` wins for
+   * the chevron direction; the green colour treatment is the same.
+   */
+  selected?: boolean;
+
+  /**
+   * Render in the mobile layout variant.
+   *
+   * `false` (default) — 40 px desktop item: compact `p-spacing-md` padding,
+   *   content-width, no focus ring on desktop is narrower (161 px max).
+   * `true`            — 48 px mobile item: larger `p-spacing-lg` padding,
+   *   full-width (`w-full`), label fills remaining space with truncation.
+   *   Focus ring is suppressed on mobile (Figma has no focused mobile variant).
+   */
+  mobile?: boolean;
+
+  /** Visible text label. Defaults to `"Header Item"`. */
+  label?: string;
+
+  /**
+   * Show the leading play icon.  Defaults to `true`.
+   * Set to `false` to hide the icon slot entirely.
+   */
+  showLeadingIcon?: boolean;
+
+  /**
+   * Show the trailing chevron arrow icon.  Defaults to `true`.
+   * The arrow points down when `open=false` and up when `open=true`.
+   * Set to `false` to hide the trailing icon slot entirely.
+   */
+  showTrailingIcon?: boolean;
+
+  /**
+   * Custom leading icon node.  When provided, replaces the default
+   * `PlayIconTwotone`.  Must be a size-agnostic element — the wrapping
+   * `<span>` carries the `size-icon-lg` token class.
+   */
+  leadingIcon?: ReactNode;
+}

package/src/components/NavHeaderMenuItem/NavHeaderMenuItem.variants.ts

@@ -0,0 +1,175 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// Container
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Base classes shared by every container state.
+ * `group` enables child elements to react to the button's own hover/focus.
+ */
+export const CONTAINER_BASE = [
+  'group relative inline-flex items-center',
+  'rounded-[8px]',
+  'cursor-pointer select-none',
+  'motion-feedback',
+  // Suppress the browser default outline — our custom ring replaces it.
+  'focus-visible:outline-none',
+].join(' ');
+
+/**
+ * Desktop layout — compact padding, content-width shrinks to label.
+ * Figma: p-spacing-md (8 px), gap-spacing-xs (4 px).
+ */
+export const CONTAINER_DESKTOP = 'gap-spacing-xs p-spacing-md';
+
+/**
+ * Mobile layout — larger padding, full width so label can flex.
+ * Figma: p-spacing-lg (12 px), gap-spacing-xs (4 px), w-220px (full in context).
+ */
+export const CONTAINER_MOBILE = 'gap-spacing-xs p-spacing-lg w-full';
+
+/**
+ * Hover background applied via the CSS :hover pseudo-class.
+ * Token: Background/background-body → rgba(249,250,251,1)
+ * Dark-mode equivalent from MenuButtonItem pattern.
+ */
+export const HOVER_BG = [
+  'hover:bg-[rgba(249,250,251,1)]',
+  'dark:hover:bg-[rgba(255,255,255,0.06)]',
+].join(' ');
+
+/**
+ * Focus ring — CLOSED state.
+ * Figma: 2 px solid border-black + absolute inset-[-2px] border-3 border-white.
+ *
+ * Implementation:
+ *   focus-visible:border-2        → 2 px colored border on the element
+ *   focus-visible:ring-[3px]      → 3 px outer ring (box-shadow) in white
+ *   ring-offset-0                 → ring sits right at the border-box edge
+ *
+ * Token: Border/border-black → rgba(22,22,22,1)
+ * Token: Border/border-white → white
+ */
+export const FOCUS_CLOSED = [
+  'focus-visible:border-2 focus-visible:border-[rgba(22,22,22,1)]',
+  'focus-visible:ring-[3px] focus-visible:ring-white',
+  // Dark mode: white border + dark ring so contrast is maintained
+  'dark:focus-visible:border-[rgba(229,231,235,1)]',
+  'dark:focus-visible:ring-[rgba(17,24,39,1)]',
+].join(' ');
+
+/**
+ * Focus ring — OPEN state.
+ * Token: Border/border-primary → rgba(27,131,84,1)
+ */
+export const FOCUS_OPEN = [
+  'focus-visible:border-2 focus-visible:border-[rgba(27,131,84,1)]',
+  'focus-visible:ring-[3px] focus-visible:ring-white',
+  'dark:focus-visible:border-[rgba(27,131,84,1)]',
+  'dark:focus-visible:ring-[rgba(17,24,39,1)]',
+].join(' ');
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Label (text)
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Typography base — font-size and line-height.
+ * Token: typo-size-text-md → text-text-md (16 px desktop)
+ * Token: line-heights-text-md → leading-[24px]
+ */
+export const LABEL_BASE = 'text-text-md leading-[24px] cursor-pointer';
+
+/**
+ * Closed state label.
+ * Default:  Token Text/text-primary-paragraph → rgba(56,66,80,1)
+ * On hover: Token Text/text-default           → rgba(22,22,22,1)
+ * font-weight: 400 (regular)
+ */
+export const LABEL_CLOSED = [
+  'font-[400]',
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+  'group-hover:text-[rgba(22,22,22,1)] dark:group-hover:text-[rgba(249,250,251,1)]',
+].join(' ');
+
+/**
+ * Open state label.
+ * Token: Text/text-primary → rgba(27,131,84,1)
+ * font-weight: 500 (medium)  — colour stays green regardless of hover.
+ */
+export const LABEL_OPEN = [
+  'font-[500]',
+  'text-[rgba(27,131,84,1)]',
+  'dark:text-[rgba(84,192,138,1)]',
+].join(' ');
+
+/** Mobile — label grows to fill remaining row space and truncates */
+export const LABEL_MOBILE = 'flex-1 min-w-0 truncate text-start';
+
+/** Desktop — label is fixed to its natural width; no wrapping */
+export const LABEL_DESKTOP = 'shrink-0 whitespace-nowrap';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Leading icon (play)
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Flex wrapper — centres the SVG inside the size-token box */
+export const LEADING_ICON_WRAPPER =
+  'inline-flex items-center justify-center shrink-0 cursor-pointer';
+
+/**
+ * Size token for the play icon.
+ * Figma: icon-xl = 24 px → size-icon-lg (20 px mobile → 24 px desktop)
+ */
+export const LEADING_ICON_SIZE = 'size-icon-lg';
+
+/**
+ * Closed state icon color.
+ * Default:  Token Icon/icon-neutral → rgba(56,66,80,1)
+ * On hover: Token Icon/icon-default → rgba(22,22,22,1)
+ */
+export const LEADING_ICON_CLOSED = [
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+  'group-hover:text-[rgba(22,22,22,1)] dark:group-hover:text-[rgba(249,250,251,1)]',
+].join(' ');
+
+/**
+ * Open state icon color — brand green, stays green on hover.
+ * Token: Icon/icon-primary → rgba(27,131,84,1)
+ */
+export const LEADING_ICON_OPEN = [
+  'text-[rgba(27,131,84,1)]',
+  'dark:text-[rgba(84,192,138,1)]',
+].join(' ');
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Trailing icon (arrow up / down)
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Flex wrapper — centres the SVG inside the size-token box */
+export const TRAILING_ICON_WRAPPER =
+  'inline-flex items-center justify-center shrink-0 cursor-pointer';
+
+/**
+ * Size token for the arrow icon.
+ * Figma: icon-lg = 20 px → size-icon-md (16 px mobile → 20 px desktop)
+ */
+export const TRAILING_ICON_SIZE = 'size-icon-md';
+
+/**
+ * Closed state arrow color.
+ * Default:  Token Icon/icon-default-400 → rgba(157,164,174,1)   (lighter grey)
+ * On hover: Token Icon/icon-default     → rgba(22,22,22,1)
+ */
+export const TRAILING_ICON_CLOSED = [
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(107,114,128,1)]',
+  'group-hover:text-[rgba(22,22,22,1)] dark:group-hover:text-[rgba(249,250,251,1)]',
+].join(' ');
+
+/**
+ * Open state arrow color — brand green, stays green on hover.
+ * Token: Icon/icon-primary → rgba(27,131,84,1)
+ */
+export const TRAILING_ICON_OPEN = [
+  'text-[rgba(27,131,84,1)]',
+  'dark:text-[rgba(84,192,138,1)]',
+].join(' ');

package/src/components/NavHeaderMenuItem/index.ts

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

package/src/components/NavItem/NavItem.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import { forwardRef, useCallback } from 'react';
+import { cn } from '../../lib/cn';
+import type { NavItemProps } from './NavItem.types';
+import {
+  HOVER_BG,
+  FOCUS_RING,
+  DEFAULT_TEXT,
+  DISABLED_TEXT,
+  DEFAULT_ICON_COLOR,
+  DISABLED_ICON_COLOR,
+  CHECKBOX_BORDER,
+  CHECKBOX_BORDER_DISABLED,
+  DIVIDER_LINE,
+  DISABLED_CONTAINER,
+} from './NavItem.variants';
+import { ChevronRightIcon } from '../../icons/IconFactory';
+import { Tag } from '../Tag';
+import { Checkbox } from '../Checkbox';
+
+/*
+ * NavItem — a navigation/menu list row with an optional leading slot,
+ * a label, an optional tag, and a direction-aware trailing chevron.
+ *
+ * Figma: "Menu Item" — node 6055:82474
+ *
+ * ## Layout (two-level — matches Figma exactly)
+ *   Outer div  px-spacing-sm py-spacing-xxs  — transparent; no background
+ *   Inner div  p-spacing-md gap-spacing-md rounded-[8px] — receives hover bg
+ *
+ * ## Leading slot (leadingItem prop)
+ *   'default'  → 20×20 invisible spacer (keeps text aligned with icon rows)
+ *   'icon'     → user-supplied ReactNode via leadingIcon prop
+ *   'checkbox' → existing Checkbox component (size="sm", variant="neutral")
+ *
+ * ## Trailing elements
+ *   trailingIcon — direction-aware chevron (default: true)
+ *   tag          — optional Tag element before the chevron
+ *
+ * ## States (Figma)
+ *   Default | Hover/Active (CSS) | Disabled (prop)
+ *
+ * ## RTL
+ *   Set dir="rtl" on a parent or <html>. CSS logical properties handle layout
+ *   mirroring. The trailing chevron flips via rtl:-scale-x-100 on its wrapper.
+ *
+ * ## Dark mode
+ *   All dark: classes are inline in the variants file. Toggle html.dark.
+ */
+export const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
+  function NavItem(
+    {
+      label = 'Placeholder',
+      leadingItem = 'default',
+      leadingIcon,
+      divider = false,
+      trailingIcon = true,
+      tag = false,
+      tagLabel = 'Label',
+      disabled = false,
+      checkboxChecked = false,
+      onCheckboxChange,
+      onClick,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* Resolve text / icon colours based on disabled state */
+    const textColor = disabled ? DISABLED_TEXT : DEFAULT_TEXT;
+    const iconColor = disabled ? DISABLED_ICON_COLOR : DEFAULT_ICON_COLOR;
+
+    const handleCheckboxChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        e.stopPropagation();
+        if (!disabled) onCheckboxChange?.(e.target.checked);
+      },
+      [disabled, onCheckboxChange],
+    );
+
+    /* ── Divider variant ─────────────────────────────────────────── */
+    if (divider) {
+      return (
+        <div
+          ref={ref}
+          data-slot="nav-item-divider"
+          role="separator"
+          className={cn('w-full', className)}
+          {...rest}
+        >
+          <div className={cn('h-px w-full', DIVIDER_LINE)} />
+        </div>
+      );
+    }
+
+    return (
+      /*
+       * Outer wrapper — gutter padding only; stays transparent so the hover
+       * background is clipped to the inner rounded div.
+       */
+      <div
+        ref={ref}
+        data-slot="nav-item"
+        role="menuitem"
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled ? -1 : 0}
+        onClick={disabled ? undefined : onClick}
+        className={cn(
+          'flex flex-col w-full px-spacing-sm py-spacing-xxs',
+          disabled ? DISABLED_CONTAINER : 'cursor-pointer',
+          className,
+        )}
+        {...rest}
+      >
+        {/*
+         * Inner content div — receives hover/active background and rounded corners.
+         * Disabled items never change bg.
+         */}
+        <div
+          className={cn(
+            'flex items-center gap-spacing-md p-spacing-md rounded-[8px] w-full motion-feedback',
+            !disabled && HOVER_BG,
+            !disabled && FOCUS_RING,
+          )}
+        >
+          {/* ── Leading slot ───────────────────────────────────────── */}
+          {leadingItem === 'icon' && leadingIcon && (
+            <span
+              data-slot="leading-icon"
+              className={cn(
+                'shrink-0 size-icon-md inline-flex items-center justify-center',
+                iconColor,
+              )}
+            >
+              {leadingIcon}
+            </span>
+          )}
+
+          {leadingItem === 'default' && (
+            /* 20×20 invisible spacer — aligns label with icon rows */
+            <span
+              data-slot="leading-spacer"
+              aria-hidden="true"
+              className="shrink-0 size-icon-md"
+            />
+          )}
+
+          {leadingItem === 'checkbox' && (
+            /*
+             * Uses the shared Checkbox component (size="sm" → 16×16, neutral style).
+             * Click is handled on the Checkbox itself; stopPropagation prevents
+             * the row's onClick from also firing.
+             */
+            <span
+              data-slot="leading-checkbox"
+              className="shrink-0 inline-flex items-center justify-center"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <Checkbox
+                size="sm"
+                variant="neutral"
+                checked={checkboxChecked}
+                disabled={disabled}
+                onChange={handleCheckboxChange}
+              />
+            </span>
+          )}
+
+          {/* ── Label ──────────────────────────────────────────────── */}
+          <span
+            data-slot="label"
+            className={cn(
+              'flex-1 text-text-sm font-[400] leading-[20px] truncate min-w-0',
+              textColor,
+            )}
+          >
+            {label}
+          </span>
+
+          {/* ── Optional tag ────────────────────────────────────────── */}
+          {tag && (
+            <Tag size="md" leading="default" data-slot="tag">
+              {tagLabel}
+            </Tag>
+          )}
+
+          {/* ── Trailing chevron ────────────────────────────────────── */}
+          {trailingIcon && (
+            /*
+             * Direction-aware chevron: points right (→) in LTR.
+             * rtl:-scale-x-100 mirrors it to point left (←) under dir="rtl".
+             * Colour follows the icon colour token (default / disabled).
+             */
+            <span
+              data-slot="trailing-icon"
+              className={cn(
+                'shrink-0 size-icon-md inline-flex items-center justify-center',
+                'rtl:-scale-x-100',
+                iconColor,
+              )}
+            >
+              <ChevronRightIcon />
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/NavItem/NavItem.types.ts

@@ -0,0 +1,71 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Controls the leading-slot content.
+ *
+ * - `'default'`  → 20×20 invisible spacer (keeps text aligned with icon rows)
+ * - `'icon'`     → icon passed via the `leadingIcon` prop
+ * - `'checkbox'` → 16×16 visual checkbox (state driven by `checkboxChecked`)
+ *
+ * Figma: "Leading Item" property on the Nav Item component (node 6055:82474).
+ */
+export type NavItemLeadingItem = 'default' | 'icon' | 'checkbox';
+
+export interface NavItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Label text displayed in the item */
+  label?: string;
+
+  /**
+   * Controls the leading-slot content type.
+   * Defaults to `'default'` (invisible spacer).
+   */
+  leadingItem?: NavItemLeadingItem;
+
+  /**
+   * Icon rendered when `leadingItem='icon'`.
+   * Should be a 20×20 ReactNode (e.g. an SVG icon component).
+   */
+  leadingIcon?: ReactNode;
+
+  /**
+   * Renders a full-width 1px horizontal divider instead of item content.
+   * All other props are ignored when `divider=true`.
+   */
+  divider?: boolean;
+
+  /**
+   * Shows a direction-aware trailing chevron.
+   * Points right (→) in LTR, flips to left (←) in RTL via CSS.
+   * Defaults to `true` — all leading-item variants show it in Figma.
+   */
+  trailingIcon?: boolean;
+
+  /**
+   * Shows an optional Tag element between the label and the trailing chevron.
+   */
+  tag?: boolean;
+
+  /** Label text inside the Tag (used when `tag=true`). Defaults to `'Label'`. */
+  tagLabel?: string;
+
+  /** Whether the item is disabled */
+  disabled?: boolean;
+
+  /**
+   * Checked state for the leading checkbox.
+   * Used when `leadingItem='checkbox'`.
+   */
+  checkboxChecked?: boolean;
+
+  /**
+   * Change handler for the leading checkbox.
+   * Called with the new checked value when the checkbox is clicked.
+   */
+  onCheckboxChange?: (checked: boolean) => void;
+
+  /** Click handler for the whole row */
+  onClick?: () => void;
+
+  /** Additional class names */
+  className?: string;
+}

package/src/components/NavItem/NavItem.variants.ts

@@ -0,0 +1,61 @@
+/*
+ * NavItem variant maps
+ *
+ * Figma source: node 6055:82474 "Menu Item"
+ * Variables traced to get_variable_defs output dated 2026-04-14.
+ *
+ * Layout tokens:
+ *   Outer: px-spacing-sm(6px) py-spacing-xxs(2px)
+ *   Inner: p-spacing-md(8px) gap-spacing-md(8px) rounded-radius-8(8px)
+ */
+
+/* ── Interactive (hover / active) ────────────────────────────────
+ * Figma hover bg: Background/background-neutral-100 = rgba(243,244,246,1)
+ * Active uses one step darker for pressed feel.
+ * ──────────────────────────────────────────────────────────────── */
+export const HOVER_BG =
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(255,255,255,0.08)] active:bg-[rgba(229,231,235,1)] dark:active:bg-[rgba(255,255,255,0.13)]';
+
+export const FOCUS_RING =
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[rgba(22,22,22,1)] dark:focus-visible:ring-[rgba(229,231,235,1)]';
+
+/* ── Text colors ─────────────────────────────────────────────────
+ * Default:  Text/text-default           = rgba(22,22,22,1)
+ * Disabled: Global/text-default-disabled = rgba(157,164,174,1)
+ * ──────────────────────────────────────────────────────────────── */
+export const DEFAULT_TEXT =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+export const DISABLED_TEXT =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+/* ── Icon colors ─────────────────────────────────────────────────
+ * Default:  Icon/icon-default-500        = rgba(108,115,127,1)
+ * Disabled: Global/icon-default-disabled = rgba(157,164,174,1)
+ * ──────────────────────────────────────────────────────────────── */
+export const DEFAULT_ICON_COLOR =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+export const DISABLED_ICON_COLOR =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+/* ── Checkbox leading slot ───────────────────────────────────────
+ * Controls/control-border          = rgba(108,115,127,1)
+ * Controls/Control-boarder-disabled = rgba(157,164,174,1)
+ * ──────────────────────────────────────────────────────────────── */
+export const CHECKBOX_BORDER =
+  'border-[rgba(108,115,127,1)] dark:border-[rgba(108,115,127,1)]';
+
+export const CHECKBOX_BORDER_DISABLED =
+  'border-[rgba(157,164,174,1)] dark:border-[rgba(75,85,99,1)]';
+
+/* ── Divider ─────────────────────────────────────────────────────
+ * Border/border-neutral-secondary = rgba(229,231,235,1)
+ * ──────────────────────────────────────────────────────────────── */
+export const DIVIDER_LINE =
+  'bg-[rgba(229,231,235,1)] dark:bg-[rgba(55,65,81,1)]';
+
+/* ── Disabled container ──────────────────────────────────────────
+ * pointer-events-none removes all interaction for disabled rows.
+ * ──────────────────────────────────────────────────────────────── */
+export const DISABLED_CONTAINER = 'pointer-events-none cursor-default';

package/src/components/NavItem/index.ts

@@ -0,0 +1,2 @@
+export { NavItem } from './NavItem';
+export type { NavItemProps, NavItemLeadingItem } from './NavItem.types';

package/src/components/NavLabel/NavLabel.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { NavLabelProps } from './NavLabel.types';
+import {
+  ROOT_BASE,
+  ROOT_SM,
+  LABEL_BASE,
+  LABEL_LG,
+  LABEL_SM,
+  LABEL_COLOR,
+  LABEL_DISABLED,
+} from './NavLabel.variants';
+
+/**
+ * NavLabel — a sidebar navigation section header / label.
+ *
+ * Placed above a group of `NavItem` rows to label the section.
+ * Renders at two sizes that correspond to the expanded/collapsed
+ * sidebar states:
+ *
+ *   size='lg' → full label text, fills container (expanded sidebar)
+ *   size='sm' → 2-character abbreviation, centered (collapsed sidebar)
+ *
+ * Style controls the text color to match the sidebar background:
+ *   style='default' → dark text on a light/white sidebar
+ *   style='brand'   → white text on a brand-colored sidebar
+ *
+ * The root element always carries `opacity-70` per Figma — section
+ * labels are intentionally de-emphasised compared to nav items.
+ * Disabled adds a further `opacity-40` on the text.
+ *
+ * RTL: logical padding (`px-spacing-md`) and `w-full` work
+ * automatically under `dir="rtl"` — no extra code path needed.
+ *
+ * Figma: "_Label Item" — node 4919:58193
+ */
+export const NavLabel = forwardRef<HTMLDivElement, NavLabelProps>(
+  function NavLabel(
+    {
+      label = 'Label',
+      abbreviation,
+      size = 'lg',
+      disabled = false,
+      style = 'default',
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* Derive abbreviation from label when not explicitly provided */
+    const abbr = abbreviation ?? label.slice(0, 2);
+    const displayText = size === 'sm' ? abbr : label;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="nav-label"
+        data-size={size}
+        data-style={style}
+        data-disabled={disabled || undefined}
+        className={cn(
+          ROOT_BASE,
+          size === 'sm' && ROOT_SM,
+          className,
+        )}
+        {...rest}
+      >
+        <p
+          data-slot="nav-label-text"
+          className={cn(
+            LABEL_BASE,
+            size === 'lg' ? LABEL_LG : LABEL_SM,
+            LABEL_COLOR[style],
+            disabled && LABEL_DISABLED,
+          )}
+        >
+          {displayText}
+        </p>
+      </div>
+    );
+  },
+);