@ultraviolet/ui 1.0.0

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

@@ -0,0 +1,338 @@
+import _styled from '@emotion/styled/base';
+import { useTheme } from '@emotion/react';
+import { forwardRef, useState, useId, useEffect, useCallback } from 'react';
+import { Icon } from '../Icon/index.js';
+import { Loader } from '../Loader/index.js';
+import { Text } from '../Text/index.js';
+import { jsxs, Fragment, 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", {
+  target: "eqr7bqq7"
+})("fill:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.backgroundWeak;
+}, ";stroke:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.textWeak;
+}, ";");
+const CheckMark = /*#__PURE__*/_styled("rect", {
+  target: "eqr7bqq6"
+})();
+const CheckMixedMark = /*#__PURE__*/_styled("rect", {
+  target: "eqr7bqq5"
+})();
+const CheckboxIconContainer = _ref3 => {
+  let {
+    children
+  } = _ref3;
+  const theme = useTheme();
+  return jsxs("g", {
+    children: [jsx(InnerCheckbox, {
+      x: "5",
+      y: "5",
+      width: "14",
+      height: "14",
+      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"
+})("border-radius:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.radii.default;
+}, ";height:", _ref6 => {
+  let {
+    size
+  } = _ref6;
+  return size;
+}, "px;width:", _ref7 => {
+  let {
+    size
+  } = _ref7;
+  return size;
+}, "px;min-width:", _ref8 => {
+  let {
+    size
+  } = _ref8;
+  return size;
+}, "px;min-height:", _ref9 => {
+  let {
+    size
+  } = _ref9;
+  return size;
+}, "px;");
+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 => {
+  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 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.primary.backgroundStrong;
+}, ";", InnerCheckbox, "{stroke:", _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.primary.backgroundStrong;
+}, ";}}&[aria-invalid='true']+", StyledIcon, ",&[aria-invalid='mixed']+", StyledIcon, "{fill:", _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.colors.danger.backgroundStrong;
+}, ";", InnerCheckbox, "{stroke:", _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.colors.danger.backgroundStrong;
+}, ";}}}&:focus+", StyledIcon, "{background-color:", _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.colors.primary.background;
+}, ";fill:", _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.primary.backgroundStrong;
+}, ";", InnerCheckbox, "{stroke:", _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.colors.primary.backgroundStrong;
+}, ";fill:", _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.colors.primary.background;
+}, ";}}&[aria-invalid='true']:focus+", StyledIcon, "{background-color:", _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.colors.danger.background;
+}, ";fill:", _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.colors.danger.backgroundStrong;
+}, ";", InnerCheckbox, "{stroke:", _ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.colors.danger.backgroundStrong;
+}, ";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 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.space['1'];
+}, ";&[aria-disabled='false'],&[aria-disabled='false']>label{cursor:pointer;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.colors.neutral.textDisabled;
+}, ";&>label{cursor:not-allowed;}", StyledIcon, "{fill:", _ref26 => {
+  let {
+    theme
+  } = _ref26;
+  return theme.colors.neutral.textDisabled;
+}, ";", InnerCheckbox, "{stroke:", _ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.colors.neutral.textDisabled;
+}, ";fill:", _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 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.colors.primary.background;
+}, ";fill:", _ref30 => {
+  let {
+    theme
+  } = _ref30;
+  return theme.colors.primary.backgroundStrong;
+}, ";", InnerCheckbox, "{stroke:", _ref31 => {
+  let {
+    theme
+  } = _ref31;
+  return theme.colors.primary.backgroundStrong;
+}, ";fill:", _ref32 => {
+  let {
+    theme
+  } = _ref32;
+  return theme.colors.primary.background;
+}, ";}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{background-color:", _ref33 => {
+  let {
+    theme
+  } = _ref33;
+  return theme.colors.danger.background;
+}, ";fill:", _ref34 => {
+  let {
+    theme
+  } = _ref34;
+  return theme.colors.danger.backgroundStrong;
+}, ";", InnerCheckbox, "{stroke:", _ref35 => {
+  let {
+    theme
+  } = _ref35;
+  return theme.colors.danger.backgroundStrong;
+}, ";fill:", _ref36 => {
+  let {
+    theme
+  } = _ref36;
+  return theme.colors.danger.background;
+}, ";}}}");
+const StyledActivityContainer = /*#__PURE__*/_styled("div", {
+  target: "eqr7bqq0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "zjik7",
+  styles: "display:flex"
+} : {
+  name: "zjik7",
+  styles: "display:flex",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Checkbox = /*#__PURE__*/forwardRef((_ref37, ref) => {
+  let {
+    checked = false,
+    onChange,
+    onFocus,
+    onBlur,
+    error,
+    name,
+    value,
+    size = 24,
+    children,
+    progress = false,
+    disabled = false,
+    autoFocus = false,
+    className,
+    'data-visibility': dataVisibility,
+    'aria-label': ariaLabel,
+    required,
+    'data-testid': dataTestId
+  } = _ref37;
+  const [state, setState] = useState(checked);
+  const id = useId();
+  const computedName = name ?? id;
+  useEffect(() => {
+    setState(checked);
+  }, [checked]);
+  const onLocalChange = useCallback(event => {
+    if (!progress) onChange?.(event);
+    setState(current => current === 'indeterminate' ? false : event.target.checked);
+  }, [onChange, progress, setState]);
+  const onKeyDown = useCallback(event => {
+    if (event.key.charCodeAt(0) === 32) {
+      event.preventDefault();
+      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"
+        })
+      }) : null]
+    }), error ? jsx(PaddedText, {
+      variant: "bodySmall",
+      as: "p",
+      color: "danger",
+      children: error
+    }) : null]
+  });
+});
+
+export { Checkbox };

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

