@worldresources/wri-design-systems 2.133.3 → 2.133.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +40 -5
- package/dist/index.esm.js +40 -5
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
@@ -837,6 +837,9 @@
|
|
837
837
|
|
838
838
|
${t?`\n --ty: -6px !important;\n\n .chakra-slider__markerIndicator {\n height: 16px;\n width: 4px;\n background-color: ${p("primary",700)} !important;\n }\n\n &[data-disabled] {\n .chakra-slider__markerIndicator {\n background-color: ${p("neutral",400)} !important;\n }\n }\n `:""};
|
839
839
|
`,Ne=r=>{const{value:n}=r;return t.jsx(e.For,{each:n,children:(r,n)=>t.jsxs(e.Slider.Thumb,{css:Pe,index:n,children:[t.jsx("div",{css:Be,className:"slider-value-preview",children:r}),t.jsx(e.Slider.HiddenInput,{})]},n)})},Fe=o.forwardRef(((r,n)=>{const{marks:o,isCentred:i}=r;return o?.length?t.jsx(e.Slider.MarkerGroup,{ref:n,children:o.map(((r,n)=>{const o="number"==typeof r?r:r.value,l="number"==typeof r?void 0:r.label,a=i&&1===n;return t.jsxs(e.Slider.Marker,{css:Oe(i,a),value:o,children:[t.jsx(e.Slider.MarkerIndicator,{}),t.jsx("p",{children:l})]},o)}))}):null})),Ae=o.forwardRef(((r,n)=>{const{marks:i,onValueChange:l,isCentred:a,value:s,...c}=r,[d,p]=o.useState(s||[0]);o.useEffect((()=>{p(s||[0])}),[s]);let u=i?.map((e=>"number"==typeof e?{value:e,label:void 0}:e));if(a){const e=c.min||0,t=c.max||100;u=[e,(e+t)/2,t].map((e=>({value:e,label:void 0})))}const x=!!u?.some((e=>e.label));return t.jsx(e.Slider.Root,{css:_e,ref:n,thumbAlignment:"center",onValueChange:e=>{p(e.value),l&&l(e)},origin:a?"center":"start",value:d,...c,children:t.jsxs(e.Slider.Control,{"data-has-mark-label":x||void 0,children:[t.jsx(e.Slider.Track,{css:He,children:t.jsx(e.Slider.Range,{css:ze})}),t.jsx(Ne,{value:d}),t.jsx(Fe,{marks:u,isCentred:a})]})})})),Ze=r.css`
|
840
|
+
--switch-height: 24px;
|
841
|
+
--switch-width: 40px;
|
842
|
+
|
840
843
|
.chakra-switch__control-container {
|
841
844
|
width: 42px;
|
842
845
|
height: 26px;
|
@@ -856,8 +859,6 @@
|
|
856
859
|
}
|
857
860
|
|
858
861
|
.chakra-switch__control {
|
859
|
-
height: 24px;
|
860
|
-
width: 40px;
|
861
862
|
display: flex;
|
862
863
|
align-items: center;
|
863
864
|
background-color: ${p("neutral",600)};
|
@@ -882,6 +883,10 @@
|
|
882
883
|
}
|
883
884
|
|
884
885
|
.chakra-switch__thumb {
|
886
|
+
height: 20px;
|
887
|
+
width: 20px;
|
888
|
+
translate: calc((var(--switch-width) - var(--switch-height)) / 8) 0;
|
889
|
+
|
885
890
|
svg {
|
886
891
|
width: 12px;
|
887
892
|
|
@@ -896,6 +901,15 @@
|
|
896
901
|
color-mix(in srgb, ${p("primary",500)} 20%, transparent);
|
897
902
|
}
|
898
903
|
|
904
|
+
&:is(
|
905
|
+
:checked,
|
906
|
+
[data-checked],
|
907
|
+
[aria-checked='true'],
|
908
|
+
[data-state='checked']
|
909
|
+
) {
|
910
|
+
translate: calc(var(--switch-width) + 2px - var(--switch-height)) 0;
|
911
|
+
}
|
912
|
+
|
899
913
|
&[data-active] {
|
900
914
|
outline: 9px solid
|
901
915
|
color-mix(in srgb, ${p("primary",500)} 40%, transparent);
|
@@ -3007,7 +3021,7 @@
|
|
3007
3021
|
border: 1px solid ${p("neutral",300)};
|
3008
3022
|
border-radius: 4px;
|
3009
3023
|
${l?`background: ${l};`:""}
|
3010
|
-
`)}):t.jsx("div",{css:Ar,children:e?.map(((e,r)=>t.jsx("div",{"data-test":`${e}-${n?.[r]}`,style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${n?.[r]}`)))}),t.jsx("div",{css:Zr,children:n?.map((e=>t.jsx("div",{style:{width:i?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:t.jsx("p",{css:Wr,children:e})},e)))}),o&&o.length?t.jsx("div",{css:Zr,children:o.map((e=>t.jsx("div",{style:{width:i?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:t.jsx("p",{css:Yr,style:{width:"100%"},children:e})},e)))}):null]});var l},exports.Select=Pt,exports.Sheet=({header:e,content:r,footer:n,open:i=!1,onClose:l,minimizedHeight:a=50,midHeight:s=200,maxFullHeight:c=1e3,defaultSnap:d="minimized"})=>{const[p,u]=o.useState(void 0),[x,h]=o.useState(void 0),g=o.useRef(null),f=o.useRef(null);o.useEffect((()=>{u(g?.current?.getBoundingClientRect()?.height),h(f?.current?.getBoundingClientRect()?.height)}),[e,n]);const b=o.useMemo((()=>{if("undefined"==typeof window)return 0;const e=document.createElement("div");e.style.cssText="position:fixed;bottom:0;height:env(safe-area-inset-bottom);",document.body.appendChild(e);const t=e.getBoundingClientRect().height||0;return document.body.removeChild(e),t}),[]),C=o.useMemo((()=>{const e=(()=>{if("undefined"!=typeof window){const e=.9*(window?.screen?.height||0);return e>c?c:e}return 0})(),t=Math.max(0,e-b);return c?Math.min(t,c):t}),[b,c]),m=o.useMemo((()=>({closed:18,minimized:Math.min(a,C),mid:Math.min(Math.max(a,s),C),fullHeight:C,full:C})),[a,s,C]),[v,w]=o.useState(d),[j,y]=o.useState(0);o.useEffect((()=>{if(i){const e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}}}),[i]),o.useEffect((()=>{i?y(m[v]):(y(0),w(d))}),[v,m,i]);const $=o.useRef(null),k=o.useRef(null),S=o.useRef(0),L=o.useRef(0),M=o.useRef(0),R=o.useRef(0),V=o.useRef(0),I=o.useRef(!1);return o.useEffect((()=>{const e=$.current;if(!e)return;const t=t=>{i&&(I.current=!0,e.setPointerCapture(t.pointerId),S.current=t.clientY,L.current=j,M.current=t.clientY,R.current=performance.now(),V.current=0,k.current&&(k.current.style.transition="none"))},r=e=>{if(!I.current)return;const t=e.clientY-S.current,r=Math.max(0,Math.min(C,L.current-t));y(r);const n=performance.now(),o=Math.max(1,n-R.current),i=(e.clientY-M.current)/(o/1e3);V.current=i,M.current=e.clientY,R.current=n},n=()=>{if(!I.current)return;I.current=!1,k.current&&(k.current.style.transition="height 300ms ease, transform 300ms ease");const e=V.current,t=j,{closed:r,minimized:n,mid:o,full:i}=m;if(e>900&&t<=o||t<=.6*n)return y(0),void window.setTimeout((()=>l&&l()),260);const a=[{k:"closed",v:r},{k:"minimized",v:n},{k:"mid",v:o},{k:"full",v:i}];let s=v;Math.abs(e)>900?s=e<0?t<(o+i)/2?"mid":"full":t>(n+o)/2?"mid":"minimized":(a.sort(((e,r)=>Math.abs(t-e.v)-Math.abs(t-r.v))),s=a[0].k),w(s);y("full"===s?i:"mid"===s?o:n)};return e.addEventListener("pointerdown",t),window.addEventListener("pointermove",r),window.addEventListener("pointerup",n),window.addEventListener("pointercancel",n),()=>{e.removeEventListener("pointerdown",t),window.removeEventListener("pointermove",r),window.removeEventListener("pointerup",n),window.removeEventListener("pointercancel",n)}}),[i,j,C,m,v]),o.useEffect((()=>{if(i){y(0);const e=window.setTimeout((()=>y(m[v])),10);return()=>window.clearTimeout(e)}y(0)}),[i,v,m]),t.jsx("div",{css:yo,"aria-hidden":!i,children:t.jsxs("div",{ref:k,role:"dialog","aria-modal":"true",css:$o,style:{height:`${j}px`,transform:i?"translateY(0)":"translateY(100%)"},children:[t.jsx("div",{ref:$,css:ko,role:"button","aria-label":"Drag to expand or collapse",tabIndex:0,children:t.jsx("span",{css:So})}),e?t.jsx("div",{css:Lo,ref:g,children:e}):null,t.jsx("div",{css:Mo(p,x),children:r}),n&&"full"===v?t.jsx("div",{css:Ro,ref:f,children:n}):null]})})},exports.Slider=Ae,exports.SliderInput=({label:e,caption:r,size:n="default",sliderItem:i,required:l,onChange:a})=>{const[s,c]=o.useState(i.value||[]),d=(e,t)=>{const r=e.target.value,n=[...s];let o=r?parseInt(r,10):r;const l=i.min||0,a=i.max||100;o=Number.isNaN(o)?l:o,o=o<l?l:o,o=o>a?a:o,n[t]=o,c(n)},p=(e,t)=>{const r=e.target.value||"0",n=[...s];let o=parseInt(r,10);const l=i.min||0,d=i.max||100;if(o=Number.isNaN(o)?l:o,o=o<l?l:o,o=o>d?d:o,2===s?.length){o=Number.isNaN(o)?l:o;const e=s[0],r=s[1];0===t?(o=o<l?l:o,o=o>r?r:o):1===t&&(o=o<e?e:o,o=o>d?d:o)}n[t]=o,c(n),a&&a(n)};return t.jsxs("div",{children:[t.jsxs("p",{css:Kt(n),"aria-label":e,children:[l?t.jsx("span",{children:"*"}):null,e]}),r?t.jsx("p",{css:Jt(n),"aria-label":r,children:r}):null,t.jsxs("div",{css:Qt,children:[i.step&&i.marks?t.jsx(Pt,{items:i.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"90px"},value:[`${s?.[0]}`],onChange:e=>{const t=e.map((e=>parseInt(e,10)));c(t),a&&a(t)}}):t.jsx(dt,{"aria-label":e,min:i.min,max:i.max,value:s?.[0],type:"number",onChange:e=>d(e,0),onBlur:e=>p(e,0),className:"opacity-control-text-input",onClick:e=>e.target.select()}),t.jsx(Ae,{css:{},...i,value:s,onValueChangeEnd:e=>{c(e.value),a&&a(e.value)}}),2===s?.length?t.jsx(dt,{"aria-label":e,min:i.min,max:i.max,value:s?.[1],type:"number",onChange:e=>d(e,1),onBlur:e=>p(e,1),className:"opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},exports.StepProgressIndicator=({steps:e,currentStep:n})=>t.jsxs("div",{css:_i,children:[e.map(((e,o)=>{return t.jsxs("div",{css:Pi,children:[t.jsx("button",{css:(i=n>=o+1,r.css`
|
3024
|
+
`)}):t.jsx("div",{css:Ar,children:e?.map(((e,r)=>t.jsx("div",{"data-test":`${e}-${n?.[r]}`,style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${n?.[r]}`)))}),t.jsx("div",{css:Zr,children:n?.map((e=>t.jsx("div",{style:{width:i?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:t.jsx("p",{css:Wr,children:e})},e)))}),o&&o.length?t.jsx("div",{css:Zr,children:o.map((e=>t.jsx("div",{style:{width:i?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:t.jsx("p",{css:Yr,style:{width:"100%"},children:e})},e)))}):null]});var l},exports.Select=Pt,exports.Sheet=({header:e,content:r,footer:n,open:i=!1,onClose:l,minimizedHeight:a=50,midHeight:s=200,maxFullHeight:c=1e3,defaultSnap:d="minimized"})=>{const[p,u]=o.useState(void 0),[x,h]=o.useState(void 0),g=o.useRef(null),f=o.useRef(null);o.useEffect((()=>{u(g?.current?.getBoundingClientRect()?.height),h(f?.current?.getBoundingClientRect()?.height)}),[e,n]);const b=o.useMemo((()=>{if("undefined"==typeof window)return 0;const e=document.createElement("div");e.style.cssText="position:fixed;bottom:0;height:env(safe-area-inset-bottom);",document.body.appendChild(e);const t=e.getBoundingClientRect().height||0;return document.body.removeChild(e),t}),[]),C=o.useMemo((()=>{const e=(()=>{if("undefined"!=typeof window){const e=.9*(window?.screen?.height||0);return e>c?c:e}return 0})(),t=Math.max(0,e-b);return c?Math.min(t,c):t}),[b,c]),m=o.useMemo((()=>({closed:18,minimized:Math.min(a,C),mid:Math.min(Math.max(a,s),C),fullHeight:C,full:C})),[a,s,C]),[v,w]=o.useState(d),[j,y]=o.useState(0);o.useEffect((()=>{if(i){const e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}}}),[i]),o.useEffect((()=>{i?y(m[v]):(y(0),w(d))}),[v,m,i]);const $=o.useRef(null),k=o.useRef(null),S=o.useRef(0),L=o.useRef(0),M=o.useRef(0),R=o.useRef(0),V=o.useRef(0),I=o.useRef(!1);return o.useEffect((()=>{const e=$.current;if(!e)return;const t=t=>{i&&(I.current=!0,e.setPointerCapture(t.pointerId),S.current=t.clientY,L.current=j,M.current=t.clientY,R.current=performance.now(),V.current=0,k.current&&(k.current.style.transition="none"))},r=e=>{if(!I.current)return;const t=e.clientY-S.current,r=Math.max(0,Math.min(C,L.current-t));y(r);const n=performance.now(),o=Math.max(1,n-R.current),i=(e.clientY-M.current)/(o/1e3);V.current=i,M.current=e.clientY,R.current=n},n=()=>{if(!I.current)return;I.current=!1,k.current&&(k.current.style.transition="height 300ms ease, transform 300ms ease");const e=V.current,t=j,{closed:r,minimized:n,mid:o,full:i}=m;if(e>900&&t<=o||t<=.6*n)return y(0),void window.setTimeout((()=>l&&l()),260);const a=[{k:"closed",v:r},{k:"minimized",v:n},{k:"mid",v:o},{k:"full",v:i}];let s=v;Math.abs(e)>900?s=e<0?t<(o+i)/2?"mid":"full":t>(n+o)/2?"mid":"minimized":(a.sort(((e,r)=>Math.abs(t-e.v)-Math.abs(t-r.v))),s=a[0].k),w(s);y("full"===s?i:"mid"===s?o:n)};return e.addEventListener("pointerdown",t),window.addEventListener("pointermove",r),window.addEventListener("pointerup",n),window.addEventListener("pointercancel",n),()=>{e.removeEventListener("pointerdown",t),window.removeEventListener("pointermove",r),window.removeEventListener("pointerup",n),window.removeEventListener("pointercancel",n)}}),[i,j,C,m,v]),o.useEffect((()=>{if(i){y(0);const e=window.setTimeout((()=>y(m[v])),10);return()=>window.clearTimeout(e)}y(0)}),[i,v,m]),t.jsx("div",{css:yo,"aria-hidden":!i,children:t.jsxs("div",{ref:k,role:"dialog","aria-modal":"true",css:$o,style:{height:`${j}px`,transform:i?"translateY(0)":"translateY(100%)"},children:[t.jsx("div",{ref:$,css:ko,role:"button","aria-label":"Drag to expand or collapse",tabIndex:0,children:t.jsx("span",{css:So})}),e?t.jsx("div",{css:Lo,ref:g,children:e}):null,t.jsx("div",{css:Mo(p,x),children:r}),n&&"full"===v?t.jsx("div",{css:Ro,ref:f,children:n}):null]})})},exports.Slider=Ae,exports.SliderInput=({label:e,caption:r,size:n="default",sliderItem:i,required:l,onChange:a})=>{const[s,c]=o.useState(i.value||[]),d=(e,t)=>{const r=e.target.value,n=[...s];let o=r?parseInt(r,10):r;const l=i.min||0,a=i.max||100;o=Number.isNaN(o)?l:o,o=o<l?l:o,o=o>a?a:o,n[t]=o,c(n)},p=(e,t)=>{const r=e.target.value||"0",n=[...s];let o=parseInt(r,10);const l=i.min||0,d=i.max||100;if(o=Number.isNaN(o)?l:o,o=o<l?l:o,o=o>d?d:o,2===s?.length){o=Number.isNaN(o)?l:o;const e=s[0],r=s[1];0===t?(o=o<l?l:o,o=o>r?r:o):1===t&&(o=o<e?e:o,o=o>d?d:o)}n[t]=o,c(n),a&&a(n)};return t.jsxs("div",{children:[t.jsxs("p",{css:Kt(n),"aria-label":e,children:[l?t.jsx("span",{children:"*"}):null,e]}),r?t.jsx("p",{css:Jt(n),"aria-label":r,children:r}):null,t.jsxs("div",{css:Qt,children:[i.step&&i.marks?t.jsx(Pt,{items:i.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"90px"},value:[`${s?.[0]}`],onChange:e=>{const t=e.map((e=>parseInt(e,10)));c(t),a&&a(t)}}):t.jsx(dt,{"aria-label":e,min:i.min,max:i.max,value:s?.[0],type:"number",onChange:e=>d(e,0),onBlur:e=>p(e,0),className:"opacity-control-text-input",onClick:e=>e.target.select()}),t.jsx(Ae,{css:{},...i,value:s,onValueChangeEnd:e=>{c(e.value),a&&a(e.value)}}),2===s?.length?t.jsx(dt,{"aria-label":e,min:i.min,max:i.max,value:s?.[1],type:"number",onChange:e=>d(e,1),onBlur:e=>p(e,1),className:"opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},exports.StepProgressIndicator=({steps:e,currentStep:n})=>t.jsxs("div",{css:_i,children:[e.map(((e,o)=>{return t.jsxs("div",{css:Pi,children:[t.jsx("button",{css:(i=n>=o+1,l=n<o+1,r.css`
|
3011
3025
|
height: 32px;
|
3012
3026
|
width: 32px;
|
3013
3027
|
display: flex;
|
@@ -3021,5 +3035,26 @@
|
|
3021
3035
|
font-weight: 700;
|
3022
3036
|
cursor: not-allowed;
|
3023
3037
|
|
3024
|
-
${i?`\n
|
3025
|
-
|
3038
|
+
${i?`\n background-color: ${p("primary",100)};\n color: ${p("primary",800)};\n border: 1px solid ${p("primary",400)};\n box-shadow: 0px 1px 2px -1px #0000001A;\n box-shadow: 0px 1px 3px 0px #0000001A;\n cursor: pointer;\n `:""}
|
3039
|
+
|
3040
|
+
&:hover {
|
3041
|
+
background-color: ${p("primary",200)};
|
3042
|
+
box-shadow: 0px 2px 4px -2px #0000001a;
|
3043
|
+
box-shadow: 0px 4px 6px -1px #0000001a;
|
3044
|
+
}
|
3045
|
+
|
3046
|
+
&:active {
|
3047
|
+
background-color: ${p("primary",300)};
|
3048
|
+
box-shadow: 0px 2px 4px -2px #0000001a;
|
3049
|
+
box-shadow: 0px 4px 6px -1px #0000001a;
|
3050
|
+
}
|
3051
|
+
|
3052
|
+
&:focus-visible {
|
3053
|
+
outline-color: ${p("primary",700)};
|
3054
|
+
outline-offset: 3px;
|
3055
|
+
box-shadow: 0px 2px 4px -2px #0000001a;
|
3056
|
+
box-shadow: 0px 4px 6px -1px #0000001a;
|
3057
|
+
}
|
3058
|
+
|
3059
|
+
${l?`\n background-color: ${p("neutral",300)};\n \n &:hover {\n background-color: ${p("neutral",300)};\n box-shadow: none;\n }\n `:""}
|
3060
|
+
`),type:"button",onClick:e.onClick,"aria-current":n===o+1,"aria-disabled":n<o+1,disabled:n<o+1,"aria-label":`Current Step ${o}${e.label?` ${e.label}`:""}`,"data-active":n>=o+1,children:n>o+1?t.jsx(v,{height:"16px",width:"16px"}):o+1}),e.label?t.jsx("p",{css:Bi(n===o+1),children:e.label}):null]},`${e.label}-${o}`);var i,l})),t.jsx("div",{css:Hi,children:t.jsx("div",{css:zi})})]}),exports.Switch=We,exports.TabBar=({variant:r="panel",defaultValue:n,tabs:i,onTabClick:l})=>{const[a,s]=o.useState(gi(i,n)||0),c="view"===r;return t.jsx("div",{css:di(r),children:t.jsx(e.Tabs.Root,{width:"full",defaultValue:n||i?.[0]?.value,onValueChange:({value:e})=>{return s(gi(i,t=e)),void(l&&l(t));var t},children:t.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:i.map(((r,n)=>t.jsxs(o.Fragment,{children:[c&&1===n&&"left"===fi(a)?t.jsx("div",{css:xi}):null,t.jsx(e.Tabs.Trigger,{css:[pi,c?hi:ui],"aria-label":r["aria-label"]||r.label,...r,children:t.jsxs(e.Box,{display:"flex",alignItems:"center",gap:"5px",children:[r.icon,r.label]})},r.label),c&&1===n&&"right"===fi(a)?t.jsx("div",{css:xi}):null]},r.label)))})})})},exports.Table=({columns:r,data:n,renderRow:i,striped:l,stickyHeader:a,pagination:s,selectable:c,selectedRows:d,onSortColumn:p,onPageSizeChange:u,onPageChange:x,onAllItemsSelected:h})=>{const[g,f]=o.useState({key:"",order:""}),{totalItems:b=n.length,currentPage:C=1,pageSize:m=10,showItemCount:v,showItemCountText:w}=s||{},j=(e,t)=>{f({key:e,order:t}),p&&p({key:e,order:t})},$=d?.length===n?.length,k=d&&d.length>0&&!$;return t.jsxs("div",{children:[t.jsxs(e.Table.Root,{css:nn,striped:l,stickyHeader:a,interactive:!0,children:[t.jsx(e.Table.Header,{css:on,children:t.jsxs(e.Table.Row,{children:[c?t.jsx(e.Table.ColumnHeader,{children:t.jsx(Ce,{name:"header-checkbox",checked:$,indeterminate:k,onCheckedChange:({checked:e})=>{h&&h(e)}})}):null,r.map((r=>t.jsx(e.Table.ColumnHeader,{role:r.sortable?"columnheader":void 0,"aria-sort":r.sortable&&"asc"===g.order?"ascending":r.sortable&&"desc"===g.order?"descending":void 0,children:t.jsxs("div",{css:ln,children:[r.label,r.sortable?t.jsxs("div",{css:an,children:[t.jsx(K,{css:sn(g.key===r.key&&"asc"===g.order),icon:t.jsx(y,{style:{transform:"rotate(180deg)"}}),onClick:()=>j(r.key,"asc"),"aria-label":"Ascending"}),t.jsx(K,{css:sn(g.key===r.key&&"desc"===g.order),icon:t.jsx(y,{}),onClick:()=>j(r.key,"desc"),"aria-label":"Descending"})]}):null]})},r.key)))]})}),t.jsx(e.Table.Body,{children:n.map((e=>t.jsx(o.Fragment,{children:i(e)},e.id)))})]}),t.jsxs("div",{css:cn,children:[t.jsx("div",{children:v?t.jsx(Kr,{pageSize:m,currentPage:C,totalItems:b,onPageSizeChange:u,showItemCountText:w}):null}),s?t.jsx("div",{css:dn,children:t.jsx(rn,{totalItems:b,pageSize:m,currentPage:C,onPageChange:x})}):null]})]})},exports.TableCell=un,exports.TableRow=pn,exports.Tag=Tt,exports.TextInput=dt,exports.Textarea=({label:r,caption:n,placeholder:i,errorMessage:l,required:a,disabled:s,size:c="default",defaultValue:d="",onChange:p,minLength:u,maxLength:x,...h})=>{const[g,f]=o.useState(d),[b,C]=o.useState(!1),[m,v]=o.useState(!1),[w,j]=o.useState("");o.useEffect((()=>{const{length:e}=d;u&&e<u&&e>0?(C(e<u),v(!1),j(`Enter at least ${u-e} characters`)):u&&0===e&&j(`Min ${u} characters`),x&&e>0?(C(!1),v(e>x),j(`You have ${x-e} characters remaining`)):x&&0===e&&j(`Max ${x} characters`)}),[]);const y=!!l||b||m;return t.jsxs("div",{css:er(c),children:[y?t.jsx("div",{css:tr}):null,t.jsxs(e.Field.Root,{required:a,invalid:y,gap:"0",style:{marginLeft:y?"19px":"0px"},children:[r?t.jsxs(e.Field.Label,{css:rr(c,s),"aria-label":r,children:[t.jsx(e.Field.RequiredIndicator,{"aria-label":"required"}),r,a?"":t.jsx("span",{children:" (Optional)"})]}):null,n?t.jsx(e.Field.HelperText,{css:nr(c,s),"aria-label":n,children:n}):null,l?t.jsx(e.Field.ErrorText,{css:ir,"aria-label":l,children:l}):null,t.jsx(e.Textarea,{placeholder:i,disabled:s,css:lr(c,g,d),onChange:e=>{f(e.target.value);const{length:t}=e.target.value;u&&x?(C(t<u),v(t>x),j(`You have ${x-t} characters remaining`)):u?(C(t<u),v(!1),j(t<u?`Enter at least ${u-t} characters`:"")):x&&(v(t>x),C(!1),j(`You have ${x-t} characters remaining`)),p&&p(e)},value:g,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...h}),b&&u?t.jsxs(e.Field.ErrorText,{css:ir,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:["You need ",u-g.length," more characters"]}):null,m&&x?t.jsxs(e.Field.ErrorText,{css:ir,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:["You have ",g.length-x," characters too many"]}):null,!w||m||b?null:t.jsx(e.Field.HelperText,{css:or,"aria-label":w,children:w})]})]})},exports.Toast=()=>Object.keys(Yi).map((r=>t.jsx(e.Portal,{children:t.jsx(e.Toaster,{toaster:Yi[r],insetInline:{mdDown:"4"},children:n=>t.jsxs(e.Toast.Root,{css:Oi,width:{md:"sm"},children:[t.jsxs(e.Stack,{flexDirection:"row",className:"icon-container",children:["info"===n.type?n.meta?.icon?n.meta.icon:t.jsx(j,{color:"var(--chakra-colors-neutral-700)"}):null,"loading"===n.type?t.jsx(e.Spinner,{size:"lg",borderWidth:"3px",color:"var(--chakra-colors-primary-500)"}):null,"success"===n.type?n.meta?.icon?n.meta.icon:t.jsx(M,{color:"var(--chakra-colors-success-500)"}):null,"warning"===n.type?n.meta?.icon?n.meta.icon:t.jsx(R,{color:"var(--chakra-colors-warning-500)"}):null,"error"===n.type?n.meta?.icon?n.meta.icon:t.jsx(V,{color:"var(--chakra-colors-error-500)"}):null,t.jsxs(e.Stack,{gap:"1",flex:"1",maxWidth:"100%",children:[t.jsx(e.Toast.Title,{css:Ni,"aria-label":`${n.title}`,children:n.title}),n.description?t.jsx(e.Toast.Title,{css:Fi,"aria-label":`${n.description}`,children:n.description}):null]})]}),n.action||n.meta?.closable?t.jsxs(e.Stack,{flexDirection:"row",children:[n.action?t.jsx(b,{css:Ai,label:n.action.label,size:"small",variant:"info"===n.type?"primary":"secondary",onClick:()=>{n?.action?.onClick&&n.action.onClick(),Yi[r].dismiss()}}):null,n.meta?.closable?t.jsx(b,{css:Zi,label:n.meta.closableLabel,"aria-label":n.meta?.closableLabel||"Dismiss",leftIcon:t.jsx($,{height:"10px!",width:"10px!"}),size:"small",variant:"secondary",onClick:()=>Yi[r].dismiss()}):null]}):null]})})},r))),exports.designSystemStyles=d,exports.getThemedColor=p,exports.showToast=e=>{Yi[e.placement].create({title:e.label,description:e.caption,duration:e.duration||5e3,meta:{closable:e.closable,icon:e.icon,closableLabel:e.closableLabel},...e})};
|
package/dist/index.esm.js
CHANGED
@@ -863,6 +863,9 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
|
|
863
863
|
|
864
864
|
${t?`\n --ty: -6px !important;\n\n .chakra-slider__markerIndicator {\n height: 16px;\n width: 4px;\n background-color: ${ne("primary",700)} !important;\n }\n\n &[data-disabled] {\n .chakra-slider__markerIndicator {\n background-color: ${ne("neutral",400)} !important;\n }\n }\n `:""};
|
865
865
|
`,jt=e=>{const{value:t}=e;return T(f,{each:t,children:(e,t)=>P(g.Thumb,{css:_t,index:t,children:[T("div",{css:It,className:"slider-value-preview",children:e}),T(g.HiddenInput,{})]},t)})},Pt=W.forwardRef(((e,t)=>{const{marks:r,isCentred:n}=e;return r?.length?T(g.MarkerGroup,{ref:t,children:r.map(((e,t)=>{const r="number"==typeof e?e:e.value,o="number"==typeof e?void 0:e.label,i=n&&1===t;return P(g.Marker,{css:Ht(n,i),value:r,children:[T(g.MarkerIndicator,{}),T("p",{children:o})]},r)}))}):null})),Tt=W.forwardRef(((e,t)=>{const{marks:r,onValueChange:n,isCentred:o,value:i,...l}=e,[a,s]=Y(i||[0]);X((()=>{s(i||[0])}),[i]);let c=r?.map((e=>"number"==typeof e?{value:e,label:void 0}:e));if(o){const e=l.min||0,t=l.max||100;c=[e,(e+t)/2,t].map((e=>({value:e,label:void 0})))}const d=!!c?.some((e=>e.label));return T(g.Root,{css:Dt,ref:t,thumbAlignment:"center",onValueChange:e=>{s(e.value),n&&n(e)},origin:o?"center":"start",value:a,...l,children:P(g.Control,{"data-has-mark-label":d||void 0,children:[T(g.Track,{css:zt,children:T(g.Range,{css:Et})}),T(jt,{value:a}),T(Pt,{marks:c,isCentred:o})]})})})),Ot=B`
|
866
|
+
--switch-height: 24px;
|
867
|
+
--switch-width: 40px;
|
868
|
+
|
866
869
|
.chakra-switch__control-container {
|
867
870
|
width: 42px;
|
868
871
|
height: 26px;
|
@@ -882,8 +885,6 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
|
|
882
885
|
}
|
883
886
|
|
884
887
|
.chakra-switch__control {
|
885
|
-
height: 24px;
|
886
|
-
width: 40px;
|
887
888
|
display: flex;
|
888
889
|
align-items: center;
|
889
890
|
background-color: ${ne("neutral",600)};
|
@@ -908,6 +909,10 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
|
|
908
909
|
}
|
909
910
|
|
910
911
|
.chakra-switch__thumb {
|
912
|
+
height: 20px;
|
913
|
+
width: 20px;
|
914
|
+
translate: calc((var(--switch-width) - var(--switch-height)) / 8) 0;
|
915
|
+
|
911
916
|
svg {
|
912
917
|
width: 12px;
|
913
918
|
|
@@ -922,6 +927,15 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
|
|
922
927
|
color-mix(in srgb, ${ne("primary",500)} 20%, transparent);
|
923
928
|
}
|
924
929
|
|
930
|
+
&:is(
|
931
|
+
:checked,
|
932
|
+
[data-checked],
|
933
|
+
[aria-checked='true'],
|
934
|
+
[data-state='checked']
|
935
|
+
) {
|
936
|
+
translate: calc(var(--switch-width) + 2px - var(--switch-height)) 0;
|
937
|
+
}
|
938
|
+
|
925
939
|
&[data-active] {
|
926
940
|
outline: 9px solid
|
927
941
|
color-mix(in srgb, ${ne("primary",500)} 40%, transparent);
|
@@ -2950,7 +2964,7 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
|
|
2950
2964
|
height: 1px;
|
2951
2965
|
width: 100%;
|
2952
2966
|
background-color: ${ne("neutral",400)};
|
2953
|
-
`,ia=({steps:e,currentStep:t})=>P("div",{css:ea,children:[e.map(((e,r)=>{return P("div",{css:ta,children:[T("button",{css:(n=t>=r+1,B`
|
2967
|
+
`,ia=({steps:e,currentStep:t})=>P("div",{css:ea,children:[e.map(((e,r)=>{return P("div",{css:ta,children:[T("button",{css:(n=t>=r+1,o=t<r+1,B`
|
2954
2968
|
height: 32px;
|
2955
2969
|
width: 32px;
|
2956
2970
|
display: flex;
|
@@ -2964,8 +2978,29 @@ import{createSystem as e,defaultConfig as t,Button as r,Box as n,Spinner as o,Ic
|
|
2964
2978
|
font-weight: 700;
|
2965
2979
|
cursor: not-allowed;
|
2966
2980
|
|
2967
|
-
${n?`\n
|
2968
|
-
|
2981
|
+
${n?`\n background-color: ${ne("primary",100)};\n color: ${ne("primary",800)};\n border: 1px solid ${ne("primary",400)};\n box-shadow: 0px 1px 2px -1px #0000001A;\n box-shadow: 0px 1px 3px 0px #0000001A;\n cursor: pointer;\n `:""}
|
2982
|
+
|
2983
|
+
&:hover {
|
2984
|
+
background-color: ${ne("primary",200)};
|
2985
|
+
box-shadow: 0px 2px 4px -2px #0000001a;
|
2986
|
+
box-shadow: 0px 4px 6px -1px #0000001a;
|
2987
|
+
}
|
2988
|
+
|
2989
|
+
&:active {
|
2990
|
+
background-color: ${ne("primary",300)};
|
2991
|
+
box-shadow: 0px 2px 4px -2px #0000001a;
|
2992
|
+
box-shadow: 0px 4px 6px -1px #0000001a;
|
2993
|
+
}
|
2994
|
+
|
2995
|
+
&:focus-visible {
|
2996
|
+
outline-color: ${ne("primary",700)};
|
2997
|
+
outline-offset: 3px;
|
2998
|
+
box-shadow: 0px 2px 4px -2px #0000001a;
|
2999
|
+
box-shadow: 0px 4px 6px -1px #0000001a;
|
3000
|
+
}
|
3001
|
+
|
3002
|
+
${o?`\n background-color: ${ne("neutral",300)};\n \n &:hover {\n background-color: ${ne("neutral",300)};\n box-shadow: none;\n }\n `:""}
|
3003
|
+
`),type:"button",onClick:e.onClick,"aria-current":t===r+1,"aria-disabled":t<r+1,disabled:t<r+1,"aria-label":`Current Step ${r}${e.label?` ${e.label}`:""}`,"data-active":t>=r+1,children:t>r+1?T(ue,{height:"16px",width:"16px"}):r+1}),e.label?T("p",{css:ra(t===r+1),children:e.label}):null]},`${e.label}-${r}`);var n,o})),T("div",{css:na,children:T("div",{css:oa})})]}),la=B`
|
2969
3004
|
justify-content: space-between;
|
2970
3005
|
align-items: center;
|
2971
3006
|
gap: 8px;
|