sdaia-ui 1.0.1

package/src/components/Pagination/Pagination.variants.ts

@@ -0,0 +1,88 @@
+import type { PaginationPlacement, PaginationType } from './Pagination.types';
+
+export const ROOT_BASE = 'flex min-w-0 flex-wrap items-center gap-y-spacing-sm p-spacing-lg';
+
+export const ROOT_WIDTH = {
+  desktop: 'w-full max-w-[1080px]',
+  mobile: 'w-full max-w-[320px]',
+};
+
+export const ROOT_LAYOUT: Record<
+  PaginationType,
+  Record<PaginationPlacement, { desktop: string; mobile: string }>
+> = {
+  numeric: {
+    start: { desktop: 'justify-between', mobile: 'justify-between' },
+    center: { desktop: 'justify-between', mobile: 'justify-center gap-spacing-md' },
+    end: { desktop: 'justify-between', mobile: 'justify-between' },
+  },
+  text: {
+    start: { desktop: 'justify-between', mobile: 'justify-between' },
+    center: { desktop: 'justify-between', mobile: 'justify-between' },
+    end: { desktop: 'justify-between', mobile: 'justify-between' },
+  },
+  button: {
+    start: { desktop: 'items-center', mobile: 'items-center' },
+    center: { desktop: 'items-center', mobile: 'items-center' },
+    end: { desktop: 'items-center', mobile: 'items-center' },
+  },
+};
+
+export const CELLS_WRAP = 'flex flex-wrap items-center gap-spacing-xxs';
+
+export const CELL_BASE =
+  'relative flex min-w-[40px] items-center justify-center px-spacing-xs py-spacing-md';
+
+export const CELL_HOVER_BG =
+  'hover:bg-[rgba(243,252,246,1)] dark:hover:bg-[rgba(27,131,84,0.2)]';
+
+export const CELL_RADIUS: Record<PaginationPlacement, string> = {
+  start: 'rounded-[6px]',
+  center: 'rounded-[6px]',
+  end: 'rounded-full',
+};
+
+export const CELL_TEXT_DEFAULT =
+  'text-text-md font-normal text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]';
+
+export const CELL_TEXT_SELECTED =
+  'text-text-md font-medium text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]';
+
+export const SELECTOR =
+  'absolute start-1/2 top-[37px] h-[3px] w-pagination-selector-lg ltr:-translate-x-1/2 rtl:translate-x-1/2 rounded-full bg-[rgba(27,131,84,1)]';
+
+export const ACTIONS_WRAP = 'flex items-center gap-spacing-lg';
+
+export const ACTION_BUTTON_DESKTOP =
+  'inline-flex items-center justify-center gap-spacing-xs rounded-[8px] border border-[rgba(210,214,219,1)] px-spacing-xl py-spacing-md text-text-md font-medium text-[rgba(22,22,22,1)] hover:bg-[rgba(243,252,246,1)] dark:border-[rgba(75,85,99,1)] dark:text-[rgba(229,231,235,1)] dark:hover:bg-[rgba(27,131,84,0.2)]';
+
+export const ACTION_BUTTON_MOBILE =
+  'inline-flex items-center justify-center rounded-[8px] border border-[rgba(210,214,219,1)] p-spacing-sm text-[rgba(22,22,22,1)] hover:bg-[rgba(243,252,246,1)] dark:border-[rgba(75,85,99,1)] dark:text-[rgba(229,231,235,1)] dark:hover:bg-[rgba(27,131,84,0.2)]';
+
+// Use global icon tokens from app/globals.css instead of raw pixel values.
+export const ACTION_ICON_DESKTOP = 'size-icon-lg';
+export const ACTION_ICON_MOBILE = 'size-icon-lg';
+
+// Text type label
+export const PAGE_LABEL =
+  'text-text-md font-normal text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]';
+
+// Button type group
+export const GROUP =
+  'flex flex-wrap items-center max-w-full rounded-[6px] border border-[rgba(210,214,219,1)] dark:border-[rgba(75,85,99,1)]';
+
+export const GROUP_DIVIDER =
+  'border-e border-[rgba(210,214,219,1)] dark:border-[rgba(75,85,99,1)]';
+
+export const GROUP_CELL_SELECTED_BG =
+  'bg-[rgba(27,131,84,1)]';
+
+export const GROUP_CELL_TEXT_SELECTED =
+  'text-text-md font-normal text-white';
+
+export const GROUP_CELL_TEXT_DEFAULT =
+  'text-text-md font-normal text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]';
+
+export const GROUP_PREV_NEXT =
+  'inline-flex min-w-[40px] items-center justify-center gap-spacing-sm px-spacing-xl py-spacing-md';
+

