@usefragments/ui 1.5.3 → 1.6.0

package/src/components/Progress/Progress.module.scss

@@ -1,33 +1,32 @@
 @use "../../tokens/variables" as *;
-@use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
+@use "../../recipes/typography" as typography;
 
 // Root container
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--fui-space-1, $fui-space-1);
-  width: 100%;
-  font-family: var(--fui-font-sans, $fui-font-sans);
+  gap: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  inline-size: 100%;
 }
 
 // Header with label and value
 .header {
+  @include typography.role("ui-standard");
+
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--fui-space-2, $fui-space-2);
+  gap: var(--fui-raw-space-8, #{measurements.raw-space(8)});
 }
 
 // Label text
 .label {
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-primary, $fui-text-primary);
 }
 
 // Value display
 .value {
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-secondary, $fui-text-secondary);
   font-variant-numeric: tabular-nums;
 }
@@ -35,31 +34,40 @@
 // Track (background bar)
 .track {
   position: relative;
-  width: 100%;
+  inline-size: 100%;
+  block-size: var(--_progress-track-size);
   overflow: hidden;
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
   border-radius: var(--fui-radius-full, $fui-radius-full);
 }
 
-// Size variants for track (using closest 7px grid values)
 .trackSm {
-  height: calc(var(--fui-space-1, $fui-space-1) / 2); // ~3.5px
+  --_progress-track-size: var(
+    --fui-progress-track-sm,
+    var(--fui-raw-space-4, #{measurements.raw-space(4)})
+  );
 }
 
 .trackMd {
-  height: var(--fui-space-1, $fui-space-1); // 7px
+  --_progress-track-size: var(
+    --fui-progress-track-md,
+    var(--fui-raw-space-6, #{measurements.raw-space(6)})
+  );
 }
 
 .trackLg {
-  height: var(--fui-space-2, $fui-space-2); // 14px
+  --_progress-track-size: var(
+    --fui-progress-track-lg,
+    var(--fui-raw-space-8, #{measurements.raw-space(8)})
+  );
 }
 
 // Indicator (filled portion)
 .indicator {
-  height: 100%;
+  block-size: 100%;
   background-color: var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
-  transition: width var(--fui-transition-normal, $fui-transition-normal);
+  transition: inline-size var(--fui-transition-normal, $fui-transition-normal);
 }
 
 // Color variants
@@ -81,7 +89,7 @@
 
 // Indeterminate animation
 .indicatorIndeterminate {
-  width: 50% !important;
+  inline-size: 50%;
   animation: indeterminate 1.5s ease-in-out infinite;
 }
 
@@ -97,20 +105,19 @@
   }
 }
 
-// Complete state
-.root[data-complete] .indicator:not(.indicatorNeutral) {
-  background-color: var(--fui-color-success-text, $fui-color-success-text);
-}
-
 // Circular progress variant
 .circular {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  inline-size: var(--_progress-diameter);
+  block-size: var(--_progress-diameter);
 }
 
 .circularSvg {
+  inline-size: 100%;
+  block-size: 100%;
   transform: rotate(-90deg);
 }
 
@@ -123,6 +130,7 @@
   stroke: var(--fui-color-accent, $fui-color-accent);
   fill: none;
   stroke-linecap: round;
+  transform-origin: center;
   transition: stroke-dashoffset var(--fui-transition-normal, $fui-transition-normal);
 }
 
@@ -144,46 +152,58 @@
 
 @keyframes circularIndeterminate {
   0% {
-    stroke-dashoffset: 280;
+    stroke-dashoffset: var(--_progress-dash-full);
     transform: rotate(0deg);
   }
   50% {
-    stroke-dashoffset: 70;
+    stroke-dashoffset: var(--_progress-dash-quarter);
   }
   100% {
-    stroke-dashoffset: 280;
+    stroke-dashoffset: var(--_progress-dash-full);
     transform: rotate(360deg);
   }
 }
 
 .circularValue {
   position: absolute;
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-primary, $fui-text-primary);
   font-variant-numeric: tabular-nums;
 }
 
