@mich8060/chg-design-system 0.1.0

package/src/ui/ProgressIndicator/ProgressIndicator.scss

@@ -0,0 +1,133 @@
+@use "../../styles/typography" as *;
+
+.uds-progress-indicator {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uds-gap-8);
+  width: 100%;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--uds-gap-8);
+  }
+
+  &__label {
+    @include uds-body-14-medium;
+    color: var(--uds-text-primary);
+  }
+
+  &__value {
+    @include uds-body-14-medium;
+    color: var(--uds-text-secondary);
+    white-space: nowrap;
+  }
+
+  &__track {
+    position: relative;
+    width: 100%;
+    background-color: var(--uds-surface-tertiary);
+    border-radius: var(--uds-radius-4);
+    overflow: hidden;
+  }
+
+  &__fill {
+    height: 100%;
+    background-color: var(--uds-surface-brand-primary);
+    border-radius: var(--uds-radius-4);
+    transition: width var(--uds-animation-duration-300) var(--uds-animation-ease-standard);
+    position: relative;
+    overflow: hidden;
+
+    // Animated shimmer effect (optional, can be enabled via class)
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.2),
+        transparent
+      );
+      transform: translateX(-100%);
+      transition: transform 0.6s ease;
+    }
+  }
+
+  // Size variants
+  &--small {
+    .uds-progress-indicator__track {
+      height: 4px;
+    }
+  }
+
+  &--medium {
+    .uds-progress-indicator__track {
+      height: 8px;
+    }
+  }
+
+  &--large {
+    .uds-progress-indicator__track {
+      height: 12px;
+    }
+  }
+
+  // Variant colors
+  &--default,
+  &--blue {
+    .uds-progress-indicator__fill {
+      background-color: var(--uds-surface-brand-primary);
+    }
+  }
+
+  &--green,
+  &--success {
+    .uds-progress-indicator__fill {
+      background-color: #22c55e; // Green
+    }
+  }
+
+  &--orange,
+  &--warning {
+    .uds-progress-indicator__fill {
+      background-color: #f97316; // Orange
+    }
+  }
+
+  &--red,
+  &--error {
+    .uds-progress-indicator__fill {
+      background-color: #ef4444; // Red
+    }
+  }
+
+  &--purple {
+    .uds-progress-indicator__fill {
+      background-color: #a855f7; // Purple
+    }
+  }
+
+  // Animated state (for indeterminate/loading progress)
+  &--animated {
+    .uds-progress-indicator__fill {
+      &::after {
+        animation: progress-shimmer 1.5s infinite;
+      }
+    }
+  }
+}
+
+@keyframes progress-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/ui/ProgressIndicator/index.js

@@ -0,0 +1 @@
+export { default } from "./ProgressIndicator";

package/src/ui/Radio/Radio.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import "./Radio.scss";
+
+/**
+ * Radio component for form inputs
+ * @param {boolean} checked - Whether the radio button is checked
+ * @param {function} onChange - Callback function when radio button state changes
+ * @param {string} name - Name attribute for grouping radio buttons (required for proper functionality)
+ * @param {string} id - Unique identifier for the radio input
+ * @param {string} value - Value of the radio button
+ * @param {string} label - Label text for the radio button
+ * @param {boolean} disabled - Whether the radio button is disabled
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the radio input
+ */
+export default function Radio({
+  checked = false,
+  onChange,
+  name,
+  id,
+  value,
+  label,
+  disabled = false,
+  className = "",
+  ...props
+}) {
+  const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
+
+  const handleChange = (event) => {
+    if (!disabled && onChange) {
+      onChange(event);
+    }
+  };
+
+  return (
+    <label
+      className={`radio ${disabled ? "radio--disabled" : ""} ${className}`}
+      htmlFor={radioId}
+    >
+      <input
+        type="radio"
+        id={radioId}
+        name={name}
+        value={value}
+        className="radio__input"
+        checked={checked}
+        onChange={handleChange}
+        disabled={disabled}
+        {...props}
+      />
+      <span className="radio__circle">
+        {checked && <span className="radio__dot" />}
+      </span>
+      {label && <span className="radio__label">{label}</span>}
+    </label>
+  );
+}

package/src/ui/Radio/Radio.scss

