@trackunit/react-components 0.0.74-alpha-f1247b22d.0 → 0.0.74

package/components/RadioGroup/RadioGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-interface RadioGroupProps extends CommonProps {
+export interface RadioGroupProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
     /**
      */
     children: React.ReactNode;
@@ -32,12 +32,25 @@ interface RadioGroupProps extends CommonProps {
      * Whether the radio group is disabled or not.
      */
     disabled?: boolean;
+    /**
+     * An boolean flag to set invalid mode
+     * can be used for handling errors
+     */
+    isInvalid?: boolean;
 }
 /**
- * The RadioGroup component.
+ * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
+ *
+ * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
+ *
+ * _**Do use** Radio buttons in forms, settings, or selections in a list._
+ *
+ * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
  *
  * @param {RadioGroupProps} props - The props for the RadioGroup component
  * @returns {JSX.Element} RadioGroup component
  */
-export declare const RadioGroup: ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, }: RadioGroupProps) => JSX.Element;
-export {};
+export declare const RadioGroup: {
+    ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }: RadioGroupProps): JSX.Element;
+    displayName: string;
+};

package/components/RadioGroup/RadioGroupContext.d.ts

@@ -4,6 +4,7 @@ interface RadioGroupContextProps {
     name: string;
     value: string | number;
     disabled?: boolean;
+    isInvalid?: boolean;
     onChange: (e: React.FormEvent<HTMLInputElement>) => void;
 }
 export declare const RadioGroupContext: React.Context<RadioGroupContextProps | null>;

package/components/RadioGroup/RadioItem.d.ts

@@ -9,6 +9,10 @@ interface RadioItemProps extends CommonProps {
      * The value of the radio item.
      */
     value: string | number;
+    /**
+     * The description of the radio item.
+     */
+    description?: string;
 }
 /**
  * The RadioItem component.
@@ -16,5 +20,5 @@ interface RadioItemProps extends CommonProps {
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {JSX.Element} RadioItem component
  */
-export declare const RadioItem: ({ label, value, dataTestId, className }: RadioItemProps) => JSX.Element;
+export declare const RadioItem: ({ label, value, dataTestId, className, description }: RadioItemProps) => JSX.Element;
 export {};

package/index.js