-// Size variants for circular (using closest 7px grid values)
-.circularSm {
-  width: var(--fui-space-4, $fui-space-4); // 28px
-  height: var(--fui-space-4, $fui-space-4);
+.circularValueCompact {
+  @include typography.role("ui-compact");
+}
 
-  .circularValue {
-    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  }
+.circularValueStandard {
+  @include typography.role("ui-standard");
 }
 
-.circularMd {
-  width: var(--fui-space-6, $fui-space-6); // 42px
-  height: var(--fui-space-6, $fui-space-6);
+@media (prefers-reduced-motion: reduce) {
+  .indicator,
+  .circularIndicator {
+    transition: none;
+  }
+
+  .indicatorIndeterminate,
+  .circularIndicatorIndeterminate {
+    animation: none;
+  }
 }
 
-.circularLg {
-  width: var(--fui-space-8, $fui-space-8); // 56px
-  height: var(--fui-space-8, $fui-space-8);
+@media (forced-colors: active) {
+  .track {
+    background-color: GrayText;
+  }
+
+  .indicator {
+    background-color: Highlight;
+  }
+
+  .circularTrack {
+    stroke: GrayText;
+  }
 
-  .circularValue {
-    font-size: var(--fui-font-size-base, $fui-font-size-base);
+  .circularIndicator {
+    stroke: Highlight;
   }
 }

package/src/components/Progress/geometry.ts

@@ -0,0 +1,41 @@
+import { MEASUREMENT_PROFILES, measurementPx } from "../../measurements";
+
+export type ProgressSize = "sm" | "md" | "lg";
+
+export interface CircularProgressGeometry {
+  diameter: number;
+  strokeWidth: number;
+}
+
+const defaultStrokeWidths: Readonly<Record<ProgressSize, number>> = {
+  sm: 3,
+  md: 4,
+  lg: 5,
+};
+
+export const CIRCULAR_PROGRESS_GEOMETRY: Readonly<Record<ProgressSize, CircularProgressGeometry>> =
+  Object.freeze({
+    sm: Object.freeze({
+      diameter: measurementPx(MEASUREMENT_PROFILES.rawSpace[32], "rawSpace.32"),
+      strokeWidth: defaultStrokeWidths.sm,
+    }),
+    md: Object.freeze({
+      diameter: measurementPx(MEASUREMENT_PROFILES.rawSpace[48], "rawSpace.48"),
+      strokeWidth: defaultStrokeWidths.md,
+    }),
+    lg: Object.freeze({
+      diameter: measurementPx(MEASUREMENT_PROFILES.rawSpace[64], "rawSpace.64"),
+      strokeWidth: defaultStrokeWidths.lg,
+    }),
+  });
+
+export function resolveCircularStrokeWidth(
+  geometry: CircularProgressGeometry,
+  requested?: number
+): number {
+  if (requested === undefined || !Number.isFinite(requested) || requested <= 0) {
+    return geometry.strokeWidth;
+  }
+
+  return Math.min(requested, geometry.diameter / 2);
+}

package/src/components/Progress/index.tsx

@@ -2,6 +2,11 @@
 
 import * as React from "react";
 import { Progress as BaseProgress } from "@base-ui/react/progress";
+import {
+  CIRCULAR_PROGRESS_GEOMETRY,
+  resolveCircularStrokeWidth,
+  type ProgressSize,
+} from "./geometry";
 import styles from "./Progress.module.scss";
 
 // ============================================
@@ -16,7 +21,7 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /** Maximum value */
   max?: number;
   /** Size of the progress bar */
-  size?: "sm" | "md" | "lg";
+  size?: ProgressSize;
   /** Color variant */
   variant?: "default" | "neutral" | "success" | "warning" | "danger";
   /** Label text */
@@ -31,7 +36,7 @@ export interface CircularProgressProps extends React.HTMLAttributes<HTMLDivEleme
   /** Current progress value (0-100). Null for indeterminate. */
   value?: number | null;
   /** Size of the circular progress */
-  size?: "sm" | "md" | "lg";
+  size?: ProgressSize;
   /** Color variant */
   variant?: "default" | "success" | "warning" | "danger";
   /** Show percentage in center */
@@ -61,7 +66,13 @@ function ProgressRoot({
 }: ProgressProps) {
   const isIndeterminate = value === null;
   const range = max - min;
-  const normalizedPercentage = isIndeterminate ? 0 : range <= 0 ? 0 : ((value - min) / range) * 100;
+  const clampedValue = isIndeterminate
+    ? null
+    : !Number.isFinite(value) || range <= 0
+      ? min
+      : Math.min(max, Math.max(min, value));
+  const normalizedPercentage =
+    clampedValue === null || range <= 0 ? 0 : ((clampedValue - min) / range) * 100;
   const percentage = isIndeterminate
     ? 0
     : Math.round(Math.min(100, Math.max(0, normalizedPercentage)));
@@ -97,7 +108,7 @@ function ProgressRoot({
   return (
     <BaseProgress.Root
       {...htmlProps}
-      value={value}
+      value={clampedValue}
       min={min}
       max={max}
       className={rootClasses}
@@ -115,7 +126,7 @@ function ProgressRoot({
       <BaseProgress.Track className={trackClasses}>
         <BaseProgress.Indicator
           className={indicatorClasses}
-          style={isIndeterminate ? undefined : { width: `${percentage}%` }}
+          style={isIndeterminate ? undefined : { inlineSize: `${percentage}%` }}
         />
       </BaseProgress.Track>
     </BaseProgress.Root>
@@ -126,12 +137,6 @@ function ProgressRoot({
 // Circular Progress
 // ============================================
 
-const CIRCLE_SIZES = {
-  sm: { size: 32, strokeWidth: 3 },
-  md: { size: 48, strokeWidth: 4 },
-  lg: { size: 64, strokeWidth: 5 },
-};
-
 function CircularProgressRoot({
   value = null,
   size = "md",
@@ -139,24 +144,23 @@ function CircularProgressRoot({
   showValue = false,
   strokeWidth: customStrokeWidth,
   className,
+  style: styleProp,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-valuetext": ariaValueText,
   ...htmlProps
 }: CircularProgressProps) {
   const isIndeterminate = value === null;
-  const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, value));
+  const percentage =
+    isIndeterminate || !Number.isFinite(value) ? 0 : Math.min(100, Math.max(0, value));
 
-  const { size: svgSize, strokeWidth: defaultStrokeWidth } = CIRCLE_SIZES[size];
-  const strokeWidth = customStrokeWidth ?? defaultStrokeWidth;
+  const geometry = CIRCULAR_PROGRESS_GEOMETRY[size];
+  const strokeWidth = resolveCircularStrokeWidth(geometry, customStrokeWidth);
 
-  const radius = (svgSize - strokeWidth) / 2;
+  const radius = (geometry.diameter - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const offset = circumference - (percentage / 100) * circumference;
 
-  const sizeClass =
-    size === "sm" ? styles.circularSm : size === "lg" ? styles.circularLg : styles.circularMd;
-
   const indicatorClasses = [
     styles.circularIndicator,
     variant === "success" && styles.circularIndicatorSuccess,
@@ -167,20 +171,27 @@ function CircularProgressRoot({
     .filter(Boolean)
     .join(" ");
 
-  const rootClasses = [styles.circular, sizeClass, className].filter(Boolean).join(" ");
+  const rootClasses = [styles.circular, className].filter(Boolean).join(" ");
 
   // Default value text for screen readers
   const effectiveValueText =
     ariaValueText || (isIndeterminate ? "Loading" : `${Math.round(percentage)} percent`);
+  const circularStyle = {
+    "--_progress-diameter": `${geometry.diameter}px`,
+    "--_progress-dash-full": circumference,
+    "--_progress-dash-quarter": circumference / 4,
+    ...styleProp,
+  } as React.CSSProperties;
 
   return (
     <BaseProgress.Root
       {...htmlProps}
-      value={value}
+      value={isIndeterminate ? null : percentage}
       min={0}
       max={100}
       className={rootClasses}
-      aria-label={ariaLabel}
+      style={circularStyle}
+      aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : "Progress")}
       aria-labelledby={ariaLabelledBy}
       aria-valuenow={isIndeterminate ? undefined : percentage}
       aria-valuemin={0}
@@ -190,33 +201,36 @@ function CircularProgressRoot({
     >
       <svg
         className={styles.circularSvg}
-        width={svgSize}
-        height={svgSize}
-        viewBox={`0 0 ${svgSize} ${svgSize}`}
+        viewBox={`0 0 ${geometry.diameter} ${geometry.diameter}`}
         aria-hidden="true"
       >
         {/* Track circle */}
         <circle
           className={styles.circularTrack}
-          cx={svgSize / 2}
-          cy={svgSize / 2}
+          cx={geometry.diameter / 2}
+          cy={geometry.diameter / 2}
           r={radius}
           strokeWidth={strokeWidth}
         />
         {/* Indicator circle */}
         <circle
           className={indicatorClasses}
-          cx={svgSize / 2}
-          cy={svgSize / 2}
+          cx={geometry.diameter / 2}
+          cy={geometry.diameter / 2}
           r={radius}
           strokeWidth={strokeWidth}
           strokeDasharray={circumference}
           strokeDashoffset={isIndeterminate ? undefined : offset}
-          style={isIndeterminate ? { transformOrigin: "center" } : undefined}
         />
       </svg>
       {showValue && !isIndeterminate && (
-        <span className={styles.circularValue} aria-hidden="true">
+        <span
+          className={[
+            styles.circularValue,
+            size === "sm" ? styles.circularValueCompact : styles.circularValueStandard,
+          ].join(" ")}
+          aria-hidden="true"
+        >
           {Math.round(percentage)}%
         </span>
       )}