package/src/components/Pagination/index.ts

@@ -0,0 +1,3 @@
+export { Pagination } from './Pagination';
+export type { PaginationProps, PaginationType, PaginationPlacement } from './Pagination.types';
+

package/src/components/PaginationButtonGroup/PaginationButtonGroup.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { forwardRef, type KeyboardEvent, type MouseEvent } from 'react';
+import ArrowLeft02SVG from '../../icons/ArrowLeft02SVG';
+import { cn } from '../../lib/cn';
+import type { PaginationButtonGroupProps } from './PaginationButtonGroup.types';
+import {
+  FOCUS_BORDER,
+  HOVER_BG,
+  ICON_BOX,
+  ROOT_BASE,
+  SELECTED_BG,
+  SIDE_BORDER_LTR,
+  SIDE_BORDER_RTL,
+  SIZE_BY_TYPE,
+  TEXT_BASE,
+  TEXT_COLOR,
+} from './PaginationButtonGroup.variants';
+
+function ArrowIcon({
+  direction,
+  className,
+}: {
+  direction: 'left' | 'right';
+  className?: string;
+}) {
+  return (
+    <span data-slot="icon" className={cn(ICON_BOX, className)} aria-hidden="true">
+      <ArrowLeft02SVG className={cn('size-full', direction === 'right' ? 'rotate-180' : '')} />
+    </span>
+  );
+}
+
+export const PaginationButtonGroup = forwardRef<HTMLDivElement, PaginationButtonGroupProps>(
+  function PaginationButtonGroup(
+    {
+      state = 'default',
+      type = 'text',
+      variant = 'primary',
+      rtl = false,
+      textLabel = '9',
+      previousLabel = 'Previous',
+      nextLabel = 'Next',
+      className,
+      onClick,
+      onKeyDown,
+      ...rest
+    },
+    ref,
+  ) {
+    const interactive = typeof onClick === 'function';
+
+    const stateBg =
+      state === 'hovered'
+        ? HOVER_BG[variant]
+        : state === 'selected'
+          ? SELECTED_BG[variant]
+          : 'bg-transparent dark:bg-transparent';
+
+    const borderClass =
+      state === 'focused' ? FOCUS_BORDER[variant] : rtl ? SIDE_BORDER_RTL : SIDE_BORDER_LTR;
+    const contentColor = TEXT_COLOR[state];
+
+    return (
+      <div
+        ref={ref}
+        data-slot="pagination-button-group"
+        data-state={state}
+        data-type={type}
+        data-variant={variant}
+        data-rtl={rtl ? 'true' : 'false'}
+        role={interactive ? 'button' : undefined}
+        tabIndex={interactive ? 0 : undefined}
+        className={cn(ROOT_BASE, SIZE_BY_TYPE[type], stateBg, borderClass, className)}
+        onClick={onClick}
+        onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {
+          if (interactive && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            onClick?.(event as unknown as MouseEvent<HTMLDivElement>);
+          }
+          onKeyDown?.(event);
+        }}
+        {...rest}
+      >
+        {type === 'text' && (
+          <span data-slot="label" className={cn(TEXT_BASE, contentColor)}>
+            {textLabel}
+          </span>
+        )}
+
+        {type === 'icon' && <ArrowIcon direction={rtl ? 'left' : 'right'} className={contentColor} />}
+
+        {type === 'previous' && !rtl && (
+          <>
+            <ArrowIcon direction="left" className={contentColor} />
+            <span data-slot="label" className={cn(TEXT_BASE, contentColor)}>
+              {previousLabel}
+            </span>
+          </>
+        )}
+
+        {type === 'previous' && rtl && (
+          <>
+            <span data-slot="label" className={cn(TEXT_BASE, contentColor)}>
+              {previousLabel}
+            </span>
+            <ArrowIcon direction="right" className={contentColor} />
+          </>
+        )}
+
+        {type === 'next' && !rtl && (
+          <>
+            <span data-slot="label" className={cn(TEXT_BASE, contentColor)}>
+              {nextLabel}
+            </span>
+            <ArrowIcon direction="right" className={contentColor} />
+          </>
+        )}
+
+        {type === 'next' && rtl && (
+          <>
+            <ArrowIcon direction="left" className={contentColor} />
+            <span data-slot="label" className={cn(TEXT_BASE, contentColor)}>
+              {nextLabel}
+            </span>
+          </>
+        )}
+      </div>
+    );
+  },
+);
+

