sdaia-ui 1.0.1 → 1.0.2

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

@@ -1,205 +0,0 @@
-/**
- * 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

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

package/src/components/Pagination/Pagination.tsx

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

@@ -1,26 +0,0 @@
-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;
-}
-