@kodiak-ui/progress
Advanced tools
Comparing version 0.1.6 to 0.1.7
@@ -1,2 +0,2 @@ | ||
import{createElement as a}from"react";import{Box as r}from"@kodiak-ui/primitives";import{useMeasure as i}from"@kodiak-ui/hooks";function e(i){var e=i.value,t=i.min;void 0===t&&(t=0);var n=i.max;void 0===n&&(n=100);var o=i.containerVariant;void 0===o&&(o="container");var v=i.barVariant;void 0===v&&(v="bar");var s=i.children,l=function(a,r){var i={};for(var e in a)Object.prototype.hasOwnProperty.call(a,e)&&-1===r.indexOf(e)&&(i[e]=a[e]);return i}(i,["value","min","max","containerVariant","barVariant","children"]),u=100*(e-t)/(n-t);return a(r,Object.assign({__base:{bg:"muted",borderRadius:"default",height:"12px"},variant:o,variantKey:"progresses"},l),a(r,{__base:{bg:"primary",height:"100%",transition:"all 0.2s ease-in-out 0s",position:"relative",width:(u>100?100:u<0?0:u)+"%"},role:"progressbar","aria-valuenow":e,"aria-valuemin":t,"aria-valuemax":n,variant:v,variantKey:"progresses"},s))}function t(e){var t=e.value,n=e.min,o=e.max,v=e.variant;void 0===v&&(v="thumb");var s=e.variantKey;void 0===s&&(s="progresses");var l=e.children,u=function(a,r){var i={};for(var e in a)Object.prototype.hasOwnProperty.call(a,e)&&-1===r.indexOf(e)&&(i[e]=a[e]);return i}(e,["value","min","max","variant","variantKey","children"]),d=i();return a(r,Object.assign({},d[0],{__base:{bg:"white",border:"1px solid",borderColor:"muted",borderRadius:"default",left:n&&t<=n?0:o&&t>=o?"auto":"calc(100% - "+d[1].width/2+"px)",lineHeight:1,p:2,position:"absolute",right:o&&t>=o?"0":"auto",top:"50%",transform:"translateY(-50%)"},variant:v,variantKey:s},u),l||t)}export{e as Progress,t as ProgressThumb}; | ||
import{createElement as r}from"react";import{Box as a}from"@kodiak-ui/primitives";import{useMeasure as i}from"@kodiak-ui/hooks";function e(i){var e=i.value,t=i.min;void 0===t&&(t=0);var o=i.max;void 0===o&&(o=100);var n=i.color;void 0===n&&(n="primary");var s=i.containerVariant;void 0===s&&(s="container");var v=i.barVariant;void 0===v&&(v="bar");var l=i.children,d=i.progressSx,u=function(r,a){var i={};for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&-1===a.indexOf(e)&&(i[e]=r[e]);return i}(i,["value","min","max","color","containerVariant","barVariant","children","progressSx"]),p=100*(e-t)/(o-t);return r(a,Object.assign({__base:{bg:"muted",borderRadius:"default",height:"12px"},variant:s,variantKey:"progresses"},u),r(a,{__base:{bg:n,height:"100%",transition:"all 0.2s ease-in-out 0s",position:"relative",width:(p>100?100:p<0?0:p)+"%"},role:"progressbar","aria-valuenow":e,"aria-valuemin":t,"aria-valuemax":o,variant:v,variantKey:"progresses",sx:d},l))}function t(e){var t=e.value,o=e.min,n=e.max,s=e.variant;void 0===s&&(s="thumb");var v=e.variantKey;void 0===v&&(v="progresses");var l=e.children,d=function(r,a){var i={};for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&-1===a.indexOf(e)&&(i[e]=r[e]);return i}(e,["value","min","max","variant","variantKey","children"]),u=i();return r(a,Object.assign({},u[0],{__base:{bg:"white",border:"1px solid",borderColor:"muted",borderRadius:"default",left:o&&t<=o?0:n&&t>=n?"auto":"calc(100% - "+u[1].width/2+"px)",lineHeight:1,p:2,position:"absolute",right:n&&t>=n?"0":"auto",top:"50%",transform:"translateY(-50%)"},variant:s,variantKey:v},d),l||t)}export{e as Progress,t as ProgressThumb}; | ||
//# sourceMappingURL=index.es.js.map |
@@ -1,2 +0,2 @@ | ||
var r=require("react"),a=require("@kodiak-ui/primitives"),e=require("@kodiak-ui/hooks");exports.Progress=function(e){var i=e.value,t=e.min;void 0===t&&(t=0);var n=e.max;void 0===n&&(n=100);var o=e.containerVariant;void 0===o&&(o="container");var s=e.barVariant;void 0===s&&(s="bar");var v=e.children,u=function(r,a){var e={};for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&-1===a.indexOf(i)&&(e[i]=r[i]);return e}(e,["value","min","max","containerVariant","barVariant","children"]),l=100*(i-t)/(n-t);return r.createElement(a.Box,Object.assign({__base:{bg:"muted",borderRadius:"default",height:"12px"},variant:o,variantKey:"progresses"},u),r.createElement(a.Box,{__base:{bg:"primary",height:"100%",transition:"all 0.2s ease-in-out 0s",position:"relative",width:(l>100?100:l<0?0:l)+"%"},role:"progressbar","aria-valuenow":i,"aria-valuemin":t,"aria-valuemax":n,variant:s,variantKey:"progresses"},v))},exports.ProgressThumb=function(i){var t=i.value,n=i.min,o=i.max,s=i.variant;void 0===s&&(s="thumb");var v=i.variantKey;void 0===v&&(v="progresses");var u=i.children,l=function(r,a){var e={};for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&-1===a.indexOf(i)&&(e[i]=r[i]);return e}(i,["value","min","max","variant","variantKey","children"]),d=e.useMeasure();return r.createElement(a.Box,Object.assign({},d[0],{__base:{bg:"white",border:"1px solid",borderColor:"muted",borderRadius:"default",left:n&&t<=n?0:o&&t>=o?"auto":"calc(100% - "+d[1].width/2+"px)",lineHeight:1,p:2,position:"absolute",right:o&&t>=o?"0":"auto",top:"50%",transform:"translateY(-50%)"},variant:s,variantKey:v},l),u||t)}; | ||
var r=require("react"),a=require("@kodiak-ui/primitives"),e=require("@kodiak-ui/hooks");exports.Progress=function(e){var i=e.value,t=e.min;void 0===t&&(t=0);var o=e.max;void 0===o&&(o=100);var n=e.color;void 0===n&&(n="primary");var s=e.containerVariant;void 0===s&&(s="container");var v=e.barVariant;void 0===v&&(v="bar");var u=e.children,l=e.progressSx,d=function(r,a){var e={};for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&-1===a.indexOf(i)&&(e[i]=r[i]);return e}(e,["value","min","max","color","containerVariant","barVariant","children","progressSx"]),c=100*(i-t)/(o-t);return r.createElement(a.Box,Object.assign({__base:{bg:"muted",borderRadius:"default",height:"12px"},variant:s,variantKey:"progresses"},d),r.createElement(a.Box,{__base:{bg:n,height:"100%",transition:"all 0.2s ease-in-out 0s",position:"relative",width:(c>100?100:c<0?0:c)+"%"},role:"progressbar","aria-valuenow":i,"aria-valuemin":t,"aria-valuemax":o,variant:v,variantKey:"progresses",sx:l},u))},exports.ProgressThumb=function(i){var t=i.value,o=i.min,n=i.max,s=i.variant;void 0===s&&(s="thumb");var v=i.variantKey;void 0===v&&(v="progresses");var u=i.children,l=function(r,a){var e={};for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&-1===a.indexOf(i)&&(e[i]=r[i]);return e}(i,["value","min","max","variant","variantKey","children"]),d=e.useMeasure();return r.createElement(a.Box,Object.assign({},d[0],{__base:{bg:"white",border:"1px solid",borderColor:"muted",borderRadius:"default",left:o&&t<=o?0:n&&t>=n?"auto":"calc(100% - "+d[1].width/2+"px)",lineHeight:1,p:2,position:"absolute",right:n&&t>=n?"0":"auto",top:"50%",transform:"translateY(-50%)"},variant:s,variantKey:v},l),u||t)}; | ||
//# sourceMappingURL=index.js.map |
@@ -7,2 +7,3 @@ import * as React from 'react'; | ||
max?: number; | ||
color?: string; | ||
containerVariant?: string; | ||
@@ -12,4 +13,5 @@ barVariant?: string; | ||
children?: React.ReactNode; | ||
progressSx?: SxStyleProp; | ||
}; | ||
export declare function Progress({ value, min, max, containerVariant, barVariant, children, ...props }: ProgressProps): JSX.Element; | ||
export declare function Progress({ value, min, max, color, containerVariant, barVariant, children, progressSx, ...props }: ProgressProps): JSX.Element; | ||
export {}; |
{ | ||
"name": "@kodiak-ui/progress", | ||
"version": "0.1.6", | ||
"version": "0.1.7", | ||
"description": "Kodiak UI's progress bar component", | ||
@@ -43,3 +43,3 @@ "keywords": [ | ||
}, | ||
"gitHead": "16d3940fec016c1b58cccfef3038448649f81c0e" | ||
"gitHead": "fd110172a3ec291b2eb598c8bcfe777312ae54ee" | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
14172
45