sdaia-ui 1.0.1

package/src/components/NumberInput/NumberInput.variants.ts

@@ -0,0 +1,205 @@
+/**
+ * NumberInput.variants.ts
+ *
+ * All class-name constants mapped from Figma node 5285:78142 (Number Input).
+ *
+ * Color sources:
+ *   Form/field-text-label        → #161616 / dark: rgba(229,231,235,1)
+ *   Form/field-text-placeholder  → #6c737f / dark: rgba(107,114,128,1)
+ *   Form/field-text-filled       → #161616 / dark: rgba(229,231,235,1)
+ *   Form/field-text-helper       → #6c737f / dark: rgba(107,114,128,1)
+ *   Border/border-neutral-primary→ #d2d6db / dark: rgba(44,57,79,1)
+ *   Tag/tag-border-neutral       → #4d5761 / dark: rgba(75,85,99,1)
+ *   Form/field-border-error      → #b42318 (same in dark)
+ *   Icon/icon-default-500        → #6c737f / dark: rgba(107,114,128,1)
+ *   Global/background-disabled   → #e5e7eb / dark: rgba(31,42,55,1)
+ *   Global/text-default-disabled → #9da4ae / dark: rgba(75,85,99,1)
+ *   Input field bg               → #ffffff  / dark: rgba(17,25,39,1)  [no Figma var — follows Input.tsx]
+ */
+
+import type { NumberInputSize, NumberInputStyle } from './NumberInput.types';
+
+/* ── Root wrapper ────────────────────────────────────────────────── */
+
+/**
+ * Root column container — `gap-spacing-sm` (6 px) between label, group, and
+ * helper row. `items-start` so label and helper row don't stretch to the group
+ * width.
+ */
+export const ROOT = 'flex flex-col gap-spacing-sm items-start relative';
+
+/* ── Label ───────────────────────────────────────────────────────── */
+
+/**
+ * Form/field-text-label: #161616 / dark rgba(229,231,235,1).
+ * Text sm/Regular: 14 px, weight 400, line-height 20 px.
+ */
+export const LABEL =
+  'text-text-sm font-[400] ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] ' +
+  'whitespace-nowrap shrink-0';
+
+/* ── Input group (the horizontal row) ───────────────────────────── */
+
+/** Flex row — gap is 0 so prefix/center/suffix butt up against each other.
+ *  items-stretch ensures prefix/suffix buttons always match the input's full
+ *  height even when icon tokens step down on mobile. */
+export const GROUP = 'flex items-stretch shrink-0';
+
+/* ── Center input wrapper (the bordered box between the buttons) ── */
+
+/**
+ * Base wrapper — shared by every state/size/spinner combination.
+ * `flex items-center` so the real <input> fills the height.
+ * `border border-solid` — the full 4-side border (buttons provide their own
+ * side borders so no doubles appear between adjacent elements).
+ * `relative` — needed for the focus-ring pseudo-overlay approach.
+ * `transition-colors` — smooth border/ring colour changes.
+ */
+export const INPUT_WRAPPER_BASE =
+  'relative flex items-center border border-solid motion-feedback ' +
+  'bg-white dark:bg-[rgba(17,25,39,1)]';
+
+/**
+ * Default border: Border/border-neutral-primary.
+ * Focus-within ring: Tag/tag-border-neutral 2 px inset (replaces the border
+ * visually when the inner <input> is focused).
+ */
+export const INPUT_WRAPPER_DEFAULT =
+  'border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
+  'focus-within:ring-2 focus-within:ring-inset ' +
+  'focus-within:ring-[rgba(77,87,97,1)] dark:focus-within:ring-[rgba(75,85,99,1)]';
+
+/**
+ * Error border: Form/field-border-error #b42318.
+ * Focus-within ring also changes to error colour.
+ */
+export const INPUT_WRAPPER_ERROR =
+  'border-[rgba(180,35,24,1)] ' +
+  'focus-within:ring-2 focus-within:ring-inset focus-within:ring-[rgba(180,35,24,1)]';
+
+/** Disabled — same neutral border, no focus ring ever fires. */
+export const INPUT_WRAPPER_DISABLED =
+  'border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] pointer-events-none';
+
+/* ── Center input padding (size × spinner) ───────────────────────── */
+
+/**
+ * Size=lg, spinner=false → px-spacing-xl(16px) py-spacing-md(8px).
+ * Size=lg, spinner=true  → px-spacing-2xl(20px) py-spacing-md(8px)
+ *                          (extra start-padding because there is no minus button).
+ * Size=md, spinner=false → px-spacing-xl(16px) py-spacing-sm(6px).
+ * Size=md, spinner=true  → px-spacing-2xl(20px) py-spacing-sm(6px).
+ */
+export const INPUT_WRAPPER_SIZE: Record<
+  NumberInputSize,
+  { noSpinner: string; spinner: string }
+> = {
+  lg: {
+    noSpinner: 'px-spacing-xl py-spacing-md',
+    spinner: 'px-spacing-2xl py-spacing-md',
+  },
+  md: {
+    noSpinner: 'px-spacing-xl py-spacing-sm',
+    spinner: 'px-spacing-2xl py-spacing-sm',
+  },
+};
+
+/**
+ * When spinner=true the input is the leftmost element, so its start side
+ * gets rounded corners (RTL-safe via CSS logical property).
+ */
+export const INPUT_WRAPPER_SPINNER_START = 'rounded-s-[8px]';
+
+/* ── Actual <input> element ──────────────────────────────────────── */
+
+/**
+ * The native <input> fills its wrapper.
+ * `text-center` — Figma centers the value.
+ * `outline-none` — focus ring is handled by the wrapper's ring-inset.
+ * `bg-transparent` — inherits from wrapper.
+ * `[appearance:textfield]` — suppresses native number spinners in Firefox.
+ * `[&::-webkit-inner-spin-button]:hidden` — Chrome/Safari.
+ */
+export const INPUT_FIELD_BASE =
+  'w-full min-w-0 bg-transparent text-center outline-none ' +
+  '[appearance:textfield] [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden';
+
+/* ── <input> text color — per state ──────────────────────────────── */
+
+/** Placeholder / empty — Form/field-text-placeholder */
+export const INPUT_TEXT_PLACEHOLDER =
+  'placeholder:text-[rgba(108,115,127,1)] dark:placeholder:text-[rgba(107,114,128,1)]';
+
+/** Filled — Form/field-text-filled */
+export const INPUT_TEXT_FILLED =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+/** Error value — Form/field-border-error */
+export const INPUT_TEXT_ERROR = 'text-[rgba(180,35,24,1)]';
+
+/** Disabled — Global/text-default-disabled */
+export const INPUT_TEXT_DISABLED =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+/* ── <input> text size per size tier ─────────────────────────────── */
+
+/**
+ * Size=lg → Text md/Regular: 16 px / lh 24 px.
+ * Size=md → Text sm/Regular: 14 px / lh 20 px.
+ */
+export const INPUT_TEXT_SIZE: Record<NumberInputSize, string> = {
+  lg: 'text-text-md font-[400]',
+  md: 'text-text-sm font-[400]',
+};
+
+/* ── Helper row ──────────────────────────────────────────────────── */
+
+/**
+ * Row below the input group — gap-spacing-xs (4 px) between icon and text.
+ * `items-center` so icon and multiline text stay vertically centred.
+ */
+export const HELPER_ROW = 'flex items-center gap-spacing-xs shrink-0 w-full';
+
+/** Help-circle icon: 16 × 16 px, color changes with state. */
+export const HELPER_ICON_BASE = 'shrink-0 size-[16px]';
+
+/** Default icon: Icon/icon-default-500 */
+export const HELPER_ICON_DEFAULT =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]';
+
+/** Error icon: Icon/icon-error */
+export const HELPER_ICON_ERROR = 'text-[rgba(180,35,24,1)]';
+
+/** Disabled icon: same as default (helper row is still visible when disabled) */
+export const HELPER_ICON_DISABLED =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+/**
+ * Helper text — Text sm/Regular: 14 px, weight 400, lh 20 px.
+ * Default: Form/field-text-helper.
+ * Error:   Form/field-border-error (red).
+ */
+export const HELPER_TEXT_BASE = 'text-text-sm font-[400] shrink-0';
+
+export const HELPER_TEXT_DEFAULT =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]';
+
+export const HELPER_TEXT_ERROR = 'text-[rgba(180,35,24,1)]';
+
+export const HELPER_TEXT_DISABLED =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+/* ── Disabled style overrides on the whole group ────────────────────
+ *
+ * When disabled, each element handles its own token-based disabled colour:
+ *   - InputPrefixSuffix buttons receive disabled=true → DISABLED_SOLID
+ *     → bg-[rgba(229,231,235,1)] (#e5e7eb = Global/background-disabled)
+ *   - Center input wrapper → INPUT_WRAPPER_DISABLED → correct border, no focus ring
+ *   - Input text → INPUT_TEXT_DISABLED → #9da4ae (Global/text-default-disabled)
+ *
+ * Do NOT apply opacity-50 here — that layers on top of the already-correct
+ * token colours and produces a double-muting effect that does not match Figma.
+ * pointer-events-none is defence-in-depth (each child also sets disabled).
+ * ──────────────────────────────────────────────────────────────────── */
+export const GROUP_DISABLED = 'pointer-events-none cursor-not-allowed';