package/src/components/PaginationButtonGroup/PaginationButtonGroup.types.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type PaginationButtonGroupState = 'default' | 'hovered' | 'focused' | 'selected';
+export type PaginationButtonGroupType = 'text' | 'icon' | 'previous' | 'next';
+export type PaginationButtonGroupVariant = 'primary' | 'neutral';
+
+export interface PaginationButtonGroupProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  state?: PaginationButtonGroupState;
+  type?: PaginationButtonGroupType;
+  variant?: PaginationButtonGroupVariant;
+  rtl?: boolean;
+  /** Label used when `type="text"` */
+  textLabel?: ReactNode;
+  /** Label used when `type="previous"` */
+  previousLabel?: ReactNode;
+  /** Label used when `type="next"` */
+  nextLabel?: ReactNode;
+}
+

package/src/components/PaginationButtonGroup/PaginationButtonGroup.variants.ts

@@ -0,0 +1,45 @@
+import type {
+  PaginationButtonGroupState,
+  PaginationButtonGroupType,
+  PaginationButtonGroupVariant,
+} from './PaginationButtonGroup.types';
+
+export const ROOT_BASE =
+  'relative inline-flex shrink-0 items-center justify-center border-solid';
+
+export const SIZE_BY_TYPE: Record<PaginationButtonGroupType, string> = {
+  text: 'size-pagination-cell-lg',
+  icon: 'size-pagination-cell-lg',
+  previous: 'h-pagination-group-height w-pagination-group-prev-width px-spacing-xl py-spacing-md gap-spacing-sm',
+  next: 'h-pagination-group-height w-pagination-group-next-width px-spacing-xl py-spacing-md gap-spacing-sm',
+};
+
+export const SIDE_BORDER_LTR = 'border-e border-[rgba(210,214,219,1)] dark:border-[rgba(75,85,99,1)]';
+export const SIDE_BORDER_RTL = 'border-s border-[rgba(210,214,219,1)] dark:border-[rgba(75,85,99,1)]';
+
+export const HOVER_BG: Record<PaginationButtonGroupVariant, string> = {
+  primary: 'bg-[rgba(243,252,246,1)] dark:bg-[rgba(27,131,84,0.2)]',
+  neutral: 'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,41,55,1)]',
+};
+
+export const SELECTED_BG: Record<PaginationButtonGroupVariant, string> = {
+  primary: 'bg-[rgba(27,131,84,1)] dark:bg-[rgba(27,131,84,1)]',
+  neutral: 'bg-[rgba(13,18,28,1)] dark:bg-[rgba(17,24,39,1)]',
+};
+
+export const FOCUS_BORDER: Record<PaginationButtonGroupVariant, string> = {
+  primary: 'border border-[rgba(27,131,84,0.7)] dark:border-[rgba(52,211,153,0.7)]',
+  neutral: 'border border-[rgba(22,22,22,0.7)] dark:border-[rgba(229,231,235,0.7)]',
+};
+
+export const TEXT_COLOR: Record<PaginationButtonGroupState, string> = {
+  default: 'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+  hovered: 'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+  focused: 'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+  selected: 'text-white dark:text-white',
+};
+
+export const TEXT_BASE = 'font-normal text-text-md';
+
+export const ICON_BOX = 'inline-flex size-pagination-group-icon-size items-center justify-center';
+

package/src/components/PaginationButtonGroup/index.ts

@@ -0,0 +1,8 @@
+export { PaginationButtonGroup } from './PaginationButtonGroup';
+export type {
+  PaginationButtonGroupProps,
+  PaginationButtonGroupState,
+  PaginationButtonGroupType,
+  PaginationButtonGroupVariant,
+} from './PaginationButtonGroup.types';
+

