@mirohq/design-system-checkbox 1.0.1 → 1.1.1

package/dist/main.js

@@ -46,6 +46,10 @@ const StyledCheckbox = designSystemStitches.styled(reactCheckbox.Root, {
   all: "unset",
   square: "$6",
   color: "$icon-primary-inverted",
+  cursor: "pointer",
+  '&[aria-disabled="true"], &:disabled': {
+    cursor: "default"
+  },
   "&:focus": {
     [checkboxContentSelector]: {
       boxShadow: "$focus-controls"

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/checkbox.styled.tsx","../src/checkbox.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { 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'\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\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 = ComponentPropsWithRef<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 onCheckedChange.\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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"}
+{"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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"}

package/dist/module.js

@@ -38,6 +38,10 @@ const StyledCheckbox = styled(Root, {
   all: "unset",
   square: "$6",
   color: "$icon-primary-inverted",
+  cursor: "pointer",
+  '&[aria-disabled="true"], &:disabled': {
+    cursor: "default"
+  },
   "&:focus": {
     [checkboxContentSelector]: {
       boxShadow: "$focus-controls"

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/checkbox.styled.tsx","../src/checkbox.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { 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'\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\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 = ComponentPropsWithRef<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 onCheckedChange.\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":"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"}
+{"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":"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"}

package/dist/types.d.ts

@@ -1,8 +1,9 @@
 import * as react from 'react';
-import react__default, { ComponentPropsWithRef } from 'react';
+import react__default from 'react';
 import { Booleanish } from '@mirohq/design-system-types';
 import * as _radix_ui_react_checkbox from '@radix-ui/react-checkbox';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
+import { StrictComponentProps } from '@mirohq/design-system-stitches';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 
@@ -442,7 +443,7 @@ declare const StyledCheckbox: react.ForwardRefExoticComponent<Pick<Omit<{
     variant?: "solid-prominent" | "solid-subtle" | "ghost" | undefined;
     size?: "small" | "large" | undefined;
 }, {}>;
-declare type StyledCheckboxProps = ComponentPropsWithRef<typeof StyledCheckbox>;
+declare type StyledCheckboxProps = StrictComponentProps<typeof StyledCheckbox>;
 
 interface CheckboxProps extends StyledCheckboxProps {
     /**
@@ -460,7 +461,7 @@ interface CheckboxProps extends StyledCheckboxProps {
     size?: StyledCheckboxProps['size'];
     /**
      * The controlled checked state of the checkbox. Must be used in conjunction
-     * with onCheckedChange.
+     * with onChecked and onUnchecked.
      */
     checked?: boolean | 'indeterminate';
     /**
@@ -495,6 +496,6 @@ interface CheckboxProps extends StyledCheckboxProps {
      */
     'aria-disabled'?: Booleanish;
 }
-declare const Checkbox: react__default.ForwardRefExoticComponent<Pick<CheckboxProps, "form" | "slot" | "title" | "children" | "color" | "translate" | "hidden" | "size" | "css" | "prefix" | "asChild" | "UNSAFE_style" | "autoFocus" | "checked" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "placeholder" | "required" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "variant" | "onCheckedChange" | "onChecked" | "onUnchecked"> & react__default.RefAttributes<HTMLButtonElement>>;
+declare const Checkbox: react__default.ForwardRefExoticComponent<Pick<CheckboxProps, "form" | "slot" | "title" | "children" | "color" | "translate" | "hidden" | "size" | "css" | "prefix" | "asChild" | "UNSAFE_style" | "autoFocus" | "checked" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "placeholder" | "required" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "variant" | "onChecked" | "onUnchecked"> & react__default.RefAttributes<HTMLButtonElement>>;
 
 export { Checkbox, CheckboxProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-checkbox",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -27,13 +27,13 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.0",
-    "@mirohq/design-system-icons": "^0.12.2",
+    "@mirohq/design-system-icons": "^0.12.3",
     "@mirohq/design-system-primitive": "^1.1.0",
-    "@mirohq/design-system-stitches": "^2.2.1",
-    "@mirohq/design-system-types": "^0.4.0"
+    "@mirohq/design-system-stitches": "^2.2.2",
+    "@mirohq/design-system-types": "^0.4.1"
   },
   "devDependencies": {
-    "@mirohq/design-system-flex": "^2.1.5"
+    "@mirohq/design-system-flex": "^2.1.6"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",