@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -1,82 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Children, isValidElement, cloneElement } from 'react';
-import { Link } from '../Link/index.js';
-import { 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 contractString = str => {
-  if (typeof str === 'string' && str.length > 30) {
-    return `${str.slice(0, 15)}...${str.slice(-15)}`;
-  }
-  return str;
-};
-const StyledOl = /*#__PURE__*/_styled("ol", {
-  target: "ej0p0s41"
-})(process.env.NODE_ENV === "production" ? {
-  name: "105zz11",
-  styles: "list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center"
-} : {
-  name: "105zz11",
-  styles: "list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const ItemContainer = /*#__PURE__*/_styled("li", {
-  target: "ej0p0s40"
-})("display:inline;&[aria-current='page']{color:", ({
-  theme
-}) => theme.colors.neutral.textWeak, ";}&:not(:last-child)::after{content:'\u203A';margin:0 8px;}", ({
-  onClick
-}) => onClick ? `
-    cursor: pointer;
-    &[aria-disabled="true"] {
-      pointer-events: none;
-    }
-` : ``, ";");
-const Item = ({
-  to,
-  children,
-  disabled = false,
-  'aria-current': ariaCurrent,
-  onClick,
-  step
-}) => jsx(ItemContainer, {
-  "aria-disabled": disabled,
-  onClick: onClick ? event => onClick(event, step ?? -1) : undefined,
-  "aria-current": ariaCurrent,
-  children: to ? jsx(Link, {
-    sentiment: "primary",
-    href: to,
-    children: contractString(children)
-  }) : contractString(children)
-});
-/**
- * Breadcrumbs component is used to display a navigation path with links to the parent pages.
- */
-const Breadcrumbs = ({
-  children,
-  selected: selectedProp,
-  className,
-  'data-testid': dataTestId
-}) => {
-  const selected = selectedProp !== undefined ? selectedProp : Children.count(children) - 1;
-  return jsx("nav", {
-    "aria-label": "breadcrumb",
-    className: className,
-    "data-testid": dataTestId,
-    children: jsx(StyledOl, {
-      children: Children.map(children, (child, index) => {
-        if (! /*#__PURE__*/isValidElement(child)) {
-          return child;
-        }
-        const active = selected === index;
-        return /*#__PURE__*/cloneElement(child, {
-          'aria-current': active ? 'page' : undefined,
-          step: index
-        });
-      })
-    })
-  });
-};
-Breadcrumbs.Item = Item;
-
-export { Breadcrumbs, Item };

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

@@ -1,98 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { SENTIMENTS_WITHOUT_NEUTRAL } from '../../theme/index.js';
-import capitalize from '../../utils/capitalize.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const PROMINENCES = {
-  default: 'default',
-  strong: 'strong'
-};
-const sizes = {
-  medium: `
-    width: 32px;
-    height: 32px;
-    font-size: 16px;
-  `,
-  small: `
-    width: 24px;
-    height: 24px;
-    font-size: 14px;
-  `
-};
-const sentimentStyles = ({
-  theme,
-  prominence
-}) => {
-  const definedProminence = prominence === PROMINENCES.strong ? capitalize(PROMINENCES.strong) : '';
-  const text = `text${definedProminence}`;
-  const background = `background${definedProminence}`;
-  return {
-    ...SENTIMENTS_WITHOUT_NEUTRAL.reduce((reducer, sentiment) => ({
-      ...reducer,
-      [sentiment]: `
-      color: ${theme.colors[sentiment][text]};
-      background: ${theme.colors[sentiment][background]};
-      border: 1px solid ${theme.colors[sentiment][background]};
-    `
-    }), {}),
-    neutral: `
-      color: ${prominence === PROMINENCES.strong ? theme.colors.neutral[text] : theme.colors.neutral.text};
-      background: ${theme.colors.neutral.background};
-      border: 1px solid ${theme.colors.neutral.border};
-    `,
-    disabled: `
-      color: ${theme.colors.neutral.textWeak};
-      background: ${theme.colors.neutral.backgroundStrong};
-      border: none;
-    `
-  };
-};
-const sizeStyles = ({
-  size
-}) => sizes[size];
-const StyledContainer = /*#__PURE__*/_styled('div', {
-  target: "e11loam60"
-})("display:inline-flex;border-radius:", ({
-  theme
-}) => theme.radii.circle, ";justify-content:center;align-items:center;", ({
-  theme,
-  prominence,
-  sentiment
-}) => sentimentStyles({
-  theme,
-  prominence
-})[sentiment], " ", sizeStyles, ";");
-/**
- * Bullet component is used to display a small icon or text with a colored background in a circle.
- */
-const Bullet = ({
-  className,
-  sentiment = 'neutral',
-  size = 'medium',
-  icon,
-  iconVariant,
-  text,
-  tooltip,
-  tooltipBaseId,
-  'data-testid': dataTestId,
-  prominence = 'default'
-}) => jsx(Tooltip, {
-  id: tooltipBaseId,
-  text: tooltip,
-  children: jsx(StyledContainer, {
-    sentiment: sentiment,
-    size: size,
-    className: className,
-    "data-testid": dataTestId,
-    prominence: prominence,
-    children: icon ? jsx(Icon, {
-      name: icon,
-      size: "small",
-      variant: iconVariant
-    }) : text
-  })
-});
-
-export { Bullet, PROMINENCES };

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

