New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@zag-js/progress

Package Overview
Dependencies
Maintainers
1
Versions
384
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zag-js/progress - npm Package Compare versions

Comparing version 0.0.0-dev-20240603130555 to 0.0.0-dev-20240605193509

16

dist/index.d.ts

@@ -106,11 +106,11 @@ import * as _zag_js_anatomy from '@zag-js/anatomy';

setToMax(): void;
rootProps: T["element"];
labelProps: T["element"];
trackProps: T["element"];
valueTextProps: T["element"];
rangeProps: T["element"];
getRootProps(): T["element"];
getLabelProps(): T["element"];
getTrackProps(): T["element"];
getValueTextProps(): T["element"];
getRangeProps(): T["element"];
getViewProps(props: ViewProps): T["element"];
circleProps: T["svg"];
circleTrackProps: T["circle"];
circleRangeProps: T["circle"];
getCircleProps(): T["svg"];
getCircleTrackProps(): T["circle"];
getCircleRangeProps(): T["circle"];
}

@@ -117,0 +117,0 @@

@@ -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:{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});
"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})},getRootProps:()=>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}}),getLabelProps:()=>normalize.element({dir:state.context.dir,id:dom.getLabelId(state.context),...parts.label.attrs,"data-orientation":orientation}),getValueTextProps:()=>normalize.element({dir:state.context.dir,"aria-live":"polite",...parts.valueText.attrs}),getTrackProps:()=>normalize.element({dir:state.context.dir,id:dom.getTrackId(state.context),...parts.track.attrs,...progressbarProps}),getRangeProps:()=>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}%`}}),getCircleProps:()=>normalize.element({dir:state.context.dir,id:dom.getCircleId(state.context),...parts.circle.attrs,...progressbarProps,...circleProps.root}),getCircleTrackProps:()=>normalize.element({dir:state.context.dir,"data-orientation":orientation,...parts.circleTrack.attrs,...circleProps.track}),getCircleRangeProps:()=>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
{
"name": "@zag-js/progress",
"version": "0.0.0-dev-20240603130555",
"version": "0.0.0-dev-20240605193509",
"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-20240603130555",
"@zag-js/core": "0.0.0-dev-20240603130555",
"@zag-js/dom-query": "0.0.0-dev-20240603130555",
"@zag-js/utils": "0.0.0-dev-20240603130555",
"@zag-js/types": "0.0.0-dev-20240603130555"
"@zag-js/anatomy": "0.0.0-dev-20240605193509",
"@zag-js/core": "0.0.0-dev-20240605193509",
"@zag-js/dom-query": "0.0.0-dev-20240605193509",
"@zag-js/utils": "0.0.0-dev-20240605193509",
"@zag-js/types": "0.0.0-dev-20240605193509"
},

@@ -38,0 +38,0 @@ "devDependencies": {

@@ -42,66 +42,74 @@ import type { NormalizeProps, PropTypes } from "@zag-js/types"

rootProps: normalize.element({
dir: state.context.dir,
...parts.root.attrs,
id: dom.getRootId(state.context),
"data-max": max,
"data-value": value ?? undefined,
"data-state": progressState,
"data-orientation": orientation,
style: {
"--percent": indeterminate ? undefined : percent,
},
}),
getRootProps: () =>
normalize.element({
dir: state.context.dir,
...parts.root.attrs,
id: dom.getRootId(state.context),
"data-max": max,
"data-value": value ?? undefined,
"data-state": progressState,
"data-orientation": orientation,
style: {
"--percent": indeterminate ? undefined : percent,
},
}),
labelProps: normalize.element({
dir: state.context.dir,
id: dom.getLabelId(state.context),
...parts.label.attrs,
"data-orientation": orientation,
}),
getLabelProps: () =>
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,
}),
getValueTextProps: () =>
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,
}),
getTrackProps: () =>
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 ? undefined : `${percent}%`,
},
}),
getRangeProps: () =>
normalize.element({
dir: state.context.dir,
...parts.range.attrs,
"data-orientation": orientation,
"data-state": progressState,
style: {
[state.context.isHorizontal ? "width" : "height"]: indeterminate ? undefined : `${percent}%`,
},
}),
circleProps: normalize.element({
dir: state.context.dir,
id: dom.getCircleId(state.context),
...parts.circle.attrs,
...progressbarProps,
...circleProps.root,
}),
getCircleProps: () =>
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,
}),
getCircleTrackProps: () =>
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,
}),
getCircleRangeProps: () =>
normalize.element({
dir: state.context.dir,
...parts.circleRange.attrs,
...circleProps.range,
"data-state": progressState,
}),

@@ -108,0 +116,0 @@ getViewProps(props) {

@@ -132,11 +132,11 @@ import type { StateMachine as S } from "@zag-js/core"

setToMax(): void
rootProps: T["element"]
labelProps: T["element"]
trackProps: T["element"]
valueTextProps: T["element"]
rangeProps: T["element"]
getRootProps(): T["element"]
getLabelProps(): T["element"]
getTrackProps(): T["element"]
getValueTextProps(): T["element"]
getRangeProps(): T["element"]
getViewProps(props: ViewProps): T["element"]
circleProps: T["svg"]
circleTrackProps: T["circle"]
circleRangeProps: T["circle"]
getCircleProps(): T["svg"]
getCircleTrackProps(): T["circle"]
getCircleRangeProps(): T["circle"]
}

@@ -143,0 +143,0 @@

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc