@zag-js/progress - npm Package Compare versions

Comparing version 0.0.0-dev-20240530150754 to 0.0.0-dev-20240530212228

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,connect:()=>connect,machine:()=>machine,props:()=>props,splitProps:()=>splitProps});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("progress").parts("root","label","track","range","valueText","view","circle","circleTrack","circleRange");var parts=anatomy.build();var import_dom_query=require("@zag-js/dom-query");var dom=(0,import_dom_query.createScope)({getRootId:ctx=>ctx.ids?.root??`progress-${ctx.id}`,getTrackId:ctx=>ctx.ids?.track??`progress-${ctx.id}-track`,getLabelId:ctx=>ctx.ids?.label??`progress-${ctx.id}-label`,getCircleId:ctx=>ctx.ids?.circle??`progress-${ctx.id}-circle`});function connect(state,send,normalize){const percent=state.context.percent;const max=state.context.max;const min=state.context.min;const orientation=state.context.orientation;const translations=state.context.translations;const indeterminate=state.context.isIndeterminate;const value=state.context.value;const valueAsString=translations.value({value,max,percent,min});const progressState=getProgressState(value,max);const progressbarProps={role:"progressbar","aria-label":valueAsString,"data-max":max,"aria-valuemin":min,"aria-valuemax":max,"aria-valuenow":value??void 0,"data-orientation":orientation,"data-state":progressState};const circleProps=getCircleProps(state.context);return{value,valueAsString,setValue(value2){send({type:"VALUE.SET",value:value2})},setToMax(){send({type:"VALUE.SET",value:max})},rootProps:normalize.element({dir:state.context.dir,...parts.root.attrs,id:dom.getRootId(state.context),"data-max":max,"data-value":value??void 0,"data-state":progressState,"data-orientation":orientation,style:{"--percent":indeterminate?void 0:percent}}),labelProps:normalize.element({dir:state.context.dir,id:dom.getLabelId(state.context),...parts.label.attrs,"data-orientation":orientation}),valueTextProps:normalize.element({dir:state.context.dir,"aria-live":"polite",...parts.valueText.attrs}),trackProps:normalize.element({dir:state.context.dir,id:dom.getTrackId(state.context),...parts.track.attrs,...progressbarProps}),rangeProps:normalize.element({dir:state.context.dir,...parts.range.attrs,"data-orientation":orientation,"data-state":progressState,style:{[state.context.isHorizontal?"width":"height"]:indeterminate?void 0:`${percent}%`}}),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}),getViewProps(props2){return normalize.element({dir:state.context.dir,...parts.view.attrs,"data-state":props2.state,hidden:props2.state!==progressState})}}}function getProgressState(value,maxValue){return value==null?"indeterminate":value===maxValue?"complete":"loading"}function getCircleProps(ctx){const circleProps={style:{"--radius":"calc(var(--size) / 2 - var(--thickness) / 2)",cx:"calc(var(--size) / 2)",cy:"calc(var(--size) / 2)",r:"var(--radius)",fill:"transparent",strokeWidth:"var(--thickness)"}};return{root:{viewBox:"0 0 var(--size) var(--size)",style:{width:"var(--size)",height:"var(--size)"}},track:circleProps,range:{style:{...circleProps.style,"--percent":ctx.percent,"--circumference":`calc(2 * 3.14159 * var(--radius))`,"--offset":`calc(var(--circumference) * (100 - var(--percent)) / 100}))`,strokeDashoffset:`calc(var(--circumference) * ((100 - var(--percent)) / 100))`,strokeDasharray:ctx.isIndeterminate?void 0:`var(--circumference)`,transformOrigin:"center",transform:"rotate(-90deg)"}}}}var import_core=require("@zag-js/core");var import_utils=require("@zag-js/utils");function midValue(min,max){return min+(max-min)/2}function machine(userContext){const ctx=(0,import_utils.compact)(userContext);return(0,import_core.createMachine)({id:"progress",initial:"idle",context:{max:ctx.max??100,min:ctx.min??0,value:midValue(ctx.min??0,ctx.max??100),orientation:"horizontal",translations:{value:({percent})=>percent===-1?"loading...":`${percent} percent`,...ctx.translations},...ctx},created:["validateContext"],computed:{isIndeterminate:ctx2=>ctx2.value===null,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,isHorizontal:ctx2=>ctx2.orientation==="horizontal",isRtl:ctx2=>ctx2.dir==="rtl"},states:{idle:{on:{"VALUE.SET":{actions:["setValue"]}}}}},{actions:{setValue:(ctx2,evt)=>{ctx2.value=evt.value===null?null:Math.max(0,Math.min(evt.value,ctx2.max))},validateContext:ctx2=>{if(ctx2.value==null)return;if(!isValidNumber(ctx2.max)){throw new Error(`[progress] The max value passed \`${ctx2.max}\` is not a valid number`)}if(!isValidMax(ctx2.value,ctx2.max)){throw new Error(`[progress] The value passed \`${ctx2.value}\` exceeds the max value \`${ctx2.max}\``)}if(!isValidMin(ctx2.value,ctx2.min)){throw new Error(`[progress] The value passed \`${ctx2.value}\` exceeds the min value \`${ctx2.min}\``)}}}})}function isValidNumber(max){return(0,import_utils.isNumber)(max)&&!isNaN(max)}function isValidMax(value,max){return isValidNumber(value)&&value<=max}function isValidMin(value,min){return isValidNumber(value)&&value>=min}var import_types=require("@zag-js/types");var import_utils2=require("@zag-js/utils");var props=(0,import_types.createProps)()(["dir","getRootNode","id","ids","max","min","orientation","translations","value"]);var splitProps=(0,import_utils2.createSplitProps)(props);0&&(module.exports={anatomy,connect,machine,props,splitProps});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,connect:()=>connect,machine:()=>machine,props:()=>props,splitProps:()=>splitProps});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("progress").parts("root","label","track","range","valueText","view","circle","circleTrack","circleRange");var parts=anatomy.build();var import_dom_query=require("@zag-js/dom-query");var dom=(0,import_dom_query.createScope)({getRootId:ctx=>ctx.ids?.root??`progress-${ctx.id}`,getTrackId:ctx=>ctx.ids?.track??`progress-${ctx.id}-track`,getLabelId:ctx=>ctx.ids?.label??`progress-${ctx.id}-label`,getCircleId:ctx=>ctx.ids?.circle??`progress-${ctx.id}-circle`});function connect(state,send,normalize){const percent=state.context.percent;const max=state.context.max;const min=state.context.min;const orientation=state.context.orientation;const translations=state.context.translations;const indeterminate=state.context.isIndeterminate;const value=state.context.value;const valueAsString=translations.value({value,max,percent,min});const progressState=getProgressState(value,max);const progressbarProps={role:"progressbar","aria-label":valueAsString,"data-max":max,"aria-valuemin":min,"aria-valuemax":max,"aria-valuenow":value??void 0,"data-orientation":orientation,"data-state":progressState};const circleProps=getCircleProps(state.context);return{value,valueAsString,setValue(value2){send({type:"VALUE.SET",value:value2})},setToMax(){send({type:"VALUE.SET",value:max})},rootProps:normalize.element({dir:state.context.dir,...parts.root.attrs,id:dom.getRootId(state.context),"data-max":max,"data-value":value??void 0,"data-state":progressState,"data-orientation":orientation,style:{"--percent":indeterminate?void 0:percent}}),labelProps:normalize.element({dir:state.context.dir,id:dom.getLabelId(state.context),...parts.label.attrs,"data-orientation":orientation}),valueTextProps:normalize.element({dir:state.context.dir,"aria-live":"polite",...parts.valueText.attrs}),trackProps:normalize.element({dir:state.context.dir,id:dom.getTrackId(state.context),...parts.track.attrs,...progressbarProps}),rangeProps:normalize.element({dir:state.context.dir,...parts.range.attrs,"data-orientation":orientation,"data-state":progressState,style:{[state.context.isHorizontal?"width":"height"]:indeterminate?void 0:`${percent}%`}}),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}),getViewProps(props2){return normalize.element({dir:state.context.dir,...parts.view.attrs,"data-state":props2.state,hidden:props2.state!==progressState})}}}function getProgressState(value,maxValue){return value==null?"indeterminate":value===maxValue?"complete":"loading"}function getCircleProps(ctx){const circleProps={style:{"--radius":"calc(var(--size) / 2 - var(--thickness) / 2)",cx:"calc(var(--size) / 2)",cy:"calc(var(--size) / 2)",r:"var(--radius)",fill:"transparent",strokeWidth:"var(--thickness)"}};return{root:{viewBox:"0 0 var(--size) var(--size)",style:{width:"var(--size)",height:"var(--size)"}},track:circleProps,range:{opacity:ctx.value===0?0:void 0,style:{...circleProps.style,"--percent":ctx.percent,"--circumference":`calc(2 * 3.14159 * var(--radius))`,"--offset":`calc(var(--circumference) * (100 - var(--percent)) / 100}))`,strokeDashoffset:`calc(var(--circumference) * ((100 - var(--percent)) / 100))`,strokeDasharray:ctx.isIndeterminate?void 0:`var(--circumference)`,transformOrigin:"center",transform:"rotate(-90deg)"}}}}var import_core=require("@zag-js/core");var import_utils=require("@zag-js/utils");function midValue(min,max){return min+(max-min)/2}function machine(userContext){const ctx=(0,import_utils.compact)(userContext);return(0,import_core.createMachine)({id:"progress",initial:"idle",context:{max:ctx.max??100,min:ctx.min??0,value:midValue(ctx.min??0,ctx.max??100),orientation:"horizontal",translations:{value:({percent})=>percent===-1?"loading...":`${percent} percent`,...ctx.translations},...ctx},created:["validateContext"],computed:{isIndeterminate:ctx2=>ctx2.value===null,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,isHorizontal:ctx2=>ctx2.orientation==="horizontal",isRtl:ctx2=>ctx2.dir==="rtl"},states:{idle:{on:{"VALUE.SET":{actions:["setValue"]}}}}},{actions:{setValue:(ctx2,evt)=>{ctx2.value=evt.value===null?null:Math.max(0,Math.min(evt.value,ctx2.max))},validateContext:ctx2=>{if(ctx2.value==null)return;if(!isValidNumber(ctx2.max)){throw new Error(`[progress] The max value passed \`${ctx2.max}\` is not a valid number`)}if(!isValidMax(ctx2.value,ctx2.max)){throw new Error(`[progress] The value passed \`${ctx2.value}\` exceeds the max value \`${ctx2.max}\``)}if(!isValidMin(ctx2.value,ctx2.min)){throw new Error(`[progress] The value passed \`${ctx2.value}\` exceeds the min value \`${ctx2.min}\``)}}}})}function isValidNumber(max){return(0,import_utils.isNumber)(max)&&!isNaN(max)}function isValidMax(value,max){return isValidNumber(value)&&value<=max}function isValidMin(value,min){return isValidNumber(value)&&value>=min}var import_types=require("@zag-js/types");var import_utils2=require("@zag-js/utils");var props=(0,import_types.createProps)()(["dir","getRootNode","id","ids","max","min","orientation","translations","value"]);var splitProps=(0,import_utils2.createSplitProps)(props);0&&(module.exports={anatomy,connect,machine,props,splitProps});
 //# sourceMappingURL=index.js.map

