@usefragments/ui 1.5.4 → 1.7.0

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_cypmg_1";
+const header = "_header_cypmg_8";
+const label = "_label_cypmg_20";
+const value = "_value_cypmg_24";
+const track = "_track_cypmg_29";
+const trackSm = "_trackSm_cypmg_38";
+const trackMd = "_trackMd_cypmg_45";
+const trackLg = "_trackLg_cypmg_52";
+const indicator = "_indicator_cypmg_59";
+const indicatorNeutral = "_indicatorNeutral_cypmg_66";
+const indicatorSuccess = "_indicatorSuccess_cypmg_70";
+const indicatorWarning = "_indicatorWarning_cypmg_74";
+const indicatorDanger = "_indicatorDanger_cypmg_78";
+const indicatorIndeterminate = "_indicatorIndeterminate_cypmg_82";
+const circular = "_circular_cypmg_98";
+const circularSvg = "_circularSvg_cypmg_107";
+const circularTrack = "_circularTrack_cypmg_113";
+const circularIndicator = "_circularIndicator_cypmg_118";
+const circularIndicatorSuccess = "_circularIndicatorSuccess_cypmg_126";
+const circularIndicatorWarning = "_circularIndicatorWarning_cypmg_130";
+const circularIndicatorDanger = "_circularIndicatorDanger_cypmg_134";
+const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_cypmg_138";
+const circularValue = "_circularValue_cypmg_155";
+const circularValueCompact = "_circularValueCompact_cypmg_161";
+const circularValueStandard = "_circularValueStandard_cypmg_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),
+              "%"
+            ]
+          }
+        )
       ]
     }
   );

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

@@ -1,33 +1,33 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const prompt = "_prompt_1wo4v_1";
-const fixed = "_fixed_1wo4v_60";
-const sticky = "_sticky_1wo4v_71";
-const seamless = "_seamless_1wo4v_86";
-const toolbar = "_toolbar_1wo4v_102";
-const textarea = "_textarea_1wo4v_107";
-const attachments = "_attachments_1wo4v_110";
-const tabs = "_tabs_1wo4v_115";
-const tabsInner = "_tabsInner_1wo4v_123";
-const attach = "_attach_1wo4v_110";
-const select = "_select_1wo4v_141";
-const modeButton = "_modeButton_1wo4v_142";
-const submit = "_submit_1wo4v_173";
-const actionButton = "_actionButton_1wo4v_174";
-const tabButton = "_tabButton_1wo4v_246";
-const tabButtonActive = "_tabButtonActive_1wo4v_275";
-const actions = "_actions_1wo4v_290";
-const info = "_info_1wo4v_297";
-const modeButtonActive = "_modeButtonActive_1wo4v_393";
-const attachment = "_attachment_1wo4v_110";
-const attachmentThumb = "_attachmentThumb_1wo4v_473";
-const attachmentName = "_attachmentName_1wo4v_481";
-const attachmentSize = "_attachmentSize_1wo4v_489";
-const attachmentRemove = "_attachmentRemove_1wo4v_495";
-const dragging = "_dragging_1wo4v_539";
-const usage = "_usage_1wo4v_547";
-const submitLoading = "_submitLoading_1wo4v_603";
-const submitSpinner = "_submitSpinner_1wo4v_607";
+const prompt = "_prompt_ef54k_1";
+const fixed = "_fixed_ef54k_60";
+const sticky = "_sticky_ef54k_71";
+const seamless = "_seamless_ef54k_86";
+const toolbar = "_toolbar_ef54k_99";
+const textarea = "_textarea_ef54k_104";
+const attachments = "_attachments_ef54k_107";
+const tabs = "_tabs_ef54k_112";
+const tabsInner = "_tabsInner_ef54k_120";
+const attach = "_attach_ef54k_107";
+const select = "_select_ef54k_138";
+const modeButton = "_modeButton_ef54k_139";
+const submit = "_submit_ef54k_170";
+const tabButton = "_tabButton_ef54k_234";
+const tabButtonActive = "_tabButtonActive_ef54k_284";
+const actions = "_actions_ef54k_299";
+const info = "_info_ef54k_306";
+const actionButton = "_actionButton_ef54k_313";
+const modeButtonActive = "_modeButtonActive_ef54k_456";
+const attachment = "_attachment_ef54k_107";
+const attachmentThumb = "_attachmentThumb_ef54k_574";
+const attachmentName = "_attachmentName_ef54k_582";
+const attachmentSize = "_attachmentSize_ef54k_590";
+const attachmentRemove = "_attachmentRemove_ef54k_596";
+const dragging = "_dragging_ef54k_678";
+const usage = "_usage_ef54k_686";
+const submitLoading = "_submitLoading_ef54k_768";
+const submitSpinner = "_submitSpinner_ef54k_772";
 const styles = {
   prompt,
   fixed,
@@ -42,11 +42,11 @@ const styles = {
   select,
   modeButton,
   submit,
-  actionButton,
   tabButton,
   tabButtonActive,
   actions,
   info,
+  actionButton,
   modeButtonActive,
   attachment,
   attachmentThumb,