feat(progress): format options

Author: segunadebayo

.changeset/spotty-lines-return.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/progress": minor
+---
+
+Add support for `locale` and `formatOptions` to properly format the `api.percentAsString` result

.xstate/progress.js

@@ -21,6 +21,10 @@ const fetchMachine = createMachine({
       min,
       defaultValue: props.defaultValue ?? midValue(min, max),
       orientation: "horizontal",
+      formatOptions: {
+        style: "percent",
+        ...props.formatOptions
+      },
       translations: {
         value: ({
           percent

packages/machines/progress/src/progress.connect.ts

@@ -6,7 +6,7 @@ import type { ProgressApi, ProgressService, ProgressState } from "./progress.typ
 export function connect<T extends PropTypes>(service: ProgressService, normalize: NormalizeProps<T>): ProgressApi<T> {
   const { context, computed, prop, send, scope } = service
   const percent = computed("percent")
-  const percentAsString = computed("isIndeterminate") ? "" : `${percent}%`
+  const percentAsString = computed("isIndeterminate") ? "" : computed("formatter").format(computed("percent") / 100)
 
   const max = prop("max")
   const min = prop("min")

packages/machines/progress/src/progress.machine.ts

@@ -1,4 +1,4 @@
-import { createMachine } from "@zag-js/core"
+import { createMachine, memo } from "@zag-js/core"
 import { getValuePercent, isNumber } from "@zag-js/utils"
 import type { ProgressSchema } from "./progress.types"
 
@@ -12,6 +12,10 @@ export const machine = createMachine<ProgressSchema>({
       min,
       defaultValue: props.defaultValue ?? midValue(min, max),
       orientation: "horizontal",
+      formatOptions: {
+        style: "percent",
+        ...props.formatOptions,
+      },
       translations: {
         value: ({ percent }) => (percent === -1 ? "loading..." : `${percent} percent`),
         ...props.translations,
@@ -44,9 +48,11 @@ export const machine = createMachine<ProgressSchema>({
       if (!isNumber(value)) return -1
       return getValuePercent(value, prop("min"), prop("max")) * 100
     },
-    isAtMax: ({ context, prop }) => context.get("value") === prop("max"),
+    formatter: memo(
+      ({ prop }) => [prop("locale"), prop("formatOptions")],
+      (locale, formatOptions) => new Intl.NumberFormat(locale, formatOptions),
+    ),
     isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
-    isRtl: ({ prop }) => prop("dir") === "rtl",
   },
 
   states: {

packages/machines/progress/src/progress.types.ts

@@ -73,31 +73,25 @@ export interface ProgressProps extends DirectionProperty, CommonProperties, Orie
    * Callback fired when the value changes.
    */
   onValueChange?: ((details: ValueChangeDetails) => void) | undefined
+  /**
+   * The options to use for formatting the value.
+   * @default { style: "percent" }
+   */
+  formatOptions?: Intl.NumberFormatOptions | undefined
+  /**
+   * The locale to use for formatting the value.
+   * @default "en-US"
+   */
+  locale?: string | undefined
 }
 
-type PropsWithDefault = "orientation" | "translations" | "min" | "max"
+type PropsWithDefault = "orientation" | "translations" | "min" | "max" | "formatOptions"
 
 type Computed = Readonly<{
-  /**
-   * Whether the progress bar is indeterminate.
-   */
   isIndeterminate: boolean
-  /**
-   * The percentage of the progress bar's value.
-   */
   percent: number
-  /**
-   * Whether the progress bar is at its minimum value.
-   */
-  isAtMax: boolean
-  /**
-   *  Whether the progress bar is horizontal.
-   */
   isHorizontal: boolean
-  /**
-   * Whether the progress bar is in RTL mode.
-   */
-  isRtl: boolean
+  formatter: Intl.NumberFormat
 }>
 
 export interface ProgressSchema {