sdaia-ui 1.0.1

package/src/components/ImagePreview/ImagePreview.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { forwardRef, useCallback, useState } from 'react';
+import Image from 'next/image';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button/Button';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { DeleteIcon } from '../../icons/IconFactory';
+import type { ImagePreviewProps } from './ImagePreview.types';
+import {
+  CONTAINER_SIZE_CLASSES,
+  IMAGE_SIZE_CLASSES,
+  CONTAINER_BORDER_DEFAULT,
+  CONTAINER_BORDER_SELECTED,
+  HOVER_OVERLAY,
+  FILENAME_CLASSES,
+} from './ImagePreview.variants';
+
+/* ── Component ────────────────────────────────────────────────── */
+export const ImagePreview = forwardRef<HTMLDivElement, ImagePreviewProps>(
+  function ImagePreview(
+    {
+      src,
+      alt = '',
+      filename,
+      size = 'lg',
+      checked = false,
+      onCheckedChange,
+      onDelete,
+      onPreview,
+      previewLabel = 'Preview',
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const [hovered, setHovered] = useState(false);
+
+    /* ── Checkbox state (uncontrolled fallback) ──────────────────── */
+    // When no onCheckedChange handler is provided the checkbox still
+    // visually toggles by tracking its own internal state.
+    const isCheckboxControlled = onCheckedChange !== undefined;
+    const [internalChecked, setInternalChecked] = useState(false);
+    const activeChecked = isCheckboxControlled ? checked : internalChecked;
+
+    const handleCheckedChange = useCallback(
+      (value: boolean) => {
+        if (!isCheckboxControlled) setInternalChecked(value);
+        onCheckedChange?.(value);
+      },
+      [isCheckboxControlled, onCheckedChange],
+    );
+
+    const containerSizeClass = CONTAINER_SIZE_CLASSES[size];
+    const imageSizeClass = IMAGE_SIZE_CLASSES[size];
+
+    return (
+      <div
+        ref={ref}
+        data-slot="image-preview"
+        className={cn(
+          'flex flex-col gap-spacing-xs rounded-[8px] overflow-hidden',
+          containerSizeClass,
+          activeChecked ? CONTAINER_BORDER_SELECTED : CONTAINER_BORDER_DEFAULT,
+          className,
+        )}
+        {...rest}
+      >
+        {/* ── Image container ──────────────────────────────────── */}
+        <div
+          data-slot="image-container"
+          className={cn('relative w-full flex-shrink-0 overflow-hidden', imageSizeClass)}
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+        >
+          {/* Image / placeholder */}
+          {src ? (
+            <Image
+              src={src}
+              alt={alt}
+              fill
+              className="object-cover"
+              data-slot="image"
+            />
+          ) : (
+            /* eslint-disable-next-line @next/next/no-img-element */
+            <img
+              src="/images/aspect-ratio.webp"
+              alt={alt}
+              className="w-full h-full object-cover"
+              data-slot="image-placeholder"
+            />
+          )}
+
+          {/* ── Hover overlay ─────────────────────────────────── */}
+          {hovered && (
+            <div
+              data-slot="hover-overlay"
+              className={HOVER_OVERLAY}
+              aria-hidden="true"
+            />
+          )}
+
+          {/* ── Hover controls ────────────────────────────────── */}
+          {hovered && (
+            <>
+              {/* Top row: checkbox (start) + delete (end) */}
+              <div
+                data-slot="hover-top-row"
+                className="absolute inset-x-0 top-0 z-20 flex items-center justify-between p-spacing-lg"
+              >
+                <Checkbox
+                  size="sm"
+                  variant="primary"
+                  checked={activeChecked}
+                  onChange={(e) => handleCheckedChange(e.target.checked)}
+                  aria-label="Select image"
+                />
+
+                <button
+                  data-slot="delete-button"
+                  type="button"
+                  aria-label="Delete image"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete?.();
+                  }}
+                  className={cn(
+                    'inline-flex items-center justify-center size-[16px] flex-shrink-0',
+                    'text-white hover:text-[rgba(210,214,219,1)] motion-feedback cursor-pointer',
+                  )}
+                >
+                  <DeleteIcon />
+                </button>
+              </div>
+
+              {/* Center: Preview button */}
+              <div
+                data-slot="hover-center"
+                className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
+              >
+                <Button
+                  variant="neutral"
+                  size="sm"
+                  className="pointer-events-auto"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onPreview?.();
+                  }}
+                >
+                  {previewLabel}
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* ── Filename ──────────────────────────────────────────── */}
+        {filename && (
+          <div
+            data-slot="filename"
+            className={cn('px-spacing-xs pb-spacing-xs', FILENAME_CLASSES)}
+          >
+            {filename}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/ImagePreview/ImagePreview.types.ts

@@ -0,0 +1,54 @@
+import type { HTMLAttributes } from 'react';
+
+/** The three size tiers available for the ImagePreview component. */
+export type ImagePreviewSize = 'sm' | 'md' | 'lg';
+
+export interface ImagePreviewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  /**
+   * URL of the image to display.
+   * When omitted, the component renders the aspectRatio placeholder SVG.
+   */
+  src?: string;
+
+  /** Accessible alt text for the image. */
+  alt?: string;
+
+  /** File name or caption displayed below the image thumbnail. */
+  filename?: string;
+
+  /**
+   * Size tier of the component.
+   * - `lg` → 240 px wide, 160 px image height (default)
+   * - `md` → 192 px wide, 128 px image height
+   * - `sm` → 160 px wide, 107 px image height
+   */
+  size?: ImagePreviewSize;
+
+  /**
+   * Whether the item is currently selected (shows green border).
+   * Controlled by the consumer — pair with `onCheckedChange`.
+   */
+  checked?: boolean;
+
+  /**
+   * Called when the user checks / unchecks the selection checkbox on hover.
+   * Receives the new checked state.
+   */
+  onCheckedChange?: (checked: boolean) => void;
+
+  /**
+   * Called when the user clicks the delete (trash) icon on hover.
+   */
+  onDelete?: () => void;
+
+  /**
+   * Called when the user clicks the "Preview" button that appears on hover.
+   */
+  onPreview?: () => void;
+
+  /**
+   * Label for the hover preview button.
+   * Defaults to "Preview" (or "معاينة" for RTL).
+   */
+  previewLabel?: string;
+}

package/src/components/ImagePreview/ImagePreview.variants.ts

@@ -0,0 +1,39 @@
+import type { ImagePreviewSize } from './ImagePreview.types';
+
+/* ── Container size classes ────────────────────────────────────── */
+export const CONTAINER_SIZE_CLASSES: Record<ImagePreviewSize, string> = {
+  /** Desktop grid column width from Figma: 232 px */
+  lg: 'w-[232px]',
+  /** Tablet grid column width from Figma: 179 px */
+  md: 'w-[179px]',
+  /** Mobile grid column width from Figma: 136 px */
+  sm: 'w-[136px]',
+};
+
+/* ── Image area size classes ───────────────────────────────────── */
+export const IMAGE_SIZE_CLASSES: Record<ImagePreviewSize, string> = {
+  lg: 'h-[160px]',
+  md: 'h-[128px]',
+  sm: 'h-[107px]',
+};
+
+/* ── Container border — default state ─────────────────────────── */
+export const CONTAINER_BORDER_DEFAULT =
+  // Always border-2 so layout size stays fixed; only color changes on selection
+  'border-2 border-[rgba(210,214,219,1)] dark:border-[rgba(56,66,80,1)]';
+
+/* ── Container border — selected state ────────────────────────── */
+// Figma variable: color-border-primary (green) → rgba(27,131,84,1)
+export const CONTAINER_BORDER_SELECTED =
+  'border-2 border-[rgba(27,131,84,1)] dark:border-[rgba(27,131,84,1)]';
+
+/* ── Dark overlay that appears over the image on hover ─────────── */
+// Figma: rgba(22,22,22,0.7) — 70 % opaque dark scrim.
+// pointer-events-none is critical so the overlay never blocks clicks on
+// the checkbox, delete button, or preview button rendered above it.
+export const HOVER_OVERLAY =
+  'absolute inset-0 bg-[rgba(22,22,22,0.70)] transition-opacity duration-150 pointer-events-none';
+
+/* ── Filename text ─────────────────────────────────────────────── */
+export const FILENAME_CLASSES =
+  'text-text-xs font-[400] leading-[20px] text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)] truncate';

package/src/components/ImagePreview/index.ts

@@ -0,0 +1,2 @@
+export { ImagePreview } from './ImagePreview';
+export type { ImagePreviewProps, ImagePreviewSize } from './ImagePreview.types';

package/src/components/Input/Input.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { forwardRef } from 'react';
+import type { InputProps, InputSize } from './Input.types';
+
+const SIZE_CLASSES: Record<InputSize, { wrapper: string; input: string }> = {
+  sm: {
+    wrapper: 'rounded-[8px] text-[13px]',
+    input: 'px-[10px] py-[6px]',
+  },
+  md: {
+    wrapper: 'rounded-[10px] text-text-sm',
+    input: 'px-spacing-lg py-spacing-md',
+  },
+  lg: {
+    wrapper: 'rounded-[12px] text-text-md',
+    input: 'px-[14px] py-[10px]',
+  },
+};
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  {
+    label,
+    helperText,
+    error,
+    size = 'md',
+    leftIcon,
+    rightIcon,
+    clearable = false,
+    onClear,
+    disabled = false,
+    value,
+    className = '',
+    ...rest
+  },
+  ref,
+) {
+  const sizeStyles = SIZE_CLASSES[size];
+  const hasError = Boolean(error);
+  const showClear = clearable && value;
+
+  const borderColor = hasError
+    ? 'border-[rgba(239,68,68,1)] focus-within:border-[rgba(239,68,68,1)]'
+    : 'border-[rgba(210,214,219,1)] focus-within:border-[rgba(84,192,138,1)] dark:border-[rgba(44,57,79,1)] dark:focus-within:border-[rgba(84,192,138,1)]';
+
+  return (
+    <div className={['flex flex-col gap-spacing-sm', className].join(' ')}>
+      {label && (
+        <label className="text-text-sm font-[500] text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]">
+          {label}
+        </label>
+      )}
+
+      <div
+        className={[
+          'flex items-center border bg-white motion-feedback dark:bg-[rgba(17,25,39,1)]',
+          borderColor,
+          sizeStyles.wrapper,
+          disabled ? 'opacity-50' : '',
+        ].join(' ')}
+      >
+        {leftIcon && (
+          <span className="flex-shrink-0 pl-[10px] text-[rgba(107,114,128,1)] dark:text-[rgba(156,163,175,1)]">
+            {leftIcon}
+          </span>
+        )}
+
+        <input
+          ref={ref}
+          value={value}
+          disabled={disabled}
+          className={[
+            'min-w-0 flex-1 bg-transparent text-[rgba(31,42,55,1)] outline-none placeholder:text-[rgba(156,163,175,1)] dark:text-[rgba(229,231,235,1)] dark:placeholder:text-[rgba(107,114,128,1)]',
+            sizeStyles.input,
+          ].join(' ')}
+          {...rest}
+        />
+
+        {showClear && (
+          <button
+            type="button"
+            onClick={onClear}
+            className="flex-shrink-0 pr-[10px] text-[rgba(107,114,128,1)] motion-feedback hover:text-[rgba(31,42,55,1)] dark:text-[rgba(156,163,175,1)] dark:hover:text-[rgba(229,231,235,1)]"
+            aria-label="Clear input"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            </svg>
+          </button>
+        )}
+
+        {rightIcon && !showClear && (
+          <span className="flex-shrink-0 pr-[10px] text-[rgba(107,114,128,1)] dark:text-[rgba(156,163,175,1)]">
+            {rightIcon}
+          </span>
+        )}
+      </div>
+
+      {(error || helperText) && (
+        <p
+          className={[
+            'text-text-xs',
+            hasError
+              ? 'text-[rgba(239,68,68,1)]'
+              : 'text-[rgba(107,114,128,1)] dark:text-[rgba(156,163,175,1)]',
+          ].join(' ')}
+        >
+          {error || helperText}
+        </p>
+      )}
+    </div>
+  );
+});

