@zag-js/progress - npm Package Compare versions

Comparing version 0.0.0-dev-20231130130815 to 0.0.0-dev-20231130202253

dist/index.d.ts

@@ -6,3 +6,3 @@ import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "track" | "range" | "valueText" | "indicator">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "track" | "range" | "valueText" | "indicator" | "circle" | "circleTrack" | "circleRange">;
 
@@ -54,2 +54,7 @@ type ProgressState = "indeterminate" | "loading" | "complete";
     isHorizontal: boolean;
+    /**
+     * @computed
+     * Whether the progress bar is in RTL mode.
+     */
+    isRtl: boolean;
 }>;
@@ -89,2 +94,5 @@ type UserDefinedContext = RequiredBy<PublicContext, "id">;
     getIndicatorProps(props: IndicatorProps): T["element"];
+    circleProps: T["svg"];
+    circleTrackProps: T["circle"];
+    circleRangeProps: T["circle"];
 }
@@ -91,0 +99,0 @@

dist/index.js

@@ -31,3 +31,13 @@ "use strict";
 var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("progress").parts("root", "label", "track", "range", "valueText", "indicator");
+var anatomy = (0, import_anatomy.createAnatomy)("progress").parts(
+  "root",
+  "label",
+  "track",
+  "range",
+  "valueText",
+  "indicator",
+  "circle",
+  "circleTrack",
+  "circleRange"
+);
 var parts = anatomy.build();
@@ -40,3 +50,4 @@
   getTrackId: (ctx) => `progress-${ctx.id}-track`,
-  getLabelId: (ctx) => `progress-${ctx.id}-label`
+  getLabelId: (ctx) => `progress-${ctx.id}-label`,
+  getCircleId: (ctx) => `progress-${ctx.id}-circle`
 });
@@ -54,2 +65,13 @@
   const progressState = getProgressState(value, max);
+  const progressbarProps = {
+    role: "progressbar",
+    "aria-label": translations.value({ value, max, percent }),
+    "data-max": max,
+    "aria-valuemin": 0,
+    "aria-valuemax": max,
+    "aria-valuenow": value ?? void 0,
+    "data-orientation": orientation,
+    "data-state": progressState
+  };
+  const circleProps = getCircleProps(state.context);
   return {
@@ -73,3 +95,3 @@ value,
       style: {
-        "--progress-percent": indeterminate ? void 0 : `${percent}%`
+        "--percent": indeterminate ? void 0 : percent
       }
@@ -83,14 +105,2 @@ }),
     }),
-    trackProps: normalize.element({
-      dir: state.context.dir,
-      ...parts.track.attrs,
-      id: dom.getTrackId(state.context),
-      role: "progressbar",
-      "aria-label": translations.value({ value, max, percent }),
-      "data-max": max,
-      "aria-valuemin": 0,
-      "aria-valuemax": max,
-      "aria-valuenow": value ?? void 0,
-      "data-orientation": orientation
-    }),
     valueTextProps: normalize.element({
@@ -101,2 +111,8 @@ dir: state.context.dir,
     }),
+    trackProps: normalize.element({
+      dir: state.context.dir,
+      id: dom.getTrackId(state.context),
+      ...parts.track.attrs,
+      ...progressbarProps
+    }),
     rangeProps: normalize.element({
@@ -111,2 +127,21 @@ dir: state.context.dir,
     }),
