@ultraviolet/ui 1.28.0 → 1.29.0

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

@@ -22,97 +22,43 @@ const SIZES = {
 };
 const StyledToggle = /*#__PURE__*/_styled("div", {
   target: "e1wstm612"
-})("box-sizing:content-box;outline:none;overflow:hidden;display:flex;align-items:center;border:none;border-radius:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.radii.xlarge;
-}, ";position:relative;transition:all 300ms;background-color:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.backgroundStrong;
-}, ";width:", _ref3 => {
-  let {
-    size
-  } = _ref3;
-  return SIZES[size].width;
-}, "px;height:", _ref4 => {
-  let {
-    size
-  } = _ref4;
-  return SIZES[size].height;
-}, "px;&:hover{background-color:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.backgroundStrongHover;
-}, ";}&:after{content:'';position:absolute;top:", _ref6 => {
-  let {
-    size
-  } = _ref6;
-  return SIZES[size].height / 2 - SIZES[size].ball / 2;
-}, "px;left:5px;width:", _ref7 => {
-  let {
-    size
-  } = _ref7;
-  return SIZES[size].ball;
-}, "px;height:", _ref8 => {
-  let {
-    size
-  } = _ref8;
-  return SIZES[size].ball;
-}, "px;border-radius:", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.radii.circle;
-}, ";background-color:", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.colors.neutral.background;
-}, ";transition:all 300ms;}&:focus-within,&:focus{box-shadow:", _ref11 => {
-  let {
-    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:", _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.colors.neutral.textStrong;
-}, ";background-color:", _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.colors.primary.backgroundStrong;
-}, ";&:hover{background-color:", _ref15 => {
-  let {
-    theme
-  } = _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:", _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.colors.neutral.backgroundStrongDisabled;
-}, ";&[data-checked='true']{background:", _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.colors.primary.backgroundStrongDisabled;
-}, ";}}");
+})("box-sizing:content-box;outline:none;overflow:hidden;display:flex;align-items:center;border:none;border-radius:", ({
+  theme
+}) => theme.radii.xlarge, ";position:relative;transition:all 300ms;background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundStrong, ";width:", ({
+  size
+}) => SIZES[size].width, "px;height:", ({
+  size
+}) => SIZES[size].height, "px;&:hover{background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundStrongHover, ";}&:after{content:'';position:absolute;top:", ({
+  size
+}) => SIZES[size].height / 2 - SIZES[size].ball / 2, "px;left:5px;width:", ({
+  size
+}) => SIZES[size].ball, "px;height:", ({
+  size
+}) => SIZES[size].ball, "px;border-radius:", ({
+  theme
+}) => theme.radii.circle, ";background-color:", ({
+  theme
+}) => theme.colors.neutral.background, ";transition:all 300ms;}&:focus-within,&:focus{box-shadow:", ({
+  theme
+}) => theme.shadows.focusNeutral, ";}&[data-disabled='false']:active:after{width:", ({
+  size
+}) => SIZES[size].ball * 1.3775, "px;}&[data-checked='true']{color:", ({
+  theme
+}) => theme.colors.neutral.textStrong, ";background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";&:hover{background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundStrongHover, ";}&:after{left:calc(100% - 5px);transform:translateX(-100%);}&:focus-within,&:focus{box-shadow:", ({
+  theme
+}) => theme.shadows.focusPrimary, ";}}&[data-disabled='true']{background:", ({
+  theme
+}) => theme.colors.neutral.backgroundStrongDisabled, ";&[data-checked='true']{background:", ({
+  theme
+}) => theme.colors.primary.backgroundStrongDisabled, ";}}");
 const StyledCheckbox = /*#__PURE__*/_styled("input", {
   target: "e1wstm611"
 })(process.env.NODE_ENV === "production" ? {
@@ -125,27 +71,15 @@ const StyledCheckbox = /*#__PURE__*/_styled("input", {
 });
 const StyledLabel = /*#__PURE__*/_styled("label", {
   target: "e1wstm610"
-})("display:flex;gap:", _ref19 => {
-  let {
-    theme
-  } = _ref19;
-  return theme.space['1'];
-}, ";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
-  } = _ref21;
-  return SIZES[size].ball * 1.3775;
-}, "px;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref22 => {
-  let {
-    theme
-  } = _ref22;
-  return theme.colors.neutral.textDisabled;
-}, ";}");
+})("display:flex;gap:", ({
+  theme
+}) => theme.space['1'], ";align-items:start;width:fit-content;cursor:pointer;flex-direction:", ({
+  labelPosition
+}) => labelPosition === 'left' ? 'row' : 'row-reverse', ";&:active ", StyledToggle, "[data-disabled='false']:after{width:", ({
+  size
+}) => SIZES[size].ball * 1.3775, "px;}&[aria-disabled='true']{cursor:not-allowed;color:", ({
+  theme
+}) => theme.colors.neutral.textDisabled, ";}");
 const RequiredIcon = () => jsx("sup", {
   children: jsx(Icon, {
     name: "asterisk",
@@ -156,23 +90,22 @@ const RequiredIcon = () => jsx("sup", {
 /**
  * Toggle component is used to toggle between two states (on/off, true/false, etc.).
  */
-const Toggle = /*#__PURE__*/forwardRef((_ref23, ref) => {
-  let {
-    checked = false,
-    disabled = false,
-    id,
-    name,
-    onChange,
-    size = 'large',
-    tooltip,
-    labelPosition = 'right',
-    label,
-    helper,
-    required,
-    className,
-    'data-testid': dataTestId,
-    value
-  } = _ref23;
+const Toggle = /*#__PURE__*/forwardRef(({
+  checked = false,
+  disabled = false,
+  id,
+  name,
+  onChange,
+  size = 'large',
+  tooltip,
+  labelPosition = 'right',
+  label,
+  helper,
+  required,
+  className,
+  'data-testid': dataTestId,
+  value
+}, ref) => {
   const [state, setState] = useState(checked);
   const uniqueId = useId();
   const onLocalChange = useCallback(event => {

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

@@ -11,16 +11,15 @@ const ToggleGroupContext = /*#__PURE__*/createContext(undefined);
 /**
  * ToggleGroup is a component that allows you to group a set of Toggle components together under the same legend.
  */
-const ToggleGroupToggle = _ref => {
-  let {
-    disabled,
-    name,
-    value,
-    label,
-    helper,
-    className,
-    'data-testid': dataTestId
-  } = _ref;
+const ToggleGroupToggle = ({
+  disabled,
+  name,
+  value,
+  label,
+  helper,
+  className,
+  'data-testid': dataTestId
+}) => {
   const context = useContext(ToggleGroupContext);
   if (!context) {
     throw new Error('ToggleGroup.Toggle can only be used inside a ToggleGroup');
@@ -64,19 +63,18 @@ const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
   styles: "vertical-align:super",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const ToggleGroup = _ref2 => {
-  let {
-    legend,
-    value,
-    className,
-    helper,
-    error,
-    direction = 'column',
-    children,
-    onChange,
-    name,
-    required = false
-  } = _ref2;
+const ToggleGroup = ({
+  legend,
+  value,
+  className,
+  helper,
+  error,
+  direction = 'column',
+  children,
+  onChange,
+  name,
+  required = false
+}) => {
   const contextValue = useMemo(() => ({
     groupName: name,
     groupValues: value ?? [],

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

@@ -19,36 +19,33 @@ const StyledPopup = /*#__PURE__*/_styled(Popup, {
  * Tooltip component is used to display additional information on hover or focus.
  * It is used to explain the purpose of the element it is attached to.
  */
-const Tooltip = /*#__PURE__*/forwardRef((_ref, tooltipRef) => {
-  let {
-    children,
-    text = '',
-    placement = 'auto',
-    id,
-    className,
-    containerFullWidth,
-    maxWidth = 232,
-    visible,
-    innerRef,
-    role = 'tooltip',
-    'data-testid': dataTestId,
-    portalTarget
-  } = _ref;
-  return jsx(StyledPopup, {
-    id: id,
-    ref: tooltipRef,
-    role: role,
-    "data-testid": dataTestId,
-    className: className,
-    containerFullWidth: containerFullWidth,
-    maxWidth: maxWidth,
-    visible: visible,
-    placement: placement,
-    text: text,
-    innerRef: innerRef,
-    portalTarget: portalTarget,
-    children: children
-  });
-});
+const Tooltip = /*#__PURE__*/forwardRef(({
+  children,
+  text = '',
+  placement = 'auto',
+  id,
+  className,
+  containerFullWidth,
+  maxWidth = 232,
+  visible,
+  innerRef,
+  role = 'tooltip',
+  'data-testid': dataTestId,
+  portalTarget
+}, tooltipRef) => jsx(StyledPopup, {
+  id: id,
+  ref: tooltipRef,
+  role: role,
+  "data-testid": dataTestId,
+  className: className,
+  containerFullWidth: containerFullWidth,
+  maxWidth: maxWidth,
+  visible: visible,
+  placement: placement,
+  text: text,
+  innerRef: innerRef,
+  portalTarget: portalTarget,
+  children: children
+}));
 
 export { Tooltip };

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

@@ -17,28 +17,18 @@ const SIZE_WIDTH = {
 const StyledInput = /*#__PURE__*/_styled('input', {
   shouldForwardProp: prop => !['inputSize'].includes(prop),
   target: "e1a2bx9q0"
-})("background:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.background;
-}, ";border:solid 1px ", _ref2 => {
-  let {
-    'aria-invalid': error,
-    theme
-  } = _ref2;
-  return error ? theme.colors.danger.border : theme.colors.neutral.border;
-}, ";color:", _ref3 => {
-  let {
-    'aria-invalid': error,
-    theme
-  } = _ref3;
-  return error ? theme.colors.danger.text : theme.colors.neutral.text;
-}, ";", _ref4 => {
-  let {
-    inputSize,
-    theme
-  } = _ref4;
+})("background:", ({
+  theme
+}) => theme.colors.neutral.background, ";border:solid 1px ", ({
+  'aria-invalid': error,
+  theme
+}) => error ? theme.colors.danger.border : theme.colors.neutral.border, ";color:", ({
+  'aria-invalid': error,
+  theme
+}) => error ? theme.colors.danger.text : theme.colors.neutral.text, ";", ({
+  inputSize,
+  theme
+}) => {
   if (inputSize === 'small') {
     return `
            font-size: ${theme.typography.caption.fontSize};
@@ -49,54 +39,31 @@ const StyledInput = /*#__PURE__*/_styled('input', {
            font-size: ${theme.typography.body.fontSize};
            font-weight: ${theme.typography.body.weight};
          `;
-}, " text-align:center;border-radius:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.radii.default;
-}, ";margin-right:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.space['1'];
-}, ";width:", _ref7 => {
-  let {
-    inputSize
-  } = _ref7;
-  return SIZE_WIDTH[inputSize];
-}, "px;height:", _ref8 => {
-  let {
-    inputSize
-  } = _ref8;
-  return SIZE_HEIGHT[inputSize];
-}, "px;outline-style:none;transition:border-color 0.2s ease,box-shadow 0.2s ease;&:hover,&:focus{border-color:", _ref9 => {
-  let {
-    'aria-invalid': error,
-    theme
-  } = _ref9;
-  return error ? theme.colors.danger.borderHover : theme.colors.primary.borderHover;
-}, ";}&:focus{box-shadow:", _ref10 => {
-  let {
-    'aria-invalid': error,
-    theme: {
-      shadows
-    }
-  } = _ref10;
-  return error ? shadows.focusDanger : shadows.focusPrimary;
-}, ";}&:last-child{margin-right:0;}&::placeholder{color:", _ref11 => {
-  let {
-    disabled,
-    theme
-  } = _ref11;
-  return disabled ? theme.colors.neutral.textWeakDisabled : theme.colors.neutral.textWeak;
-}, ";}", _ref12 => {
-  let {
-    disabled,
-    theme: {
-      colors
-    }
-  } = _ref12;
-  return disabled && `cursor: default;
+}, " text-align:center;border-radius:", ({
+  theme
+}) => theme.radii.default, ";margin-right:", ({
+  theme
+}) => theme.space['1'], ";width:", ({
+  inputSize
+}) => SIZE_WIDTH[inputSize], "px;height:", ({
+  inputSize
+}) => SIZE_HEIGHT[inputSize], "px;outline-style:none;transition:border-color 0.2s ease,box-shadow 0.2s ease;&:hover,&:focus{border-color:", ({
+  'aria-invalid': error,
+  theme
+}) => error ? theme.colors.danger.borderHover : theme.colors.primary.borderHover, ";}&:focus{box-shadow:", ({
+  'aria-invalid': error,
+  theme: {
+    shadows
+  }
+}) => error ? shadows.focusDanger : shadows.focusPrimary, ";}&:last-child{margin-right:0;}&::placeholder{color:", ({
+  disabled,
+  theme
+}) => disabled ? theme.colors.neutral.textWeakDisabled : theme.colors.neutral.textWeak, ";}", ({
+  disabled,
+  theme: {
+    colors
+  }
+}) => disabled && `cursor: default;
     background-color: ${colors.neutral.backgroundDisabled};
     border-color: ${colors.neutral.borderDisabled};
     color: ${colors.neutral.textDisabled};
@@ -104,31 +71,29 @@ const StyledInput = /*#__PURE__*/_styled('input', {
     &:hover {
       border: ${colors.neutral.borderDisabled}
     }
-    `;
-}, ";");
+    `, ";");
 const DEFAULT_ON_FUNCTION = () => {};
 
 /**
  * Verification code allows you to enter a code in multiple fields (4 by default).
  */
-const VerificationCode = _ref13 => {
-  let {
-    disabled = false,
-    className,
-    error = false,
-    fields = 4,
-    initialValue = '',
-    inputId,
-    inputStyle = '',
-    size = 'large',
-    onChange = DEFAULT_ON_FUNCTION,
-    onComplete = DEFAULT_ON_FUNCTION,
-    placeholder = '',
-    required = false,
-    type = 'number',
-    'data-testid': dataTestId,
-    'aria-label': ariaLabel = 'Verification code'
-  } = _ref13;
+const VerificationCode = ({
+  disabled = false,
+  className,
+  error = false,
+  fields = 4,
+  initialValue = '',
+  inputId,
+  inputStyle = '',
+  size = 'large',
+  onChange = DEFAULT_ON_FUNCTION,
+  onComplete = DEFAULT_ON_FUNCTION,
+  placeholder = '',
+  required = false,
+  type = 'number',
+  'data-testid': dataTestId,
+  'aria-label': ariaLabel = 'Verification code'
+}) => {
   const uniqueId = useId();
   const valuesArray = Object.assign(new Array(fields).fill(''), initialValue.substring(0, fields).split(''));
   const [values, setValues] = useState(valuesArray);

package/dist/src/index.js

@@ -57,6 +57,7 @@ export { Tag } from './components/Tag/index.js';
 export { TagInput } from './components/TagInput/index.js';
 export { TagList } from './components/TagList/index.js';
 export { Text } from './components/Text/index.js';
+export { TextArea } from './components/TextArea/index.js';
 export { TextInput } from './components/TextInput/index.js';
 export { TimeInput } from './components/TimeInput/index.js';
 export { ToastContainer, toast } from './components/Toaster/index.js';

package/dist/src/utils/ids.js

@@ -2,11 +2,6 @@ const chr4 = () => Math.random().toString(16).slice(-4);
 const uuid = () => Array.from({
   length: 8
 }, chr4).join('');
-const getUUID = function (prefix) {
-  if (prefix === void 0) {
-    prefix = '';
-  }
-  return `${prefix ? `${prefix}-` : ''}${uuid()}`;
-};
+const getUUID = (prefix = '') => `${prefix ? `${prefix}-` : ''}${uuid()}`;
 
 export { getUUID };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,7 +39,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.5",
+    "@babel/core": "7.23.6",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -67,7 +67,7 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.5.0",
-    "@ultraviolet/icons": "2.7.0"
+    "@ultraviolet/icons": "2.7.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs"