@mirohq/design-system-checkbox 1.1.28 → 1.1.29

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 +1 -0
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +1 -0
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +6 -6
  6. package/package.json +3 -3
package/dist/main.js CHANGED
@@ -234,6 +234,7 @@ const Checkbox = React__default["default"].forwardRef(
234
234
  }), internalChecked === true && /* @__PURE__ */ React__default["default"].createElement(StyledCheckMark, {
235
235
  size
236
236
  })), disabledUnchecked && /* @__PURE__ */ React__default["default"].createElement(StyledDisabledMark, {
237
+ weight: size === "small" ? "thin" : void 0,
237
238
  size
238
239
  })));
239
240
  }
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 =\n '&[data-state=\"checked\"], &[data-state=\"indeterminate\"]'\nconst ariaDisabledCheckedIndeterminate = [\n '&[aria-disabled=\"true\"][data-state=\"checked\"]',\n '&:disabled[data-state=\"checked\"]',\n '&[aria-disabled=\"true\"][data-state=\"indeterminate\"]',\n '&:disabled[data-state=\"indeterminate\"]',\n].join(' ,')\nconst hoverCheckedIndeterminate =\n '&:hover[data-state=\"checked\"], &:hover[data-state=\"indeterminate\"]'\nconst ariaDisabledUnChecked =\n '&[aria-disabled=\"true\"][data-state=\"unchecked\"], &:disabled[data-state=\"unchecked\"]'\nconst hoverCheckedIndeterminateDisabled = [\n '&:hover[data-state=\"checked\"][aria-disabled=\"true\"]',\n '&:hover[data-state=\"checked\"]&:disabled',\n '&:hover[data-state=\"indeterminate\"][aria-disabled=\"true\"]',\n '&:hover[data-state=\"indeterminate\"]&:disabled',\n].join(' ,')\n\nconst hoverAriaDisabled = [\n '&:hover[data-state=\"unchecked\"][aria-disabled=\"true\"]',\n '&:hover[data-state=\"unchecked\"]&: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': {\n [checkboxContentSelector]: {\n boxShadow: '$focus-controls',\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 '&[data-state=\"unchecked\"]': {\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[data-state=\"unchecked\"]': {\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 '&[data-state=\"unchecked\"]': {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n },\n },\n [`${hoverCheckedIndeterminate}, &:hover[data-state=\"unchecked\"]`]: {\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 */\n variant?: StyledCheckboxProps['variant']\n\n /**\n * The size of the checkbox.\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 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 && <StyledDisabledMark size={size} />}\n </StyledCheckboxContent>\n </StyledCheckbox>\n )\n }\n)\n"],"names":["styled","Primitive","Root","IconProhibit","IconCheckMark","IconMinus","React","useState","booleanify","checked","RadixIndicator"],"mappings":"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"}
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 =\n '&[data-state=\"checked\"], &[data-state=\"indeterminate\"]'\nconst ariaDisabledCheckedIndeterminate = [\n '&[aria-disabled=\"true\"][data-state=\"checked\"]',\n '&:disabled[data-state=\"checked\"]',\n '&[aria-disabled=\"true\"][data-state=\"indeterminate\"]',\n '&:disabled[data-state=\"indeterminate\"]',\n].join(' ,')\nconst hoverCheckedIndeterminate =\n '&:hover[data-state=\"checked\"], &:hover[data-state=\"indeterminate\"]'\nconst ariaDisabledUnChecked =\n '&[aria-disabled=\"true\"][data-state=\"unchecked\"], &:disabled[data-state=\"unchecked\"]'\nconst hoverCheckedIndeterminateDisabled = [\n '&:hover[data-state=\"checked\"][aria-disabled=\"true\"]',\n '&:hover[data-state=\"checked\"]&:disabled',\n '&:hover[data-state=\"indeterminate\"][aria-disabled=\"true\"]',\n '&:hover[data-state=\"indeterminate\"]&:disabled',\n].join(' ,')\n\nconst hoverAriaDisabled = [\n '&:hover[data-state=\"unchecked\"][aria-disabled=\"true\"]',\n '&:hover[data-state=\"unchecked\"]&: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': {\n [checkboxContentSelector]: {\n boxShadow: '$focus-controls',\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 '&[data-state=\"unchecked\"]': {\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[data-state=\"unchecked\"]': {\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 '&[data-state=\"unchecked\"]': {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n },\n },\n [`${hoverCheckedIndeterminate}, &:hover[data-state=\"unchecked\"]`]: {\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 */\n variant?: StyledCheckboxProps['variant']\n\n /**\n * The size of the checkbox.\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 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","checked","RadixIndicator"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -226,6 +226,7 @@ const Checkbox = React.forwardRef(
226
226
  }), internalChecked === true && /* @__PURE__ */ React.createElement(StyledCheckMark, {
227
227
  size
228
228
  })), disabledUnchecked && /* @__PURE__ */ React.createElement(StyledDisabledMark, {
229
+ weight: size === "small" ? "thin" : void 0,
229
230
  size
230
231
  })));
231
232
  }
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 =\n '&[data-state=\"checked\"], &[data-state=\"indeterminate\"]'\nconst ariaDisabledCheckedIndeterminate = [\n '&[aria-disabled=\"true\"][data-state=\"checked\"]',\n '&:disabled[data-state=\"checked\"]',\n '&[aria-disabled=\"true\"][data-state=\"indeterminate\"]',\n '&:disabled[data-state=\"indeterminate\"]',\n].join(' ,')\nconst hoverCheckedIndeterminate =\n '&:hover[data-state=\"checked\"], &:hover[data-state=\"indeterminate\"]'\nconst ariaDisabledUnChecked =\n '&[aria-disabled=\"true\"][data-state=\"unchecked\"], &:disabled[data-state=\"unchecked\"]'\nconst hoverCheckedIndeterminateDisabled = [\n '&:hover[data-state=\"checked\"][aria-disabled=\"true\"]',\n '&:hover[data-state=\"checked\"]&:disabled',\n '&:hover[data-state=\"indeterminate\"][aria-disabled=\"true\"]',\n '&:hover[data-state=\"indeterminate\"]&:disabled',\n].join(' ,')\n\nconst hoverAriaDisabled = [\n '&:hover[data-state=\"unchecked\"][aria-disabled=\"true\"]',\n '&:hover[data-state=\"unchecked\"]&: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': {\n [checkboxContentSelector]: {\n boxShadow: '$focus-controls',\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 '&[data-state=\"unchecked\"]': {\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[data-state=\"unchecked\"]': {\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 '&[data-state=\"unchecked\"]': {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n },\n },\n [`${hoverCheckedIndeterminate}, &:hover[data-state=\"unchecked\"]`]: {\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 */\n variant?: StyledCheckboxProps['variant']\n\n /**\n * The size of the checkbox.\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 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 && <StyledDisabledMark size={size} />}\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,CAAK,EAAA,EAAA,qBAAA,CAAA,CAAA,CAAA;AAErC,MAAM,uBACJ,GAAA,wDAAA,CAAA;AACF,MAAM,gCAAmC,GAAA;AAAA,EACvC,+CAAA;AAAA,EACA,kCAAA;AAAA,EACA,qDAAA;AAAA,EACA,wCAAA;AACF,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AACX,MAAM,yBACJ,GAAA,oEAAA,CAAA;AACF,MAAM,qBACJ,GAAA,qFAAA,CAAA;AACF,MAAM,iCAAoC,GAAA;AAAA,EACxC,qDAAA;AAAA,EACA,yCAAA;AAAA,EACA,2DAAA;AAAA,EACA,+CAAA;AACF,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AAEX,MAAM,iBAAoB,GAAA;AAAA,EACxB,uDAAA;AAAA,EACA,2CAAA;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,qCAAuC,EAAA;AAAA,IACrC,MAAQ,EAAA,SAAA;AAAA,GACV;AAAA,EACA,SAAW,EAAA;AAAA,IACT,CAAC,uBAA0B,GAAA;AAAA,MACzB,SAAW,EAAA,iBAAA;AAAA,KACb;AAAA,GACF;AAAA,EACA,CAAC,iCAAoC,GAAA;AAAA,IACnC,CAAC,uBAA0B,GAAA;AAAA,MACzB,eAAiB,EAAA,wCAAA;AAAA,KACnB;AAAA,GACF;AAAA,EAEA,CAAC,iBAAoB,GAAA;AAAA,IACnB,CAAC,uBAA0B,GAAA;AAAA,MACzB,KAAO,EAAA,yBAAA;AAAA,KACT;AAAA,GACF;AAAA,EACA,CAAC,gCAAmC,GAAA;AAAA,IAClC,CAAC,uBAA0B,GAAA;AAAA,MACzB,eAAiB,EAAA,wCAAA;AAAA,MACjB,KAAO,EAAA,yBAAA;AAAA,KACT;AAAA,GACF;AAAA,EACA,CAAC,qBAAwB,GAAA;AAAA,IACvB,CAAC,uBAA0B,GAAA;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,2BAA6B,EAAA;AAAA,UAC3B,CAAC,uBAA0B,GAAA;AAAA,YACzB,MAAQ,EAAA,qCAAA;AAAA,WACV;AAAA,SACF;AAAA,QACA,CAAC,uBAA0B,GAAA;AAAA,UACzB,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,+BAAA;AAAA,YACjB,KAAO,EAAA,wBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,CAAC,yBAA4B,GAAA;AAAA,UAC3B,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,qCAAA;AAAA,WACnB;AAAA,SACF;AAAA,QACA,iCAAmC,EAAA;AAAA,UACjC,CAAC,uBAA0B,GAAA;AAAA,YACzB,MAAQ,EAAA,2BAAA;AAAA,WACV;AAAA,SACF;AAAA,QACA,CAAC,qBAAwB,GAAA;AAAA,UACvB,CAAC,uBAA0B,GAAA;AAAA,YACzB,MAAQ,EAAA,8CAAA;AAAA,WACV;AAAA,SACF;AAAA,OACF;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,CAAC,uBAA0B,GAAA;AAAA,UACzB,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,4BAAA;AAAA,YACjB,KAAO,EAAA,eAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,2BAA6B,EAAA;AAAA,UAC3B,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,4BAAA;AAAA,WACnB;AAAA,SACF;AAAA,QACA,CAAC,GAAG,yBAA+D,CAAA,iCAAA,CAAA,GAAA;AAAA,UACjE,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,kCAAA;AAAA,YACjB,KAAO,EAAA,qBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,CAAC,qBAAwB,GAAA;AAAA,UACvB,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,wCAAA;AAAA,WACnB;AAAA,SACF;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,uBAA0B,GAAA;AAAA,UACzB,CAAC,uBAA0B,GAAA;AAAA,YACzB,KAAO,EAAA,eAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,CAAC,yBAA4B,GAAA;AAAA,UAC3B,CAAC,uBAA0B,GAAA;AAAA,YACzB,KAAO,EAAA,qBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,CAAC,gCAAmC,GAAA;AAAA,UAClC,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,sBAAA;AAAA,WACnB;AAAA,SACF;AAAA,QACA,CAAC,iCAAoC,GAAA;AAAA,UACnC,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,sBAAA;AAAA,WACnB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,CAAC,uBAA0B,GAAA;AAAA,UACzB,MAAQ,EAAA,IAAA;AAAA,SACV;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,uBAA0B,GAAA;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;;ACnH5D,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,IACP,GAAA,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,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,eAAe,EAAA,YAAA;AAAA,MACf,OAAS,EAAA,eAAA;AAAA,MACT,cAAA;AAAA,MACA,QAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAS,CAAK,CAAA,KAAA;AACZ,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,UAAA,OAAA;AAAA,SACF;AACA,QAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OACZ;AAAA,MACA,eAAA,EAAiB,CAACA,QAAqB,KAAA;AA7H/C,QAAA,IAAA,EAAA,CAAA;AA8HU,QAAA,eAAA,CAAgBA,QAAO,CAAA,CAAA;AAEvB,QAAA,CAAA,EAAA,GAAA,kBAAA,CAAmB,GAAGA,QAAtB,CAAA,CAAA,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,kBAAA,CAAA,CAAA;AAAA,OACF;AAAA,MACA,GAAK,EAAA,UAAA;AAAA,KAAA,sCAEJ,qBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAACC,SACE,EAAA,IAAA,EAAA,eAAA,KAAoB,mCAClB,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA;AAAA,MAAwB,IAAA;AAAA,KAAY,CAAA,EAEtC,eAAoB,KAAA,IAAA,oBAAS,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MAAgB,IAAA;AAAA,KAAY,CAC5D,CACC,EAAA,iBAAA,oBAAsB,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAA,MAAmB,IAAA;AAAA,KAAY,CACxD,CACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
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 =\n '&[data-state=\"checked\"], &[data-state=\"indeterminate\"]'\nconst ariaDisabledCheckedIndeterminate = [\n '&[aria-disabled=\"true\"][data-state=\"checked\"]',\n '&:disabled[data-state=\"checked\"]',\n '&[aria-disabled=\"true\"][data-state=\"indeterminate\"]',\n '&:disabled[data-state=\"indeterminate\"]',\n].join(' ,')\nconst hoverCheckedIndeterminate =\n '&:hover[data-state=\"checked\"], &:hover[data-state=\"indeterminate\"]'\nconst ariaDisabledUnChecked =\n '&[aria-disabled=\"true\"][data-state=\"unchecked\"], &:disabled[data-state=\"unchecked\"]'\nconst hoverCheckedIndeterminateDisabled = [\n '&:hover[data-state=\"checked\"][aria-disabled=\"true\"]',\n '&:hover[data-state=\"checked\"]&:disabled',\n '&:hover[data-state=\"indeterminate\"][aria-disabled=\"true\"]',\n '&:hover[data-state=\"indeterminate\"]&:disabled',\n].join(' ,')\n\nconst hoverAriaDisabled = [\n '&:hover[data-state=\"unchecked\"][aria-disabled=\"true\"]',\n '&:hover[data-state=\"unchecked\"]&: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': {\n [checkboxContentSelector]: {\n boxShadow: '$focus-controls',\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 '&[data-state=\"unchecked\"]': {\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[data-state=\"unchecked\"]': {\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 '&[data-state=\"unchecked\"]': {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n },\n },\n [`${hoverCheckedIndeterminate}, &:hover[data-state=\"unchecked\"]`]: {\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 */\n variant?: StyledCheckboxProps['variant']\n\n /**\n * The size of the checkbox.\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 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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"}
package/dist/types.d.ts CHANGED
@@ -213,28 +213,28 @@ declare const StyledCheckbox: react.ForwardRefExoticComponent<Pick<Omit<{
213
213
  readonly 'icon-400': "32px";
214
214
  };
215
215
  space: {
216
- readonly none: 0;
216
+ readonly 0: 0;
217
217
  readonly 50: "4px";
218
218
  readonly 100: "8px";
219
219
  readonly 150: "12px";
220
220
  readonly 200: "16px";
221
221
  readonly 300: "24px";
222
222
  readonly 400: "32px";
223
- readonly 500: "64px";
223
+ readonly 500: "40px";
224
224
  readonly 600: "48px";
225
225
  readonly 800: "64px";
226
226
  readonly 1200: "96px";
227
227
  readonly 1600: "128px";
228
228
  };
229
229
  'space-gap': {
230
- readonly none: any;
230
+ readonly 0: any;
231
231
  readonly 50: any;
232
232
  readonly 100: any;
233
233
  readonly 200: any;
234
234
  readonly 300: any;
235
235
  };
236
236
  'space-inset': {
237
- readonly none: any;
237
+ readonly 0: any;
238
238
  readonly 50: any;
239
239
  readonly 100: any;
240
240
  readonly 150: any;
@@ -247,7 +247,7 @@ declare const StyledCheckbox: react.ForwardRefExoticComponent<Pick<Omit<{
247
247
  readonly 1600: any;
248
248
  };
249
249
  'space-offset': {
250
- readonly none: any;
250
+ readonly 0: any;
251
251
  readonly 50: any;
252
252
  readonly 100: any;
253
253
  readonly 150: any;
@@ -258,7 +258,7 @@ declare const StyledCheckbox: react.ForwardRefExoticComponent<Pick<Omit<{
258
258
  readonly 800: any;
259
259
  readonly 1200: any;
260
260
  readonly 1600: any;
261
- readonly 'stacking-none': any;
261
+ readonly 'stacking-0': any;
262
262
  readonly 'stacking-100': any;
263
263
  readonly 'stacking-200': any;
264
264
  readonly 'stacking-300': any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-checkbox",
3
- "version": "1.1.28",
3
+ "version": "1.1.29",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,9 +27,9 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@radix-ui/react-checkbox": "^1.0.0",
30
- "@mirohq/design-system-icons": "^0.24.4",
30
+ "@mirohq/design-system-icons": "^0.24.5",
31
31
  "@mirohq/design-system-primitive": "^1.1.0",
32
- "@mirohq/design-system-stitches": "^2.3.2",
32
+ "@mirohq/design-system-stitches": "^2.3.3",
33
33
  "@mirohq/design-system-types": "^0.5.0"
34
34
  },
35
35
  "scripts": {