sdaia-ui 1.0.1

package/src/components/ChartBadge/ChartBadge.variants.ts

@@ -0,0 +1,62 @@
+import type { ChartBadgeType } from './ChartBadge.types';
+
+/* ──────────────────────────────────────────────────────────────
+ * ChartBadge — class-name maps.
+ *
+ * Color values are sourced from the Figma variables bound to the
+ * Chart Badge frame (JnxIDV6Ev4yznMM0njgo5i → 5990:90865). Values
+ * that don't map to an existing global token are kept as rgba
+ * literals alongside the Figma variable name in a comment. Dark-
+ * mode pairs accompany every surface.
+ * ────────────────────────────────────────────────────────────── */
+
+/** Shared base — pill shape, padding, gap, border. */
+export const ROOT_BASE = [
+  'inline-flex items-center justify-center',
+  // gap-xxs (2px) between icon and text
+  'gap-spacing-xxs',
+  // px-sm (6px) / py-xs (4px)
+  'px-spacing-sm py-spacing-xs',
+  // radius-9999 → full pill
+  'rounded-full',
+  // Hairline border, color set per type
+  'border border-solid',
+  // No transitions — Figma defines a static display badge
+  'relative',
+].join(' ');
+
+/**
+ * Per-type background, border, and text/icon color.
+ * Colors map directly to the Figma variables listed below.
+ */
+export const VARIANT_CLASSES: Record<ChartBadgeType, string> = {
+  // ── Increase ──
+  // bg  → Colors/Primary-SA-Flag/50 (#f3fcf6) — no exact token
+  // brd → Colors/Primary-SA-Flag/400 (#54c08a) — no exact token
+  // fg  → Text/text-primary (#1b8354) — matches color-background-primary
+  increase: [
+    'bg-[rgba(243,252,246,1)] border-[rgba(84,192,138,1)]',
+    'text-[rgba(27,131,84,1)]',
+    'dark:bg-[rgba(20,52,36,1)] dark:border-[rgba(27,131,84,1)] dark:text-[rgba(110,231,160,1)]',
+  ].join(' '),
+
+  // ── Decrease ──
+  // bg  → Background/background-error-50 (#fef3f2) — no exact token
+  // brd → Colors/Red/400 (#f97066) — no exact token
+  // fg  → Colors/Red/600 (#d92d20) — matches color-field-border-error
+  decrease: [
+    'bg-[rgba(254,243,242,1)] border-[rgba(249,112,102,1)]',
+    'text-[rgba(217,45,32,1)]',
+    'dark:bg-[rgba(66,23,23,1)] dark:border-[rgba(217,45,32,1)] dark:text-[rgba(252,165,165,1)]',
+  ].join(' '),
+};
+
+/** Icon wrapper — fixed 12 px box; the selected icon brings its own baked-in color. */
+export const ICON_WRAPPER =
+  'inline-flex items-center justify-center flex-shrink-0 size-icon-xs';
+
+/** Text — Text 2xs Medium, 14 px line-height (Figma fixed). */
+export const VALUE_CLASS = [
+  'text-text-2xs font-[500] leading-[14px]',
+  'whitespace-nowrap',
+].join(' ');

package/src/components/ChartBadge/index.ts