package/src/components/Input/Input.types.ts

@@ -0,0 +1,22 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+
+export type InputSize = 'sm' | 'md' | 'lg';
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Label text displayed above the input */
+  label?: string;
+  /** Helper text displayed below the input */
+  helperText?: string;
+  /** Error message — replaces helperText and turns the input red */
+  error?: string;
+  /** Size of the input */
+  size?: InputSize;
+  /** Icon displayed at the start of the input */
+  leftIcon?: ReactNode;
+  /** Icon displayed at the end of the input */
+  rightIcon?: ReactNode;
+  /** Shows a clear button when the input has a value */
+  clearable?: boolean;
+  /** Callback fired when the clear button is clicked */
+  onClear?: () => void;
+}

package/src/components/Input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps, InputSize } from './Input.types';

package/src/components/InputPrefixSuffix/InputPrefixSuffix.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { InputPrefixSuffixProps } from './InputPrefixSuffix.types';
+import {
+  BASE,
+  BORDER_COLOR,
+  SIDE_CLASSES,
+  STYLE_CLASSES,
+  SELECTED_CLASSES,
+  DISABLED_SOLID,
+  DISABLED_SUBTLE,
+  ICON_COLOR,
+  ICON_SELECTED_COLOR,
+  ICON_DISABLED_COLOR,
+  SIZE_CLASSES,
+  ICON_SIZE_CLASSES,
+} from './InputPrefixSuffix.variants';
+import { MinusIcon, PlusIcon, ArrowIcon } from '../../icons/IconFactory';
+
+export const InputPrefixSuffix = forwardRef<
+  HTMLButtonElement,
+  InputPrefixSuffixProps
+>(function InputPrefixSuffix(
+  {
+    iconType = 'minus',
+    side = 'start',
+    style = 'solid',
+    size = 'lg',
+    selected = false,
+    disabled = false,
+    className,
+    onClick,
+    ...rest
+  },
+  ref,
+) {
+  /* ── Root class composition ──────────────────────────────────────── */
+  const rootClass = cn(
+    BASE,
+    BORDER_COLOR,
+    SIDE_CLASSES[side],
+    SIZE_CLASSES[size],
+    // Style / state layering — only one group applies at a time
+    !disabled && !selected && STYLE_CLASSES[style],
+    !disabled && selected && SELECTED_CLASSES,
+    disabled && style === 'solid' && DISABLED_SOLID,
+    disabled && style === 'subtle' && DISABLED_SUBTLE,
+    className,
+  );
+
+  /* ── Icon class composition ──────────────────────────────────────── */
+  const iconClass = cn(
+    ICON_SIZE_CLASSES[size],
+    'shrink-0',
+    disabled
+      ? ICON_DISABLED_COLOR
+      : selected
+        ? ICON_SELECTED_COLOR
+        : ICON_COLOR,
+  );
+
+  /* ── Icon selection ──────────────────────────────────────────────── */
+  const Icon =
+    iconType === 'plus'
+      ? PlusIcon
+      : iconType === 'arrow'
+        ? ArrowIcon
+        : MinusIcon;
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      disabled={disabled}
+      aria-pressed={selected || undefined}
+      data-slot="input-prefix-suffix"
+      className={rootClass}
+      onClick={disabled ? undefined : onClick}
+      {...rest}
+    >
+      {/* Icon wrapper — sized by ICON_SIZE_CLASSES token */}
+      <span className={iconClass} aria-hidden="true">
+        <Icon />
+      </span>
+    </button>
+  );
+});
+
+InputPrefixSuffix.displayName = 'InputPrefixSuffix';

