@stratakit/bricks/dist/DEV/Progress.js

Small, modular components for StrataKit

import { jsx } from "react/jsx-runtime";
import * as React from "react";
import { Role } from "@ariakit/react/role";
import { forwardRef } from "@stratakit/foundations/secret-internals";
import cx from "classnames";
const ProgressBar = forwardRef(
  (props, forwardedRef) => {
    const {
      size = "medium",
      tone = "neutral",
      style: styleProp,
      value: valueProp,
      ...rest
    } = props;
    const value = React.useMemo(() => {
      if (valueProp == null) return void 0;
      const clampedValue = Math.min(Math.max(valueProp, 0), 100);
      return Number(clampedValue.toFixed(3));
    }, [valueProp]);
    const style = React.useMemo(() => {
      return value != null ? {
        ...styleProp,
        "--\u{1F95D}progress-bar-fill-portion-shown": `${value}%`
      } : styleProp;
    }, [styleProp, value]);
    return /* @__PURE__ */ jsx(
      Role,
      {
        role: "progressbar",
        "aria-valuenow": value,
        "aria-valuemin": value != null ? 0 : void 0,
        "aria-valuemax": value != null ? 100 : void 0,
        ...rest,
        "data-kiwi-size": size,
        "data-kiwi-tone": tone,
        "data-kiwi-variant": value != null ? "determinate" : "indeterminate",
        className: cx("\u{1F95D}-progress-bar", props.className),
        style,
        ref: forwardedRef
      }
    );
  }
);
DEV: ProgressBar.displayName = "ProgressBar";
export {
  ProgressBar
};