@mich8060/unified-design-system 0.1.10

package/src/ui/ProgressCircle/ProgressCircle.stories.jsx

@@ -0,0 +1,14 @@
+import ProgressCircle from "./ProgressCircle";
+
+export default {
+  title: "Components/ProgressCircle",
+  component: ProgressCircle,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/ProgressCircle/ProgressCircle.stories.tsx

@@ -0,0 +1,14 @@
+import ProgressCircle from "./ProgressCircle.jsx";
+
+export default {
+  title: "Components/ProgressCircle",
+  component: ProgressCircle,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/ProgressCircle/ProgressCircle.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/ProgressCircle/ProgressCircle.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyProgressCircle from "./ProgressCircle.jsx";
+
+const ProgressCircle = LegacyProgressCircle as ComponentType<any>;
+
+export default ProgressCircle;

package/src/ui/ProgressCircle/ProgressCircle.types.ts

@@ -0,0 +1,3 @@
+export interface ProgressCircleProps {
+  className?: string;
+}

package/src/ui/ProgressCircle/index.js

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

package/src/ui/ProgressIndicator/ProgressIndicator.ai.md

@@ -0,0 +1,27 @@
+# ProgressIndicator
+
+Linear progress bar for showing completion or loading state.
+
+## When to Use
+- File upload progress, form completion
+- Loading indicators
+- Any linear progress visualization
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `number` | `0` | Progress percentage (0–100) |
+| `variant` | `string` | `"determinate"` | `"determinate"` or `"indeterminate"` |
+| `color` | `string` | `"blue"` | Bar color |
+| `size` | `string` | `"default"` | `"small"`, `"default"`, `"large"` |
+| `showLabel` | `boolean` | `false` | Show percentage text |
+| `className` | `string` | `""` | Additional CSS classes |
+
+## Examples
+
+```jsx
+<ProgressIndicator value={60} showLabel />
+<ProgressIndicator variant="indeterminate" /> {/* Animated loading bar */}
+<ProgressIndicator value={100} color="green" />
+```

package/src/ui/ProgressIndicator/ProgressIndicator.jsx

@@ -0,0 +1,92 @@
+import React from "react";
+import "./ProgressIndicator.scss";
+
+const BASE_CLASS = "uds-progress-indicator";
+
+const variantClassMap = {
+  default: "default",
+  blue: "blue",
+  green: "green",
+  success: "green",
+  orange: "orange",
+  warning: "orange",
+  red: "red",
+  error: "red",
+  purple: "purple",
+};
+
+const sizeClassMap = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+};
+
+/**
+ * ProgressIndicator component for displaying progress bars
+ * @param {number} value - Progress value (0-100)
+ * @param {number} max - Maximum value (default: 100)
+ * @param {string} variant - Color variant: 'default', 'blue', 'green', 'success', 'orange', 'warning', 'red', 'error', 'purple'
+ * @param {string} size - Size variant: 'small', 'medium', or 'large'
+ * @param {string} label - Optional label text to display above the progress bar
+ * @param {boolean} showValue - Whether to show the percentage value
+ * @param {boolean} showLabel - Whether to show the label (if provided)
+ * @param {string} className - Additional CSS classes
+ * @param {string} 'aria-label' - Accessible label for screen readers
+ * @param {object} props - Additional props to pass to the progress element
+ */
+export default function ProgressIndicator({
+  value = 0,
+  max = 100,
+  variant = "default",
+  size = "medium",
+  label,
+  showValue = false,
+  showLabel = true,
+  className = "",
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+  const displayValue = Math.round(percentage);
+
+  const classNames = [
+    BASE_CLASS,
+    variantClassMap[variant] && `${BASE_CLASS}--${variantClassMap[variant]}`,
+    sizeClassMap[size] && `${BASE_CLASS}--${sizeClassMap[size]}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const progressId = `progress-${Math.random().toString(36).substr(2, 9)}`;
+  const labelId = label ? `${progressId}-label` : undefined;
+
+  return (
+    <div className={classNames} {...props}>
+      {(label && showLabel) || showValue ? (
+        <div className={`${BASE_CLASS}__header`}>
+          {label && showLabel && (
+            <span id={labelId} className={`${BASE_CLASS}__label`}>
+              {label}
+            </span>
+          )}
+          {showValue && (
+            <span className={`${BASE_CLASS}__value`}>{displayValue}%</span>
+          )}
+        </div>
+      ) : null}
+      <div className={`${BASE_CLASS}__track`}>
+        <div
+          className={`${BASE_CLASS}__fill`}
+          role="progressbar"
+          aria-valuenow={value}
+          aria-valuemin={0}
+          aria-valuemax={max}
+          aria-label={ariaLabel || label || `Progress: ${displayValue}%`}
+          aria-labelledby={labelId}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}

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/ProgressIndicator.spec.ts

@@ -0,0 +1,12 @@
+export const PROGRESS_INDICATOR_DEFAULTS = {
+  className: "",
+} as const;
+
+export const PROGRESS_INDICATOR_STORY_SPEC = {
+  defaults: {
+    className: PROGRESS_INDICATOR_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/ProgressIndicator/ProgressIndicator.stories.jsx

@@ -0,0 +1,14 @@
+import ProgressIndicator from "./ProgressIndicator";
+
+export default {
+  title: "Components/ProgressIndicator",
+  component: ProgressIndicator,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/ProgressIndicator/ProgressIndicator.stories.tsx

@@ -0,0 +1,14 @@
+import ProgressIndicator from "./ProgressIndicator.jsx";
+
+export default {
+  title: "Components/ProgressIndicator",
+  component: ProgressIndicator,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/ProgressIndicator/ProgressIndicator.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/ProgressIndicator/ProgressIndicator.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyProgressIndicator from "./ProgressIndicator.jsx";
+
+const ProgressIndicator = LegacyProgressIndicator as ComponentType<any>;
+
+export default ProgressIndicator;

package/src/ui/ProgressIndicator/ProgressIndicator.types.ts

@@ -0,0 +1,3 @@
+export interface ProgressIndicatorProps {
+  className?: string;
+}

package/src/ui/ProgressIndicator/index.js

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

package/src/ui/Radio/Radio.ai.md

@@ -0,0 +1,53 @@
+# Radio
+
+Radio button group for single-value selection from a set of options.
+
+## When to Use
+- Choosing one option from a small set (2–6 options)
+- Form fields where only one selection is valid
+- Settings/preferences with mutually exclusive options
+
+## Props
+
+### RadioGroup (container)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | — | Group name (shared across radios) |
+| `value` | `string` | — | Currently selected value |
+| `onChange` | `function` | — | Callback `(value: string) => void` |
+| `children` | `ReactNode` | — | `RadioOption` components |
+| `className` | `string` | `""` | Additional CSS classes |
+| `layout` | `string` | `"vertical"` | `"vertical"` or `"horizontal"` |
+
+### RadioOption
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | — | Option value |
+| `label` | `string` | — | Label text |
+| `disabled` | `boolean` | `false` | Disabled state |
+
+## Examples
+
+```jsx
+<RadioGroup name="plan" value={plan} onChange={setPlan}>
+  <RadioOption value="free" label="Free Plan" />
+  <RadioOption value="pro" label="Pro Plan" />
+  <RadioOption value="enterprise" label="Enterprise Plan" />
+</RadioGroup>
+```
+
+### Horizontal layout
+```jsx
+<RadioGroup name="size" value={size} onChange={setSize} layout="horizontal">
+  <RadioOption value="sm" label="Small" />
+  <RadioOption value="md" label="Medium" />
+  <RadioOption value="lg" label="Large" />
+</RadioGroup>
+```
+
+## Import
+```jsx
+import { RadioGroup, RadioOption } from "@mich8060/chg-design-system";
+```

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,89 @@
+@use "../../styles/typography" as *;
+
+.radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--uds-gap-8);
+  cursor: pointer;
+  user-select: none;
+
+  // ── Modifier: disabled ──────────────────────────────
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    .radio__label {
+      cursor: not-allowed;
+      color: var(--uds-text-secondary);
+    }
+  }
+
+  // ── Element: hidden input ───────────────────────────
+  &__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);
+    }
+
+    &:checked + .radio__circle {
+      border-color: var(--uds-border-brand-primary);
+    }
+
+    &:not(:checked):not(:disabled) + .radio__circle:hover {
+      border-color: var(--uds-border-brand-primary);
+    }
+
+    &:disabled + .radio__circle {
+      background-color: var(--uds-surface-tertiary);
+      border-color: var(--uds-border-primary);
+      cursor: not-allowed;
+    }
+
+    &:disabled + .radio__circle + .radio__label {
+      color: var(--uds-text-secondary);
+    }
+  }
+
+  // ── Element: visual circle ──────────────────────────
+  &__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;
+  }
+
+  // ── Element: inner dot ──────────────────────────────
+  &__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--uds-surface-brand-primary);
+    display: block;
+  }
+
+  // ── Element: label ──────────────────────────────────
+  &__label {
+    @include uds-body-14-medium;
+    color: var(--uds-text-primary);
+    line-height: 20px;
+    cursor: pointer;
+  }
+}

package/src/ui/Radio/Radio.spec.ts

@@ -0,0 +1,12 @@
+export const RADIO_DEFAULTS = {
+  className: "",
+} as const;
+
+export const RADIO_STORY_SPEC = {
+  defaults: {
+    className: RADIO_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/Radio/Radio.stories.jsx

@@ -0,0 +1,14 @@
+import Radio from "./Radio";
+
+export default {
+  title: "Components/Radio",
+  component: Radio,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Radio/Radio.stories.tsx

@@ -0,0 +1,14 @@
+import Radio from "./Radio.jsx";
+
+export default {
+  title: "Components/Radio",
+  component: Radio,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Radio/Radio.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Radio/Radio.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyRadio from "./Radio.jsx";
+
+const Radio = LegacyRadio as ComponentType<any>;
+
+export default Radio;

package/src/ui/Radio/Radio.types.ts

@@ -0,0 +1,3 @@
+export interface RadioProps {
+  className?: string;
+}

package/src/ui/Radio/index.js

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

package/src/ui/Slider/Slider.ai.md

@@ -0,0 +1,33 @@
+# Slider
+
+Range slider input for numeric value selection within a min/max range.
+
+## When to Use
+- Volume, brightness, or zoom controls
+- Price range filters
+- Any numeric value selection within a bounded range
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `min` | `number` | `0` | Minimum value |
+| `max` | `number` | `100` | Maximum value |
+| `value` | `number` | `0` | Current value (controlled) |
+| `step` | `number` | `1` | Step increment |
+| `onChange` | `function` | — | Callback `(value: number) => void` |
+| `label` | `string` | — | Label text |
+| `showValue` | `boolean` | `false` | Display current value |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `className` | `string` | `""` | Additional CSS classes |
+
+## Examples
+
+```jsx
+<Slider min={0} max={100} value={volume} onChange={setVolume} label="Volume" showValue />
+```
+
+### Price filter
+```jsx
+<Slider min={0} max={1000} step={50} value={maxPrice} onChange={setMaxPrice} label="Max Price" showValue />
+```