@jobber/components 8.24.1 → 8.24.2-visual-reg-d5e3ec5.19

package/dist/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import type { CSSProperties } from "react";
+export interface ProgressIndicatorProps {
+    /**
+     * Current progress. Expected to be in the range `0..max` inclusive.
+     */
+    readonly value: number;
+    /**
+     * Maximum value. Pass `max={4}` with `value={2}` for "2 of 4 steps"; pass
+     * `value={75}` for "75%".
+     *
+     * @default 100
+     */
+    readonly max?: number;
+    /**
+     * Visual variation:
+     * - `continuous` renders a single fill bar driven by `value / max`.
+     * - `stepped` renders `max` segments, the first `value` of which are filled.
+     *
+     * @default "continuous"
+     */
+    readonly variation?: "continuous" | "stepped";
+    /**
+     * Visual size. `smaller` renders at 4px tall, `small` at 8px, `base` at 16px.
+     *
+     * @default "base"
+     */
+    readonly size?: "smaller" | "small" | "base";
+    /**
+     * Accessible label exposed via `aria-label` on the root element. When
+     * omitted, defaults to `"{value}%"` when `max === 100` (or `max` is
+     * omitted), and `"{value} / {max}"` otherwise.
+     *
+     * Override to localize or to describe the specific activity (e.g.
+     * `"Uploading file"`).
+     */
+    readonly ariaLabel?: string;
+    /**
+     * Custom class name merged onto the root element alongside the component's
+     * own classes.
+     */
+    readonly className?: string;
+    /**
+     * Custom inline styles applied to the root element.
+     */
+    readonly style?: CSSProperties;
+}
+/**
+ * `ProgressIndicator` communicates **determinate** progress — a known fraction
+ * of a task that has been completed. Use it when you can express progress as
+ * `value / max`, such as a multi-step setup wizard or a file upload with a
+ * known total size.
+ *
+ * For indeterminate activity (loading time or fraction unknown), use
+ * `ActivityIndicator` instead.
+ *
+ * For now, the legacy `ProgressBar` component also remains available; new code
+ * should prefer `ProgressIndicator`.
+ */
+export declare function ProgressIndicator({ value, max, variation, size, ariaLabel, className, style, }: ProgressIndicatorProps): React.JSX.Element;

package/dist/ProgressIndicator/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ProgressIndicator = require('../ProgressIndicator-cjs.js');
+require('react');
+require('classnames');
+
+
+
+exports.ProgressIndicator = ProgressIndicator.ProgressIndicator;

package/dist/ProgressIndicator/index.d.ts

@@ -0,0 +1 @@
+export { ProgressIndicator } from "./ProgressIndicator";

package/dist/ProgressIndicator/index.mjs

@@ -0,0 +1,3 @@
+export { P as ProgressIndicator } from '../ProgressIndicator-es.js';
+import 'react';
+import 'classnames';

package/dist/ProgressIndicator-cjs.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+var styles = {"indicator":"-TBRV1VUsfc-","smaller":"MStgN8AhV3s-","small":"iAlYWHjs6JQ-","base":"WWEzA1-OjSM-","continuous":"r9ShSj58V6w-","fill":"Hsuq8zT-KzY-","stepped":"FB1e9bL90tI-","segment":"bpLIiDGlsCs-","filled":"_0FxmImvY-04-","spinning":"_2aJghEPvl14-"};
+
+/**
+ * `ProgressIndicator` communicates **determinate** progress — a known fraction
+ * of a task that has been completed. Use it when you can express progress as
+ * `value / max`, such as a multi-step setup wizard or a file upload with a
+ * known total size.
+ *
+ * For indeterminate activity (loading time or fraction unknown), use
+ * `ActivityIndicator` instead.
+ *
+ * For now, the legacy `ProgressBar` component also remains available; new code
+ * should prefer `ProgressIndicator`.
+ */
+function ProgressIndicator({ value, max = 100, variation = "continuous", size = "base", ariaLabel, className, style, }) {
+    const clampedValue = Math.min(value, max);
+    const resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : defaultAriaLabel(clampedValue, max);
+    return (React.createElement("div", { role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": resolvedAriaLabel, className: classnames(styles.indicator, styles[size], variation === "stepped" ? styles.stepped : styles.continuous, className), style: style }, variation === "stepped"
+        ? SteppedSegments({ value: clampedValue, max })
+        : ContinuousFill({ value: clampedValue, max })));
+}
+function ContinuousFill({ value, max, }) {
+    const percentage = max === 0 ? 0 : (value / max) * 100;
+    return (React.createElement("div", { className: styles.fill, style: { "--progress-indicator--fill-amount": percentage } }));
+}
+function SteppedSegments({ value, max, }) {
+    return (React.createElement(React.Fragment, null, Array.from({ length: max }).map((_, index) => {
+        const step = index + 1;
+        return (React.createElement("div", { key: step, className: classnames(styles.segment, step <= value && styles.filled) }));
+    })));
+}
+function defaultAriaLabel(value, max) {
+    if (max === 100)
+        return `${value}%`;
+    return `${value} / ${max}`;
+}
+
+exports.ProgressIndicator = ProgressIndicator;

package/dist/ProgressIndicator-es.js

@@ -0,0 +1,41 @@
+import React__default from 'react';
+import classnames from 'classnames';
+
+var styles = {"indicator":"-TBRV1VUsfc-","smaller":"MStgN8AhV3s-","small":"iAlYWHjs6JQ-","base":"WWEzA1-OjSM-","continuous":"r9ShSj58V6w-","fill":"Hsuq8zT-KzY-","stepped":"FB1e9bL90tI-","segment":"bpLIiDGlsCs-","filled":"_0FxmImvY-04-","spinning":"_2aJghEPvl14-"};
+
+/**
+ * `ProgressIndicator` communicates **determinate** progress — a known fraction
+ * of a task that has been completed. Use it when you can express progress as
+ * `value / max`, such as a multi-step setup wizard or a file upload with a
+ * known total size.
+ *
+ * For indeterminate activity (loading time or fraction unknown), use
+ * `ActivityIndicator` instead.
+ *
+ * For now, the legacy `ProgressBar` component also remains available; new code
+ * should prefer `ProgressIndicator`.
+ */
+function ProgressIndicator({ value, max = 100, variation = "continuous", size = "base", ariaLabel, className, style, }) {
+    const clampedValue = Math.min(value, max);
+    const resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : defaultAriaLabel(clampedValue, max);
+    return (React__default.createElement("div", { role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": resolvedAriaLabel, className: classnames(styles.indicator, styles[size], variation === "stepped" ? styles.stepped : styles.continuous, className), style: style }, variation === "stepped"
+        ? SteppedSegments({ value: clampedValue, max })
+        : ContinuousFill({ value: clampedValue, max })));
+}
+function ContinuousFill({ value, max, }) {
+    const percentage = max === 0 ? 0 : (value / max) * 100;
+    return (React__default.createElement("div", { className: styles.fill, style: { "--progress-indicator--fill-amount": percentage } }));
+}
+function SteppedSegments({ value, max, }) {
+    return (React__default.createElement(React__default.Fragment, null, Array.from({ length: max }).map((_, index) => {
+        const step = index + 1;
+        return (React__default.createElement("div", { key: step, className: classnames(styles.segment, step <= value && styles.filled) }));
+    })));
+}
+function defaultAriaLabel(value, max) {
+    if (max === 100)
+        return `${value}%`;
+    return `${value} / ${max}`;
+}
+
+export { ProgressIndicator as P };