sdaia-ui 1.0.1

package/src/components/NavHeader/NavHeader.variants.ts

@@ -0,0 +1,178 @@
+/*
+ * NavHeader — class constants
+ *
+ * Figma: node 5115:60220 "Nav Header". Matrix:
+ *   type (3) × mobile (2) × rtl (2) = 12 symbols
+ *
+ * State model:
+ *   - `menuOpen` (controlled)   → toggles the dropdown panel / drawer
+ *   - `type='default'`          → bar only
+ *   - `type='menu' | 'menu-compact'` → bar + optional dropdown/drawer
+ *
+ * All interactive states (hover/focus/active/disabled) live inside the
+ * composed sub-components (NavHeaderMenuItem, NavHeaderMenuButton,
+ * NavHeaderActions, TextInput, NavHeaderDropdownItem, NavHeaderMenuCard),
+ * so this file only covers the *layout* of the shell.
+ *
+ * Token mapping (values come from globals.css — no raw pixels except the
+ * Figma-spec drop-shadow, which has no named token):
+ *   gap-spacing-xl   → 16 px (desktop bar gap — one consistent value
+ *                              between every section: logo | items |
+ *                              search | actions)
+ *   gap-spacing-md   → 8 px  (desktop inter-item gap)
+ *   gap-spacing-lg   → 12 px (mobile drawer gap)
+ *   gap-spacing-3xl  → 24 px (drawer section gap)
+ *   py-spacing-md    → 8 px  (bar vertical padding)
+ *   py-spacing-2xl   → 20 px (drawer vertical padding)
+ *   rounded-[8px]    → Radius/radius-8
+ *
+ * Bar horizontal padding telescopes responsively so the bar feels right
+ * on a narrow preview *and* matches the Figma 80 px gutter at 1440 px:
+ *   px-spacing-xl    → 16 px (default / preview-narrow)
+ *   md:px-spacing-3xl→ 24 px (md breakpoint)
+ *   lg:px-spacing-6xl→ 48 px (lg breakpoint)
+ *   xl:px-spacing-8xl→ 80 px (xl — matches Figma artboard exactly)
+ *
+ * The "gradually smaller" hierarchy:
+ *   bar padding (16-80) > bar gap (16) > items gap (8)
+ * Each inner container is strictly smaller than the one wrapping it.
+ */
+
+/* ── Bar (desktop vs mobile) ─────────────────────────────────────── */
+/**
+ * Desktop bar — single horizontal row.
+ *   bar height = py 8 × 2 + content height (logo is 56px with inner padding)
+ * The `w-full` + `max-w-full` lets the component fill whatever container
+ * the consumer puts it in. The inner `max-w-[1440px]` + `mx-auto` would
+ * be the consumer's responsibility if they want a capped layout.
+ */
+export const BAR_DESKTOP =
+  [
+    'w-full',
+    'bg-white dark:bg-[rgba(22,22,22,1)]',
+    'flex gap-spacing-xl items-center justify-center',
+    'px-spacing-xl md:px-spacing-3xl lg:px-spacing-6xl xl:px-spacing-8xl',
+    'py-spacing-md',
+  ].join(' ');
+
+/**
+ * Mobile bar — logo on one edge, hamburger/× on the other.
+ * `justify-between` distributes them to the edges regardless of RTL
+ * because it's a direction-agnostic alignment.
+ */
+export const BAR_MOBILE =
+  [
+    'w-full',
+    'bg-white dark:bg-[rgba(22,22,22,1)]',
+    'flex items-center justify-between',
+    'px-spacing-xl py-spacing-md',
+  ].join(' ');
+
+/* ── Menu-items row (desktop) ───────────────────────────────────── */
+/**
+ * Inline row of `<NavHeaderMenuItem />` buttons. Spacing between this
+ * row and the next section (search) is supplied by the bar's own
+ * `gap-spacing-xl` — we don't add extra trailing padding here, otherwise
+ * one inter-section gap would be larger than the others and the
+ * "consistent" spacing rule breaks.
+ */
+export const ITEMS_ROW =
+  'flex gap-spacing-md items-center shrink-0';
+
+/* ── Search column (desktop) ─────────────────────────────────────── */
+/**
+ * Elastic middle column — the search input expands to fill remaining
+ * horizontal space between the menu items and the actions. The
+ * `min-w-[160px]` floor guarantees the input remains visible even when
+ * the bar is rendered inside a constrained preview / smaller viewport;
+ * without it `flex-1 min-w-0` would let the column collapse to zero
+ * width and the search would silently disappear.
+ */
+export const SEARCH_DESKTOP =
+  'flex flex-1 min-w-[160px] items-center';
+
+/* ── Actions cluster (desktop) ──────────────────────────────────── */
+export const ACTIONS_DESKTOP = 'flex items-center shrink-0';
+
+/* ── Desktop menu panel (dropdown) ──────────────────────────────── */
+/**
+ * The dropdown panel floats below the bar. It uses `absolute` so it
+ * overlays the page content beneath. `inset-x-spacing-8xl` matches the
+ * same horizontal gutter the bar uses, keeping the left/right edges
+ * aligned with the first and last bar items.
+ *
+ * Logical `inset-x-*` is used (not `left-*`/`right-*`) so RTL is a no-op.
+ * The shadow is the Figma `Shadows/shadow-lg` token flattened to its
+ * two drop-shadow layers; it has no named Tailwind counterpart in this
+ * design system, so it stays as an arbitrary value with the Figma
+ * variable name in the comment above this file.
+ */
+export const MENU_PANEL_DESKTOP =
+  [
+    'absolute top-full',
+    // Mirror the bar's responsive horizontal padding so the panel's
+    // left/right edges line up with the first/last bar items at every
+    // breakpoint — i.e. the dropdown is the same width as the navbar's
+    // content area. Using logical `start/end` keeps RTL automatic.
+    'start-spacing-xl end-spacing-xl',
+    'md:start-spacing-3xl md:end-spacing-3xl',
+    'lg:start-spacing-6xl lg:end-spacing-6xl',
+    'xl:start-spacing-8xl xl:end-spacing-8xl',
+    // No `mt-*` — the panel sits flush against the bar's bottom edge
+    // (matches the Figma "menu open" state where the dropdown reads as
+    // a single connected surface with the bar above it).
+    'bg-white dark:bg-[rgba(31,42,55,1)]',
+    'flex items-start gap-spacing-none',
+    'px-spacing-4xl py-spacing-3xl',
+    'rounded-b-[8px]',
+    'shadow-[0px_12px_16px_0px_rgba(16,24,40,0.08),0px_4px_6px_0px_rgba(16,24,40,0.03)]',
+    'z-40',
+  ].join(' ');
+
+/**
+ * Column inside the desktop menu panel — each direct child of
+ * `menuContent` is wrapped in this so the consumer can pass 1, 2, 3, or
+ * 4 columns and they all distribute evenly.
+ */
+export const MENU_PANEL_COLUMN =
+  'flex flex-1 min-w-0 flex-col gap-spacing-none items-start';
+
+/* ── Mobile drawer ──────────────────────────────────────────────── */
+/**
+ * The mobile drawer floats below the bar and fills the viewport width.
+ * Unlike the desktop dropdown (which is pinned inside the bar's gutter),
+ * the drawer stretches edge-to-edge and uses the neutral body
+ * background so separators are visible.
+ */
+export const DRAWER_MOBILE =
+  [
+    'absolute inset-x-0 top-full',
+    'bg-color-background-neutral-50 dark:bg-[rgba(22,22,22,1)]',
+    'flex flex-col gap-spacing-3xl items-stretch',
+    'px-spacing-xl py-spacing-2xl',
+    'shadow-[0px_12px_16px_0px_rgba(16,24,40,0.08),0px_4px_6px_0px_rgba(16,24,40,0.03)]',
+    'z-40',
+  ].join(' ');
+
+/**
+ * Scrolling body of the drawer — holds search, the interleaved menu
+ * items + dropdown content.
+ */
+export const DRAWER_BODY =
+  'flex flex-col gap-spacing-xs items-stretch';
+
+/**
+ * Mobile footer block wrapper. `gap-spacing-3xl` matches the drawer
+ * outer gap so the footer sits a consistent distance from the last
+ * content row.
+ */
+export const DRAWER_FOOTER =
+  'flex flex-col gap-spacing-3xl items-stretch px-spacing-lg';
+
+/* ── Root wrapper ───────────────────────────────────────────────── */
+/**
+ * The component renders a positioned root so the desktop dropdown /
+ * mobile drawer can use `absolute` positioning relative to the bar
+ * without leaking into the consumer's layout.
+ */
+export const ROOT = 'relative min-w-[320px] w-full';

