@box/blueprint-web 12.136.1 → 12.137.0

package/dist/lib-esm/circular-progress/circular-progress.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes } from 'react';
+export interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /** Required accessible label for the progress indicator. */
+    'aria-label': string;
+    /** Progress value from 0 to 100. */
+    value: number;
+}
+export declare const CircularProgress: import("react").ForwardRefExoticComponent<CircularProgressProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/circular-progress/circular-progress.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import styles from './circular-progress.module.js';
+
+const SIZE = 24;
+const STROKE_WIDTH = 2;
+const RADIUS = (SIZE - STROKE_WIDTH) / 2;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+function CircularProgressComponent(props, ref) {
+  const {
+    'aria-label': ariaLabel,
+    value,
+    className,
+    ...rest
+  } = props;
+  const clampedValue = Math.min(100, Math.max(0, value));
+  const strokeDashoffset = CIRCUMFERENCE * (1 - clampedValue / 100);
+  const center = SIZE / 2;
+  return jsx("div", {
+    ...rest,
+    ref: ref,
+    "aria-label": ariaLabel,
+    "aria-valuemax": 100,
+    "aria-valuemin": 0,
+    "aria-valuenow": clampedValue,
+    className: clsx(styles['circular-progress'], className),
+    role: "progressbar",
+    children: jsxs("svg", {
+      "aria-hidden": "true",
+      className: styles.svg,
+      viewBox: `0 0 ${SIZE} ${SIZE}`,
+      children: [jsx("circle", {
+        className: styles.track,
+        cx: center,
+        cy: center,
+        r: RADIUS,
+        strokeWidth: STROKE_WIDTH
+      }), jsx("circle", {
+        className: styles.fill,
+        cx: center,
+        cy: center,
+        r: RADIUS,
+        strokeDasharray: CIRCUMFERENCE,
+        strokeDashoffset: strokeDashoffset,
+        strokeWidth: STROKE_WIDTH
+      })]
+    })
+  });
+}
+const CircularProgress = /*#__PURE__*/forwardRef(CircularProgressComponent);
+CircularProgress.displayName = 'CircularProgress';
+
+export { CircularProgress };

package/dist/lib-esm/circular-progress/circular-progress.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"circular-progress":"bp_circular_progress_module_circular-progress--73ea7","svg":"bp_circular_progress_module_svg--73ea7","track":"bp_circular_progress_module_track--73ea7","fill":"bp_circular_progress_module_fill--73ea7"};
+
+export { styles as default };

package/dist/lib-esm/circular-progress/index.d.ts

@@ -0,0 +1 @@
+export { CircularProgress, type CircularProgressProps } from './circular-progress';