@worldresources/wri-design-systems 2.133.4 → 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 +16 -2
- package/dist/index.esm.js +16 -2
- 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);
|
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);
|