@@ -0,0 +1,92 @@
+import _styled from '@emotion/styled/base';
+import useClipboard from 'react-use-clipboard';
+import { Icon } from '../Icon/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const COPY_DURATION = 2500;
+const SIZES = {
+  small: 32,
+  large: 48
+};
+
+/**
+ * TODO: replace when buttonV2 will be available
+ */
+const StyledButton = /*#__PURE__*/_styled('button', {
+  shouldForwardProp: prop => !['size', 'sentiment', 'noBorder'].includes(prop),
+  target: "e1qa6uyd0"
+})("width:", _ref => {
+  let {
+    size
+  } = _ref;
+  return size;
+}, "px;height:", _ref2 => {
+  let {
+    size
+  } = _ref2;
+  return size;
+}, "px;background:transparent;color:", _ref3 => {
+  let {
+    theme,
+    sentiment
+  } = _ref3;
+  return sentiment === 'primary' ? theme.colors.primary.textWeak : theme.colors.neutral.text;
+}, ";border:", _ref4 => {
+  let {
+    theme,
+    noBorder,
+    sentiment
+  } = _ref4;
+  return noBorder ? 'none' : `1px solid ${theme.colors[sentiment].borderWeak}`;
+}, ";border-radius:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.radii.default;
+}, ";display:flex;cursor:pointer;align-items:center;justify-content:center;outline:none;&:hover{background:", _ref6 => {
+  let {
+    theme,
+    sentiment
+  } = _ref6;
+  return theme.colors[sentiment].backgroundWeakHover;
+}, ";}&active,&:focus{box-shadow:", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.shadows.focusPrimary;
+}, ";}");
+const CopyButton = _ref8 => {
+  let {
+    size = 'small',
+    value,
+    copyText = 'Copy',
+    copiedText = 'Copied!',
+    sentiment = 'primary',
+    noBorder,
+    className,
+    'data-testid': dataTestId
+  } = _ref8;
+  const [isCopied, setCopied] = useClipboard(value, {
+    successDuration: COPY_DURATION
+  });
+  return jsx(Tooltip, {
+    text: isCopied ? copiedText : copyText,
+    children: jsx(StyledButton, {
+      type: "button",
+      onClick: setCopied,
+      size: SIZES[size],
+      sentiment: sentiment,
+      noBorder: noBorder,
+      className: className,
+      "data-testid": dataTestId,
+      "aria-label": "Copy",
+      children: jsx(Icon, {
+        name: isCopied ? 'check' : 'copy-content',
+        size: 16
+      })
+    })
+  });
+};
+
+export { CopyButton, SIZES };

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

