sdaia-ui 1.0.1 → 1.0.2

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

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

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

package/src/components/NavHeaderActions/NavHeaderActions.tsx

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

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

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

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