@@ -1,311 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { forwardRef } from 'react';
-import { Loader } from '../Loader/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-
-// SIZE
-const SIZE_HEIGHT = {
-  large: 48,
-  medium: 40,
-  small: 32,
-  xsmall: 24
-};
-const SIZE_PADDING_KEY = {
-  large: 2,
-  medium: 1.5,
-  small: 1,
-  xsmall: 0.5
-};
-const SIZE_GAP_KEY = {
-  large: 1,
-  medium: 1,
-  small: 1,
-  xsmall: 0.5
-};
-
-// FOCUS RING
-const FOCUS_RING_KEY = {
-  danger: 'focusDanger',
-  info: 'focusInfo',
-  neutral: 'focusNeutral',
-  primary: 'focusPrimary',
-  // @note: no focusSecondary so far, it will be added later, so far focusPrimary sounds fine
-  secondary: 'focusPrimary',
-  success: 'focusSuccess',
-  warning: 'focusWarning'
-};
-
-// VARIANTS
-
-const coreStyle = ({
-  theme,
-  size,
-  sentiment,
-  iconPosition,
-  fullWidth,
-  disabled,
-  iconOnly
-}) => {
-  const font = size === 'large' ? theme.typography.bodyStrong : theme.typography.bodySmallStrong;
-  let width = 'auto';
-  if (fullWidth) {
-    width = '100%';
-  } else if (iconOnly) {
-    width = `${SIZE_HEIGHT[size]}px`;
-  }
-  return `display: inline-flex;
-  height: ${SIZE_HEIGHT[size]}px;
-  padding: 0 ${theme.space[SIZE_PADDING_KEY[size]]};
-  flex-direction: ${iconPosition === 'right' ? 'row-reverse' : 'row'};
-  gap: ${theme.space[SIZE_GAP_KEY[size]]};
-  border-radius: ${theme.radii.default};
-  box-sizing: border-box;
-  width: ${width};
-  align-items: center;
-  cursor: ${disabled ? 'not-allowed' : 'pointer'};
-  justify-content: center;
-  outline-offset: 2px;
-  white-space: nowrap;
-  text-decoration: none;
-  &:hover {
-    text-decoration: none;
-  }
-
-
-  ${disabled ? '' : `
-          &:active {
-            box-shadow: ${theme.shadows[FOCUS_RING_KEY[sentiment]]};
-          }
-        `}
-
-  /* We can't use Text component because of button hover effect, so we need to duplicate */
-  font-size: ${font.fontSize};
-  font-family: ${font.fontFamily};
-  font-weight: ${font.weight};
-  letter-spacing: ${font.letterSpacing};
-  line-height: ${font.lineHeight};
-  paragraph-spacing: ${font.paragraphSpacing};
-  text-case: ${font.textCase};
-`;
-};
-const StyledFilledButton = /*#__PURE__*/_styled('button', {
-  shouldForwardProp: prop => !['size', 'sentiment', 'iconPosition', 'fullWidth', 'iconOnly'].includes(prop),
-  target: "e112qvla2"
-})(args => coreStyle(args), " background:", ({
-  theme,
-  sentiment
-}) => theme.colors[sentiment].backgroundStrong, ";border:none;color:", ({
-  theme,
-  sentiment
-}) => theme.colors[sentiment].textStrong, ";", ({
-  theme,
-  sentiment,
-  disabled
-}) => disabled ? `
-            background: ${theme.colors[sentiment].backgroundStrongDisabled};
-            color:
-              ${theme.colors[sentiment].textStrongDisabled};
-        ` : `
-            &:hover, &:active
-            {
-                background: ${theme.colors[sentiment].backgroundStrongHover};
-                color:
-                ${theme.colors[sentiment].textStrongHover};
-            }
-  `, ";");
-const StyledOutlinedButton = /*#__PURE__*/_styled('button', {
-  shouldForwardProp: prop => !['size', 'sentiment', 'iconPosition', 'fullWidth', 'iconOnly'].includes(prop),
-  target: "e112qvla1"
-})(args => coreStyle(args), " background:none;border:1px solid ", ({
-  theme,
-  sentiment
-}) => theme.colors[sentiment][sentiment === 'neutral' ? 'borderStrong' : 'border'], ";color:", ({
-  theme,
-  sentiment
-}) => theme.colors[sentiment].text, ";", ({
-  theme,
-  sentiment,
-  disabled
-}) => disabled ? `
-        color:
-          ${theme.colors[sentiment].textDisabled};
-        border: 1px solid ${theme.colors[sentiment][sentiment === 'neutral' ? 'borderStrongDisabled' : 'borderDisabled']};
-
-    ` : `
-        &:hover, &:active
-       {
-            background: ${theme.colors[sentiment].backgroundHover};
-            color:
-            ${theme.colors[sentiment].textHover};
-            border: 1px solid ${theme.colors[sentiment][sentiment === 'neutral' ? 'borderStrongHover' : 'borderHover']};
-
-        }
-`, ";");
-const StyledGhostButton = /*#__PURE__*/_styled('button', {
-  shouldForwardProp: prop => !['size', 'sentiment', 'iconPosition', 'fullWidth', 'iconOnly'].includes(prop),
-  target: "e112qvla0"
-})(args => coreStyle(args), " background:none;border:none;color:", ({
-  theme,
-  sentiment
-}) => theme.colors[sentiment].text, ";", ({
-  theme,
-  sentiment,
-  disabled
-}) => disabled ? `
-        color:
-          ${theme.colors[sentiment].textDisabled};
-      ` : `
-        &:hover, &:active
-        {
-            background: ${theme.colors[sentiment].backgroundHover};
-            color:
-              ${theme.colors[sentiment].textHover};
-        }
-`, ";");
-const VARIANTS_COMPONENTS = {
-  filled: {
-    button: StyledFilledButton,
-    link: /*#__PURE__*/StyledFilledButton.withComponent('a', {
-      target: "e112qvla3"
-    })
-  },
-  outlined: {
-    button: StyledOutlinedButton,
-    link: /*#__PURE__*/StyledOutlinedButton.withComponent('a', {
-      target: "e112qvla4"
-    })
-  },
-  ghost: {
-    button: StyledGhostButton,
-    link: /*#__PURE__*/StyledGhostButton.withComponent('a', {
-      target: "e112qvla5"
-    })
-  }
-};
-
-// @note: using XOR utility was generating some lint erros
-
-/**
- * Button component is used to trigger an action or event, such as submitting a form, opening a dialog,
- * canceling an action, or performing a delete operation.
- */
-const Button = /*#__PURE__*/forwardRef(({
-  type = 'button',
-  className,
-  'data-testid': dataTestId,
-  sentiment = 'primary',
-  variant = 'filled',
-  size = 'large',
-  disabled = false,
-  icon,
-  iconPosition = 'left',
-  iconVariant,
-  fullWidth = false,
-  isLoading = false,
-  children,
-  onClick,
-  onMouseDown,
-  onMouseUp,
-  onMouseOut,
-  name,
-  'aria-label': ariaLabel,
-  'aria-current': ariaCurrent,
-  'aria-controls': ariaControls,
-  'aria-expanded': ariaExpanded,
-  'aria-haspopup': ariaHaspopup,
-  href,
-  download,
-  target,
-  role,
-  tooltip,
-  tabIndex,
-  autoFocus
-}, ref) => {
-  const computeIsDisabled = disabled || isLoading;
-  const content = jsxs(Fragment, {
-    children: [!isLoading && icon ? jsx(Icon, {
-      name: icon,
-      size: "small",
-      variant: iconVariant
-    }) : null, isLoading ? jsx(Loader, {
-      active: true,
-      trailColor: "transparent",
-      size: "1em",
-      color: "currentColor"
-    }) : null, children && typeof children !== 'string' ? jsx("div", {
-      children: children
-    }) : children]
-  });
-
-  // @note: an anchor can't be disabled
-  if (href && !computeIsDisabled) {
-    const Component = VARIANTS_COMPONENTS[variant].link;
-    return jsx(Tooltip, {
-      text: tooltip,
-      containerFullWidth: fullWidth,
-      children: jsx(Component, {
-        role: role,
-        className: className,
-        "data-testid": dataTestId,
-        disabled: false,
-        fullWidth: fullWidth,
-        iconPosition: iconPosition,
-        sentiment: sentiment,
-        size: size,
-        type: type,
-        onClick: onClick,
-        "aria-label": ariaLabel,
-        "aria-current": ariaCurrent,
-        "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHaspopup,
-        href: href,
-        target: target,
-        download: download,
-        ref: ref,
-        iconOnly: !!icon && !children,
-        tabIndex: tabIndex,
-        autoFocus: autoFocus,
-        onMouseDown: onMouseDown,
-        onMouseUp: onMouseUp,
-        onMouseOut: onMouseOut,
-        children: content
-      })
-    });
-  }
-  const Component = VARIANTS_COMPONENTS[variant].button;
-  return jsx(Tooltip, {
-    text: tooltip,
-    containerFullWidth: fullWidth,
-    children: jsx(Component, {
-      role: role,
-      className: className,
-      "data-testid": dataTestId,
-      disabled: computeIsDisabled,
-      fullWidth: fullWidth,
-      iconPosition: iconPosition,
-      sentiment: sentiment,
-      size: size,
-      type: type,
-      onClick: onClick,
-      ref: ref,
-      name: name,
-      "aria-label": ariaLabel,
-      "aria-current": ariaCurrent,
-      "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded,
-      "aria-haspopup": ariaHaspopup,
-      iconOnly: !!icon && !children,
-      tabIndex: tabIndex,
-      autoFocus: autoFocus,
-      onMouseDown: onMouseDown,
-      onMouseUp: onMouseUp,
-      onMouseOut: onMouseOut,
-      children: content
-    })
-  });
-});
-
-export { Button, SIZE_HEIGHT };

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

