sdaia-ui 1.0.1 → 1.0.2

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

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

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

package/src/components/PaginationButtonGroup/PaginationButtonGroup.tsx

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

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

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

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

package/src/components/PaginationCells/PaginationCells.tsx

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

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

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

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