sdaia-ui 1.0.1

package/src/components/PdfViewer/PdfViewer.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import type { PdfViewerProps } from './PdfViewer.types';
+import {
+  PDF_VIEWER_ROOT,
+  PDF_VIEWER_HEADER,
+  PDF_VIEWER_HEADER_TOP_ROW,
+  PDF_VIEWER_INFO_GROUP,
+  PDF_VIEWER_INFO_ROW,
+  PDF_VIEWER_CONTENT,
+  PDF_VIEWER_ZOOM_BAR,
+} from './PdfViewer.variants';
+import { ChevronDownIcon, CloseIcon, DownloadIcon, FitIcon, MinusIcon, PlusIcon } from '../../icons/IconFactory';
+
+export const PdfViewer = forwardRef<HTMLDivElement, PdfViewerProps>(function PdfViewer(
+  {
+    breakpoint = 'desktop',
+    dir,
+    showHeader = true,
+    headerTitle,
+    headerSubtitle,
+    infoItems = [],
+    showCloseButton = true,
+    onClose,
+    closeLabel = 'Close',
+    showPrimaryAction = true,
+    primaryActionLabel = 'Download',
+    onPrimaryAction,
+    showZoomControls = true,
+    zoom,
+    defaultZoom = 100,
+    minZoom = 25,
+    maxZoom = 200,
+    zoomStep = 25,
+    onZoomChange,
+    zoomLabel,
+    onZoomOut,
+    onZoomIn,
+    onZoomFit,
+    onZoomMenu,
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const isRtl = dir === 'rtl';
+
+  const [uncontrolledZoom, setUncontrolledZoom] = useState(defaultZoom);
+  const resolvedZoom = zoom ?? uncontrolledZoom;
+
+  const clampZoom = useCallback(
+    (value: number) => Math.min(maxZoom, Math.max(minZoom, Math.round(value))),
+    [maxZoom, minZoom],
+  );
+
+  const setZoomValue = useCallback(
+    (next: number) => {
+      const clamped = clampZoom(next);
+      if (zoom === undefined) setUncontrolledZoom(clamped);
+      onZoomChange?.(clamped);
+    },
+    [clampZoom, onZoomChange, zoom],
+  );
+
+  const handleZoomOut = useCallback(() => {
+    setZoomValue(resolvedZoom - zoomStep);
+    onZoomOut?.();
+  }, [onZoomOut, resolvedZoom, setZoomValue, zoomStep]);
+
+  const handleZoomIn = useCallback(() => {
+    setZoomValue(resolvedZoom + zoomStep);
+    onZoomIn?.();
+  }, [onZoomIn, resolvedZoom, setZoomValue, zoomStep]);
+
+  const handleZoomFit = useCallback(() => {
+    setZoomValue(100);
+    onZoomFit?.();
+  }, [onZoomFit, setZoomValue]);
+
+  const resolvedZoomLabel = useMemo(() => zoomLabel ?? `${resolvedZoom}%`, [resolvedZoom, zoomLabel]);
+  const scale = resolvedZoom / 100;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="pdf-viewer"
+      dir={dir}
+      className={cn(PDF_VIEWER_ROOT[breakpoint], className)}
+      {...rest}
+    >
+      {showHeader && (
+        <div data-slot="pdf-viewer-header" className={PDF_VIEWER_HEADER[breakpoint]}>
+          <div data-slot="pdf-viewer-header-top-row" className={PDF_VIEWER_HEADER_TOP_ROW.root}>
+            {/* Keep the title visually centered regardless of close button */}
+            {isRtl ? (
+              <>
+                {showCloseButton ? (
+                  <Button
+                    data-slot="pdf-viewer-close"
+                    variant="transparent"
+                    size="sm"
+                    iconOnly
+                    aria-label={closeLabel}
+                    onClick={onClose}
+                    leadingIcon={<CloseIcon className="size-icon-md" />}
+                    className="justify-self-start"
+                  />
+                ) : (
+                  <span aria-hidden className={PDF_VIEWER_HEADER_TOP_ROW.placeholder} />
+                )}
+
+                <div data-slot="pdf-viewer-title" className={PDF_VIEWER_HEADER_TOP_ROW.titleBlock}>
+                  {headerTitle ? (
+                    <div className={PDF_VIEWER_HEADER_TOP_ROW.title}>{headerTitle}</div>
+                  ) : null}
+                  {headerSubtitle ? (
+                    <div className={PDF_VIEWER_HEADER_TOP_ROW.subtitle}>{headerSubtitle}</div>
+                  ) : null}
+                </div>
+
+                <span aria-hidden className={PDF_VIEWER_HEADER_TOP_ROW.placeholder} />
+              </>
+            ) : (
+              <>
+                <span aria-hidden className={PDF_VIEWER_HEADER_TOP_ROW.placeholder} />
+
+                <div data-slot="pdf-viewer-title" className={PDF_VIEWER_HEADER_TOP_ROW.titleBlock}>
+                  {headerTitle ? (
+                    <div className={PDF_VIEWER_HEADER_TOP_ROW.title}>{headerTitle}</div>
+                  ) : null}
+                  {headerSubtitle ? (
+                    <div className={PDF_VIEWER_HEADER_TOP_ROW.subtitle}>{headerSubtitle}</div>
+                  ) : null}
+                </div>
+
+                {showCloseButton ? (
+                  <Button
+                    data-slot="pdf-viewer-close"
+                    variant="transparent"
+                    size="sm"
+                    iconOnly
+                    aria-label={closeLabel}
+                    onClick={onClose}
+                    leadingIcon={<CloseIcon className="size-icon-md" />}
+                    className="justify-self-end"
+                  />
+                ) : (
+                  <span aria-hidden className={PDF_VIEWER_HEADER_TOP_ROW.placeholder} />
+                )}
+              </>
+            )}
+          </div>
+
+          {(infoItems.length > 0 || showPrimaryAction) && (
+            <div data-slot="pdf-viewer-header-bottom-row" className={PDF_VIEWER_INFO_ROW[breakpoint]}>
+              {/* Info items */}
+              {infoItems.length > 0 ? (
+                <div
+                  data-slot="pdf-viewer-info"
+                  className={cn(PDF_VIEWER_INFO_GROUP.root, isRtl && 'flex-row-reverse')}
+                >
+                  {infoItems.slice(0, 2).map((item, idx) => (
+                    <div
+                      key={idx}
+                      data-slot="pdf-viewer-info-item"
+                      className={cn(PDF_VIEWER_INFO_GROUP.item, isRtl && 'items-end text-end')}
+                    >
+                      <div data-slot="pdf-viewer-info-label" className={PDF_VIEWER_INFO_GROUP.label}>
+                        {item.label}
+                      </div>
+                      <div data-slot="pdf-viewer-info-value" className={PDF_VIEWER_INFO_GROUP.value}>
+                        {item.value}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div />
+              )}
+
+              {/* Primary action */}
+              {showPrimaryAction ? (
+                <Button
+                  data-slot="pdf-viewer-primary-action"
+                  variant="secondary-outline"
+                  size="sm"
+                  onClick={onPrimaryAction}
+                  trailingIcon={<DownloadIcon className="size-icon-md" />}
+                >
+                  {primaryActionLabel}
+                </Button>
+              ) : null}
+            </div>
+          )}
+        </div>
+      )}
+
+      <div data-slot="pdf-viewer-content" className={PDF_VIEWER_CONTENT[breakpoint]}>
+        <div
+          data-slot="pdf-viewer-viewport"
+          className="origin-top w-full"
+          style={{ transform: scale === 1 ? undefined : `scale(${scale})` }}
+        >
+          {children}
+        </div>
+
+        {showZoomControls && (
+          <div data-slot="pdf-viewer-zoom-bar" className={PDF_VIEWER_ZOOM_BAR.root}>
+            {/* dir="ltr" keeps icons and dropdown in the same order regardless of document direction */}
+            <div dir="ltr" className={PDF_VIEWER_ZOOM_BAR.container}>
+              <div data-slot="pdf-viewer-zoom-icons" className={PDF_VIEWER_ZOOM_BAR.icons}>
+                <Button
+                  data-slot="pdf-viewer-zoom-out"
+                  variant="transparent"
+                  size="md"
+                  iconOnly
+                  aria-label="Zoom out"
+                  onClick={handleZoomOut}
+                  leadingIcon={<MinusIcon className="size-icon-lg" />}
+                  className="text-white hover:text-white active:text-white p-0!"
+                />
+                <Button
+                  data-slot="pdf-viewer-zoom-in"
+                  variant="transparent"
+                  size="md"
+                  iconOnly
+                  aria-label="Zoom in"
+                  onClick={handleZoomIn}
+                  leadingIcon={<PlusIcon className="size-icon-lg" />}
+                  className="text-white hover:text-white active:text-white p-0!"
+                />
+                <Button
+                  data-slot="pdf-viewer-zoom-fit"
+                  variant="transparent"
+                  size="md"
+                  iconOnly
+                  aria-label="Fit to page"
+                  onClick={handleZoomFit}
+                  leadingIcon={<FitIcon className="size-icon-lg" />}
+                  className="text-white hover:text-white active:text-white p-0!"
+                />
+              </div>
+
+              <button
+                type="button"
+                data-slot="pdf-viewer-zoom-menu"
+                aria-label={`Zoom level: ${resolvedZoomLabel}`}
+                onClick={onZoomMenu}
+                className={PDF_VIEWER_ZOOM_BAR.dropdown}
+              >
+                <span className={PDF_VIEWER_ZOOM_BAR.dropdownLabel}>{resolvedZoomLabel}</span>
+                <ChevronDownIcon className={PDF_VIEWER_ZOOM_BAR.dropdownIcon} />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+

package/src/components/PdfViewer/PdfViewer.types.ts

@@ -0,0 +1,79 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type PdfViewerBreakpoint = 'desktop' | 'tablet' | 'mobile';
+
+export interface PdfViewerInfoItem {
+  /** Label displayed above the value (e.g. "PDF Number") */
+  label: ReactNode;
+  /** The primary value (e.g. "12345") */
+  value: ReactNode;
+}
+
+export interface PdfViewerProps extends HTMLAttributes<HTMLDivElement> {
+  /** Visual breakpoint style from the Figma component. */
+  breakpoint?: PdfViewerBreakpoint;
+  /** Forces a direction on the component root (defaults to inheriting). */
+  dir?: 'ltr' | 'rtl';
+
+  /** Shows the top header area. */
+  showHeader?: boolean;
+  /**
+   * Main header title (centered).
+   *
+   * Note: We intentionally avoid the prop name `title` because it conflicts with
+   * the native HTML `title` attribute on div elements.
+   */
+  headerTitle?: ReactNode;
+  /** Header subtitle (centered, e.g. file size). */
+  headerSubtitle?: ReactNode;
+
+  /** Optional info items shown under the title (e.g. number/date). */
+  infoItems?: PdfViewerInfoItem[];
+
+  /** Shows the close button in the header. */
+  showCloseButton?: boolean;
+  /** Called when the close button is clicked. */
+  onClose?: () => void;
+  /** Accessible label for the close button. */
+  closeLabel?: string;
+
+  /** Shows the primary header action button (download in Figma). */
+  showPrimaryAction?: boolean;
+  /** Primary action label. */
+  primaryActionLabel?: ReactNode;
+  /** Called when the primary action button is clicked. */
+  onPrimaryAction?: () => void;
+
+  /** Shows the bottom zoom controls bar. */
+  showZoomControls?: boolean;
+  /**
+   * Zoom percentage (controlled).
+   * When provided, the zoom buttons will call `onZoomChange` but will not manage internal state.
+   */
+  zoom?: number;
+  /** Initial zoom percentage (uncontrolled). */
+  defaultZoom?: number;
+  /** Minimum zoom percentage. */
+  minZoom?: number;
+  /** Maximum zoom percentage. */
+  maxZoom?: number;
+  /** Zoom step used by +/- buttons. */
+  zoomStep?: number;
+  /** Called whenever zoom changes (both controlled & uncontrolled). */
+  onZoomChange?: (zoom: number) => void;
+
+  /** Override the label shown in the zoom dropdown (defaults to `${zoom}%`). */
+  zoomLabel?: ReactNode;
+  /** Called when the "zoom out" control is clicked (in addition to zoom changing). */
+  onZoomOut?: () => void;
+  /** Called when the "zoom in" control is clicked (in addition to zoom changing). */
+  onZoomIn?: () => void;
+  /** Called when the "fit" (reset) control is clicked (in addition to zoom changing). */
+  onZoomFit?: () => void;
+  /** Called when the zoom dropdown is clicked. */
+  onZoomMenu?: () => void;
+
+  /** Main content rendered under the header. */
+  children?: ReactNode;
+}
+

package/src/components/PdfViewer/PdfViewer.variants.ts

@@ -0,0 +1,105 @@
+import type { PdfViewerBreakpoint } from './PdfViewer.types';
+
+export const PDF_VIEWER_ROOT: Record<PdfViewerBreakpoint, string> = {
+  desktop: [
+    'flex w-full flex-col items-center overflow-hidden max-w-[1280px]',
+    'gap-spacing-3xl',
+    'bg-[rgba(243,244,246,1)] dark:bg-[rgba(13,18,28,1)]',
+  ].join(' '),
+  tablet: [
+    'flex w-full flex-col items-center overflow-hidden',
+    'gap-spacing-3xl',
+    'bg-[rgba(243,244,246,1)] dark:bg-[rgba(13,18,28,1)]',
+  ].join(' '),
+  mobile: [
+    'flex w-full flex-col items-center overflow-hidden',
+    'gap-spacing-3xl',
+    'bg-[rgba(243,244,246,1)] dark:bg-[rgba(13,18,28,1)]',
+  ].join(' '),
+};
+
+export const PDF_VIEWER_HEADER: Record<PdfViewerBreakpoint, string> = {
+  desktop: [
+    'w-full',
+    'flex flex-col gap-spacing-xl',
+    'border-b border-[rgba(210,214,219,1)] dark:border-[rgba(255,255,255,0.1)]',
+    'bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)]',
+    'px-spacing-3xl py-spacing-lg',
+  ].join(' '),
+  tablet: [
+    'w-full',
+    'flex flex-col gap-spacing-xl',
+    'border-b border-[rgba(210,214,219,1)] dark:border-[rgba(255,255,255,0.1)]',
+    'bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)]',
+    'px-spacing-2xl py-spacing-lg',
+  ].join(' '),
+  mobile: [
+    'w-full',
+    'flex flex-col gap-spacing-xl',
+    'border-b border-[rgba(210,214,219,1)] dark:border-[rgba(255,255,255,0.1)]',
+    'bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)]',
+    'px-spacing-xl py-spacing-lg',
+  ].join(' '),
+};
+
+export const PDF_VIEWER_HEADER_TOP_ROW = {
+  root: 'grid w-full grid-cols-[auto_1fr_auto] items-start',
+  placeholder: 'size-icon-lg opacity-0 pointer-events-none select-none',
+  titleBlock: 'flex flex-col items-center justify-center gap-spacing-xxs text-center',
+  title:
+    'text-text-xl font-[700] text-[rgba(27,131,84,1)] dark:text-[rgba(110,231,160,1)]',
+  subtitle:
+    'text-text-xs font-[400] text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+} as const;
+
+export const PDF_VIEWER_INFO_ROW: Record<PdfViewerBreakpoint, string> = {
+  desktop: 'flex w-full flex-wrap items-center justify-between gap-y-spacing-lg',
+  tablet: 'flex w-full flex-wrap items-center justify-between gap-y-spacing-lg',
+  mobile: 'flex w-full flex-col items-stretch justify-start gap-spacing-lg',
+};
+
+export const PDF_VIEWER_INFO_GROUP = {
+  root: 'flex items-center gap-spacing-6xl',
+  item: 'flex flex-col justify-center gap-spacing-xs',
+  label:
+    'text-text-sm font-[400] text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+  value:
+    'text-text-md font-[600] text-[rgba(31,42,55,1)] dark:text-[rgba(243,244,246,1)]',
+} as const;
+
+export const PDF_VIEWER_CONTENT: Record<PdfViewerBreakpoint, string> = {
+  // pb-spacing-9xl keeps the last PDF page clear of the floating zoom bar (56px + 40px bottom offset)
+  desktop: 'relative flex flex-col gap-spacing-3xl items-start w-full px-spacing-6xl pb-spacing-9xl',
+  tablet: 'relative flex flex-col gap-spacing-3xl items-start w-full px-spacing-6xl pb-spacing-9xl',
+  mobile: 'relative flex flex-col gap-spacing-3xl items-start w-full px-spacing-xl pb-spacing-9xl',
+};
+
+export const PDF_VIEWER_ZOOM_BAR = {
+  root: [
+    'absolute inset-x-0 bottom-spacing-5xl',
+    'flex items-center justify-center',
+    'pointer-events-none',
+  ].join(' '),
+  container: [
+    'pointer-events-auto',
+    'inline-flex items-center',
+    'h-[56px]',
+    'gap-spacing-2xl',
+    'rounded-[var(--radius/radius-8,8px)]',
+    'bg-[rgba(31,42,55,1)]',
+    'px-spacing-xl py-spacing-lg',
+  ].join(' '),
+  icons: 'inline-flex items-center gap-spacing-lg text-white',
+  dropdown: [
+    'inline-flex items-center gap-spacing-sm',
+    'rounded-[var(--radius/radius-6,6px)]',
+    'bg-[rgba(77,87,97,1)]',
+    'px-spacing-md py-spacing-xs',
+    'text-white',
+    'motion-feedback',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(210,214,219,1)] focus-visible:ring-offset-2 focus-visible:ring-offset-[rgba(31,42,55,1)]',
+  ].join(' '),
+  dropdownLabel: 'text-text-sm font-[400]',
+  dropdownIcon: 'size-icon-lg',
+} as const;
+

package/src/components/PdfViewer/index.ts

@@ -0,0 +1,3 @@
+export { PdfViewer } from './PdfViewer';
+export type { PdfViewerProps, PdfViewerBreakpoint, PdfViewerInfoItem } from './PdfViewer.types';
+