package.json

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

src/progress.connect.ts

@@ -143,2 +143,3 @@ import type { NormalizeProps, PropTypes } from "@zag-js/types"
     range: {
+      opacity: ctx.value === 0 ? 0 : undefined,
       style: {
@@ -145,0 +146,0 @@ ...circleProps.style,

No alert changes

Improved metrics

Total package byte prevSize

61278

0.44%

Lines of code

556

0.36%

Dependency changes

• + Added

  @zag-js/anatomy@0.0.0-dev-20240530212228
  (transitive)

• + Added

  @zag-js/core@0.0.0-dev-20240530212228
  (transitive)

• + Added

  @zag-js/dom-query@0.0.0-dev-20240530212228
  (transitive)

• + Added

  @zag-js/store@0.0.0-dev-20240530212228
  (transitive)

• + Added

  @zag-js/types@0.0.0-dev-20240530212228
  (transitive)

• + Added

  @zag-js/utils@0.0.0-dev-20240530212228
  (transitive)

• - Removed

  @zag-js/anatomy@0.0.0-dev-20240530150754
  (transitive)

• - Removed

  @zag-js/core@0.0.0-dev-20240530150754
  (transitive)

• - Removed

  @zag-js/dom-query@0.0.0-dev-20240530150754
  (transitive)

• - Removed

  @zag-js/store@0.0.0-dev-20240530150754
  (transitive)

• - Removed

  @zag-js/types@0.0.0-dev-20240530150754
  (transitive)

• - Removed

  @zag-js/utils@0.0.0-dev-20240530150754
  (transitive)

• Updated

  @zag-js/anatomy@0.0.0-dev-20240530212228

• Updated

  @zag-js/core@0.0.0-dev-20240530212228

• Updated

  @zag-js/dom-query@0.0.0-dev-20240530212228

• Updated

  @zag-js/types@0.0.0-dev-20240530212228

• Updated

  @zag-js/utils@0.0.0-dev-20240530212228