@zag-js/progress - npm Package Compare versions

Comparing version 0.31.1 to 0.32.0

dist/index.d.ts

 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, DirectionProperty, CommonProperties, OrientationProperty, PropTypes, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, OrientationProperty, Context, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
@@ -12,2 +12,3 @@ import { StateMachine } from '@zag-js/core';
     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.
@@ -103,2 +108,2 @@ */
 
-export { type UserDefinedContext as Context, anatomy, connect, machine };
+export { type MachineApi as Api, type UserDefinedContext as Context, type IndicatorProps, type IntlTranslations, type ValueLabelOptions, anatomy, connect, machine };

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,
@@ -159,5 +160,5 @@ "aria-valuenow": value ?? void 0,
     style: {
-      cx: "50",
-      cy: "50",
-      r: "42",
+      cx: "50px",
+      cy: "50px",
+      r: "42px",
       fill: "transparent",
@@ -179,3 +180,3 @@ strokeWidth: "var(--thickness)"
         ...circleProps.style,
-        strokeDashoffset: 66,
+        strokeDashoffset: "66px",
         strokeDasharray: determinant != null ? `${determinant} ${264 - determinant}` : void 0
@@ -199,2 +200,3 @@ }
         max: 100,
+        min: 0,
         orientation: "horizontal",
@@ -210,3 +212,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,
@@ -213,0 +219,0 @@ isHorizontal: (ctx2) => ctx2.orientation === "horizontal",

package.json

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

src/index.ts

 export { anatomy } from "./progress.anatomy"
 export { connect } from "./progress.connect"
 export { machine } from "./progress.machine"
-export type { UserDefinedContext as Context } from "./progress.types"
+export type {
+  MachineApi as Api,
+  UserDefinedContext as Context,
+  IndicatorProps,
+  IntlTranslations,
+  ValueLabelOptions,
+} from "./progress.types"

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,
@@ -127,5 +129,5 @@ "aria-valuenow": value ?? undefined,
     style: {
-      cx: "50",
-      cy: "50",
-      r: "42",
+      cx: "50px",
+      cy: "50px",
+      r: "42px",
       fill: "transparent",
@@ -147,3 +149,3 @@ strokeWidth: "var(--thickness)",
         ...circleProps.style,
-        strokeDashoffset: 66,
+        strokeDashoffset: "66px",
         strokeDasharray: determinant != null ? `${determinant} ${264 - determinant}` : undefined,
@@ -150,0 +152,0 @@ },

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,6 +16,7 @@ import type { StateMachine as S } from "@zag-js/core"
   max: number
+  min: number
   percent: number
 }
 
-interface IntlTranslations {
+export interface IntlTranslations {
   value(opts: ValueLabelOptions): string
@@ -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 @@ */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56876

increased by2.43%

Lines of code

905

increased by3.78%

Dependency changes

• + Added@zag-js/anatomy@0.32.0(transitive)

• + Added@zag-js/core@0.32.0(transitive)

• + Added@zag-js/dom-query@0.32.0(transitive)

• + Added@zag-js/store@0.32.0(transitive)

• + Added@zag-js/types@0.32.0(transitive)

• + Added@zag-js/utils@0.32.0(transitive)

• - Removed@zag-js/anatomy@0.31.1(transitive)

• - Removed@zag-js/core@0.31.1(transitive)

• - Removed@zag-js/dom-query@0.31.1(transitive)

• - Removed@zag-js/store@0.31.1(transitive)

• - Removed@zag-js/types@0.31.1(transitive)

• - Removed@zag-js/utils@0.31.1(transitive)

• Updated@zag-js/anatomy@0.32.0

• Updated@zag-js/core@0.32.0

• Updated@zag-js/dom-query@0.32.0

• Updated@zag-js/types@0.32.0

• Updated@zag-js/utils@0.32.0