@atom-learning/components 2.58.3 → 2.59.0
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 +12 -3
- package/dist/components/checkbox/Checkbox.d.ts +1 -0
- package/dist/components/checkbox/Checkbox.js +1 -1
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/radio-button/RadioButton.d.ts +3 -1
- package/dist/components/radio-button/RadioButton.js +1 -1
- package/dist/components/radio-button/RadioButton.js.map +1 -1
- package/dist/components/radio-card/RadioCardGroup.js +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,10 +1,19 @@
|
|
|
1
|
-
|
|
1
|
+
# [2.59.0](https://github.com/Atom-Learning/components/compare/v2.58.3...v2.59.0) (2023-06-20)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
*
|
|
6
|
+
* added sm as default for iconsize, avoided regenning default snapshots ([800026b](https://github.com/Atom-Learning/components/commit/800026b7e6f2d124166d4dde7a0a8eb6607b66a6))
|
|
7
|
+
* refactored sizing to use stitches variants instead of numbers ([3acc67c](https://github.com/Atom-Learning/components/commit/3acc67c54faf13ca3d58eabc3fcfc843ef3c6f7a))
|
|
8
|
+
* removed unecessary unit test ([12ccc18](https://github.com/Atom-Learning/components/commit/12ccc18b564a9cb23cffe94873fc58c4a5e8faa2))
|
|
9
|
+
* removed unneeded checkbox size props ([641f3a9](https://github.com/Atom-Learning/components/commit/641f3a99d646252e3f687e0ec93d38f6b2cbc38a))
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
* added large size to radio button ([4034508](https://github.com/Atom-Learning/components/commit/403450812ab98da021c61614b3cca1f112a45351))
|
|
15
|
+
* added large size to radio button ([adef8ee](https://github.com/Atom-Learning/components/commit/adef8ee26a40aadd9af1f5fd013aeb7e158a2f1f))
|
|
16
|
+
* added md and lg sizes to checkbox and size prop ([0b8dc6f](https://github.com/Atom-Learning/components/commit/0b8dc6f33a13907ad12a0a4e5be1bd445ef42093))
|
|
8
17
|
|
|
9
18
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
10
19
|
|
|
@@ -2,6 +2,7 @@ import * as RadixCheckbox from '@radix-ui/react-checkbox';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
declare const StyledCheckbox: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<RadixCheckbox.CheckboxProps & React.RefAttributes<HTMLButtonElement>>, {
|
|
4
4
|
state?: "error" | undefined;
|
|
5
|
+
size?: "md" | "lg" | undefined;
|
|
5
6
|
}, {
|
|
6
7
|
sm: string;
|
|
7
8
|
md: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Minus as
|
|
1
|
+
import{Minus as d,Ok as m}from"@atom-learning/icons";import*as t from"@radix-ui/react-checkbox";import*as o from"react";import{styled as a}from"../../stitches.js";import{Icon as c}from"../icon/Icon.js";import{overrideStitchesVariantValue as p}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const u=a(t.Indicator,{position:"absolute",top:"50%",left:"50%",transform:"translateX(-50%) translateY(-50%)"}),f=a(t.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"}},size:{md:{size:"$1"},lg:{size:"$2",mt:"-$1"}}}}),$={md:"sm",lg:"md"},i=o.forwardRef(({size:r="md",...e},s)=>{const n=o.useMemo(()=>p(r,l=>$[l]),[r]);return o.createElement(f,{...e,size:r,ref:s},o.createElement(u,{asChild:!0},o.createElement(c,{is:e.checked==="indeterminate"?d:m,css:{strokeWidth:"3"},size:n})))});i.displayName="Checkbox";export{i 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 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
|
|
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'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\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 size: {\n md: {\n size: '$1'\n },\n lg: {\n size: '$2',\n mt: '-$1'\n }\n }\n }\n})\n\nconst toIconSize = {\n md: 'sm',\n lg: 'md'\n}\n\ntype CheckboxProps = React.ComponentProps<typeof StyledCheckbox>\n\nexport const Checkbox: React.FC<CheckboxProps> = React.forwardRef(\n ({ size = 'md', ...props }, ref) => {\n const iconSize = React.useMemo(\n () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n [size]\n )\n\n return (\n <StyledCheckbox {...props} size={size} ref={ref}>\n <StyledIndicator asChild>\n <Icon\n is={props.checked === 'indeterminate' ? Minus : Ok}\n css={{\n strokeWidth: '3'\n }}\n size={iconSize}\n />\n </StyledIndicator>\n </StyledCheckbox>\n )\n }\n)\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["StyledIndicator","styled","RadixCheckbox","StyledCheckbox","toIconSize","Checkbox","React","size","props","ref","iconSize","overrideStitchesVariantValue","s","Icon","Minus","Ok"],"mappings":"yUASA,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,EACA,KAAM,CACJ,GAAI,CACF,KAAM,IACR,EACA,GAAI,CACF,KAAM,KACN,GAAI,KACN,CACF,CACF,CACF,CAAC,EAEKE,EAAa,CACjB,GAAI,KACJ,GAAI,IACN,EAIaC,EAAoCC,EAAM,WACrD,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAM,EAAGC,IAAQ,CAClC,MAAMC,EAAWJ,EAAM,QACrB,IAAMK,EAA6BJ,EAAOK,GAAMR,EAAWQ,EAAE,EAC7D,CAACL,CAAI,CACP,EAEA,OACED,EAAA,cAACH,EAAA,CAAgB,GAAGK,EAAO,KAAMD,EAAM,IAAKE,CAAAA,EAC1CH,EAAA,cAACN,EAAA,CAAgB,QAAO,EACtBM,EAAAA,EAAA,cAACO,EAAA,CACC,GAAIL,EAAM,UAAY,gBAAkBM,EAAQC,EAChD,IAAK,CACH,YAAa,GACf,EACA,KAAML,CACR,CAAA,CACF,CACF,CAEJ,CACF,EAEAL,EAAS,YAAc"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import * as RadioGroup from '@radix-ui/react-radio-group';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { Override } from '../../utilities/types';
|
|
4
|
-
declare const StyledRadioButton: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>, {
|
|
4
|
+
declare const StyledRadioButton: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>, {
|
|
5
|
+
size?: "md" | "lg" | undefined;
|
|
6
|
+
}, {
|
|
5
7
|
sm: string;
|
|
6
8
|
md: string;
|
|
7
9
|
lg: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as r from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../stitches.js";const n=t(r.Item,{alignItems:"center",appearance:"none",backgroundColor:"transparent",border:"1px solid $tonal400",borderRadius:"$round",color:"white",cursor:"pointer",display:"flex",justifyContent:"center",p:0,size:"$1",variants:{size:{md:{size:"$1"},lg:{size:"$2",mt:"-$1"}}},transition:"all 50ms ease-out","&:focus":{outline:"2px solid $primary",outlineOffset:"1px"},'&[data-state="checked"]':{backgroundColor:"$primary",borderColor:"$primary"},"&[disabled]":{backgroundColor:"$tonal100",borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"}}),s=t(r.Indicator,{size:"6px",borderRadius:"$round",backgroundColor:"currentcolor",position:"absolute",variants:{size:{md:{size:"6px"},lg:{size:"12px"}}}}),a=({size:o,...i})=>e.createElement(n,{...i,size:o},e.createElement(s,{size:o}));a.displayName="RadioButton";export{a as RadioButton};
|
|
2
2
|
//# sourceMappingURL=RadioButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(RadioGroup.Item, {\n alignItems: 'center',\n appearance: 'none',\n backgroundColor: 'transparent',\n border: '1px solid $tonal400',\n borderRadius: '$round',\n color: 'white',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n p: 0,\n size: '$1',\n transition: 'all 50ms ease-out',\n '&:focus': {\n outline: '2px solid $primary',\n outlineOffset: '1px'\n },\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary',\n borderColor: '$primary'\n },\n '&[disabled]': {\n backgroundColor: '$tonal100',\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst StyledIndicator = styled(RadioGroup.Indicator, {\n size: '6px',\n borderRadius: '$round',\n backgroundColor: 'currentcolor',\n position: 'absolute'\n})\n\ntype RadioButtonProps = Override<\n React.ComponentPropsWithoutRef<typeof StyledRadioButton>,\n {\n as?: never\n } & {\n 'aria-label'?: string\n }\n>\n\nexport const RadioButton: React.FC<RadioButtonProps> = (props) => (\n
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(RadioGroup.Item, {\n alignItems: 'center',\n appearance: 'none',\n backgroundColor: 'transparent',\n border: '1px solid $tonal400',\n borderRadius: '$round',\n color: 'white',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n p: 0,\n size: '$1',\n variants: {\n size: {\n md: {\n size: '$1'\n },\n lg: {\n size: '$2',\n mt: '-$1'\n }\n }\n },\n transition: 'all 50ms ease-out',\n '&:focus': {\n outline: '2px solid $primary',\n outlineOffset: '1px'\n },\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary',\n borderColor: '$primary'\n },\n '&[disabled]': {\n backgroundColor: '$tonal100',\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst StyledIndicator = styled(RadioGroup.Indicator, {\n size: '6px',\n borderRadius: '$round',\n backgroundColor: 'currentcolor',\n position: 'absolute',\n variants: {\n size: {\n md: {\n size: '6px'\n },\n lg: {\n size: '12px'\n }\n }\n }\n})\n\ntype RadioButtonProps = Override<\n React.ComponentPropsWithoutRef<typeof StyledRadioButton>,\n {\n as?: never\n } & {\n 'aria-label'?: string\n }\n>\n\nexport const RadioButton: React.FC<RadioButtonProps> = ({ size, ...props }) => {\n return (\n <StyledRadioButton {...props} size={size}>\n <StyledIndicator size={size} />\n </StyledRadioButton>\n )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["StyledRadioButton","styled","RadioGroup","StyledIndicator","RadioButton","size","props","React"],"mappings":"iHAMA,MAAMA,EAAoBC,EAAOC,EAAW,KAAM,CAChD,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,sBACR,aAAc,SACd,MAAO,QACP,OAAQ,UACR,QAAS,OACT,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,IACR,EACA,GAAI,CACF,KAAM,KACN,GAAI,KACN,CACF,CACF,EACA,WAAY,oBACZ,UAAW,CACT,QAAS,qBACT,cAAe,KACjB,EACA,0BAA2B,CACzB,gBAAiB,WACjB,YAAa,UACf,EACA,cAAe,CACb,gBAAiB,YACjB,YAAa,YACb,MAAO,YACP,OAAQ,aACV,CACF,CAAC,EAEKC,EAAkBF,EAAOC,EAAW,UAAW,CACnD,KAAM,MACN,aAAc,SACd,gBAAiB,eACjB,SAAU,WACV,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,KACR,EACA,GAAI,CACF,KAAM,MACR,CACF,CACF,CACF,CAAC,EAWYE,EAA0C,CAAC,CAAE,KAAAC,KAASC,CAAM,IAErEC,EAAA,cAACP,EAAA,CAAmB,GAAGM,EAAO,KAAMD,GAClCE,EAAA,cAACJ,EAAA,CAAgB,KAAME,CAAAA,CAAM,CAC/B,EAIJD,EAAY,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as d from"@radix-ui/react-radio-group";import*as t from"react";import{Stack as p}from"../stack/Stack.js";import{RadioCard as c}from"./RadioCard.js";const f=({css:e,children:r,size:l,isFullWidth:
|
|
1
|
+
import*as d from"@radix-ui/react-radio-group";import*as t from"react";import{Stack as p}from"../stack/Stack.js";import{RadioCard as c}from"./RadioCard.js";const f=({css:e,children:r,size:l,isFullWidth:a,align:o,gap:s="3",justify:m,...n})=>t.createElement(d.Root,{...n},t.createElement(p,{direction:"row",justify:m,gap:s,css:e},t.Children.map(r,i=>t.isValidElement(i)&&(i==null?void 0:i.type)===c?t.cloneElement(i,{size:l,isFullWidth:a,align:o}):i)));export{f as RadioCardGroup};
|
|
2
2
|
//# sourceMappingURL=RadioCardGroup.js.map
|