@usefragments/ui 1.5.3 → 1.6.0

package/dist/components/Progress/Progress.module.scss.cjs

@@ -1,31 +1,30 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_le29r_1";
-const header = "_header_le29r_9";
-const label = "_label_le29r_16";
-const value = "_value_le29r_22";
-const track = "_track_le29r_28";
-const trackSm = "_trackSm_le29r_36";
-const trackMd = "_trackMd_le29r_40";
-const trackLg = "_trackLg_le29r_44";
-const indicator = "_indicator_le29r_48";
-const indicatorNeutral = "_indicatorNeutral_le29r_55";
-const indicatorSuccess = "_indicatorSuccess_le29r_59";
-const indicatorWarning = "_indicatorWarning_le29r_63";
-const indicatorDanger = "_indicatorDanger_le29r_67";
-const indicatorIndeterminate = "_indicatorIndeterminate_le29r_71";
-const circular = "_circular_le29r_91";
-const circularSvg = "_circularSvg_le29r_98";
-const circularTrack = "_circularTrack_le29r_102";
-const circularIndicator = "_circularIndicator_le29r_107";
-const circularIndicatorSuccess = "_circularIndicatorSuccess_le29r_114";
-const circularIndicatorWarning = "_circularIndicatorWarning_le29r_118";
-const circularIndicatorDanger = "_circularIndicatorDanger_le29r_122";
-const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_le29r_126";
-const circularValue = "_circularValue_le29r_143";
-const circularSm = "_circularSm_le29r_151";
-const circularMd = "_circularMd_le29r_159";
-const circularLg = "_circularLg_le29r_164";
+const root = "_root_1xomg_1";
+const header = "_header_1xomg_8";
+const label = "_label_1xomg_20";
+const value = "_value_1xomg_24";
+const track = "_track_1xomg_29";
+const trackSm = "_trackSm_1xomg_38";
+const trackMd = "_trackMd_1xomg_45";
+const trackLg = "_trackLg_1xomg_52";
+const indicator = "_indicator_1xomg_59";
+const indicatorNeutral = "_indicatorNeutral_1xomg_66";
+const indicatorSuccess = "_indicatorSuccess_1xomg_70";
+const indicatorWarning = "_indicatorWarning_1xomg_74";
+const indicatorDanger = "_indicatorDanger_1xomg_78";
+const indicatorIndeterminate = "_indicatorIndeterminate_1xomg_82";
+const circular = "_circular_1xomg_98";
+const circularSvg = "_circularSvg_1xomg_107";
+const circularTrack = "_circularTrack_1xomg_113";
+const circularIndicator = "_circularIndicator_1xomg_118";
+const circularIndicatorSuccess = "_circularIndicatorSuccess_1xomg_126";
+const circularIndicatorWarning = "_circularIndicatorWarning_1xomg_130";
+const circularIndicatorDanger = "_circularIndicatorDanger_1xomg_134";
+const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_1xomg_138";
+const circularValue = "_circularValue_1xomg_155";
+const circularValueCompact = "_circularValueCompact_1xomg_161";
+const circularValueStandard = "_circularValueStandard_1xomg_169";
 const styles = {
   root,
   header,
@@ -50,9 +49,8 @@ const styles = {
   circularIndicatorDanger,
   circularIndicatorIndeterminate,
   circularValue,
-  circularSm,
-  circularMd,
-  circularLg
+  circularValueCompact,
+  circularValueStandard
 };
 exports.circular = circular;
 exports.circularIndicator = circularIndicator;
@@ -60,12 +58,11 @@ exports.circularIndicatorDanger = circularIndicatorDanger;
 exports.circularIndicatorIndeterminate = circularIndicatorIndeterminate;
 exports.circularIndicatorSuccess = circularIndicatorSuccess;
 exports.circularIndicatorWarning = circularIndicatorWarning;
-exports.circularLg = circularLg;
-exports.circularMd = circularMd;
-exports.circularSm = circularSm;
 exports.circularSvg = circularSvg;
 exports.circularTrack = circularTrack;
 exports.circularValue = circularValue;
+exports.circularValueCompact = circularValueCompact;
+exports.circularValueStandard = circularValueStandard;
 exports.default = styles;
 exports.header = header;
 exports.indicator = indicator;

package/dist/components/Progress/Progress.module.scss.js

@@ -1,29 +1,28 @@
-const root = "_root_le29r_1";
-const header = "_header_le29r_9";
-const label = "_label_le29r_16";
-const value = "_value_le29r_22";
-const track = "_track_le29r_28";
-const trackSm = "_trackSm_le29r_36";
-const trackMd = "_trackMd_le29r_40";
-const trackLg = "_trackLg_le29r_44";
-const indicator = "_indicator_le29r_48";
-const indicatorNeutral = "_indicatorNeutral_le29r_55";
-const indicatorSuccess = "_indicatorSuccess_le29r_59";
-const indicatorWarning = "_indicatorWarning_le29r_63";
-const indicatorDanger = "_indicatorDanger_le29r_67";
-const indicatorIndeterminate = "_indicatorIndeterminate_le29r_71";
-const circular = "_circular_le29r_91";
-const circularSvg = "_circularSvg_le29r_98";
-const circularTrack = "_circularTrack_le29r_102";
-const circularIndicator = "_circularIndicator_le29r_107";
-const circularIndicatorSuccess = "_circularIndicatorSuccess_le29r_114";
-const circularIndicatorWarning = "_circularIndicatorWarning_le29r_118";
-const circularIndicatorDanger = "_circularIndicatorDanger_le29r_122";
-const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_le29r_126";
-const circularValue = "_circularValue_le29r_143";
-const circularSm = "_circularSm_le29r_151";
-const circularMd = "_circularMd_le29r_159";
-const circularLg = "_circularLg_le29r_164";
+const root = "_root_1xomg_1";
+const header = "_header_1xomg_8";
+const label = "_label_1xomg_20";
+const value = "_value_1xomg_24";
+const track = "_track_1xomg_29";
+const trackSm = "_trackSm_1xomg_38";
+const trackMd = "_trackMd_1xomg_45";
+const trackLg = "_trackLg_1xomg_52";
+const indicator = "_indicator_1xomg_59";
+const indicatorNeutral = "_indicatorNeutral_1xomg_66";
+const indicatorSuccess = "_indicatorSuccess_1xomg_70";
+const indicatorWarning = "_indicatorWarning_1xomg_74";
+const indicatorDanger = "_indicatorDanger_1xomg_78";
+const indicatorIndeterminate = "_indicatorIndeterminate_1xomg_82";
+const circular = "_circular_1xomg_98";
+const circularSvg = "_circularSvg_1xomg_107";
+const circularTrack = "_circularTrack_1xomg_113";
+const circularIndicator = "_circularIndicator_1xomg_118";
+const circularIndicatorSuccess = "_circularIndicatorSuccess_1xomg_126";
+const circularIndicatorWarning = "_circularIndicatorWarning_1xomg_130";
+const circularIndicatorDanger = "_circularIndicatorDanger_1xomg_134";
+const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_1xomg_138";
+const circularValue = "_circularValue_1xomg_155";
+const circularValueCompact = "_circularValueCompact_1xomg_161";
+const circularValueStandard = "_circularValueStandard_1xomg_169";
 const styles = {
   root,
   header,
@@ -48,9 +47,8 @@ const styles = {
   circularIndicatorDanger,
   circularIndicatorIndeterminate,
   circularValue,
-  circularSm,
-  circularMd,
-  circularLg
+  circularValueCompact,
+  circularValueStandard
 };
 export {
   circular,
@@ -59,12 +57,11 @@ export {
   circularIndicatorIndeterminate,
   circularIndicatorSuccess,
   circularIndicatorWarning,
-  circularLg,
-  circularMd,
-  circularSm,
   circularSvg,
   circularTrack,
   circularValue,
+  circularValueCompact,
+  circularValueStandard,
   styles as default,
   header,
   indicator,

package/dist/components/Progress/geometry.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generated = require("../../measurements/generated.cjs");
+const defaultStrokeWidths = {
+  sm: 3,
+  md: 4,
+  lg: 5
+};
+const CIRCULAR_PROGRESS_GEOMETRY = Object.freeze({
+  sm: Object.freeze({
+    diameter: generated.measurementPx(generated.MEASUREMENT_PROFILES.rawSpace[32], "rawSpace.32"),
+    strokeWidth: defaultStrokeWidths.sm
+  }),
+  md: Object.freeze({
+    diameter: generated.measurementPx(generated.MEASUREMENT_PROFILES.rawSpace[48], "rawSpace.48"),
+    strokeWidth: defaultStrokeWidths.md
+  }),
+  lg: Object.freeze({
+    diameter: generated.measurementPx(generated.MEASUREMENT_PROFILES.rawSpace[64], "rawSpace.64"),
+    strokeWidth: defaultStrokeWidths.lg
+  })
+});
+function resolveCircularStrokeWidth(geometry, requested) {
+  if (requested === void 0 || !Number.isFinite(requested) || requested <= 0) {
+    return geometry.strokeWidth;
+  }
+  return Math.min(requested, geometry.diameter / 2);
+}
+exports.CIRCULAR_PROGRESS_GEOMETRY = CIRCULAR_PROGRESS_GEOMETRY;
+exports.resolveCircularStrokeWidth = resolveCircularStrokeWidth;

package/dist/components/Progress/geometry.d.ts

@@ -0,0 +1,8 @@
+export type ProgressSize = "sm" | "md" | "lg";
+export interface CircularProgressGeometry {
+    diameter: number;
+    strokeWidth: number;
+}
+export declare const CIRCULAR_PROGRESS_GEOMETRY: Readonly<Record<ProgressSize, CircularProgressGeometry>>;
+export declare function resolveCircularStrokeWidth(geometry: CircularProgressGeometry, requested?: number): number;
+//# sourceMappingURL=geometry.d.ts.map

package/dist/components/Progress/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/geometry.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAQD,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,wBAAwB,CAAC,CAc5F,CAAC;AAEL,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,wBAAwB,EAClC,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CAMR"}

package/dist/components/Progress/geometry.js

@@ -0,0 +1,30 @@
+import { measurementPx, MEASUREMENT_PROFILES } from "../../measurements/generated.js";
+const defaultStrokeWidths = {
+  sm: 3,
+  md: 4,
+  lg: 5
+};
+const CIRCULAR_PROGRESS_GEOMETRY = 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
+  })
+});
+function resolveCircularStrokeWidth(geometry, requested) {
+  if (requested === void 0 || !Number.isFinite(requested) || requested <= 0) {
+    return geometry.strokeWidth;
+  }
+  return Math.min(requested, geometry.diameter / 2);
+}
+export {
+  CIRCULAR_PROGRESS_GEOMETRY,
+  resolveCircularStrokeWidth
+};

