sdaia-ui 1.0.1

package/src/components/NavLabel/NavLabel.types.ts

@@ -0,0 +1,55 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Controls whether the full label or the abbreviation is shown.
+ *
+ * - `'lg'` → full label text, fills container width (expanded sidebar)
+ * - `'sm'` → abbreviated text (first 2 chars), centered (collapsed sidebar)
+ *
+ * Figma: "Size" property on _Label Item (node 4919:58193).
+ */
+export type NavLabelSize = 'lg' | 'sm';
+
+/**
+ * Controls the text color scheme.
+ *
+ * - `'default'` → dark text for a light-background sidebar
+ * - `'brand'`   → white text for a brand-colored sidebar background
+ *
+ * Figma: "Style" property — Default | Background Brand.
+ */
+export type NavLabelStyle = 'default' | 'brand';
+
+export interface NavLabelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+  /** Section label text displayed in full when size='lg' */
+  label?: string;
+
+  /**
+   * Short abbreviation shown when size='sm' (collapsed sidebar).
+   * Defaults to the first 2 characters of `label`.
+   */
+  abbreviation?: string;
+
+  /**
+   * Size variant.
+   * - `'lg'` renders the full label (expanded sidebar).
+   * - `'sm'` renders the abbreviation only, centered (collapsed sidebar).
+   * @default 'lg'
+   */
+  size?: NavLabelSize;
+
+  /**
+   * When true, renders the label text at reduced opacity to indicate
+   * the section is unavailable.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Color scheme to match the sidebar background.
+   * - `'default'` → dark text (`#1f2a37`) on a light sidebar.
+   * - `'brand'`   → white text on a brand-colored sidebar.
+   * @default 'default'
+   */
+  style?: NavLabelStyle;
+}

package/src/components/NavLabel/NavLabel.variants.ts

@@ -0,0 +1,68 @@
+import type { NavLabelStyle } from './NavLabel.types';
+
+/*
+ * NavLabel variant maps
+ *
+ * Figma source: node 4919:58193 "_Label Item"
+ * Variables traced to get_variable_defs output dated 2026-04-17.
+ *
+ * Layout tokens (from Figma):
+ *   pt: spacing-xl  (16px desktop / 12px mobile — token handles responsiveness)
+ *   pb: spacing-md  (8px all breakpoints)
+ *   px: spacing-md  (8px all breakpoints)
+ *
+ * Typography:
+ *   text-text-xs  → 12px (Size/Text/typo-size-text-xs)
+ *   font-[400]    → Font Weight/font-weight-regular
+ *   leading-[18px]→ Line Height/Text/line-heights-text-xs
+ *
+ * Root opacity:
+ *   All states:  opacity-70  (design intention — section labels are
+ *                             de-emphasised relative to nav items)
+ *   Disabled text gets additional opacity-40 on the <p> element.
+ */
+
+/* ── Root container ──────────────────────────────────────────────
+ * Base layout shared by all size × style × state combinations.
+ * opacity-70 is applied to ALL states (Active + Disabled) per Figma.
+ */
+export const ROOT_BASE =
+  'flex items-center gap-spacing-md px-spacing-md pb-spacing-md pt-spacing-xl w-full opacity-70';
+
+/* Small size: only the abbreviation is shown, centered */
+export const ROOT_SM = 'justify-center';
+
+/* ── Label text ──────────────────────────────────────────────────
+ * Typography constants shared across all variants.
+ *
+ * Text/text-xs       → text-text-xs   (12px → scales via token)
+ * font-weight-regular → font-[400]
+ * line-heights-text-xs → leading-[18px]  (hardcoded — no leading token exists)
+ */
+export const LABEL_BASE = [
+  'text-text-xs font-[400] leading-[18px]',
+  'overflow-hidden text-ellipsis whitespace-nowrap',
+].join(' ');
+
+/** Large size: text expands to fill the container */
+export const LABEL_LG = 'flex-1 min-w-0';
+
+/** Small size: text hugs its own content (2-char abbreviation) */
+export const LABEL_SM = 'shrink-0';
+
+/* ── Color by style ──────────────────────────────────────────────
+ * Default:  text/text-display         = #1f2a37  (light)
+ *                                       #f9fafb  (dark — consistent with codebase)
+ * Brand:    text/text-oncolor-primary  = #ffffff  (always white, on brand bg)
+ */
+export const LABEL_COLOR: Record<NavLabelStyle, string> = {
+  default: 'text-[#1f2a37] dark:text-[#f9fafb]',
+  brand: 'text-white dark:text-white',
+};
+
+/* ── Disabled state ──────────────────────────────────────────────
+ * Figma: opacity-40 on the text <p> element when State=Disabled.
+ * Combined with the root's opacity-70, the effective opacity is
+ * 0.70 × 0.40 = 0.28 — visually very faded.
+ */
+export const LABEL_DISABLED = 'opacity-40';