@@ -0,0 +1,84 @@
+@use "../../styles/typography" as *;
+
+.radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--uds-gap-8);
+  cursor: pointer;
+  user-select: none;
+}
+
+.radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.radio__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+
+  &:focus-visible + .radio__circle {
+    outline: solid var(--uds-focus-ring-width) var(--uds-focus-ring-border);
+    outline-offset: var(--uds-focus-ring-offset);
+  }
+}
+
+.radio__circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  border-radius: 50%;
+  background-color: var(--uds-surface-primary);
+  transition:
+    border-color var(--uds-animation-duration-200) var(--uds-animation-ease-standard),
+    box-shadow var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+  flex-shrink: 0;
+}
+
+.radio__input:checked + .radio__circle {
+  border-color: var(--uds-border-brand-primary);
+}
+
+.radio__input:not(:checked):not(:disabled) + .radio__circle:hover {
+  border-color: var(--uds-border-brand-primary);
+}
+
+.radio__input:disabled + .radio__circle {
+  background-color: var(--uds-surface-tertiary);
+  border-color: var(--uds-border-primary);
+  cursor: not-allowed;
+}
+
+.radio__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: var(--uds-surface-brand-primary);
+  display: block;
+}
+
+.radio__label {
+  @include uds-body-14-medium;
+  color: var(--uds-text-primary);
+  line-height: 20px;
+  cursor: pointer;
+}
+
+.radio--disabled .radio__label {
+  cursor: not-allowed;
+  color: var(--uds-text-secondary);
+}
+
+.radio__input:disabled + .radio__circle + .radio__label {
+  color: var(--uds-text-secondary);
+}

package/src/ui/Radio/index.js

@@ -0,0 +1 @@
+export { default } from "./Radio";

package/src/ui/Slider/Slider.jsx

