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

Spark (Leboncoin design system) components.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/progress/index.ts
var progress_exports = {};
__export(progress_exports, {
  Progress: () => Progress2
});
module.exports = __toCommonJS(progress_exports);

// src/progress/Progress.tsx
var import_class_variance_authority3 = require("class-variance-authority");
var import_radix_ui2 = require("radix-ui");
var import_react2 = require("react");

// src/progress/ProgressBar.styles.ts
var import_class_variance_authority = require("class-variance-authority");
var progressBarStyles = (0, import_class_variance_authority.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
var import_react = require("react");
var ProgressContext = (0, import_react.createContext)(null);
var ID_PREFIX = ":progress";
var useProgress = () => {
  const context = (0, import_react.useContext)(ProgressContext);
  if (!context) {
    throw new Error("useProgress must be used within a Progress provider");
  }
  return context;
};

// src/progress/ProgressIndicator.tsx
var import_radix_ui = require("radix-ui");

// src/progress/ProgressIndicator.styles.ts
var import_class_variance_authority2 = require("class-variance-authority");
var progressIndicatorStyles = (0, import_class_variance_authority2.cva)(["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
var import_jsx_runtime = require("react/jsx-runtime");
var ProgressIndicator = ({
  className,
  style,
  ref,
  ...others
}) => {
  const { value, max, intent, shape, isIndeterminate } = useProgress();
  const x = (max - value) / max * 100;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_radix_ui.Progress.ProgressIndicator,
    {
      className: progressIndicatorStyles({ className, intent, shape, isIndeterminate }),
      style: { ...style, ...!isIndeterminate && { transform: `translateX(-${x}%)` } },
      ref,
      ...others
    }
  );
};
ProgressIndicator.displayName = "Progress.Indicator";

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

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

// src/progress/ProgressLabel.tsx
var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
var import_react3 = require("react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var ProgressLabel = ({
  id: idProp,
  children,
  ref: forwardedRef,
  ...others
}) => {
  const internalID = `${ID_PREFIX}-label-${(0, import_react3.useId)()}`;
  const id = idProp || internalID;
  const { onLabelId } = useProgress();
  const rootRef = (0, import_react3.useCallback)(
    (el) => {
      onLabelId(el ? id : void 0);
    },
    [id, onLabelId]
  );
  const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, rootRef);
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Progress
});
//# sourceMappingURL=index.js.map