package/src/components/NumberInput/index.ts

@@ -0,0 +1,6 @@
+export { NumberInput } from './NumberInput';
+export type {
+  NumberInputProps,
+  NumberInputSize,
+  NumberInputStyle,
+} from './NumberInput.types';

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,393 @@
+"use client";
+
+import { forwardRef, useState } from "react";
+import { cn } from "../../lib/cn";
+import ArrowRight01SVG from "../../icons/ArrowRight01SVG";
+import { PaginationButtonGroup } from "../PaginationButtonGroup";
+import type {
+  PaginationPlacement,
+  PaginationProps,
+  PaginationType,
+} from "./Pagination.types";
+import {
+  ACTION_BUTTON_DESKTOP,
+  ACTION_BUTTON_MOBILE,
+  ACTION_ICON_DESKTOP,
+  ACTION_ICON_MOBILE,
+  ACTIONS_WRAP,
+  CELL_BASE,
+  CELL_HOVER_BG,
+  CELL_RADIUS,
+  CELL_TEXT_DEFAULT,
+  CELL_TEXT_SELECTED,
+  CELLS_WRAP,
+  GROUP,
+  PAGE_LABEL,
+  ROOT_BASE,
+  ROOT_LAYOUT,
+  ROOT_WIDTH,
+  SELECTOR,
+} from "./Pagination.variants";
+
+function clamp(n: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, n));
+}
+
+function buildNumericItems(
+  page: number,
+  total: number,
+  mobile: boolean,
+): (number | "…")[] {
+  // Match Figma examples:
+  // - Desktop: 1 2 3 4 5 … 12 (when page=3, total=12)
+  // - Mobile:  1 2 … 8 (when page=2, total=8); first/last page avoid duplicate keys
+  if (total <= (mobile ? 4 : 7)) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  if (mobile) {
+    if (page <= 1) return [1, "…", total];
+    if (page >= total) return [1, "…", total];
+    return [1, page, "…", total];
+  }
+  if (page <= 4) return [1, 2, 3, 4, 5, "…", total];
+  if (page >= total - 3) {
+    return [1, "…", total - 4, total - 3, total - 2, total - 1, total];
+  }
+  return [1, "…", page - 1, page, page + 1, "…", total];
+}
+
+function buildButtonItems(page: number, total: number): (number | "…")[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  if (page <= 4) return [1, 2, 3, 4, 5, "…", total];
+  if (page >= total - 3) return [1, "…", total - 4, total - 3, total - 2, total - 1, total];
+  return [1, "…", page - 1, page, page + 1, "…", total];
+}
+
+function resolveRootClass(
+  type: PaginationType,
+  placement: PaginationPlacement,
+  mobile: boolean,
+) {
+  const mode = mobile ? "mobile" : "desktop";
+  return cn(ROOT_BASE, ROOT_WIDTH[mode], ROOT_LAYOUT[type][placement][mode]);
+}
+
+function ActionIcon({ dir }: { dir: "prev" | "next" }) {
+  return (
+    <ArrowRight01SVG
+      className={cn("text-current", dir === "prev" ? "rotate-180" : "")}
+      aria-hidden="true"
+    />
+  );
+}
+
+
+export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
+  function Pagination(
+    {
+      type = "numeric",
+      placement = "start",
+      mobile = false,
+      rtl = false,
+      page = mobile ? 2 : 3,
+      totalPages = mobile ? 8 : 12,
+      onPageChange,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const p = clamp(page, 1, Math.max(1, totalPages));
+    const [hoveredGroupKey, setHoveredGroupKey] = useState<string | null>(null);
+
+    const isDesktop = !mobile;
+    const cellRadius = CELL_RADIUS[placement];
+    const items = buildNumericItems(p, totalPages, mobile);
+    const buttonItems = buildButtonItems(p, totalPages);
+    const canGoPrev = p > 1;
+    const canGoNext = p < totalPages;
+
+    const handlePageChange = (nextPage: number) => {
+      if (!onPageChange) return;
+      onPageChange(clamp(nextPage, 1, Math.max(1, totalPages)));
+    };
+
+    const resolveGroupState = (key: string, selected: boolean) => {
+      if (selected) return "selected" as const;
+      return hoveredGroupKey === key ? "hovered" : "default";
+    };
+
+    const prevLabel = rtl ? "السابق" : "Previous";
+    const nextLabel = rtl ? "التالي" : "Next";
+    const pageSummaryLabel = rtl
+      ? `صفحة ${p} من ${totalPages}`
+      : `Page ${p} of ${totalPages}`;
+
+    const prevButton = (
+      <button
+        type="button"
+        dir="ltr"
+        className={cn(isDesktop ? ACTION_BUTTON_DESKTOP : ACTION_BUTTON_MOBILE)}
+        data-slot="prev"
+        aria-label="Previous page"
+        disabled={!canGoPrev || !onPageChange}
+        onClick={() => handlePageChange(p - 1)}
+      >
+        <span
+          className={cn(
+            isDesktop ? ACTION_ICON_DESKTOP : ACTION_ICON_MOBILE,
+            "inline-flex items-center justify-center",
+          )}
+        >
+          <ActionIcon dir="prev" />
+        </span>
+        {isDesktop && <span>{prevLabel}</span>}
+      </button>
+    );
+
+    const nextButton = (
+      <button
+        type="button"
+        dir="ltr"
+        className={cn(isDesktop ? ACTION_BUTTON_DESKTOP : ACTION_BUTTON_MOBILE)}
+        data-slot="next"
+        aria-label="Next page"
+        disabled={!canGoNext || !onPageChange}
+        onClick={() => handlePageChange(p + 1)}
+      >
+        {isDesktop && <span>{nextLabel}</span>}
+        <span
+          className={cn(
+            isDesktop ? ACTION_ICON_DESKTOP : ACTION_ICON_MOBILE,
+            "inline-flex items-center justify-center",
+          )}
+        >
+          <ActionIcon dir="next" />
+        </span>
+      </button>
+    );
+
+    const cells = (
+      <div className={CELLS_WRAP} data-slot="cells">
+        {items.map((it, idx) => {
+          const selected = typeof it === "number" && it === p;
+          return (
+            <div
+              key={`${String(it)}-${idx}`}
+              className={cn(
+                CELL_BASE,
+                cellRadius,
+                !selected && typeof it === "number" && onPageChange
+                  ? CELL_HOVER_BG
+                  : "",
+                typeof it === "number" && onPageChange ? "cursor-pointer" : "",
+              )}
+              data-slot="cell"
+              data-selected={selected ? "true" : "false"}
+              role={typeof it === "number" && onPageChange ? "button" : undefined}
+              tabIndex={typeof it === "number" && onPageChange ? 0 : undefined}
+              onClick={typeof it === "number" ? () => handlePageChange(it) : undefined}
+              onKeyDown={
+                typeof it === "number" && onPageChange
+                  ? (event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        handlePageChange(it);
+                      }
+                    }
+                  : undefined
+              }
+            >
+              <span
+                className={cn(
+                  selected ? CELL_TEXT_SELECTED : CELL_TEXT_DEFAULT,
+                )}
+              >
+                {it}
+              </span>
+              {selected && isDesktop && type === "numeric" && (
+                <span className={SELECTOR} aria-hidden="true" />
+              )}
+              {selected && mobile && type === "numeric" && (
+                // Mobile selected is a filled cell in Figma.
+                <span
+                  className={cn(
+                    "absolute inset-0 -z-10 rounded-[6px] bg-[rgba(27,131,84,1)]",
+                  )}
+                  aria-hidden="true"
+                />
+              )}
+              {selected && mobile && type === "numeric" && (
+                <span className="sr-only">Selected</span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+
+    const textLabel = (
+      <span className={PAGE_LABEL} data-slot="page-label">
+        {pageSummaryLabel}
+      </span>
+    );
+
+    // Button-type group (single bordered control).
+    const buttonGroup = (
+      <div className={GROUP} data-slot="group">
+        <PaginationButtonGroup
+          type="previous"
+          variant="primary"
+          state={resolveGroupState("prev", false)}
+          rtl={rtl}
+          previousLabel={prevLabel}
+          nextLabel={nextLabel}
+          className={cn(
+            "rounded-none border-0 border-e border-[rgba(210,214,219,1)] dark:border-[rgba(75,85,99,1)]",
+            onPageChange ? "cursor-pointer" : "",
+          )}
+          data-slot="group-prev"
+          onClick={canGoPrev ? () => handlePageChange(p - 1) : undefined}
+          onMouseEnter={onPageChange ? () => setHoveredGroupKey("prev") : undefined}
+          onMouseLeave={onPageChange ? () => setHoveredGroupKey(null) : undefined}
+        />
+
+        {buttonItems.map((it, idx) => {
+          const selected = typeof it === "number" && it === p;
+          return (
+            <PaginationButtonGroup
+              key={`${String(it)}-${idx}`}
+              type="text"
+              variant="primary"
+              state={resolveGroupState(`cell-${idx}`, selected)}
+              textLabel={String(it)}
+              rtl={rtl}
+              className={cn(
+                "rounded-none border-0 border-e border-[rgba(210,214,219,1)] dark:border-[rgba(75,85,99,1)]",
+                typeof it === "number" && onPageChange ? "cursor-pointer" : "",
+              )}
+              data-slot="group-cell"
+              onClick={typeof it === "number" ? () => handlePageChange(it) : undefined}
+              onMouseEnter={
+                typeof it === "number" && onPageChange
+                  ? () => setHoveredGroupKey(`cell-${idx}`)
+                  : undefined
+              }
+              onMouseLeave={onPageChange ? () => setHoveredGroupKey(null) : undefined}
+            />
+          );
+        })}
+
+        <PaginationButtonGroup
+          type="next"
+          variant="primary"
+          state={resolveGroupState("next", false)}
+          rtl={rtl}
+          previousLabel={prevLabel}
+          nextLabel={nextLabel}
+          className={cn("rounded-none border-0", onPageChange ? "cursor-pointer" : "")}
+          data-slot="group-next"
+          onClick={canGoNext ? () => handlePageChange(p + 1) : undefined}
+          onMouseEnter={onPageChange ? () => setHoveredGroupKey("next") : undefined}
+          onMouseLeave={onPageChange ? () => setHoveredGroupKey(null) : undefined}
+        />
+      </div>
+    );
+
+    const desktopNumericStart = (
+      <>
+        {cells}
+        <div className={ACTIONS_WRAP} data-slot="actions">
+          {prevButton}
+          {nextButton}
+        </div>
+      </>
+    );
+
+    const desktopNumericCenter = (
+      <>
+        {prevButton}
+        {cells}
+        {nextButton}
+      </>
+    );
+
+    const desktopNumericEnd = (
+      <>
+        <div className={ACTIONS_WRAP} data-slot="actions">
+          {prevButton}
+          {nextButton}
+        </div>
+        {cells}
+      </>
+    );
+
+    const content =
+      type === "button" ? (
+        buttonGroup
+      ) : type === "text" ? (
+        <>
+          {placement === "start" ? textLabel : null}
+          <div className={ACTIONS_WRAP} data-slot="actions">
+            {prevButton}
+            {nextButton}
+          </div>
+          {placement !== "start" ? textLabel : null}
+        </>
+      ) : placement === "center" ? (
+        mobile ? (
+          <>
+            {prevButton}
+            {cells}
+            {nextButton}
+          </>
+        ) : (
+          desktopNumericCenter
+        )
+      ) : placement === "end" ? (
+        desktopNumericEnd
+      ) : (
+        desktopNumericStart
+      );
+
+    return (
+      <div
+        ref={ref}
+        data-slot="pagination"
+        data-type={type}
+        data-placement={placement}
+        data-mobile={mobile ? "true" : "false"}
+        dir={rtl ? "rtl" : undefined}
+        className={cn(resolveRootClass(type, placement, mobile), className)}
+        {...rest}
+      >
+        {rtl && type !== "button" ? (
+          // Mirror the overall order for RTL — preserve the same layout class
+          // (justify-between or justify-center gap-…) that the LTR variant uses
+          // so mobile-center stays centered and desktop-center stays spread.
+          <div
+            className={cn(
+              "flex w-full min-w-0 flex-wrap items-center gap-y-spacing-sm",
+              ROOT_LAYOUT[type][placement][mobile ? "mobile" : "desktop"],
+            )}
+            data-slot="rtl-wrap"
+          >
+            {type === "numeric" && placement === "start" ? (
+              <>
+                <div className={ACTIONS_WRAP}>
+                  {nextButton}
+                  {prevButton}
+                </div>
+                {cells}
+              </>
+            ) : (
+              content
+            )}
+          </div>
+        ) : (
+          content
+        )}
+      </div>
+    );
+  },
+);

package/src/components/Pagination/Pagination.types.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'react';
+
+export type PaginationType = 'numeric' | 'text' | 'button';
+export type PaginationPlacement = 'start' | 'center' | 'end';
+
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Figma variant: Numeric / Text / Button */
+  type?: PaginationType;
+  /** Figma variant: Start / Center / End */
+  placement?: PaginationPlacement;
+  /** Figma variant: Mobile */
+  mobile?: boolean;
+  /** Figma variant: RTL */
+  rtl?: boolean;
+
+  /**
+   * Current page (1-indexed). Used to render the selected cell and selector.
+   * Matches the Figma examples when `page={3}` (desktop numeric) or `page={2}` (mobile numeric).
+   */
+  page?: number;
+  /** Total pages. Used to render last page and "Page X of Y" text. */
+  totalPages?: number;
+  /** Called when a user clicks prev/next or a page cell. */
+  onPageChange?: (page: number) => void;
+}
+