@@ -0,0 +1,250 @@
+import _styled from '@emotion/styled/base';
+import { Global } from '@emotion/react';
+import DatePicker, { registerLocale } from 'react-datepicker';
+import css_248z from '../../../react-datepicker/dist/react-datepicker.min.css.js';
+import { Button } from '../Button/index.js';
+import { Icon } from '../Icon/index.js';
+import { Separator } from '../Separator/index.js';
+import { Text } from '../Text/index.js';
+import { TextInput } from '../TextInput/index.js';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+
+const PREFIX = '.react-datepicker';
+const StyledSeparator = /*#__PURE__*/_styled(Separator, {
+  target: "e1bm75lk5"
+})("margin:0 ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";height:100%;");
+const StyledWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1bm75lk4"
+})("width:100%;div", PREFIX, "-wrapper{display:block;}div", PREFIX, "__input-container{display:block;}div", PREFIX, "__triangle{display:none;}div", PREFIX, "__month-container{padding:16px;}", PREFIX, "-popper{z-index:1000;}.calendar{font-family:'Asap';border-color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.borderWeak;
+}, ";background-color:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.backgroundWeakElevated;
+}, ";", PREFIX, "__header{color:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral.text;
+}, ";background-color:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral.backgroundWeakElevated;
+}, ";border-bottom:none;text-align:inherit;display:block;padding-top:0;position:inherit;}", PREFIX, "__triangle{border-bottom-color:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.neutral.backgroundWeak;
+}, ";}", PREFIX, "__month{margin:0;}", PREFIX, "__day-names{margin-top:8px;}", PREFIX, "__day-name{font-family:'Asap';color:", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colors.neutral.text;
+}, ";font-weight:500;font-size:14px;line-height:24px;text-align:center;margin:3px;text-transform:capitalize;}", PREFIX, "__day{color:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.neutral.textWeak;
+}, ";font-size:16px;width:1.7rem;height:1.7rem;margin-left:3px;margin-right:3px;}", PREFIX, "__day--selected{color:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.primary.text;
+}, ";background-color:", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.primary.background;
+}, ";border-radius:", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.radii.circle;
+}, ";}", PREFIX, "__day--keyboard-selected{color:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.primary.text;
+}, ";background-color:", _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.primary.background;
+}, ";border-radius:", _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.radii.circle;
+}, ";}", PREFIX, "__day:hover{color:", _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.colors.primary.text;
+}, ";border-radius:", _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.radii.circle;
+}, ";background-color:", _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.primary.background;
+}, ";}", PREFIX, "__day--disabled{color:", _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.colors.primary.textStrongDisabled;
+}, ";}", PREFIX, "__day--disabled:hover{color:", _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.colors.primary.textStrongDisabled;
+}, ";background-color:transparent;}}");
+const StyledSpan = /*#__PURE__*/_styled("span", {
+  target: "e1bm75lk3"
+})("position:absolute;right:16px;top:16px;display:flex;gap:", _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.space['1'];
+}, ";");
+const StyledIconContainer = /*#__PURE__*/_styled("div", {
+  target: "e1bm75lk2"
+})("padding:", _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.space['1'];
+}, ";position:absolute;display:flex;align-items:center;right:0;top:0;height:48px;");
+const TopHeaderDiv = /*#__PURE__*/_styled("div", {
+  target: "e1bm75lk1"
+})("margin-bottom:8px;margin-left:8px;display:inline-block;background-color:", _ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.colors.neutral.backgroundWeakElevated;
+}, ";");
+const StyledText = /*#__PURE__*/_styled(Text, {
+  target: "e1bm75lk0"
+})("text-transform:capitalize;margin-right:", _ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.space['1'];
+}, ";");
+const DEFAULT_FORMAT = value => value instanceof Date ? value.toISOString() : value;
+const DateInput = _ref24 => {
+  let {
+    autoFocus = false,
+    disabled = false,
+    error,
+    format = DEFAULT_FORMAT,
+    label,
+    locale,
+    maxDate,
+    minDate,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    required = false,
+    value,
+    className,
+    'data-testid': dataTestId
+  } = _ref24;
+  const localeCode = (typeof locale === 'string' ? locale : locale?.code) ?? 'en-GB';
+  if (typeof locale === 'object') {
+    registerLocale(localeCode, locale);
+  }
+  return jsxs(Fragment, {
+    children: [jsx(Global, {
+      styles: css_248z
+    }), jsx(StyledWrapper, {
+      children: jsx(DatePicker, {
+        "data-testid": dataTestId,
+        className: className,
+        autoFocus: autoFocus,
+        fixedHeight: true,
+        name: name,
+        locale: localeCode,
+        onBlur: onBlur,
+        onChange: onChange,
+        onFocus: onFocus,
+        selected: value ? new Date(value) : undefined,
+        customInput: jsxs("div", {
+          children: [jsx(TextInput, {
+            error: error ? `${error}` : undefined,
+            id: `date-input${name ? `-${name}` : ''}`,
+            label: label,
+            value: format(value) || '',
+            disabled: disabled
+          }), jsxs(StyledIconContainer, {
+            children: [required ? jsx(Icon, {
+              name: "asterisk",
+              color: "danger",
+              size: 8
+            }) : null, jsx(StyledSeparator, {
+              direction: "vertical"
+            }), jsx(Icon, {
+              name: "calendar-range",
+              color: error ? 'danger' : 'neutral',
+              size: 24
+            })]
+          })]
+        }),
+        disabled: disabled,
+        calendarClassName: "calendar",
+        minDate: minDate,
+        maxDate: maxDate,
+        renderCustomHeader: _ref25 => {
+          let {
+            date,
+            decreaseMonth,
+            increaseMonth,
+            prevMonthButtonDisabled,
+            nextMonthButtonDisabled
+          } = _ref25;
+          return jsxs(Fragment, {
+            children: [jsx(TopHeaderDiv, {
+              children: jsx(StyledText, {
+                variant: "body",
+                as: "p",
+                children: new Date(date).toLocaleString(localeCode, {
+                  month: 'long',
+                  year: 'numeric'
+                })
+              })
+            }), jsxs(StyledSpan, {
+              children: [jsx(Button, {
+                size: "small",
+                icon: "arrow-left",
+                sentiment: "neutral",
+                onClick: decreaseMonth,
+                disabled: prevMonthButtonDisabled
+              }), jsx(Button, {
+                size: "small",
+                icon: "arrow-right",
+                sentiment: "neutral",
+                onClick: increaseMonth,
+                disabled: nextMonthButtonDisabled
+              })]
+            })]
+          });
+        }
+      })
+    })]
+  });
+};
+
+export { DateInput };