@@ -1,67 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef } from 'react';
-import { Stack } from '../Stack/index.js';
-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 StyledStack = /*#__PURE__*/_styled(Stack, {
-  target: "exwxj841"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1b3njxj",
-  styles: "&[data-disabled='true']{cursor:not-allowed;}"
-} : {
-  name: "1b3njxj",
-  styles: "&[data-disabled='true']{cursor:not-allowed;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const BorderedBox = /*#__PURE__*/_styled("div", {
-  target: "exwxj840"
-})("border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";padding:", ({
-  theme
-}) => theme.space['3'], ";&[data-is-active='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.primary.border, ";}&[data-disabled='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";}");
-
-/**
- * Card component is a simple component to display content in a box with a border.
- */
-const Card = /*#__PURE__*/forwardRef(({
-  header,
-  disabled = false,
-  isActive = false,
-  children,
-  className,
-  'data-testid': dataTestId
-}, ref) => header ? jsxs(StyledStack, {
-  gap: 1,
-  className: className,
-  "data-testid": dataTestId,
-  "data-disabled": disabled,
-  ref: ref,
-  children: [typeof header === 'string' ? jsx(Text, {
-    variant: "heading",
-    as: "h2",
-    disabled: disabled,
-    children: header
-  }) : header, jsx(BorderedBox, {
-    "data-is-active": isActive,
-    "data-disabled": disabled,
-    children: children
-  })]
-}) : jsx(BorderedBox, {
-  "data-is-active": isActive,
-  "data-disabled": disabled,
-  className: className,
-  "data-testid": dataTestId,
-  ref: ref,
-  children: children
-}));
-
-export { Card };

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

@@ -1,128 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useRef, useEffect, useState } from 'react';
-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 StyledWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1id70w04"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1239432",
-  styles: "position:relative;margin-left:-100px;margin-right:-100px"
-} : {
-  name: "1239432",
-  styles: "position:relative;margin-left:-100px;margin-right:-100px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledBeforeScroll = /*#__PURE__*/_styled("span", {
-  target: "e1id70w03"
-})("position:absolute;width:100px;height:100%;content:'';background:linear-gradient(\n    -90deg,\n    ", ({
-  theme
-}) => theme.colors.neutral.background, "ff,\n    ", ({
-  theme
-}) => theme.colors.neutral.background, "\n  );cursor:w-resize;z-index:auto;");
-const StyledScrollableWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1id70w02"
-})("overflow-x:scroll;overflow-y:hidden;white-space:nowrap;display:flex;padding:0 100px;gap:", ({
-  theme
-}) => theme.space['2'], ";");
-const StyledAfterScroll = /*#__PURE__*/_styled("span", {
-  target: "e1id70w01"
-})("position:absolute;bottom:0;right:0;width:100px;height:100%;content:'';cursor:e-resize;z-index:auto;background:linear-gradient(\n    -90deg,\n    ", ({
-  theme
-}) => theme.colors.neutral.background, ",\n    ", ({
-  theme
-}) => theme.colors.neutral.background, "ff\n  );");
-const StyledBorderWrapper = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['width'].includes(prop),
-  target: "e1id70w00"
-})("display:flex;align-items:stretch;width:", ({
-  width
-}) => width, ";max-width:", ({
-  width
-}) => width, ";overflow-wrap:break-word;white-space:normal;height:auto;cursor:grab;flex-shrink:0;");
-const CarouselItem = ({
-  children,
-  width = '240px'
-}) => jsx(StyledBorderWrapper, {
-  width: width,
-  draggable: "true",
-  children: children
-});
-/**
- * Carousel component allows you to scroll horizontally through a list of items.
- */
-const Carousel = ({
-  children,
-  className,
-  'data-testid': dataTestId = 'scrollbar'
-}) => {
-  const scrollRef = useRef(null);
-  let intervalLeft;
-  let intervalRight;
-  const handleScrollRight = () => {
-    intervalRight = setInterval(() => {
-      if (scrollRef.current?.scrollTo && scrollRef.current?.scrollLeft) {
-        scrollRef.current.scrollTo?.(scrollRef.current.scrollLeft - 25, 0);
-      }
-    }, 30);
-  };
-  const handleScrollLeft = () => {
-    intervalLeft = setInterval(() => {
-      if (scrollRef.current?.scrollTo && scrollRef.current?.scrollLeft) {
-        scrollRef.current.scrollTo(scrollRef.current.scrollLeft + 25, 0);
-      }
-    }, 30);
-  };
-  const handleScrollX = (scrollX = 25) => {
-    if (scrollRef.current?.scrollTo && scrollRef.current?.scrollLeft) {
-      scrollRef.current.scrollTo?.(scrollRef.current.scrollLeft + scrollX, 0);
-    }
-  };
-  const cleanUp = () => {
-    clearInterval(intervalLeft);
-    clearInterval(intervalRight);
-  };
-  useEffect(() => cleanUp);
-  const [dragStartX, setDragStartX] = useState(0);
-  const [deltaX, setDeltaX] = useState(0);
-  return jsxs(StyledWrapper, {
-    className: className,
-    "data-testid": dataTestId,
-    children: [jsx(StyledBeforeScroll, {
-      "data-testid": `${dataTestId}-before`,
-      onMouseOver: handleScrollRight,
-      onMouseLeave: () => clearInterval(intervalRight)
-    }), jsx(StyledScrollableWrapper, {
-      ref: scrollRef,
-      onDragOver: e => {
-        setDeltaX(dragStartX - e.pageX);
-        setDragStartX(e.pageX);
-      },
-      onDragStart: e => {
-        const blankImg = new Image();
-        blankImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
-        e.dataTransfer.setDragImage(blankImg, 0, 0);
-        setDragStartX(e.clientX);
-      },
-      onDrag: () => handleScrollX(deltaX),
-      onDragEnd: () => {
-        setDeltaX(0);
-        setDragStartX(0);
-      },
-      onMouseUp: e => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      className: className,
-      "data-testid": `${dataTestId}-wrapper`,
-      children: children
-    }), jsx(StyledAfterScroll, {
-      "data-testid": `${dataTestId}-after`,
-      onMouseOver: handleScrollLeft,
-      onMouseLeave: () => clearInterval(intervalLeft)
-    })]
-  });
-};
-Carousel.Item = CarouselItem;
-
-export { Carousel, CarouselItem };