@spark-ui/components/dist/progress/index.mjs

Spark (Leboncoin design system) components.

// src/progress/Progress.tsx
import { cx } from "class-variance-authority";
import { Progress as RadixProgress2 } from "radix-ui";
import { useMemo, useState } from "react";

// src/progress/ProgressBar.styles.ts
import { cva } from "class-variance-authority";
var progressBarStyles = cva(
  ["relative", "h-sz-4 w-full", "transform-gpu overflow-hidden", "bg-on-background/dim-4"],
  {
    variants: {
      shape: {
        square: [],
        rounded: ["rounded-sm"]
      }
    }
  }
);

// src/progress/ProgressContext.tsx
import { createContext, useContext } from "react";
var ProgressContext = createContext(null);
var ID_PREFIX = ":progress";
var useProgress = () => {
  const context = useContext(ProgressContext);
  if (!context) {
    throw new Error("useProgress must be used within a Progress provider");
  }
  return context;
};

// src/progress/ProgressIndicator.tsx
import { Progress as RadixProgress } from "radix-ui";

// src/progress/ProgressIndicator.styles.ts
import { cva as cva2 } from "class-variance-authority";
var progressIndicatorStyles = cva2(["h-full w-full", "transition-transform duration-400"], {
  variants: {
    /**
     * Color scheme of the progress component.
     */
    intent: {
      basic: ["bg-basic"],
      main: ["bg-main"],
      support: ["bg-support"],
      accent: ["bg-accent"],
      success: ["bg-success"],
      alert: ["bg-alert"],
      danger: ["bg-error"],
      info: ["bg-info"],
      neutral: ["bg-neutral"]
    },
    /**
     * Shape of the progress component.
     */
    shape: {
      square: [],
      rounded: ["rounded-sm"]
    },
    /**
     * Sets if the progress value is not determinated.
     */
    isIndeterminate: {
      true: ["absolute", "-translate-x-1/2", "animate-standalone-indeterminate-bar"],
      false: []
    }
  }
});

// src/progress/ProgressIndicator.tsx
import { jsx } from "react/jsx-runtime";
var ProgressIndicator = ({
  className,
  style,
  ref,
  ...others
}) => {
  const { value, max, intent, shape, isIndeterminate } = useProgress();
  const x = (max - value) / max * 100;
  return /* @__PURE__ */ jsx(
    RadixProgress.ProgressIndicator,
    {
      className: progressIndicatorStyles({ className, intent, shape, isIndeterminate }),
      style: { ...style, ...!isIndeterminate && { transform: `translateX(-${x}%)` } },
      ref,
      ...others
    }
  );
};
ProgressIndicator.displayName = "Progress.Indicator";

// src/progress/ProgressBar.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var ProgressBar = ({
  className,
  children = /* @__PURE__ */ jsx2(ProgressIndicator, {}),
  ref,
  ...others
}) => {
  const { shape } = useProgress();
  return /* @__PURE__ */ jsx2("div", { className: progressBarStyles({ className, shape }), ref, ...others, children });
};
ProgressBar.displayName = "Progress.Bar";

// src/progress/Progress.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var Progress = ({
  className,
  value: valueProp,
  max = 100,
  shape = "square",
  intent = "basic",
  isIndeterminate = false,
  children = /* @__PURE__ */ jsx3(ProgressBar, {}),
  ref,
  ...others
}) => {
  const [labelId, setLabelId] = useState();
  const value = useMemo(() => {
    return { value: valueProp ?? 0, max, intent, shape, isIndeterminate, onLabelId: setLabelId };
  }, [max, valueProp, intent, shape, isIndeterminate, setLabelId]);
  return /* @__PURE__ */ jsx3(ProgressContext.Provider, { "data-spark-component": "progress", value, children: /* @__PURE__ */ jsx3(
    RadixProgress2.Progress,
    {
      ref,
      className: cx("gap-sm flex flex-col", className),
      value: valueProp,
      "aria-labelledby": labelId,
      max,
      ...others,
      children
    }
  ) });
};
Progress.displayName = "Progress";

// src/progress/ProgressLabel.tsx
import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
import { useCallback, useId } from "react";
import { jsx as jsx4 } from "react/jsx-runtime";
var ProgressLabel = ({
  id: idProp,
  children,
  ref: forwardedRef,
  ...others
}) => {
  const internalID = `${ID_PREFIX}-label-${useId()}`;
  const id = idProp || internalID;
  const { onLabelId } = useProgress();
  const rootRef = useCallback(
    (el) => {
      onLabelId(el ? id : void 0);
    },
    [id, onLabelId]
  );
  const ref = useMergeRefs(forwardedRef, rootRef);
  return /* @__PURE__ */ jsx4("span", { id, className: "text-body-2 text-on-surface", ref, ...others, children });
};
ProgressLabel.displayName = "Progress.Label";

// src/progress/index.ts
var Progress2 = Object.assign(Progress, {
  Label: ProgressLabel,
  Bar: ProgressBar,
  Indicator: ProgressIndicator
});
Progress2.displayName = "Progress";
ProgressBar.displayName = "Progress.Bar";
ProgressIndicator.displayName = "Progress.Indicator";
ProgressLabel.displayName = "Progress.Label";
export {
  Progress2 as Progress
};
//# sourceMappingURL=index.mjs.map