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

package/dist/main.js

@@ -0,0 +1,194 @@
+'use strict';
+
+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 designSystemPrimitive = require('@mirohq/design-system-primitive');
+var designSystemIcons = require('@mirohq/design-system-icons');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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",
+  borderRadius: "$50",
+  position: "relative",
+  margin: "auto",
+  boxSizing: "border-box"
+});
+const checkboxContentSelector = `& ${StyledCheckboxContent}`;
+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"
+    }
+  },
+  '&:hover[data-state="checked"][aria-disabled="true"], &:hover[data-state="checked"]&:disabled': {
+    [checkboxContentSelector]: {
+      backgroundColor: "$background-neutrals-controls-disabled"
+    }
+  },
+  '&[aria-disabled="true"][data-state="checked"], &:disabled[data-state="checked"]': {
+    [checkboxContentSelector]: {
+      backgroundColor: "$background-neutrals-controls-disabled",
+      color: "$icon-neutrals-disabled"
+    }
+  },
+  '&[aria-disabled="true"][data-state="unchecked"], &:disabled[data-state="unchecked"]': {
+    [checkboxContentSelector]: {
+      backgroundColor: "$background-neutrals",
+      color: "$icon-neutrals-disabled"
+    }
+  },
+  variants: {
+    variant: {
+      "solid-prominent": {
+        '&[data-state="checked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-primary-prominent",
+            color: "$icon-primary-inverted"
+          }
+        },
+        '&[data-state="unchecked"]': {
+          [checkboxContentSelector]: {
+            border: "1px solid $border-neutrals-controls"
+          }
+        },
+        '&:hover[data-state="checked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-primary-prominent-hover"
+          }
+        },
+        '&:hover[data-state="unchecked"]': {
+          [checkboxContentSelector]: {
+            border: "1px solid $border-primary"
+          }
+        }
+      },
+      "solid-subtle": {
+        '&[data-state="checked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-primary-subtle",
+            color: "$icon-primary"
+          }
+        },
+        '&[data-state="unchecked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-primary-subtle"
+          }
+        },
+        '&:hover[data-state="checked"], &:hover[data-state="unchecked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-primary-subtle-hover",
+            color: "$icon-primary-hover"
+          }
+        },
+        '&[aria-disabled="true"][data-state="unchecked"], &:disabled[data-state="unchecked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-neutrals-controls-disabled"
+          }
+        }
+      },
+      ghost: {
+        '&[data-state="checked"]': {
+          [checkboxContentSelector]: {
+            color: "$icon-primary"
+          }
+        },
+        '&:hover[data-state="checked"]': {
+          [checkboxContentSelector]: {
+            color: "$icon-primary-hover"
+          }
+        },
+        '&[aria-disabled="true"][data-state="checked"], &:disabled[data-state="checked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-neutrals"
+          }
+        }
+      }
+    },
+    size: {
+      large: {
+        [checkboxContentSelector]: {
+          square: "$5"
+        }
+      },
+      small: {
+        [checkboxContentSelector]: {
+          square: "$4"
+        }
+      }
+    }
+  }
+});
+
+const markStyles = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%,-50%)",
+  variants: {
+    size: {
+      large: { width: "18px" },
+      small: { width: "12px" }
+    }
+  }
+};
+const StyledDisabledMark = designSystemStitches.styled(designSystemIcons.IconProhibit, markStyles);
+const StyledCheckMark = designSystemStitches.styled(designSystemIcons.IconCheckMark, markStyles);
+designSystemStitches.styled(designSystemIcons.IconMinus, markStyles);
+
+const Checkbox = React__default["default"].forwardRef(
+  ({
+    "aria-disabled": ariaDisabled = false,
+    checked,
+    defaultChecked = false,
+    disabled,
+    onClick,
+    onKeyDown,
+    size = "large",
+    variant = "solid-prominent",
+    ...restProps
+  }, forwardRef) => {
+    const [checkedState, setCheckedState] = React.useState(defaultChecked);
+    const disabledUnChecked = (disabled === true || ariaDisabled) && (checked != null ? checked : !checkedState);
+    return /* @__PURE__ */ React__default["default"].createElement(StyledCheckbox, {
+      ...restProps,
+      "aria-disabled": ariaDisabled,
+      checked: checked != null ? checked : checkedState,
+      defaultChecked,
+      disabled,
+      size,
+      variant,
+      onClick: (e) => {
+        if (ariaDisabled) {
+          e.preventDefault();
+          return;
+        }
+        setCheckedState((prevChecked) => !prevChecked);
+        onClick == null ? void 0 : onClick(e);
+      },
+      ref: forwardRef
+    }, /* @__PURE__ */ React__default["default"].createElement(StyledCheckboxContent, null, /* @__PURE__ */ React__default["default"].createElement(Indicator, null, /* @__PURE__ */ React__default["default"].createElement(StyledCheckMark, {
+      size
+    })), disabledUnChecked && /* @__PURE__ */ React__default["default"].createElement(StyledDisabledMark, {
+      size
+    })));
+  }
+);
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +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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"}

