@altruist03/ui 0.0.0-stage → 0.2.0

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,427 @@
+import React, { useState, useCallback } from 'react';
+import type { RadioButtonProps, RadioButtonGroupProps } from './RadioButton.types';
+import { getRadioTokensFromResolved } from '../../tokens';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+// import { Icon as FirebirdIcon } from "firebird-icon-lib";
+
+export const RadioButton = ({
+  label,
+  description,
+  size = 'md',
+  value,
+  checked,
+  disabled = false,
+  name,
+  id,
+  onChange,
+  onBlur,
+  onFocus,
+}: RadioButtonProps) => {
+  const radioId = id || `${name || 'radio'}-${value}`;
+  const resolvedTokens = useTokens();
+  const tokens = getRadioTokensFromResolved(resolvedTokens);
+  const sizeKey = size as 'sm' | 'md' | 'lg';
+  const sizeTokens = (resolvedTokens?.components as any)?.radio?.size?.[sizeKey];
+  const radioSize = sizeTokens?.radioSize ?? tokens.radioSize;
+  const labelFontSize = sizeTokens?.labelFontSize ?? tokens.labelFontSize;
+  const dotSize = sizeTokens?.dotSize ?? tokens.radioDotSize;
+
+  const [focused, setFocused] = useState(false);
+
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
+
+  const containerStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: description ? 'flex-start' : 'center',
+    position: 'relative',
+    margin: 0,
+    marginBottom: tokens.labelMarginBottom,
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    userSelect: 'none',
+  };
+
+  // Hidden native input for accessibility
+  const inputStyle: React.CSSProperties = {
+    position: 'absolute',
+    opacity: 0,
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    width: 0,
+    height: 0,
+  };
+
+  // Custom checkmark outer circle - always show border ring, fill with background
+  const checkmarkStyle: React.CSSProperties = {
+    position: 'relative',
+    flexShrink: 0,
+    width: radioSize,
+    height: radioSize,
+    borderRadius: '50%',
+    backgroundColor: tokens.radioBackground,
+    border: `${tokens.radioStrokeWidth} solid ${tokens.radioColorInactive}`,
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: tokens.labelMarginLeft,
+    transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+    boxShadow:
+      focused && !disabled && tokens.radioFocusRing !== 'none' ? tokens.radioFocusRing : undefined,
+    opacity: disabled ? 0.6 : 1,
+  };
+
+  // Inner dot (visible only when checked) - uses tokenized dot color and size
+  const dotStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: dotSize,
+    height: dotSize,
+    borderRadius: '50%',
+    background: tokens.radioColorDot,
+    display: checked ? 'block' : 'none',
+  };
+
+  const textStyle: React.CSSProperties = {
+    fontFamily: tokens.labelFontFamily,
+    fontSize: labelFontSize,
+    fontWeight: tokens.labelFontWeight,
+    color: checked ? tokens.labelColorActive : tokens.labelColorInactive,
+    userSelect: 'none',
+    transition: 'color 0.2s ease',
+  };
+
+  const labelContainerStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  const descriptionStyle: React.CSSProperties = {
+    fontFamily: tokens.labelFontFamily,
+    fontSize: (() => {
+      if (typeof labelFontSize === 'string') {
+        const numValue = parseInt(labelFontSize.replace('px', ''), 10);
+        return isNaN(numValue) ? '11px' : `${Math.round(numValue * 0.786)}px`;
+      }
+      return `${Math.round((labelFontSize as number) * 0.786)}px`;
+    })(),
+    fontWeight: tokens.labelFontWeight,
+    color: checked ? tokens.labelColorActive : tokens.labelColorInactive,
+    opacity: 0.8,
+    marginTop: '2px',
+    userSelect: 'none',
+  };
+
+  return (
+    <label htmlFor={radioId} style={containerStyle}>
+      <input
+        type="radio"
+        id={radioId}
+        name={name}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={(e) => {
+          handleBlur();
+          onBlur?.(e);
+        }}
+        onFocus={(e) => {
+          handleFocus();
+          onFocus?.(e);
+        }}
+        style={inputStyle}
+      />
+      <span style={checkmarkStyle}>
+        <span style={dotStyle} />
+      </span>
+      {description ?
+        <div style={labelContainerStyle}>
+          <span style={textStyle}>{label}</span>
+          <span style={descriptionStyle}>{description}</span>
+        </div>
+      : <span style={textStyle}>{label}</span>}
+    </label>
+  );
+};
+
+export const RadioButtonGroup = ({
+  label,
+  helperText,
+  required = false,
+  error = false,
+  options,
+  value,
+  defaultValue,
+  id,
+  name,
+  disabled = false,
+  direction = 'horizontal',
+  groupClassName,
+  itemClassName,
+  size = 'md',
+  onChange,
+}: RadioButtonGroupProps) => {
+  const groupName = name || `radio-group-${Math.random().toString(36).substr(2, 9)}`;
+  const groupId = id ?? `${groupName}-group`;
+  const [internalValue, setInternalValue] = React.useState<string | undefined>(
+    value !== undefined ? value : defaultValue
+  );
+  const resolvedTokens = useTokens();
+  const tokens = getRadioTokensFromResolved(resolvedTokens);
+  const errorColor = resolvedTokens?.semantic?.color?.error?.default || '#c00';
+  const sizeKey = size as 'sm' | 'md' | 'lg';
+  const sizeTokens = (resolvedTokens?.components as any)?.radio?.size?.[sizeKey];
+  const radioSize = sizeTokens?.radioSize ?? tokens.radioSize;
+  const labelFontSize = sizeTokens?.labelFontSize ?? tokens.labelFontSize;
+  const descriptionFontSize = sizeTokens?.descriptionFontSize ?? tokens.descriptionFontSize;
+  const dotSize = sizeTokens?.dotSize ?? tokens.radioDotSize;
+
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  const currentValue = value !== undefined ? value : internalValue;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    if (value === undefined) {
+      // Uncontrolled
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  const containerStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  const headingStyle: React.CSSProperties = {
+    display: 'block',
+    marginBottom: parseInt(tokens.headingMarginBottom, 10),
+    fontSize: parseInt(tokens.headingFontSize, 10),
+    fontWeight: tokens.headingFontWeight,
+    color: tokens.headingColor,
+    fontFamily: tokens.headingFontFamily,
+  };
+
+  const groupStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: direction === 'horizontal' ? 'row' : 'column',
+    columnGap: direction === 'horizontal' ? tokens.groupGapHorizontal : tokens.groupGapVertical,
+    rowGap: direction === 'horizontal' ? tokens.groupGapVertical : tokens.groupGapHorizontal,
+    flexWrap: 'wrap',
+  };
+
+  return (
+    <div style={containerStyle}>
+      {label != null && label !== '' && (
+        <label style={headingStyle}>
+          {required && <span style={{ color: errorColor, marginRight: 4 }}>*</span>}
+          {label}
+        </label>
+      )}
+      <div
+        role="radiogroup"
+        aria-invalid={error}
+        aria-describedby={helperText ? `${groupId}-helper` : undefined}
+        style={groupStyle}
+        className={groupClassName}
+      >
+        {options.map((option) => {
+          const isChecked = currentValue === option.value;
+          const optionDisabled = disabled || option.disabled;
+          const optionId = `${groupName}-${option.value}`;
+
+          return (
+            <div key={option.value} className={itemClassName}>
+              <RadioButtonGroupItem
+                option={option}
+                optionId={optionId}
+                groupName={groupName}
+                isChecked={isChecked}
+                optionDisabled={optionDisabled}
+                error={error}
+                tokens={tokens}
+                radioSize={radioSize}
+                labelFontSize={labelFontSize}
+                descriptionFontSize={descriptionFontSize}
+                dotSize={dotSize}
+                handleChange={handleChange}
+              />
+            </div>
+          );
+        })}
+      </div>
+      {helperText != null && helperText !== '' && (
+        <div
+          id={`${groupId}-helper`}
+          style={{
+            marginTop: tokens.helperMarginTop,
+            fontSize: tokens.helperFontSize,
+            color: error ? tokens.helperErrorColor : tokens.helperColor,
+            fontFamily: tokens.labelFontFamily,
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: 4,
+          }}
+          role={error ? 'alert' : undefined}
+        >
+          {/* <FirebirdIcon name="info_circle" size={16} /> */}
+          <span>{helperText}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Extracted to its own component so each item can have its own hover state
+function RadioButtonGroupItem({
+  option,
+  optionId,
+  groupName,
+  isChecked,
+  optionDisabled,
+  error = false,
+  tokens,
+  radioSize,
+  labelFontSize,
+  descriptionFontSize,
+  dotSize,
+  handleChange,
+}: {
+  option: {
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+  };
+  optionId: string;
+  groupName: string;
+  isChecked: boolean;
+  optionDisabled: boolean | undefined;
+  error?: boolean;
+  tokens: ReturnType<typeof getRadioTokensFromResolved>;
+  radioSize: string;
+  labelFontSize: string;
+  descriptionFontSize: string;
+  dotSize: string;
+  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}) {
+  const activeColor = tokens.optionBorderActive;
+  const inactiveBorderColor = error ? tokens.helperErrorColor : tokens.optionBorderInactive;
+  const activeBackground = tokens.optionBackgroundActive;
+  const inactiveBackground = tokens.optionBackgroundInactive;
+  const activeTextColor = tokens.optionTextActive;
+  const inactiveTextColor = tokens.optionTextInactive;
+
+  const labelStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 0,
+    marginBottom: option.description ? tokens.labelMarginBottom : 0,
+    // padding: '12px 20px',
+    // borderRadius: 999,
+    // border: `2px solid ${isChecked ? activeColor : inactiveBorderColor}`,
+    // backgroundColor: isChecked ? activeBackground : inactiveBackground,
+    cursor: optionDisabled ? 'not-allowed' : 'pointer',
+    userSelect: 'none',
+    transition: 'border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease',
+    // boxShadow:
+    //   focused && !optionDisabled && tokens.radioFocusRing !== 'none' ?
+    //     tokens.radioFocusRing
+    //   : undefined,
+    opacity: optionDisabled ? 0.6 : 1,
+  };
+
+  const inputStyle: React.CSSProperties = {
+    position: 'absolute',
+    opacity: 0,
+    cursor: optionDisabled ? 'not-allowed' : 'pointer',
+    width: 0,
+    height: 0,
+  };
+
+  const checkmarkStyle: React.CSSProperties = {
+    position: 'relative',
+    flexShrink: 0,
+    width: radioSize,
+    height: radioSize,
+    borderRadius: '50%',
+    backgroundColor: isChecked ? activeBackground : inactiveBackground,
+    border: `${tokens.radioStrokeWidth} solid ${isChecked ? activeColor : inactiveBorderColor}`,
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
+    transition: 'border-color 0.2s ease, background-color 0.2s ease',
+  };
+
+  const dotStyleInner: React.CSSProperties = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: dotSize,
+    height: dotSize,
+    borderRadius: '50%',
+    background: tokens.radioColorDot,
+    display: isChecked ? 'block' : 'none',
+  };
+
+  const textStyle: React.CSSProperties = {
+    fontFamily: tokens.labelFontFamily,
+    fontSize: labelFontSize,
+    fontWeight: isChecked ? 600 : tokens.labelFontWeight,
+    color: isChecked ? activeTextColor : inactiveTextColor,
+    userSelect: 'none',
+    transition: 'color 0.2s ease',
+    lineHeight: '1.5',
+  };
+
+  const labelContainerStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    marginLeft: `calc(${radioSize} + 10px)`,
+    marginTop: '6px',
+  };
+
+  const descriptionStyle: React.CSSProperties = {
+    fontFamily: tokens.labelFontFamily,
+    fontSize: descriptionFontSize,
+    fontWeight: tokens.descriptionFontWeight,
+    color: tokens.descriptionColor,
+    userSelect: 'none',
+    transition: 'color 0.2s ease',
+  };
+
+  return (
+    <label key={option.value} htmlFor={optionId} style={labelStyle}>
+      <input
+        type="radio"
+        id={optionId}
+        name={groupName}
+        value={option.value}
+        checked={isChecked}
+        disabled={!!optionDisabled}
+        onChange={handleChange}
+        style={inputStyle}
+      />
+      <span style={checkmarkStyle}>
+        <span style={dotStyleInner} />
+      </span>
+      <span style={textStyle}>{option.label}</span>
+      {option.description ?
+        <div style={labelContainerStyle}>
+          <span style={descriptionStyle}>{option.description}</span>
+        </div>
+      : <></>}
+    </label>
+  );
+}

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

@@ -0,0 +1,117 @@
+export type RadioButtonSize = "sm" | "md" | "lg";
+
+export interface RadioButtonProps {
+  /**
+   * The label text displayed next to the radio button
+   */
+  label: string;
+  /**
+   * Optional description text displayed below the label
+   */
+  description?: string;
+  /**
+   * Size variant: sm, md, or lg
+   */
+  size?: RadioButtonSize;
+  /**
+   * Current value (for controlled usage)
+   */
+  value?: string;
+  /**
+   * Whether the radio button is checked
+   */
+  checked?: boolean;
+  /**
+   * Whether the radio button is disabled
+   */
+  disabled?: boolean;
+  /**
+   * The name attribute for form grouping
+   */
+  name?: string;
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+  /**
+   * onChange handler
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * onBlur handler
+   */
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * onFocus handler
+   */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+
+export interface RadioButtonGroupProps {
+  /**
+   * The label/heading displayed above the radio button group
+   */
+  label?: string;
+  /**
+   * Helper or error text displayed below the group
+   */
+  helperText?: string;
+  /**
+   * Whether the field is required
+   */
+  required?: boolean;
+  /**
+   * Shows error state (red border on radios, helper text in error color)
+   */
+  error?: boolean;
+  /**
+   * Array of radio button options
+   */
+  options: Array<{
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+  }>;
+  /**
+   * Selected value (for controlled usage)
+   */
+  value?: string;
+  /**
+   * Default selected value (for uncontrolled usage)
+   */
+  defaultValue?: string;
+  /**
+   * HTML id for the group (used for aria-describedby when helperText is present)
+   */
+  id?: string;
+  /**
+   * The name attribute for form grouping
+   */
+  name?: string;
+  /**
+   * Whether the group is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Layout direction: 'horizontal' or 'vertical'
+   */
+  direction?: "horizontal" | "vertical";
+  /**
+   * Optional className applied to the group container that wraps all options.
+   */
+  groupClassName?: string;
+  /**
+   * Optional className applied to each option wrapper.
+   * Useful for grid layouts (e.g. Bootstrap `col-md-4`).
+   */
+  itemClassName?: string;
+  /**
+   * Size variant: sm, md, or lg
+   */
+  size?: RadioButtonSize;
+  /**
+   * onChange handler - receives the selected value
+   */
+  onChange?: (value: string) => void;
+}