package/src/components/PaginationCells/PaginationCells.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { PaginationCellsProps } from './PaginationCells.types';
+import {
+  FOCUS_RING_BASE,
+  FOCUS_RING_CIRCLE,
+  FOCUS_RING_COLOR,
+  FOCUS_RING_ROUNDED,
+  ROOT_BASE,
+  SELECTOR_COLOR,
+  SELECTOR_SIZE,
+  SHAPE_CIRCLE,
+  SHAPE_ROUNDED,
+  SIZE_CONTAINER,
+  SIZE_TEXT,
+  STATE_BG,
+  TEXT_COLOR_DEFAULT,
+  TEXT_COLOR_SELECTED_SOLID,
+  WEIGHT_BY_STATE,
+} from './PaginationCells.variants';
+
+const SIZE_ALIAS_MAP = {
+  sm: 'small',
+  md: 'medium',
+  lg: 'large',
+} as const;
+
+export const PaginationCells = forwardRef<HTMLDivElement, PaginationCellsProps>(
+  function PaginationCells(
+    {
+      label = '9',
+      number,
+      size,
+      sizeAlias,
+      state = 'default',
+      variant,
+      styleType,
+      circle = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const resolvedSize = size ?? (sizeAlias ? SIZE_ALIAS_MAP[sizeAlias] : 'large');
+    const resolvedVariant = variant ?? styleType ?? 'primary-soft';
+    const resolvedLabel = number ?? label;
+    const isSelected = state === 'selected';
+    const isSolid = resolvedVariant.endsWith('solid');
+    const showSelector = isSelected && !isSolid;
+    const textColor = isSelected && isSolid ? TEXT_COLOR_SELECTED_SOLID : TEXT_COLOR_DEFAULT;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="pagination-cells"
+        data-size={resolvedSize}
+        data-state={state}
+        data-variant={resolvedVariant}
+        data-circle={circle ? 'true' : 'false'}
+        className={cn(
+          ROOT_BASE,
+          SIZE_CONTAINER[resolvedSize],
+          circle ? SHAPE_CIRCLE : SHAPE_ROUNDED,
+          STATE_BG[resolvedVariant][state],
+          className,
+        )}
+        {...rest}
+      >
+        <span
+          data-slot="label"
+          className={cn(SIZE_TEXT[resolvedSize], WEIGHT_BY_STATE[state], textColor)}
+        >
+          {resolvedLabel}
+        </span>
+
+        {showSelector && (
+          <span
+            data-slot="selector"
+            className={cn(
+              'pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-full',
+              SELECTOR_SIZE[resolvedSize],
+              SELECTOR_COLOR[resolvedVariant],
+            )}
+            aria-hidden="true"
+          />
+        )}
+
+        {state === 'focused' && (
+          <span
+            data-slot="focus-outline"
+            className={cn(
+              FOCUS_RING_BASE,
+              FOCUS_RING_COLOR[resolvedVariant],
+              circle ? FOCUS_RING_CIRCLE : FOCUS_RING_ROUNDED,
+            )}
+            aria-hidden="true"
+          />
+        )}
+      </div>
+    );
+  },
+);
+

package/src/components/PaginationCells/PaginationCells.types.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type PaginationCellsSize = 'small' | 'medium' | 'large';
+export type PaginationCellsState = 'default' | 'hovered' | 'focused' | 'selected';
+export type PaginationCellsVariant =
+  | 'primary-soft'
+  | 'primary-solid'
+  | 'neutral-soft'
+  | 'neutral-solid';
+export type PaginationCellsSizeAlias = 'sm' | 'md' | 'lg';
+
+export interface PaginationCellsProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Number/text displayed in the cell. */
+  label?: ReactNode;
+  /** @deprecated Use `label`. Mirrors Figma-generated prop naming. */
+  number?: ReactNode;
+  /** Visual size from Figma variants. */
+  size?: PaginationCellsSize;
+  /** @deprecated Use `size` with `small | medium | large`. */
+  sizeAlias?: PaginationCellsSizeAlias;
+  /** Visual state from Figma variants. */
+  state?: PaginationCellsState;
+  /** Style from Figma variants. */
+  variant?: PaginationCellsVariant;
+  /** @deprecated Use `variant`. */
+  styleType?: PaginationCellsVariant;
+  /** Circle shape toggle from Figma variants. */
+  circle?: boolean;
+}
+

package/src/components/PaginationCells/PaginationCells.variants.ts