@@ -649,7 +649,7 @@ const Alert = ({
       weight: "bold"
     }, {
       children: title !== null && title !== void 0 ? title : children
-    })), children && jsx(Description$1, Object.assign({
+    })), children && jsx(Description$2, Object.assign({
       weight: !title ? "bold" : "default",
       "$hasTitle": !!title
     }, {
@@ -660,7 +660,7 @@ const Alert = ({
       weight: "bold"
     }, {
       children: title !== null && title !== void 0 ? title : children
-    })), children && jsx(Description$1, Object.assign({
+    })), children && jsx(Description$2, Object.assign({
       weight: !title ? "bold" : "default",
       "$hasTitle": !!title
     }, {
@@ -749,7 +749,7 @@ const Container$7 = tw.div`
 const Content$2 = tw.div`
   ${p => p.$inline ? tws`tu-alert__content--inline` : tws`tu-alert__content`}
 `;
-const Description$1 = tw(Text)`
+const Description$2 = tw(Text)`
   ${p => p.$hasTitle ? tws`tu-alert__description` : null}
 `;
 const RightAligned = tw.div`
@@ -1502,7 +1502,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
       onKeyPress: onKeyPress
     }, {
       children: icon
-    })), label && jsx(Label$4, Object.assign({
+    })), label && jsx(Label$5, Object.assign({
       ref: internalRef,
       htmlFor: uuid,
       "$disabled": isReadonly,
@@ -1550,7 +1550,7 @@ const HiddenInput$1 = tw.input`
 const CheckboxContainer = tw.label`
   tu-checkbox--container group
 `;
-const Label$4 = tw.label`
+const Label$5 = tw.label`
 tu-checkbox__label
 ${({
   $disabled
@@ -2491,7 +2491,7 @@ const Indicator$1 = _a => {
       "$withBackground": withBackground
     }, {
       children: icon
-    })), label !== undefined && jsx(Label$3, Object.assign({
+    })), label !== undefined && jsx(Label$4, Object.assign({
       "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label"
     }, {
       children: label
@@ -2560,7 +2560,7 @@ const IconBackground = tw.div`
   return $withBackground ? "" : "tu-indicator__icon-background--none";
 }}
 `;
-const Label$3 = tw.div`
+const Label$4 = tw.div`
   tu-indicator__label
 `;
 
@@ -2573,7 +2573,7 @@ const Label$3 = tw.div`
  * @returns {JSX.Element} Label component
  */
 
-const Label$2 = ({
+const Label$3 = ({
   id,
   htmlFor,
   label,
@@ -2595,14 +2595,14 @@ const Label$2 = ({
       htmlFor: htmlFor
     }, {
       children: labelElement
-    })), jsx(Description, Object.assign({
+    })), jsx(Description$1, Object.assign({
       subtle: true
     }, {
       children: description
     }))]
   });
 };
-const Description = tw(Text)`
+const Description$1 = tw(Text)`
   tu-label
 `;
 
@@ -2634,7 +2634,7 @@ const LegendItem = ({
       style: {
         backgroundColor: color
       }
-    }), jsx(Label$1, {
+    }), jsx(Label$2, {
       children: label
     })]
   }));
@@ -2657,7 +2657,7 @@ const Indicator = tw.span`
   rounded-[50%]
   mr-2
 `;
-const Label$1 = tw.span`
+const Label$2 = tw.span`
   text-sm
 `;
 
@@ -2717,7 +2717,7 @@ const MenuItem = ({
     onClick: onClick
   }, {
     children: jsxs(Content, {
-      children: [jsx(Label, {
+      children: [jsx(Label$1, {
         children: label
       }), icon && jsx(Icon, {
         children: icon
@@ -2734,7 +2734,7 @@ const Content = tw.div`
 const Icon = tw.div`
   tu-menuItem__icon
 `;
-const Label = tw.div`
+const Label$1 = tw.div`
   tu-menuItem__label
 `;
 
@@ -3450,7 +3450,13 @@ const Prompt = ({
 const RadioGroupContext = React.createContext(null);
 
 /**
- * The RadioGroup component.
+ * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
+ *
+ * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
+ *
+ * _**Do use** Radio buttons in forms, settings, or selections in a list._
+ *
+ * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
  *
  * @param {RadioGroupProps} props - The props for the RadioGroup component
  * @returns {JSX.Element} RadioGroup component
@@ -3466,37 +3472,38 @@ const RadioGroup = ({
   label,
   inline,
   className,
-  dataTestId
+  dataTestId,
+  isInvalid
 }) => {
-  return jsxs(Flex, Object.assign({
-    "$inline": inline,
-    className: className,
-    "data-testid": dataTestId
+  return jsx(FormGroup, Object.assign({
+    label: label,
+    dataTestId: `${dataTestId}-FormGroup`
   }, {
-    children: [label && jsx(Text, Object.assign({
-      subtle: true,
-      size: "small"
-    }, {
-      children: label
-    })), jsx(RadioGroupContext.Provider, Object.assign({
-      value: {
-        id,
-        value,
-        name: name || id,
-        onChange,
-        disabled
-      }
+    children: jsx(Flex, Object.assign({
+      "$inline": inline,
+      className: className,
+      "data-testid": dataTestId
     }, {
-      children: children
-    }))]
+      children: jsx(RadioGroupContext.Provider, Object.assign({
+        value: {
+          id,
+          value,
+          name: name || id,
+          onChange,
+          disabled,
+          isInvalid
+        }
+      }, {
+        children: children
+      }))
+    }))
   }));
 };
+RadioGroup.displayName = "RadioGroup";
 const Flex = tw.div`
-  flex
-  gap-2
-  ${({
+${({
   $inline
-}) => $inline ? tws`flex-row items-center` : tws`flex-col items-start`}
+}) => $inline ? tws`tu-radiogroup--inline` : tws`tu-radiogroup`}
 `;
 
 /**
@@ -3510,37 +3517,71 @@ const RadioItem = ({
   label,
   value,
   dataTestId,
-  className
+  className,
+  description
 }) => {
   const groupCtx = React.useContext(RadioGroupContext);
   const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
+  const uuid = v4();
   return jsxs(CustomFlex, Object.assign({
     className: className
   }, {
-    children: [jsx("input", {
-      id: `${label}_${value}`,
-      type: "radio",
-      className: "hover:cursor-pointer",
-      value: value,
-      checked: isChecked,
-      disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
-      onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange,
-      "data-testid": dataTestId
-    }), jsx("label", Object.assign({
-      className: "w-full hover:cursor-pointer",
-      htmlFor: `${label}_${value}`
-    }, {
-      children: typeof label === "string" ? jsx(Text, {
+    children: [jsxs(InputWrapper, {
+      children: [jsx(Input, {
+        id: uuid,
+        type: "radio",
+        value: value,
+        checked: isChecked,
+        "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
+        "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
+        onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange,
+        "data-testid": dataTestId,
+        "$checked": isChecked
+      }), jsx(Label, Object.assign({
+        htmlFor: uuid,
+        "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
+        "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid
+      }, {
         children: label
-      }) : label
+      }))]
+    }), description && jsx(Description, Object.assign({
+      htmlFor: uuid,
+      "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
+      "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid
+    }, {
+      children: description
     }))]
   }));
 };
 const CustomFlex = tw.div`
-  flex
-  items-center
-  gap-2
-  hover:cursor-pointer
+tu-radioitem_custom_flex
+`;
+const InputWrapper = tw.div`
+tu-radioitem_wrapper
+`;
+const Input = tw.input`
+tu-radioitem
+${({
+  $checked
+}) => $checked ? tws`tu-radioitem--checked` : tws``}
+${({
+  $disabled
+}) => $disabled ? tws`tu-radioitem--disabled` : tws``}
+${({
+  $isInvalid
+}) => $isInvalid ? tws`tu-radioitem--invalid` : tws``}
+`;
+const Label = tw.label`
+tu-radioitem__label
+${({
+  $isInvalid
+}) => $isInvalid ? tws`tu-radioitem__label--invalid` : tws``}
+${({
+  $disabled
+}) => $disabled ? tws`tu-radioitem__label--disabled` : tws``}
+`;
+const Description = tw.label`
+tu-radioitem__description
 `;
 
 /**
@@ -3564,7 +3605,7 @@ const SelectContainer = ({
   return jsxs(Container, Object.assign({
     "data-testid": dataTestId
   }, {
-    children: [label && !hideLabel && jsx(Label$2, {
+    children: [label && !hideLabel && jsx(Label$3, {
       label: label,
       htmlFor: id !== null && id !== void 0 ? id : false,
       description: description
@@ -3969,7 +4010,7 @@ const TextArea = React.forwardRef(({
     className: className,
     "data-testid": dataTestId
   }, {
-    children: [jsx(Label$2, {
+    children: [jsx(Label$3, {
       htmlFor: id !== null && id !== void 0 ? id : false,
       id: id,
       label: label,
@@ -4338,4 +4379,4 @@ const useTimeout = ({
   };
 };
 
-export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiRowTableCell, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextField, TextInput, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$3 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiRowTableCell, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextField, TextInput, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.74-alpha-f1247b22d.0",
+  "version": "0.0.74",
   "repository": "https://github.com/Trackunit/manager",
   "license": "UNLICENSED",
   "dependencies": {
-    "@trackunit/css-core": "0.0.46-alpha-f1247b22d.0",
-    "@trackunit/tailwind-styled-components": "0.0.41-alpha-f1247b22d.0",
+    "@trackunit/css-core": "0.0.45",
+    "@trackunit/tailwind-styled-components": "0.0.40",
     "react": "17.0.1",
-    "@trackunit/ui-design-tokens": "0.0.40-alpha-f1247b22d.0",
+    "@trackunit/ui-design-tokens": "0.0.39",
     "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.42-alpha-f1247b22d.0",
+    "@trackunit/ui-icons": "0.0.41",
     "react-useportal": "^1.0.16",
     "react-helmet": "^6.1.0",
     "@popperjs/core": "^2.11.4",