package/src/components/InputPrefixSuffix/InputPrefixSuffix.types.ts

@@ -0,0 +1,81 @@
+import type { ButtonHTMLAttributes } from 'react';
+
+/**
+ * Which icon is rendered inside the button.
+ *
+ * - `'minus'`  — horizontal bar (decrement / remove)
+ * - `'plus'`   — cross / plus (increment / add)
+ * - `'arrow'`  — up + down chevrons (expand / dropdown trigger)
+ */
+export type InputPrefixSuffixIconType = 'minus' | 'plus' | 'arrow';
+
+/**
+ * Visual fill style.
+ *
+ * - `'solid'`  — neutral fill background (default)
+ * - `'subtle'` — transparent background; fill appears on hover/active
+ */
+export type InputPrefixSuffixStyle = 'solid' | 'subtle';
+
+/**
+ * Size tier — maps to Figma Large / Medium.
+ *
+ * - `'lg'` — 48 × 40 px (Large in Figma)
+ * - `'md'` — 36 × 32 px (Medium in Figma)
+ */
+export type InputPrefixSuffixSize = 'md' | 'lg';
+
+/**
+ * Which side of the attached input field this button sits on.
+ *
+ * Controls which edge has the rounded corners and which border edge is
+ * absent (the edge that presses against the input).
+ *
+ * Uses CSS logical properties (`rounded-s-*`, `border-s`, `border-e`)
+ * so RTL layout is handled automatically by `dir="rtl"` on any ancestor.
+ *
+ * - `'start'` → left side in LTR, right side in RTL  (Figma: Minus)
+ * - `'end'`   → right side in LTR, left side in RTL   (Figma: Plus / Arrow)
+ */
+export type InputPrefixSuffixSide = 'start' | 'end';
+
+export interface InputPrefixSuffixProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'style'> {
+  /**
+   * Which icon renders inside the button.
+   * @default 'minus'
+   */
+  iconType?: InputPrefixSuffixIconType;
+
+  /**
+   * Which side of the input field this button attaches to.
+   * Determines corner rounding and which border edge is hidden.
+   * @default 'start'
+   */
+  side?: InputPrefixSuffixSide;
+
+  /**
+   * Visual fill style.
+   * @default 'solid'
+   */
+  style?: InputPrefixSuffixStyle;
+
+  /**
+   * Size tier.
+   * @default 'lg'
+   */
+  size?: InputPrefixSuffixSize;
+
+  /**
+   * Renders the button in its selected / toggled-on state
+   * (dark background, white icon).
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Disables all interaction and applies muted disabled styling.
+   * @default false
+   */
+  disabled?: boolean;
+}