@mirohq/design-system-checkbox 1.1.79 → 1.1.81

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.
Files changed (6) hide show
  1. package/dist/main.js +20 -9
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +20 -9
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +61 -103
  6. package/package.json +4 -4
package/dist/main.js CHANGED
@@ -64,21 +64,22 @@ const StyledCheckbox = designSystemStitches.styled(reactCheckbox.Root, {
64
64
  backgroundColor: "$background-neutrals-controls-disabled"
65
65
  }
66
66
  },
67
- [hoverAriaDisabled]: {
67
+ [ariaDisabledCheckedIndeterminate]: {
68
68
  [checkboxContentSelector]: {
69
- color: "$icon-neutrals-disabled"
69
+ backgroundColor: "$background-neutrals-controls-disabled"
70
70
  }
71
71
  },
72
- [ariaDisabledCheckedIndeterminate]: {
72
+ [ariaDisabledUnChecked]: {
73
73
  [checkboxContentSelector]: {
74
- backgroundColor: "$background-neutrals-controls-disabled",
75
- color: "$icon-neutrals-disabled"
74
+ backgroundColor: "$background-neutrals"
76
75
  }
77
76
  },
78
- [ariaDisabledUnChecked]: {
77
+ ["".concat(hoverAriaDisabled, ",").concat(ariaDisabledCheckedIndeterminate, ",").concat(ariaDisabledUnChecked)]: {
79
78
  [checkboxContentSelector]: {
80
- backgroundColor: "$background-neutrals",
81
- color: "$icon-neutrals-disabled"
79
+ color: "$icon-neutrals-disabled",
80
+ "@media (forced-colors: active)": {
81
+ color: "GrayText"
82
+ }
82
83
  }
83
84
  },
84
85
  variants: {
@@ -120,7 +121,10 @@ const StyledCheckbox = designSystemStitches.styled(reactCheckbox.Root, {
120
121
  },
121
122
  "&[aria-checked=false]": {
122
123
  [checkboxContentSelector]: {
123
- backgroundColor: "$background-primary-subtle"
124
+ backgroundColor: "$background-primary-subtle",
125
+ "@media (forced-colors: active)": {
126
+ border: "1px solid transparent"
127
+ }
124
128
  }
125
129
  },
126
130
  ["".concat(hoverCheckedIndeterminate, ", &:hover[aria-checked=false]")]: {
@@ -136,6 +140,13 @@ const StyledCheckbox = designSystemStitches.styled(reactCheckbox.Root, {
136
140
  }
137
141
  },
138
142
  ghost: {
143
+ "&[aria-checked=false]": {
144
+ [checkboxContentSelector]: {
145
+ "@media (forced-colors: active)": {
146
+ border: "1px solid transparent"
147
+ }
148
+ }
149
+ },
139
150
  [checkedAndIndeterminate]: {
140
151
  [checkboxContentSelector]: {
141
152
  color: "$icon-primary"
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/checkbox.styled.tsx","../src/checkbox.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-checkbox'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport {\n IconProhibit,\n IconCheckMark,\n IconMinus,\n} from '@mirohq/design-system-icons'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledCheckboxContent = styled(Primitive.div, {\n display: 'block',\n pointerEvents: 'none',\n borderRadius: '$50',\n position: 'relative',\n margin: 'auto',\n boxSizing: 'border-box',\n})\n\nconst checkboxContentSelector = `& ${StyledCheckboxContent}`\n\nconst checkedAndIndeterminate = '&[aria-checked=true], &[data-indeterminate]'\nconst ariaDisabledCheckedIndeterminate = [\n '&[aria-disabled=true][aria-checked=true]',\n '&:disabled[aria-checked=true]',\n '&[aria-disabled=true][data-indeterminate]',\n '&:disabled[data-indeterminate]',\n].join(' ,')\nconst hoverCheckedIndeterminate =\n '&:hover[aria-checked=true], &:hover[data-indeterminate]'\nconst ariaDisabledUnChecked =\n '&[aria-disabled=true][aria-checked=false], &:disabled[aria-checked=false]'\nconst hoverCheckedIndeterminateDisabled = [\n '&:hover[aria-checked=true][aria-disabled=true]',\n '&:hover[aria-checked=true]&:disabled',\n '&:hover[data-indeterminate][aria-disabled=true]',\n '&:hover[data-indeterminate]&:disabled',\n].join(' ,')\n\nconst hoverAriaDisabled = [\n '&:hover[aria-checked=false][aria-disabled=true]',\n '&:hover[aria-checked=false]&:disabled',\n ...hoverCheckedIndeterminateDisabled.split(' ,'),\n].join(' ,')\n\nexport const StyledCheckbox = styled(Root, {\n all: 'unset',\n square: '$6',\n color: '$icon-primary-inverted',\n cursor: 'pointer',\n\n '&[aria-disabled=true], &:disabled': {\n cursor: 'default',\n },\n '&:focus, &[data-focused]': {\n [checkboxContentSelector]: {\n boxShadow: '$focus-controls',\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals-controls-disabled',\n },\n },\n\n [hoverAriaDisabled]: {\n [checkboxContentSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals-controls-disabled',\n color: '$icon-neutrals-disabled',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals-disabled',\n },\n },\n variants: {\n variant: {\n 'solid-prominent': {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-neutrals-controls',\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-prominent-hover',\n },\n },\n '&:hover[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-primary',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n border: '1px solid $border-neutrals-controls-disabled',\n },\n },\n },\n 'solid-subtle': {\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary',\n },\n },\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n },\n },\n [`${hoverCheckedIndeterminate}, &:hover[aria-checked=false]`]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals-controls-disabled',\n },\n },\n },\n ghost: {\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-primary',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-primary-hover',\n },\n },\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals',\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals',\n },\n },\n },\n },\n size: {\n large: {\n [checkboxContentSelector]: {\n square: '$5',\n },\n },\n small: {\n [checkboxContentSelector]: {\n square: '$4',\n },\n },\n },\n },\n})\n\nconst markStyles = {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%,-50%)',\n variants: {\n size: {\n large: { width: '18px' },\n small: { width: '12px' },\n },\n },\n}\n\nexport const StyledDisabledMark = styled(IconProhibit, markStyles)\n\nexport const StyledCheckMark = styled(IconCheckMark, markStyles)\n\nexport const StyledIndeterminateMark = styled(IconMinus, markStyles)\n\nexport type StyledCheckboxProps = StrictComponentProps<typeof StyledCheckbox>\n","import React, { useState } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { Indicator as RadixIndicator } from '@radix-ui/react-checkbox'\nimport type { ElementRef } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nimport {\n StyledCheckboxContent,\n StyledCheckbox,\n StyledCheckMark,\n StyledDisabledMark,\n StyledIndeterminateMark,\n} from './checkbox.styled'\nimport type { StyledCheckboxProps } from './checkbox.styled'\n\nexport interface CheckboxProps extends StyledCheckboxProps {\n /**\n * The checked state of the checkbox when it is initially rendered. Use when\n * you do not need to control its checked state.\n */\n defaultChecked?: boolean\n\n /**\n * The style of the checkbox.\n * @default 'solid-prominent'\n */\n variant?: StyledCheckboxProps['variant']\n\n /**\n * The size of the checkbox.\n * @default 'large'\n */\n size?: StyledCheckboxProps['size']\n\n /**\n * The controlled checked state of the checkbox. Must be used in conjunction\n * with onChecked and onUnchecked.\n */\n checked?: boolean | 'indeterminate'\n\n /**\n * When true, indicates that the user must check the checkbox before the\n * owning form can be submitted.\n */\n required?: boolean\n\n /**\n * The name of the checkbox. Submitted with its owning form as part of a\n * name/value pair.\n */\n name?: string\n\n /**\n * The value given as data when submitted with a name.\n */\n value?: string\n\n /**\n * When true, prevents the user from interacting with the checkbox.\n */\n disabled?: boolean\n\n /**\n * Event handler called when the checked state equals true.\n */\n onChecked?: () => void\n\n /**\n * Event handler called when the checked state equals false.\n */\n onUnchecked?: () => void\n\n /**\n * When true, prevents the user from interacting with the checkbox but focus\n * is still possible.\n */\n 'aria-disabled'?: Booleanish\n}\n\nexport const Checkbox = React.forwardRef<\n ElementRef<typeof StyledCheckbox>,\n CheckboxProps\n>(\n (\n {\n 'aria-disabled': ariaDisabled,\n checked,\n defaultChecked,\n disabled,\n onChecked,\n onUnchecked,\n onClick,\n onKeyDown,\n size = 'large',\n variant = 'solid-prominent',\n ...restProps\n },\n forwardRef\n ) => {\n const [checkedState, setCheckedState] = useState<CheckboxProps['checked']>(\n defaultChecked ?? false\n )\n const internalChecked = checked ?? checkedState\n const isAriaDisabled = booleanify(ariaDisabled ?? false)\n const disabledUnchecked =\n (disabled === true || isAriaDisabled) && internalChecked === false\n const checkedStateEvents = {\n true: onChecked,\n false: onUnchecked,\n }\n\n return (\n <StyledCheckbox\n {...restProps}\n aria-disabled={ariaDisabled}\n data-indeterminate={checked === 'indeterminate' ? '' : undefined}\n checked={internalChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n size={size}\n variant={variant}\n onClick={e => {\n if (isAriaDisabled) {\n e.preventDefault()\n return\n }\n onClick?.(e)\n }}\n onCheckedChange={(checked: boolean) => {\n setCheckedState(checked)\n\n checkedStateEvents[`${checked}`]?.()\n }}\n ref={forwardRef}\n >\n <StyledCheckboxContent>\n <RadixIndicator>\n {internalChecked === 'indeterminate' && (\n <StyledIndeterminateMark size={size} />\n )}\n {internalChecked === true && <StyledCheckMark size={size} />}\n </RadixIndicator>\n {disabledUnchecked && (\n <StyledDisabledMark\n weight={size === 'small' ? 'thin' : undefined}\n size={size}\n />\n )}\n </StyledCheckboxContent>\n </StyledCheckbox>\n )\n }\n)\n"],"names":["styled","Primitive","Root","IconProhibit","IconCheckMark","IconMinus","React","useState","booleanify","jsx","checked","jsxs","RadixIndicator"],"mappings":";;;;;;;;;;;;;;;;AAUa,MAAA,qBAAA,GAAwBA,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EACzD,OAAS,EAAA,OAAA;AAAA,EACT,aAAe,EAAA,MAAA;AAAA,EACf,YAAc,EAAA,KAAA;AAAA,EACd,QAAU,EAAA,UAAA;AAAA,EACV,MAAQ,EAAA,MAAA;AAAA,EACR,SAAW,EAAA,YAAA;AACb,CAAC,CAAA,CAAA;AAED,MAAM,0BAA0B,IAAK,CAAA,MAAA,CAAA,qBAAA,CAAA,CAAA;AAErC,MAAM,uBAA0B,GAAA,6CAAA,CAAA;AAChC,MAAM,gCAAmC,GAAA;AAAA,EACvC,0CAAA;AAAA,EACA,+BAAA;AAAA,EACA,2CAAA;AAAA,EACA,gCAAA;AACF,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AACX,MAAM,yBACJ,GAAA,yDAAA,CAAA;AACF,MAAM,qBACJ,GAAA,2EAAA,CAAA;AACF,MAAM,iCAAoC,GAAA;AAAA,EACxC,gDAAA;AAAA,EACA,sCAAA;AAAA,EACA,iDAAA;AAAA,EACA,uCAAA;AACF,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AAEX,MAAM,iBAAoB,GAAA;AAAA,EACxB,iDAAA;AAAA,EACA,uCAAA;AAAA,EACA,GAAG,iCAAkC,CAAA,KAAA,CAAM,IAAI,CAAA;AACjD,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AAEE,MAAA,cAAA,GAAiBD,4BAAOE,kBAAM,EAAA;AAAA,EACzC,GAAK,EAAA,OAAA;AAAA,EACL,MAAQ,EAAA,IAAA;AAAA,EACR,KAAO,EAAA,wBAAA;AAAA,EACP,MAAQ,EAAA,SAAA;AAAA,EAER,mCAAqC,EAAA;AAAA,IACnC,MAAQ,EAAA,SAAA;AAAA,GACV;AAAA,EACA,0BAA4B,EAAA;AAAA,IAC1B,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAW,EAAA,iBAAA;AAAA,MAEX,gCAAkC,EAAA;AAAA,QAChC,OAAS,EAAA,iBAAA;AAAA,OACX;AAAA,KACF;AAAA,GACF;AAAA,EACA,CAAC,iCAAiC,GAAG;AAAA,IACnC,CAAC,uBAAuB,GAAG;AAAA,MACzB,eAAiB,EAAA,wCAAA;AAAA,KACnB;AAAA,GACF;AAAA,EAEA,CAAC,iBAAiB,GAAG;AAAA,IACnB,CAAC,uBAAuB,GAAG;AAAA,MACzB,KAAO,EAAA,yBAAA;AAAA,KACT;AAAA,GACF;AAAA,EACA,CAAC,gCAAgC,GAAG;AAAA,IAClC,CAAC,uBAAuB,GAAG;AAAA,MACzB,eAAiB,EAAA,wCAAA;AAAA,MACjB,KAAO,EAAA,yBAAA;AAAA,KACT;AAAA,GACF;AAAA,EACA,CAAC,qBAAqB,GAAG;AAAA,IACvB,CAAC,uBAAuB,GAAG;AAAA,MACzB,eAAiB,EAAA,sBAAA;AAAA,MACjB,KAAO,EAAA,yBAAA;AAAA,KACT;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,iBAAmB,EAAA;AAAA,QACjB,uBAAyB,EAAA;AAAA,UACvB,CAAC,uBAAuB,GAAG;AAAA,YACzB,MAAQ,EAAA,qCAAA;AAAA,WACV;AAAA,SACF;AAAA,QACA,CAAC,uBAAuB,GAAG;AAAA,UACzB,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,+BAAA;AAAA,YACjB,KAAO,EAAA,wBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,CAAC,yBAAyB,GAAG;AAAA,UAC3B,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,qCAAA;AAAA,WACnB;AAAA,SACF;AAAA,QACA,6BAA+B,EAAA;AAAA,UAC7B,CAAC,uBAAuB,GAAG;AAAA,YACzB,MAAQ,EAAA,2BAAA;AAAA,WACV;AAAA,SACF;AAAA,QACA,CAAC,qBAAqB,GAAG;AAAA,UACvB,CAAC,uBAAuB,GAAG;AAAA,YACzB,MAAQ,EAAA,8CAAA;AAAA,WACV;AAAA,SACF;AAAA,OACF;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,CAAC,uBAAuB,GAAG;AAAA,UACzB,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,4BAAA;AAAA,YACjB,KAAO,EAAA,eAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,uBAAyB,EAAA;AAAA,UACvB,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,4BAAA;AAAA,WACnB;AAAA,SACF;AAAA,QACA,CAAC,EAAA,CAAG,MAAyB,CAAA,yBAAA,EAAA,+BAAA,CAA+B,GAAG;AAAA,UAC7D,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,kCAAA;AAAA,YACjB,KAAO,EAAA,qBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,CAAC,qBAAqB,GAAG;AAAA,UACvB,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,wCAAA;AAAA,WACnB;AAAA,SACF;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,uBAAuB,GAAG;AAAA,UACzB,CAAC,uBAAuB,GAAG;AAAA,YACzB,KAAO,EAAA,eAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,CAAC,yBAAyB,GAAG;AAAA,UAC3B,CAAC,uBAAuB,GAAG;AAAA,YACzB,KAAO,EAAA,qBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,CAAC,gCAAgC,GAAG;AAAA,UAClC,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,sBAAA;AAAA,WACnB;AAAA,SACF;AAAA,QACA,CAAC,iCAAiC,GAAG;AAAA,UACnC,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,sBAAA;AAAA,WACnB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,CAAC,uBAAuB,GAAG;AAAA,UACzB,MAAQ,EAAA,IAAA;AAAA,SACV;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,uBAAuB,GAAG;AAAA,UACzB,MAAQ,EAAA,IAAA;AAAA,SACV;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA,CAAA;AAED,MAAM,UAAa,GAAA;AAAA,EACjB,QAAU,EAAA,UAAA;AAAA,EACV,GAAK,EAAA,KAAA;AAAA,EACL,IAAM,EAAA,KAAA;AAAA,EACN,SAAW,EAAA,sBAAA;AAAA,EACX,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,MACvB,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,KACzB;AAAA,GACF;AACF,CAAA,CAAA;AAEa,MAAA,kBAAA,GAAqBF,2BAAO,CAAAG,8BAAA,EAAc,UAAU,CAAA,CAAA;AAEpD,MAAA,eAAA,GAAkBH,2BAAO,CAAAI,+BAAA,EAAe,UAAU,CAAA,CAAA;AAElD,MAAA,uBAAA,GAA0BJ,2BAAO,CAAAK,2BAAA,EAAW,UAAU,CAAA;;ACpH5D,MAAM,WAAWC,yBAAM,CAAA,UAAA;AAAA,EAI5B,CACE;AAAA,IACE,eAAiB,EAAA,YAAA;AAAA,IACjB,OAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,OAAU,GAAA,iBAAA;AAAA,IACV,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAM,MAAA,CAAC,YAAc,EAAA,eAAe,CAAI,GAAAC,cAAA;AAAA,MACtC,cAAkB,IAAA,IAAA,GAAA,cAAA,GAAA,KAAA;AAAA,KACpB,CAAA;AACA,IAAA,MAAM,kBAAkB,OAAW,IAAA,IAAA,GAAA,OAAA,GAAA,YAAA,CAAA;AACnC,IAAM,MAAA,cAAA,GAAiBC,4BAAW,CAAA,YAAA,IAAA,IAAA,GAAA,YAAA,GAAgB,KAAK,CAAA,CAAA;AACvD,IAAA,MAAM,iBACH,GAAA,CAAA,QAAA,KAAa,IAAQ,IAAA,cAAA,KAAmB,eAAoB,KAAA,KAAA,CAAA;AAC/D,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,IAAM,EAAA,SAAA;AAAA,MACN,KAAO,EAAA,WAAA;AAAA,KACT,CAAA;AAEA,IACE,uBAAAC,cAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,eAAe,EAAA,YAAA;AAAA,QACf,oBAAA,EAAoB,OAAY,KAAA,eAAA,GAAkB,EAAK,GAAA,KAAA,CAAA;AAAA,QACvD,OAAS,EAAA,eAAA;AAAA,QACT,cAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,OAAA;AAAA,QACA,SAAS,CAAK,CAAA,KAAA;AACZ,UAAA,IAAI,cAAgB,EAAA;AAClB,YAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,YAAA,OAAA;AAAA,WACF;AACA,UAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AAAA,SACZ;AAAA,QACA,eAAA,EAAiB,CAACC,QAAqB,KAAA;AAhI/C,UAAA,IAAA,EAAA,CAAA;AAiIU,UAAA,eAAA,CAAgBA,QAAO,CAAA,CAAA;AAEvB,UAAmB,CAAA,EAAA,GAAA,kBAAA,CAAA,EAAA,CAAG,OAAAA,QAAtB,CAAA,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,kBAAA,CAAA,CAAA;AAAA,SACF;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QAEL,0CAAC,qBACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAAC,eAAA,CAACC,uBACE,EAAA,EAAA,QAAA,EAAA;AAAA,YAAoB,eAAA,KAAA,eAAA,oBAClBH,cAAA,CAAA,uBAAA,EAAA,EAAwB,IAAY,EAAA,CAAA;AAAA,YAEtC,eAAoB,KAAA,IAAA,oBAASA,cAAA,CAAA,eAAA,EAAA,EAAgB,IAAY,EAAA,CAAA;AAAA,WAC5D,EAAA,CAAA;AAAA,UACC,iBACC,oBAAAA,cAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,MAAA,EAAQ,IAAS,KAAA,OAAA,GAAU,MAAS,GAAA,KAAA,CAAA;AAAA,cACpC,IAAA;AAAA,aAAA;AAAA,WACF;AAAA,SAEJ,EAAA,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"main.js","sources":["../src/checkbox.styled.tsx","../src/checkbox.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-checkbox'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport {\n IconProhibit,\n IconCheckMark,\n IconMinus,\n} from '@mirohq/design-system-icons'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledCheckboxContent = styled(Primitive.div, {\n display: 'block',\n pointerEvents: 'none',\n borderRadius: '$50',\n position: 'relative',\n margin: 'auto',\n boxSizing: 'border-box',\n})\n\nconst checkboxContentSelector = `& ${StyledCheckboxContent}`\n\nconst checkedAndIndeterminate = '&[aria-checked=true], &[data-indeterminate]'\nconst ariaDisabledCheckedIndeterminate = [\n '&[aria-disabled=true][aria-checked=true]',\n '&:disabled[aria-checked=true]',\n '&[aria-disabled=true][data-indeterminate]',\n '&:disabled[data-indeterminate]',\n].join(' ,')\nconst hoverCheckedIndeterminate =\n '&:hover[aria-checked=true], &:hover[data-indeterminate]'\nconst ariaDisabledUnChecked =\n '&[aria-disabled=true][aria-checked=false], &:disabled[aria-checked=false]'\nconst hoverCheckedIndeterminateDisabled = [\n '&:hover[aria-checked=true][aria-disabled=true]',\n '&:hover[aria-checked=true]&:disabled',\n '&:hover[data-indeterminate][aria-disabled=true]',\n '&:hover[data-indeterminate]&:disabled',\n].join(' ,')\n\nconst hoverAriaDisabled = [\n '&:hover[aria-checked=false][aria-disabled=true]',\n '&:hover[aria-checked=false]&:disabled',\n ...hoverCheckedIndeterminateDisabled.split(' ,'),\n].join(' ,')\n\nexport const StyledCheckbox = styled(Root, {\n all: 'unset',\n square: '$6',\n color: '$icon-primary-inverted',\n cursor: 'pointer',\n\n '&[aria-disabled=true], &:disabled': {\n cursor: 'default',\n },\n '&:focus, &[data-focused]': {\n [checkboxContentSelector]: {\n boxShadow: '$focus-controls',\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals-controls-disabled',\n },\n },\n\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals-controls-disabled',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals',\n },\n },\n\n [`${hoverAriaDisabled},${ariaDisabledCheckedIndeterminate},${ariaDisabledUnChecked}`]:\n {\n [checkboxContentSelector]: {\n color: '$icon-neutrals-disabled',\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n variants: {\n variant: {\n 'solid-prominent': {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-neutrals-controls',\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-prominent-hover',\n },\n },\n '&:hover[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-primary',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n border: '1px solid $border-neutrals-controls-disabled',\n },\n },\n },\n 'solid-subtle': {\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary',\n },\n },\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n '@media (forced-colors: active)': {\n border: '1px solid transparent',\n },\n },\n },\n [`${hoverCheckedIndeterminate}, &:hover[aria-checked=false]`]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals-controls-disabled',\n },\n },\n },\n ghost: {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n '@media (forced-colors: active)': {\n border: '1px solid transparent',\n },\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-primary',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-primary-hover',\n },\n },\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals',\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals',\n },\n },\n },\n },\n size: {\n large: {\n [checkboxContentSelector]: {\n square: '$5',\n },\n },\n small: {\n [checkboxContentSelector]: {\n square: '$4',\n },\n },\n },\n },\n})\n\nconst markStyles = {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%,-50%)',\n variants: {\n size: {\n large: { width: '18px' },\n small: { width: '12px' },\n },\n },\n}\n\nexport const StyledDisabledMark = styled(IconProhibit, markStyles)\n\nexport const StyledCheckMark = styled(IconCheckMark, markStyles)\n\nexport const StyledIndeterminateMark = styled(IconMinus, markStyles)\n\nexport type StyledCheckboxProps = StrictComponentProps<typeof StyledCheckbox>\n","import React, { useState } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { Indicator as RadixIndicator } from '@radix-ui/react-checkbox'\nimport type { ElementRef } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nimport {\n StyledCheckboxContent,\n StyledCheckbox,\n StyledCheckMark,\n StyledDisabledMark,\n StyledIndeterminateMark,\n} from './checkbox.styled'\nimport type { StyledCheckboxProps } from './checkbox.styled'\n\nexport interface CheckboxProps extends StyledCheckboxProps {\n /**\n * The checked state of the checkbox when it is initially rendered. Use when\n * you do not need to control its checked state.\n */\n defaultChecked?: boolean\n\n /**\n * The style of the checkbox.\n * @default 'solid-prominent'\n */\n variant?: StyledCheckboxProps['variant']\n\n /**\n * The size of the checkbox.\n * @default 'large'\n */\n size?: StyledCheckboxProps['size']\n\n /**\n * The controlled checked state of the checkbox. Must be used in conjunction\n * with onChecked and onUnchecked.\n */\n checked?: boolean | 'indeterminate'\n\n /**\n * When true, indicates that the user must check the checkbox before the\n * owning form can be submitted.\n */\n required?: boolean\n\n /**\n * The name of the checkbox. Submitted with its owning form as part of a\n * name/value pair.\n */\n name?: string\n\n /**\n * The value given as data when submitted with a name.\n */\n value?: string\n\n /**\n * When true, prevents the user from interacting with the checkbox.\n */\n disabled?: boolean\n\n /**\n * Event handler called when the checked state equals true.\n */\n onChecked?: () => void\n\n /**\n * Event handler called when the checked state equals false.\n */\n onUnchecked?: () => void\n\n /**\n * When true, prevents the user from interacting with the checkbox but focus\n * is still possible.\n */\n 'aria-disabled'?: Booleanish\n}\n\nexport const Checkbox = React.forwardRef<\n ElementRef<typeof StyledCheckbox>,\n CheckboxProps\n>(\n (\n {\n 'aria-disabled': ariaDisabled,\n checked,\n defaultChecked,\n disabled,\n onChecked,\n onUnchecked,\n onClick,\n onKeyDown,\n size = 'large',\n variant = 'solid-prominent',\n ...restProps\n },\n forwardRef\n ) => {\n const [checkedState, setCheckedState] = useState<CheckboxProps['checked']>(\n defaultChecked ?? false\n )\n const internalChecked = checked ?? checkedState\n const isAriaDisabled = booleanify(ariaDisabled ?? false)\n const disabledUnchecked =\n (disabled === true || isAriaDisabled) && internalChecked === false\n const checkedStateEvents = {\n true: onChecked,\n false: onUnchecked,\n }\n\n return (\n <StyledCheckbox\n {...restProps}\n aria-disabled={ariaDisabled}\n data-indeterminate={checked === 'indeterminate' ? '' : undefined}\n checked={internalChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n size={size}\n variant={variant}\n onClick={e => {\n if (isAriaDisabled) {\n e.preventDefault()\n return\n }\n onClick?.(e)\n }}\n onCheckedChange={(checked: boolean) => {\n setCheckedState(checked)\n\n checkedStateEvents[`${checked}`]?.()\n }}\n ref={forwardRef}\n >\n <StyledCheckboxContent>\n <RadixIndicator>\n {internalChecked === 'indeterminate' && (\n <StyledIndeterminateMark size={size} />\n )}\n {internalChecked === true && <StyledCheckMark size={size} />}\n </RadixIndicator>\n {disabledUnchecked && (\n <StyledDisabledMark\n weight={size === 'small' ? 'thin' : undefined}\n size={size}\n />\n )}\n </StyledCheckboxContent>\n </StyledCheckbox>\n )\n }\n)\n"],"names":["styled","Primitive","Root","IconProhibit","IconCheckMark","IconMinus","React","useState","booleanify","jsx","checked","jsxs","RadixIndicator"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -56,21 +56,22 @@ const StyledCheckbox = styled(Root, {
56
56
  backgroundColor: "$background-neutrals-controls-disabled"
57
57
  }