@@ -0,0 +1,283 @@
+import React, { useState, useRef, useEffect } from "react";
+import "./Slider.scss";
+
+const BASE_CLASS = "uds-slider";
+
+/**
+ * Slider component for selecting values within a range
+ * @param {number|array} value - Current value(s). For single slider: number. For range slider: [min, max] array
+ * @param {function} onChange - Callback function when slider value changes
+ * @param {number} min - Minimum value
+ * @param {number} max - Maximum value
+ * @param {number} step - Step increment
+ * @param {boolean} range - Whether to use range mode (two handles)
+ * @param {boolean} showLabels - Whether to show value labels
+ * @param {string} label - Optional label text to display above the slider
+ * @param {boolean} disabled - Whether the slider is disabled
+ * @param {string} className - Additional CSS classes
+ * @param {string} 'aria-label' - Accessible label for screen readers
+ * @param {object} props - Additional props to pass to the slider element
+ */
+export default function Slider({
+  value: controlledValue,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  range = false,
+  showLabels = false,
+  label,
+  disabled = false,
+  className = "",
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const [internalValue, setInternalValue] = useState(range ? [min, max] : min);
+  const [isDragging, setIsDragging] = useState(null); // 'min', 'max', or null
+  const sliderRef = useRef(null);
+  const isControlled = controlledValue !== undefined;
+
+  const value = isControlled ? controlledValue : internalValue;
+  const currentMin = range ? value[0] : min;
+  const currentMax = range ? value[1] : value;
+
+  const sliderId = `slider-${Math.random().toString(36).substr(2, 9)}`;
+
+  const getPercentage = (val) => {
+    return ((val - min) / (max - min)) * 100;
+  };
+
+  const getValueFromPosition = (clientX) => {
+    if (!sliderRef.current) return min;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const percentage = Math.max(
+      0,
+      Math.min(1, (clientX - rect.left) / rect.width),
+    );
+    const rawValue = min + percentage * (max - min);
+    return Math.round(rawValue / step) * step;
+  };
+
+  const handleMouseDown = (e, handle) => {
+    if (disabled) return;
+    e.preventDefault();
+    setIsDragging(handle);
+  };
+
+  const handleMouseMove = (e) => {
+    if (!isDragging || disabled) return;
+
+    const newValue = getValueFromPosition(e.clientX);
+    let updatedValue;
+
+    if (range) {
+      if (isDragging === "min") {
+        updatedValue = [Math.min(newValue, currentMax - step), currentMax];
+      } else {
+        updatedValue = [currentMin, Math.max(newValue, currentMin + step)];
+      }
+    } else {
+      updatedValue = newValue;
+    }
+
+    if (!isControlled) {
+      setInternalValue(updatedValue);
+    }
+    if (onChange) {
+      onChange(updatedValue);
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(null);
+  };
+
+  useEffect(() => {
+    if (isDragging) {
+      const moveHandler = (e) => handleMouseMove(e);
+      const upHandler = () => handleMouseUp();
+      document.addEventListener("mousemove", moveHandler);
+      document.addEventListener("mouseup", upHandler);
+      return () => {
+        document.removeEventListener("mousemove", moveHandler);
+        document.removeEventListener("mouseup", upHandler);
+      };
+    }
+  }, [
+    isDragging,
+    currentMin,
+    currentMax,
+    range,
+    step,
+    disabled,
+    isControlled,
+    onChange,
+  ]);
+
+  const handleInputChange = (e, handle) => {
+    if (disabled) return;
+    const newValue = parseFloat(e.target.value);
+    let updatedValue;
+
+    if (range) {
+      if (handle === "min") {
+        updatedValue = [Math.min(newValue, currentMax - step), currentMax];
+      } else {
+        updatedValue = [currentMin, Math.max(newValue, currentMin + step)];
+      }
+    } else {
+      updatedValue = newValue;
+    }
+
+    if (!isControlled) {
+      setInternalValue(updatedValue);
+    }
+    if (onChange) {
+      onChange(updatedValue);
+    }
+  };
+
+  const minPercentage = getPercentage(currentMin);
+  const maxPercentage = getPercentage(currentMax);
+  const leftPosition = minPercentage;
+  const width = maxPercentage - minPercentage;
+
+  const classNames = [
+    BASE_CLASS,
+    range && `${BASE_CLASS}--range`,
+    disabled && `${BASE_CLASS}--disabled`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={classNames} {...props}>
+      {label && (
+        <div className={`${BASE_CLASS}__header`}>
+          <label htmlFor={sliderId} className={`${BASE_CLASS}__label`}>
+            {label}
+          </label>
+        </div>
+      )}
+      <div className={`${BASE_CLASS}__container`} ref={sliderRef}>
+        <div className={`${BASE_CLASS}__track`}>
+          {range ? (
+            <>
+              <div
+                className={`${BASE_CLASS}__fill`}
+                style={{
+                  left: `${leftPosition}%`,
+                  width: `${width}%`,
+                }}
+              />
+              <input
+                type="range"
+                id={`${sliderId}-min`}
+                min={min}
+                max={max}
+                step={step}
+                value={currentMin}
+                onChange={(e) => handleInputChange(e, "min")}
+                disabled={disabled}
+                className={`${BASE_CLASS}__input ${BASE_CLASS}__input--min`}
+                aria-label={ariaLabel || `${label || "Slider"} minimum value`}
+              />
+              <input
+                type="range"
+                id={`${sliderId}-max`}
+                min={min}
+                max={max}
+                step={step}
+                value={currentMax}
+                onChange={(e) => handleInputChange(e, "max")}
+                disabled={disabled}
+                className={`${BASE_CLASS}__input ${BASE_CLASS}__input--max`}
+                aria-label={ariaLabel || `${label || "Slider"} maximum value`}
+              />
+              <div
+                className={`${BASE_CLASS}__thumb ${BASE_CLASS}__thumb--min`}
+                style={{ left: `${minPercentage}%` }}
+                onMouseDown={(e) => handleMouseDown(e, "min")}
+                role="slider"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={currentMin}
+                tabIndex={disabled ? -1 : 0}
+              />
+              <div
+                className={`${BASE_CLASS}__thumb ${BASE_CLASS}__thumb--max`}
+                style={{ left: `${maxPercentage}%` }}
+                onMouseDown={(e) => handleMouseDown(e, "max")}
+                role="slider"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={currentMax}
+                tabIndex={disabled ? -1 : 0}
+              />
+            </>
+          ) : (
+            <>
+              <div
+                className={`${BASE_CLASS}__fill`}
+                style={{ width: `${maxPercentage}%` }}
+              />
+              <input
+                type="range"
+                id={sliderId}
+                min={min}
+                max={max}
+                step={step}
+                value={currentMax}
+                onChange={(e) => handleInputChange(e, "single")}
+                disabled={disabled}
+                className={`${BASE_CLASS}__input`}
+                aria-label={ariaLabel || label || "Slider"}
+              />
+              <div
+                className={`${BASE_CLASS}__thumb`}
+                style={{ left: `${maxPercentage}%` }}
+                onMouseDown={(e) => handleMouseDown(e, "single")}
+                role="slider"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={currentMax}
+                tabIndex={disabled ? -1 : 0}
+              />
+            </>
+          )}
+        </div>
+        {showLabels && (
+          <div className={`${BASE_CLASS}__labels`}>
+            {range ? (
+              <>
+                <span
+                  className={`${BASE_CLASS}__label-value`}
+                  style={{ left: `${minPercentage}%` }}
+                >
+                  {Math.round(((currentMin - min) / (max - min)) * 100)}%
+                </span>
+                <span
+                  className={`${BASE_CLASS}__label-value`}
+                  style={{ left: `${maxPercentage}%` }}
+                >
+                  {Math.round(((currentMax - min) / (max - min)) * 100)}%
+                </span>
+              </>
+            ) : (
+              <>
+                <span className={`${BASE_CLASS}__label-value`}>0%</span>
+                <span
+                  className={`${BASE_CLASS}__label-value`}
+                  style={{ left: `${maxPercentage}%` }}
+                >
+                  {Math.round(((currentMax - min) / (max - min)) * 100)}%
+                </span>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ui/Slider/Slider.scss

@@ -0,0 +1,156 @@
+@use "../../styles/typography" as *;
+
+.uds-slider {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uds-gap-8);
+  width: 100%;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__label {
+    @include uds-body-14-medium;
+    color: var(--uds-text-primary);
+  }
+
+  &__container {
+    position: relative;
+    width: 100%;
+    padding: var(--uds-spacing-8) 0;
+  }
+
+  &__track {
+    position: relative;
+    width: 100%;
+    height: 4px;
+    background-color: var(--uds-surface-tertiary);
+    border-radius: var(--uds-radius-2);
+    cursor: pointer;
+  }
+
+  &__fill {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    background-color: var(--uds-surface-brand-primary);
+    border-radius: var(--uds-radius-2);
+    pointer-events: none;
+  }
+
+  &__input {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 2;
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      width: 0;
+      height: 0;
+    }
+
+    &::-moz-range-thumb {
+      width: 0;
+      height: 0;
+      border: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:focus-visible + .uds-slider__thumb {
+      outline: solid var(--uds-focus-ring-width) var(--uds-focus-ring-border);
+      outline-offset: var(--uds-focus-ring-offset);
+    }
+
+    &--min {
+      z-index: 3;
+    }
+
+    &--max {
+      z-index: 4;
+    }
+  }
+
+  &__thumb {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background-color: var(--uds-surface-primary);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-radius: 50%;
+    cursor: grab;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    z-index: 5;
+    transition:
+      border-color var(--uds-animation-duration-200) var(--uds-animation-ease-standard),
+      box-shadow var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+    &:hover:not(.uds-slider--disabled &) {
+      border-color: var(--uds-border-brand-primary);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &--min {
+      z-index: 6;
+    }
+
+    &--max {
+      z-index: 7;
+    }
+  }
+
+  &__labels {
+    position: relative;
+    width: 100%;
+    margin-top: var(--uds-gap-8);
+    height: 20px;
+  }
+
+  &__label-value {
+    @include uds-body-12-medium;
+    position: absolute;
+    color: var(--uds-text-secondary);
+    transform: translateX(-50%);
+    white-space: nowrap;
+  }
+
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+    cursor: not-allowed;
+
+    .uds-slider__track {
+      cursor: not-allowed;
+    }
+
+    .uds-slider__thumb {
+      cursor: not-allowed;
+    }
+  }
+
+  &--range {
+    .uds-slider__input--min {
+      z-index: 3;
+    }
+
+    .uds-slider__input--max {
+      z-index: 4;
+    }
+  }
+}