@atom-learning/components 2.53.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 +2 -7
- package/dist/components/checkbox/Checkbox.js +1 -1
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/switch/Switch.d.ts +3 -1
- package/dist/components/switch/Switch.js +1 -1
- package/dist/components/switch/Switch.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
|
|
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
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
### Features
|
|
10
|
-
|
|
11
|
-
* use themeMap in stitches to enable aspect ratio tokens ([b0a4c00](https://github.com/Atom-Learning/components/commit/b0a4c003bb6f46e110f5a5a8e13c8cbd794337f1))
|
|
6
|
+
* positioning of tick icon on Checkbox ([6d42a51](https://github.com/Atom-Learning/components/commit/6d42a5127c5b6c4b6a16c49f6136c8af54b981a7))
|
|
12
7
|
|
|
13
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
14
9
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Minus as i,Ok as
|
|
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
|
|
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,6 +1,8 @@
|
|
|
1
1
|
import * as RadixSwitch from '@radix-ui/react-switch';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
declare const StyledSwitch: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<RadixSwitch.SwitchProps & React.RefAttributes<HTMLButtonElement>>, {
|
|
3
|
+
declare const StyledSwitch: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<RadixSwitch.SwitchProps & React.RefAttributes<HTMLButtonElement>>, {
|
|
4
|
+
size?: "md" | "lg" | undefined;
|
|
5
|
+
}, {
|
|
4
6
|
sm: string;
|
|
5
7
|
md: string;
|
|
6
8
|
lg: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as a from"@radix-ui/react-switch";import*as o from"react";import{styled as r}from"../../stitches.js";const i=r(a.Root,{appearance:"none",backgroundColor:"$tonal200",border:"none",borderRadius:"$round",cursor:"pointer",display:"flex",overflow:"hidden",position:"relative",transition:"all 50ms ease-out","&:hover":{backgroundColor:"$tonal300"},"&:focus":{outline:"2px solid $primary",outlineOffset:"1px"},'&[data-state="checked"]':{backgroundColor:"$primary"},'&[data-state="checked"]:hover':{backgroundColor:"$primaryMid"},variants:{size:{md:{p:"$0",width:"$4"},lg:{p:"$1",width:"$6"}}}}),n=r(a.Thumb,{backgroundColor:"white",borderRadius:"$round",display:"block",transition:"transform 50ms",willChange:"transform",variants:{size:{md:{size:"$1",'&[data-state="checked"]':{transform:"translateX(calc($sizes$2 - $space$1))"}},lg:{size:"$2",'&[data-state="checked"]':{transform:"translateX($space$5)"}}}}}),t=({size:e="md",...s})=>o.createElement(i,{size:e,...s},o.createElement(n,{size:e}));t.displayName="Switch";export{t as Switch};
|
|
2
2
|
//# sourceMappingURL=Switch.js.map
|
|
@@ -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
|
|
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"}
|