@frank-auth/react/dist/esm/components/ui/progress/progress.js

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsxs as f, jsx as d } from "react/jsx-runtime";
import { useTheme as R } from "../../../theme/context.js";
import { getColorVariant as C } from "../../../theme/styled.js";
import { css as r, keyframes as p } from "@emotion/react";
import i from "@emotion/styled";
import j from "react";
const A = (e) => {
  const { theme: t, size: s = "md" } = e;
  switch (s) {
    case "xs":
      return r`
        height: ${t.spacing[1]} !important;
      `;
    case "sm":
      return r`
        height: ${t.spacing[2]} !important;
      `;
    case "md":
      return r`
        height: ${t.spacing[3]} !important;
      `;
    case "lg":
      return r`
        height: ${t.spacing[4]} !important;
      `;
    default:
      return r`
        height: ${t.spacing[3]} !important;
      `;
  }
}, D = (e) => {
  const { theme: t, radius: s = "full" } = e;
  switch (s) {
    case "none":
      return r`border-radius: ${t.borderRadius.none} !important;`;
    case "sm":
      return r`border-radius: ${t.borderRadius.sm} !important;`;
    case "md":
      return r`border-radius: ${t.borderRadius.md} !important;`;
    case "lg":
      return r`border-radius: ${t.borderRadius.lg} !important;`;
    case "full":
      return r`border-radius: ${t.borderRadius.full} !important;`;
    default:
      return r`border-radius: ${t.borderRadius.full} !important;`;
  }
}, F = (e) => {
  const { theme: t, color: s = "primary", isDisabled: m } = e;
  if (m)
    return r`
      opacity: 0.5;
    `;
  const n = C(t, s, 500);
  return r`
    background-color: ${n};
  `;
}, L = p`
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
`, M = p`
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
`, N = i.div`
  display: flex;
  flex-direction: column;
  gap: ${(e) => e.showValueLabel ? e.theme.spacing[2] : 0};
  width: 100%;
`, T = i.div`
  position: relative;
  overflow: hidden;
  background-color: ${(e) => e.theme.colors.neutral[200]};
  width: 100%;

  /* Apply size and radius styles to ensure they take precedence */
  ${A}
  ${D}

  ${(e) => e.isDisabled && r`
      opacity: 0.5;
    `}

    /* Custom CSS prop - applied last */
  ${(e) => e.css}
`, V = i.div`
  height: 100%;
  border-radius: inherit;
  transition: width ${(e) => e.theme.transitions.normal};
  position: relative;

  ${F}

  ${(e) => e.isIndeterminate ? r`
        width: 40%;
        position: absolute;
        animation: ${L} 1.5s infinite ease-in-out;
      ` : r`
        width: ${e.progressValue}%;
      `}

  ${(e) => e.isStriped && r`
      background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
      );
      background-size: 40px 40px;
      animation: ${M} 1s linear infinite;
    `}
`, W = i.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`, X = i.span`
  color: ${(e) => e.theme.colors.text.primary};
  font-size: ${(e) => {
  switch (e.size) {
    case "xs":
      return e.theme.fontSizes.xs;
    case "sm":
      return e.theme.fontSizes.xs;
    case "lg":
      return e.theme.fontSizes.base;
    default:
      return e.theme.fontSizes.sm;
  }
}};
  font-weight: ${(e) => e.theme.fontWeights.medium};
`, q = i.span`
  color: ${(e) => e.theme.colors.text.secondary};
  font-size: ${(e) => {
  switch (e.size) {
    case "xs":
      return e.theme.fontSizes.xs;
    case "sm":
      return e.theme.fontSizes.xs;
    case "lg":
      return e.theme.fontSizes.base;
    default:
      return e.theme.fontSizes.sm;
  }
}};
  font-weight: ${(e) => e.theme.fontWeights.medium};
`, B = j.forwardRef(
  ({
    value: e = 0,
    minValue: t = 0,
    maxValue: s = 100,
    color: m = "primary",
    size: n = "md",
    radius: $ = "full",
    showValueLabel: l = !1,
    label: o,
    formatOptions: u = { style: "percent", maximumFractionDigits: 0 },
    isIndeterminate: a = !1,
    isDisabled: b = !1,
    isStriped: x = !1,
    className: y,
    css: w,
    ...S
  }, z) => {
    const { theme: c } = R(), h = a ? 0 : Math.min(
      Math.max((e - t) / (s - t) * 100, 0),
      100
    ), v = (k) => u.style === "percent" ? `${Math.round(h)}%` : new Intl.NumberFormat(void 0, u).format(k), g = {
      ...S,
      color: m,
      size: n,
      // Make sure size is explicitly passed
      radius: $,
      // Make sure radius is explicitly passed
      isDisabled: b,
      className: y,
      css: w
    }, P = {
      ...g,
      progressValue: h,
      isIndeterminate: a,
      isStriped: x && !a
    };
    return /* @__PURE__ */ f(
      N,
      {
        theme: c,
        ref: z,
        showValueLabel: l || !!o,
        role: "progressbar",
        "aria-valuenow": a ? void 0 : e,
        "aria-valuemin": t,
        "aria-valuemax": s,
        "aria-label": o,
        children: [
          (o || l) && /* @__PURE__ */ f(W, { children: [
            o && /* @__PURE__ */ d(X, { theme: c, size: n, children: o }),
            l && !a && /* @__PURE__ */ d(q, { theme: c, size: n, children: v(e) })
          ] }),
          /* @__PURE__ */ d(T, { theme: c, ...g, children: /* @__PURE__ */ d(V, { theme: c, ...P }) })
        ]
      }
    );
  }
);
B.displayName = "Progress";
export {
  B as Progress
};
//# sourceMappingURL=progress.js.map