58
58
  },
59
- [hoverAriaDisabled]: {
59
+ [ariaDisabledCheckedIndeterminate]: {
60
60
  [checkboxContentSelector]: {
61
- color: "$icon-neutrals-disabled"
61
+ backgroundColor: "$background-neutrals-controls-disabled"
62
62
  }
63
63
  },
64
- [ariaDisabledCheckedIndeterminate]: {
64
+ [ariaDisabledUnChecked]: {
65
65
  [checkboxContentSelector]: {
66
- backgroundColor: "$background-neutrals-controls-disabled",
67
- color: "$icon-neutrals-disabled"
66
+ backgroundColor: "$background-neutrals"
68
67
  }
69
68
  },
70
- [ariaDisabledUnChecked]: {
69
+ ["".concat(hoverAriaDisabled, ",").concat(ariaDisabledCheckedIndeterminate, ",").concat(ariaDisabledUnChecked)]: {
71
70
  [checkboxContentSelector]: {
72
- backgroundColor: "$background-neutrals",
73
- color: "$icon-neutrals-disabled"
71
+ color: "$icon-neutrals-disabled",
72
+ "@media (forced-colors: active)": {
73
+ color: "GrayText"
74
+ }
74
75
  }
75
76
  },
76
77
  variants: {
@@ -112,7 +113,10 @@ const StyledCheckbox = styled(Root, {
112
113
  },
113
114
  "&[aria-checked=false]": {
114
115
  [checkboxContentSelector]: {
115
- backgroundColor: "$background-primary-subtle"
116
+ backgroundColor: "$background-primary-subtle",
117
+ "@media (forced-colors: active)": {
118
+ border: "1px solid transparent"
119
+ }
116
120
  }
117
121
  },
118
122
  ["".concat(hoverCheckedIndeterminate, ", &:hover[aria-checked=false]")]: {
@@ -128,6 +132,13 @@ const StyledCheckbox = styled(Root, {
128
132
  }
129
133
  },
130
134
  ghost: {
135
+ "&[aria-checked=false]": {
136
+ [checkboxContentSelector]: {
137
+ "@media (forced-colors: active)": {
138
+ border: "1px solid transparent"
139
+ }
140
+ }
141
+ },
131
142
  [checkedAndIndeterminate]: {
132
143
  [checkboxContentSelector]: {
133
144
  color: "$icon-primary"
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/checkbox.styled.tsx","../src/checkbox.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-checkbox'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport {\n IconProhibit,\n IconCheckMark,\n IconMinus,\n} from '@mirohq/design-system-icons'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledCheckboxContent = styled(Primitive.div, {\n display: 'block',\n pointerEvents: 'none',\n borderRadius: '$50',\n position: 'relative',\n margin: 'auto',\n boxSizing: 'border-box',\n})\n\nconst checkboxContentSelector = `& ${StyledCheckboxContent}`\n\nconst checkedAndIndeterminate = '&[aria-checked=true], &[data-indeterminate]'\nconst ariaDisabledCheckedIndeterminate = [\n '&[aria-disabled=true][aria-checked=true]',\n '&:disabled[aria-checked=true]',\n '&[aria-disabled=true][data-indeterminate]',\n '&:disabled[data-indeterminate]',\n].join(' ,')\nconst hoverCheckedIndeterminate =\n '&:hover[aria-checked=true], &:hover[data-indeterminate]'\nconst ariaDisabledUnChecked =\n '&[aria-disabled=true][aria-checked=false], &:disabled[aria-checked=false]'\nconst hoverCheckedIndeterminateDisabled = [\n '&:hover[aria-checked=true][aria-disabled=true]',\n '&:hover[aria-checked=true]&:disabled',\n '&:hover[data-indeterminate][aria-disabled=true]',\n '&:hover[data-indeterminate]&:disabled',\n].join(' ,')\n\nconst hoverAriaDisabled = [\n '&:hover[aria-checked=false][aria-disabled=true]',\n '&:hover[aria-checked=false]&:disabled',\n ...hoverCheckedIndeterminateDisabled.split(' ,'),\n].join(' ,')\n\nexport const StyledCheckbox = styled(Root, {\n all: 'unset',\n square: '$6',\n color: '$icon-primary-inverted',\n cursor: 'pointer',\n\n '&[aria-disabled=true], &:disabled': {\n cursor: 'default',\n },\n '&:focus, &[data-focused]': {\n [checkboxContentSelector]: {\n boxShadow: '$focus-controls',\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals-controls-disabled',\n },\n },\n\n [hoverAriaDisabled]: {\n [checkboxContentSelector]: {\n color: '$icon-neutrals-disabled',\n },\n },\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals-controls-disabled',\n color: '$icon-neutrals-disabled',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals-disabled',\n },\n },\n variants: {\n variant: {\n 'solid-prominent': {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-neutrals-controls',\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-prominent-hover',\n },\n },\n '&:hover[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-primary',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n border: '1px solid $border-neutrals-controls-disabled',\n },\n },\n },\n 'solid-subtle': {\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary',\n },\n },\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n },\n },\n [`${hoverCheckedIndeterminate}, &:hover[aria-checked=false]`]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals-controls-disabled',\n },\n },\n },\n ghost: {\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-primary',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-primary-hover',\n },\n },\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals',\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals',\n },\n },\n },\n },\n size: {\n large: {\n [checkboxContentSelector]: {\n square: '$5',\n },\n },\n small: {\n [checkboxContentSelector]: {\n square: '$4',\n },\n },\n },\n },\n})\n\nconst markStyles = {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%,-50%)',\n variants: {\n size: {\n large: { width: '18px' },\n small: { width: '12px' },\n },\n },\n}\n\nexport const StyledDisabledMark = styled(IconProhibit, markStyles)\n\nexport const StyledCheckMark = styled(IconCheckMark, markStyles)\n\nexport const StyledIndeterminateMark = styled(IconMinus, markStyles)\n\nexport type StyledCheckboxProps = StrictComponentProps<typeof StyledCheckbox>\n","import React, { useState } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { Indicator as RadixIndicator } from '@radix-ui/react-checkbox'\nimport type { ElementRef } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nimport {\n StyledCheckboxContent,\n StyledCheckbox,\n StyledCheckMark,\n StyledDisabledMark,\n StyledIndeterminateMark,\n} from './checkbox.styled'\nimport type { StyledCheckboxProps } from './checkbox.styled'\n\nexport interface CheckboxProps extends StyledCheckboxProps {\n /**\n * The checked state of the checkbox when it is initially rendered. Use when\n * you do not need to control its checked state.\n */\n defaultChecked?: boolean\n\n /**\n * The style of the checkbox.\n * @default 'solid-prominent'\n */\n variant?: StyledCheckboxProps['variant']\n\n /**\n * The size of the checkbox.\n * @default 'large'\n */\n size?: StyledCheckboxProps['size']\n\n /**\n * The controlled checked state of the checkbox. Must be used in conjunction\n * with onChecked and onUnchecked.\n */\n checked?: boolean | 'indeterminate'\n\n /**\n * When true, indicates that the user must check the checkbox before the\n * owning form can be submitted.\n */\n required?: boolean\n\n /**\n * The name of the checkbox. Submitted with its owning form as part of a\n * name/value pair.\n */\n name?: string\n\n /**\n * The value given as data when submitted with a name.\n */\n value?: string\n\n /**\n * When true, prevents the user from interacting with the checkbox.\n */\n disabled?: boolean\n\n /**\n * Event handler called when the checked state equals true.\n */\n onChecked?: () => void\n\n /**\n * Event handler called when the checked state equals false.\n */\n onUnchecked?: () => void\n\n /**\n * When true, prevents the user from interacting with the checkbox but focus\n * is still possible.\n */\n 'aria-disabled'?: Booleanish\n}\n\nexport const Checkbox = React.forwardRef<\n ElementRef<typeof StyledCheckbox>,\n CheckboxProps\n>(\n (\n {\n 'aria-disabled': ariaDisabled,\n checked,\n defaultChecked,\n disabled,\n onChecked,\n onUnchecked,\n onClick,\n onKeyDown,\n size = 'large',\n variant = 'solid-prominent',\n ...restProps\n },\n forwardRef\n ) => {\n const [checkedState, setCheckedState] = useState<CheckboxProps['checked']>(\n defaultChecked ?? false\n )\n const internalChecked = checked ?? checkedState\n const isAriaDisabled = booleanify(ariaDisabled ?? false)\n const disabledUnchecked =\n (disabled === true || isAriaDisabled) && internalChecked === false\n const checkedStateEvents = {\n true: onChecked,\n false: onUnchecked,\n }\n\n return (\n <StyledCheckbox\n {...restProps}\n aria-disabled={ariaDisabled}\n data-indeterminate={checked === 'indeterminate' ? '' : undefined}\n checked={internalChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n size={size}\n variant={variant}\n onClick={e => {\n if (isAriaDisabled) {\n e.preventDefault()\n return\n }\n onClick?.(e)\n }}\n onCheckedChange={(checked: boolean) => {\n setCheckedState(checked)\n\n checkedStateEvents[`${checked}`]?.()\n }}\n ref={forwardRef}\n >\n <StyledCheckboxContent>\n <RadixIndicator>\n {internalChecked === 'indeterminate' && (\n <StyledIndeterminateMark size={size} />\n )}\n {internalChecked === true && <StyledCheckMark size={size} />}\n </RadixIndicator>\n {disabledUnchecked && (\n <StyledDisabledMark\n weight={size === 'small' ? 'thin' : undefined}\n size={size}\n />\n )}\n </StyledCheckboxContent>\n </StyledCheckbox>\n )\n }\n)\n"],"names":["checked","RadixIndicator"],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/checkbox.styled.tsx","../src/checkbox.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-checkbox'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport {\n IconProhibit,\n IconCheckMark,\n IconMinus,\n} from '@mirohq/design-system-icons'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledCheckboxContent = styled(Primitive.div, {\n display: 'block',\n pointerEvents: 'none',\n borderRadius: '$50',\n position: 'relative',\n margin: 'auto',\n boxSizing: 'border-box',\n})\n\nconst checkboxContentSelector = `& ${StyledCheckboxContent}`\n\nconst checkedAndIndeterminate = '&[aria-checked=true], &[data-indeterminate]'\nconst ariaDisabledCheckedIndeterminate = [\n '&[aria-disabled=true][aria-checked=true]',\n '&:disabled[aria-checked=true]',\n '&[aria-disabled=true][data-indeterminate]',\n '&:disabled[data-indeterminate]',\n].join(' ,')\nconst hoverCheckedIndeterminate =\n '&:hover[aria-checked=true], &:hover[data-indeterminate]'\nconst ariaDisabledUnChecked =\n '&[aria-disabled=true][aria-checked=false], &:disabled[aria-checked=false]'\nconst hoverCheckedIndeterminateDisabled = [\n '&:hover[aria-checked=true][aria-disabled=true]',\n '&:hover[aria-checked=true]&:disabled',\n '&:hover[data-indeterminate][aria-disabled=true]',\n '&:hover[data-indeterminate]&:disabled',\n].join(' ,')\n\nconst hoverAriaDisabled = [\n '&:hover[aria-checked=false][aria-disabled=true]',\n '&:hover[aria-checked=false]&:disabled',\n ...hoverCheckedIndeterminateDisabled.split(' ,'),\n].join(' ,')\n\nexport const StyledCheckbox = styled(Root, {\n all: 'unset',\n square: '$6',\n color: '$icon-primary-inverted',\n cursor: 'pointer',\n\n '&[aria-disabled=true], &:disabled': {\n cursor: 'default',\n },\n '&:focus, &[data-focused]': {\n [checkboxContentSelector]: {\n boxShadow: '$focus-controls',\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals-controls-disabled',\n },\n },\n\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals-controls-disabled',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals',\n },\n },\n\n [`${hoverAriaDisabled},${ariaDisabledCheckedIndeterminate},${ariaDisabledUnChecked}`]:\n {\n [checkboxContentSelector]: {\n color: '$icon-neutrals-disabled',\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n variants: {\n variant: {\n 'solid-prominent': {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-neutrals-controls',\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-prominent-hover',\n },\n },\n '&:hover[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-primary',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n border: '1px solid $border-neutrals-controls-disabled',\n },\n },\n },\n 'solid-subtle': {\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary',\n },\n },\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n '@media (forced-colors: active)': {\n border: '1px solid transparent',\n },\n },\n },\n [`${hoverCheckedIndeterminate}, &:hover[aria-checked=false]`]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals-controls-disabled',\n },\n },\n },\n ghost: {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n '@media (forced-colors: active)': {\n border: '1px solid transparent',\n },\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-primary',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-primary-hover',\n },\n },\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals',\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-neutrals',\n },\n },\n },\n },\n size: {\n large: {\n [checkboxContentSelector]: {\n square: '$5',\n },\n },\n small: {\n [checkboxContentSelector]: {\n square: '$4',\n },\n },\n },\n },\n})\n\nconst markStyles = {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%,-50%)',\n variants: {\n size: {\n large: { width: '18px' },\n small: { width: '12px' },\n },\n },\n}\n\nexport const StyledDisabledMark = styled(IconProhibit, markStyles)\n\nexport const StyledCheckMark = styled(IconCheckMark, markStyles)\n\nexport const StyledIndeterminateMark = styled(IconMinus, markStyles)\n\nexport type StyledCheckboxProps = StrictComponentProps<typeof StyledCheckbox>\n","import React, { useState } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { Indicator as RadixIndicator } from '@radix-ui/react-checkbox'\nimport type { ElementRef } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nimport {\n StyledCheckboxContent,\n StyledCheckbox,\n StyledCheckMark,\n StyledDisabledMark,\n StyledIndeterminateMark,\n} from './checkbox.styled'\nimport type { StyledCheckboxProps } from './checkbox.styled'\n\nexport interface CheckboxProps extends StyledCheckboxProps {\n /**\n * The checked state of the checkbox when it is initially rendered. Use when\n * you do not need to control its checked state.\n */\n defaultChecked?: boolean\n\n /**\n * The style of the checkbox.\n * @default 'solid-prominent'\n */\n variant?: StyledCheckboxProps['variant']\n\n /**\n * The size of the checkbox.\n * @default 'large'\n */\n size?: StyledCheckboxProps['size']\n\n /**\n * The controlled checked state of the checkbox. Must be used in conjunction\n * with onChecked and onUnchecked.\n */\n checked?: boolean | 'indeterminate'\n\n /**\n * When true, indicates that the user must check the checkbox before the\n * owning form can be submitted.\n */\n required?: boolean\n\n /**\n * The name of the checkbox. Submitted with its owning form as part of a\n * name/value pair.\n */\n name?: string\n\n /**\n * The value given as data when submitted with a name.\n */\n value?: string\n\n /**\n * When true, prevents the user from interacting with the checkbox.\n */\n disabled?: boolean\n\n /**\n * Event handler called when the checked state equals true.\n */\n onChecked?: () => void\n\n /**\n * Event handler called when the checked state equals false.\n */\n onUnchecked?: () => void\n\n /**\n * When true, prevents the user from interacting with the checkbox but focus\n * is still possible.\n */\n 'aria-disabled'?: Booleanish\n}\n\nexport const Checkbox = React.forwardRef<\n ElementRef<typeof StyledCheckbox>,\n CheckboxProps\n>(\n (\n {\n 'aria-disabled': ariaDisabled,\n checked,\n defaultChecked,\n disabled,\n onChecked,\n onUnchecked,\n onClick,\n onKeyDown,\n size = 'large',\n variant = 'solid-prominent',\n ...restProps\n },\n forwardRef\n ) => {\n const [checkedState, setCheckedState] = useState<CheckboxProps['checked']>(\n defaultChecked ?? false\n )\n const internalChecked = checked ?? checkedState\n const isAriaDisabled = booleanify(ariaDisabled ?? false)\n const disabledUnchecked =\n (disabled === true || isAriaDisabled) && internalChecked === false\n const checkedStateEvents = {\n true: onChecked,\n false: onUnchecked,\n }\n\n return (\n <StyledCheckbox\n {...restProps}\n aria-disabled={ariaDisabled}\n data-indeterminate={checked === 'indeterminate' ? '' : undefined}\n checked={internalChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n size={size}\n variant={variant}\n onClick={e => {\n if (isAriaDisabled) {\n e.preventDefault()\n return\n }\n onClick?.(e)\n }}\n onCheckedChange={(checked: boolean) => {\n setCheckedState(checked)\n\n checkedStateEvents[`${checked}`]?.()\n }}\n ref={forwardRef}\n >\n <StyledCheckboxContent>\n <RadixIndicator>\n {internalChecked === 'indeterminate' && (\n <StyledIndeterminateMark size={size} />\n )}\n {internalChecked === true && <StyledCheckMark size={size} />}\n </RadixIndicator>\n {disabledUnchecked && (\n <StyledDisabledMark\n weight={size === 'small' ? 'thin' : undefined}\n size={size}\n />\n )}\n </StyledCheckboxContent>\n </StyledCheckbox>\n )\n }\n)\n"],"names":["checked","RadixIndicator"],"mappings":";;;;;;;;AAUa,MAAA,qBAAA,GAAwB,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EACzD,OAAS,EAAA,OAAA;AAAA,EACT,aAAe,EAAA,MAAA;AAAA,EACf,YAAc,EAAA,KAAA;AAAA,EACd,QAAU,EAAA,UAAA;AAAA,EACV,MAAQ,EAAA,MAAA;AAAA,EACR,SAAW,EAAA,YAAA;AACb,CAAC,CAAA,CAAA;AAED,MAAM,0BAA0B,IAAK,CAAA,MAAA,CAAA,qBAAA,CAAA,CAAA;AAErC,MAAM,uBAA0B,GAAA,6CAAA,CAAA;AAChC,MAAM,gCAAmC,GAAA;AAAA,EACvC,0CAAA;AAAA,EACA,+BAAA;AAAA,EACA,2CAAA;AAAA,EACA,gCAAA;AACF,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AACX,MAAM,yBACJ,GAAA,yDAAA,CAAA;AACF,MAAM,qBACJ,GAAA,2EAAA,CAAA;AACF,MAAM,iCAAoC,GAAA;AAAA,EACxC,gDAAA;AAAA,EACA,sCAAA;AAAA,EACA,iDAAA;AAAA,EACA,uCAAA;AACF,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AAEX,MAAM,iBAAoB,GAAA;AAAA,EACxB,iDAAA;AAAA,EACA,uCAAA;AAAA,EACA,GAAG,iCAAkC,CAAA,KAAA,CAAM,IAAI,CAAA;AACjD,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AAEE,MAAA,cAAA,GAAiB,OAAO,IAAM,EAAA;AAAA,EACzC,GAAK,EAAA,OAAA;AAAA,EACL,MAAQ,EAAA,IAAA;AAAA,EACR,KAAO,EAAA,wBAAA;AAAA,EACP,MAAQ,EAAA,SAAA;AAAA,EAER,mCAAqC,EAAA;AAAA,IACnC,MAAQ,EAAA,SAAA;AAAA,GACV;AAAA,EACA,0BAA4B,EAAA;AAAA,IAC1B,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAW,EAAA,iBAAA;AAAA,MAEX,gCAAkC,EAAA;AAAA,QAChC,OAAS,EAAA,iBAAA;AAAA,OACX;AAAA,KACF;AAAA,GACF;AAAA,EACA,CAAC,iCAAiC,GAAG;AAAA,IACnC,CAAC,uBAAuB,GAAG;AAAA,MACzB,eAAiB,EAAA,wCAAA;AAAA,KACnB;AAAA,GACF;AAAA,EAEA,CAAC,gCAAgC,GAAG;AAAA,IAClC,CAAC,uBAAuB,GAAG;AAAA,MACzB,eAAiB,EAAA,wCAAA;AAAA,KACnB;AAAA,GACF;AAAA,EACA,CAAC,qBAAqB,GAAG;AAAA,IACvB,CAAC,uBAAuB,GAAG;AAAA,MACzB,eAAiB,EAAA,sBAAA;AAAA,KACnB;AAAA,GACF;AAAA,EAEA,CAAC,EAAG,CAAA,MAAA,CAAA,iBAAA,EAAiB,KAAI,MAAgC,CAAA,gCAAA,EAAA,GAAA,CAAA,CAAI,6BAAuB,GAClF;AAAA,IACE,CAAC,uBAAuB,GAAG;AAAA,MACzB,KAAO,EAAA,yBAAA;AAAA,MACP,gCAAkC,EAAA;AAAA,QAChC,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AAAA,EACF,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,iBAAmB,EAAA;AAAA,QACjB,uBAAyB,EAAA;AAAA,UACvB,CAAC,uBAAuB,GAAG;AAAA,YACzB,MAAQ,EAAA,qCAAA;AAAA,WACV;AAAA,SACF;AAAA,QACA,CAAC,uBAAuB,GAAG;AAAA,UACzB,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,+BAAA;AAAA,YACjB,KAAO,EAAA,wBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,CAAC,yBAAyB,GAAG;AAAA,UAC3B,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,qCAAA;AAAA,WACnB;AAAA,SACF;AAAA,QACA,6BAA+B,EAAA;AAAA,UAC7B,CAAC,uBAAuB,GAAG;AAAA,YACzB,MAAQ,EAAA,2BAAA;AAAA,WACV;AAAA,SACF;AAAA,QACA,CAAC,qBAAqB,GAAG;AAAA,UACvB,CAAC,uBAAuB,GAAG;AAAA,YACzB,MAAQ,EAAA,8CAAA;AAAA,WACV;AAAA,SACF;AAAA,OACF;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,CAAC,uBAAuB,GAAG;AAAA,UACzB,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,4BAAA;AAAA,YACjB,KAAO,EAAA,eAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,uBAAyB,EAAA;AAAA,UACvB,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,4BAAA;AAAA,YACjB,gCAAkC,EAAA;AAAA,cAChC,MAAQ,EAAA,uBAAA;AAAA,aACV;AAAA,WACF;AAAA,SACF;AAAA,QACA,CAAC,EAAA,CAAG,MAAyB,CAAA,yBAAA,EAAA,+BAAA,CAA+B,GAAG;AAAA,UAC7D,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,kCAAA;AAAA,YACjB,KAAO,EAAA,qBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,CAAC,qBAAqB,GAAG;AAAA,UACvB,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,wCAAA;AAAA,WACnB;AAAA,SACF;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,uBAAyB,EAAA;AAAA,UACvB,CAAC,uBAAuB,GAAG;AAAA,YACzB,gCAAkC,EAAA;AAAA,cAChC,MAAQ,EAAA,uBAAA;AAAA,aACV;AAAA,WACF;AAAA,SACF;AAAA,QACA,CAAC,uBAAuB,GAAG;AAAA,UACzB,CAAC,uBAAuB,GAAG;AAAA,YACzB,KAAO,EAAA,eAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,CAAC,yBAAyB,GAAG;AAAA,UAC3B,CAAC,uBAAuB,GAAG;AAAA,YACzB,KAAO,EAAA,qBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,CAAC,gCAAgC,GAAG;AAAA,UAClC,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,sBAAA;AAAA,WACnB;AAAA,SACF;AAAA,QACA,CAAC,iCAAiC,GAAG;AAAA,UACnC,CAAC,uBAAuB,GAAG;AAAA,YACzB,eAAiB,EAAA,sBAAA;AAAA,WACnB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,CAAC,uBAAuB,GAAG;AAAA,UACzB,MAAQ,EAAA,IAAA;AAAA,SACV;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,uBAAuB,GAAG;AAAA,UACzB,MAAQ,EAAA,IAAA;AAAA,SACV;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA,CAAA;AAED,MAAM,UAAa,GAAA;AAAA,EACjB,QAAU,EAAA,UAAA;AAAA,EACV,GAAK,EAAA,KAAA;AAAA,EACL,IAAM,EAAA,KAAA;AAAA,EACN,SAAW,EAAA,sBAAA;AAAA,EACX,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,MACvB,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,KACzB;AAAA,GACF;AACF,CAAA,CAAA;AAEa,MAAA,kBAAA,GAAqB,MAAO,CAAA,YAAA,EAAc,UAAU,CAAA,CAAA;AAEpD,MAAA,eAAA,GAAkB,MAAO,CAAA,aAAA,EAAe,UAAU,CAAA,CAAA;AAElD,MAAA,uBAAA,GAA0B,MAAO,CAAA,SAAA,EAAW,UAAU,CAAA;;ACjI5D,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EAI5B,CACE;AAAA,IACE,eAAiB,EAAA,YAAA;AAAA,IACjB,OAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,OAAU,GAAA,iBAAA;AAAA,IACV,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAM,MAAA,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,QAAA;AAAA,MACtC,cAAkB,IAAA,IAAA,GAAA,cAAA,GAAA,KAAA;AAAA,KACpB,CAAA;AACA,IAAA,MAAM,kBAAkB,OAAW,IAAA,IAAA,GAAA,OAAA,GAAA,YAAA,CAAA;AACnC,IAAM,MAAA,cAAA,GAAiB,UAAW,CAAA,YAAA,IAAA,IAAA,GAAA,YAAA,GAAgB,KAAK,CAAA,CAAA;AACvD,IAAA,MAAM,iBACH,GAAA,CAAA,QAAA,KAAa,IAAQ,IAAA,cAAA,KAAmB,eAAoB,KAAA,KAAA,CAAA;AAC/D,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,IAAM,EAAA,SAAA;AAAA,MACN,KAAO,EAAA,WAAA;AAAA,KACT,CAAA;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,eAAe,EAAA,YAAA;AAAA,QACf,oBAAA,EAAoB,OAAY,KAAA,eAAA,GAAkB,EAAK,GAAA,KAAA,CAAA;AAAA,QACvD,OAAS,EAAA,eAAA;AAAA,QACT,cAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,OAAA;AAAA,QACA,SAAS,CAAK,CAAA,KAAA;AACZ,UAAA,IAAI,cAAgB,EAAA;AAClB,YAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,YAAA,OAAA;AAAA,WACF;AACA,UAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AAAA,SACZ;AAAA,QACA,eAAA,EAAiB,CAACA,QAAqB,KAAA;AAhI/C,UAAA,IAAA,EAAA,CAAA;AAiIU,UAAA,eAAA,CAAgBA,QAAO,CAAA,CAAA;AAEvB,UAAmB,CAAA,EAAA,GAAA,kBAAA,CAAA,EAAA,CAAG,OAAAA,QAAtB,CAAA,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,kBAAA,CAAA,CAAA;AAAA,SACF;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QAEL,+BAAC,qBACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAACC,SACE,EAAA,EAAA,QAAA,EAAA;AAAA,YAAoB,eAAA,KAAA,eAAA,oBAClB,GAAA,CAAA,uBAAA,EAAA,EAAwB,IAAY,EAAA,CAAA;AAAA,YAEtC,eAAoB,KAAA,IAAA,oBAAS,GAAA,CAAA,eAAA,EAAA,EAAgB,IAAY,EAAA,CAAA;AAAA,WAC5D,EAAA,CAAA;AAAA,UACC,iBACC,oBAAA,GAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,MAAA,EAAQ,IAAS,KAAA,OAAA,GAAU,MAAS,GAAA,KAAA,CAAA;AAAA,cACpC,IAAA;AAAA,aAAA;AAAA,WACF;AAAA,SAEJ,EAAA,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}
package/dist/types.d.ts CHANGED
@@ -258,17 +258,17 @@ declare const StyledCheckbox: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_
258
258
  readonly body: "Open Sans, sans-serif";
