sdaia-ui 1.0.1 → 1.0.2

package/src/components/ModalHeader/ModalHeader.tsx

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

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

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

package/src/components/NavBar/NavBar.tsx

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

@@ -1,78 +0,0 @@
-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[];
-}