+    circleProps: normalize.element({
+      dir: state.context.dir,
+      id: dom.getCircleId(state.context),
+      ...parts.circle.attrs,
+      ...progressbarProps,
+      ...circleProps.root
+    }),
+    circleTrackProps: normalize.element({
+      dir: state.context.dir,
+      "data-orientation": orientation,
+      ...parts.circleTrack.attrs,
+      ...circleProps.track
+    }),
+    circleRangeProps: normalize.element({
+      dir: state.context.dir,
+      ...parts.circleRange.attrs,
+      ...circleProps.range,
+      "data-state": progressState
+    }),
     getIndicatorProps(props) {
@@ -125,2 +160,31 @@ return normalize.element({
 }
+function getCircleProps(ctx) {
+  const determinant = ctx.isIndeterminate ? void 0 : ctx.percent * 2.64;
+  const circleProps = {
+    style: {
+      cx: "50",
+      cy: "50",
+      r: "42",
+      fill: "transparent",
+      strokeWidth: "var(--thickness)"
+    }
+  };
+  return {
+    root: {
+      viewBox: "0 0 100 100",
+      style: {
+        width: "var(--size)",
+        height: "var(--size)"
+      }
+    },
+    track: circleProps,
+    range: {
+      style: {
+        ...circleProps.style,
+        strokeDashoffset: 66,
+        strokeDasharray: determinant != null ? `${determinant} ${264 - determinant}` : void 0
+      }
+    }
+  };
+}
 
@@ -151,3 +215,4 @@ // src/progress.machine.ts
         isAtMax: (ctx2) => ctx2.value === ctx2.max,
-        isHorizontal: (ctx2) => ctx2.orientation === "horizontal"
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        isRtl: (ctx2) => ctx2.dir === "rtl"
       },
@@ -154,0 +219,0 @@ states: {

package.json

 {
   "name": "@zag-js/progress",
-  "version": "0.0.0-dev-20231130130815",
+  "version": "0.0.0-dev-20231130202253",
   "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-20231130130815",
-    "@zag-js/core": "0.0.0-dev-20231130130815",
-    "@zag-js/dom-query": "0.0.0-dev-20231130130815",
-    "@zag-js/utils": "0.0.0-dev-20231130130815",
-    "@zag-js/types": "0.0.0-dev-20231130130815"
+    "@zag-js/anatomy": "0.0.0-dev-20231130202253",
+    "@zag-js/core": "0.0.0-dev-20231130202253",
+    "@zag-js/dom-query": "0.0.0-dev-20231130202253",
+    "@zag-js/utils": "0.0.0-dev-20231130202253",
+    "@zag-js/types": "0.0.0-dev-20231130202253"
   },
@@ -38,0 +38,0 @@ "devDependencies": {

src/progress.anatomy.ts

 import { createAnatomy } from "@zag-js/anatomy"
 
-export const anatomy = createAnatomy("progress").parts("root", "label", "track", "range", "valueText", "indicator")
+export const anatomy = createAnatomy("progress").parts(
+  "root",
+  "label",
+  "track",
+  "range",
+  "valueText",
+  "indicator",
+  "circle",
+  "circleTrack",
+  "circleRange",
+)
 
 export const parts = anatomy.build()

src/progress.connect.ts

 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./progress.anatomy"
-import type { MachineApi, ProgressState, Send, State } from "./progress.types"
 import { dom } from "./progress.dom"
+import type { MachineApi, MachineContext, ProgressState, Send, State } from "./progress.types"
 
@@ -17,2 +17,15 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
 
+  const progressbarProps = {
+    role: "progressbar",
+    "aria-label": translations.value({ value, max, percent }),
+    "data-max": max,
+    "aria-valuemin": 0,
+    "aria-valuemax": max,
+    "aria-valuenow": value ?? undefined,
+    "data-orientation": orientation,
+    "data-state": progressState,
+  }
+
+  const circleProps = getCircleProps(state.context)
+
   return {
@@ -37,3 +50,3 @@ value,
       style: {
-        "--progress-percent": indeterminate ? undefined : `${percent}%`,
+        "--percent": indeterminate ? undefined : percent,
       },
@@ -49,15 +62,2 @@ }),
 
-    trackProps: normalize.element({
-      dir: state.context.dir,
-      ...parts.track.attrs,
-      id: dom.getTrackId(state.context),
-      role: "progressbar",
-      "aria-label": translations.value({ value, max, percent }),
-      "data-max": max,
-      "aria-valuemin": 0,
-      "aria-valuemax": max,
-      "aria-valuenow": value ?? undefined,
-      "data-orientation": orientation,
-    }),
-
     valueTextProps: normalize.element({
@@ -69,2 +69,9 @@ dir: state.context.dir,
 
+    trackProps: normalize.element({
+      dir: state.context.dir,
+      id: dom.getTrackId(state.context),
+      ...parts.track.attrs,
+      ...progressbarProps,
+    }),
+
     rangeProps: normalize.element({
@@ -80,2 +87,24 @@ dir: state.context.dir,
 
+    circleProps: normalize.element({
+      dir: state.context.dir,
+      id: dom.getCircleId(state.context),
+      ...parts.circle.attrs,
+      ...progressbarProps,
+      ...circleProps.root,
+    }),
+
+    circleTrackProps: normalize.element({
+      dir: state.context.dir,
+      "data-orientation": orientation,
+      ...parts.circleTrack.attrs,
+      ...circleProps.track,
+    }),
+
+    circleRangeProps: normalize.element({
+      dir: state.context.dir,
+      ...parts.circleRange.attrs,
+      ...circleProps.range,
+      "data-state": progressState,
+    }),
+
     getIndicatorProps(props) {
@@ -95,1 +124,31 @@ return normalize.element({
 }
+
+function getCircleProps(ctx: MachineContext) {
+  const determinant = ctx.isIndeterminate ? undefined : ctx.percent * 2.64
+  const circleProps = {
+    style: {
+      cx: "50",
+      cy: "50",
+      r: "42",
+      fill: "transparent",
+      strokeWidth: "var(--thickness)",
+    },
+  }
+  return {
+    root: {
+      viewBox: "0 0 100 100",
+      style: {
+        width: "var(--size)",
+        height: "var(--size)",
+      },
+    },
+    track: circleProps,
+    range: {
+      style: {
+        ...circleProps.style,
+        strokeDashoffset: 66,
+        strokeDasharray: determinant != null ? `${determinant} ${264 - determinant}` : undefined,
+      },
+    },
+  }
+}

src/progress.dom.ts

@@ -8,2 +8,3 @@ import { createScope } from "@zag-js/dom-query"
   getLabelId: (ctx: Ctx) => `progress-${ctx.id}-label`,
+  getCircleId: (ctx: Ctx) => `progress-${ctx.id}-circle`,
 })

src/progress.machine.ts

@@ -27,2 +27,3 @@ import { createMachine } from "@zag-js/core"
         isHorizontal: (ctx) => ctx.orientation === "horizontal",
+        isRtl: (ctx) => ctx.dir === "rtl",
       },
@@ -29,0 +30,0 @@ states: {

src/progress.types.ts

@@ -61,2 +61,7 @@ import type { StateMachine as S } from "@zag-js/core"
   isHorizontal: boolean
+  /**
+   * @computed
+   * Whether the progress bar is in RTL mode.
+   */
+  isRtl: boolean
 }>
@@ -103,2 +108,5 @@
   getIndicatorProps(props: IndicatorProps): T["element"]
+  circleProps: T["svg"]
+  circleTrackProps: T["circle"]
+  circleRangeProps: T["circle"]
 }

No alert changes

Improved metrics

Total package byte prevSize

55634

increased by23.49%

Lines of code

872

increased by31.92%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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