259
259
  };
260
260
  radii: {
261
+ readonly 0: "0px";
261
262
  readonly 25: "2px";
262
263
  readonly 50: "4px";
263
264
  readonly 75: "6px";
264
265
  readonly 100: "8px";
265
266
  readonly 200: "16px";
266
- readonly half: "999px";
267
- readonly none: "0px";
267
+ readonly round: "999px";
268
268
  };
269
269
  shadows: {
270
- 50: any;
271
270
  100: any;
271
+ 50: any;
272
272
  "focus-small": any;
273
273
  "focus-small-outline": any;
274
274
  "focus-large": any;
@@ -298,48 +298,6 @@ declare const StyledCheckbox: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_
298
298
  readonly 1200: "96px";
299
299
  readonly 1600: "128px";
300
300
  };
301
- 'space-gap': {
302
- readonly 0: any;
303
- readonly 50: any;
304
- readonly 100: any;
305
- readonly 200: any;
306
- readonly 300: any;
307
- };
308
- 'space-inset': {
309
- readonly 0: any;
310
- readonly 50: any;
311
- readonly 100: any;
312
- readonly 150: any;
313
- readonly 200: any;
314
- readonly 300: any;
315
- readonly 400: any;
316
- readonly 500: any;
317
- readonly 600: any;
318
- readonly 700: any;
319
- readonly 800: any;
320
- readonly 1200: any;
321
- readonly 1600: any;
322
- };
323
- 'space-offset': {
324
- readonly 0: any;
325
- readonly 50: any;
326
- readonly 100: any;
327
- readonly 150: any;
328
- readonly 200: any;
329
- readonly 300: any;
330
- readonly 400: any;
331
- readonly 600: any;
332
- readonly 800: any;
333
- readonly 1200: any;
334
- readonly 1600: any;
335
- readonly 'stacking-0': any;
336
- readonly 'stacking-100': any;
337
- readonly 'stacking-200': any;
338
- readonly 'stacking-300': any;
339
- readonly 'stacking-400': any;
340
- readonly 'stacking-500': any;
341
- readonly 'stacking-800': any;
342
- };
343
301
  'stroke-width': {
344
302
  readonly thin: "1.5px";
345
303
  readonly normal: "2px";
@@ -380,7 +338,7 @@ declare const StyledCheckbox: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_
380
338
  readonly borderRightColor: "colors";
381
339
  readonly borderRightStyle: "border-styles";
382
340
  readonly borderRightWidth: "border-widths";
383
- readonly borderSpacing: "space-offset";
341
+ readonly borderSpacing: "space";
384
342
  readonly borderStyle: "border-styles";
385
343
  readonly borderTop: "colors";
386
344
  readonly borderTopColor: "colors";
@@ -393,42 +351,42 @@ declare const StyledCheckbox: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_
393
351
  readonly boxShadow: "shadows";
394
352
  readonly caretColor: "colors";
395
353
  readonly color: "colors";
396
- readonly columnGap: "space-gap";
354
+ readonly columnGap: "space";
397
355
  readonly columnRuleColor: "colors";
398
356
  readonly fill: "colors";
399
357
  readonly flexBasis: "sizes";
400
358
  readonly fontFamily: "fonts";
401
359
  readonly fontSize: "font-sizes";
402
360
  readonly fontWeight: "font-weights";
403
- readonly gap: "space-gap";
404
- readonly gridColumnGap: "space-gap";
405
- readonly gridGap: "space-gap";
406
- readonly gridRowGap: "space-gap";
361
+ readonly gap: "space";
362
+ readonly gridColumnGap: "space";
363
+ readonly gridGap: "space";
364
+ readonly gridRowGap: "space";
407
365
  readonly gridTemplateColumns: "sizes";
408
366
  readonly gridTemplateRows: "sizes";
409
367
  readonly height: "sizes";
410
368
  readonly inlineSize: "sizes";
411
- readonly inset: "space-inset";
412
- readonly insetBlock: "space-inset";
413
- readonly insetBlockEnd: "space-inset";
414
- readonly insetBlockStart: "space-inset";
415
- readonly insetInline: "space-inset";
416
- readonly insetInlineEnd: "space-inset";
417
- readonly insetInlineStart: "space-inset";
369
+ readonly inset: "space";
370
+ readonly insetBlock: "space";
371
+ readonly insetBlockEnd: "space";
372
+ readonly insetBlockStart: "space";
373
+ readonly insetInline: "space";
374
+ readonly insetInlineEnd: "space";
375
+ readonly insetInlineStart: "space";
418
376
  readonly left: "space";
419
377
  readonly letterSpacing: "letter-spacings";
420
378
  readonly lineHeight: "line-heights";
421
- readonly margin: "space-offset";
422
- readonly marginBlock: "space-offset";
423
- readonly marginBlockEnd: "space-offset";
424
- readonly marginBlockStart: "space-offset";
425
- readonly marginBottom: "space-offset";
426
- readonly marginInline: "space-offset";
427
- readonly marginInlineEnd: "space-offset";
428
- readonly marginInlineStart: "space-offset";
429
- readonly marginLeft: "space-offset";
430
- readonly marginRight: "space-offset";
431
- readonly marginTop: "space-offset";
379
+ readonly margin: "space";
380
+ readonly marginBlock: "space";
381
+ readonly marginBlockEnd: "space";
382
+ readonly marginBlockStart: "space";
383
+ readonly marginBottom: "space";
384
+ readonly marginInline: "space";
385
+ readonly marginInlineEnd: "space";
386
+ readonly marginInlineStart: "space";
387
+ readonly marginLeft: "space";
388
+ readonly marginRight: "space";
389
+ readonly marginTop: "space";
432
390
  readonly maxBlockSize: "sizes";
433
391
  readonly maxHeight: "sizes";
434
392
  readonly maxInlineSize: "sizes";
@@ -439,41 +397,41 @@ declare const StyledCheckbox: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_
439
397
  readonly minWidth: "sizes";
440
398
  readonly outline: "colors";
441
399
  readonly outlineColor: "colors";
442
- readonly padding: "space-inset";
443
- readonly paddingBlock: "space-inset";
444
- readonly paddingBlockEnd: "space-inset";
445
- readonly paddingBlockStart: "space-inset";
446
- readonly paddingBottom: "space-inset";
447
- readonly paddingInline: "space-inset";
448
- readonly paddingInlineEnd: "space-inset";
449
- readonly paddingInlineStart: "space-inset";
450
- readonly paddingLeft: "space-inset";
451
- readonly paddingRight: "space-inset";
452
- readonly paddingTop: "space-inset";
400
+ readonly padding: "space";
401
+ readonly paddingBlock: "space";
402
+ readonly paddingBlockEnd: "space";
403
+ readonly paddingBlockStart: "space";
404
+ readonly paddingBottom: "space";
405
+ readonly paddingInline: "space";
406
+ readonly paddingInlineEnd: "space";
407
+ readonly paddingInlineStart: "space";
408
+ readonly paddingLeft: "space";
409
+ readonly paddingRight: "space";
410
+ readonly paddingTop: "space";
453
411
  readonly right: "space";
454
- readonly rowGap: "space-gap";
455
- readonly scrollMargin: "space-offset";
456
- readonly scrollMarginBlock: "space-offset";
457
- readonly scrollMarginBlockEnd: "space-offset";
458
- readonly scrollMarginBlockStart: "space-offset";
459
- readonly scrollMarginBottom: "space-offset";
460
- readonly scrollMarginInline: "space-offset";
461
- readonly scrollMarginInlineEnd: "space-offset";
462
- readonly scrollMarginInlineStart: "space-offset";
463
- readonly scrollMarginLeft: "space-offset";
464
- readonly scrollMarginRight: "space-offset";
465
- readonly scrollMarginTop: "space-offset";
466
- readonly scrollPadding: "space-inset";
467
- readonly scrollPaddingBlock: "space-inset";
468
- readonly scrollPaddingBlockEnd: "space-inset";
469
- readonly scrollPaddingBlockStart: "space-inset";
470
- readonly scrollPaddingBottom: "space-inset";
471
- readonly scrollPaddingInline: "space-inset";
472
- readonly scrollPaddingInlineEnd: "space-inset";
473
- readonly scrollPaddingInlineStart: "space-inset";
474
- readonly scrollPaddingLeft: "space-inset";
475
- readonly scrollPaddingRight: "space-inset";
476
- readonly scrollPaddingTop: "space-inset";
412
+ readonly rowGap: "space";
413
+ readonly scrollMargin: "space";
414
+ readonly scrollMarginBlock: "space";
415
+ readonly scrollMarginBlockEnd: "space";
416
+ readonly scrollMarginBlockStart: "space";
417
+ readonly scrollMarginBottom: "space";
418
+ readonly scrollMarginInline: "space";
419
+ readonly scrollMarginInlineEnd: "space";
420
+ readonly scrollMarginInlineStart: "space";
421
+ readonly scrollMarginLeft: "space";
422
+ readonly scrollMarginRight: "space";
423
+ readonly scrollMarginTop: "space";
424
+ readonly scrollPadding: "space";
425
+ readonly scrollPaddingBlock: "space";
426
+ readonly scrollPaddingBlockEnd: "space";
427
+ readonly scrollPaddingBlockStart: "space";
428
+ readonly scrollPaddingBottom: "space";
429
+ readonly scrollPaddingInline: "space";
430
+ readonly scrollPaddingInlineEnd: "space";
431
+ readonly scrollPaddingInlineStart: "space";
432
+ readonly scrollPaddingLeft: "space";
433
+ readonly scrollPaddingRight: "space";
434
+ readonly scrollPaddingTop: "space";
477
435
  readonly stroke: "colors";
478
436
  readonly strokeWidth: "stroke-width";
479
437
  readonly textDecorationColor: "colors";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-checkbox",
3
- "version": "1.1.79",
3
+ "version": "1.1.81",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,11 +27,11 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@radix-ui/react-checkbox": "^1.0.0",
30
- "@mirohq/design-system-icons": "^0.39.3",
31
- "@mirohq/design-system-stitches": "^2.6.3",
30
+ "@mirohq/design-system-icons": "^0.40.0",
32
31
  "@mirohq/design-system-primitive": "^1.1.2",
32
+ "@mirohq/design-system-utils": "^0.15.0",
33
33
  "@mirohq/design-system-types": "^0.6.2",
34
- "@mirohq/design-system-utils": "^0.15.0"
34
+ "@mirohq/design-system-stitches": "^2.6.4"
35
35
  },
36
36
  "scripts": {
37
37
  "build": "rollup -c ../../../rollup.config.js",