package/dist/module.js

@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+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",
+  borderRadius: "$50",
+  position: "relative",
+  margin: "auto",
+  boxSizing: "border-box"
+});
+const checkboxContentSelector = `& ${StyledCheckboxContent}`;
+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"
+    }
+  },
+  '&:hover[data-state="checked"][aria-disabled="true"], &:hover[data-state="checked"]&:disabled': {
+    [checkboxContentSelector]: {
+      backgroundColor: "$background-neutrals-controls-disabled"
+    }
+  },
+  '&[aria-disabled="true"][data-state="checked"], &:disabled[data-state="checked"]': {
+    [checkboxContentSelector]: {
+      backgroundColor: "$background-neutrals-controls-disabled",
+      color: "$icon-neutrals-disabled"
+    }
+  },
+  '&[aria-disabled="true"][data-state="unchecked"], &:disabled[data-state="unchecked"]': {
+    [checkboxContentSelector]: {
+      backgroundColor: "$background-neutrals",
+      color: "$icon-neutrals-disabled"
+    }
+  },
+  variants: {
+    variant: {
+      "solid-prominent": {
+        '&[data-state="checked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-primary-prominent",
+            color: "$icon-primary-inverted"
+          }
+        },
+        '&[data-state="unchecked"]': {
+          [checkboxContentSelector]: {
+            border: "1px solid $border-neutrals-controls"
+          }
+        },
+        '&:hover[data-state="checked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-primary-prominent-hover"
+          }
+        },
+        '&:hover[data-state="unchecked"]': {
+          [checkboxContentSelector]: {
+            border: "1px solid $border-primary"
+          }
+        }
+      },
+      "solid-subtle": {
+        '&[data-state="checked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-primary-subtle",
+            color: "$icon-primary"
+          }
+        },
+        '&[data-state="unchecked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-primary-subtle"
+          }
+        },
+        '&:hover[data-state="checked"], &:hover[data-state="unchecked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-primary-subtle-hover",
+            color: "$icon-primary-hover"
+          }
+        },
+        '&[aria-disabled="true"][data-state="unchecked"], &:disabled[data-state="unchecked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-neutrals-controls-disabled"
+          }
+        }
+      },
+      ghost: {
+        '&[data-state="checked"]': {
+          [checkboxContentSelector]: {
+            color: "$icon-primary"
+          }
+        },
+        '&:hover[data-state="checked"]': {
+          [checkboxContentSelector]: {
+            color: "$icon-primary-hover"
+          }
+        },
+        '&[aria-disabled="true"][data-state="checked"], &:disabled[data-state="checked"]': {
+          [checkboxContentSelector]: {
+            backgroundColor: "$background-neutrals"
+          }
+        }
+      }
+    },
+    size: {
+      large: {
+        [checkboxContentSelector]: {
+          square: "$5"
+        }
+      },
+      small: {
+        [checkboxContentSelector]: {
+          square: "$4"
+        }
+      }
+    }
+  }
+});
+
+const markStyles = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%,-50%)",
+  variants: {
+    size: {
+      large: { width: "18px" },
+      small: { width: "12px" }
+    }
+  }
+};
+const StyledDisabledMark = styled(IconProhibit, markStyles);
+const StyledCheckMark = styled(IconCheckMark, markStyles);
+styled(IconMinus, markStyles);
+
+const Checkbox = React.forwardRef(
+  ({
+    "aria-disabled": ariaDisabled = false,
+    checked,
+    defaultChecked = false,
+    disabled,
+    onClick,
+    onKeyDown,
+    size = "large",
+    variant = "solid-prominent",
+    ...restProps
+  }, forwardRef) => {
+    const [checkedState, setCheckedState] = useState(defaultChecked);
+    const disabledUnChecked = (disabled === true || ariaDisabled) && (checked != null ? checked : !checkedState);
+    return /* @__PURE__ */ React.createElement(StyledCheckbox, {
+      ...restProps,
+      "aria-disabled": ariaDisabled,
+      checked: checked != null ? checked : checkedState,
+      defaultChecked,
+      disabled,
+      size,
+      variant,
+      onClick: (e) => {
+        if (ariaDisabled) {
+          e.preventDefault();
+          return;
+        }
+        setCheckedState((prevChecked) => !prevChecked);
+        onClick == null ? void 0 : onClick(e);
+      },
+      ref: forwardRef
+    }, /* @__PURE__ */ React.createElement(StyledCheckboxContent, null, /* @__PURE__ */ React.createElement(Indicator, null, /* @__PURE__ */ React.createElement(StyledCheckMark, {
+      size
+    })), disabledUnChecked && /* @__PURE__ */ React.createElement(StyledDisabledMark, {
+      size
+    })));
+  }
+);
+
+export { Checkbox };
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +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":";;;;;;AAMA,MAAM,eAAA,GAAkB,OAAOA,WAAc,CAAA,CAAA;AAGtC,MAAM,YAAY,KAAM,CAAA,UAAA,CAG7B,CAAC,KAAA,EAAO,+BAAgB,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,EAAiB,GAAG,KAAA;AAAA,EAAO,GAAK,EAAA,UAAA;AAAA,CAAY,CAAE,CAAA;;ACP3D,MAAA,qBAAA,GAAwB,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EACzD,OAAS,EAAA,OAAA;AAAA,EACT,aAAe,EAAA,MAAA;AAAA,EACf,YAAc,EAAA,KAAA;AAAA,EACd,QAAU,EAAA,UAAA;AAAA,EACV,MAAQ,EAAA,MAAA;AAAA,EACR,SAAW,EAAA,YAAA;AACb,CAAC,CAAA,CAAA;AAED,MAAM,0BAA0B,CAAK,EAAA,EAAA,qBAAA,CAAA,CAAA,CAAA;AAExB,MAAA,cAAA,GAAiB,OAAO,IAAM,EAAA;AAAA,EACzC,GAAK,EAAA,OAAA;AAAA,EACL,MAAQ,EAAA,IAAA;AAAA,EACR,KAAO,EAAA,wBAAA;AAAA,EAEP,SAAW,EAAA;AAAA,IACT,CAAC,uBAA0B,GAAA;AAAA,MACzB,SACE,EAAA,mGAAA;AAAA,KACJ;AAAA,GACF;AAAA,EACA,8FACE,EAAA;AAAA,IACE,CAAC,uBAA0B,GAAA;AAAA,MACzB,eAAiB,EAAA,wCAAA;AAAA,KACnB;AAAA,GACF;AAAA,EACF,iFACE,EAAA;AAAA,IACE,CAAC,uBAA0B,GAAA;AAAA,MACzB,eAAiB,EAAA,wCAAA;AAAA,MACjB,KAAO,EAAA,yBAAA;AAAA,KACT;AAAA,GACF;AAAA,EACF,qFACE,EAAA;AAAA,IACE,CAAC,uBAA0B,GAAA;AAAA,MACzB,eAAiB,EAAA,sBAAA;AAAA,MACjB,KAAO,EAAA,yBAAA;AAAA,KACT;AAAA,GACF;AAAA,EACF,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,iBAAmB,EAAA;AAAA,QACjB,yBAA2B,EAAA;AAAA,UACzB,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,+BAAA;AAAA,YACjB,KAAO,EAAA,wBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,2BAA6B,EAAA;AAAA,UAC3B,CAAC,uBAA0B,GAAA;AAAA,YACzB,MAAQ,EAAA,qCAAA;AAAA,WACV;AAAA,SACF;AAAA,QACA,+BAAiC,EAAA;AAAA,UAC/B,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,qCAAA;AAAA,WACnB;AAAA,SACF;AAAA,QACA,iCAAmC,EAAA;AAAA,UACjC,CAAC,uBAA0B,GAAA;AAAA,YACzB,MAAQ,EAAA,2BAAA;AAAA,WACV;AAAA,SACF;AAAA,OACF;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,yBAA2B,EAAA;AAAA,UACzB,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,4BAAA;AAAA,YACjB,KAAO,EAAA,eAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,2BAA6B,EAAA;AAAA,UAC3B,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,4BAAA;AAAA,WACnB;AAAA,SACF;AAAA,QACA,gEAAkE,EAAA;AAAA,UAChE,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,kCAAA;AAAA,YACjB,KAAO,EAAA,qBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,qFACE,EAAA;AAAA,UACE,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,wCAAA;AAAA,WACnB;AAAA,SACF;AAAA,OACJ;AAAA,MACA,KAAO,EAAA;AAAA,QACL,yBAA2B,EAAA;AAAA,UACzB,CAAC,uBAA0B,GAAA;AAAA,YACzB,KAAO,EAAA,eAAA;AAAA,WACT;AAAA,SACF;AAAA,QAEA,+BAAiC,EAAA;AAAA,UAC/B,CAAC,uBAA0B,GAAA;AAAA,YACzB,KAAO,EAAA,qBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,iFACE,EAAA;AAAA,UACE,CAAC,uBAA0B,GAAA;AAAA,YACzB,eAAiB,EAAA,sBAAA;AAAA,WACnB;AAAA,SACF;AAAA,OACJ;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,CAAC,uBAA0B,GAAA;AAAA,UACzB,MAAQ,EAAA,IAAA;AAAA,SACV;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,uBAA0B,GAAA;AAAA,UACzB,MAAQ,EAAA,IAAA;AAAA,SACV;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC3HD,MAAM,UAAa,GAAA;AAAA,EACjB,QAAU,EAAA,UAAA;AAAA,EACV,GAAK,EAAA,KAAA;AAAA,EACL,IAAM,EAAA,KAAA;AAAA,EACN,SAAW,EAAA,sBAAA;AAAA,EACX,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,MACvB,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,KACzB;AAAA,GACF;AACF,CAAA,CAAA;AAEa,MAAA,kBAAA,GAAqB,MAAO,CAAA,YAAA,EAAc,UAAU,CAAA,CAAA;AAEpD,MAAA,eAAA,GAAkB,MAAO,CAAA,aAAA,EAAe,UAAU,CAAA,CAAA;AAExB,MAAO,CAAA,SAAA,EAAW,UAAU;;AC4C5D,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EAI5B,CACE;AAAA,IACE,iBAAiB,YAAe,GAAA,KAAA;AAAA,IAChC,OAAA;AAAA,IACA,cAAiB,GAAA,KAAA;AAAA,IACjB,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,OAAU,GAAA,iBAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,cAAc,CAAA,CAAA;AAC/D,IAAA,MAAM,iBACH,GAAA,CAAA,QAAA,KAAa,IAAQ,IAAA,YAAA,MAAkB,4BAAW,CAAC,YAAA,CAAA,CAAA;AACtD,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,eAAe,EAAA,YAAA;AAAA,MACf,SAAS,OAAW,IAAA,IAAA,GAAA,OAAA,GAAA,YAAA;AAAA,MACpB,cAAA;AAAA,MACA,QAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAS,CAAK,CAAA,KAAA;AACZ,QAAA,IAAI,YAAc,EAAA;AAChB,UAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,UAAA,OAAA;AAAA,SACF;AACA,QAAgB,eAAA,CAAA,CAAA,WAAA,KAAe,CAAC,WAAW,CAAA,CAAA;AAC3C,QAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OACZ;AAAA,MACA,GAAK,EAAA,UAAA;AAAA,KAAA,kBAEJ,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MAAgB,IAAA;AAAA,KAAY,CAC/B,CACC,EAAA,iBAAA,oBAAsB,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAA,MAAmB,IAAA;AAAA,KAAY,CACxD,CACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/types.d.ts

