@zag-js/progress - npm Package Compare versions

Comparing version 0.0.0-dev-20231218152907 to 0.0.0-dev-20231218181406

dist/index.d.ts

@@ -12,2 +12,3 @@ import * as _zag_js_anatomy from '@zag-js/anatomy';
     max: number;
+    min: number;
     percent: number;
@@ -24,2 +25,6 @@ }
     /**
+     * The minimum allowed value of the progress bar.
+     */
+    min: number;
+    /**
      * The maximum allowed value of the progress bar.
@@ -26,0 +31,0 @@ */

dist/index.js

@@ -57,2 +57,3 @@ "use strict";
   const max = state.context.max;
+  const min = state.context.min;
   const orientation = state.context.orientation;
@@ -62,9 +63,9 @@ const translations = state.context.translations;
   const value = state.context.value;
-  const valueAsString = translations.value({ value, max, percent });
+  const valueAsString = translations.value({ value, max, percent, min });
   const progressState = getProgressState(value, max);
   const progressbarProps = {
     role: "progressbar",
-    "aria-label": translations.value({ value, max, percent }),
+    "aria-label": valueAsString,
     "data-max": max,
-    "aria-valuemin": 0,
+    "aria-valuemin": min,
     "aria-valuemax": max,
@@ -197,2 +198,3 @@ "aria-valuenow": value ?? void 0,
         max: 100,
+        min: 0,
         orientation: "horizontal",
@@ -208,3 +210,7 @@ translations: {
         isIndeterminate: (ctx2) => ctx2.value === null,
-        percent: (ctx2) => (0, import_utils.isNumber)(ctx2.value) ? Math.round(ctx2.value / ctx2.max * 100) : -1,
+        percent(ctx2) {
+          if (!(0, import_utils.isNumber)(ctx2.value))
+            return -1;
+          return Math.round((ctx2.value - ctx2.min) / (ctx2.max - ctx2.min) * 100);
+        },
         isAtMax: (ctx2) => ctx2.value === ctx2.max,
@@ -211,0 +217,0 @@ isHorizontal: (ctx2) => ctx2.orientation === "horizontal",

package.json

 {
   "name": "@zag-js/progress",
-  "version": "0.0.0-dev-20231218152907",
+  "version": "0.0.0-dev-20231218181406",
   "description": "Core logic for the progress widget implemented as a state machine",
@@ -31,7 +31,7 @@ "keywords": [
   "dependencies": {
-    "@zag-js/anatomy": "0.0.0-dev-20231218152907",
-    "@zag-js/core": "0.0.0-dev-20231218152907",
-    "@zag-js/dom-query": "0.0.0-dev-20231218152907",
-    "@zag-js/utils": "0.0.0-dev-20231218152907",
-    "@zag-js/types": "0.0.0-dev-20231218152907"
+    "@zag-js/anatomy": "0.0.0-dev-20231218181406",
+    "@zag-js/core": "0.0.0-dev-20231218181406",
+    "@zag-js/dom-query": "0.0.0-dev-20231218181406",
+    "@zag-js/utils": "0.0.0-dev-20231218181406",
+    "@zag-js/types": "0.0.0-dev-20231218181406"
   },
@@ -38,0 +38,0 @@ "devDependencies": {

src/progress.connect.ts

@@ -9,2 +9,4 @@ import type { NormalizeProps, PropTypes } from "@zag-js/types"
   const max = state.context.max
+  const min = state.context.min
+
   const orientation = state.context.orientation
@@ -15,3 +17,3 @@ const translations = state.context.translations
   const value = state.context.value
-  const valueAsString = translations.value({ value, max, percent })
+  const valueAsString = translations.value({ value, max, percent, min })
   const progressState = getProgressState(value, max)
@@ -21,5 +23,5 @@
     role: "progressbar",
-    "aria-label": translations.value({ value, max, percent }),
+    "aria-label": valueAsString,
     "data-max": max,
-    "aria-valuemin": 0,
+    "aria-valuemin": min,
     "aria-valuemax": max,
@@ -26,0 +28,0 @@ "aria-valuenow": value ?? undefined,

src/progress.machine.ts

@@ -14,2 +14,3 @@ import { createMachine } from "@zag-js/core"
         max: 100,
+        min: 0,
         orientation: "horizontal",
@@ -25,3 +26,6 @@ translations: {
         isIndeterminate: (ctx) => ctx.value === null,
-        percent: (ctx) => (isNumber(ctx.value) ? Math.round((ctx.value / ctx.max) * 100) : -1),
+        percent(ctx) {
+          if (!isNumber(ctx.value)) return -1
+          return Math.round(((ctx.value - ctx.min) / (ctx.max - ctx.min)) * 100)
+        },
         isAtMax: (ctx) => ctx.value === ctx.max,
@@ -28,0 +32,0 @@ isHorizontal: (ctx) => ctx.orientation === "horizontal",

src/progress.types.ts

@@ -16,2 +16,3 @@ import type { StateMachine as S } from "@zag-js/core"
   max: number
+  min: number
   percent: number
@@ -30,2 +31,6 @@ }
   /**
+   * The minimum allowed value of the progress bar.
+   */
+  min: number
+  /**
    * The maximum allowed value of the progress bar.
@@ -32,0 +37,0 @@ */

No alert changes

Improved metrics

Total package byte prevSize

56984

increased by1.66%

Lines of code

905

increased by3.08%

Dependency changes

• + Added@zag-js/anatomy@0.0.0-dev-20231218181406(transitive)

• + Added@zag-js/core@0.0.0-dev-20231218181406(transitive)

• + Added@zag-js/dom-query@0.0.0-dev-20231218181406(transitive)

• + Added@zag-js/store@0.0.0-dev-20231218181406(transitive)

• + Added@zag-js/types@0.0.0-dev-20231218181406(transitive)

• + Added@zag-js/utils@0.0.0-dev-20231218181406(transitive)

• - Removed@zag-js/anatomy@0.0.0-dev-20231218152907(transitive)

• - Removed@zag-js/core@0.0.0-dev-20231218152907(transitive)

• - Removed@zag-js/dom-query@0.0.0-dev-20231218152907(transitive)

• - Removed@zag-js/store@0.0.0-dev-20231218152907(transitive)

• - Removed@zag-js/types@0.0.0-dev-20231218152907(transitive)

• - Removed@zag-js/utils@0.0.0-dev-20231218152907(transitive)

• Updated@zag-js/anatomy@0.0.0-dev-20231218181406

• Updated@zag-js/core@0.0.0-dev-20231218181406

• Updated@zag-js/dom-query@0.0.0-dev-20231218181406

• Updated@zag-js/types@0.0.0-dev-20231218181406

• Updated@zag-js/utils@0.0.0-dev-20231218181406