sdaia-ui 1.0.1 → 1.0.2

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

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

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

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

package/src/components/NavLogoPlaceholder/NavLogoPlaceholder.tsx

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

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

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

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

package/src/components/NotificationBanner/NotificationBanner.tsx

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

@@ -1,77 +0,0 @@
-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;
-}