@@ -0,0 +1,489 @@
+import * as react from 'react';
+import react__default, { ComponentPropsWithRef } from 'react';
+import * as _radix_ui_react_checkbox from '@radix-ui/react-checkbox';
+import * as _mirohq_design_system_stitches 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';
+
+declare const StyledCheckbox: react.ForwardRefExoticComponent<Pick<Omit<{
+    variant?: "solid-prominent" | "solid-subtle" | "ghost" | undefined;
+    size?: "small" | "large" | undefined;
+}, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+    variant?: "solid-prominent" | "solid-subtle" | "ghost" | undefined;
+    size?: "small" | "large" | undefined;
+}, {}> & _mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_checkbox.CheckboxProps & react.RefAttributes<HTMLButtonElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+    'border-widths': {
+        readonly none: 0;
+        readonly sm: "1px";
+        readonly md: "2px";
+        readonly lg: "4px";
+    };
+    colors: {
+        readonly 'blue-100': any;
+        readonly 'blue-200': any;
+        readonly 'blue-300': any;
+        readonly 'blue-400': any;
+        readonly 'blue-500': any;
+        readonly 'blue-600': any;
+        readonly 'blue-700': any;
+        readonly 'blue-800': any;
+        readonly 'blue-900': any;
+        readonly 'blue-1000': any;
+        readonly 'gray-100': any;
+        readonly 'gray-200': any;
+        readonly 'gray-300': any;
+        readonly 'gray-400': any;
+        readonly 'gray-500': any;
+        readonly 'gray-600': any;
+        readonly 'gray-700': any;
+        readonly 'gray-800': any;
+        readonly 'gray-900': any;
+        readonly 'indigo-100': any;
+        readonly 'indigo-200': any;
+        readonly 'indigo-300': any;
+        readonly 'indigo-400': any;
+        readonly 'indigo-500': any;
+        readonly 'indigo-600': any;
+        readonly 'indigo-700': any;
+        readonly 'indigo-800': any;
+        readonly 'indigo-900': any;
+        readonly 'red-100': any;
+        readonly 'red-200': any;
+        readonly 'red-300': any;
+        readonly 'red-400': any;
+        readonly 'red-500': any;
+        readonly 'red-600': any;
+        readonly 'red-700': any;
+        readonly 'red-800': any;
+        readonly 'red-900': any;
+        readonly 'yellow-100': any;
+        readonly 'yellow-200': any;
+        readonly 'yellow-300': any;
+        readonly 'yellow-400': any;
+        readonly 'yellow-500': any;
+        readonly 'yellow-600': any;
+        readonly 'yellow-700': any;
+        readonly 'yellow-800': any;
+        readonly 'yellow-900': any;
+        readonly 'green-100': any;
+        readonly 'green-200': any;
+        readonly 'green-300': any;
+        readonly 'green-400': any;
+        readonly 'green-500': any;
+        readonly 'green-600': any;
+        readonly 'green-700': any;
+        readonly 'green-800': any;
+        readonly 'green-900': any;
+        readonly black: any;
+        readonly white: any;
+        readonly transparent: any;
+        readonly 'background-neutrals'?: any;
+        readonly 'background-neutrals-body'?: any;
+        readonly 'background-neutrals-container'?: any;
+        readonly 'background-neutrals-inverted'?: any;
+        readonly 'background-neutrals-inverted-subtle'?: any;
+        readonly 'background-neutrals-subtle'?: any;
+        readonly 'background-neutrals-subtle-hover'?: any;
+        readonly 'background-neutrals-subtle-active'?: any;
+        readonly 'background-neutrals-disabled'?: any;
+        readonly 'background-neutrals-controls-disabled'?: any;
+        readonly 'background-neutrals-scrolls'?: any;
+        readonly 'background-neutrals-inactive'?: any;
+        readonly 'background-neutrals-inactive-hover'?: any;
+        readonly 'background-primary-prominent'?: any;
+        readonly 'background-primary-prominent-hover'?: any;
+        readonly 'background-primary-prominent-active'?: any;
+        readonly 'background-primary-prominent-selected'?: any;
+        readonly 'background-primary-subtle'?: any;
+        readonly 'background-primary-subtle-hover'?: any;
+        readonly 'background-primary-subtle-active'?: any;
+        readonly 'background-primary-subtle-selected'?: any;
+        readonly 'background-danger-prominent'?: any;
+        readonly 'background-danger-prominent-hover'?: any;
+        readonly 'background-danger-prominent-active'?: any;
+        readonly 'background-danger'?: any;
+        readonly 'background-danger-hover'?: any;
+        readonly 'background-success'?: any;
+        readonly 'background-warning-subtle'?: any;
+        readonly 'background-warning-prominent'?: any;
+        readonly 'text-neutrals-inverted'?: any;
+        readonly 'text-neutrals'?: any;
+        readonly 'text-neutrals-subtle'?: any;
+        readonly 'text-neutrals-placeholder-only'?: any;
+        readonly 'text-neutrals-placeholder'?: any;
+        readonly 'text-neutrals-disabled'?: any;
+        readonly 'text-primary-inverted'?: any;
+        readonly 'text-primary'?: any;
+        readonly 'text-primary-hover'?: any;
+        readonly 'text-primary-active'?: any;
+        readonly 'text-primary-selected'?: any;
+        readonly 'text-primary-inverted-subtle'?: any;
+        readonly 'text-danger-inverted'?: any;
+        readonly 'text-danger'?: any;
+        readonly 'text-danger-hover'?: any;
+        readonly 'text-danger-active'?: any;
+        readonly 'text-success'?: any;
+        readonly 'text-warning'?: any;
+        readonly 'icon-neutrals-inverted'?: any;
+        readonly 'icon-neutrals'?: any;
+        readonly 'icon-neutrals-with-text'?: any;
+        readonly 'icon-neutrals-subtle'?: any;
+        readonly 'icon-neutrals-disabled'?: any;
+        readonly 'icon-neutrals-search'?: any;
+        readonly 'icon-neutrals-inactive'?: any;
+        readonly 'icon-neutrals-inactive-hover'?: any;
+        readonly 'icon-primary-inverted'?: any;
+        readonly 'icon-primary'?: any;
+        readonly 'icon-primary-hover'?: any;
+        readonly 'icon-primary-active'?: any;
+        readonly 'icon-primary-selected'?: any;
+        readonly 'icon-danger-inverted'?: any;
+        readonly 'icon-danger'?: any;
+        readonly 'icon-danger-hover'?: any;
+        readonly 'icon-danger-active'?: any;
+        readonly 'icon-success-inverted'?: any;
+        readonly 'icon-success'?: any;
+        readonly 'icon-warning'?: any;
+        readonly 'border-neutrals'?: any;
+        readonly 'border-neutrals-hover'?: any;
+        readonly 'border-neutrals-active'?: any;
+        readonly 'border-neutrals-disabled'?: any;
+        readonly 'border-neutrals-controls'?: any;
+        readonly 'border-neutrals-controls-disabled'?: any;
+        readonly 'border-neutrals-subtle'?: any;
+        readonly 'border-neutrals-inverted'?: any;
+        readonly 'border-primary'?: any;
+        readonly 'border-primary-hover'?: any;
+        readonly 'border-primary-active'?: any;
+        readonly 'border-primary-inverted'?: any;
+        readonly 'border-danger'?: any;
+        readonly 'border-success'?: any;
+        readonly 'border-warning'?: any;
+    };
+    'font-sizes': {
+        readonly 150: "0.75rem";
+        readonly 175: "0.875rem";
+        readonly 200: "1rem";
+        readonly 225: "1.125rem";
+        readonly 250: "1.25rem";
+        readonly 300: "1.5rem";
+        readonly 400: "2rem";
+        readonly 500: "2.5rem";
+        readonly 600: "3rem";
+        readonly 800: "4rem";
+        readonly 900: "4.5rem";
+    };
+    radii: {
+        readonly none: 0;
+        readonly half: "999em";
+        readonly 25: "2px";
+        readonly 50: "4px";
+        readonly 75: "6px";
+        readonly 100: "8px";
+        readonly 200: "16px";
+    };
+    shadows: {
+        readonly 50: "0 4px 16px #05003812";
+        readonly 100: "0 8px 32px #05003808";
+    };
+    sizes: {
+        readonly number: string;
+        readonly 'icon-200': "16px";
+        readonly 'icon-300': "24px";
+        readonly 'icon-400': "32px";
+    };
+    space: {
+        readonly none: 0;
+        readonly 50: "4px";
+        readonly 100: "8px";
+        readonly 150: "12px";
+        readonly 200: "16px";
+        readonly 300: "24px";
+        readonly 400: "32px";
+        readonly 500: "64px";
+        readonly 600: "48px";
+        readonly 800: "64px";
+        readonly 1200: "96px";
+        readonly 1600: "128px";
+    };
+    'space-gap': {
+        readonly none: any;
+        readonly 50: any;
+        readonly 100: any;
+        readonly 200: any;
+        readonly 300: any;
+    };
+    'space-inset': {
+        readonly none: any;
+        readonly 50: any;
+        readonly 100: any;
+        readonly 150: any;
+        readonly 200: any;
+        readonly 300: any;
+        readonly 400: any;
+        readonly 600: any;
+        readonly 800: any;
+        readonly 1200: any;
+        readonly 1600: any;
+    };
+    'space-offset': {
+        readonly none: any;
+        readonly 50: any;
+        readonly 100: any;
+        readonly 150: any;
+        readonly 200: any;
+        readonly 300: any;
+        readonly 400: any;
+        readonly 600: any;
+        readonly 800: any;
+        readonly 1200: any;
+        readonly 1600: any;
+        readonly 'stacking-none': any;
+        readonly 'stacking-100': any;
+        readonly 'stacking-200': any;
+        readonly 'stacking-300': any;
+        readonly 'stacking-400': any;
+        readonly 'stacking-500': any;
+        readonly 'stacking-800': any;
+    };
+    'z-indices': {
+        readonly dropdownMenu: 100;
+        readonly popover: 200;
+        readonly tooltip: 300;
+    };
+}, {
+    readonly background: "colors";
+    readonly backgroundColor: "colors";
+    readonly backgroundImage: "colors";
+    readonly blockSize: "sizes";
+    readonly border: "colors";
+    readonly borderBlock: "colors";
+    readonly borderBlockEnd: "colors";
+    readonly borderBlockStart: "colors";
+    readonly borderBottom: "colors";
+    readonly borderBottomColor: "colors";
+    readonly borderBottomLeftRadius: "radii";
+    readonly borderBottomRightRadius: "radii";
+    readonly borderBottomStyle: "border-styles";
+    readonly borderBottomWidth: "border-widths";
+    readonly borderColor: "colors";
+    readonly borderImage: "colors";
+    readonly borderInline: "colors";
+    readonly borderInlineEnd: "colors";
+    readonly borderInlineStart: "colors";
+    readonly borderLeft: "colors";
+    readonly borderLeftColor: "colors";
+    readonly borderLeftStyle: "border-styles";
+    readonly borderLeftWidth: "border-widths";
+    readonly borderRadius: "radii";
+    readonly borderRight: "colors";
+    readonly borderRightColor: "colors";
+    readonly borderRightStyle: "border-styles";
+    readonly borderRightWidth: "border-widths";
+    readonly borderStyle: "border-styles";
+    readonly borderTop: "colors";
+    readonly borderTopColor: "colors";
+    readonly borderTopLeftRadius: "radii";
+    readonly borderTopRightRadius: "radii";
+    readonly borderTopStyle: "border-styles";
+    readonly borderTopWidth: "border-widths";
+    readonly borderWidth: "border-widths";
+    readonly bottom: "space";
+    readonly boxShadow: "shadows";
+    readonly caretColor: "colors";
+    readonly color: "colors";
+    readonly columnGap: "space-gap";
+    readonly columnRuleColor: "colors";
+    readonly fill: "colors";
+    readonly flexBasis: "sizes";
+    readonly fontFamily: "fonts";
+    readonly fontSize: "font-sizes";
+    readonly fontWeight: "font-weights";
+    readonly gap: "space-gap";
+    readonly gridColumnGap: "space-gap";
+    readonly gridGap: "space-gap";
+    readonly gridRowGap: "space-gap";
+    readonly gridTemplateColumns: "sizes";
+    readonly gridTemplateRows: "sizes";
+    readonly height: "sizes";
+    readonly inlineSize: "sizes";
+    readonly inset: "space-inset";
+    readonly insetBlock: "space-inset";
+    readonly insetBlockEnd: "space-inset";
+    readonly insetBlockStart: "space-inset";
+    readonly insetInline: "space-inset";
+    readonly insetInlineEnd: "space-inset";
+    readonly insetInlineStart: "space-inset";
+    readonly left: "space";
+    readonly letterSpacing: "letter-spacings";
+    readonly lineHeight: "line-heights";
+    readonly margin: "space-offset";
+    readonly marginBlock: "space-offset";
+    readonly marginBlockEnd: "space-offset";
+    readonly marginBlockStart: "space-offset";
+    readonly marginBottom: "space-offset";
+    readonly marginInline: "space-offset";
+    readonly marginInlineEnd: "space-offset";
+    readonly marginInlineStart: "space-offset";
+    readonly marginLeft: "space-offset";
+    readonly marginRight: "space-offset";
+    readonly marginTop: "space-offset";
+    readonly maxBlockSize: "sizes";
+    readonly maxHeight: "sizes";
+    readonly maxInlineSize: "sizes";
+    readonly maxWidth: "sizes";
+    readonly minBlockSize: "sizes";
+    readonly minHeight: "sizes";
+    readonly minInlineSize: "sizes";
+    readonly minWidth: "sizes";
+    readonly outline: "colors";
+    readonly outlineColor: "colors";
+    readonly padding: "space-inset";
+    readonly paddingBlock: "space-inset";
+    readonly paddingBlockEnd: "space-inset";
+    readonly paddingBlockStart: "space-inset";
+    readonly paddingBottom: "space-inset";
+    readonly paddingInline: "space-inset";
+    readonly paddingInlineEnd: "space-inset";
+    readonly paddingInlineStart: "space-inset";
+    readonly paddingLeft: "space-inset";
+    readonly paddingRight: "space-inset";
+    readonly paddingTop: "space-inset";
+    readonly right: "space";
+    readonly rowGap: "space-gap";
+    readonly scrollMargin: "space-offset";
+    readonly scrollMarginBlock: "space-offset";
+    readonly scrollMarginBlockEnd: "space-offset";
+    readonly scrollMarginBlockStart: "space-offset";
+    readonly scrollMarginBottom: "space-offset";
+    readonly scrollMarginInline: "space-offset";
+    readonly scrollMarginInlineEnd: "space-offset";
+    readonly scrollMarginInlineStart: "space-offset";
+    readonly scrollMarginLeft: "space-offset";
+    readonly scrollMarginRight: "space-offset";
+    readonly scrollMarginTop: "space-offset";
+    readonly scrollPadding: "space-inset";
+    readonly scrollPaddingBlock: "space-inset";
+    readonly scrollPaddingBlockEnd: "space-inset";
+    readonly scrollPaddingBlockStart: "space-inset";
+    readonly scrollPaddingBottom: "space-inset";
+    readonly scrollPaddingInline: "space-inset";
+    readonly scrollPaddingInlineEnd: "space-inset";
+    readonly scrollPaddingInlineStart: "space-inset";
+    readonly scrollPaddingLeft: "space-inset";
+    readonly scrollPaddingRight: "space-inset";
+    readonly scrollPaddingTop: "space-inset";
+    readonly stroke: "colors";
+    readonly textDecorationColor: "colors";
+    readonly textShadow: "shadows";
+    readonly top: "space";
+    readonly transition: "transitions";
+    readonly width: "sizes";
+    readonly zIndex: "z-indices";
+}, {
+    paddingX: (value: {
+        readonly [$$PropertyValue]: "padding";
+    }) => {
+        paddingLeft: {
+            readonly [$$PropertyValue]: "padding";
+        };
+        paddingRight: {
+            readonly [$$PropertyValue]: "padding";
+        };
+    };
+    paddingY: (value: {
+        readonly [$$PropertyValue]: "padding";
+    }) => {
+        paddingTop: {
+            readonly [$$PropertyValue]: "padding";
+        };
+        paddingBottom: {
+            readonly [$$PropertyValue]: "padding";
+        };
+    };
+    marginX: (value: {
+        readonly [$$PropertyValue]: "margin";
+    }) => {
+        marginLeft: {
+            readonly [$$PropertyValue]: "margin";
+        };
+        marginRight: {
+            readonly [$$PropertyValue]: "margin";
+        };
+    };
+    marginY: (value: {
+        readonly [$$PropertyValue]: "margin";
+    }) => {
+        marginTop: {
+            readonly [$$PropertyValue]: "margin";
+        };
+        marginBottom: {
+            readonly [$$PropertyValue]: "margin";
+        };
+    };
+    square: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
+}>>> & _mirohq_design_system_stitches.CustomStylesProps, "color" | "translate" | "prefix" | "asChild" | "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" | keyof _mirohq_design_system_stitches.CustomStylesProps | "variant" | "onCheckedChange"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_checkbox.CheckboxProps & react.RefAttributes<HTMLButtonElement>>, {
+    variant?: "solid-prominent" | "solid-subtle" | "ghost" | undefined;
+    size?: "small" | "large" | undefined;
+}, {}>;
+declare type StyledCheckboxProps = ComponentPropsWithRef<typeof StyledCheckbox>;
+
+interface CheckboxProps extends StyledCheckboxProps {
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when
+     * you do not need to control its checked state.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The style of the checkbox.
+     */
+    variant?: StyledCheckboxProps['variant'];
+    /**
+     * The size of the checkbox.
+     */
+    size?: StyledCheckboxProps['size'];
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction
+     * with onCheckedChange.
+     */
+    checked?: boolean;
+    /**
+     * When true, indicates that the user must check the checkbox before the
+     * owning form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * The name of the checkbox. Submitted with its owning form as part of a
+     * name/value pair.
+     */
+    name?: string;
+    /**
+     * The value given as data when submitted with a name.
+     */
+    value?: string;
+    /**
+     * When true, prevents the user from interacting with the checkbox.
+     */
+    disabled?: boolean;
+    /**
+     * Event handler called when the checked state of the checkbox changes.
+     */
+    onCheckedChange?: (checked: boolean | 'indeterminate') => 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>>;
+
+export { Checkbox, CheckboxProps };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mirohq/design-system-checkbox",
+  "version": "1.0.0-checkbox.0",
+  "description": "",
+  "author": "Miro",
+  "source": "src/index.ts",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": "./dist/main.js",
+      "import": "./dist/module.js",
+      "types": "./dist/types.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@stitches/react": "^1.2.8",
+    "react": "^16.14 || ^17"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "@mirohq/design-system-flex": "^2.0.14-checkbox.0"
+  },
+  "scripts": {
+    "build": "rollup -c ../../../rollup.config.js",
+    "clean": "rm -rf dist",
+    "prebuild": "pnpm clean"
+  }
+}