@@ -0,0 +1,2 @@
+export { ChartBadge } from './ChartBadge';
+export type { ChartBadgeProps, ChartBadgeType } from './ChartBadge.types';

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { forwardRef, useEffect, useRef } from 'react';
+import type { CheckboxProps, CheckboxSize, CheckboxStyle } from './Checkbox.types';
+import { cn } from '../../lib/cn';
+
+/* ── Size variant map ──────────────────────────────────────────── */
+const SIZE_MAP: Record<CheckboxSize, { box: string; icon: string; label: string }> = {
+  sm: { box: 'h-[16px] w-[16px] rounded-[4px]', icon: 'h-[10px] w-[10px]', label: 'text-md' },
+  md: { box: 'h-[20px] w-[20px] rounded-[4px]', icon: 'h-[12px] w-[12px]', label: 'text-text-md' },
+  lg: { box: 'h-[24px] w-[24px] rounded-[4px]', icon: 'h-[14px] w-[14px]', label: 'text-text-md' },
+};
+
+/* ── Style variant map ─────────────────────────────────────────── */
+interface StyleVariant {
+  checkedBg: string;
+  checkedHoverBg: string;
+  checkedActiveBg: string;
+  iconColor: string;
+  focusRing: string;
+  /** Unchecked pressed: border + bg override */
+  uncheckedActiveBorder: string;
+  uncheckedActiveBg: string;
+  /** Read-only: checked shows border-only outline, unchecked shows lighter border */
+  readOnlyChecked: string;
+  readOnlyUnchecked: string;
+  /** Disabled overrides */
+  disabledChecked: string;
+  disabledUnchecked: string;
+}
+
+const STYLE_MAP: Record<CheckboxStyle, StyleVariant> = {
+  primary: {
+    checkedBg: 'bg-[rgba(27,131,84,1)]',
+    checkedHoverBg: 'group-hover:bg-[rgba(20,87,58,1)]',
+    checkedActiveBg: 'group-active:bg-[rgba(16,70,49,1)]',
+    iconColor: 'text-white',
+    focusRing:
+      'peer-focus-visible:ring-2 peer-focus-visible:ring-[rgba(27,131,84,0.7)] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-offset-[rgba(17,25,39,1)]',
+    uncheckedActiveBorder: 'group-active:border-[rgba(77,87,97,1)]',
+    uncheckedActiveBg: 'group-active:bg-[rgba(210,214,219,1)] dark:group-active:bg-[rgba(44,57,79,1)]',
+    readOnlyChecked: 'border border-[rgba(157,164,174,1)] bg-transparent text-[rgba(27,131,84,1)]',
+    readOnlyUnchecked: 'border border-[rgba(157,164,174,1)] bg-transparent',
+    disabledChecked: 'bg-[rgba(210,214,219,1)] dark:bg-[rgba(55,65,81,1)] text-white',
+    disabledUnchecked: 'border border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)] bg-transparent',
+  },
+  neutral: {
+    checkedBg: 'bg-[rgba(13,18,28,1)] dark:bg-[rgba(229,231,235,1)]',
+    checkedHoverBg: 'group-hover:bg-[rgba(77,87,97,1)] dark:group-hover:bg-[rgba(210,214,219,1)]',
+    checkedActiveBg: 'group-active:bg-[rgba(210,214,219,1)] dark:group-active:bg-[rgba(190,196,204,1)]',
+    iconColor: 'text-white dark:text-[rgba(13,18,28,1)]',
+    focusRing:
+      'peer-focus-visible:ring-2 peer-focus-visible:ring-[rgba(108,115,127,1)] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-offset-[rgba(17,25,39,1)]',
+    uncheckedActiveBorder: 'group-active:border-[rgba(77,87,97,1)]',
+    uncheckedActiveBg: 'group-active:bg-[rgba(210,214,219,1)] dark:group-active:bg-[rgba(44,57,79,1)]',
+    readOnlyChecked: 'border border-[rgba(157,164,174,1)] bg-transparent text-[rgba(13,18,28,1)]',
+    readOnlyUnchecked: 'border border-[rgba(157,164,174,1)] bg-transparent',
+    disabledChecked: 'bg-[rgba(210,214,219,1)] dark:bg-[rgba(55,65,81,1)] text-white dark:text-[rgba(55,65,81,1)]',
+    disabledUnchecked: 'border border-[rgba(157,164,174,1)] dark:border-[rgba(55,65,81,1)] bg-transparent',
+  },
+};
+
+/* ── Icons ─────────────────────────────────────────────────────── */
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.5 6L5 8.5L9.5 3.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function MinusIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.5 6H9.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function ErrorIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true" className="shrink-0">
+      <path
+        d="M8 5.333v2.334M8 10h.007M14.667 8A6.667 6.667 0 1 1 1.333 8a6.667 6.667 0 0 1 13.334 0Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/* ── Component ─────────────────────────────────────────────────── */
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+  {
+    label,
+    indeterminate = false,
+    size = 'md',
+    variant: checkboxStyle = 'primary',
+    error,
+    helperText,
+    disabled = false,
+    readOnly,
+    checked,
+    className = '',
+    ...rest
+  },
+  forwardedRef,
+) {
+  const internalRef = useRef<HTMLInputElement>(null);
+  const sizeStyles = SIZE_MAP[size];
+  const styleVariant = STYLE_MAP[checkboxStyle];
+  const hasError = Boolean(error);
+  const isChecked = checked || indeterminate;
+  const isReadOnly = Boolean(readOnly);
+
+  // Sync indeterminate property (not controllable via HTML attribute)
+  useEffect(() => {
+    const el = internalRef.current;
+    if (el) el.indeterminate = indeterminate;
+  }, [indeterminate]);
+
+  // Merge refs
+  const setRef = (node: HTMLInputElement | null) => {
+    (internalRef as React.MutableRefObject<HTMLInputElement | null>).current = node;
+    if (typeof forwardedRef === 'function') forwardedRef(node);
+    else if (forwardedRef)
+      (forwardedRef as React.MutableRefObject<HTMLInputElement | null>).current = node;
+  };
+
+  /* ── Unchecked border (default) ──────────────────────────── */
+  const uncheckedBorder = hasError
+    ? 'border-[rgba(239,68,68,1)]'
+    : 'border-[rgba(108,115,127,1)] dark:border-[rgba(44,57,79,1)]';
+
+  /* ── Build box classes based on state ──────────────────────── */
+  let boxClasses: string;
+
+  if (disabled) {
+    boxClasses = isChecked
+      ? styleVariant.disabledChecked
+      : styleVariant.disabledUnchecked;
+  } else if (isReadOnly) {
+    boxClasses = isChecked
+      ? styleVariant.readOnlyChecked
+      : styleVariant.readOnlyUnchecked;
+  } else if (isChecked) {
+    boxClasses = cn(
+      styleVariant.checkedBg,
+      styleVariant.iconColor,
+      styleVariant.checkedHoverBg,
+      styleVariant.checkedActiveBg,
+    );
+  } else {
+    boxClasses = cn(
+      'border bg-transparent',
+      uncheckedBorder,
+      'group-hover:border-[rgba(77,87,97,1)] dark:group-hover:border-[rgba(75,85,99,1)]',
+      styleVariant.uncheckedActiveBorder,
+      styleVariant.uncheckedActiveBg,
+    );
+  }
+
+  /* ── Wrapper-level opacity / cursor ────────────────────────── */
+  const wrapperStateClass = '';
+
+  return (
+    <div data-slot="checkbox" className={cn('flex flex-col gap-spacing-xs', className)}>
+      <label
+        data-slot="label"
+        className={cn(
+          'group relative inline-flex items-center gap-[10px]',
+          disabled ? 'cursor-not-allowed' : isReadOnly ? 'cursor-default' : 'cursor-pointer',
+          wrapperStateClass,
+        )}
+      >
+        {/* Hidden native checkbox */}
+        <input
+          ref={setRef}
+          type="checkbox"
+          checked={checked}
+          disabled={disabled}
+          readOnly={readOnly}
+          className="peer absolute inset-0 m-0 h-full w-full cursor-inherit opacity-0"
+          tabIndex={isReadOnly ? -1 : undefined}
+          {...rest}
+        />
+
+        {/* Custom checkbox visual */}
+        <span
+          className={cn(
+            'inline-flex flex-shrink-0 items-center justify-center motion-feedback',
+            sizeStyles.box,
+            boxClasses,
+            // Focus ring via peer
+            !disabled && !isReadOnly && styleVariant.focusRing,
+          )}
+          aria-hidden="true"
+        >
+          {indeterminate ? (
+            <MinusIcon className={sizeStyles.icon} />
+          ) : checked ? (
+            <CheckIcon className={sizeStyles.icon} />
+          ) : null}
+        </span>
+
+        {label && (
+          <span
+            className={`${sizeStyles.label} text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]`}
+          >
+            {label}
+          </span>
+        )}
+      </label>
+
+      {helperText && (
+        <p
+          data-slot="helper-text"
+          className="ms-[30px] text-text-sm text-[rgba(107,114,128,1)] dark:text-[rgba(156,163,175,1)]"
+        >
+          {helperText}
+        </p>
+      )}
+
+      {error && (
+        <p
+          data-slot="error-text"
+          className="ms-[30px] flex items-center gap-spacing-xxs text-text-xs text-[rgba(239,68,68,1)]"
+        >
+          <ErrorIcon />
+          {error}
+        </p>
+      )}
+    </div>
+  );
+});

