@zag-js/progress
Advanced tools
Comparing version 0.0.0-dev-20240603130555 to 0.0.0-dev-20240605193509
@@ -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
62270
565
+ Added@zag-js/anatomy@0.0.0-dev-20240605193509(transitive)
+ Added@zag-js/core@0.0.0-dev-20240605193509(transitive)
+ Added@zag-js/dom-query@0.0.0-dev-20240605193509(transitive)
+ Added@zag-js/store@0.0.0-dev-20240605193509(transitive)
+ Added@zag-js/types@0.0.0-dev-20240605193509(transitive)
+ Added@zag-js/utils@0.0.0-dev-20240605193509(transitive)
- Removed@zag-js/anatomy@0.0.0-dev-20240603130555(transitive)
- Removed@zag-js/core@0.0.0-dev-20240603130555(transitive)
- Removed@zag-js/dom-query@0.0.0-dev-20240603130555(transitive)
- Removed@zag-js/store@0.0.0-dev-20240603130555(transitive)
- Removed@zag-js/types@0.0.0-dev-20240603130555(transitive)
- Removed@zag-js/utils@0.0.0-dev-20240603130555(transitive)