sdaia-ui 1.0.1 → 1.0.2

package/src/components/RadioButton/RadioButton.tsx

@@ -1,237 +0,0 @@
-'use client';
-
-import { forwardRef, useCallback, useEffect, useRef, useState, type ChangeEvent } from 'react';
-import type { RadioButtonProps, RadioButtonSize, RadioButtonStyle } from './RadioButton.types';
-import { cn } from '../../lib/cn';
-
-/* ── Size variant map ──────────────────────────────────────────── */
-const SIZE_MAP: Record<RadioButtonSize, { box: string; icon: string; label: string }> = {
-  sm: { box: 'h-[16px] w-[16px] rounded-full', icon: 'h-[5px] w-[5px]', label: 'text-[13px]' },
-  md: { box: 'h-[20px] w-[20px] rounded-full', icon: 'h-[6px] w-[6px]', label: 'text-text-sm' },
-  lg: { box: 'h-[24px] w-[24px] rounded-full', icon: 'h-[7px] w-[7px]', 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;
-  /** Disabled overrides */
-  disabledChecked: string;
-  disabledUnchecked: string;
-}
-
-const STYLE_MAP: Record<RadioButtonStyle, 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:ring-2 peer-focus:ring-[rgba(27,131,84,0.7)] peer-focus:ring-offset-2 peer-focus:ring-offset-white dark:peer-focus: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)]',
-    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(108,115,127,1)] dark:group-active:bg-[rgba(190,196,204,1)]',
-    iconColor: 'text-white dark:text-[rgba(13,18,28,1)]',
-    focusRing:
-      'peer-focus:ring-2 peer-focus:ring-[rgba(22,22,22,0.7)] peer-focus:ring-offset-2 peer-focus:ring-offset-white dark:peer-focus: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)]',
-    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',
-  },
-};
-
-/* ── Component ─────────────────────────────────────────────────── */
-export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(function RadioButton(
-  {
-    label,
-    size = 'md',
-    variant: radioStyle = 'primary',
-    error,
-    helperText,
-    disabled = false,
-    checked: checkedProp,
-    defaultChecked,
-    onChange,
-    className = '',
-    ...rest
-  },
-  forwardedRef,
-) {
-  const sizeStyles = SIZE_MAP[size];
-  const styleVariant = STYLE_MAP[radioStyle];
-  const hasError = Boolean(error);
-
-  /* ──────────────────────────────────────────────────────────────
-   * Controlled vs uncontrolled mode
-   *
-   * - If the consumer passes `checked`, the component is controlled
-   *   and the visual always mirrors that prop.
-   * - Otherwise it's uncontrolled. We seed internal state from
-   *   `defaultChecked` and update it in our own `handleChange`.
-   *
-   * For uncontrolled radios inside a name-matched group, native
-   * selection of one radio silently deselects the others — no
-   * change event fires on the deselected sibling. We listen at
-   * the document level for change events on radios sharing our
-   * `name` and reset our internal state if another radio wins.
-   * ────────────────────────────────────────────────────────────── */
-  const isControlled = checkedProp !== undefined;
-  const [uncontrolledChecked, setUncontrolledChecked] = useState(Boolean(defaultChecked));
-  const isChecked = isControlled ? Boolean(checkedProp) : uncontrolledChecked;
-
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  // Merge refs — keep forwardedRef AND our own inputRef in sync.
-  const setRef = useCallback(
-    (node: HTMLInputElement | null) => {
-      inputRef.current = node;
-      if (typeof forwardedRef === 'function') forwardedRef(node);
-      else if (forwardedRef)
-        (forwardedRef as React.MutableRefObject<HTMLInputElement | null>).current = node;
-    },
-    [forwardedRef],
-  );
-
-  const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      if (!isControlled) setUncontrolledChecked(event.target.checked);
-      onChange?.(event);
-    },
-    [isControlled, onChange],
-  );
-
-  // Group-deselect listener for uncontrolled radios.
-  useEffect(() => {
-    if (isControlled) return;
-    const self = inputRef.current;
-    const name = self?.name;
-    if (!self || !name) return;
-
-    const handleGroupChange = (event: Event) => {
-      const target = event.target;
-      if (
-        target instanceof HTMLInputElement &&
-        target !== self &&
-        target.type === 'radio' &&
-        target.name === name &&
-        target.checked
-      ) {
-        setUncontrolledChecked(false);
-      }
-    };
-
-    document.addEventListener('change', handleGroupChange, true);
-    return () => document.removeEventListener('change', handleGroupChange, true);
-  }, [isControlled]);
-
-  /* ── 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 (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,
-    );
-  }
-
-  return (
-    <div data-slot="radio-button" 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' : 'cursor-pointer',
-        )}
-      >
-        {/* Native radio — covers the label so focus does not auto-scroll. */}
-        <input
-          {...rest}
-          ref={setRef}
-          type="radio"
-          disabled={disabled}
-          onChange={handleChange}
-          className="peer absolute inset-0 m-0 h-full w-full cursor-inherit opacity-0"
-          {...(isControlled
-            ? { checked: isChecked }
-            : { defaultChecked: Boolean(defaultChecked) })}
-        />
-
-        {/* Custom radio visual */}
-        <span
-          className={cn(
-            'inline-flex flex-shrink-0 items-center justify-center motion-feedback',
-            sizeStyles.box,
-            boxClasses,
-            // Focus ring via peer
-            !disabled && styleVariant.focusRing,
-          )}
-          aria-hidden="true"
-        >
-          {isChecked ? (
-            <span
-              className={cn(
-                'rounded-full bg-current',
-                sizeStyles.icon,
-                !disabled && 'group-active:bg-[rgba(210,214,219,1)] dark:group-active:bg-[rgba(75,85,99,1)]',
-              )}
-            />
-          ) : null}
-        </span>
-
-        {label && (
-          <span
-            className={`${sizeStyles.label} text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]`}
-          >
-            {label}
-          </span>
-        )}
-      </label>
-
-      {(error || helperText) && (
-        <p
-          data-slot="helper-text"
-          className={cn(
-            'ms-[30px] text-text-xs',
-            hasError
-              ? 'text-[rgba(239,68,68,1)]'
-              : 'text-[rgba(107,114,128,1)] dark:text-[rgba(156,163,175,1)]',
-          )}
-        >
-          {error || helperText}
-        </p>
-      )}
-    </div>
-  );
-});

package/src/components/RadioButton/RadioButton.types.ts

@@ -1,18 +0,0 @@
-import type { InputHTMLAttributes, ReactNode } from 'react';
-
-export type RadioButtonSize = 'sm' | 'md' | 'lg';
-
-export type RadioButtonStyle = 'primary' | 'neutral';
-
-export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'readOnly'> {
-  /** Label displayed next to the radio button */
-  label?: ReactNode;
-  /** Size of the radio button */
-  size?: RadioButtonSize;
-  /** Visual style variant */
-  variant?: RadioButtonStyle;
-  /** Error message displayed below the radio button */
-  error?: string;
-  /** Helper text displayed below the radio button */
-  helperText?: string;
-}

package/src/components/RadioButton/index.ts

@@ -1,2 +0,0 @@
-export { RadioButton } from './RadioButton';
-export type { RadioButtonProps, RadioButtonSize, RadioButtonStyle } from './RadioButton.types';

package/src/components/RadioLabel/RadioLabel.tsx

@@ -1,157 +0,0 @@
-'use client';
-
-import { forwardRef, useId, type ReactNode } from 'react';
-import { cn } from '../../lib/cn';
-import { RadioButton } from '../RadioButton/RadioButton';
-import type { RadioLabelProps } from './RadioLabel.types';
-import {
-  ROW_CLASSES,
-  LABEL_BLOCK_CLASSES,
-  WRAPPER_CLASSES,
-  LABEL_TEXT_CLASSES,
-  HELPER_TEXT_CLASSES,
-  ERROR_TEXT_CLASSES,
-  DISABLED_TEXT_CLASSES,
-} from './RadioLabel.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>
-  );
-}
-
-/**
- * RadioLabel — a composed radio control with label, helper text, and optional
- * error message. Supports four placements of the radio relative to the label:
- * `start` (default), `end`, `top`, `bottom`. RTL is handled automatically via
- * the ambient `dir` attribute.
- */
-export const RadioLabel = forwardRef<HTMLInputElement, RadioLabelProps>(
-  function RadioLabel(
-    {
-      label,
-      labelEn,
-      labelAr,
-      helperText,
-      helperTextEn,
-      helperTextAr,
-      error,
-      errorEn,
-      errorAr,
-      placement = 'start',
-      size = 'md',
-      variant = 'primary',
-      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 ?? `radio-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="radio-label"
-        data-placement={placement}
-        dir={dir}
-        className={cn(WRAPPER_CLASSES, wrapperClassName)}
-      >
-        <div className={cn('flex w-full', ROW_CLASSES[placement])}>
-          {/* Radio control — reuses the package RadioButton without its label. */}
-          <RadioButton
-            ref={ref}
-            id={inputId}
-            size={size}
-            variant={variant}
-            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/RadioLabel/RadioLabel.types.ts

@@ -1,53 +0,0 @@
-import type { InputHTMLAttributes, ReactNode } from 'react';
-import type { RadioButtonSize, RadioButtonStyle } from '../RadioButton/RadioButton.types';
-
-/** Position of the radio control relative to the label block. */
-export type RadioLabelPlacement = 'start' | 'end' | 'top' | 'bottom';
-
-export interface RadioLabelProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'readOnly'> {
-  /**
-   * Main label shown next to / above / below the radio.
-   * 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 radio control relative to the label. @default 'start' */
-  placement?: RadioLabelPlacement;
-  /** Size of the radio control */
-  size?: RadioButtonSize;
-  /** Visual style variant of the radio control */
-  variant?: RadioButtonStyle;
-  /** 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/RadioLabel/RadioLabel.variants.ts

@@ -1,36 +0,0 @@
-import type { RadioLabelPlacement } from './RadioLabel.types';
-
-/**
- * Flex direction + alignment for the row that contains the radio + label block.
- * Uses logical `flex-row` / `flex-row-reverse` so RTL is handled automatically by `dir`.
- * For start/end we use a plain `flex-row`; the parent `dir="rtl"` mirrors it.
- */
-export const ROW_CLASSES: Record<RadioLabelPlacement, 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/RadioLabel/index.ts

@@ -1,2 +0,0 @@
-export { RadioLabel } from './RadioLabel';
-export type { RadioLabelProps, RadioLabelPlacement } from './RadioLabel.types';