package/src/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,20 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+
+export type CheckboxStyle = 'primary' | 'neutral';
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Label displayed next to the checkbox */
+  label?: ReactNode;
+  /** Displays a dash instead of a check (for partial selection) */
+  indeterminate?: boolean;
+  /** Size of the checkbox */
+  size?: CheckboxSize;
+  /** Visual style variant */
+  variant?: CheckboxStyle;
+  /** Error message displayed below the checkbox */
+  error?: string;
+  /** Helper text displayed below the checkbox */
+  helperText?: string;
+}

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize, CheckboxStyle } from './Checkbox.types';

package/src/components/CheckboxLabel/CheckboxLabel.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import { forwardRef, useId, type ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+import { Checkbox } from '../Checkbox/Checkbox';
+import type { CheckboxLabelProps } from './CheckboxLabel.types';
+import {
+  ROW_CLASSES,
+  LABEL_BLOCK_CLASSES,
+  WRAPPER_CLASSES,
+  LABEL_TEXT_CLASSES,
+  HELPER_TEXT_CLASSES,
+  ERROR_TEXT_CLASSES,
+  DISABLED_TEXT_CLASSES,
+} from './CheckboxLabel.variants';
+
+/**
+ * Resolve a localized text slot.
+ *
+ * Picks the EN/AR variant matching the resolved `dir`. If that variant isn't
+ * provided, falls back to the opposite language, then to the single-language
+ * `fallback` prop (e.g. the legacy `label` prop).
+ */
+function resolveLocalized(
+  en: ReactNode | undefined,
+  ar: ReactNode | undefined,
+  fallback: ReactNode | undefined,
+  dir: 'ltr' | 'rtl' | undefined,
+): ReactNode | undefined {
+  const primary = dir === 'rtl' ? (ar ?? en) : (en ?? ar);
+  return primary ?? fallback;
+}
+
+/* ── Alert circle icon (16px) ─────────────────────────────────── */
+function AlertCircleIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 16 16"
+      fill="none"
+      className={className}
+      width="16"
+      height="16"
+    >
+      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M8 5v3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      <circle cx="8" cy="11" r="0.9" fill="currentColor" />
+    </svg>
+  );
+}
+
+/**
+ * CheckboxLabel — a composed checkbox control with label, helper text, and
+ * optional error message. Supports four placements of the checkbox relative to
+ * the label: `start` (default), `end`, `top`, `bottom`. RTL is handled
+ * automatically via the ambient `dir` attribute.
+ */
+export const CheckboxLabel = forwardRef<HTMLInputElement, CheckboxLabelProps>(
+  function CheckboxLabel(
+    {
+      label,
+      labelEn,
+      labelAr,
+      helperText,
+      helperTextEn,
+      helperTextAr,
+      error,
+      errorEn,
+      errorAr,
+      placement = 'start',
+      size = 'md',
+      variant = 'primary',
+      indeterminate = false,
+      hideAlertIcon = false,
+      disabled = false,
+      wrapperClassName,
+      className,
+      id,
+      dir: dirProp,
+      rtl,
+      ...rest
+    },
+    ref,
+  ) {
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+
+    const resolvedLabel = resolveLocalized(labelEn, labelAr, label, dir);
+    const resolvedHelper = resolveLocalized(helperTextEn, helperTextAr, helperText, dir);
+    const resolvedError = resolveLocalized(errorEn, errorAr, error, dir);
+
+    const reactId = useId();
+    const inputId = id ?? `checkbox-label-${reactId}`;
+    const helperId = resolvedHelper ? `${inputId}-helper` : undefined;
+    const errorId = resolvedError ? `${inputId}-error` : undefined;
+    const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;
+
+    return (
+      <div
+        data-slot="checkbox-label"
+        data-placement={placement}
+        dir={dir}
+        className={cn(WRAPPER_CLASSES, wrapperClassName)}
+      >
+        <div className={cn('flex w-full', ROW_CLASSES[placement])}>
+          {/* Checkbox control — reuses the package Checkbox without its label. */}
+          <Checkbox
+            ref={ref}
+            id={inputId}
+            size={size}
+            variant={variant}
+            indeterminate={indeterminate}
+            disabled={disabled}
+            aria-describedby={describedBy}
+            aria-invalid={resolvedError ? true : undefined}
+            className={cn('shrink-0', className)}
+            {...rest}
+          />
+
+          {/* Label + helper text block */}
+          <label
+            htmlFor={inputId}
+            className={cn(LABEL_BLOCK_CLASSES, disabled && DISABLED_TEXT_CLASSES)}
+          >
+            <span className={LABEL_TEXT_CLASSES}>{resolvedLabel}</span>
+            {resolvedHelper ? (
+              <span id={helperId} className={HELPER_TEXT_CLASSES}>
+                {resolvedHelper}
+              </span>
+            ) : null}
+          </label>
+        </div>
+
+        {/* Error / warning message */}
+        {resolvedError ? (
+          <div
+            id={errorId}
+            data-slot="alert-message"
+            role="alert"
+            className={cn('flex w-full items-center gap-spacing-xs', ERROR_TEXT_CLASSES)}
+          >
+            {!hideAlertIcon ? <AlertCircleIcon className="size-icon-md shrink-0" /> : null}
+            <span className="min-w-0 flex-1">{resolvedError}</span>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);

package/src/components/CheckboxLabel/CheckboxLabel.types.ts

@@ -0,0 +1,55 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { CheckboxSize, CheckboxStyle } from '../Checkbox/Checkbox.types';
+
+/** Position of the checkbox control relative to the label block. */
+export type CheckboxLabelPlacement = 'start' | 'end' | 'top' | 'bottom';
+
+export interface CheckboxLabelProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+  /**
+   * Main label shown next to / above / below the checkbox.
+   * Used as a fallback when neither `labelEn` nor `labelAr` is set.
+   */
+  label?: ReactNode;
+  /** English label — rendered when `dir="ltr"` (or `dir` is undefined). */
+  labelEn?: ReactNode;
+  /** Arabic label — rendered when `dir="rtl"`. */
+  labelAr?: ReactNode;
+
+  /** Optional descriptive text shown under the label. Fallback when EN/AR variants are unset. */
+  helperText?: ReactNode;
+  /** English helper text. */
+  helperTextEn?: ReactNode;
+  /** Arabic helper text. */
+  helperTextAr?: ReactNode;
+
+  /** Error / warning message shown with an alert icon below the row. Fallback. */
+  error?: ReactNode;
+  /** English error / warning message. */
+  errorEn?: ReactNode;
+  /** Arabic error / warning message. */
+  errorAr?: ReactNode;
+
+  /** Where to place the checkbox control relative to the label. @default 'start' */
+  placement?: CheckboxLabelPlacement;
+  /** Size of the checkbox control */
+  size?: CheckboxSize;
+  /** Visual style variant of the checkbox control */
+  variant?: CheckboxStyle;
+  /** Displays a dash instead of a check (for partial selection) */
+  indeterminate?: boolean;
+  /** Hide the leading alert icon on the error message */
+  hideAlertIcon?: boolean;
+  /** Disable the control */
+  disabled?: boolean;
+  /** Extra class for the outer wrapper */
+  wrapperClassName?: string;
+
+  /**
+   * Direction — drives which language props render (`labelEn` vs `labelAr`)
+   * and is applied as `dir` on the root element so every descendant inherits it.
+   */
+  dir?: 'ltr' | 'rtl';
+  /** @deprecated Use `dir="rtl"` instead. */
+  rtl?: boolean;
+}

package/src/components/CheckboxLabel/CheckboxLabel.variants.ts

@@ -0,0 +1,35 @@
+import type { CheckboxLabelPlacement } from './CheckboxLabel.types';
+
+/**
+ * Flex direction + alignment for the row that contains the checkbox + label block.
+ * RTL is handled automatically by the ambient `dir` attribute; `flex-row` mirrors
+ * itself under `dir="rtl"`.
+ */
+export const ROW_CLASSES: Record<CheckboxLabelPlacement, string> = {
+  start: 'flex-row items-start gap-spacing-md',
+  end: 'flex-row-reverse items-start gap-spacing-xl',
+  top: 'flex-col items-stretch gap-spacing-md',
+  bottom: 'flex-col-reverse items-stretch gap-spacing-md',
+};
+
+/** The label + helper text stack. */
+export const LABEL_BLOCK_CLASSES =
+  'flex min-w-0 flex-1 flex-col justify-center gap-spacing-xs';
+
+/** Outer wrapper layout (always a vertical stack: row + alert message). */
+export const WRAPPER_CLASSES = 'flex w-full flex-col gap-spacing-md';
+
+/** Label text style (Text md / Medium). */
+export const LABEL_TEXT_CLASSES =
+  'text-text-md font-[500] text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]';
+
+/** Helper text style (Text sm / Regular). */
+export const HELPER_TEXT_CLASSES =
+  'text-text-sm font-[400] text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]';
+
+/** Error / warning message style (Text sm / Medium). */
+export const ERROR_TEXT_CLASSES =
+  'text-text-sm font-[500] text-[rgba(180,35,24,1)] dark:text-[rgba(248,113,113,1)]';
+
+/** Disabled text dimming applied on top of the label/helper. */
+export const DISABLED_TEXT_CLASSES = 'opacity-60 cursor-not-allowed';

package/src/components/CheckboxLabel/index.ts

@@ -0,0 +1,2 @@
+export { CheckboxLabel } from './CheckboxLabel';
+export type { CheckboxLabelProps, CheckboxLabelPlacement } from './CheckboxLabel.types';