@@ -0,0 +1,96 @@
+import type {
+  PaginationCellsSize,
+  PaginationCellsState,
+  PaginationCellsVariant,
+} from './PaginationCells.types';
+
+export const ROOT_BASE =
+  'relative inline-flex items-center justify-center text-center';
+
+export const SIZE_CONTAINER: Record<PaginationCellsSize, string> = {
+  large: 'size-pagination-cell-lg',
+  medium: 'size-pagination-cell-md',
+  small: 'size-pagination-cell-sm',
+};
+
+export const SIZE_TEXT: Record<PaginationCellsSize, string> = {
+  large: 'text-text-md',
+  medium: 'text-text-md',
+  small: 'text-text-sm',
+};
+
+export const SHAPE_ROUNDED = 'rounded-[6px]';
+export const SHAPE_CIRCLE = 'rounded-full';
+
+const PRIMARY_HOVER_BG =
+  'bg-[rgba(243,252,246,1)] dark:bg-[rgba(27,131,84,0.18)]';
+const NEUTRAL_HOVER_BG =
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,41,55,1)]';
+const PRIMARY_SOLID_SELECTED_BG =
+  'bg-[rgba(27,131,84,1)] dark:bg-[rgba(27,131,84,1)]';
+const NEUTRAL_SOLID_SELECTED_BG =
+  'bg-[rgba(13,18,28,1)] dark:bg-[rgba(17,24,39,1)]';
+
+export const STATE_BG: Record<PaginationCellsVariant, Record<PaginationCellsState, string>> = {
+  'primary-soft': {
+    default: 'bg-transparent dark:bg-transparent',
+    hovered: PRIMARY_HOVER_BG,
+    focused: 'bg-transparent dark:bg-transparent',
+    selected: 'bg-transparent dark:bg-transparent',
+  },
+  'neutral-soft': {
+    default: 'bg-transparent dark:bg-transparent',
+    hovered: NEUTRAL_HOVER_BG,
+    focused: 'bg-transparent dark:bg-transparent',
+    selected: 'bg-transparent dark:bg-transparent',
+  },
+  'primary-solid': {
+    default: 'bg-transparent dark:bg-transparent',
+    hovered: PRIMARY_HOVER_BG,
+    focused: 'bg-transparent dark:bg-transparent',
+    selected: PRIMARY_SOLID_SELECTED_BG,
+  },
+  'neutral-solid': {
+    default: 'bg-transparent dark:bg-transparent',
+    hovered: NEUTRAL_HOVER_BG,
+    focused: 'bg-transparent dark:bg-transparent',
+    selected: NEUTRAL_SOLID_SELECTED_BG,
+  },
+};
+
+export const TEXT_COLOR_DEFAULT =
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]';
+
+export const TEXT_COLOR_SELECTED_SOLID = 'text-white dark:text-white';
+
+export const WEIGHT_BY_STATE: Record<PaginationCellsState, string> = {
+  default: 'font-normal',
+  hovered: 'font-normal',
+  focused: 'font-normal',
+  selected: 'font-medium',
+};
+
+export const SELECTOR_COLOR: Record<PaginationCellsVariant, string> = {
+  'primary-soft': 'bg-[rgba(27,131,84,1)] dark:bg-[rgba(52,211,153,1)]',
+  'neutral-soft': 'bg-[rgba(13,18,28,1)] dark:bg-[rgba(229,231,235,1)]',
+  'primary-solid': 'bg-transparent',
+  'neutral-solid': 'bg-transparent',
+};
+
+export const SELECTOR_SIZE: Record<PaginationCellsSize, string> = {
+  large: 'h-[3px] w-pagination-selector-lg top-[37px]',
+  medium: 'h-[3px] w-pagination-selector-md top-[29px]',
+  small: 'h-spacing-xxs w-pagination-selector-sm top-[22px]',
+};
+
+export const FOCUS_RING_COLOR: Record<PaginationCellsVariant, string> = {
+  'primary-soft': 'border-[rgba(27,131,84,0.7)] dark:border-[rgba(52,211,153,0.7)]',
+  'primary-solid': 'border-[rgba(27,131,84,0.7)] dark:border-[rgba(52,211,153,0.7)]',
+  'neutral-soft': 'border-[rgba(22,22,22,0.7)] dark:border-[rgba(229,231,235,0.7)]',
+  'neutral-solid': 'border-[rgba(22,22,22,0.7)] dark:border-[rgba(229,231,235,0.7)]',
+};
+
+export const FOCUS_RING_BASE = 'pointer-events-none absolute inset-[-2px] border';
+export const FOCUS_RING_ROUNDED = 'rounded-[8px]';
+export const FOCUS_RING_CIRCLE = 'rounded-full';
+

package/src/components/PaginationCells/index.ts

@@ -0,0 +1,9 @@
+export { PaginationCells } from './PaginationCells';
+export type {
+  PaginationCellsProps,
+  PaginationCellsSize,
+  PaginationCellsSizeAlias,
+  PaginationCellsState,
+  PaginationCellsVariant,
+} from './PaginationCells.types';
+