@ultraviolet/ui 1.0.0

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

@@ -0,0 +1,85 @@
+import _styled from '@emotion/styled/base';
+import { keyframes } from '@emotion/react';
+import { Block } from './Block.js';
+import { Blocks } from './Blocks.js';
+import { BoxWithIcon } from './BoxWithIcon.js';
+import { Donut } from './Donut.js';
+import { Line } from './Line.js';
+import { List } from './List.js';
+import { Slider } from './Slider.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 shineAnimation = keyframes`
+  from {
+    left: -25%;
+  }
+  to {
+    left: 100%;
+  }
+`;
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "e183x2r81"
+})(process.env.NODE_ENV === "production" ? {
+  name: "po0r11",
+  styles: "position:relative;display:block;width:100%;overflow:hidden;cursor:progress"
+} : {
+  name: "po0r11",
+  styles: "position:relative;display:block;width:100%;overflow:hidden;cursor:progress",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledDiv = /*#__PURE__*/_styled("div", {
+  target: "e183x2r80"
+})("position:absolute;top:0;height:100%;width:25%;opacity:0.8;background:linear-gradient(\n    90deg,\n    ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.backgroundWeak;
+}, "00,\n    ", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.backgroundWeak;
+}, "4D,\n    ", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.backgroundWeak;
+}, "66,\n    ", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral.backgroundWeak;
+}, "4D,\n    ", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral.backgroundWeak;
+}, "00\n  );animation:", shineAnimation, " 1s linear infinite;animation-direction:alternate;@media (prefers-reduced-motion: reduce){animation:unset;}");
+const variants = {
+  block: Block,
+  blocks: Blocks,
+  box: BoxWithIcon,
+  donut: Donut,
+  line: Line,
+  list: List,
+  slider: Slider
+};
+const Skeleton = _ref6 => {
+  let {
+    variant = 'blocks',
+    length,
+    col,
+    className
+  } = _ref6;
+  const Component = variants[variant];
+  return jsxs(StyledContainer, {
+    className: className,
+    children: [jsx(Component, {
+      length: length,
+      col: col
+    }), jsx(StyledDiv, {})]
+  });
+};
+
+export { Skeleton };

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

@@ -0,0 +1,250 @@
+import _styled from '@emotion/styled/base';
+import { useState, Children } from 'react';
+import { CopyButton } from '../CopyButton/index.js';
+import { Expandable } from '../Expandable/index.js';
+import { Icon } from '../Icon/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 LINES_BREAK_REGEX = /\r\n|\r|\n/;
+const PreText = /*#__PURE__*/_styled(Text, {
+  shouldForwardProp: prop => !['multiline', 'hasShowMoreButton', 'showMore'].includes(prop),
+  target: "e1q0gj908"
+})("margin:0;padding:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['2'];
+}, ";padding-right:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['9'];
+}, ";overflow-x:", _ref3 => {
+  let {
+    hasShowMoreButton,
+    showMore
+  } = _ref3;
+  return hasShowMoreButton && !showMore ? 'hidden' : 'auto';
+}, ";overflow-y:hidden;", _ref4 => {
+  let {
+    multiline
+  } = _ref4;
+  return !multiline ? 'white-space: nowrap;' : '';
+}, " height:auto;counter-reset:section;");
+const StyledSpan = /*#__PURE__*/_styled('span', {
+  shouldForwardProp: prop => !['linePrefix', 'multiline', 'prefix'].includes(prop),
+  target: "e1q0gj907"
+})("display:block;&:after{content:'';", _ref5 => {
+  let {
+    theme,
+    multiline
+  } = _ref5;
+  return multiline ? `padding: ${theme.space['4']}` : `padding-right: ${theme.space['8']}`;
+}, ";}", _ref6 => {
+  let {
+    prefix,
+    theme
+  } = _ref6;
+  return prefix ? `
+    &:before {
+      color: ${theme.colors.neutral.textWeak};
+      width: ${prefix === 'lines' ? '35px' : ''};
+      display: inline-flex;
+      justify-content: flex-end;
+      counter-increment: section;
+      content: ${prefix === 'lines' ? 'counter(section)' : "'$'"};
+      padding-right: ${theme.space['1']};
+    }
+  ` : null;
+}, ";");
+const Container = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['multiline'].includes(prop),
+  target: "e1q0gj906"
+})("position:relative;display:flex;justify-content:start;max-width:100%;", _ref7 => {
+  let {
+    multiline
+  } = _ref7;
+  return multiline ? 'width: 100%;' : '';
+}, " background:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.neutral.backgroundStrong;
+}, ";border-radius:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.radii.default;
+}, ";");
+const StyledStack = /*#__PURE__*/_styled(Stack, {
+  target: "e1q0gj905"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1d3w5wq",
+  styles: "width:100%"
+} : {
+  name: "1d3w5wq",
+  styles: "width:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const ButtonContainer = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['multiline'].includes(prop),
+  target: "e1q0gj904"
+})("position:absolute;top:0;right:0;padding:", _ref10 => {
+  let {
+    theme,
+    multiline
+  } = _ref10;
+  return `${theme.space[multiline ? '2' : '1']} ${theme.space['2']} 0 0`;
+}, ";background:", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.colors.neutral.backgroundStrong;
+}, ";border-radius:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.radii.default;
+}, ";border:2px solid transparent;", _ref13 => {
+  let {
+    multiline,
+    theme
+  } = _ref13;
+  return !multiline ? `box-shadow: -27px 0 19px -11px ${theme.colors.neutral.backgroundStrong}` : '';
+}, ";");
+const ShowMoreContainer = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['showMore'].includes(prop),
+  target: "e1q0gj903"
+})("width:100%;box-shadow:", _ref14 => {
+  let {
+    theme,
+    showMore
+  } = _ref14;
+  return !showMore ? `0px -22px 19px -6px
+    ${theme.colors.neutral.backgroundStrong}` : 'none';
+}, ";");
+const StyledButton = /*#__PURE__*/_styled("button", {
+  target: "e1q0gj902"
+})("width:100%;background:none;border:none;padding:", _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.space['2'];
+}, ";padding-top:", _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.space['1'];
+}, ";cursor:pointer;");
+const AlignCenterText = /*#__PURE__*/_styled(Text, {
+  target: "e1q0gj901"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1vcob1d",
+  styles: "display:flex;justify-content:center;align-items:center"
+} : {
+  name: "1vcob1d",
+  styles: "display:flex;justify-content:center;align-items:center",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const AnimatedArrowIcon = /*#__PURE__*/_styled(Icon, {
+  shouldForwardProp: prop => !['showMore'].includes(prop),
+  target: "e1q0gj900"
+})("transform:", _ref17 => {
+  let {
+    showMore
+  } = _ref17;
+  return showMore ? 'rotate(180deg)' : 'rotate(0deg)';
+}, ";transform-origin:center;transition:transform 300ms ease-in-out;");
+const CodeContent = _ref18 => {
+  let {
+    children,
+    prefix,
+    multiline,
+    showMore,
+    hasShowMoreButton,
+    lines
+  } = _ref18;
+  return jsx(PreText, {
+    as: "pre",
+    variant: "code",
+    multiline: multiline,
+    hasShowMoreButton: hasShowMoreButton,
+    showMore: showMore,
+    children: multiline ? Children.map(lines, child => jsx(StyledSpan, {
+      multiline: true,
+      prefix: prefix,
+      children: child
+    })) : jsx(StyledSpan, {
+      prefix: prefix,
+      children: children
+    })
+  });
+};
+const Snippet = _ref19 => {
+  let {
+    children,
+    copyText,
+    copiedText,
+    showText = 'Show',
+    hideText = 'Hide',
+    prefix,
+    className,
+    'data-testid': dataTestId
+  } = _ref19;
+  const [showMore, setShowMore] = useState(false);
+  const lines = children.split(LINES_BREAK_REGEX).filter(Boolean);
+  const numberOfLines = lines.length;
+  const multiline = numberOfLines > 1;
+  const hasShowMoreButton = numberOfLines > 4 && multiline;
+  return jsx(Container, {
+    multiline: multiline,
+    className: className,
+    "data-testid": dataTestId,
+    children: jsxs(StyledStack, {
+      children: [hasShowMoreButton ? jsx(Expandable, {
+        minHeight: 120,
+        opened: showMore,
+        children: jsx(CodeContent, {
+          prefix: prefix,
+          multiline: multiline,
+          lines: lines,
+          children: children
+        })
+      }) : jsx(CodeContent, {
+        prefix: prefix,
+        multiline: multiline,
+        lines: lines,
+        children: children
+      }), jsx(ButtonContainer, {
+        multiline: multiline && numberOfLines > 1,
+        children: jsx(CopyButton, {
+          value: children,
+          copyText: copyText,
+          copiedText: copiedText,
+          noBorder: true,
+          sentiment: "neutral"
+        })
+      }), hasShowMoreButton ? jsx(ShowMoreContainer, {
+        showMore: showMore,
+        children: jsx(StyledButton, {
+          type: "button",
+          onClick: () => setShowMore(!showMore),
+          "aria-expanded": showMore,
+          children: jsxs(AlignCenterText, {
+            as: "span",
+            variant: "bodySmallStrong",
+            children: [showMore ? hideText : showText, "\xA0", jsx(AnimatedArrowIcon, {
+              name: "arrow-down",
+              showMore: showMore
+            })]
+          })
+        })
+      }) : null]
+    })
+  });
+};
+
+export { Snippet };

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

@@ -0,0 +1,24 @@
+import _styled from '@emotion/styled/base';
+
+const Stack = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['gap', 'direction', 'alignItems', 'justifyContent', 'wrap'].includes(prop),
+  target: "ehpbis70"
+})("display:flex;", _ref => {
+  let {
+    theme,
+    gap = 0,
+    direction = 'column',
+    alignItems = 'normal',
+    justifyContent = 'normal',
+    wrap = 'nowrap'
+  } = _ref;
+  return `
+    gap: ${theme.space[gap]};
+    flex-direction: ${direction};
+    align-items: ${alignItems};
+    justify-content: ${justifyContent};
+    flex-wrap: ${typeof wrap === 'boolean' ? 'wrap' : wrap};
+  `;
+}, ";");
+
+export { Stack };

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

@@ -0,0 +1,101 @@
+import _styled from '@emotion/styled/base';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { ping } from '../../utils/animations.js';
+
+const HEIGHT = '10px';
+const WIDTH = '10px';
+const sentiments = {
+  danger: _ref => {
+    let {
+      theme
+    } = _ref;
+    return `
+      background-color: ${theme.colors.danger.backgroundStrong};
+    `;
+  },
+  info: _ref2 => {
+    let {
+      theme
+    } = _ref2;
+    return `
+      background-color: ${theme.colors.info.backgroundStrong};
+    `;
+  },
+  neutral: _ref3 => {
+    let {
+      theme
+    } = _ref3;
+    return `
+      background-color: ${theme.colors.neutral.backgroundStronger};
+    `;
+  },
+  success: _ref4 => {
+    let {
+      theme
+    } = _ref4;
+    return `
+      background-color: ${theme.colors.success.backgroundStrong};
+    `;
+  },
+  warning: _ref5 => {
+    let {
+      theme
+    } = _ref5;
+    return `
+      background-color: ${theme.colors.warning.backgroundStrong};
+    `;
+  }
+};
+const StyledCircle = /*#__PURE__*/_styled("span", {
+  target: "eny0xmn2"
+})("display:inline-block;width:", WIDTH, ";height:", HEIGHT, ";border-radius:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.radii.circle;
+}, ";", _ref7 => {
+  let {
+    sentiment
+  } = _ref7;
+  return sentiments[sentiment];
+}, ";");
+const StyledAnimatedCircle = /*#__PURE__*/_styled("span", {
+  target: "eny0xmn1"
+})("position:absolute;width:", WIDTH, ";height:", HEIGHT, ";opacity:0.75;border-radius:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.radii.circle;
+}, ";animation:", ping, " 1.1s cubic-bezier(0, 0, 0.2, 1) infinite;", _ref9 => {
+  let {
+    sentiment
+  } = _ref9;
+  return sentiments[sentiment];
+}, ";");
+const Container = /*#__PURE__*/_styled("span", {
+  target: "eny0xmn0"
+})("display:flex;width:", WIDTH, ";height:", HEIGHT, ";");
+const Status = _ref10 => {
+  let {
+    animated = false,
+    className,
+    tooltip,
+    sentiment,
+    'data-testid': dataTestId
+  } = _ref10;
+  return jsx(Tooltip, {
+    text: tooltip,
+    children: jsxs(Container, {
+      className: className,
+      "data-testid": dataTestId,
+      children: [animated ? jsx(StyledAnimatedCircle, {
+        sentiment: sentiment
+      }) : null, jsx(StyledCircle, {
+        sentiment: sentiment
+      })]
+    })
+  });
+};
+
+export { Status };

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

@@ -0,0 +1,81 @@
+import _styled from '@emotion/styled/base';
+import { Bullet } from '../Bullet/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const Steps = /*#__PURE__*/_styled("ul", {
+  target: "ewuati22"
+})("list-style:none;padding-left:0;text-align:left;display:flex;flex-direction:column;gap:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['3'];
+}, ";font-size:16px;");
+const Step = /*#__PURE__*/_styled('li', {
+  shouldForwardProp: prop => !['disabled'].includes(prop),
+  target: "ewuati21"
+})("display:flex;align-items:flex-start;gap:1rem;justify-content:center;color:", _ref2 => {
+  let {
+    theme,
+    disabled
+  } = _ref2;
+  return disabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.textStrong;
+}, ";");
+const StyledDiv = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['size'].includes(prop),
+  target: "ewuati20"
+})("flex:1;margin:auto;line-height:", _ref3 => {
+  let {
+    size
+  } = _ref3;
+  return size === 'medium' ? '32px' : '24px';
+}, ";font-size:", _ref4 => {
+  let {
+    size
+  } = _ref4;
+  return size === 'medium' ? '24px' : '16px';
+}, ";");
+const Item = _ref5 => {
+  let {
+    bulletText,
+    bulletIcon,
+    sentiment,
+    children,
+    size = 'medium',
+    disabled = false,
+    className
+  } = _ref5;
+  return jsxs(Step, {
+    disabled: disabled,
+    className: className,
+    children: [bulletIcon ? jsx(Bullet, {
+      icon: bulletIcon,
+      size: size,
+      sentiment: disabled ? 'disabled' : sentiment
+    }) : null, bulletText ? jsx(Bullet, {
+      text: bulletText,
+      size: size,
+      sentiment: disabled ? 'disabled' : sentiment
+    }) : null, jsx(StyledDiv, {
+      size: size,
+      children: children
+    })]
+  });
+};
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+const StepList = _ref6 => {
+  let {
+    children,
+    className,
+    'data-testid': dataTestId
+  } = _ref6;
+  return jsx(Steps, {
+    className: className,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+StepList.Item = Item;
+
+export { StepList };