package/dist/components/Progress/index.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const progress = require("@base-ui/react/progress");
+const geometry = require("./geometry.cjs");
 const Progress_module = require("./Progress.module.scss.cjs");
 function ProgressRoot({
   value = null,
@@ -21,7 +22,8 @@ function ProgressRoot({
 }) {
   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)));
   const trackClasses = [
     Progress_module.default.track,
@@ -44,7 +46,7 @@ function ProgressRoot({
     progress.Progress.Root,
     {
       ...htmlProps,
-      value,
+      value: clampedValue,
       min,
       max,
       className: rootClasses,
@@ -61,18 +63,13 @@ function ProgressRoot({
           progress.Progress.Indicator,
           {
             className: indicatorClasses,
-            style: isIndeterminate ? void 0 : { width: `${percentage}%` }
+            style: isIndeterminate ? void 0 : { inlineSize: `${percentage}%` }
           }
         ) })
       ]
     }
   );
 }
-const CIRCLE_SIZES = {
-  sm: { size: 32, strokeWidth: 3 },
-  md: { size: 48, strokeWidth: 4 },
-  lg: { size: 64, strokeWidth: 5 }
-};
 function CircularProgressRoot({
   value = null,
   size = "md",
@@ -80,19 +77,19 @@ function CircularProgressRoot({
   showValue = false,
   strokeWidth: customStrokeWidth,
   className,
+  style: styleProp,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-valuetext": ariaValueText,
   ...htmlProps
 }) {
   const isIndeterminate = value === null;
-  const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, value));
-  const { size: svgSize, strokeWidth: defaultStrokeWidth } = CIRCLE_SIZES[size];
-  const strokeWidth = customStrokeWidth ?? defaultStrokeWidth;
-  const radius = (svgSize - strokeWidth) / 2;
+  const percentage = isIndeterminate || !Number.isFinite(value) ? 0 : Math.min(100, Math.max(0, value));
+  const geometry$1 = geometry.CIRCULAR_PROGRESS_GEOMETRY[size];
+  const strokeWidth = geometry.resolveCircularStrokeWidth(geometry$1, customStrokeWidth);
+  const radius = (geometry$1.diameter - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const offset = circumference - percentage / 100 * circumference;
-  const sizeClass = size === "sm" ? Progress_module.default.circularSm : size === "lg" ? Progress_module.default.circularLg : Progress_module.default.circularMd;
   const indicatorClasses = [
     Progress_module.default.circularIndicator,
     variant === "success" && Progress_module.default.circularIndicatorSuccess,
@@ -100,17 +97,24 @@ function CircularProgressRoot({
     variant === "danger" && Progress_module.default.circularIndicatorDanger,
     isIndeterminate && Progress_module.default.circularIndicatorIndeterminate
   ].filter(Boolean).join(" ");
-  const rootClasses = [Progress_module.default.circular, sizeClass, className].filter(Boolean).join(" ");
+  const rootClasses = [Progress_module.default.circular, className].filter(Boolean).join(" ");
   const effectiveValueText = ariaValueText || (isIndeterminate ? "Loading" : `${Math.round(percentage)} percent`);
+  const circularStyle = {
+    "--_progress-diameter": `${geometry$1.diameter}px`,
+    "--_progress-dash-full": circumference,
+    "--_progress-dash-quarter": circumference / 4,
+    ...styleProp
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     progress.Progress.Root,
     {
       ...htmlProps,
-      value,
+      value: isIndeterminate ? null : percentage,
       min: 0,
       max: 100,
       className: rootClasses,
-      "aria-label": ariaLabel,
+      style: circularStyle,
+      "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Progress"),
       "aria-labelledby": ariaLabelledBy,
       "aria-valuenow": isIndeterminate ? void 0 : percentage,
       "aria-valuemin": 0,
@@ -122,17 +126,15 @@ function CircularProgressRoot({
           "svg",
           {
             className: Progress_module.default.circularSvg,
-            width: svgSize,
-            height: svgSize,
-            viewBox: `0 0 ${svgSize} ${svgSize}`,
+            viewBox: `0 0 ${geometry$1.diameter} ${geometry$1.diameter}`,
             "aria-hidden": "true",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "circle",
                 {
                   className: Progress_module.default.circularTrack,
-                  cx: svgSize / 2,
-                  cy: svgSize / 2,
+                  cx: geometry$1.diameter / 2,
+                  cy: geometry$1.diameter / 2,
                   r: radius,
                   strokeWidth
                 }
@@ -141,22 +143,31 @@ function CircularProgressRoot({
                 "circle",
                 {
                   className: indicatorClasses,
-                  cx: svgSize / 2,
-                  cy: svgSize / 2,
+                  cx: geometry$1.diameter / 2,
+                  cy: geometry$1.diameter / 2,
                   r: radius,
                   strokeWidth,
                   strokeDasharray: circumference,
-                  strokeDashoffset: isIndeterminate ? void 0 : offset,
-                  style: isIndeterminate ? { transformOrigin: "center" } : void 0
+                  strokeDashoffset: isIndeterminate ? void 0 : offset
                 }
               )
             ]
           }
         ),
-        showValue && !isIndeterminate && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Progress_module.default.circularValue, "aria-hidden": "true", children: [
-          Math.round(percentage),
-          "%"
-        ] })
+        showValue && !isIndeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: [
+              Progress_module.default.circularValue,
+              size === "sm" ? Progress_module.default.circularValueCompact : Progress_module.default.circularValueStandard
+            ].join(" "),
+            "aria-hidden": "true",
+            children: [
+              Math.round(percentage),
+              "%"
+            ]
+          }
+        )
       ]
     }
   );