package/src/components/NavLabel/index.ts

@@ -0,0 +1,2 @@
+export { NavLabel } from './NavLabel';
+export type { NavLabelProps, NavLabelSize, NavLabelStyle } from './NavLabel.types';

package/src/components/NavLogoPlaceholder/NavLogoPlaceholder.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { NavLogoPlaceholderProps } from './NavLogoPlaceholder.types';
+import {
+  LOGO_DIMS,
+  TEXT_CLASSES,
+  TEXT_COLOR,
+  TEXT_WEIGHT,
+  CONTAINER,
+  TEXT_ALIGN,
+} from './NavLogoPlaceholder.variants';
+import { SdaiaNavLogo } from '../../icons/SdaiaNavLogo';
+
+/**
+ * NavLogoPlaceholder
+ *
+ * A branded logo lockup for use in navigation bars and sidebars.
+ * Renders the SDAIA logo mark alongside a text label in three sizes
+ * and two layout positions.
+ *
+ * ── Sizes ──────────────────────────────────────────────────────────────────
+ *   `large`  — 59×64 px logo · text-text-md (16 px)
+ *   `medium` — 45×48 px logo · text-text-sm (14 px)
+ *   `small`  — 30×32 px logo · text-text-xs (12 px)
+ *
+ * ── Positions ──────────────────────────────────────────────────────────────
+ *   `side` — logo and label in a horizontal row (logo leads in LTR, trails in RTL)
+ *   `top`  — logo stacked above centred label
+ *
+ * ── RTL ────────────────────────────────────────────────────────────────────
+ *   RTL is handled automatically by the browser when `dir="rtl"` is set on
+ *   any ancestor. In `side` mode the flex-row order reverses so the logo
+ *   moves to the trailing (right) edge — no extra code needed.
+ *
+ * ── Dark mode ──────────────────────────────────────────────────────────────
+ *   The text label switches to a lighter gray via `dark:` classes.
+ *   The logo SVG is a multi-colour graphic and renders identically in both modes.
+ *
+ * @example
+ * // Default — large, side
+ * <NavLogoPlaceholder />
+ *
+ * // Medium, top
+ * <NavLogoPlaceholder size="medium" logoPosition="top" />
+ *
+ * // RTL — set dir="rtl" on a parent; logo automatically moves to trailing edge
+ * <div dir="rtl"><NavLogoPlaceholder /></div>
+ */
+export const NavLogoPlaceholder = forwardRef<HTMLDivElement, NavLogoPlaceholderProps>(
+  function NavLogoPlaceholder(
+    {
+      size = 'large',
+      logoPosition = 'side',
+      text = 'Platform Logo',
+      showText = true,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const { width, height } = LOGO_DIMS[size];
+
+    return (
+      <div
+        ref={ref}
+        data-slot="nav-logo-placeholder"
+        data-size={size}
+        data-logo-position={logoPosition}
+        className={cn(CONTAINER[logoPosition], className)}
+        {...rest}
+      >
+        {/* Logo mark */}
+        <SdaiaNavLogo
+          data-slot="nav-logo-placeholder-icon"
+          width={width}
+          height={height}
+          aria-hidden="true"
+        />
+
+        {/* Text label */}
+        {showText && (
+          <span
+            data-slot="nav-logo-placeholder-text"
+            className={cn(
+              TEXT_CLASSES[size],
+              TEXT_COLOR,
+              TEXT_WEIGHT,
+              TEXT_ALIGN[logoPosition],
+            )}
+          >
+            {text}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+NavLogoPlaceholder.displayName = 'NavLogoPlaceholder';

package/src/components/NavLogoPlaceholder/NavLogoPlaceholder.types.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Visual size tier — controls logo dimensions and label typography.
+ *   large  → 59×64 px logo, text-text-md (16px)
+ *   medium → 45×48 px logo, text-text-sm (14px)
+ *   small  → 30×32 px logo, text-text-xs (12px)
+ */
+export type NavLogoPlaceholderSize = 'large' | 'medium' | 'small';
+
+/**
+ * Arrangement of the logo relative to the text label.
+ *   side → logo and text sit in a horizontal row (logo leads)
+ *   top  → logo stacks above the text label, both centred
+ */
+export type NavLogoPlaceholderPosition = 'side' | 'top';
+
+export interface NavLogoPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
+  /** Size tier — controls logo dimensions and label typography. @default 'large' */
+  size?: NavLogoPlaceholderSize;
+  /** Layout of logo relative to label. @default 'side' */
+  logoPosition?: NavLogoPlaceholderPosition;
+  /** Text shown next to / below the logo. @default 'Platform Logo' */
+  text?: string;
+  /** Whether to render the text label. @default true */
+  showText?: boolean;
+}

package/src/components/NavLogoPlaceholder/NavLogoPlaceholder.variants.ts

@@ -0,0 +1,42 @@
+import type { NavLogoPlaceholderSize, NavLogoPlaceholderPosition } from './NavLogoPlaceholder.types';
+
+// ── Logo pixel dimensions ─────────────────────────────────────────────────────
+// Figma: Large 59×64, Medium 45×48, Small 30×32
+export const LOGO_DIMS: Record<NavLogoPlaceholderSize, { width: number; height: number }> = {
+  large:  { width: 59, height: 64 },
+  medium: { width: 45, height: 48 },
+  small:  { width: 30, height: 32 },
+};
+
+// ── Text typography ───────────────────────────────────────────────────────────
+// Token mapping:
+//   large  → text-text-md (16px)  / leading-[24px] / font-[500]
+//   medium → text-text-sm (14px)  / leading-[20px] / font-[500]
+//   small  → text-text-xs (12px)  / leading-[18px] / font-[500]
+//
+// Color: Text/text-secondary-paragraph → #6c737f (dark: #9ca3af)
+export const TEXT_CLASSES: Record<NavLogoPlaceholderSize, string> = {
+  large:  'text-text-md leading-[24px]',
+  medium: 'text-text-sm leading-[20px]',
+  small:  'text-text-xs leading-[18px]',
+};
+
+export const TEXT_COLOR =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+export const TEXT_WEIGHT = 'font-[500] whitespace-nowrap';
+
+// ── Container layout ──────────────────────────────────────────────────────────
+// Outer padding: Global/spacing-xs = 4px → p-spacing-xs
+// Gap between logo and text: Global/spacing-md = 8px → gap-spacing-md
+export const CONTAINER: Record<NavLogoPlaceholderPosition, string> = {
+  side: 'flex flex-row items-center gap-spacing-md p-spacing-xs',
+  top:  'flex flex-col items-center justify-center gap-spacing-md p-spacing-xs',
+};
+
+// ── Text alignment per position ───────────────────────────────────────────────
+// Top position → centred text. Side → start-aligned (inherits ltr/rtl).
+export const TEXT_ALIGN: Record<NavLogoPlaceholderPosition, string> = {
+  side: '',
+  top:  'text-center',
+};

package/src/components/NavLogoPlaceholder/index.ts

@@ -0,0 +1,6 @@
+export { NavLogoPlaceholder } from './NavLogoPlaceholder';
+export type {
+  NavLogoPlaceholderProps,
+  NavLogoPlaceholderSize,
+  NavLogoPlaceholderPosition,
+} from './NavLogoPlaceholder.types';

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import { forwardRef, type ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+import { Avatar } from '../Avatar';
+import { ButtonClose } from '../ButtonClose';
+import { ProgressBar } from '../ProgressBar';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon';
+import type { NotificationBannerProps } from './NotificationBanner.types';
+import {
+  ACTIONS_ROW,
+  ACTIONS_ROW_RTL_JUSTIFY,
+  AVATAR_WRAPPER,
+  CONTENT_COLUMN,
+  CONTENT_COLUMN_INLINE_IMAGE,
+  DESCRIPTION_CLASS,
+  FEATURED_ICON_INNER,
+  FEATURED_ICON_WRAPPER,
+  IMAGE_INLINE,
+  IMAGE_STACKED,
+  PROGRESS_ROW,
+  ROOT_BASE,
+  ROOT_INLINE_COMPACT,
+  ROOT_INLINE_IMAGE,
+  ROOT_STACKED,
+  STACKED_HEADER_ROW,
+  TEXT_BLOCK,
+  TITLE_CLASS,
+  TITLE_CLOSE_ROW,
+} from './NotificationBanner.variants';
+
+/* ── Subcomponents ────────────────────────────────────────────── */
+
+function FeaturedIcon({ icon }: { icon: ReactNode }) {
+  return (
+    <div data-slot="featured-icon" className={FEATURED_ICON_WRAPPER}>
+      <span className={FEATURED_ICON_INNER} aria-hidden="true">
+        {icon ?? <AlertCircleIcon />}
+      </span>
+    </div>
+  );
+}
+
+function AvatarSlot({
+  avatar,
+}: {
+  avatar?: NotificationBannerProps['avatar'];
+}) {
+  const hasImage = Boolean(avatar?.src);
+  return (
+    <div data-slot="avatar" className={AVATAR_WRAPPER}>
+      <Avatar
+        size="md"
+        shape="round"
+        type={hasImage ? 'image' : avatar?.initials ? 'initials' : 'icon'}
+        src={avatar?.src}
+        alt={avatar?.alt}
+        initials={avatar?.initials}
+      />
+    </div>
+  );
+}
+
+/* ── Component ────────────────────────────────────────────────── */
+
+export const NotificationBanner = forwardRef<HTMLDivElement, NotificationBannerProps>(
+  function NotificationBanner(
+    {
+      layout = 'inline',
+      type = 'leading-icon',
+      title,
+      description,
+      icon,
+      avatar,
+      imageSrc,
+      imageAlt = '',
+      progress = 40,
+      actions,
+      onDismiss,
+      hideCloseButton = false,
+      dismissLabel = 'Close',
+      dir: dirProp,
+      rtl = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+    const isRtl = dir === 'rtl';
+
+    const rootLayoutClass =
+      layout === 'stacked'
+        ? ROOT_STACKED
+        : type === 'image'
+          ? ROOT_INLINE_IMAGE
+          : ROOT_INLINE_COMPACT;
+
+    /* ── Media slot (start-edge element for inline, top row for stacked) ─ */
+
+    const mediaNode = (() => {
+      if (type === 'leading-icon') return <FeaturedIcon icon={icon} />;
+      if (type === 'avatar' || type === 'progress') return <AvatarSlot avatar={avatar} />;
+      if (type === 'image' && imageSrc) {
+        return (
+          <img
+            data-slot="image"
+            src={imageSrc}
+            alt={imageAlt}
+            className={layout === 'stacked' ? IMAGE_STACKED : IMAGE_INLINE}
+          />
+        );
+      }
+      return null;
+    })();
+
+    /* ── Close button ───────────────────────────────────────────── */
+
+    const closeButton = hideCloseButton ? null : (
+      <ButtonClose
+        data-slot="close"
+        size="sm"
+        aria-label={dismissLabel}
+        onClick={onDismiss}
+      />
+    );
+
+    /* ── Text block (title + description) ───────────────────────── */
+
+    const textBlock = (
+      <div
+        data-slot="text"
+        className={cn(TEXT_BLOCK, isRtl && 'text-right')}
+      >
+        <p className={TITLE_CLASS}>{title}</p>
+        {description ? <p className={DESCRIPTION_CLASS}>{description}</p> : null}
+      </div>
+    );
+
+    /* ── Actions row ────────────────────────────────────────────── */
+
+    const actionsNode = actions ? (
+      <div
+        data-slot="actions"
+        className={cn(ACTIONS_ROW, isRtl && ACTIONS_ROW_RTL_JUSTIFY)}
+      >
+        {actions}
+      </div>
+    ) : null;
+
+    /* ── Progress row (only for progress type) ──────────────────── */
+
+    const progressNode =
+      type === 'progress' ? (
+        <div data-slot="progress" className={PROGRESS_ROW}>
+          <ProgressBar
+            progress={progress}
+            label="inline"
+            leadingIcon
+            trailingIcon
+            valueMin
+            valueMax
+            dir={isRtl ? 'rtl' : 'ltr'}
+          />
+        </div>
+      ) : null;
+
+    /* ──────────────────────────────────────────────────────────────
+     * STACKED layout
+     * Header: [media | close]   Then: text → [progress] → actions
+     * ────────────────────────────────────────────────────────────── */
+
+    if (layout === 'stacked') {
+      return (
+        <div
+          ref={ref}
+          dir={dir}
+          data-slot="notification-banner"
+          data-layout="stacked"
+          data-type={type}
+          className={cn('motion-enter', ROOT_BASE, rootLayoutClass, className)}
+          {...rest}
+        >
+          {/* Header row: media on one side, close on the other */}
+          {type === 'image' ? (
+            // Image takes the full header row — close button overlays corner
+            <div data-slot="image-wrapper" className="relative w-full">
+              {mediaNode}
+              {closeButton ? (
+                <div
+                  className={cn(
+                    'absolute top-spacing-md',
+                    isRtl ? 'start-spacing-md' : 'end-spacing-md',
+                  )}
+                >
+                  {closeButton}
+                </div>
+              ) : null}
+            </div>
+          ) : (
+            <div data-slot="stacked-header" className={STACKED_HEADER_ROW}>
+              {mediaNode}
+              {closeButton}
+            </div>
+          )}
+
+          {textBlock}
+          {progressNode}
+
+          {actionsNode ? (
+            <div
+              data-slot="actions"
+              className={cn(ACTIONS_ROW, isRtl && ACTIONS_ROW_RTL_JUSTIFY)}
+            >
+              {actions}
+            </div>
+          ) : null}
+        </div>
+      );
+    }
+
+    /* ──────────────────────────────────────────────────────────────
+     * INLINE layouts
+     * Root (flex-row): [media | content-column]
+     * Content column: [title-row (text + close)] → [progress?] → [actions?]
+     * ────────────────────────────────────────────────────────────── */
+
+    const contentColumnClass =
+      type === 'image' ? CONTENT_COLUMN_INLINE_IMAGE : CONTENT_COLUMN;
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="notification-banner"
+        data-layout="inline"
+        data-type={type}
+        className={cn(ROOT_BASE, rootLayoutClass, className)}
+        {...rest}
+      >
+        {mediaNode}
+
+        <div data-slot="content" className={contentColumnClass}>
+          <div data-slot="title-row" className={TITLE_CLOSE_ROW}>
+            {textBlock}
+            {closeButton}
+          </div>
+
+          {progressNode}
+          {/* Actions are kept after progress to mirror the Figma structure */}
+          {actionsNode}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/NotificationBanner/NotificationBanner.types.ts

@@ -0,0 +1,77 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Layout orientation — inline puts the media on the start edge, stacked puts it above the content. */
+export type NotificationBannerLayout = 'inline' | 'stacked';
+
+/** Media type rendered alongside the title/description. */
+export type NotificationBannerType = 'leading-icon' | 'avatar' | 'progress' | 'image';
+
+/** Avatar slot config — maps directly onto `<Avatar />` props. */
+export interface NotificationBannerAvatar {
+  /** Image source for the avatar */
+  src?: string;
+  /** Alt text for the avatar image */
+  alt?: string;
+  /** Optional initials fallback (used when `src` is not provided) */
+  initials?: string;
+}
+
+export interface NotificationBannerProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Layout orientation.
+   * - `inline` — media on the start edge, text and actions stacked next to it.
+   * - `stacked` — media row on top, text and actions stacked below.
+   * @default 'inline'
+   */
+  layout?: NotificationBannerLayout;
+  /**
+   * Which media slot is rendered.
+   * - `leading-icon` — rounded featured icon (pass via `icon`).
+   * - `avatar` — 40 px avatar (pass via `avatar`).
+   * - `progress` — avatar + inline `ProgressBar` (pass value via `progress`).
+   * - `image` — image block (pass via `imageSrc`).
+   * @default 'leading-icon'
+   */
+  type?: NotificationBannerType;
+  /** Title text (required) */
+  title: ReactNode;
+  /** Supporting description text */
+  description?: ReactNode;
+  /**
+   * Icon to render inside the featured-icon slot — only used when `type="leading-icon"`.
+   * Defaults to `<AlertCircleIcon />` when omitted.
+   */
+  icon?: ReactNode;
+  /** Avatar slot content — only used when `type="avatar"` or `type="progress"`. */
+  avatar?: NotificationBannerAvatar;
+  /** Image source — only used when `type="image"`. */
+  imageSrc?: string;
+  /** Image alt text — only used when `type="image"`. */
+  imageAlt?: string;
+  /** Progress value 0–100 — only used when `type="progress"`. @default 40 */
+  progress?: number;
+  /**
+   * Action buttons rendered in the actions row.
+   * Typically one or two `<Button variant="transparent" />` elements.
+   */
+  actions?: ReactNode;
+  /** Invoked when the close button is clicked. */
+  onDismiss?: () => void;
+  /**
+   * Hide the close button entirely.
+   * @default false
+   */
+  hideCloseButton?: boolean;
+  /**
+   * Accessible label for the close button.
+   * @default 'Close'
+   */
+  dismissLabel?: string;
+  /**
+   * Direction — applied to the root and drives RTL-aware layout.
+   */
+  dir?: 'ltr' | 'rtl';
+  /** @deprecated Use `dir="rtl"` instead. */
+  rtl?: boolean;
+}