@jobber/components-native 0.109.1 → 0.110.0

package/dist/docs/ProgressBar/ProgressBar.md

@@ -1,6 +1,6 @@
 # Progress Bar
 
-> **Deprecated.** Use [ProgressIndicator](/components/ProgressIndicator) for new
+> **Deprecated.** Use [ProgressIndicator](../ProgressIndicator/ProgressIndicator.md) for new
 > work. `ProgressIndicator` is the supported determinate progress indicator
 > going forward — it offers the same semantic with a cleaner prop surface
 > (`value` / `max` instead of `currentStep` / `totalSteps`,

package/dist/docs/ProgressIndicator/ProgressIndicator.md

@@ -0,0 +1,117 @@
+# Progress Indicator
+
+`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](../ActivityIndicator/ActivityIndicator.md) instead.
+
+Some great use cases for a `ProgressIndicator` include:
+
+* Setup wizards, where we know how many steps the user has completed and how
+  many steps remain (use `variation="stepped"`).
+* File uploads, where we know the total file size and how much data has already
+  been sent (use the default `variation="continuous"`).
+
+## Design & usage guidelines
+
+The default `ProgressIndicator` size is `base` (16px tall) and can be used in
+most cases. The `small` (8px) and `smaller` (4px) sizes should be used when the
+indicator sits inline with text or in tight surface layouts.
+
+`ProgressIndicator` always fills the width of its parent. Layout — including
+inline-vs-block placement — is the consumer's responsibility. Wrap the indicator
+with your own flex / `<Stack>` / `<Box>` container, or pass a `className` /
+`style`, to control the surrounding layout.
+
+### Continuous vs. stepped
+
+Use `variation="continuous"` (the default) when progress is a smooth value
+between `0` and `max` — for example, a file upload where any percentage is
+meaningful.
+
+Use `variation="stepped"` when progress is naturally segmented — for example, a
+multi-step wizard where the user is on step 2 of 5. Stepped renders `max`
+discrete segments and fills the first `value` of them.
+
+## Accessibility
+
+`ProgressIndicator` announces itself politely to assistive technology:
+
+* `role="progressbar"` marks the root element as a progress bar.
+* `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` reflect the current
+  progress so screen readers can announce the value as a percentage or ratio
+  appropriately.
+* `aria-label` defaults to a localized-as-English template: `"{value}%"` when
+  `max === 100` (or `max` is omitted), and `"{value} / {max}"` otherwise. Pass a
+  custom `ariaLabel` to localize or to describe the specific activity (e.g.
+  `ariaLabel="Uploading file"`).
+
+In the stepped variation, the individual segments are presentational `<div>`s
+with no `role` or `aria-*` attributes. The whole indicator announces once as a
+single progressbar — the outer `aria-valuenow` / `aria-valuemax` already carry
+the progress information.
+
+The indicator does not participate in the keyboard tab order.
+
+### Reduced motion
+
+The width transition between `value` updates is intentionally **preserved**
+under
+[`prefers-reduced-motion: reduce`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion).
+The slide between progress values conveys functional information about progress,
+direction, and magnitude — it is exempt under
+[WCAG 2.3.3 ("Animation from Interactions")](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html).
+Removing the transition would make progress harder to perceive, not easier.
+
+## Relationship to ProgressBar
+
+The legacy [ProgressBar](../ProgressBar/ProgressBar.md) component remains available
+and unchanged. New code should prefer `ProgressIndicator`. A follow-up change is
+expected to consolidate `ProgressBar` onto `ProgressIndicator`.
+
+`ProgressIndicator` renames `ProgressBar`'s props to align with HTML5
+`<progress>` semantics and mobile naming:
+
+| `ProgressBar` (legacy) | `ProgressIndicator` (new) |
+| ---------------------- | ------------------------- |
+| `currentStep`          | `value`                   |
+| `totalSteps`           | `max`                     |
+| `variation="progress"` | `variation="continuous"`  |
+| `UNSAFE_className`     | `className`               |
+| `UNSAFE_style`         | `style`                   |
+
+## Mobile
+
+Mobile (`@jobber/components-native`) ships its own `ProgressIndicator` with the
+same `value` / `max` / `variation` / `size` surface. Two platform differences:
+
+* The accessible label prop is `accessibilityLabel` (React Native's convention),
+  and the derived default follows the same percent / ratio templates. Styling
+  uses the `style` prop (there is no `className`).
+* Mobile adds a **`pendingValue`** prop (mobile-only). It renders an additional
+  in-flight band beyond `value`, on the same scale as `value` and `max`, and is
+  **additive**: with `value={2}`, `pendingValue={3}`, `max={10}` the bar shows
+  2/10 completed plus another 3/10 in flight (5/10 filled in total). It applies
+  to both the continuous and stepped variations, and adds a third derived label
+  template — `"{value} of {max}, {pendingValue} pending"`.
+
+The mobile `ProgressBar` remains available and unchanged; new mobile code should
+prefer `ProgressIndicator`.
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `value` | `number` | Yes | — | Current progress. Expected to be in the range `0..max` inclusive. |
+| `accessibilityLabel` | `string` | No | — | Accessible label override. When omitted, the label is derived via `useAtlantisI18n`: `"{value}%"` when `max` is `100`... |
+| `max` | `number` | No | `100` | Maximum value. |
+| `pendingValue` | `number` | No | `0` | Additional in-flight progress beyond `value`, measured on the same scale as `value` and `max`. The bar visually fills... |
+| `size` | `"base" | "small" | "smaller"` | No | `base` | Set the size of the progress indicator. Corresponds to bar heights of 4px / 8px / 16px. |
+| `style` | `StyleProp<ViewStyle>` | No | — | Custom style applied to the root element. |
+| `variation` | `"continuous" | "stepped"` | No | `continuous` | Set the variation of the progress indicator. `continuous` renders a single fill; `stepped` renders one segment per in... |

package/dist/docs/index.md

@@ -49,6 +49,7 @@
 [page-layouts](./page-layouts/page-layouts.md)
 [product-vocabulary](./product-vocabulary/product-vocabulary.md)
 [ProgressBar](./ProgressBar/ProgressBar.md)
+[ProgressIndicator](./ProgressIndicator/ProgressIndicator.md)
 [Radii](./Radii/Radii.md)
 [ResponsiveBreakpoint](./ResponsiveBreakpoint/ResponsiveBreakpoint.md)
 [scaffolding](./scaffolding/scaffolding.md)

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.109.1",
+    "version": "0.110.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -124,5 +124,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "879bbb072a470c876e4ee7e9a9757f5edb0f3b82"
+    "gitHead": "c81a2b04748119a1bd84cc39f4f5e7a97c410afb"
 }

package/dist/src/ProgressBar/ProgressBar.js

@@ -1,3 +1,6 @@
+/* eslint-disable import/no-deprecated -- This file implements the deprecated
+ * ProgressBar component; self-references predate the deprecation. Migrate to
+ * ProgressIndicator. */
 import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./ProgressBar.style";
@@ -6,6 +9,9 @@ import { ProgressBarStepped } from "./ProgressBarStepped";
 import { sizeStyles } from "./ProgressBar.size.style";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
+/**
+ * @deprecated Use `ProgressIndicator` from `@jobber/components-native` instead.
+ */
 export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, variation = "progress", size = "base", UNSAFE_style, }) {
     const { t } = useAtlantisI18n();
     const styles = useStyles();

package/dist/src/ProgressBar/ProgressBar.test.js

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-deprecated -- This file tests the deprecated
+ * ProgressBar component until it is removed or shimmed. */
 import React from "react";
 import { render, screen } from "@testing-library/react-native";
 import { ProgressBar } from ".";

package/dist/src/ProgressIndicator/ProgressIndicator.js

@@ -0,0 +1,106 @@
+import React, { useEffect } from "react";
+import { View } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
+import { useStyles } from "./ProgressIndicator.style";
+import { sizeHeights, sizeStyles } from "./ProgressIndicator.size.style";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { tokens } from "../utils/design";
+export function ProgressIndicator({ value, max = 100, pendingValue = 0, variation = "continuous", size = "base", accessibilityLabel, style, }) {
+    const styles = useStyles();
+    const { t } = useAtlantisI18n();
+    const label = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : getA11yLabel();
+    const radius = sizeHeights[size] / 2;
+    return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: label, accessibilityValue: { min: 0, max, now: value, text: label }, style: [
+            variation === "stepped" ? styles.stepped : styles.continuous,
+            sizeStyles[size],
+            // Round the continuous track so its trailing (unfilled) end is pill-
+            // shaped like the leading end; `overflow: "hidden"` clips the fill to
+            // match. The stepped variation rounds its individual segments instead.
+            variation === "continuous" && { borderRadius: radius },
+            style,
+        ] }, variation === "stepped" ? (React.createElement(ProgressIndicatorStepped, { value: value, max: max, pendingValue: pendingValue, size: size })) : (React.createElement(ProgressIndicatorContinuous, { value: value, max: max, pendingValue: pendingValue, size: size }))));
+    function getA11yLabel() {
+        if (pendingValue > 0) {
+            return t("ProgressIndicator.ariaLabelPending", {
+                value: String(value),
+                max: String(max),
+                pendingValue: String(pendingValue),
+            });
+        }
+        if (max === 100) {
+            return t("ProgressIndicator.ariaLabelPercent", { value: String(value) });
+        }
+        return t("ProgressIndicator.ariaLabelRatio", {
+            value: String(value),
+            max: String(max),
+        });
+    }
+}
+/**
+ * Clamp a raw progress amount to a percentage of `max` in the range 0..100.
+ */
+function toPercent(amount, max) {
+    if (max <= 0)
+        return 0;
+    return Math.min(100, Math.max(0, (amount / max) * 100));
+}
+/**
+ * File-private renderer for `variation="continuous"`. Renders the fill and,
+ * when `pendingValue > 0`, a pending band. The outer `ProgressIndicator` shell
+ * owns the accessibility contract; this renderer emits presentational children
+ * only.
+ */
+function ProgressIndicatorContinuous({ value, max, pendingValue, size, }) {
+    const styles = useStyles();
+    const radius = sizeHeights[size] / 2;
+    const fillPercent = toPercent(value, max);
+    const pendingPercent = toPercent(value + pendingValue, max);
+    // The width transition is intentionally preserved regardless of the user's
+    // reduce-motion preference: the slide between progress values conveys
+    // functional progress and is exempt under WCAG 2.3.3 ("Animation from
+    // Interactions"). See design.md.
+    const fill = useSharedValue(fillPercent);
+    const pending = useSharedValue(pendingPercent);
+    useEffect(() => {
+        fill.value = withTiming(fillPercent, {
+            duration: tokens["timing-base"],
+            easing: Easing.out(Easing.ease),
+        });
+    }, [fillPercent]);
+    useEffect(() => {
+        pending.value = withTiming(pendingPercent, {
+            duration: tokens["timing-base"],
+            easing: Easing.out(Easing.ease),
+        });
+    }, [pendingPercent]);
+    const fillStyle = useAnimatedStyle(() => ({ width: `${fill.value}%` }));
+    const pendingStyle = useAnimatedStyle(() => ({ width: `${pending.value}%` }));
+    return (React.createElement(React.Fragment, null,
+        pendingValue > 0 && (React.createElement(Animated.View, { testID: "progressindicator-pending", style: [styles.pending, { borderRadius: radius }, pendingStyle] })),
+        React.createElement(Animated.View, { testID: "progressindicator-fill", style: [styles.fill, { borderRadius: radius }, fillStyle] })));
+}
+/**
+ * File-private renderer for `variation="stepped"`. Renders `max` presentational
+ * segments, each classified filled / pending / empty. No accessibility props on
+ * the segments — the outer shell announces once.
+ */
+function ProgressIndicatorStepped({ value, max, pendingValue, size, }) {
+    const styles = useStyles();
+    const radius = sizeHeights[size] / 2;
+    const segmentCount = Math.max(0, Math.floor(max));
+    return (React.createElement(React.Fragment, null, Array.from({ length: segmentCount }).map((_, index) => {
+        const step = index + 1;
+        const isFilled = step <= value;
+        const isPending = !isFilled && step <= value + pendingValue;
+        return (React.createElement(View, { key: step, testID: isFilled
+                ? "progressindicator-step-filled"
+                : isPending
+                    ? "progressindicator-step-pending"
+                    : "progressindicator-step-empty", style: [
+                styles.segment,
+                { borderRadius: radius },
+                isFilled && styles.segmentFilled,
+                isPending && styles.segmentPending,
+            ] }));
+    })));
+}

package/dist/src/ProgressIndicator/ProgressIndicator.size.style.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+/**
+ * Bar heights per size. Matches the web `ProgressIndicator` ladder and today's
+ * mobile `ProgressBar` sizing.
+ */
+export const sizeHeights = {
+    smaller: 4,
+    small: 8,
+    base: 16,
+};
+export const sizeStyles = StyleSheet.create({
+    smaller: { height: sizeHeights.smaller },
+    small: { height: sizeHeights.small },
+    base: { height: sizeHeights.base },
+});

package/dist/src/ProgressIndicator/ProgressIndicator.style.js

@@ -0,0 +1,51 @@
+import { buildThemedStyles } from "../AtlantisThemeContext";
+/**
+ * ProgressIndicator
+ *
+ * Colour tokens mirror the web `ProgressIndicator`: the fill / filled segments
+ * use `color-interactive--subtle`; the track / empty segments use
+ * `color-surface--active`. The mobile-only pending band / pending segments use
+ * `color-informative`, carried forward from today's `ProgressBar` `inProgress`
+ * overlay.
+ *
+ * The bar height is set by the size style; the border radius is derived from
+ * that height at render time so the fill and segments stay pill-shaped at every
+ * size.
+ */
+export const useStyles = buildThemedStyles(tokens => ({
+    /* Continuous: the root IS the track; the fill / pending sit on top. */
+    continuous: {
+        width: "100%",
+        flexDirection: "row",
+        overflow: "hidden",
+        backgroundColor: tokens["color-surface--active"],
+    },
+    fill: {
+        height: "100%",
+        backgroundColor: tokens["color-interactive--subtle"],
+    },
+    pending: {
+        height: "100%",
+        position: "absolute",
+        left: 0,
+        top: 0,
+        backgroundColor: tokens["color-informative"],
+    },
+    /* Stepped: the root IS the flex row; segments are direct children. */
+    stepped: {
+        width: "100%",
+        flexDirection: "row",
+        gap: tokens["space-small"],
+    },
+    segment: {
+        flex: 1,
+        height: "100%",
+        backgroundColor: tokens["color-surface--active"],
+    },
+    segmentFilled: {
+        backgroundColor: tokens["color-interactive--subtle"],
+    },
+    segmentPending: {
+        backgroundColor: tokens["color-informative"],
+    },
+}));

package/dist/src/ProgressIndicator/ProgressIndicator.test.js

@@ -0,0 +1,138 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { ProgressIndicator } from ".";
+describe("ProgressIndicator", () => {
+    describe("public API", () => {
+        it("renders with role='progressbar'", () => {
+            render(React.createElement(ProgressIndicator, { value: 50 }));
+            expect(screen.getByRole("progressbar")).toBeTruthy();
+        });
+        it("sets accessibilityValue now/min/max", () => {
+            render(React.createElement(ProgressIndicator, { value: 50 }));
+            expect(screen.getByRole("progressbar").props.accessibilityValue).toEqual(expect.objectContaining({ now: 50, min: 0, max: 100 }));
+        });
+        it("uses max in accessibilityValue when provided", () => {
+            render(React.createElement(ProgressIndicator, { value: 3, max: 4 }));
+            expect(screen.getByRole("progressbar").props.accessibilityValue).toEqual(expect.objectContaining({ now: 3, max: 4 }));
+        });
+        it("renders a continuous fill by default", () => {
+            render(React.createElement(ProgressIndicator, { value: 50 }));
+            expect(screen.getByTestId("progressindicator-fill")).toBeTruthy();
+            expect(screen.queryByTestId("progressindicator-step-filled")).toBeNull();
+        });
+        it("applies style to the root", () => {
+            render(React.createElement(ProgressIndicator, { value: 50, style: { margin: 8 } }));
+            expect(screen.getByRole("progressbar").props.style).toEqual(expect.arrayContaining([expect.objectContaining({ margin: 8 })]));
+        });
+        it("rounds the continuous track so both ends are pill-shaped", () => {
+            render(React.createElement(ProgressIndicator, { value: 50, size: "base" }));
+            // base height is 16px, so the track radius is 8. Without this the
+            // unfilled (right) end of the track renders with square corners.
+            expect(screen.getByRole("progressbar").props.style).toEqual(expect.arrayContaining([expect.objectContaining({ borderRadius: 8 })]));
+        });
+        it("does not round the stepped root (segments carry their own radius)", () => {
+            render(React.createElement(ProgressIndicator, { value: 2, max: 5, variation: "stepped" }));
+            const rootStyles = screen
+                .getByRole("progressbar")
+                .props.style.filter(Boolean);
+            expect(rootStyles).not.toContainEqual(expect.objectContaining({ borderRadius: expect.anything() }));
+        });
+    });
+    describe("accessibility label", () => {
+        it("defaults to '{value}%' when max is omitted", () => {
+            render(React.createElement(ProgressIndicator, { value: 42 }));
+            expect(screen.getByLabelText("42%")).toBeTruthy();
+        });
+        it("defaults to '{value}%' when max === 100", () => {
+            render(React.createElement(ProgressIndicator, { value: 42, max: 100 }));
+            expect(screen.getByLabelText("42%")).toBeTruthy();
+        });
+        it("defaults to '{value} / {max}' when max !== 100", () => {
+            render(React.createElement(ProgressIndicator, { value: 3, max: 4 }));
+            expect(screen.getByLabelText("3 / 4")).toBeTruthy();
+        });
+        it("defaults to the pending template when pendingValue > 0", () => {
+            render(React.createElement(ProgressIndicator, { value: 2, pendingValue: 3, max: 10 }));
+            expect(screen.getByLabelText("2 of 10, 3 pending")).toBeTruthy();
+        });
+        it("uses a consumer-supplied accessibilityLabel when provided", () => {
+            render(React.createElement(ProgressIndicator, { value: 50, accessibilityLabel: "Uploading file" }));
+            expect(screen.getByLabelText("Uploading file")).toBeTruthy();
+        });
+    });
+    /**
+     * Native screen readers (VoiceOver / TalkBack) announce a progressbar from
+     * its `accessibilityRole` plus the resolved `accessibilityValue.text` /
+     * `accessibilityLabel`. These assertions lock that announced payload
+     * deterministically — the automatable proxy for the on-device smoke, which
+     * cannot capture live screen-reader speech in CI.
+     */
+    describe("screen reader announcement contract", () => {
+        it.each([
+            ["percent (max omitted)", { value: 50 }, "50%"],
+            ["ratio (max !== 100)", { value: 3, max: 4 }, "3 / 4"],
+            ["pending", { value: 2, pendingValue: 3, max: 10 }, "2 of 10, 3 pending"],
+            [
+                "custom label",
+                { value: 50, accessibilityLabel: "Uploading file" },
+                "Uploading file",
+            ],
+        ])("announces %s as a progressbar with the derived text", (_n, props, text) => {
+            render(React.createElement(ProgressIndicator, Object.assign({}, props)));
+            const root = screen.getByRole("progressbar");
+            expect(root.props.accessibilityRole).toBe("progressbar");
+            expect(root.props.accessibilityLabel).toBe(text);
+            expect(root.props.accessibilityValue).toEqual(expect.objectContaining({ text }));
+        });
+        it("carries the numeric value/min/max alongside the announced text", () => {
+            render(React.createElement(ProgressIndicator, { value: 3, max: 4 }));
+            expect(screen.getByRole("progressbar").props.accessibilityValue).toEqual({
+                min: 0,
+                max: 4,
+                now: 3,
+                text: "3 / 4",
+            });
+        });
+    });
+    describe("sizes", () => {
+        it.each([
+            ["smaller", 4],
+            ["small", 8],
+            ["base", 16],
+        ])("applies %s height (%dpx) to the root", (size, height) => {
+            render(React.createElement(ProgressIndicator, { value: 50, size: size }));
+            expect(screen.getByRole("progressbar").props.style).toEqual(expect.arrayContaining([expect.objectContaining({ height })]));
+        });
+    });
+    describe("pending overlay (continuous)", () => {
+        it("renders a pending band when pendingValue > 0", () => {
+            render(React.createElement(ProgressIndicator, { value: 2, pendingValue: 3, max: 10 }));
+            expect(screen.getByTestId("progressindicator-pending")).toBeTruthy();
+        });
+        it("renders no pending band when pendingValue is 0", () => {
+            render(React.createElement(ProgressIndicator, { value: 4, max: 10 }));
+            expect(screen.queryByTestId("progressindicator-pending")).toBeNull();
+        });
+    });
+    describe("stepped variation", () => {
+        it("renders max segments with the first value filled", () => {
+            render(React.createElement(ProgressIndicator, { value: 2, max: 5, variation: "stepped" }));
+            expect(screen.getAllByTestId("progressindicator-step-filled")).toHaveLength(2);
+            expect(screen.getAllByTestId("progressindicator-step-empty")).toHaveLength(3);
+        });
+        it("classifies filled, pending, and empty segments", () => {
+            render(React.createElement(ProgressIndicator, { value: 3, pendingValue: 2, max: 6, variation: "stepped" }));
+            expect(screen.getAllByTestId("progressindicator-step-filled")).toHaveLength(3);
+            expect(screen.getAllByTestId("progressindicator-step-pending")).toHaveLength(2);
+            expect(screen.getAllByTestId("progressindicator-step-empty")).toHaveLength(1);
+        });
+        it("keeps a single progressbar on the root and none on segments", () => {
+            render(React.createElement(ProgressIndicator, { value: 2, max: 5, variation: "stepped" }));
+            expect(screen.getAllByRole("progressbar")).toHaveLength(1);
+            screen.getAllByTestId(/progressindicator-step-/).forEach(segment => {
+                expect(segment.props.accessibilityRole).toBeUndefined();
+                expect(segment.props.accessibilityValue).toBeUndefined();
+            });
+        });
+    });
+});

package/dist/src/ProgressIndicator/index.js

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

package/dist/src/ProgressIndicator/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/hooks/useAtlantisI18n/locales/en.json

@@ -26,6 +26,9 @@
     "networkUnavailableDescription": "Check your internet connection and try again later.",
     "ProgressBar.complete": "{current} of {total} complete",
     "ProgressBar.inProgress": "{current} of {total} complete, {inProgress} in progress",
+    "ProgressIndicator.ariaLabelPercent": "{value}%",
+    "ProgressIndicator.ariaLabelRatio": "{value} / {max}",
+    "ProgressIndicator.ariaLabelPending": "{value} of {max}, {pendingValue} pending",
     "save": "Save",
     "Select.a11yHint": "Select to open the picker",
     "Select.emptyValue": "Select an option",

package/dist/src/hooks/useAtlantisI18n/locales/es.json

@@ -26,6 +26,9 @@
     "networkUnavailableDescription": "Compruebe su conexión a Internet e inténtelo de nuevo más adelante.",
     "ProgressBar.complete": "{current} de {total} completo",
     "ProgressBar.inProgress": "{current} de {total} completo, {inProgress} en progreso",
+    "ProgressIndicator.ariaLabelPercent": "{value}%",
+    "ProgressIndicator.ariaLabelRatio": "{value} / {max}",
+    "ProgressIndicator.ariaLabelPending": "{value} de {max}, {pendingValue} pendiente",
     "save": "Guardar",
     "Select.a11yHint": "Seleccionar para abrir el selector",
     "Select.emptyValue": "Seleccione una opción",

package/dist/src/index.js

@@ -37,6 +37,7 @@ export * from "./InputSearch";
 export * from "./InputText";
 export * from "./InputTime";
 export * from "./ProgressBar";
+export * from "./ProgressIndicator";
 export * from "./Select";
 export * from "./StatusLabel";
 export * from "./Switch";

package/dist/src/utils/meta/meta.json

@@ -59,6 +59,7 @@
         "InputTime",
         "Option",
         "ProgressBar",
+        "ProgressIndicator",
         "Select",
         "Select.Content",
         "Select.Group",