@trackunit/react-components 0.0.56 → 0.0.60-alpha-4730.0

package/components/Checkbox/Checkbox.d.ts

@@ -28,8 +28,19 @@ export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HT
     indeterminate?: boolean;
 }
 /**
- * A base checkbox component that can be used for boolean inputs, selectors etc.
- * A reference to the input element is provided as the `ref` prop.
- * Extends props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ * Checkbox are interactive elements that represent the boolean logical value (true or false) that can be used for boolean inputs, selectors etc.
+ *
+ * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
+ *
+ * Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
+ *
+ * _**Do use** checkboxes to allow selection in a form, for filtering, terms and conditions to indicate agreement, and bulk actions in lists or tables._
+ *
+ * _**Do not use** checkboxes if the user can only select one option from a list, radio buttons should be used instead of checkboxes._
+ *
+ * @description A reference to the input element is provided as the `ref` prop.
+ * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ * @param {CheckboxProps} props - The props for the Checkbox component
+ * @returns {JSX.Element} Checkbox component
  */
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/index.js

@@ -1396,7 +1396,7 @@ const CheckIcon = ({
   return jsx("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     className: className,
-    "data-testId": dataTestId,
+    "data-testid": dataTestId,
     fill: "none",
     viewBox: "0 0 10 10",
     stroke: "currentColor",
@@ -1435,9 +1435,20 @@ const IndeterminateIcon = ({
 }));
 
 /**
- * A base checkbox component that can be used for boolean inputs, selectors etc.
- * A reference to the input element is provided as the `ref` prop.
- * Extends props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ * Checkbox are interactive elements that represent the boolean logical value (true or false) that can be used for boolean inputs, selectors etc.
+ *
+ * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
+ *
+ * Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
+ *
+ * _**Do use** checkboxes to allow selection in a form, for filtering, terms and conditions to indicate agreement, and bulk actions in lists or tables._
+ *
+ * _**Do not use** checkboxes if the user can only select one option from a list, radio buttons should be used instead of checkboxes._
+ *
+ * @description A reference to the input element is provided as the `ref` prop.
+ * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ * @param {CheckboxProps} props - The props for the Checkbox component
+ * @returns {JSX.Element} Checkbox component
  */
 
 const Checkbox = React.forwardRef((_a, ref) => {
@@ -1515,6 +1526,7 @@ const StyledIndeterminateIcon = tw(IndeterminateIcon)`
 `;
 const CheckboxWrapper = tw.span`
   checkbox
+  transition
   ${({
   $checked,
   $disabled,

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.56",
+  "version": "0.0.60-alpha-4730.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "MIT",
   "dependencies": {
-    "@trackunit/css-core": "0.0.39",
-    "@trackunit/tailwind-styled-components": "0.0.37",
+    "@trackunit/css-core": "0.0.40-alpha-4730.0",
+    "@trackunit/tailwind-styled-components": "0.0.38-alpha-4730.0",
     "react": "17.0.1",
-    "@trackunit/ui-design-tokens": "0.0.36",
+    "@trackunit/ui-design-tokens": "0.0.37-alpha-4730.0",
     "echarts-for-react": "^3.0.2",
     "uuid": "^8.3.2",
     "@react-spring/web": "^9.4.4",
     "react-use": "^17.3.2",
     "react-day-picker": "^8.0.3",
     "date-fns": "^2.28.0",
-    "@trackunit/ui-icons": "0.0.36",
+    "@trackunit/ui-icons": "0.0.38-alpha-4730.0",
     "react-useportal": "^1.0.16",
     "react-helmet": "^6.1.0",
     "@popperjs/core": "^2.11.4",