@ultraviolet/ui 1.28.0 → 1.29.0

package/README.md

@@ -13,8 +13,14 @@ $ pnpm add @ultraviolet/ui @emotion/react @emotion/styled
 You will also need to import fonts in your project by adding:
 
 ```html
-<link href="https://fonts.cdnfonts.com/css/inter?styles=29139,29137,29140" rel="stylesheet">
-<link href="https://fonts.cdnfonts.com/css/jetbrains-mono-2?styles=156604" rel="stylesheet">
+<link
+  href="https://fonts.cdnfonts.com/css/inter?styles=29139,29137,29140"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.cdnfonts.com/css/jetbrains-mono-2?styles=156604"
+  rel="stylesheet"
+/>
 ```
 
 ### Usage
@@ -25,10 +31,12 @@ import { Button, normalize, theme } from '@ultraviolet/ui'
 
 const App = () => (
   <ThemeProvider theme={theme}>
-    <Global styles={css`${normalize()}`} />
-    <Button onClick={() => console.log('clicked')}>
-      Click Me
-    </Button>
+    <Global
+      styles={css`
+        ${normalize()}
+      `}
+    />
+    <Button onClick={() => console.log('clicked')}>Click Me</Button>
   </ThemeProvider>
 )
 ```
@@ -64,7 +72,6 @@ declare module '@emotion/react' {
 
 Checkout our [documentation website](https://storybook.ultraviolet.scaleway.com/).
 
-
 ## Contributing
 
 📝 You can participate in the development and [start contributing](/CONTRIBUTING.md) to it.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, FocusEvent, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, KeyboardEventHandler, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, TextareaHTMLAttributes } from 'react';
+import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, FocusEvent, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, KeyboardEventHandler, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, DOMAttributes, TextareaHTMLAttributes } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
@@ -2662,6 +2662,55 @@ type TextProps = {
  */
 declare const Text: ({ variant, children, as, color, sentiment, oneLine, placement, prominence, className, disabled, italic, underline, id, dir, htmlFor, "data-testid": dataTestId, }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type TextAreaProps = {
+    id?: string;
+    className?: string;
+    tabIndex?: number;
+    autoFocus?: boolean;
+    label: string;
+    value?: string;
+    onChange: (newValue: string) => void;
+    placeholder?: string;
+    /**
+     * Override others properties : readyOnly, success, error.
+     */
+    disabled?: boolean;
+    /**
+     * Override others properties : success, error.
+     * Ignored if following props are provided : disabled.
+     */
+    readOnly?: boolean;
+    /**
+     * Override others properties : error, helper.
+     * Ignored if following props are provided : disabled, readyOnly.
+     */
+    success?: string;
+    /**
+     * Override others properties : helper.
+     * Ignored if following props are provided : disabled, readyOnly, success.
+     */
+    error?: string;
+    /**
+     * Ignored if following props are provided : readyOnly, success.
+     */
+    helper?: ReactNode;
+    rows?: number;
+    minLength?: number;
+    maxLength?: number;
+    tooltip?: string;
+    required?: boolean;
+    'data-testid'?: string;
+    name?: string;
+    onFocus?: DOMAttributes<HTMLTextAreaElement>['onFocus'];
+    onBlur?: DOMAttributes<HTMLTextAreaElement>['onBlur'];
+    clearable?: boolean;
+    labelDescription?: ReactNode;
+};
+/**
+ * This component offers an extended textarea HTML
+ */
+declare const TextArea: react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
 declare const inputSizes: {
     medium: {
         default: string;
@@ -3011,4 +3060,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, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, 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, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextArea, TextInput, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, 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/ActionBar/index.js

@@ -7,27 +7,15 @@ const HEIGHT = 56;
 const SPACING = 20;
 const StyledDiv = /*#__PURE__*/_styled("div", {
   target: "enye6lh0"
-})("background:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.backgroundWeakElevated;
-}, ";border-radius:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.radii.default;
-}, ";bottom:", _ref3 => {
-  let {
-    rank
-  } = _ref3;
-  return SPACING + rank * (HEIGHT + SPACING);
-}, "px;box-shadow:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.shadows.defaultShadow;
-}, ";height:", HEIGHT, "px;left:50%;position:fixed;transform:translate(-50%, 0);width:600px;animation:", fadeIn, " 0.2s ease-in-out;");
+})("background:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeakElevated, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";bottom:", ({
+  rank
+}) => SPACING + rank * (HEIGHT + SPACING), "px;box-shadow:", ({
+  theme
+}) => theme.shadows.defaultShadow, ";height:", HEIGHT, "px;left:50%;position:fixed;transform:translate(-50%, 0);width:600px;animation:", fadeIn, " 0.2s ease-in-out;");
 /**
  * The ActionBar is a floating bar that appears at the bottom of a page.
  * It can be used to display important actions or information to the user, and can be configured to display a variety of different content types.
@@ -35,21 +23,18 @@ const StyledDiv = /*#__PURE__*/_styled("div", {
  * **Note:** ActionBar is added into a portal at the end of the body element. This means that it will always be on top of other elements without `z-index`,
  * and will not be affected by the layout of the page it is on.
  */
-const ActionBar = _ref5 => {
-  let {
-    children,
-    role = 'dialog',
-    rank = 0,
-    className,
-    'data-testid': dataTestId
-  } = _ref5;
-  return /*#__PURE__*/createPortal(jsx(StyledDiv, {
-    rank: rank,
-    role: role,
-    className: className,
-    "data-testid": dataTestId,
-    children: children
-  }), document.body);
-};
+const ActionBar = ({
+  children,
+  role = 'dialog',
+  rank = 0,
+  className,
+  'data-testid': dataTestId
+}) => /*#__PURE__*/createPortal(jsx(StyledDiv, {
+  rank: rank,
+  role: role,
+  className: className,
+  "data-testid": dataTestId,
+  children: children
+}), document.body);
 
 export { ActionBar };

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

@@ -8,11 +8,10 @@ import { Text } from '../Text/index.js';
 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 alertStyles = _ref => {
-  let {
-    theme,
-    sentiment
-  } = _ref;
+const alertStyles = ({
+  theme,
+  sentiment
+}) => {
   const sentimentColor = theme.colors[sentiment];
   return /*#__PURE__*/css("background-color:", sentimentColor.background, ";color:", sentimentColor.text, ";border-left:4px solid ", sentimentColor.border, ";");
 };
@@ -25,25 +24,16 @@ const typesDefaultIcons = {
 const StyledStackContainer = /*#__PURE__*/_styled(Stack, {
   shouldForwardProp: prop => !['sentiment'].includes(prop),
   target: "e17p0ih04"
-})("border-radius:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.radii.default;
-}, ";padding:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space['2'];
-}, ";", alertStyles, ";");
+})("border-radius:", ({
+  theme
+}) => theme.radii.default, ";padding:", ({
+  theme
+}) => theme.space['2'], ";", alertStyles, ";");
 const TextStack = /*#__PURE__*/_styled(Stack, {
   target: "e17p0ih03"
-})("color:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.neutral.text;
-}, ";flex-wrap:wrap;");
+})("color:", ({
+  theme
+}) => theme.colors.neutral.text, ";flex-wrap:wrap;");
 const WrapStack = /*#__PURE__*/_styled(Stack, {
   target: "e17p0ih02"
 })(process.env.NODE_ENV === "production" ? {
@@ -56,12 +46,9 @@ const WrapStack = /*#__PURE__*/_styled(Stack, {
 });
 const StyledButton = /*#__PURE__*/_styled(Button, {
   target: "e17p0ih01"
-})("margin-left:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.space['5'];
-}, ";");
+})("margin-left:", ({
+  theme
+}) => theme.space['5'], ";");
 const CloseButton = /*#__PURE__*/_styled(Button, {
   target: "e17p0ih00"
 })(process.env.NODE_ENV === "production" ? {
@@ -75,19 +62,18 @@ const CloseButton = /*#__PURE__*/_styled(Button, {
 /**
  * Alert component is used to display a short, important message in a way that attracts the user's attention without interrupting the user's task.
  */
-const Alert = _ref6 => {
-  let {
-    children,
-    title,
-    sentiment = 'danger',
-    buttonText,
-    onClickButton,
-    closable,
-    onClose,
-    className,
-    disabled,
-    'data-testid': dataTestId
-  } = _ref6;
+const Alert = ({
+  children,
+  title,
+  sentiment = 'danger',
+  buttonText,
+  onClickButton,
+  closable,
+  onClose,
+  className,
+  disabled,
+  'data-testid': dataTestId
+}) => {
   const [opened, setOpened] = useState(true);
   if (!opened) return null;
   return jsxs(StyledStackContainer, {

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

@@ -15,80 +15,59 @@ const formatTextToAvatar = text => {
 };
 const StyledTextAvatar = /*#__PURE__*/_styled("span", {
   target: "ec0473m1"
-})("align-items:center;background-color:", _ref => {
-  let {
-    lock,
-    theme,
-    textBgColor
-  } = _ref;
-  return lock ? theme.colors.neutral.backgroundStrong : theme.colors[textBgColor]?.backgroundStrong || textBgColor;
-}, ";border-radius:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.radii.circle;
-}, ";color:", _ref3 => {
-  let {
-    theme,
-    textColor
-  } = _ref3;
-  return theme.colors[textColor]?.textStronger || theme.colors[textColor]?.textStrong || textColor;
-}, ";font-size:", _ref4 => {
-  let {
-    textSize
-  } = _ref4;
-  return textSize;
-}, "px;display:flex;height:100%;justify-content:center;width:100%;");
+})("align-items:center;background-color:", ({
+  lock,
+  theme,
+  textBgColor
+}) => lock ? theme.colors.neutral.backgroundStrong : theme.colors[textBgColor]?.backgroundStrong || textBgColor, ";border-radius:", ({
+  theme
+}) => theme.radii.circle, ";color:", ({
+  theme,
+  textColor
+}) => theme.colors[textColor]?.textStronger || theme.colors[textColor]?.textStrong || textColor, ";font-size:", ({
+  textSize
+}) => textSize, "px;display:flex;height:100%;justify-content:center;width:100%;");
 const AvatarContainer = /*#__PURE__*/_styled("div", {
   target: "ec0473m0"
-})("height:", _ref5 => {
-  let {
-    size
-  } = _ref5;
-  return size;
-}, "px;width:", _ref6 => {
-  let {
-    size
-  } = _ref6;
-  return size;
-}, "px;");
+})("height:", ({
+  size
+}) => size, "px;width:", ({
+  size
+}) => size, "px;");
 
 /**
  * Avatar component is used to display a user's profile picture or initials.
  */
-const Avatar = _ref7 => {
-  let {
-    image,
-    size = 32,
-    text,
-    textBgColor = 'secondary',
-    textColor = 'neutral',
-    textSize = 10,
-    lock = false,
-    className,
-    'data-testid': dataTestId
-  } = _ref7;
-  return jsx(AvatarContainer, {
-    size: size,
-    className: className,
-    "data-testid": dataTestId,
-    children: text || !text && !image ? jsx(StyledTextAvatar, {
-      lock: lock,
-      textBgColor: textBgColor,
-      textColor: textColor,
-      textSize: textSize,
-      children: lock ? jsx(Icon, {
-        name: "lock",
-        color: "neutral",
-        prominence: "weak"
-      }) : formatTextToAvatar(text)
-    }) : jsx("img", {
-      width: "100%",
-      height: "100%",
-      src: image ?? '',
-      alt: ""
-    })
-  });
-};
+const Avatar = ({
+  image,
+  size = 32,
+  text,
+  textBgColor = 'secondary',
+  textColor = 'neutral',
+  textSize = 10,
+  lock = false,
+  className,
+  'data-testid': dataTestId
+}) => jsx(AvatarContainer, {
+  size: size,
+  className: className,
+  "data-testid": dataTestId,
+  children: text || !text && !image ? jsx(StyledTextAvatar, {
+    lock: lock,
+    textBgColor: textBgColor,
+    textColor: textColor,
+    textSize: textSize,
+    children: lock ? jsx(Icon, {
+      name: "lock",
+      color: "neutral",
+      prominence: "weak"
+    }) : formatTextToAvatar(text)
+  }) : jsx("img", {
+    width: "100%",
+    height: "100%",
+    src: image ?? '',
+    alt: ""
+  })
+});
 
 export { Avatar };

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

@@ -26,11 +26,10 @@ const PROMINENCES = {
 /**
  * Generate all styles available for badge based on prominence and sentiments
  */
-const generateStyles = _ref => {
-  let {
-    prominence,
-    theme
-  } = _ref;
+const generateStyles = ({
+  prominence,
+  theme
+}) => {
   const definedProminence = prominence === PROMINENCES.strong ? capitalize(PROMINENCES.strong) : '';
   const text = `text${definedProminence}`;
   const background = `background${definedProminence}`;
@@ -58,53 +57,34 @@ const generateStyles = _ref => {
 const StyledSpan = /*#__PURE__*/_styled(Text, {
   shouldForwardProp: prop => !['sentimentStyles', 'size', 'fontSize'].includes(prop),
   target: "ej33bna0"
-})("display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.radii.xlarge;
-}, ";padding:0 ", _ref3 => {
-  let {
-    theme,
-    size
-  } = _ref3;
-  return size === SIZES.small ? theme.space['1'] : theme.space['2'];
-}, ";gap:", _ref4 => {
-  let {
-    theme,
-    size
-  } = _ref4;
-  return size === SIZES.small ? theme.space['0.5'] : theme.space['1'];
-}, ";width:fit-content;height:", _ref5 => {
-  let {
-    size
-  } = _ref5;
-  return size;
-}, "px;text-transform:uppercase;font-size:", _ref6 => {
-  let {
-    fontSize
-  } = _ref6;
-  return fontSize;
-}, "px;color:inherit;", _ref7 => {
-  let {
-    sentimentStyles
-  } = _ref7;
-  return sentimentStyles;
-}, ";");
+})("display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:", ({
+  theme
+}) => theme.radii.xlarge, ";padding:0 ", ({
+  theme,
+  size
+}) => size === SIZES.small ? theme.space['1'] : theme.space['2'], ";gap:", ({
+  theme,
+  size
+}) => size === SIZES.small ? theme.space['0.5'] : theme.space['1'], ";width:fit-content;height:", ({
+  size
+}) => size, "px;text-transform:uppercase;font-size:", ({
+  fontSize
+}) => fontSize, "px;color:inherit;", ({
+  sentimentStyles
+}) => sentimentStyles, ";");
 /**
  * Badge component is used to display a status or a label in a small container.
  */
-const Badge = _ref8 => {
-  let {
-    sentiment = 'neutral',
-    size = 'medium',
-    prominence = 'default',
-    icon,
-    disabled = false,
-    className,
-    children,
-    'data-testid': dataTestId
-  } = _ref8;
+const Badge = ({
+  sentiment = 'neutral',
+  size = 'medium',
+  prominence = 'default',
+  icon,
+  disabled = false,
+  className,
+  children,
+  'data-testid': dataTestId
+}) => {
   const theme = useTheme();
 
   /**

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

@@ -9,12 +9,11 @@ import defaultIllustrationSmall from './assets/default-image-small.svg.js';
 import defaultIllustration from './assets/default-image.svg.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
-const styles = _ref => {
-  let {
-    theme,
-    variant,
-    size
-  } = _ref;
+const styles = ({
+  theme,
+  variant,
+  size
+}) => {
   if (size === 'small') {
     if (variant === 'intro') {
       return /*#__PURE__*/css("background:", theme.colors.primary.background, ";background-position:left,right;background-repeat:no-repeat,no-repeat;background-size:contain,contain;");
@@ -36,68 +35,49 @@ const styles = _ref => {
 const Container = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['variant', 'size', 'padding'].includes(prop),
   target: "e1kdwp5x1"
-})("padding:", _ref2 => {
-  let {
-    theme,
-    size
-  } = _ref2;
-  return theme.space[size === 'small' ? '2' : '3'];
-}, ";border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.large;
-}, ";display:flex;flex-direction:row;justify-content:space-between;gap:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.space['2'];
-}, ";", _ref5 => {
-  let {
-    theme,
-    variant,
-    size
-  } = _ref5;
-  return styles({
-    theme,
-    variant,
-    size
-  });
-}, ";>svg:first-child,>img{height:", _ref6 => {
-  let {
-    size
-  } = _ref6;
-  return size === 'medium' ? '140px' : '100px';
-}, ";align-self:center;}button[name='close']{background:none;&:hover{background:none;}}");
+})("padding:", ({
+  theme,
+  size
+}) => theme.space[size === 'small' ? '2' : '3'], ";border-radius:", ({
+  theme
+}) => theme.radii.large, ";display:flex;flex-direction:row;justify-content:space-between;gap:", ({
+  theme
+}) => theme.space['2'], ";", ({
+  theme,
+  variant,
+  size
+}) => styles({
+  theme,
+  variant,
+  size
+}), ";>svg:first-child,>img{height:", ({
+  size
+}) => size === 'medium' ? '140px' : '100px', ";align-self:center;}button[name='close']{background:none;&:hover{background:none;}}");
 const ImageStack = /*#__PURE__*/_styled(Stack, {
   shouldForwardProp: prop => !['size'].includes(prop),
   target: "e1kdwp5x0"
-})("width:", _ref7 => {
-  let {
-    size
-  } = _ref7;
-  return size === 'medium' ? '140px' : '74px';
-}, ";");
+})("width:", ({
+  size
+}) => size === 'medium' ? '140px' : '74px', ";");
 /**
  * Banner component is used to display an informative message to the user with style.
  */
-const Banner = _ref8 => {
-  let {
-    variant = 'intro',
-    size = 'medium',
-    title,
-    children,
-    direction = 'column',
-    onClose,
-    buttonText,
-    onClickButton,
-    linkText,
-    linkHref,
-    image,
-    className,
-    closable = true,
-    'data-testid': dataTestId
-  } = _ref8;
+const Banner = ({
+  variant = 'intro',
+  size = 'medium',
+  title,
+  children,
+  direction = 'column',
+  onClose,
+  buttonText,
+  onClickButton,
+  linkText,
+  linkHref,
+  image,
+  className,
+  closable = true,
+  'data-testid': dataTestId
+}) => {
   const {
     theme
   } = useTheme();