package/dist/components/Progress/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type ProgressSize } from "./geometry";
 export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {
     /** Current progress value (0-100). Null for indeterminate. */
     value?: number | null;
@@ -7,7 +8,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 */
@@ -21,7 +22,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 */
@@ -30,7 +31,7 @@ export interface CircularProgressProps extends React.HTMLAttributes<HTMLDivEleme
     strokeWidth?: number;
 }
 declare function ProgressRoot({ value, min, max, size, variant, label, showValue, formatValue, className, role, "aria-label": ariaLabel, "aria-valuetext": ariaValueText, ...htmlProps }: ProgressProps): import("react/jsx-runtime").JSX.Element;
-declare function CircularProgressRoot({ value, size, variant, showValue, strokeWidth: customStrokeWidth, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValueText, ...htmlProps }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;
+declare function CircularProgressRoot({ value, size, variant, showValue, strokeWidth: customStrokeWidth, className, style: styleProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValueText, ...htmlProps }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;
 export declare const CircularProgress: typeof CircularProgressRoot;
 export declare const Progress: typeof ProgressRoot & {
     Root: typeof ProgressRoot;

package/dist/components/Progress/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC/F,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACnE,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oCAAoC;IACpC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,iBAAS,YAAY,CAAC,EACpB,KAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAW,EACX,OAAmB,EACnB,KAAK,EACL,SAAiB,EACjB,WAAW,EACX,SAAS,EACT,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,aAAa,2CA8Df;AAYD,iBAAS,oBAAoB,CAAC,EAC5B,KAAY,EACZ,IAAW,EACX,OAAmB,EACnB,SAAiB,EACjB,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,qBAAqB,2CA+EvB;AAED,eAAO,MAAM,gBAAgB,6BAAuB,CAAC;AAErD,eAAO,MAAM,QAAQ;;;CAGnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,YAAY,CAAC;AAOpB,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC/F,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACnE,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oCAAoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,iBAAS,YAAY,CAAC,EACpB,KAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAW,EACX,OAAmB,EACnB,KAAK,EACL,SAAiB,EACjB,WAAW,EACX,SAAS,EACT,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,aAAa,2CAoEf;AAMD,iBAAS,oBAAoB,CAAC,EAC5B,KAAY,EACZ,IAAW,EACX,OAAmB,EACnB,SAAiB,EACjB,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,qBAAqB,2CAuFvB;AAED,eAAO,MAAM,gBAAgB,6BAAuB,CAAC;AAErD,eAAO,MAAM,QAAQ;;;CAGnB,CAAC"}

package/dist/components/Progress/index.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Progress as Progress$1 } from "@base-ui/react/progress";
+import { CIRCULAR_PROGRESS_GEOMETRY, resolveCircularStrokeWidth } from "./geometry.js";
 import styles from "./Progress.module.scss.js";
 function ProgressRoot({
   value = null,
@@ -19,7 +20,8 @@ function ProgressRoot({
 }) {
   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)));
   const trackClasses = [
     styles.track,
@@ -42,7 +44,7 @@ function ProgressRoot({
     Progress$1.Root,
     {
       ...htmlProps,
-      value,
+      value: clampedValue,
       min,
       max,
       className: rootClasses,
@@ -59,18 +61,13 @@ function ProgressRoot({
           Progress$1.Indicator,
           {
             className: indicatorClasses,
-            style: isIndeterminate ? void 0 : { width: `${percentage}%` }
+            style: isIndeterminate ? void 0 : { inlineSize: `${percentage}%` }
           }
         ) })
       ]
     }
   );
 }
-const CIRCLE_SIZES = {
-  sm: { size: 32, strokeWidth: 3 },
-  md: { size: 48, strokeWidth: 4 },
-  lg: { size: 64, strokeWidth: 5 }
-};
 function CircularProgressRoot({
   value = null,
   size = "md",
@@ -78,19 +75,19 @@ function CircularProgressRoot({
   showValue = false,
   strokeWidth: customStrokeWidth,
   className,
+  style: styleProp,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-valuetext": ariaValueText,
   ...htmlProps
 }) {
   const isIndeterminate = value === null;
-  const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, value));
-  const { size: svgSize, strokeWidth: defaultStrokeWidth } = CIRCLE_SIZES[size];
-  const strokeWidth = customStrokeWidth ?? defaultStrokeWidth;
-  const radius = (svgSize - strokeWidth) / 2;
+  const percentage = isIndeterminate || !Number.isFinite(value) ? 0 : Math.min(100, Math.max(0, value));
+  const geometry = CIRCULAR_PROGRESS_GEOMETRY[size];
+  const strokeWidth = resolveCircularStrokeWidth(geometry, customStrokeWidth);
+  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,
@@ -98,17 +95,24 @@ function CircularProgressRoot({
     variant === "danger" && styles.circularIndicatorDanger,
     isIndeterminate && styles.circularIndicatorIndeterminate
   ].filter(Boolean).join(" ");
-  const rootClasses = [styles.circular, sizeClass, className].filter(Boolean).join(" ");
+  const rootClasses = [styles.circular, className].filter(Boolean).join(" ");
   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
+  };
   return /* @__PURE__ */ jsxs(
     Progress$1.Root,
     {
       ...htmlProps,
-      value,
+      value: isIndeterminate ? null : percentage,
       min: 0,
       max: 100,
       className: rootClasses,
-      "aria-label": ariaLabel,
+      style: circularStyle,
+      "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Progress"),
       "aria-labelledby": ariaLabelledBy,
       "aria-valuenow": isIndeterminate ? void 0 : percentage,
       "aria-valuemin": 0,
@@ -120,17 +124,15 @@ 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",
             children: [
               /* @__PURE__ */ jsx(
                 "circle",
                 {
                   className: styles.circularTrack,
-                  cx: svgSize / 2,
-                  cy: svgSize / 2,
+                  cx: geometry.diameter / 2,
+                  cy: geometry.diameter / 2,
                   r: radius,
                   strokeWidth
                 }
@@ -139,22 +141,31 @@ function CircularProgressRoot({
                 "circle",
                 {
                   className: indicatorClasses,
-                  cx: svgSize / 2,
-                  cy: svgSize / 2,
+                  cx: geometry.diameter / 2,
+                  cy: geometry.diameter / 2,
                   r: radius,
                   strokeWidth,
                   strokeDasharray: circumference,
-                  strokeDashoffset: isIndeterminate ? void 0 : offset,
-                  style: isIndeterminate ? { transformOrigin: "center" } : void 0
+                  strokeDashoffset: isIndeterminate ? void 0 : offset
                 }
               )
             ]
           }
         ),
-        showValue && !isIndeterminate && /* @__PURE__ */ jsxs("span", { className: styles.circularValue, "aria-hidden": "true", children: [
-          Math.round(percentage),
-          "%"
-        ] })
+        showValue && !isIndeterminate && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: [
+              styles.circularValue,
+              size === "sm" ? styles.circularValueCompact : styles.circularValueStandard
+            ].join(" "),
+            "aria-hidden": "true",
+            children: [
+              Math.round(percentage),
+              "%"
+            ]
+          }
+        )
       ]
     }
   );