@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 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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worldresources/wri-design-systems",
3
- "version": "2.133.4",
3
+ "version": "2.133.5",
4
4
  "description": "WRI UI Library",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",