package/src/components/NavHeader/index.ts

@@ -0,0 +1,2 @@
+export { NavHeader } from './NavHeader';
+export type { NavHeaderProps, NavHeaderType } from './NavHeader.types';

package/src/components/NavHeaderActions/NavHeaderActions.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import { Avatar } from '../Avatar';
+import { ChevronDownIcon, Logout02Icon } from '../../icons/IconFactory';
+import type { NavHeaderActionsProps } from './NavHeaderActions.types';
+import {
+  IDENTITY_EMAIL,
+  IDENTITY_NAME,
+  IDENTITY_TEXT_COL,
+  IDENTITY_WRAP,
+  ROOT_LOGGED_IN_DESKTOP,
+  ROOT_LOGGED_IN_MOBILE,
+  ROOT_LOGGED_OUT_DESKTOP,
+  ROOT_LOGGED_OUT_MOBILE,
+  TRAILING_ICON_BUTTON,
+  TRAILING_ICON_WRAP,
+} from './NavHeaderActions.variants';
+
+/**
+ * NavHeaderActions
+ *
+ * Header-bar actions cluster. Two modes:
+ *
+ *   loggedIn=false →  [ Log in ] [ Sign Up ]   (stacked on `mobile`)
+ *   loggedIn=true  →  Avatar · Name/email · Chevron   (Logout icon on `mobile`)
+ *
+ * Layout is intentionally flex-based without any `dir` awareness in JSX —
+ * an ambient `dir="rtl"` on `<html>` mirrors the flex order automatically,
+ * and all reused sub-components (Button, Avatar) already use logical
+ * properties (`ps-*`/`pe-*`) internally.
+ */
+export const NavHeaderActions = forwardRef<HTMLDivElement, NavHeaderActionsProps>(
+  function NavHeaderActions(
+    {
+      loggedIn = false,
+      mobile = false,
+      name,
+      email,
+      avatarSrc,
+      avatarAlt = '',
+      avatarInitials,
+      loginLabel = 'Log in',
+      signUpLabel = 'Sign Up',
+      onLoginClick,
+      onSignUpClick,
+      onMenuClick,
+      onLogoutClick,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* ── Logged-out: two auth buttons ──────────────────────────── */
+    if (!loggedIn) {
+      const rootClass = mobile
+        ? ROOT_LOGGED_OUT_MOBILE
+        : ROOT_LOGGED_OUT_DESKTOP;
+
+      return (
+        <div
+          ref={ref}
+          data-slot="nav-header-actions"
+          data-logged-in="false"
+          data-mobile={mobile}
+          className={cn(rootClass, className)}
+          {...rest}
+        >
+          <Button
+            data-slot="nav-header-login"
+            variant="neutral"
+            size="lg"
+            fullWidth={mobile}
+            onClick={onLoginClick}
+          >
+            {loginLabel}
+          </Button>
+          <Button
+            data-slot="nav-header-signup"
+            variant="primary"
+            size="lg"
+            fullWidth={mobile}
+            onClick={onSignUpClick}
+          >
+            {signUpLabel}
+          </Button>
+        </div>
+      );
+    }
+
+    /* ── Logged-in: avatar + identity + trailing icon ──────────── */
+    const rootClass = mobile ? ROOT_LOGGED_IN_MOBILE : ROOT_LOGGED_IN_DESKTOP;
+
+    // Pick the trailing icon + its click handler based on layout.
+    const trailingIcon = mobile ? (
+      <Logout02Icon aria-hidden="true" />
+    ) : (
+      <ChevronDownIcon aria-hidden="true" />
+    );
+    const trailingHandler = mobile ? onLogoutClick : onMenuClick;
+    const trailingLabel = mobile ? 'Log out' : 'Open profile menu';
+    const trailingSlot = mobile ? 'nav-header-logout' : 'nav-header-menu';
+    const isInteractive = typeof trailingHandler === 'function';
+
+    return (
+      <div
+        ref={ref}
+        data-slot="nav-header-actions"
+        data-logged-in="true"
+        data-mobile={mobile}
+        className={cn(rootClass, className)}
+        {...rest}
+      >
+        <Avatar
+          data-slot="nav-header-avatar"
+          size="lg"
+          shape="round"
+          type={avatarSrc ? 'image' : avatarInitials ? 'initials' : 'icon'}
+          src={avatarSrc}
+          alt={avatarAlt}
+          initials={avatarInitials}
+        />
+
+        <div data-slot="nav-header-identity" className={IDENTITY_WRAP}>
+          <div className={IDENTITY_TEXT_COL}>
+            {name ? (
+              <p data-slot="nav-header-name" className={IDENTITY_NAME}>
+                {name}
+              </p>
+            ) : null}
+            {email ? (
+              <p data-slot="nav-header-email" className={IDENTITY_EMAIL}>
+                {email}
+              </p>
+            ) : null}
+          </div>
+
+          {isInteractive ? (
+            <button
+              type="button"
+              data-slot={trailingSlot}
+              aria-label={trailingLabel}
+              onClick={trailingHandler}
+              className={TRAILING_ICON_BUTTON}
+            >
+              {trailingIcon}
+            </button>
+          ) : (
+            <span data-slot={trailingSlot} className={TRAILING_ICON_WRAP}>
+              {trailingIcon}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+NavHeaderActions.displayName = 'NavHeaderActions';

package/src/components/NavHeaderActions/NavHeaderActions.types.ts

@@ -0,0 +1,61 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Props for the `NavHeaderActions` cluster that sits inside a header bar.
+ *
+ * Two high-level modes, controlled by `loggedIn`:
+ *  - `false` → renders Log in (outlined) + Sign Up (primary) buttons.
+ *  - `true`  → renders the authenticated identity block: Avatar + name/email
+ *              + a trailing action icon.
+ *
+ * The `mobile` flag is a layout variant (not a viewport query): it stacks
+ * the auth buttons vertically full-width, and swaps the trailing chevron
+ * for a logout icon on the logged-in variant. RTL is inherited from the
+ * ambient `dir="rtl"` — no per-component prop.
+ */
+export interface NavHeaderActionsProps extends HTMLAttributes<HTMLDivElement> {
+  /** When true, show the authenticated identity variant. @default false */
+  loggedIn?: boolean;
+  /**
+   * Force the mobile layout (stacked buttons / logout trailing icon).
+   * Independent from viewport — the parent header decides when to pass it.
+   * @default false
+   */
+  mobile?: boolean;
+
+  /* ─── Logged-in content ─────────────────────────────────────── */
+  /** User's display name shown on the first line. */
+  name?: string;
+  /** User's email shown on the second line. */
+  email?: string;
+  /** Avatar image `src`. */
+  avatarSrc?: string;
+  /** Avatar image `alt` text. */
+  avatarAlt?: string;
+  /** Initials fallback (only used when `avatarSrc` is omitted). */
+  avatarInitials?: string;
+
+  /* ─── Logged-out labels ─────────────────────────────────────── */
+  /** Log-in button label. @default 'Log in' */
+  loginLabel?: string;
+  /** Sign-up button label. @default 'Sign Up' */
+  signUpLabel?: string;
+
+  /* ─── Handlers ──────────────────────────────────────────────── */
+  /** Click handler for the Log in button (logged-out). */
+  onLoginClick?: () => void;
+  /** Click handler for the Sign Up button (logged-out). */
+  onSignUpClick?: () => void;
+  /**
+   * Click handler for the desktop trailing chevron (logged-in, non-mobile).
+   * When provided, the chevron renders as a focusable button; otherwise
+   * it is a static decorative icon.
+   */
+  onMenuClick?: () => void;
+  /**
+   * Click handler for the mobile logout icon (logged-in, mobile).
+   * When provided, the icon renders as a focusable button; otherwise
+   * it is a static decorative icon.
+   */
+  onLogoutClick?: () => void;
+}

package/src/components/NavHeaderActions/NavHeaderActions.variants.ts

@@ -0,0 +1,58 @@
+/**
+ * Class-name maps for NavHeaderActions.
+ *
+ * Token-driven — spacing/typography come from `globals.css` custom properties
+ * so a consumer who installs the package on a fresh project gets the same
+ * layout automatically. The 220 px container width is the only hardcoded
+ * dimension and comes straight from the Figma spec; no token covers it.
+ */
+
+/** Root flex container — layout changes per (loggedIn, mobile). */
+export const ROOT_LOGGED_OUT_DESKTOP =
+  'inline-flex items-center gap-spacing-lg';
+
+export const ROOT_LOGGED_OUT_MOBILE =
+  'flex flex-col items-start justify-center gap-spacing-lg w-[220px]';
+
+export const ROOT_LOGGED_IN_DESKTOP =
+  'inline-flex items-start gap-spacing-md';
+
+export const ROOT_LOGGED_IN_MOBILE =
+  'flex items-center gap-spacing-md w-[220px]';
+
+/** Inner wrapper grouping (name/email) with the trailing action icon. */
+export const IDENTITY_WRAP =
+  'flex items-center gap-spacing-lg min-w-0 flex-1';
+
+/** Identity text column (name + email, stacked). */
+export const IDENTITY_TEXT_COL =
+  'flex min-w-0 flex-1 flex-col items-start justify-center';
+
+/** Name line — 14 / semibold / line-height 20. Figma: Text sm/Semibold. */
+export const IDENTITY_NAME =
+  'w-full truncate text-text-sm font-[600] leading-[20px] text-color-display dark:text-white';
+
+/** Email line — 14 / regular / line-height 20. Figma: Text sm/Regular. */
+export const IDENTITY_EMAIL =
+  'w-full truncate text-text-sm font-[400] leading-[20px] text-color-field-helper-text dark:text-[rgba(157,164,174,1)]';
+
+/**
+ * Trailing icon wrapper — `size-icon-lg` = 20 px on desktop (matches Figma).
+ * Carries `inline-flex` + centering so the SVG renders perfectly centered
+ * even when it uses a different intrinsic viewBox.
+ */
+export const TRAILING_ICON_WRAP =
+  'inline-flex shrink-0 items-center justify-center size-icon-lg text-color-field-helper-text dark:text-[rgba(157,164,174,1)]';
+
+/**
+ * Interactive variant of the trailing-icon wrapper — used when a handler
+ * is supplied so the element becomes a focusable button. Uses logical
+ * focus-ring offsets so the ring sits correctly in RTL.
+ */
+export const TRAILING_ICON_BUTTON =
+  [
+    TRAILING_ICON_WRAP,
+    'rounded-full cursor-pointer motion-feedback',
+    'hover:text-color-display dark:hover:text-white',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.4)] focus-visible:ring-offset-2',
+  ].join(' ');

package/src/components/NavHeaderActions/index.ts

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