@mirohq/design-system-checkbox 1.0.0-checkbox.0 → 1.0.0-checkbox.2

package/dist/main.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var designSystemStitches = require('@mirohq/design-system-stitches');
 var reactCheckbox = require('@radix-ui/react-checkbox');
+var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemIcons = require('@mirohq/design-system-icons');
 
@@ -12,12 +12,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const StyledIndicator = designSystemStitches.styled(reactCheckbox.Indicator);
-const Indicator = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledIndicator, {
-  ...props,
-  ref: forwardRef
-}));
-
 const StyledCheckboxContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "block",
   pointerEvents: "none",
@@ -27,27 +21,52 @@ const StyledCheckboxContent = designSystemStitches.styled(designSystemPrimitive.
   boxSizing: "border-box"
 });
 const checkboxContentSelector = `& ${StyledCheckboxContent}`;
+const checkedAndIndeterminate = '&[data-state="checked"], &[data-state="indeterminate"]';
+const ariaDisabledCheckedIndeterminate = [
+  '&[aria-disabled="true"][data-state="checked"]',
+  '&:disabled[data-state="checked"]',
+  '&[aria-disabled="true"][data-state="indeterminate"]',
+  '&:disabled[data-state="indeterminate"]'
+].join(" ,");
+const hoverCheckedIndeterminate = '&:hover[data-state="checked"], &:hover[data-state="indeterminate"]';
+const ariaDisabledUnChecked = '&[aria-disabled="true"][data-state="unchecked"], &:disabled[data-state="unchecked"]';
+const hoverCheckedIndeterminateDisabled = [
+  '&:hover[data-state="checked"][aria-disabled="true"]',
+  '&:hover[data-state="checked"]&:disabled',
+  '&:hover[data-state="indeterminate"][aria-disabled="true"]',
+  '&:hover[data-state="indeterminate"]&:disabled'
+].join(" ,");
+const hoverAriaDisabled = [
+  '&:hover[data-state="unchecked"][aria-disabled="true"]',
+  '&:hover[data-state="unchecked"]&:disabled',
+  ...hoverCheckedIndeterminateDisabled.split(" ,")
+].join(" ,");
 const StyledCheckbox = designSystemStitches.styled(reactCheckbox.Root, {
   all: "unset",
   square: "$6",
   color: "$icon-primary-inverted",
   "&:focus": {
     [checkboxContentSelector]: {
-      boxShadow: "0px 0px 0px 1px $colors$white, 0px 0px 0px 3px $colors$blue-500, 0px 0px 0px 5px $colors$blue-200"
+      boxShadow: "$focus-controls"
     }
   },
-  '&:hover[data-state="checked"][aria-disabled="true"], &:hover[data-state="checked"]&:disabled': {
+  [hoverCheckedIndeterminateDisabled]: {
     [checkboxContentSelector]: {
       backgroundColor: "$background-neutrals-controls-disabled"
     }
   },
-  '&[aria-disabled="true"][data-state="checked"], &:disabled[data-state="checked"]': {
+  [hoverAriaDisabled]: {
+    [checkboxContentSelector]: {
+      color: "$icon-neutrals-disabled"
+    }
+  },
+  [ariaDisabledCheckedIndeterminate]: {
     [checkboxContentSelector]: {
       backgroundColor: "$background-neutrals-controls-disabled",
       color: "$icon-neutrals-disabled"
     }
   },
-  '&[aria-disabled="true"][data-state="unchecked"], &:disabled[data-state="unchecked"]': {
+  [ariaDisabledUnChecked]: {
     [checkboxContentSelector]: {
       backgroundColor: "$background-neutrals",
       color: "$icon-neutrals-disabled"
@@ -56,18 +75,18 @@ const StyledCheckbox = designSystemStitches.styled(reactCheckbox.Root, {
   variants: {
     variant: {
       "solid-prominent": {
-        '&[data-state="checked"]': {
+        '&[data-state="unchecked"]': {
           [checkboxContentSelector]: {
-            backgroundColor: "$background-primary-prominent",
-            color: "$icon-primary-inverted"
+            border: "1px solid $border-neutrals-controls"
           }
         },
-        '&[data-state="unchecked"]': {
+        [checkedAndIndeterminate]: {
           [checkboxContentSelector]: {
-            border: "1px solid $border-neutrals-controls"
+            backgroundColor: "$background-primary-prominent",
+            color: "$icon-primary-inverted"
           }
         },
-        '&:hover[data-state="checked"]': {
+        [hoverCheckedIndeterminate]: {
           [checkboxContentSelector]: {
             backgroundColor: "$background-primary-prominent-hover"
           }
@@ -76,10 +95,15 @@ const StyledCheckbox = designSystemStitches.styled(reactCheckbox.Root, {
           [checkboxContentSelector]: {
             border: "1px solid $border-primary"
           }
+        },
+        [ariaDisabledUnChecked]: {
+          [checkboxContentSelector]: {
+            border: "1px solid $border-neutrals-controls-disabled"
+          }
         }
       },
       "solid-subtle": {
-        '&[data-state="checked"]': {
+        [checkedAndIndeterminate]: {
           [checkboxContentSelector]: {
             backgroundColor: "$background-primary-subtle",
             color: "$icon-primary"
@@ -90,30 +114,35 @@ const StyledCheckbox = designSystemStitches.styled(reactCheckbox.Root, {
             backgroundColor: "$background-primary-subtle"
           }
         },
-        '&:hover[data-state="checked"], &:hover[data-state="unchecked"]': {
+        [`${hoverCheckedIndeterminate}, &:hover[data-state="unchecked"]`]: {
           [checkboxContentSelector]: {
             backgroundColor: "$background-primary-subtle-hover",
             color: "$icon-primary-hover"
           }
         },
-        '&[aria-disabled="true"][data-state="unchecked"], &:disabled[data-state="unchecked"]': {
+        [ariaDisabledUnChecked]: {
           [checkboxContentSelector]: {
             backgroundColor: "$background-neutrals-controls-disabled"
           }
         }
       },
       ghost: {
-        '&[data-state="checked"]': {
+        [checkedAndIndeterminate]: {
           [checkboxContentSelector]: {
             color: "$icon-primary"
           }
         },
-        '&:hover[data-state="checked"]': {
+        [hoverCheckedIndeterminate]: {
           [checkboxContentSelector]: {
             color: "$icon-primary-hover"
           }
         },
-        '&[aria-disabled="true"][data-state="checked"], &:disabled[data-state="checked"]': {
+        [ariaDisabledCheckedIndeterminate]: {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-neutrals"
+          }
+        },
+        [hoverCheckedIndeterminateDisabled]: {
           [checkboxContentSelector]: {
             backgroundColor: "$background-neutrals"
           }
@@ -134,7 +163,6 @@ const StyledCheckbox = designSystemStitches.styled(reactCheckbox.Root, {
     }
   }
 });
-
 const markStyles = {
   position: "absolute",
   top: "50%",
@@ -149,26 +177,35 @@ const markStyles = {
 };
 const StyledDisabledMark = designSystemStitches.styled(designSystemIcons.IconProhibit, markStyles);
 const StyledCheckMark = designSystemStitches.styled(designSystemIcons.IconCheckMark, markStyles);
-designSystemStitches.styled(designSystemIcons.IconMinus, markStyles);
+const StyledIndeterminateMark = designSystemStitches.styled(designSystemIcons.IconMinus, markStyles);
 
 const Checkbox = React__default["default"].forwardRef(
   ({
     "aria-disabled": ariaDisabled = false,
     checked,
-    defaultChecked = false,
+    defaultChecked,
     disabled,
+    onChecked,
+    onUnchecked,
     onClick,
     onKeyDown,
     size = "large",
     variant = "solid-prominent",
     ...restProps
   }, forwardRef) => {
-    const [checkedState, setCheckedState] = React.useState(defaultChecked);
-    const disabledUnChecked = (disabled === true || ariaDisabled) && (checked != null ? checked : !checkedState);
+    const [checkedState, setCheckedState] = React.useState(
+      defaultChecked != null ? defaultChecked : false
+    );
+    const internalChecked = checked != null ? checked : checkedState;
+    const disabledUnchecked = (disabled === true || ariaDisabled) && internalChecked === false;
+    const checkedStateEvents = {
+      true: onChecked,
+      false: onUnchecked
+    };
     return /* @__PURE__ */ React__default["default"].createElement(StyledCheckbox, {
       ...restProps,
       "aria-disabled": ariaDisabled,
-      checked: checked != null ? checked : checkedState,
+      checked: internalChecked,
       defaultChecked,
       disabled,
       size,
@@ -178,13 +215,19 @@ const Checkbox = React__default["default"].forwardRef(
           e.preventDefault();
           return;
         }
-        setCheckedState((prevChecked) => !prevChecked);
         onClick == null ? void 0 : onClick(e);
       },
+      onCheckedChange: (checked2) => {
+        var _a;
+        setCheckedState(checked2);
+        (_a = checkedStateEvents[`${checked2}`]) == null ? void 0 : _a.call(checkedStateEvents);
+      },
       ref: forwardRef
-    }, /* @__PURE__ */ React__default["default"].createElement(StyledCheckboxContent, null, /* @__PURE__ */ React__default["default"].createElement(Indicator, null, /* @__PURE__ */ React__default["default"].createElement(StyledCheckMark, {
+    }, /* @__PURE__ */ React__default["default"].createElement(StyledCheckboxContent, null, /* @__PURE__ */ React__default["default"].createElement(reactCheckbox.Indicator, null, internalChecked === "indeterminate" && /* @__PURE__ */ React__default["default"].createElement(StyledIndeterminateMark, {
+      size
+    }), internalChecked === true && /* @__PURE__ */ React__default["default"].createElement(StyledCheckMark, {
       size
-    })), disabledUnChecked && /* @__PURE__ */ React__default["default"].createElement(StyledDisabledMark, {
+    })), disabledUnchecked && /* @__PURE__ */ React__default["default"].createElement(StyledDisabledMark, {
       size
     })));
   }

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/partials/indicator.tsx","../src/checkbox.styled.tsx","../src/partials/status-marks.styled.tsx","../src/checkbox.tsx"],"sourcesContent":["import React from 'react'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { ElementRef } from 'react'\nimport { Indicator as RadixIndicator } from '@radix-ui/react-checkbox'\n\nconst StyledIndicator = styled(RadixIndicator)\ntype StyledIndicatorProps = StrictComponentProps<typeof StyledIndicator>\n\nexport const Indicator = React.forwardRef<\n  ElementRef<typeof StyledIndicator>,\n  StyledIndicatorProps\n>((props, forwardRef) => <StyledIndicator {...props} ref={forwardRef} />)\n","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'\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\nexport const StyledCheckbox = styled(Root, {\n  all: 'unset',\n  square: '$6',\n  color: '$icon-primary-inverted',\n\n  '&:focus': {\n    [checkboxContentSelector]: {\n      boxShadow:\n        '0px 0px 0px 1px $colors$white, 0px 0px 0px 3px $colors$blue-500, 0px 0px 0px 5px $colors$blue-200',\n    },\n  },\n  '&:hover[data-state=\"checked\"][aria-disabled=\"true\"], &:hover[data-state=\"checked\"]&:disabled':\n    {\n      [checkboxContentSelector]: {\n        backgroundColor: '$background-neutrals-controls-disabled',\n      },\n    },\n  '&[aria-disabled=\"true\"][data-state=\"checked\"], &:disabled[data-state=\"checked\"]':\n    {\n      [checkboxContentSelector]: {\n        backgroundColor: '$background-neutrals-controls-disabled',\n        color: '$icon-neutrals-disabled',\n      },\n    },\n  '&[aria-disabled=\"true\"][data-state=\"unchecked\"], &:disabled[data-state=\"unchecked\"]':\n    {\n      [checkboxContentSelector]: {\n        backgroundColor: '$background-neutrals',\n        color: '$icon-neutrals-disabled',\n      },\n    },\n  variants: {\n    variant: {\n      'solid-prominent': {\n        '&[data-state=\"checked\"]': {\n          [checkboxContentSelector]: {\n            backgroundColor: '$background-primary-prominent',\n            color: '$icon-primary-inverted',\n          },\n        },\n        '&[data-state=\"unchecked\"]': {\n          [checkboxContentSelector]: {\n            border: '1px solid $border-neutrals-controls',\n          },\n        },\n        '&:hover[data-state=\"checked\"]': {\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      },\n      'solid-subtle': {\n        '&[data-state=\"checked\"]': {\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        '&:hover[data-state=\"checked\"], &:hover[data-state=\"unchecked\"]': {\n          [checkboxContentSelector]: {\n            backgroundColor: '$background-primary-subtle-hover',\n            color: '$icon-primary-hover',\n          },\n        },\n        '&[aria-disabled=\"true\"][data-state=\"unchecked\"], &:disabled[data-state=\"unchecked\"]':\n          {\n            [checkboxContentSelector]: {\n              backgroundColor: '$background-neutrals-controls-disabled',\n            },\n          },\n      },\n      ghost: {\n        '&[data-state=\"checked\"]': {\n          [checkboxContentSelector]: {\n            color: '$icon-primary',\n          },\n        },\n\n        '&:hover[data-state=\"checked\"]': {\n          [checkboxContentSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        '&[aria-disabled=\"true\"][data-state=\"checked\"], &:disabled[data-state=\"checked\"]':\n          {\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\nexport type StyledCheckboxProps = ComponentPropsWithRef<typeof StyledCheckbox>\n","import {\n  IconProhibit,\n  IconCheckMark,\n  IconMinus,\n} from '@mirohq/design-system-icons'\nimport { styled } from '@mirohq/design-system-stitches'\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","import React, { useState } from 'react'\nimport type { ElementRef } from 'react'\n\nimport { Indicator } from './partials/indicator'\nimport { StyledCheckboxContent, StyledCheckbox } from './checkbox.styled'\nimport {\n  StyledCheckMark,\n  StyledDisabledMark,\n} from './partials/status-marks.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\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 of the checkbox changes.\n   */\n  onCheckedChange?: (checked: boolean | 'indeterminate') => void\n\n  /**\n   * When true, prevents the user from interacting with the checkbox but focus\n   * is still possible.\n   */\n  'aria-disabled'?: boolean\n}\n\nexport const Checkbox = React.forwardRef<\n  ElementRef<typeof StyledCheckbox>,\n  CheckboxProps\n>(\n  (\n    {\n      'aria-disabled': ariaDisabled = false,\n      checked,\n      defaultChecked = false,\n      disabled,\n      onClick,\n      onKeyDown,\n      size = 'large',\n      variant = 'solid-prominent',\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const [checkedState, setCheckedState] = useState(defaultChecked)\n    const disabledUnChecked =\n      (disabled === true || ariaDisabled) && (checked ?? !checkedState)\n    return (\n      <StyledCheckbox\n        {...restProps}\n        aria-disabled={ariaDisabled}\n        checked={checked ?? checkedState}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        size={size}\n        variant={variant}\n        onClick={e => {\n          if (ariaDisabled) {\n            e.preventDefault()\n            return\n          }\n          setCheckedState(prevChecked => !prevChecked)\n          onClick?.(e)\n        }}\n        ref={forwardRef}\n      >\n        <StyledCheckboxContent>\n          <Indicator>\n            <StyledCheckMark size={size} />\n          </Indicator>\n          {disabledUnChecked && <StyledDisabledMark size={size} />}\n        </StyledCheckboxContent>\n      </StyledCheckbox>\n    )\n  }\n)\n"],"names":["styled","RadixIndicator","React","Primitive","Root","IconProhibit","IconCheckMark","IconMinus","useState"],"mappings":"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"}
+{"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 type { ElementRef } from 'react'\nimport { Indicator as RadixIndicator } from '@radix-ui/react-checkbox'\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'?: boolean\n}\n\nexport const Checkbox = React.forwardRef<\n  ElementRef<typeof StyledCheckbox>,\n  CheckboxProps\n>(\n  (\n    {\n      'aria-disabled': ariaDisabled = false,\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 disabledUnchecked =\n      (disabled === true || ariaDisabled) && 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 (ariaDisabled) {\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","checked","RadixIndicator"],"mappings":"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"}

package/dist/module.js

@@ -1,15 +1,9 @@
 import React, { useState } from 'react';
+import { Root, Indicator } from '@radix-ui/react-checkbox';
 import { styled } from '@mirohq/design-system-stitches';
-import { Indicator as Indicator$1, Root } from '@radix-ui/react-checkbox';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { IconProhibit, IconCheckMark, IconMinus } from '@mirohq/design-system-icons';
 
-const StyledIndicator = styled(Indicator$1);
-const Indicator = React.forwardRef((props, forwardRef) => /* @__PURE__ */ React.createElement(StyledIndicator, {
-  ...props,
-  ref: forwardRef
-}));
-
 const StyledCheckboxContent = styled(Primitive.div, {
   display: "block",
   pointerEvents: "none",
@@ -19,27 +13,52 @@ const StyledCheckboxContent = styled(Primitive.div, {
   boxSizing: "border-box"
 });
 const checkboxContentSelector = `& ${StyledCheckboxContent}`;
+const checkedAndIndeterminate = '&[data-state="checked"], &[data-state="indeterminate"]';
+const ariaDisabledCheckedIndeterminate = [
+  '&[aria-disabled="true"][data-state="checked"]',
+  '&:disabled[data-state="checked"]',
+  '&[aria-disabled="true"][data-state="indeterminate"]',
+  '&:disabled[data-state="indeterminate"]'
+].join(" ,");
+const hoverCheckedIndeterminate = '&:hover[data-state="checked"], &:hover[data-state="indeterminate"]';
+const ariaDisabledUnChecked = '&[aria-disabled="true"][data-state="unchecked"], &:disabled[data-state="unchecked"]';
+const hoverCheckedIndeterminateDisabled = [
+  '&:hover[data-state="checked"][aria-disabled="true"]',
+  '&:hover[data-state="checked"]&:disabled',
+  '&:hover[data-state="indeterminate"][aria-disabled="true"]',
+  '&:hover[data-state="indeterminate"]&:disabled'
+].join(" ,");
+const hoverAriaDisabled = [
+  '&:hover[data-state="unchecked"][aria-disabled="true"]',
+  '&:hover[data-state="unchecked"]&:disabled',
+  ...hoverCheckedIndeterminateDisabled.split(" ,")
+].join(" ,");
 const StyledCheckbox = styled(Root, {
   all: "unset",
   square: "$6",
   color: "$icon-primary-inverted",
   "&:focus": {
     [checkboxContentSelector]: {
-      boxShadow: "0px 0px 0px 1px $colors$white, 0px 0px 0px 3px $colors$blue-500, 0px 0px 0px 5px $colors$blue-200"
+      boxShadow: "$focus-controls"
     }
   },
-  '&:hover[data-state="checked"][aria-disabled="true"], &:hover[data-state="checked"]&:disabled': {
+  [hoverCheckedIndeterminateDisabled]: {
     [checkboxContentSelector]: {
       backgroundColor: "$background-neutrals-controls-disabled"
     }
   },
-  '&[aria-disabled="true"][data-state="checked"], &:disabled[data-state="checked"]': {
+  [hoverAriaDisabled]: {
+    [checkboxContentSelector]: {
+      color: "$icon-neutrals-disabled"
+    }
+  },
+  [ariaDisabledCheckedIndeterminate]: {
     [checkboxContentSelector]: {
       backgroundColor: "$background-neutrals-controls-disabled",
       color: "$icon-neutrals-disabled"
     }
   },
-  '&[aria-disabled="true"][data-state="unchecked"], &:disabled[data-state="unchecked"]': {
+  [ariaDisabledUnChecked]: {
     [checkboxContentSelector]: {
       backgroundColor: "$background-neutrals",
       color: "$icon-neutrals-disabled"
@@ -48,18 +67,18 @@ const StyledCheckbox = styled(Root, {
   variants: {
     variant: {
       "solid-prominent": {
-        '&[data-state="checked"]': {
+        '&[data-state="unchecked"]': {
           [checkboxContentSelector]: {
-            backgroundColor: "$background-primary-prominent",
-            color: "$icon-primary-inverted"
+            border: "1px solid $border-neutrals-controls"
           }
         },
-        '&[data-state="unchecked"]': {
+        [checkedAndIndeterminate]: {
           [checkboxContentSelector]: {
-            border: "1px solid $border-neutrals-controls"
+            backgroundColor: "$background-primary-prominent",
+            color: "$icon-primary-inverted"
           }
         },
-        '&:hover[data-state="checked"]': {
+        [hoverCheckedIndeterminate]: {
           [checkboxContentSelector]: {
             backgroundColor: "$background-primary-prominent-hover"
           }
@@ -68,10 +87,15 @@ const StyledCheckbox = styled(Root, {
           [checkboxContentSelector]: {
             border: "1px solid $border-primary"
           }
+        },
+        [ariaDisabledUnChecked]: {
+          [checkboxContentSelector]: {
+            border: "1px solid $border-neutrals-controls-disabled"
+          }
         }
       },
       "solid-subtle": {
-        '&[data-state="checked"]': {
+        [checkedAndIndeterminate]: {
           [checkboxContentSelector]: {
             backgroundColor: "$background-primary-subtle",
             color: "$icon-primary"
@@ -82,30 +106,35 @@ const StyledCheckbox = styled(Root, {
             backgroundColor: "$background-primary-subtle"
           }
         },
-        '&:hover[data-state="checked"], &:hover[data-state="unchecked"]': {
+        [`${hoverCheckedIndeterminate}, &:hover[data-state="unchecked"]`]: {
           [checkboxContentSelector]: {
             backgroundColor: "$background-primary-subtle-hover",
             color: "$icon-primary-hover"
           }
         },
-        '&[aria-disabled="true"][data-state="unchecked"], &:disabled[data-state="unchecked"]': {
+        [ariaDisabledUnChecked]: {
           [checkboxContentSelector]: {
             backgroundColor: "$background-neutrals-controls-disabled"
           }
         }
       },
       ghost: {
-        '&[data-state="checked"]': {
+        [checkedAndIndeterminate]: {
           [checkboxContentSelector]: {
             color: "$icon-primary"
           }
         },
-        '&:hover[data-state="checked"]': {
+        [hoverCheckedIndeterminate]: {
           [checkboxContentSelector]: {
             color: "$icon-primary-hover"
           }
         },
-        '&[aria-disabled="true"][data-state="checked"], &:disabled[data-state="checked"]': {
+        [ariaDisabledCheckedIndeterminate]: {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-neutrals"
+          }
+        },
+        [hoverCheckedIndeterminateDisabled]: {
           [checkboxContentSelector]: {
             backgroundColor: "$background-neutrals"
           }
@@ -126,7 +155,6 @@ const StyledCheckbox = styled(Root, {
     }
   }
 });
-
 const markStyles = {
   position: "absolute",
   top: "50%",
@@ -141,26 +169,35 @@ const markStyles = {
 };
 const StyledDisabledMark = styled(IconProhibit, markStyles);
 const StyledCheckMark = styled(IconCheckMark, markStyles);
-styled(IconMinus, markStyles);
+const StyledIndeterminateMark = styled(IconMinus, markStyles);
 
 const Checkbox = React.forwardRef(
   ({
     "aria-disabled": ariaDisabled = false,
     checked,
-    defaultChecked = false,
+    defaultChecked,
     disabled,
+    onChecked,
+    onUnchecked,
     onClick,
     onKeyDown,
     size = "large",
     variant = "solid-prominent",
     ...restProps
   }, forwardRef) => {
-    const [checkedState, setCheckedState] = useState(defaultChecked);
-    const disabledUnChecked = (disabled === true || ariaDisabled) && (checked != null ? checked : !checkedState);
+    const [checkedState, setCheckedState] = useState(
+      defaultChecked != null ? defaultChecked : false
+    );
+    const internalChecked = checked != null ? checked : checkedState;
+    const disabledUnchecked = (disabled === true || ariaDisabled) && internalChecked === false;
+    const checkedStateEvents = {
+      true: onChecked,
+      false: onUnchecked
+    };
     return /* @__PURE__ */ React.createElement(StyledCheckbox, {
       ...restProps,
       "aria-disabled": ariaDisabled,
-      checked: checked != null ? checked : checkedState,
+      checked: internalChecked,
       defaultChecked,
       disabled,
       size,
@@ -170,13 +207,19 @@ const Checkbox = React.forwardRef(
           e.preventDefault();
           return;
         }
-        setCheckedState((prevChecked) => !prevChecked);
         onClick == null ? void 0 : onClick(e);
       },
+      onCheckedChange: (checked2) => {
+        var _a;
+        setCheckedState(checked2);
+        (_a = checkedStateEvents[`${checked2}`]) == null ? void 0 : _a.call(checkedStateEvents);
+      },
       ref: forwardRef
-    }, /* @__PURE__ */ React.createElement(StyledCheckboxContent, null, /* @__PURE__ */ React.createElement(Indicator, null, /* @__PURE__ */ React.createElement(StyledCheckMark, {
+    }, /* @__PURE__ */ React.createElement(StyledCheckboxContent, null, /* @__PURE__ */ React.createElement(Indicator, null, internalChecked === "indeterminate" && /* @__PURE__ */ React.createElement(StyledIndeterminateMark, {
+      size
+    }), internalChecked === true && /* @__PURE__ */ React.createElement(StyledCheckMark, {
       size
-    })), disabledUnChecked && /* @__PURE__ */ React.createElement(StyledDisabledMark, {
+    })), disabledUnchecked && /* @__PURE__ */ React.createElement(StyledDisabledMark, {
       size
     })));
   }

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/partials/indicator.tsx","../src/checkbox.styled.tsx","../src/partials/status-marks.styled.tsx","../src/checkbox.tsx"],"sourcesContent":["import React from 'react'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { ElementRef } from 'react'\nimport { Indicator as RadixIndicator } from '@radix-ui/react-checkbox'\n\nconst StyledIndicator = styled(RadixIndicator)\ntype StyledIndicatorProps = StrictComponentProps<typeof StyledIndicator>\n\nexport const Indicator = React.forwardRef<\n  ElementRef<typeof StyledIndicator>,\n  StyledIndicatorProps\n>((props, forwardRef) => <StyledIndicator {...props} ref={forwardRef} />)\n","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'\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\nexport const StyledCheckbox = styled(Root, {\n  all: 'unset',\n  square: '$6',\n  color: '$icon-primary-inverted',\n\n  '&:focus': {\n    [checkboxContentSelector]: {\n      boxShadow:\n        '0px 0px 0px 1px $colors$white, 0px 0px 0px 3px $colors$blue-500, 0px 0px 0px 5px $colors$blue-200',\n    },\n  },\n  '&:hover[data-state=\"checked\"][aria-disabled=\"true\"], &:hover[data-state=\"checked\"]&:disabled':\n    {\n      [checkboxContentSelector]: {\n        backgroundColor: '$background-neutrals-controls-disabled',\n      },\n    },\n  '&[aria-disabled=\"true\"][data-state=\"checked\"], &:disabled[data-state=\"checked\"]':\n    {\n      [checkboxContentSelector]: {\n        backgroundColor: '$background-neutrals-controls-disabled',\n        color: '$icon-neutrals-disabled',\n      },\n    },\n  '&[aria-disabled=\"true\"][data-state=\"unchecked\"], &:disabled[data-state=\"unchecked\"]':\n    {\n      [checkboxContentSelector]: {\n        backgroundColor: '$background-neutrals',\n        color: '$icon-neutrals-disabled',\n      },\n    },\n  variants: {\n    variant: {\n      'solid-prominent': {\n        '&[data-state=\"checked\"]': {\n          [checkboxContentSelector]: {\n            backgroundColor: '$background-primary-prominent',\n            color: '$icon-primary-inverted',\n          },\n        },\n        '&[data-state=\"unchecked\"]': {\n          [checkboxContentSelector]: {\n            border: '1px solid $border-neutrals-controls',\n          },\n        },\n        '&:hover[data-state=\"checked\"]': {\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      },\n      'solid-subtle': {\n        '&[data-state=\"checked\"]': {\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        '&:hover[data-state=\"checked\"], &:hover[data-state=\"unchecked\"]': {\n          [checkboxContentSelector]: {\n            backgroundColor: '$background-primary-subtle-hover',\n            color: '$icon-primary-hover',\n          },\n        },\n        '&[aria-disabled=\"true\"][data-state=\"unchecked\"], &:disabled[data-state=\"unchecked\"]':\n          {\n            [checkboxContentSelector]: {\n              backgroundColor: '$background-neutrals-controls-disabled',\n            },\n          },\n      },\n      ghost: {\n        '&[data-state=\"checked\"]': {\n          [checkboxContentSelector]: {\n            color: '$icon-primary',\n          },\n        },\n\n        '&:hover[data-state=\"checked\"]': {\n          [checkboxContentSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        '&[aria-disabled=\"true\"][data-state=\"checked\"], &:disabled[data-state=\"checked\"]':\n          {\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\nexport type StyledCheckboxProps = ComponentPropsWithRef<typeof StyledCheckbox>\n","import {\n  IconProhibit,\n  IconCheckMark,\n  IconMinus,\n} from '@mirohq/design-system-icons'\nimport { styled } from '@mirohq/design-system-stitches'\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","import React, { useState } from 'react'\nimport type { ElementRef } from 'react'\n\nimport { Indicator } from './partials/indicator'\nimport { StyledCheckboxContent, StyledCheckbox } from './checkbox.styled'\nimport {\n  StyledCheckMark,\n  StyledDisabledMark,\n} from './partials/status-marks.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\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 of the checkbox changes.\n   */\n  onCheckedChange?: (checked: boolean | 'indeterminate') => void\n\n  /**\n   * When true, prevents the user from interacting with the checkbox but focus\n   * is still possible.\n   */\n  'aria-disabled'?: boolean\n}\n\nexport const Checkbox = React.forwardRef<\n  ElementRef<typeof StyledCheckbox>,\n  CheckboxProps\n>(\n  (\n    {\n      'aria-disabled': ariaDisabled = false,\n      checked,\n      defaultChecked = false,\n      disabled,\n      onClick,\n      onKeyDown,\n      size = 'large',\n      variant = 'solid-prominent',\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const [checkedState, setCheckedState] = useState(defaultChecked)\n    const disabledUnChecked =\n      (disabled === true || ariaDisabled) && (checked ?? !checkedState)\n    return (\n      <StyledCheckbox\n        {...restProps}\n        aria-disabled={ariaDisabled}\n        checked={checked ?? checkedState}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        size={size}\n        variant={variant}\n        onClick={e => {\n          if (ariaDisabled) {\n            e.preventDefault()\n            return\n          }\n          setCheckedState(prevChecked => !prevChecked)\n          onClick?.(e)\n        }}\n        ref={forwardRef}\n      >\n        <StyledCheckboxContent>\n          <Indicator>\n            <StyledCheckMark size={size} />\n          </Indicator>\n          {disabledUnChecked && <StyledDisabledMark size={size} />}\n        </StyledCheckboxContent>\n      </StyledCheckbox>\n    )\n  }\n)\n"],"names":["RadixIndicator"],"mappings":"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"}
+{"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 type { ElementRef } from 'react'\nimport { Indicator as RadixIndicator } from '@radix-ui/react-checkbox'\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'?: boolean\n}\n\nexport const Checkbox = React.forwardRef<\n  ElementRef<typeof StyledCheckbox>,\n  CheckboxProps\n>(\n  (\n    {\n      'aria-disabled': ariaDisabled = false,\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 disabledUnchecked =\n      (disabled === true || ariaDisabled) && 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 (ariaDisabled) {\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

@@ -144,6 +144,9 @@ declare const StyledCheckbox: react.ForwardRefExoticComponent<Pick<Omit<{
         readonly 'icon-success-inverted'?: any;
         readonly 'icon-success'?: any;
         readonly 'icon-warning'?: any;
+        readonly 'border-focus-outer'?: any;
+        readonly 'border-focus-middle'?: any;
+        readonly 'border-focus-inner'?: any;
         readonly 'border-neutrals'?: any;
         readonly 'border-neutrals-hover'?: any;
         readonly 'border-neutrals-active'?: any;
@@ -185,6 +188,9 @@ declare const StyledCheckbox: react.ForwardRefExoticComponent<Pick<Omit<{
     shadows: {
         readonly 50: "0 4px 16px #05003812";
         readonly 100: "0 8px 32px #05003808";
+        readonly 'focus-small': "0 0 0 2px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
+        readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
+        readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
     };
     sizes: {
         readonly number: string;
@@ -455,7 +461,7 @@ interface CheckboxProps extends StyledCheckboxProps {
      * The controlled checked state of the checkbox. Must be used in conjunction
      * with onCheckedChange.
      */
-    checked?: boolean;
+    checked?: boolean | 'indeterminate';
     /**
      * When true, indicates that the user must check the checkbox before the
      * owning form can be submitted.
@@ -475,15 +481,19 @@ interface CheckboxProps extends StyledCheckboxProps {
      */
     disabled?: boolean;
     /**
-     * Event handler called when the checked state of the checkbox changes.
+     * Event handler called when the checked state equals true.
      */
-    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+    onChecked?: () => void;
+    /**
+     * Event handler called when the checked state equals false.
+     */
+    onUnchecked?: () => void;
     /**
      * When true, prevents the user from interacting with the checkbox but focus
      * is still possible.
      */
     'aria-disabled'?: boolean;
 }
-declare const Checkbox: react__default.ForwardRefExoticComponent<Pick<CheckboxProps, "color" | "translate" | "css" | "prefix" | "asChild" | "UNSAFE_style" | "form" | "slot" | "title" | "autoFocus" | "checked" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "placeholder" | "required" | "size" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "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" | "children" | "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"> & react__default.RefAttributes<HTMLButtonElement>>;
+declare const Checkbox: react__default.ForwardRefExoticComponent<Pick<CheckboxProps, "color" | "translate" | "css" | "prefix" | "asChild" | "UNSAFE_style" | "form" | "slot" | "title" | "autoFocus" | "checked" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "placeholder" | "required" | "size" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "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" | "children" | "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>>;
 
 export { Checkbox, CheckboxProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-checkbox",
-  "version": "1.0.0-checkbox.0",
+  "version": "1.0.0-checkbox.2",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -27,12 +27,12 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.0",
-    "@mirohq/design-system-icons": "^0.7.1-checkbox.0",
-    "@mirohq/design-system-primitive": "^1.0.4",
-    "@mirohq/design-system-stitches": "^2.1.0-checkbox.0"
+    "@mirohq/design-system-icons": "^0.12.1-checkbox.1",
+    "@mirohq/design-system-stitches": "^2.2.0-checkbox.0",
+    "@mirohq/design-system-primitive": "^1.1.0"
   },
   "devDependencies": {
-    "@mirohq/design-system-flex": "^2.0.14-checkbox.0"
+    "@mirohq/design-system-flex": "^2.1.3-checkbox.1"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",