@ultraviolet/ui 1.36.0 → 1.37.1

package/dist/index.d.ts

@@ -529,6 +529,14 @@ declare const extendTheme: (extendedTheme: RecursivePartial<UltravioletUITheme>)
                         fillWeak: string;
                         fillWeakDisabled: string;
                     };
+                    original: {
+                        fill: string;
+                        fillDisabled: string;
+                        fillStrong: string;
+                        fillStrongDisabled: string;
+                        fillWeak: string;
+                        fillWeakDisabled: string;
+                    };
                     primary: {
                         fill: string;
                         fillDisabled: string;
@@ -2041,8 +2049,7 @@ type NumberInputProps = {
     error?: string | boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'defaultValue'>;
 /**
- * NumberInput component is used to increment / decrement a number value by clicking on + / - buttons or
- * by typing into input.
+ * @deprecated This component is deprecated. Please use `NumberInputV2` instead.
  */
 declare const NumberInput: ({ disabled, maxValue, minValue, name, onChange, onFocus, onBlur, onMaxCrossed, onMinCrossed, size, step, text, defaultValue, value, disabledTooltip, className, label, id, placeholder, error, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "data-testid": dataTestId, }: NumberInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
@@ -3201,7 +3208,12 @@ type VerificationCodeProps = {
  */
 declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, inputStyle, size, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, }: VerificationCodeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type RadioGroupRadioProps = Omit<ComponentProps<typeof Radio>, 'onChange' | 'checked' | 'required'>;
+type RadioGroupRadioProps = Omit<ComponentProps<typeof Radio>, 'onChange' | 'checked' | 'required'> & {
+    /**
+     * @deprecated you don't need to use `name` anymore, the name will be passed from the parent `RadioGroup`.
+     */
+    name?: string;
+};
 type RadioGroupProps = {
     legend: string;
     value: string | number;

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

@@ -79,8 +79,7 @@ const StyledContainer = /*#__PURE__*/_styled('div', {
   theme
 }) => theme.colors.primary.borderHover, ";}}");
 /**
- * NumberInput component is used to increment / decrement a number value by clicking on + / - buttons or
- * by typing into input.
+ * @deprecated This component is deprecated. Please use `NumberInputV2` instead.
  */
 const NumberInput = ({
   disabled = false,

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

@@ -107,7 +107,7 @@ const NumberInputV2 = /*#__PURE__*/forwardRef(({
   onChange,
   onFocus,
   onBlur,
-  size = 'medium',
+  size = 'large',
   step,
   unit,
   value,
@@ -179,11 +179,11 @@ const NumberInputV2 = /*#__PURE__*/forwardRef(({
   return jsxs(Stack, {
     gap: "0.5",
     className: className,
-    children: [jsxs(Stack, {
+    children: [label || labelDescription ? jsxs(Stack, {
       direction: "row",
       gap: "1",
       alignItems: "center",
-      children: [jsxs(Stack, {
+      children: [label ? jsxs(Stack, {
         direction: "row",
         gap: "0.5",
         alignItems: "start",
@@ -198,8 +198,8 @@ const NumberInputV2 = /*#__PURE__*/forwardRef(({
           color: "danger",
           size: 8
         }) : null]
-      }), labelDescription ?? null]
-    }), jsx("div", {
+      }) : null, labelDescription ?? null]
+    }) : null, jsx("div", {
       children: jsx(Tooltip, {
         text: tooltip,
         children: jsxs(Container, {

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

@@ -31,15 +31,14 @@ const RadioGroupRadio = ({
     onChange,
     groupValue
   } = context;
-  const radioName = `${groupName}-${name ?? ''}`;
   return jsx(Radio, {
     onChange: onChange,
-    checked: `${groupName}-${groupValue}` === radioName,
+    checked: groupValue === value,
     onFocus: onFocus,
     onBlur: onBlur,
     disabled: disabled,
     error: error,
-    name: radioName,
+    name: groupName ?? name,
     value: value,
     label: label,
     helper: helper,

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

@@ -1,14 +1,17 @@
 import _styled from '@emotion/styled/base';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useRef, useCallback } from 'react';
 import { Checkbox } from '../Checkbox/index.js';
 import { Radio } from '../Radio/index.js';
+import { Stack } from '../Stack/index.js';
 import { Tooltip } from '../Tooltip/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 Container = /*#__PURE__*/_styled("div", {
+const Container = /*#__PURE__*/_styled(Stack, {
   target: "e1s5n3hj2"
-})("display:inline-flex;flex-direction:column;align-items:start;padding:", ({
+})("&[data-has-label='false']>:first-child{margin-bottom:-", ({
+  theme
+}) => theme.space['0.5'], ";}padding:", ({
   theme
 }) => theme.space['2'], ";border-radius:", ({
   theme
@@ -87,8 +90,23 @@ const SelectableCard = /*#__PURE__*/forwardRef(({
   'data-testid': dataTestId
 }, ref) => {
   const innerRef = useRef(null);
-  return jsx(Tooltip, {
-    text: tooltip,
+  const ParentContainer = useCallback(({
+    children: subChildren
+  }) => {
+    if (tooltip) {
+      return jsx(Stack, {
+        flex: 1,
+        children: jsx(Tooltip, {
+          text: tooltip,
+          children: subChildren
+        })
+      });
+    }
+    return jsx(Tooltip, {
+      children: subChildren
+    });
+  }, [tooltip]);
+  return jsx(ParentContainer, {
     children: jsxs(Container, {
       onClick: () => {
         if (innerRef?.current) {
@@ -101,7 +119,12 @@ const SelectableCard = /*#__PURE__*/forwardRef(({
       "data-error": isError,
       "data-testid": dataTestId,
       "data-type": type,
+      "data-has-label": !!label,
       ref: ref,
+      alignItems: "start",
+      direction: "column",
+      gap: 0.5,
+      flex: 1,
       children: [type === 'radio' ? jsx(StyledRadio, {
         name: name,
         value: value,

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

@@ -66,6 +66,8 @@ const Skeleton = ({
   const Component = variants[variant];
   return jsxs(StyledContainer, {
     className: className,
+    "aria-busy": true,
+    "aria-live": "polite",
     children: [jsx(Component, {
       length: length,
       col: col

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

@@ -101,7 +101,7 @@ const TagInput = ({
   label,
   labelDescription,
   required = false,
-  size = 'medium',
+  size = 'large',
   error,
   success,
   helper,
@@ -216,11 +216,11 @@ const TagInput = ({
   return jsxs(Stack, {
     gap: "0.5",
     className: className,
-    children: [jsxs(Stack, {
+    children: [label || labelDescription ? jsxs(Stack, {
       direction: "row",
       gap: "1",
       alignItems: "center",
-      children: [jsxs(Stack, {
+      children: [label ? jsxs(Stack, {
         direction: "row",
         gap: "0.5",
         alignItems: "start",
@@ -228,15 +228,15 @@ const TagInput = ({
           as: "label",
           variant: "bodyStrong",
           sentiment: "neutral",
-          htmlFor: localId,
+          htmlFor: id ?? localId,
           children: label
         }), required ? jsx(Icon, {
           name: "asterisk",
           color: "danger",
           size: 8
         }) : null]
-      }), labelDescription ?? null]
-    }), jsx("div", {
+      }) : null, labelDescription ?? null]
+    }) : null, jsx("div", {
       children: jsx(Tooltip, {
         text: tooltip,
         children: jsxs(TagInputContainer, {

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

@@ -112,11 +112,11 @@ const TextArea = /*#__PURE__*/forwardRef(({
   return jsxs(Stack, {
     gap: "0.5",
     className: className,
-    children: [jsxs(Stack, {
+    children: [label || labelDescription ? jsxs(Stack, {
       direction: "row",
       gap: "1",
       alignItems: "center",
-      children: [jsxs(Stack, {
+      children: [label ? jsxs(Stack, {
         direction: "row",
         gap: "0.5",
         alignItems: "start",
@@ -131,8 +131,8 @@ const TextArea = /*#__PURE__*/forwardRef(({
           color: "danger",
           size: 8
         }) : null]
-      }), labelDescription ?? null]
-    }), jsx(Tooltip, {
+      }) : null, labelDescription ?? null]
+    }) : null, jsx(Tooltip, {
       text: tooltip,
       children: jsxs(StyledTextAreaWrapper, {
         children: [jsx(StyledTextArea, {

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

@@ -132,11 +132,11 @@ const TextInputV2 = /*#__PURE__*/forwardRef(({
   return jsxs(Stack, {
     gap: 0.5,
     className: className,
-    children: [jsxs(Stack, {
+    children: [label || labelDescription ? jsxs(Stack, {
       direction: "row",
       gap: "1",
       alignItems: "center",
-      children: [jsxs(Stack, {
+      children: [label ? jsxs(Stack, {
         direction: "row",
         gap: "0.5",
         alignItems: "start",
@@ -151,8 +151,8 @@ const TextInputV2 = /*#__PURE__*/forwardRef(({
           color: "danger",
           size: 8
         }) : null]
-      }), labelDescription ?? null]
-    }), jsx("div", {
+      }) : null, labelDescription ?? null]
+    }) : null, jsx("div", {
       children: jsx(Tooltip, {
         text: tooltip,
         children: jsxs(StyledInputWrapper, {

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

@@ -1,6 +1,6 @@
 import _styled from '@emotion/styled/base';
 import { useTheme, Global, ClassNames, css } from '@emotion/react';
-import { toast as toast$1, ToastContainer as ToastContainer$1 } from 'react-toastify';
+import { toast as toast$1, ToastContainer as ToastContainer$1, Slide } from 'react-toastify';
 import css_248z from '../../../react-toastify/dist/ReactToastify.min.css.js';
 import { Button } from '../Button/index.js';
 import { Stack } from '../Stack/index.js';
@@ -12,7 +12,7 @@ const PREFIX = '.Toastify';
 const AUTOCLOSE_DELAY = 6000; // Delay to close the toast in ms
 
 const styles = {
-  toast: theme => /*#__PURE__*/css("border-radius:", theme.radii.default, ";min-height:52px;padding:", theme.space['2'], ";text-size:", theme.typography.bodySmallStrong.fontSize, ";", PREFIX, "__toast-container{width:344px;}", PREFIX, "__toast-body{margin:0;}&", PREFIX, "__toast--success{background-color:", theme.colors.neutral.backgroundStronger, ";color:", theme.colors.neutral.textStronger, ";}&", PREFIX, "__toast--info{background-color:", theme.colors.info.backgroundStrong, ";color:", theme.colors.neutral.textStronger, ";}&", PREFIX, "__toast--error{background-color:", theme.colors.danger.backgroundStrong, ";color:", theme.colors.neutral.textStronger, ";}&", PREFIX, "__toast--warning{background-color:", theme.colors.warning.backgroundStrong, ";color:", theme.colors.warning.textStrong, ";}")
+  toast: theme => /*#__PURE__*/css("border-radius:", theme.radii.default, ";min-height:52px;", PREFIX, "__toast-container{width:344px;}", PREFIX, "__toast-body{margin:0;padding:0;}&", PREFIX, "__toast--success{background-color:", theme.colors.neutral.backgroundStronger, ";color:", theme.colors.neutral.textStronger, ";padding:", theme.space['2'], ";}&", PREFIX, "__toast--info{background-color:", theme.colors.info.backgroundStrong, ";color:", theme.colors.neutral.textStronger, ";padding:", theme.space['2'], ";}&", PREFIX, "__toast--error{background-color:", theme.colors.danger.backgroundStrong, ";color:", theme.colors.neutral.textStronger, ";padding:", theme.space['2'], ";}&", PREFIX, "__toast--warning{background-color:", theme.colors.warning.backgroundStrong, ";color:", theme.colors.warning.textStrong, ";padding:", theme.space['2'], ";}")
 };
 const StyledButton = /*#__PURE__*/_styled(Button, {
   target: "e1eb63990"
@@ -40,7 +40,7 @@ const Content = ({
   gap: 2,
   direction: "row",
   children: jsx(Text, {
-    variant: "body",
+    variant: "bodySmallStrong",
     as: "span",
     children: children
   })
@@ -116,7 +116,8 @@ const ToastContainer = ({
         position: position,
         stacked: true,
         hideProgressBar: true,
-        className: className
+        className: className,
+        transition: Slide
       })
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.36.0",
+  "version": "1.37.1",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -66,8 +66,8 @@
     "react-toastify": "10.0.4",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
-    "@ultraviolet/themes": "1.8.0",
-    "@ultraviolet/icons": "2.8.4"
+    "@ultraviolet/themes": "1.9.0",
+    "@ultraviolet/icons": "2.9.0"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",