@atom-learning/components 2.54.0 → 2.54.1

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/CHANGELOG.md CHANGED
@@ -1,9 +1,9 @@
1
- # [2.54.0](https://github.com/Atom-Learning/components/compare/v2.53.0...v2.54.0) (2023-05-05)
1
+ ## [2.54.1](https://github.com/Atom-Learning/components/compare/v2.54.0...v2.54.1) (2023-05-09)
2
2
 
3
3
 
4
- ### Features
4
+ ### Bug Fixes
5
5
 
6
- * switch large variant ([09ccd7f](https://github.com/Atom-Learning/components/commit/09ccd7faa2fe076b7ad89bc403eaf226f7a02dbe))
6
+ * positioning of tick icon on Checkbox ([6d42a51](https://github.com/Atom-Learning/components/commit/6d42a5127c5b6c4b6a16c49f6136c8af54b981a7))
7
7
 
8
8
  # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
9
9
 
@@ -1,2 +1,2 @@
1
- import{Minus as i,Ok as l}from"@atom-learning/icons";import*as e from"@radix-ui/react-checkbox";import*as o from"react";import{styled as t}from"../../stitches.js";import{Icon as s}from"../icon/Icon.js";const d=t(e.Indicator,{display:"flex",alignItems:"center",justifyContent:"center"}),c=t(e.Root,{appearance:"none",backgroundColor:"transparent",border:"1px solid $colors$tonal400",borderRadius:"3px",color:"white",cursor:"pointer",size:"$1",p:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"all 50ms ease-out",'&[data-state="checked"]':{backgroundColor:"$primary",borderColor:"$primary"},'&[data-state="indeterminate"]':{backgroundColor:"$primary",borderColor:"$primary"},"&:focus":{outline:"2px solid $primary",outlineOffset:"1px"},"&[disabled]":{backgroundColor:"$tonal100",borderColor:"$tonal400",cursor:"not-allowed",color:"$tonal400"},variants:{state:{error:{borderColor:"$danger"}}}}),a=o.forwardRef((r,n)=>o.createElement(c,{...r,ref:n},o.createElement(d,null,o.createElement(s,{is:r.checked==="indeterminate"?i:l,css:{pointerEvents:"none",position:"absolute",strokeWidth:"3",size:14}}))));a.displayName="Checkbox";export{a as Checkbox};
1
+ import{Minus as i,Ok as s}from"@atom-learning/icons";import*as e from"@radix-ui/react-checkbox";import*as o from"react";import{styled as t}from"../../stitches.js";import{Icon as l}from"../icon/Icon.js";const d=t(e.Indicator,{position:"absolute",top:"50%",left:"50%",transform:"translateX(-50%) translateY(-50%)"}),c=t(e.Root,{appearance:"none",position:"relative",backgroundColor:"transparent",border:"1px solid $colors$tonal400",borderRadius:"3px",color:"white",cursor:"pointer",size:"$1",p:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"all 50ms ease-out",'&[data-state="checked"]':{backgroundColor:"$primary",borderColor:"$primary"},'&[data-state="indeterminate"]':{backgroundColor:"$primary",borderColor:"$primary"},"&:focus":{outline:"2px solid $primary",outlineOffset:"1px"},"&[disabled]":{backgroundColor:"$tonal100",borderColor:"$tonal400",cursor:"not-allowed",color:"$tonal400"},variants:{state:{error:{borderColor:"$danger"}}}}),a=o.forwardRef((r,n)=>o.createElement(c,{...r,ref:n},o.createElement(d,{asChild:!0},o.createElement(l,{is:r.checked==="indeterminate"?i:s,css:{strokeWidth:"3",size:14}}))));a.displayName="Checkbox";export{a as Checkbox};
2
2
  //# sourceMappingURL=Checkbox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\n\nconst StyledIndicator = styled(RadixCheckbox.Indicator, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n})\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n appearance: 'none',\n backgroundColor: 'transparent',\n border: '1px solid $colors$tonal400',\n borderRadius: '3px',\n color: 'white',\n cursor: 'pointer',\n size: '$1',\n p: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'all 50ms ease-out',\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary',\n borderColor: '$primary'\n },\n '&[data-state=\"indeterminate\"]': {\n backgroundColor: '$primary',\n borderColor: '$primary'\n },\n '&:focus': {\n outline: '2px solid $primary',\n outlineOffset: '1px'\n },\n '&[disabled]': {\n backgroundColor: '$tonal100',\n borderColor: '$tonal400',\n cursor: 'not-allowed',\n color: '$tonal400'\n },\n variants: {\n state: {\n error: {\n borderColor: '$danger'\n }\n }\n }\n})\n\ntype CheckboxProps = React.ComponentProps<typeof StyledCheckbox>\n\nexport const Checkbox: React.FC<CheckboxProps> = React.forwardRef(\n (props, ref) => (\n <StyledCheckbox {...props} ref={ref}>\n <StyledIndicator>\n <Icon\n is={props.checked === 'indeterminate' ? Minus : Ok}\n css={{\n pointerEvents: 'none',\n position: 'absolute',\n strokeWidth: '3',\n size: 14\n }}\n />\n </StyledIndicator>\n </StyledCheckbox>\n )\n)\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["StyledIndicator","styled","RadixCheckbox","StyledCheckbox","Checkbox","React","props","ref","Icon","Minus","Ok"],"mappings":"0MAQA,MAAMA,EAAkBC,EAAOC,EAAc,UAAW,CACtD,QAAS,OACT,WAAY,SACZ,eAAgB,QAClB,CAAC,EAEKC,EAAiBF,EAAOC,EAAc,KAAM,CAChD,WAAY,OACZ,gBAAiB,cACjB,OAAQ,6BACR,aAAc,MACd,MAAO,QACP,OAAQ,UACR,KAAM,KACN,EAAG,EACH,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,oBACZ,0BAA2B,CACzB,gBAAiB,WACjB,YAAa,UACf,EACA,gCAAiC,CAC/B,gBAAiB,WACjB,YAAa,UACf,EACA,UAAW,CACT,QAAS,qBACT,cAAe,KACjB,EACA,cAAe,CACb,gBAAiB,YACjB,YAAa,YACb,OAAQ,cACR,MAAO,WACT,EACA,SAAU,CACR,MAAO,CACL,MAAO,CACL,YAAa,SACf,CACF,CACF,CACF,CAAC,EAIYE,EAAoCC,EAAM,WACrD,CAACC,EAAOC,IACNF,EAAA,cAACF,EAAA,CAAgB,GAAGG,EAAO,IAAKC,GAC9BF,EAAA,cAACL,EAAA,KACCK,EAAA,cAACG,EAAA,CACC,GAAIF,EAAM,UAAY,gBAAkBG,EAAQC,EAChD,IAAK,CACH,cAAe,OACf,SAAU,WACV,YAAa,IACb,KAAM,EACR,EACF,CACF,CACF,CAEJ,EAEAN,EAAS,YAAc"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\n\nconst StyledIndicator = styled(RadixCheckbox.Indicator, {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translateX(-50%) translateY(-50%)'\n})\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n appearance: 'none',\n position: 'relative',\n backgroundColor: 'transparent',\n border: '1px solid $colors$tonal400',\n borderRadius: '3px',\n color: 'white',\n cursor: 'pointer',\n size: '$1',\n p: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'all 50ms ease-out',\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary',\n borderColor: '$primary'\n },\n '&[data-state=\"indeterminate\"]': {\n backgroundColor: '$primary',\n borderColor: '$primary'\n },\n '&:focus': {\n outline: '2px solid $primary',\n outlineOffset: '1px'\n },\n '&[disabled]': {\n backgroundColor: '$tonal100',\n borderColor: '$tonal400',\n cursor: 'not-allowed',\n color: '$tonal400'\n },\n variants: {\n state: {\n error: {\n borderColor: '$danger'\n }\n }\n }\n})\n\ntype CheckboxProps = React.ComponentProps<typeof StyledCheckbox>\n\nexport const Checkbox: React.FC<CheckboxProps> = React.forwardRef(\n (props, ref) => (\n <StyledCheckbox {...props} ref={ref}>\n <StyledIndicator asChild>\n <Icon\n is={props.checked === 'indeterminate' ? Minus : Ok}\n css={{\n strokeWidth: '3',\n size: 14\n }}\n />\n </StyledIndicator>\n </StyledCheckbox>\n )\n)\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["StyledIndicator","styled","RadixCheckbox","StyledCheckbox","Checkbox","React","props","ref","Icon","Minus","Ok"],"mappings":"0MAQA,MAAMA,EAAkBC,EAAOC,EAAc,UAAW,CACtD,SAAU,WACV,IAAK,MACL,KAAM,MACN,UAAW,mCACb,CAAC,EAEKC,EAAiBF,EAAOC,EAAc,KAAM,CAChD,WAAY,OACZ,SAAU,WACV,gBAAiB,cACjB,OAAQ,6BACR,aAAc,MACd,MAAO,QACP,OAAQ,UACR,KAAM,KACN,EAAG,EACH,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,oBACZ,0BAA2B,CACzB,gBAAiB,WACjB,YAAa,UACf,EACA,gCAAiC,CAC/B,gBAAiB,WACjB,YAAa,UACf,EACA,UAAW,CACT,QAAS,qBACT,cAAe,KACjB,EACA,cAAe,CACb,gBAAiB,YACjB,YAAa,YACb,OAAQ,cACR,MAAO,WACT,EACA,SAAU,CACR,MAAO,CACL,MAAO,CACL,YAAa,SACf,CACF,CACF,CACF,CAAC,EAIYE,EAAoCC,EAAM,WACrD,CAACC,EAAOC,IACNF,EAAA,cAACF,EAAA,CAAgB,GAAGG,EAAO,IAAKC,CAAAA,EAC9BF,EAAA,cAACL,EAAA,CAAgB,QAAO,EACtBK,EAAAA,EAAA,cAACG,EAAA,CACC,GAAIF,EAAM,UAAY,gBAAkBG,EAAQC,EAChD,IAAK,CACH,YAAa,IACb,KAAM,EACR,EACF,CACF,CACF,CAEJ,EAEAN,EAAS,YAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledSwitch = styled(RadixSwitch.Root, {\n appearance: 'none',\n backgroundColor: '$tonal200',\n border: 'none',\n borderRadius: '$round',\n cursor: 'pointer',\n display: 'flex',\n overflow: 'hidden',\n position: 'relative',\n transition: 'all 50ms ease-out',\n '&:hover': {\n backgroundColor: '$tonal300'\n },\n '&:focus': {\n outline: '2px solid $primary',\n outlineOffset: '1px'\n },\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary'\n },\n '&[data-state=\"checked\"]:hover': {\n backgroundColor: '$primaryMid'\n },\n variants: {\n size: {\n md: {\n p: '$0',\n width: '$4'\n },\n lg: {\n p: '$1',\n width: '$6'\n }\n }\n }\n})\n\nconst StyledThumb = styled(RadixSwitch.Thumb, {\n backgroundColor: 'white',\n borderRadius: '$round',\n display: 'block',\n transition: 'transform 50ms',\n willChange: 'transform', \n variants: {\n size: {\n md: {\n size: '$1',\n '&[data-state=\"checked\"]': {\n transform: 'translateX(calc($sizes$2 - $space$1))'\n }\n },\n lg: {\n size: '$2',\n '&[data-state=\"checked\"]': {\n transform: 'translateX($space$5)'\n },\n }\n }\n }\n})\n\ntype SwitchProps = React.ComponentProps<typeof StyledSwitch>\n\nexport const Switch: React.FC<SwitchProps> = ({ size = 'md', ...rest }) => (\n <StyledSwitch size={size} {...rest}>\n <StyledThumb size={size} />\n </StyledSwitch>\n)\n\nSwitch.displayName = 'Switch'\n"],"names":["StyledSwitch","styled","RadixSwitch","StyledThumb","Switch","size","rest","React"],"mappings":"4GAKA,MAAMA,EAAeC,EAAOC,EAAY,KAAM,CAC5C,WAAY,OACZ,gBAAiB,YACjB,OAAQ,OACR,aAAc,SACd,OAAQ,UACR,QAAS,OACT,SAAU,SACV,SAAU,WACV,WAAY,oBACZ,UAAW,CACT,gBAAiB,WACnB,EACA,UAAW,CACT,QAAS,qBACT,cAAe,KACjB,EACA,0BAA2B,CACzB,gBAAiB,UACnB,EACA,gCAAiC,CAC/B,gBAAiB,aACnB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,EAAG,KACH,MAAO,IACT,EACA,GAAI,CACF,EAAG,KACH,MAAO,IACT,CACF,CACF,CACF,CAAC,EAEKC,EAAcF,EAAOC,EAAY,MAAO,CAC5C,gBAAiB,QACjB,aAAc,SACd,QAAS,QACT,WAAY,iBACZ,WAAY,YACZ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,KACN,0BAA2B,CACzB,UAAW,uCACb,CACF,EACA,GAAI,CACF,KAAM,KACN,0BAA2B,CACzB,UAAW,sBACb,CACF,CACF,CACF,CACF,CAAC,EAIYE,EAAgC,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,IACnEC,EAAA,cAACP,EAAA,CAAa,KAAMK,EAAO,GAAGC,CAC5BC,EAAAA,EAAA,cAACJ,EAAA,CAAY,KAAME,CAAAA,CAAM,CAC3B,EAGFD,EAAO,YAAc"}
1
+ {"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledSwitch = styled(RadixSwitch.Root, {\n appearance: 'none',\n backgroundColor: '$tonal200',\n border: 'none',\n borderRadius: '$round',\n cursor: 'pointer',\n display: 'flex',\n overflow: 'hidden',\n position: 'relative',\n transition: 'all 50ms ease-out',\n '&:hover': {\n backgroundColor: '$tonal300'\n },\n '&:focus': {\n outline: '2px solid $primary',\n outlineOffset: '1px'\n },\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary'\n },\n '&[data-state=\"checked\"]:hover': {\n backgroundColor: '$primaryMid'\n },\n variants: {\n size: {\n md: {\n p: '$0',\n width: '$4'\n },\n lg: {\n p: '$1',\n width: '$6'\n }\n }\n }\n})\n\nconst StyledThumb = styled(RadixSwitch.Thumb, {\n backgroundColor: 'white',\n borderRadius: '$round',\n display: 'block',\n transition: 'transform 50ms',\n willChange: 'transform',\n variants: {\n size: {\n md: {\n size: '$1',\n '&[data-state=\"checked\"]': {\n transform: 'translateX(calc($sizes$2 - $space$1))'\n }\n },\n lg: {\n size: '$2',\n '&[data-state=\"checked\"]': {\n transform: 'translateX($space$5)'\n }\n }\n }\n }\n})\n\ntype SwitchProps = React.ComponentProps<typeof StyledSwitch>\n\nexport const Switch: React.FC<SwitchProps> = ({ size = 'md', ...rest }) => (\n <StyledSwitch size={size} {...rest}>\n <StyledThumb size={size} />\n </StyledSwitch>\n)\n\nSwitch.displayName = 'Switch'\n"],"names":["StyledSwitch","styled","RadixSwitch","StyledThumb","Switch","size","rest","React"],"mappings":"4GAKA,MAAMA,EAAeC,EAAOC,EAAY,KAAM,CAC5C,WAAY,OACZ,gBAAiB,YACjB,OAAQ,OACR,aAAc,SACd,OAAQ,UACR,QAAS,OACT,SAAU,SACV,SAAU,WACV,WAAY,oBACZ,UAAW,CACT,gBAAiB,WACnB,EACA,UAAW,CACT,QAAS,qBACT,cAAe,KACjB,EACA,0BAA2B,CACzB,gBAAiB,UACnB,EACA,gCAAiC,CAC/B,gBAAiB,aACnB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,EAAG,KACH,MAAO,IACT,EACA,GAAI,CACF,EAAG,KACH,MAAO,IACT,CACF,CACF,CACF,CAAC,EAEKC,EAAcF,EAAOC,EAAY,MAAO,CAC5C,gBAAiB,QACjB,aAAc,SACd,QAAS,QACT,WAAY,iBACZ,WAAY,YACZ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,KACN,0BAA2B,CACzB,UAAW,uCACb,CACF,EACA,GAAI,CACF,KAAM,KACN,0BAA2B,CACzB,UAAW,sBACb,CACF,CACF,CACF,CACF,CAAC,EAIYE,EAAgC,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,IACnEC,EAAA,cAACP,EAAA,CAAa,KAAMK,EAAO,GAAGC,CAC5BC,EAAAA,EAAA,cAACJ,EAAA,CAAY,KAAME,CAAAA,CAAM,CAC3B,EAGFD,EAAO,YAAc"}