sdaia-ui 1.0.1 → 1.0.2

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

@@ -1,64 +0,0 @@
-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

@@ -1,175 +0,0 @@
-// ─────────────────────────────────────────────────────────────────────────────
-// 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

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

package/src/components/NavItem/NavItem.tsx

@@ -1,210 +0,0 @@
-'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

@@ -1,71 +0,0 @@
-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

@@ -1,61 +0,0 @@
-/*
- * 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

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

package/src/components/NavLabel/NavLabel.tsx

@@ -1,84 +0,0 @@
-'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>
-    );
-  },
-);