sdaia-ui 1.0.1

package/src/components/ModalHeader/ModalHeader.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { ModalHeaderProps } from './ModalHeader.types';
+
+/** Inline close (X) icon — 20×20, stroke currentColor */
+const CloseIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    width={20}
+    height={20}
+    fill="none"
+  >
+    <path
+      d="M14.5 5.5L5.5 14.5M5.5 5.5L14.5 14.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
+  function ModalHeader(
+    {
+      title = 'Title goes here',
+      supportingText = 'When a Modal needs a further detailed explanation, it goes here.',
+      showSupportingText = true,
+      placement = 'start',
+      featuredIcon,
+      showCloseButton = true,
+      onClose,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const isCenter = placement === 'center';
+    const isStacked = placement === 'start-stacked';
+
+    return (
+      <div
+        ref={ref}
+        data-slot="modal-header"
+        className={cn(
+          'flex flex-col gap-spacing-xl items-start w-full',
+          className,
+        )}
+        {...rest}
+      >
+        {/* ── Start / Center layout ──────────────────────────── */}
+        {!isStacked && (
+          <>
+            {/* Icons row: featured icon + close */}
+            <div
+              data-slot="icons-row"
+              className={cn(
+                'flex items-start w-full shrink-0',
+                isCenter ? 'justify-between' : 'gap-spacing-lg',
+              )}
+            >
+              {/* Center: spacer on start side to balance the close button on end */}
+              {isCenter && (
+                <div className="shrink-0 size-[20px]" />
+              )}
+
+              {/* Start: icon container takes full width to push close to end */}
+              {placement === 'start' && (
+                <div className="flex flex-1 items-center min-h-px min-w-px">
+                  {featuredIcon && (
+                    <FeaturedIconWrapper>{featuredIcon}</FeaturedIconWrapper>
+                  )}
+                </div>
+              )}
+
+              {/* Center: icon in the middle */}
+              {isCenter && featuredIcon && (
+                <FeaturedIconWrapper>{featuredIcon}</FeaturedIconWrapper>
+              )}
+
+              {/* Start: close button on end side */}
+              {placement === 'start' && showCloseButton && (
+                <button
+                  type="button"
+                  data-slot="close-button"
+                  onClick={onClose}
+                  className="shrink-0 flex items-center p-spacing-xxs cursor-pointer text-[rgba(22,22,22,1)] hover:text-[rgba(108,115,127,1)] dark:text-[rgba(229,231,235,1)] dark:hover:text-[rgba(156,163,175,1)] motion-feedback"
+                  aria-label="Close"
+                >
+                  <CloseIcon />
+                </button>
+              )}
+
+              {/* Center: close button on end side */}
+              {isCenter && showCloseButton && (
+                <button
+                  type="button"
+                  data-slot="close-button"
+                  onClick={onClose}
+                  className="shrink-0 flex items-center p-spacing-xxs cursor-pointer text-[rgba(22,22,22,1)] hover:text-[rgba(108,115,127,1)] dark:text-[rgba(229,231,235,1)] dark:hover:text-[rgba(156,163,175,1)] motion-feedback"
+                  aria-label="Close"
+                >
+                  <CloseIcon />
+                </button>
+              )}
+
+              {/* Center: spacer on end side when no close button */}
+              {isCenter && !showCloseButton && (
+                <div className="shrink-0 size-[20px]" />
+              )}
+            </div>
+
+            {/* Text section */}
+            <div
+              data-slot="text-content"
+              className={cn(
+                'flex flex-col gap-spacing-xs items-start w-full shrink-0',
+                isCenter && 'text-center',
+              )}
+            >
+              <p className="text-text-lg font-[600] leading-[28px] text-[rgba(31,42,55,1)] dark:text-[rgba(249,250,251,1)] w-full">
+                {title}
+              </p>
+              {showSupportingText && supportingText && (
+                <p className="text-text-sm font-[400] leading-[20px] text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)] w-full">
+                  {supportingText}
+                </p>
+              )}
+            </div>
+          </>
+        )}
+
+        {/* ── Start-Stacked layout ──────────────────────────── */}
+        {isStacked && (
+          <div
+            data-slot="stacked-wrapper"
+            className="flex gap-spacing-lg items-start w-full shrink-0"
+          >
+            {/* Featured icon */}
+            {featuredIcon && (
+              <FeaturedIconWrapper>{featuredIcon}</FeaturedIconWrapper>
+            )}
+
+            {/* Text + close button */}
+            <div className="flex flex-1 gap-spacing-lg items-start min-h-px min-w-px">
+              {/* Text */}
+              <div
+                data-slot="text-content"
+                className="flex flex-1 flex-col gap-spacing-xs items-start self-stretch min-h-px min-w-px"
+              >
+                <p className="text-text-lg font-[600] leading-[28px] text-[rgba(31,42,55,1)] dark:text-[rgba(249,250,251,1)] w-full">
+                  {title}
+                </p>
+                {showSupportingText && supportingText && (
+                  <p className="text-text-sm font-[400] leading-[20px] text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)] w-full">
+                    {supportingText}
+                  </p>
+                )}
+              </div>
+
+              {/* Close button */}
+              {showCloseButton && (
+                <button
+                  type="button"
+                  data-slot="close-button"
+                  onClick={onClose}
+                  className="shrink-0 flex items-center p-spacing-xxs cursor-pointer text-[rgba(22,22,22,1)] hover:text-[rgba(108,115,127,1)] dark:text-[rgba(229,231,235,1)] dark:hover:text-[rgba(156,163,175,1)] motion-feedback"
+                  aria-label="Close"
+                >
+                  <CloseIcon />
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* ── Children (Instance Rows) ──────────────────────── */}
+        {children && (
+          <div
+            data-slot="modal-header-content"
+            className="flex flex-col gap-spacing-lg items-start w-full shrink-0"
+          >
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+/** Shared featured-icon circle wrapper */
+function FeaturedIconWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      data-slot="featured-icon"
+      className="shrink-0 flex items-center p-[10px] rounded-full bg-[rgba(249,250,251,1)] dark:bg-[rgba(255,255,255,0.08)]"
+    >
+      <span className="size-icon-md flex items-center justify-center text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]">
+        {children}
+      </span>
+    </div>
+  );
+}

package/src/components/ModalHeader/ModalHeader.types.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type ModalHeaderPlacement = 'start' | 'center' | 'start-stacked';
+
+export interface ModalHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Title text */
+  title?: string;
+  /** Supporting description text */
+  supportingText?: string;
+  /** Show supporting text */
+  showSupportingText?: boolean;
+  /** Header layout placement */
+  placement?: ModalHeaderPlacement;
+  /** Show featured icon */
+  featuredIcon?: ReactNode;
+  /** Show close button */
+  showCloseButton?: boolean;
+  /** Close button click handler */
+  onClose?: () => void;
+  /** Content slot (instance rows) */
+  children?: ReactNode;
+  /** Additional class name */
+  className?: string;
+}

package/src/components/ModalHeader/index.ts

@@ -0,0 +1,2 @@
+export { ModalHeader } from './ModalHeader';
+export type { ModalHeaderProps, ModalHeaderPlacement } from './ModalHeader.types';

package/src/components/NavBar/NavBar.tsx

@@ -0,0 +1,326 @@
+'use client';
+
+import { forwardRef, useState, useMemo, useEffect } from 'react';
+import { cn } from '../../lib/cn';
+import type { NavBarProps } from './NavBar.types';
+import {
+  SIDEBAR_BG,
+  ITEM_VARIANT,
+  HEADER_FOOTER_VARIANT,
+  FOOTER_VARIANT,
+  LABEL_STYLE,
+  NAV_BASE,
+  NAV_EXPANDED_DESKTOP,
+  NAV_COLLAPSED_DESKTOP,
+  NAV_MOBILE_EXPANDED,
+  NAV_MOBILE_COLLAPSED,
+  MOBILE_BACKDROP,
+  CONTENT_AREA_EXPANDED,
+  CONTENT_AREA_COLLAPSED,
+} from './NavBar.variants';
+import { HamburgerIcon, CloseIcon } from '../../icons/IconFactory';
+import { HeaderItem } from '../HeaderItem';
+import { FooterItem } from '../FooterItem';
+import { MenuItemGroup } from '../MenuItemGroup';
+
+/**
+ * NavBar — Sidebar navigation shell.
+ *
+ * Composes `HeaderItem`, `FooterItem`, and `MenuItemGroup` / `MenuButtonItem`
+ * into a full sidebar navigation layout. Pixel-perfect match to Figma node
+ * 4950-53598 ("Nav Bar") across all 12 variants.
+ *
+ * ── Layout variants ───────────────────────────────────────────────────────
+ *   Desktop expanded   → 255 px wide, full nav (header + groups + footer)
+ *   Desktop collapsed  → 64 px wide, icon-only strip
+ *   Mobile expanded    → 320 px fixed overlay drawer with backdrop
+ *   Mobile collapsed   → full-width 68 px header strip + hamburger icon
+ *
+ * ── Style variants ────────────────────────────────────────────────────────
+ *   `default` — white background, dark text
+ *   `gray`    — neutral-100 background (#f3f4f6), dark text
+ *   `brand`   — green background (#1b8354), white text on all sub-components
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────
+ *   All directional properties use logical CSS (`start-*`/`end-*`).
+ *   The mobile drawer slides in from the inline-start edge in both LTR and RTL.
+ *
+ * @example
+ * // Controlled desktop sidebar
+ * const [collapsed, setCollapsed] = useState(false);
+ * <NavBar
+ *   variant="default"
+ *   collapsed={collapsed}
+ *   onToggle={() => setCollapsed(c => !c)}
+ *   headerProps={{ mainText: 'SDAIA Coe', secondaryText: 'Enterprise' }}
+ *   footerProps={{ mainText: 'User Name', secondaryText: 'user@example.com' }}
+ *   groups={[{
+ *     groupLabel: 'Projects',
+ *     items: [
+ *       { label: 'Playground', selected: true, showTag: true, tagLabel: 'Label' },
+ *       { label: 'Sub menu', type: 'sub-menu' },
+ *     ],
+ *   }]}
+ * />
+ */
+export const NavBar = forwardRef<HTMLElement, NavBarProps>(function NavBar(
+  {
+    variant = 'default',
+    collapsed,
+    mobile,
+    onToggle,
+    headerProps,
+    footerProps,
+    groups = [],
+    className,
+    ...rest
+  },
+  ref,
+) {
+  /* ── Auto viewport detection (used when `mobile` prop is not provided) ── */
+  // Detects whether the viewport is below the 768 px mobile breakpoint.
+  // When `mobile` prop is explicitly set, the consumer controls the layout
+  // entirely; auto-detection is bypassed.
+  const isControlled = mobile !== undefined;
+
+  const [autoIsMobile, setAutoIsMobile] = useState<boolean>(() => {
+    if (typeof window !== 'undefined') return window.innerWidth < 768;
+    return false;
+  });
+  const [autoMobileCollapsed, setAutoMobileCollapsed] = useState(true);
+
+  useEffect(() => {
+    if (isControlled) return; // skip when prop is explicitly set
+    const BREAKPOINT = 768;
+    const check = () => {
+      const small = window.innerWidth < BREAKPOINT;
+      setAutoIsMobile((prev) => {
+        // Reset drawer to closed whenever we enter mobile mode
+        if (small && !prev) setAutoMobileCollapsed(true);
+        return small;
+      });
+    };
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, [isControlled]);
+
+  // Resolved layout values
+  const effectiveMobile    = isControlled ? mobile! : autoIsMobile;
+  const effectiveCollapsed = isControlled
+    ? (collapsed ?? false)
+    : (effectiveMobile ? autoMobileCollapsed : (collapsed ?? false));
+  const effectiveOnToggle  = isControlled
+    ? onToggle
+    : (effectiveMobile
+        ? () => setAutoMobileCollapsed((v) => !v)
+        : onToggle);
+
+  /* ── Derived variant props for sub-components ─────────────────────────── */
+  const itemVariant = ITEM_VARIANT[variant];
+  const headerVariant = HEADER_FOOTER_VARIANT[variant];
+  const footerVariant = FOOTER_VARIANT[variant];
+  const labelStyle = LABEL_STYLE[variant];
+  const bg = SIDEBAR_BG[variant];
+
+  /* ── Internal selection state ─────────────────────────────────────────── */
+  const initialKey = useMemo(() => {
+    for (let gi = 0; gi < groups.length; gi++) {
+      const items = groups[gi].items;
+      for (let ii = 0; ii < items.length; ii++) {
+        if (items[ii].selected) return `${gi}-${ii}`;
+      }
+    }
+    return null;
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const [selectedKey, setSelectedKey] = useState<string | null>(initialKey);
+
+  /* ── Group list renderer (shared by all expanded layouts) ─────────────── */
+  const renderGroups = (size: 'lg' | 'sm') =>
+    groups.map((group, gi) => (
+      <MenuItemGroup
+        key={gi}
+        groupLabel={group.groupLabel}
+        showLabel={group.showLabel}
+        size={size}
+        variant={itemVariant}
+        labelStyle={labelStyle}
+        items={group.items.map((item, ii) => ({
+          ...item,
+          selected: selectedKey === `${gi}-${ii}`,
+          onClick: () => {
+            setSelectedKey(`${gi}-${ii}`);
+            item.onClick?.();
+          },
+        }))}
+      />
+    ));
+
+  /* ═══════════════════════════════════════════════════════════════════════
+     MOBILE COLLAPSED — full-width 68 px header strip with hamburger icon
+  ═══════════════════════════════════════════════════════════════════════ */
+  if (effectiveMobile && effectiveCollapsed) {
+    return (
+      <header
+        ref={ref as React.Ref<HTMLElement>}
+        data-slot="nav-bar"
+        data-state="collapsed"
+        data-style={variant}
+        data-mobile="true"
+        className={cn(NAV_MOBILE_COLLAPSED, bg, className)}
+        {...(rest as React.HTMLAttributes<HTMLElement>)}
+      >
+        <HeaderItem
+          size="large"
+          variant={headerVariant}
+          actionIcon={<HamburgerIcon />}
+          showAction
+          onClick={effectiveOnToggle}
+          {...headerProps}
+        />
+      </header>
+    );
+  }
+
+  /* ═══════════════════════════════════════════════════════════════════════
+     MOBILE EXPANDED — fixed overlay drawer + semi-transparent backdrop
+  ═══════════════════════════════════════════════════════════════════════ */
+  if (effectiveMobile && !effectiveCollapsed) {
+    return (
+      <>
+        {/* Backdrop — click to close */}
+        <div
+          aria-hidden="true"
+          className={MOBILE_BACKDROP}
+          onClick={effectiveOnToggle}
+        />
+
+        {/* Drawer */}
+        <nav
+          ref={ref as React.Ref<HTMLElement>}
+          data-slot="nav-bar"
+          data-state="expanded"
+          data-style={variant}
+          data-mobile="true"
+          className={cn(NAV_BASE, NAV_MOBILE_EXPANDED, bg, className)}
+          {...(rest as React.HTMLAttributes<HTMLElement>)}
+        >
+          {/* Header — close icon replaces the action icon */}
+          <HeaderItem
+            size="large"
+            variant={headerVariant}
+            actionIcon={<CloseIcon />}
+            showAction
+            onClick={effectiveOnToggle}
+            {...headerProps}
+          />
+
+          {/* Scrollable nav groups */}
+          <div
+            data-slot="nav-bar-content"
+            className={CONTENT_AREA_EXPANDED}
+          >
+            {renderGroups('lg')}
+          </div>
+
+          {/* Footer */}
+          <FooterItem
+            size="large"
+            variant={footerVariant}
+            {...footerProps}
+          />
+        </nav>
+      </>
+    );
+  }
+
+  /* ═══════════════════════════════════════════════════════════════════════
+     DESKTOP COLLAPSED — 64 px icon-only strip
+  ═══════════════════════════════════════════════════════════════════════ */
+  if (!effectiveMobile && effectiveCollapsed) {
+    return (
+      <nav
+        ref={ref as React.Ref<HTMLElement>}
+        data-slot="nav-bar"
+        data-state="collapsed"
+        data-style={variant}
+        data-mobile="false"
+        className={cn(NAV_BASE, NAV_COLLAPSED_DESKTOP, bg, className)}
+        {...(rest as React.HTMLAttributes<HTMLElement>)}
+      >
+        {/* Top: header + icon groups */}
+        <div
+          data-slot="nav-bar-top"
+          className="flex flex-col items-center w-full shrink-0"
+        >
+          <HeaderItem
+            size="small"
+            variant={headerVariant}
+            onClick={effectiveOnToggle}
+            {...headerProps}
+          />
+
+          <div
+            data-slot="nav-bar-content"
+            className={CONTENT_AREA_COLLAPSED}
+          >
+            {renderGroups('sm')}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <FooterItem
+          size="small"
+          variant={footerVariant}
+          {...footerProps}
+        />
+      </nav>
+    );
+  }
+
+  /* ═══════════════════════════════════════════════════════════════════════
+     DESKTOP EXPANDED — 255 px full sidebar (default)
+  ═══════════════════════════════════════════════════════════════════════ */
+  return (
+    <nav
+      ref={ref as React.Ref<HTMLElement>}
+      data-slot="nav-bar"
+      data-state="expanded"
+      data-style={variant}
+      data-mobile="false"
+      className={cn(NAV_BASE, NAV_EXPANDED_DESKTOP, bg, className)}
+      {...(rest as React.HTMLAttributes<HTMLElement>)}
+    >
+      {/* Top: header + scrollable nav groups */}
+      <div
+        data-slot="nav-bar-top"
+        className="flex flex-col flex-1 min-h-0"
+      >
+        <HeaderItem
+          size="large"
+          variant={headerVariant}
+          showAction
+          onClick={effectiveOnToggle}
+          {...headerProps}
+        />
+
+        <div
+          data-slot="nav-bar-content"
+          className={CONTENT_AREA_EXPANDED}
+        >
+          {renderGroups('lg')}
+        </div>
+      </div>
+
+      {/* Footer — pinned to the bottom */}
+      <FooterItem
+        size="large"
+        variant={footerVariant}
+        {...footerProps}
+      />
+    </nav>
+  );
+});
+
+NavBar.displayName = 'NavBar';

package/src/components/NavBar/NavBar.types.ts

@@ -0,0 +1,78 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { HeaderItemProps } from '../HeaderItem/HeaderItem.types';
+import type { FooterItemProps } from '../FooterItem/FooterItem.types';
+import type { MenuItemGroupItem } from '../MenuItemGroup/MenuItemGroup.types';
+
+/**
+ * Visual background variant of the sidebar.
+ * - `default`  — white background, dark text
+ * - `gray`     — light-gray background (neutral-100), dark text
+ * - `brand`    — green brand background, white text on all sub-components
+ */
+export type NavBarVariant = 'default' | 'gray' | 'brand';
+
+/** One navigation group rendered inside the sidebar content area. */
+export interface NavBarGroup {
+  /** Section heading (e.g. "Projects"). Omit to render a label-less group. */
+  groupLabel?: string;
+  /** Show or hide the section heading row. @default true */
+  showLabel?: boolean;
+  /** Ordered list of items in this group. */
+  items: MenuItemGroupItem[];
+}
+
+export interface NavBarProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Visual background / colour variant.
+   * Controls sidebar background, text colours, and icon colours
+   * across all composed sub-components.
+   * @default 'default'
+   */
+  variant?: NavBarVariant;
+
+  /**
+   * Whether the sidebar is in its collapsed (icon-only) state.
+   * - Desktop collapsed → 64 px wide, icons only.
+   * - Mobile collapsed  → full-width 68 px header strip with hamburger icon.
+   * Pass `false` for the expanded (full) view.
+   * @default false
+   */
+  collapsed?: boolean;
+
+  /**
+   * Enable mobile layout mode.
+   * - When `collapsed` is true  → renders only the header strip + hamburger.
+   * - When `collapsed` is false → renders a fixed full-height overlay drawer
+   *   with a semi-transparent backdrop.
+   * @default false
+   */
+  mobile?: boolean;
+
+  /**
+   * Called when the hamburger button (mobile collapsed) or the close button
+   * (mobile expanded) is clicked. The parent is responsible for toggling
+   * the `collapsed` prop.
+   */
+  onToggle?: () => void;
+
+  /**
+   * Props forwarded to the built-in `HeaderItem` at the top of the sidebar.
+   * Use `mainText`, `secondaryText`, `avatar`, `selected`, `variant`, etc.
+   * The `variant` and `size` props are derived from the NavBar's own
+   * `variant` and `collapsed` props — do not override them here.
+   */
+  headerProps?: Omit<HeaderItemProps, 'variant' | 'size'>;
+
+  /**
+   * Props forwarded to the built-in `FooterItem` at the bottom of the sidebar.
+   * The `variant` and `size` props are derived from the NavBar — do not
+   * override them here.
+   */
+  footerProps?: Omit<FooterItemProps, 'variant' | 'size'>;
+
+  /**
+   * Navigation groups to render in the scrollable content area.
+   * Each group maps to one `MenuItemGroup` component.
+   */
+  groups?: NavBarGroup[];
+}