@ultraviolet/ui 1.8.4 → 1.9.0

package/dist/index.d.ts

@@ -1083,8 +1083,15 @@ declare const Carousel: {
 
 type CheckboxProps = {
     error?: string | ReactNode;
+    /**
+     * @deprecated Size prop is deprecated and will be removed in next major update.
+     */
     size?: number;
+    /**
+     * @deprecated Progress prop is deprecated and will be removed in next major update.
+     */
     progress?: boolean;
+    helper?: ReactNode;
     disabled?: boolean;
     checked?: boolean | 'indeterminate';
     className?: string;
@@ -1692,7 +1699,7 @@ type ProgressBarProps = {
 declare const ProgressBar: ({ progress, value, sentiment, className, "data-testid": dataTestId, }: ProgressBarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type RadioProps = {
-    error?: string | ReactNode;
+    error?: ReactNode;
     checked?: boolean;
     value: string | number;
     helper?: ReactNode;
@@ -2322,6 +2329,7 @@ type ToggleProps = {
     size?: 'large' | 'small';
     labelPosition?: 'left' | 'right';
     label?: ReactNode;
+    helper?: ReactNode;
     disabled?: boolean;
     className?: string;
     required?: boolean;
@@ -2362,6 +2370,21 @@ type VerificationCodeProps = {
 };
 declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, inputStyle, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, }: VerificationCodeProps) => JSX.Element;
 
+type RadioGroupRadioProps = Omit<ComponentProps<typeof Radio>, 'onChange' | 'checked' | 'required'>;
+type RadioGroupProps = {
+    legend: string;
+    value: string | number;
+    className?: string;
+    helper?: ReactNode;
+    error?: ReactNode;
+    direction?: 'row' | 'column';
+    children: ReactNode;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>;
+declare const RadioGroup: {
+    ({ legend, value, className, helper, error, direction, children, onChange, name, required, }: RadioGroupProps): _emotion_react_jsx_runtime.JSX.Element;
+    Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: RadioGroupRadioProps) => _emotion_react_jsx_runtime.JSX.Element;
+};
+
 declare const getUUID: (prefix?: string) => string;
 
 declare const bounce: _emotion_react.Keyframes;
@@ -2405,4 +2428,4 @@ declare const down: (size: ScreenSize, rules: string) => string;
 
 declare const normalize: () => string;
 
-export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CopyButton, DateInput, EmptyState, Expandable, LineChart, Link, List, Loader, Menu, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, ProgressBar, Radio, Row, SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, Tooltip, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };
+export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CopyButton, DateInput, EmptyState, Expandable, LineChart, Link, List, Loader, Menu, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, ProgressBar, Radio, RadioGroup, Row, SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, Tooltip, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };

package/dist/src/components/Checkbox/index.js

@@ -3,55 +3,54 @@ import { useTheme } from '@emotion/react';
 import { Icon } from '@ultraviolet/icons';
 import { forwardRef, useState, useId, useEffect, useCallback } from 'react';
 import { Loader } from '../Loader/index.js';
+import { Row } from '../Row/index.js';
+import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const InnerCheckbox = /*#__PURE__*/_styled("rect", {
+const ErrorText = /*#__PURE__*/_styled(Text, {
   target: "eqr7bqq7"
-})("fill:", _ref => {
+})("padding-top:", _ref => {
   let {
     theme
   } = _ref;
-  return theme.colors.neutral.backgroundWeak;
-}, ";stroke:", _ref2 => {
+  return `${theme.space['0.5']}`;
+}, ";");
+const InnerCheckbox = /*#__PURE__*/_styled("rect", {
+  target: "eqr7bqq6"
+})("fill:", _ref2 => {
   let {
     theme
   } = _ref2;
-  return theme.colors.neutral.borderStrong;
+  return theme.colors.neutral.background;
+}, ";stroke:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.border;
 }, ";");
-const CheckMark = /*#__PURE__*/_styled("rect", {
-  target: "eqr7bqq6"
-})();
 const CheckMixedMark = /*#__PURE__*/_styled("rect", {
   target: "eqr7bqq5"
 })();
-const CheckboxIconContainer = _ref3 => {
+const CheckboxIconContainer = _ref4 => {
   let {
     children
-  } = _ref3;
+  } = _ref4;
   const theme = useTheme();
   return jsxs("g", {
     children: [jsx(InnerCheckbox, {
-      x: "5",
-      y: "5",
-      width: "14",
-      height: "14",
+      x: "2",
+      y: "2",
+      width: "20",
+      height: "20",
       rx: theme.radii.small,
       strokeWidth: "2"
     }), children]
   });
 };
-const PaddedText = /*#__PURE__*/_styled(Text, {
-  target: "eqr7bqq4"
-})("padding:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return `0 ${theme.space['0.5']}`;
-}, ";");
 const StyledIcon = /*#__PURE__*/_styled('svg', {
-  target: "eqr7bqq3"
+  target: "eqr7bqq4"
 })("border-radius:", _ref5 => {
   let {
     theme
@@ -77,149 +76,257 @@ const StyledIcon = /*#__PURE__*/_styled('svg', {
     size
   } = _ref9;
   return size;
-}, "px;");
+}, "px;& path{fill:", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral.background;
+}, ";transform:translate(2px, 2px);transform:scale(0);}");
+const StyledLabel = /*#__PURE__*/_styled('label', {
+  target: "eqr7bqq3"
+})();
 const CheckboxInput = /*#__PURE__*/_styled('input', {
   shouldForwardProp: prop => !['size'].includes(prop),
   target: "eqr7bqq2"
-})("position:absolute;white-space:nowrap;height:", _ref10 => {
-  let {
-    size
-  } = _ref10;
-  return size;
-}, "px;width:", _ref11 => {
+})("position:absolute;white-space:nowrap;height:", _ref11 => {
   let {
     size
   } = _ref11;
   return size;
-}, "px;opacity:0;border-width:0;&:not(:disabled){cursor:pointer;}&:disabled{cursor:not-allowed;}&:not(:disabled){&:checked+", StyledIcon, ",&[aria-checked='mixed']+", StyledIcon, "{fill:", _ref12 => {
+}, "px;width:", _ref12 => {
   let {
-    theme
+    size
   } = _ref12;
-  return theme.colors.primary.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref13 => {
+  return size;
+}, "px;opacity:0;border-width:0;&:not(:disabled){cursor:pointer;}&:disabled{cursor:not-allowed;}&:not(:disabled){&:checked+", StyledIcon, ",&[aria-checked='mixed']+", StyledIcon, "{fill:", _ref13 => {
   let {
     theme
   } = _ref13;
   return theme.colors.primary.backgroundStrong;
-}, ";}}&[aria-invalid='true']+", StyledIcon, ",&[aria-invalid='mixed']+", StyledIcon, "{fill:", _ref14 => {
+}, ";", InnerCheckbox, "{stroke:", _ref14 => {
   let {
     theme
   } = _ref14;
-  return theme.colors.danger.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref15 => {
+  return theme.colors.primary.backgroundStrong;
+}, ";}}&[aria-invalid='true']+", StyledIcon, ",&[aria-invalid='mixed']+", StyledIcon, "{fill:", _ref15 => {
   let {
     theme
   } = _ref15;
-  return theme.colors.danger.backgroundStrong;
-}, ";}}}&:focus+", StyledIcon, "{background-color:", _ref16 => {
+  return theme.colors.danger.background;
+}, ";", InnerCheckbox, "{stroke:", _ref16 => {
   let {
     theme
   } = _ref16;
-  return theme.colors.primary.background;
-}, ";fill:", _ref17 => {
+  return theme.colors.danger.border;
+}, ";}}}&:focus+", StyledIcon, "{background-color:", _ref17 => {
   let {
     theme
   } = _ref17;
-  return theme.colors.primary.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref18 => {
+  return theme.colors.primary.background;
+}, ";fill:", _ref18 => {
   let {
     theme
   } = _ref18;
-  return theme.colors.primary.backgroundStrong;
-}, ";fill:", _ref19 => {
+  return theme.colors.danger.background;
+}, ";outline:2px solid ", _ref19 => {
   let {
     theme
   } = _ref19;
-  return theme.colors.primary.background;
-}, ";}}&[aria-invalid='true']:focus+", StyledIcon, "{background-color:", _ref20 => {
+  return theme.colors.primary.backgroundHover;
+}, ";", InnerCheckbox, "{stroke:", _ref20 => {
   let {
     theme
   } = _ref20;
-  return theme.colors.danger.background;
+  return theme.colors.primary.borderHover;
 }, ";fill:", _ref21 => {
   let {
     theme
   } = _ref21;
-  return theme.colors.danger.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref22 => {
+  return theme.colors.primary.backgroundHover;
+}, ";}}&[aria-invalid='true']:focus+", StyledIcon, "{background-color:", _ref22 => {
   let {
     theme
   } = _ref22;
-  return theme.colors.danger.backgroundStrong;
+  return theme.colors.danger.background;
 }, ";fill:", _ref23 => {
   let {
     theme
   } = _ref23;
   return theme.colors.danger.background;
-}, ";}}");
-const CheckboxContainer = /*#__PURE__*/_styled("div", {
-  target: "eqr7bqq1"
-})("position:relative;display:inline-flex;align-items:center;gap:", _ref24 => {
+}, ";outline:2px solid ", _ref24 => {
   let {
     theme
   } = _ref24;
-  return theme.space['1'];
-}, ";&[aria-disabled='false'],&[aria-disabled='false']>label{cursor:pointer;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref25 => {
+  return theme.colors.danger.backgroundHover;
+}, ";", InnerCheckbox, "{stroke:", _ref25 => {
   let {
     theme
   } = _ref25;
-  return theme.colors.neutral.textDisabled;
-}, ";&>label{cursor:not-allowed;}", StyledIcon, "{fill:", _ref26 => {
+  return theme.colors.danger.borderHover;
+}, ";fill:", _ref26 => {
   let {
     theme
   } = _ref26;
-  return theme.colors.neutral.borderStrongDisabled;
-}, ";", InnerCheckbox, "{stroke:", _ref27 => {
+  return theme.colors.danger.backgroundHover;
+}, ";}}");
+const CheckboxContainer = /*#__PURE__*/_styled("div", {
+  target: "eqr7bqq1"
+})("position:relative;display:inline-flex;align-items:start;gap:", _ref27 => {
   let {
     theme
   } = _ref27;
-  return theme.colors.neutral.borderStrongDisabled;
-}, ";fill:", _ref28 => {
+  return theme.space['1'];
+}, ";", StyledLabel, "{cursor:pointer;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref28 => {
   let {
     theme
   } = _ref28;
-  return theme.colors.neutral.backgroundDisabled;
-}, ";}}}", CheckMark, ",", CheckMixedMark, "{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(0);}", CheckboxInput, ":checked+", StyledIcon, " ", CheckMark, "{transform:scale(1);}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, " ", CheckMixedMark, "{transform:scale(1);}&:hover[aria-disabled='false']{", CheckboxInput, "+", StyledIcon, "{background-color:", _ref29 => {
+  return theme.colors.neutral.textDisabled;
+}, ";", StyledLabel, "{cursor:not-allowed;}", StyledIcon, "{fill:", _ref29 => {
   let {
     theme
   } = _ref29;
-  return theme.colors.primary.background;
-}, ";fill:", _ref30 => {
+  return theme.colors.neutral.borderDisabled;
+}, ";", InnerCheckbox, "{stroke:", _ref30 => {
   let {
     theme
   } = _ref30;
-  return theme.colors.primary.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref31 => {
+  return theme.colors.neutral.borderDisabled;
+}, ";fill:", _ref31 => {
   let {
     theme
   } = _ref31;
-  return theme.colors.primary.backgroundStrong;
-}, ";fill:", _ref32 => {
+  return theme.colors.neutral.backgroundDisabled;
+}, ";}}", CheckboxInput, "[aria-invalid=\"true\"]:checked+", StyledIcon, "{fill:", _ref32 => {
   let {
     theme
   } = _ref32;
-  return theme.colors.primary.background;
-}, ";}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{background-color:", _ref33 => {
+  return theme.colors.danger.borderDisabled;
+}, ";", InnerCheckbox, "{stroke:", _ref33 => {
   let {
     theme
   } = _ref33;
-  return theme.colors.danger.background;
+  return theme.colors.danger.borderDisabled;
 }, ";fill:", _ref34 => {
   let {
     theme
   } = _ref34;
-  return theme.colors.danger.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref35 => {
+  return theme.colors.danger.borderDisabled;
+}, ";}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", _ref35 => {
   let {
     theme
   } = _ref35;
-  return theme.colors.danger.backgroundStrong;
-}, ";fill:", _ref36 => {
+  return theme.colors.danger.background;
+}, ";", InnerCheckbox, "{stroke:", _ref36 => {
   let {
     theme
   } = _ref36;
+  return theme.colors.danger.borderDisabled;
+}, ";fill:", _ref37 => {
+  let {
+    theme
+  } = _ref37;
   return theme.colors.danger.background;
-}, ";}}}");
+}, ";}}", CheckboxInput, ":checked+", StyledIcon, "{fill:", _ref38 => {
+  let {
+    theme
+  } = _ref38;
+  return theme.colors.primary.borderDisabled;
+}, ";", InnerCheckbox, "{stroke:", _ref39 => {
+  let {
+    theme
+  } = _ref39;
+  return theme.colors.primary.borderDisabled;
+}, ";fill:", _ref40 => {
+  let {
+    theme
+  } = _ref40;
+  return theme.colors.primary.borderDisabled;
+}, ";}}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, "{fill:", _ref41 => {
+  let {
+    theme
+  } = _ref41;
+  return theme.colors.primary.borderDisabled;
+}, ";", InnerCheckbox, "{stroke:", _ref42 => {
+  let {
+    theme
+  } = _ref42;
+  return theme.colors.primary.borderDisabled;
+}, ";fill:", _ref43 => {
+  let {
+    theme
+  } = _ref43;
+  return theme.colors.primary.borderDisabled;
+}, ";}}}", CheckboxInput, ":checked+", StyledIcon, " path{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(1);transform:translate(2px, 2px);}", CheckboxInput, ":checked+", StyledIcon, " ", InnerCheckbox, "{fill:", _ref44 => {
+  let {
+    theme
+  } = _ref44;
+  return theme.colors.primary.border;
+}, ";stroke:", _ref45 => {
+  let {
+    theme
+  } = _ref45;
+  return theme.colors.primary.border;
+}, ";}", CheckboxInput, "[aria-invalid=\"true\"]:checked+", StyledIcon, " ", InnerCheckbox, "{fill:", _ref46 => {
+  let {
+    theme
+  } = _ref46;
+  return theme.colors.danger.border;
+}, ";stroke:", _ref47 => {
+  let {
+    theme
+  } = _ref47;
+  return theme.colors.danger.border;
+}, ";}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, "{", CheckMixedMark, "{fill:", _ref48 => {
+  let {
+    theme
+  } = _ref48;
+  return theme.colors.neutral.iconStronger;
+}, ";}", InnerCheckbox, "{fill:", _ref49 => {
+  let {
+    theme
+  } = _ref49;
+  return theme.colors.primary.border;
+}, ";stroke:", _ref50 => {
+  let {
+    theme
+  } = _ref50;
+  return theme.colors.primary.border;
+}, ";}}&:hover[aria-disabled='false']{", CheckboxInput, "[aria-invalid='false']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref51 => {
+  let {
+    theme
+  } = _ref51;
+  return theme.colors.primary.borderHover;
+}, ";fill:", _ref52 => {
+  let {
+    theme
+  } = _ref52;
+  return theme.colors.primary.backgroundHover;
+}, ";}}", CheckboxInput, "[aria-invalid='true']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref53 => {
+  let {
+    theme
+  } = _ref53;
+  return theme.colors.danger.borderHover;
+}, ";fill:", _ref54 => {
+  let {
+    theme
+  } = _ref54;
+  return theme.colors.danger.backgroundHover;
+}, ";}}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", _ref55 => {
+  let {
+    theme
+  } = _ref55;
+  return theme.colors.danger.backgroundStrong;
+}, ";", InnerCheckbox, "{stroke:", _ref56 => {
+  let {
+    theme
+  } = _ref56;
+  return theme.colors.danger.backgroundStrong;
+}, ";fill:", _ref57 => {
+  let {
+    theme
+  } = _ref57;
+  return theme.colors.danger.background;
+}, ";}}");
 const StyledActivityContainer = /*#__PURE__*/_styled("div", {
   target: "eqr7bqq0"
 })(process.env.NODE_ENV === "production" ? {
@@ -230,7 +337,7 @@ const StyledActivityContainer = /*#__PURE__*/_styled("div", {
   styles: "display:flex",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const Checkbox = /*#__PURE__*/forwardRef((_ref37, ref) => {
+const Checkbox = /*#__PURE__*/forwardRef((_ref58, ref) => {
   let {
     checked = false,
     onChange,
@@ -238,6 +345,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref37, ref) => {
     onBlur,
     error,
     name,
+    helper,
     value,
     size = 24,
     children,
@@ -249,7 +357,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref37, ref) => {
     'aria-label': ariaLabel,
     required,
     'data-testid': dataTestId
-  } = _ref37;
+  } = _ref58;
   const [state, setState] = useState(checked);
   const id = useId();
   const computedName = name ?? id;
@@ -266,72 +374,84 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref37, ref) => {
       setState(current => !current);
     }
   }, []);
-  return jsxs(Fragment, {
-    children: [jsxs(CheckboxContainer, {
-      className: className,
-      "aria-disabled": disabled,
-      "data-visibility": dataVisibility,
-      "data-checked": state,
-      "data-error": !!error,
-      "data-testid": dataTestId,
-      children: [progress ? jsx(StyledActivityContainer, {
-        children: jsx(Loader, {
-          active: true,
-          size: size
-        })
-      }) : null, jsx(CheckboxInput, {
-        id: computedName,
-        type: "checkbox",
-        "aria-invalid": !!error,
-        "aria-describedby": error ? `${computedName}-hint` : undefined,
-        "aria-checked": state === 'indeterminate' ? 'mixed' : undefined,
-        "aria-label": ariaLabel,
-        checked: state === 'indeterminate' ? false : state,
-        size: size,
-        onChange: onLocalChange,
-        onKeyDown: onKeyDown,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        disabled: disabled,
-        value: value,
-        name: computedName,
-        autoFocus: autoFocus,
-        ref: ref,
-        required: required
-      }), !progress ? jsx(StyledIcon, {
-        size: size,
-        viewBox: "0 0 24 24",
-        children: jsxs(CheckboxIconContainer, {
-          children: [jsx(CheckMixedMark, {
-            x: "8",
-            y: "11",
-            rx: "1",
-            width: "8",
-            height: "2"
-          }), jsx(CheckMark, {
-            x: "8",
-            y: "8",
-            rx: "1",
-            width: "8",
-            height: "8"
-          })]
-        })
-      }) : null, children ? jsx("label", {
-        htmlFor: computedName,
-        children: children
-      }) : null, required ? jsx("sup", {
-        children: jsx(Icon, {
-          name: "asterisk",
-          size: 10,
-          color: "danger"
+  return jsxs(CheckboxContainer, {
+    className: className,
+    "aria-disabled": disabled,
+    "data-visibility": dataVisibility,
+    "data-checked": state,
+    "data-error": !!error,
+    "data-testid": dataTestId,
+    children: [progress ? jsx(StyledActivityContainer, {
+      children: jsx(Loader, {
+        active: true,
+        size: size
+      })
+    }) : null, jsx(CheckboxInput, {
+      id: computedName,
+      type: "checkbox",
+      "aria-invalid": !!error,
+      "aria-describedby": error ? `${computedName}-hint` : undefined,
+      "aria-checked": state === 'indeterminate' ? 'mixed' : state,
+      "aria-label": ariaLabel,
+      checked: state === 'indeterminate' ? false : state,
+      size: size,
+      onChange: onLocalChange,
+      onKeyDown: onKeyDown,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      disabled: disabled,
+      value: value,
+      name: computedName,
+      autoFocus: autoFocus,
+      ref: ref,
+      required: required
+    }), !progress ? jsx(StyledIcon, {
+      size: size,
+      viewBox: "0 0 24 24",
+      children: jsx(CheckboxIconContainer, {
+        children: state !== 'indeterminate' ? jsx("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          width: 14,
+          height: 14,
+          d: "M15.6678 5.26709C16.0849 5.6463 16.113 6.28907 15.7307 6.70276L9.29172 13.6705C9.10291 13.8748 8.83818 13.9937 8.55884 13.9998C8.2795 14.0058 8.0098 13.8984 7.81223 13.7024L4.30004 10.2185C3.89999 9.82169 3.89999 9.17831 4.30004 8.78149C4.70009 8.38467 5.34869 8.38467 5.74874 8.78149L8.50441 11.5149L14.2205 5.32951C14.6028 4.91583 15.2508 4.88788 15.6678 5.26709Z",
+          fill: "white"
+        }) : jsx(CheckMixedMark, {
+          x: "6",
+          y: "11",
+          rx: "1",
+          width: "12",
+          height: "2"
         })
+      })
+    }) : null, jsxs(Stack, {
+      gap: 0.25,
+      children: [jsxs(Row, {
+        templateColumns: "11fr 1fr",
+        alignItems: "center",
+        children: [children ? jsx(StyledLabel, {
+          htmlFor: computedName,
+          children: children
+        }) : null, required ? jsx("sup", {
+          children: jsx(Icon, {
+            name: "asterisk",
+            size: 10,
+            color: "danger"
+          })
+        }) : null]
+      }), helper ? jsx(Text, {
+        variant: "bodySmall",
+        as: "p",
+        prominence: "weak",
+        color: "neutral",
+        children: helper
+      }) : null, error ? jsx(ErrorText, {
+        variant: "bodySmall",
+        as: "p",
+        color: "danger",
+        children: error
       }) : null]
-    }), error ? jsx(PaddedText, {
-      variant: "bodySmall",
-      as: "p",
-      color: "danger",
-      children: error
-    }) : null]
+    })]
   });
 });
 

package/dist/src/components/RadioGroup/index.js

@@ -0,0 +1,131 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '@ultraviolet/icons';
+import { useMemo, createContext, useContext } from 'react';
+import { Radio } from '../Radio/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const RadioGroupContext = /*#__PURE__*/createContext(undefined);
+const RadioGroupRadio = _ref => {
+  let {
+    onFocus,
+    onBlur,
+    disabled,
+    error,
+    name,
+    value,
+    label,
+    helper,
+    className,
+    autoFocus,
+    onKeyDown,
+    'data-testid': dataTestId
+  } = _ref;
+  const context = useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error('RadioGroup.Radio can only be used inside a RadioGroup');
+  }
+  const {
+    groupName,
+    onChange,
+    groupValue
+  } = context;
+  const radioName = `${groupName}-${name ?? ''}`;
+  return jsx(Radio, {
+    onChange: onChange,
+    checked: `${groupName}-${groupValue}` === radioName,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled,
+    error: error,
+    name: radioName,
+    value: value,
+    label: label,
+    helper: helper,
+    className: className,
+    autoFocus: autoFocus,
+    onKeyDown: onKeyDown,
+    "data-testid": dataTestId
+  });
+};
+const FieldSet = /*#__PURE__*/_styled("fieldset", {
+  target: "e15shfap1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "7o2an9",
+  styles: "border:none;padding:0;margin:0"
+} : {
+  name: "7o2an9",
+  styles: "border:none;padding:0;margin:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
+  target: "e15shfap0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1nglpc5",
+  styles: "vertical-align:super"
+} : {
+  name: "1nglpc5",
+  styles: "vertical-align:super",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const RadioGroup = _ref2 => {
+  let {
+    legend,
+    value,
+    className,
+    helper,
+    error,
+    direction = 'column',
+    children,
+    onChange,
+    name,
+    required = false
+  } = _ref2;
+  const contextValue = useMemo(() => ({
+    groupName: name,
+    groupValue: value,
+    onChange,
+    required
+  }), [name, value, onChange, required]);
+  return jsx(RadioGroupContext.Provider, {
+    value: contextValue,
+    children: jsxs(Stack, {
+      gap: 1,
+      children: [jsx(FieldSet, {
+        className: className,
+        children: jsxs(Stack, {
+          gap: 1.5,
+          children: [jsxs(Text, {
+            as: "legend",
+            variant: "bodyStrong",
+            children: [legend, "\xA0", required ? jsx(StyledRequiredIcon, {
+              name: "asterisk",
+              color: "danger",
+              size: 8
+            }) : null]
+          }), jsx(Stack, {
+            gap: direction === 'column' ? 1 : 2,
+            direction: direction,
+            children: children
+          })]
+        })
+      }), helper ? jsx(Text, {
+        as: "p",
+        variant: "bodySmall",
+        prominence: "weak",
+        children: helper
+      }) : null, error ? jsx(Text, {
+        as: "p",
+        variant: "bodySmall",
+        sentiment: "danger",
+        prominence: "weak",
+        children: error
+      }) : null]
+    })
+  });
+};
+RadioGroup.Radio = RadioGroupRadio;
+
+export { RadioGroup };

package/dist/src/components/Toggle/index.js

@@ -1,8 +1,11 @@
 import _styled from '@emotion/styled/base';
 import { Icon } from '@ultraviolet/icons';
 import { forwardRef, useState, useId, useCallback, useEffect } from 'react';
+import { Row } from '../Row/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
 import { Tooltip } from '../Tooltip/index.js';
-import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const SIZES = {
@@ -39,65 +42,75 @@ const StyledToggle = /*#__PURE__*/_styled("div", {
     size
   } = _ref4;
   return SIZES[size].height;
-}, "px;&:after{content:'';position:absolute;top:", _ref5 => {
+}, "px;&:hover{background-color:", _ref5 => {
   let {
-    size
+    theme
   } = _ref5;
-  return SIZES[size].height / 2 - SIZES[size].ball / 2;
-}, "px;left:5px;width:", _ref6 => {
+  return theme.colors.neutral.backgroundStrongHover;
+}, ";}&:after{content:'';position:absolute;top:", _ref6 => {
   let {
     size
   } = _ref6;
-  return SIZES[size].ball;
-}, "px;height:", _ref7 => {
+  return SIZES[size].height / 2 - SIZES[size].ball / 2;
+}, "px;left:5px;width:", _ref7 => {
   let {
     size
   } = _ref7;
   return SIZES[size].ball;
-}, "px;border-radius:", _ref8 => {
+}, "px;height:", _ref8 => {
   let {
-    theme
+    size
   } = _ref8;
-  return theme.radii.circle;
-}, ";background-color:", _ref9 => {
+  return SIZES[size].ball;
+}, "px;border-radius:", _ref9 => {
   let {
     theme
   } = _ref9;
-  return theme.colors.neutral.background;
-}, ";transition:all 300ms;}&:focus-within,&:focus{box-shadow:", _ref10 => {
+  return theme.radii.circle;
+}, ";background-color:", _ref10 => {
   let {
     theme
   } = _ref10;
-  return theme.shadows.focusPrimary;
-}, ";}&[data-disabled='false']:active:after{width:", _ref11 => {
+  return theme.colors.neutral.background;
+}, ";transition:all 300ms;}&:focus-within,&:focus{box-shadow:", _ref11 => {
   let {
-    size
+    theme
   } = _ref11;
+  return theme.shadows.focusNeutral;
+}, ";}&[data-disabled='false']:active:after{width:", _ref12 => {
+  let {
+    size
+  } = _ref12;
   return SIZES[size].ball * 1.3775;
-}, "px;}&[data-checked='true']{color:", _ref12 => {
+}, "px;}&[data-checked='true']{color:", _ref13 => {
   let {
     theme
-  } = _ref12;
+  } = _ref13;
   return theme.colors.neutral.textStrong;
-}, ";background-color:", _ref13 => {
+}, ";background-color:", _ref14 => {
   let {
     theme
-  } = _ref13;
+  } = _ref14;
   return theme.colors.primary.backgroundStrong;
-}, ";&:after{left:calc(100% - 5px);transform:translateX(-100%);}&:focus-within,&:focus{box-shadow:", _ref14 => {
+}, ";&:hover{background-color:", _ref15 => {
   let {
     theme
-  } = _ref14;
+  } = _ref15;
+  return theme.colors.primary.backgroundStrongHover;
+}, ";}&:after{left:calc(100% - 5px);transform:translateX(-100%);}&:focus-within,&:focus{box-shadow:", _ref16 => {
+  let {
+    theme
+  } = _ref16;
   return theme.shadows.focusPrimary;
-}, ";}}&[data-disabled='true']{background:", _ref15 => {
+}, ";}}&[data-disabled='true']{background:", _ref17 => {
   let {
     theme
-  } = _ref15;
+  } = _ref17;
   return theme.colors.neutral.backgroundStrongDisabled;
-}, ";&[data-checked='true']{background:", _ref16 => {
+}, ";&[data-checked='true']{background:", _ref18 => {
   let {
     theme
-  } = _ref16;
+  } = _ref18;
   return theme.colors.primary.backgroundStrongDisabled;
 }, ";}}");
 const StyledCheckbox = /*#__PURE__*/_styled("input", {
@@ -112,20 +125,25 @@ const StyledCheckbox = /*#__PURE__*/_styled("input", {
 });
 const StyledLabel = /*#__PURE__*/_styled("label", {
   target: "e1wstm610"
-})("display:flex;gap:", _ref17 => {
+})("display:flex;gap:", _ref19 => {
   let {
     theme
-  } = _ref17;
+  } = _ref19;
   return theme.space['1'];
-}, ";align-items:center;width:fit-content;cursor:pointer;&:active ", StyledToggle, "[data-disabled='false']:after{width:", _ref18 => {
+}, ";align-items:start;width:fit-content;cursor:pointer;flex-direction:", _ref20 => {
+  let {
+    labelPosition
+  } = _ref20;
+  return labelPosition === 'left' ? 'row' : 'row-reverse';
+}, ";&:active ", StyledToggle, "[data-disabled='false']:after{width:", _ref21 => {
   let {
     size
-  } = _ref18;
+  } = _ref21;
   return SIZES[size].ball * 1.3775;
-}, "px;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref19 => {
+}, "px;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref22 => {
   let {
     theme
-  } = _ref19;
+  } = _ref22;
   return theme.colors.neutral.textDisabled;
 }, ";}");
 const RequiredIcon = () => jsx("sup", {
@@ -135,7 +153,7 @@ const RequiredIcon = () => jsx("sup", {
     color: "danger"
   })
 });
-const Toggle = /*#__PURE__*/forwardRef((_ref20, ref) => {
+const Toggle = /*#__PURE__*/forwardRef((_ref23, ref) => {
   let {
     checked = false,
     disabled = false,
@@ -146,10 +164,11 @@ const Toggle = /*#__PURE__*/forwardRef((_ref20, ref) => {
     tooltip,
     labelPosition = 'right',
     label,
+    helper,
     required,
     className,
     'data-testid': dataTestId
-  } = _ref20;
+  } = _ref23;
   const [state, setState] = useState(checked);
   const uniqueId = useId();
   const onLocalChange = useCallback(event => {
@@ -166,9 +185,22 @@ const Toggle = /*#__PURE__*/forwardRef((_ref20, ref) => {
       onClick: evt => evt.stopPropagation(),
       className: className,
       "data-testid": dataTestId,
-      children: [label && labelPosition === 'left' ? jsxs(Fragment, {
-        children: [label, required ? jsx(RequiredIcon, {}) : null]
-      }) : null, jsx(StyledToggle, {
+      labelPosition: labelPosition,
+      children: [jsxs(Stack, {
+        gap: 0.25,
+        alignItems: "baseline",
+        children: [label ? jsxs(Row, {
+          templateColumns: "auto 1fr",
+          gap: 1,
+          alignItems: "center",
+          children: [label, required ? jsx(RequiredIcon, {}) : null]
+        }) : null, helper ? jsx(Text, {
+          as: "p",
+          variant: "bodySmall",
+          prominence: "weak",
+          children: helper
+        }) : null]
+      }), jsx(StyledToggle, {
         size: size,
         "data-checked": state,
         "data-disabled": disabled,
@@ -182,9 +214,7 @@ const Toggle = /*#__PURE__*/forwardRef((_ref20, ref) => {
           type: "checkbox",
           ref: ref
         })
-      }), label && labelPosition === 'right' ? jsxs(Fragment, {
-        children: [label, required ? jsx(RequiredIcon, {}) : null]
-      }) : null]
+      })]
     })
   });
 });

package/dist/src/index.js

@@ -61,4 +61,5 @@ export { ToastContainer, toast } from './components/Toaster/index.js';
 export { Toggle } from './components/Toggle/index.js';
 export { Tooltip } from './components/Tooltip/index.js';
 export { VerificationCode } from './components/VerificationCode/index.js';
+export { RadioGroup } from './components/RadioGroup/index.js';
 export { Icon } from '@ultraviolet/icons';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.8.4",
+  "version": "1.9.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -68,6 +68,6 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.2.1",
-    "@ultraviolet/icons": "1.2.3"
+    "@ultraviolet/icons": "1.3.0"
   }
 }