@ultraviolet/ui 1.0.0

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

@@ -0,0 +1,217 @@
+import _styled from '@emotion/styled/base';
+import { keyframes, css } from '@emotion/react';
+import { Children, Fragment } from 'react';
+import flattenChildren from 'react-flatten-children';
+import { Icon } from '../Icon/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 loadingAnimation = keyframes`
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+`;
+const StyledStepContainer = /*#__PURE__*/_styled("div", {
+  target: "e19ft7rb5"
+})(process.env.NODE_ENV === "production" ? {
+  name: "b8wmnj",
+  styles: "display:flex;flex-direction:column;align-items:center;justify-content:flex-start"
+} : {
+  name: "b8wmnj",
+  styles: "display:flex;flex-direction:column;align-items:center;justify-content:flex-start",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledStep = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['temporal'].includes(prop),
+  target: "e19ft7rb4"
+})("border-radius:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.radii.circle;
+}, ";display:flex;align-items:center;justify-content:center;color:", _ref2 => {
+  let {
+    temporal,
+    theme
+  } = _ref2;
+  if (temporal === 'previous') return theme.colors.success.text;
+  if (temporal === 'current') return theme.colors.primary.text;
+  return theme.colors.neutral.textWeak;
+}, ";background-color:", _ref3 => {
+  let {
+    temporal,
+    theme
+  } = _ref3;
+  if (temporal === 'previous') return theme.colors.success.background;
+  if (temporal === 'current') return theme.colors.primary.background;
+  return 'transparent';
+}, ";border:", _ref4 => {
+  let {
+    temporal,
+    theme
+  } = _ref4;
+  return temporal === 'next' ? `1px solid ${theme.colors.neutral.borderWeak}` : null;
+}, ";");
+const StyledText = /*#__PURE__*/_styled(Text, {
+  target: "e19ft7rb3"
+})("margin-top:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.space['1'];
+}, ";");
+const StyledIcon = /*#__PURE__*/_styled(Icon, {
+  target: "e19ft7rb2"
+})("fill:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.success.text;
+}, ";");
+const loadingStyle = /*#__PURE__*/css("animation:", loadingAnimation, " 1s linear infinite;");
+const StyledLine = /*#__PURE__*/_styled("div", {
+  target: "e19ft7rb1"
+})("border-radius:", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.radii.default;
+}, ";flex-grow:1;border-radius:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.radii.default;
+}, ";background-color:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral.borderWeak;
+}, ";position:relative;::after{content:'';position:absolute;left:0;top:0;height:100%;border-radius:", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.radii.default;
+}, ";background-color:", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.colors.success.backgroundStrong;
+}, ";", _ref12 => {
+  let {
+    temporal
+  } = _ref12;
+  return temporal === 'previous' && `width: 100%;`;
+}, " ", _ref13 => {
+  let {
+    temporal,
+    animated
+  } = _ref13;
+  return temporal === 'current' && animated && loadingStyle;
+}, ";}");
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "e19ft7rb0"
+})("display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:0 ", _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.space['1'];
+}, ";", StyledStep, "{height:", _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.space['4'];
+}, ";width:", _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.space['4'];
+}, ";}", StyledStepContainer, "{width:", _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.space['4'];
+}, ";white-space:nowrap;}", StyledLine, "{height:", _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.space['0.5'];
+}, ";margin-top:", _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.space['2'];
+}, ";margin-bottom:", _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.space['2'];
+}, ";}");
+const StepperNumbers = _ref21 => {
+  let {
+    temporal,
+    children,
+    CurrentStep
+  } = _ref21;
+  return jsxs(StyledStepContainer, {
+    children: [jsx(StyledStep, {
+      temporal: temporal,
+      children: temporal !== 'previous' ? jsx(Text, {
+        as: "span",
+        variant: "bodySmall",
+        color: "neutral",
+        prominence: temporal === 'next' ? 'weak' : 'default',
+        children: CurrentStep
+      }) : jsx(StyledIcon, {
+        name: "check",
+        size: 20
+      })
+    }), jsx(StyledText, {
+      as: "span",
+      variant: "bodySmall",
+      prominence: temporal === 'next' ? 'weak' : 'default',
+      children: children
+    })]
+  });
+};
+const Stepper = _ref22 => {
+  let {
+    children,
+    selected = 0,
+    animated = false,
+    className,
+    'data-testid': dataTestId
+  } = _ref22;
+  const lastStep = Children.count(children) - 1;
+  return jsx(StyledContainer, {
+    className: className,
+    "data-testid": dataTestId,
+    children: flattenChildren(children).map((child, index) => {
+      const getTemporal = () => {
+        if (selected > index) return 'previous';
+        if (selected === index) return 'current';
+        return 'next';
+      };
+      const isNotLast = index < lastStep;
+      const temporal = getTemporal();
+      return (
+        // eslint-disable-next-line react/no-array-index-key
+        jsxs(Fragment, {
+          children: [jsx(StepperNumbers, {
+            CurrentStep: index + 1,
+            temporal: temporal,
+            children: child
+          }), isNotLast ? jsx(StyledLine, {
+            temporal: temporal,
+            animated: animated
+          }) : null]
+        }, `creation-progress-${index}`)
+      );
+    })
+  });
+};
+
+export { Stepper };

package/dist/src/components/SwitchButton/FocusOverlay.js

@@ -0,0 +1,47 @@
+import _styled from '@emotion/styled/base';
+import { useMemo } from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const FOCUS_OVERLAY_SCALE_RATIO = 6;
+const FOCUS_OVERLAY_PIXEL_RIGHT_OFFSET = 8;
+const StyledDiv = /*#__PURE__*/_styled("div", {
+  target: "etutiin0"
+})("position:absolute;height:calc(100% - ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ");border-radius:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.radii.default;
+}, ";background:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.primary.backgroundStrong;
+}, ";transform-origin:left center;transition:all 200ms ease-in-out;&[data-focusposition='right']{transform-origin:right center;}");
+const FocusOverlay = _ref4 => {
+  let {
+    focusPosition,
+    rightCardWidth,
+    leftCardWidth,
+    hasMouseDown
+  } = _ref4;
+  const translateXValue = useMemo(() => focusPosition === 'left' ? 0 : leftCardWidth + FOCUS_OVERLAY_PIXEL_RIGHT_OFFSET, [focusPosition, leftCardWidth]);
+  const getScaleXValue = () => {
+    if (!hasMouseDown || !leftCardWidth || !rightCardWidth) return 1;
+    const currentWidth = focusPosition === 'left' ? leftCardWidth : rightCardWidth;
+    return 1 + FOCUS_OVERLAY_SCALE_RATIO / currentWidth;
+  };
+  return jsx(StyledDiv, {
+    "data-focusposition": focusPosition,
+    style: {
+      transform: `translate3d(${translateXValue}px, 0, 0) scale3d(${getScaleXValue()}, 1, 1)`,
+      width: `${focusPosition === 'left' ? leftCardWidth : rightCardWidth}px`
+    }
+  });
+};
+
+export { FocusOverlay };

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

@@ -0,0 +1,131 @@
+import _styled from '@emotion/styled/base';
+import { useRef, useState, useEffect } from 'react';
+import { SelectableCard } from '../SelectableCard/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { FocusOverlay } from './FocusOverlay.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const StyledBorderedBox = /*#__PURE__*/_styled("div", {
+  target: "e4ryteh1"
+})("border:1px solid ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.border;
+}, ";border-radius:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.radii.default;
+}, ";padding:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['0.5'];
+}, ";display:flex;gap:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.space['1'];
+}, ";position:relative;");
+const StyledSelectableCard = /*#__PURE__*/_styled(SelectableCard, {
+  target: "e4ryteh0"
+})("border:none;height:40px;padding:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.space['1'];
+}, " ", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.space['2'];
+}, ";font-weight:", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.typography.bodyStrong.weight;
+}, ";justify-content:center;align-items:center;transition:all 200ms ease-in-out;&:hover,&:focus-within,&:active{box-shadow:none;border:none;&:not([data-error='true'][data-disabled='true']){border:none;}}&[data-checked='true']{border:none;}&[data-checked='true'] label{color:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.primary.textStrong;
+}, ";}&:not([data-checked='true']) label{&:hover{color:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.primary.textWeak;
+}, ";}}");
+const SwitchButton = _ref10 => {
+  let {
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    name,
+    leftButton,
+    rightButton,
+    tooltip,
+    className,
+    'data-testid': dataTestId
+  } = _ref10;
+  const leftButtonRef = useRef(null);
+  const rightButtonRef = useRef(null);
+  const [leftCardWidth, setLeftCardWidth] = useState();
+  const [rightCardWidth, setRightCardWidth] = useState();
+  const [hasMouseDown, setHasMouseDown] = useState(false);
+  const [localValue, setLocalValue] = useState(value === leftButton.value ? leftButton.value : rightButton.value);
+  const handleOnChange = event => {
+    onChange?.(event);
+    setLocalValue(event.target.value);
+  };
+  useEffect(() => {
+    if (!leftButtonRef.current || !rightButtonRef.current) return;
+    setLeftCardWidth(leftButtonRef.current.getBoundingClientRect().width);
+    setRightCardWidth(rightButtonRef.current.getBoundingClientRect().width);
+  }, [leftButton.value, leftButtonRef, localValue, rightButtonRef]);
+  const setMouseDown = isMouseDown => () => setHasMouseDown(isMouseDown);
+  return jsx(Tooltip, {
+    text: tooltip,
+    children: jsx("div", {
+      style: {
+        display: 'inline-flex'
+      },
+      className: className,
+      "data-testid": dataTestId,
+      children: jsxs(StyledBorderedBox, {
+        onMouseDown: setMouseDown(true),
+        onMouseUp: setMouseDown(false),
+        onMouseLeave: setMouseDown(false),
+        children: [rightCardWidth && leftCardWidth ? jsx(FocusOverlay, {
+          focusPosition: localValue === leftButton.value ? 'left' : 'right',
+          rightCardWidth: rightCardWidth,
+          leftCardWidth: leftCardWidth,
+          hasMouseDown: hasMouseDown
+        }) : null, jsx(StyledSelectableCard, {
+          ref: leftButtonRef,
+          name: name,
+          value: leftButton.value,
+          checked: localValue === leftButton.value,
+          onChange: handleOnChange,
+          onBlur: onBlur,
+          onFocus: onFocus,
+          "data-checked": localValue === leftButton.value,
+          label: leftButton.label
+        }), jsx(StyledSelectableCard, {
+          ref: rightButtonRef,
+          name: name,
+          value: rightButton.value,
+          checked: localValue === rightButton.value,
+          onChange: handleOnChange,
+          onBlur: onBlur,
+          onFocus: onFocus,
+          "data-checked": localValue === rightButton.value,
+          label: rightButton.label
+        })]
+      })
+    })
+  });
+};
+
+export { SwitchButton };

package/dist/src/components/Table/Body.js

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const Body = _ref => {
+  let {
+    children
+  } = _ref;
+  return jsx("tbody", {
+    children: children
+  });
+};
+
+export { Body };

package/dist/src/components/Table/Cell.js

@@ -0,0 +1,27 @@
+import _styled from '@emotion/styled/base';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledCell = /*#__PURE__*/_styled('td', {
+  target: "e78o8ww0"
+})("padding:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";font-size:14px;");
+const Cell = _ref2 => {
+  let {
+    children,
+    className,
+    colSpan,
+    rowSpan
+  } = _ref2;
+  return jsx(StyledCell, {
+    className: className,
+    colSpan: colSpan,
+    rowSpan: rowSpan,
+    children: children
+  });
+};
+
+export { Cell };

package/dist/src/components/Table/Header.js

@@ -0,0 +1,21 @@
+import _styled from '@emotion/styled/base';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledHeader = /*#__PURE__*/_styled('thead', {
+  target: "ekxedod0"
+})("border-bottom:1px solid ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.borderStrong;
+}, ";");
+const Header = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return jsx(StyledHeader, {
+    children: children
+  });
+};
+
+export { Header };

package/dist/src/components/Table/HeaderCell.js

@@ -0,0 +1,119 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '../Icon/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const StyledIconContainer = /*#__PURE__*/_styled(Stack, {
+  target: "ev6jkq82"
+})("color:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.textWeak;
+}, ";&[aria-disabled='true']{cursor:not-allowed;}&[role*='button']{cursor:pointer;user-select:none;}");
+const SortIcon = _ref2 => {
+  let {
+    order
+  } = _ref2;
+  return jsxs(StyledIconContainer, {
+    children: [jsx(Icon, {
+      name: "arrow-up",
+      size: 10,
+      color: order === 'ascending' ? 'primary' : 'neutral',
+      prominence: "weak"
+    }), jsx(Icon, {
+      name: "arrow-down",
+      size: 10,
+      color: order === 'descending' ? 'primary' : 'neutral',
+      prominence: "weak"
+    })]
+  });
+};
+const StyledHeaderCell = /*#__PURE__*/_styled('th', {
+  shouldForwardProp: prop => !['width', 'maxWidth', 'minWidth'].includes(prop),
+  target: "ev6jkq81"
+})(_ref3 => {
+  let {
+    width,
+    maxWidth,
+    minWidth
+  } = _ref3;
+  return `
+    ${width ? `width: ${width};` : ''}
+    ${maxWidth ? `max-width: ${maxWidth};` : ''}
+    ${minWidth ? `min-width: ${minWidth};` : ''}
+  `;
+}, " padding:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.space['1'];
+}, ";&[role*='button']{cursor:pointer;user-select:none;}");
+const StyledText = /*#__PURE__*/_styled(Text, {
+  target: "ev6jkq80"
+})("display:flex;flex-direction:row;align-items:center;gap:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.space['1'];
+}, ";");
+const HeaderCell = _ref6 => {
+  let {
+    children,
+    className,
+    isOrdered,
+    onOrder,
+    orderDirection,
+    width,
+    maxWidth,
+    minWidth,
+    info
+  } = _ref6;
+  let order;
+  if (isOrdered && orderDirection === 'asc') {
+    order = 'ascending';
+  } else if (isOrdered && orderDirection === 'desc') {
+    order = 'descending';
+  }
+  const handleOrder = onOrder ? () => onOrder(order === 'ascending' ? 'desc' : 'asc') : undefined;
+  return jsx(StyledHeaderCell, {
+    className: className,
+    onClick: handleOrder,
+    onKeyDown: handleOrder ? event => {
+      if (event.key === ' ' || event.key === 'Enter') {
+        handleOrder();
+        if (event.key === ' ') {
+          // @note: it avoid scroll when pressing Space
+          event.preventDefault();
+        }
+      }
+    } : undefined,
+    role: onOrder ? 'button columnheader' : undefined,
+    width: width,
+    maxWidth: maxWidth,
+    minWidth: minWidth,
+    tabIndex: handleOrder ? 0 : -1,
+    "aria-sort": order,
+    children: jsxs(StyledText, {
+      as: "div",
+      variant: "bodySmall",
+      color: order !== undefined ? 'primary' : 'neutral',
+      children: [children, info ? jsx(Tooltip, {
+        text: info,
+        children: jsx(Icon, {
+          name: "information-outline",
+          size: 20,
+          prominence: "weak",
+          color: "neutral"
+        })
+      }) : null, orderDirection !== undefined && isOrdered !== undefined ? jsx(SortIcon, {
+        "aria-disabled": !onOrder,
+        order: order
+      }) : null]
+    })
+  });
+};
+
+export { HeaderCell };

package/dist/src/components/Table/HeaderRow.js

@@ -0,0 +1,35 @@
+import { Checkbox } from '../Checkbox/index.js';
+import { HeaderCell } from './HeaderCell.js';
+import { useTableContext } from './TableContext.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+const SELECT_CHECKBOX_SIZE = 24;
+const HeaderRow = _ref => {
+  let {
+    children,
+    hasSelectAllColumn
+  } = _ref;
+  const {
+    allRowSelectValue,
+    selectAll,
+    unselectAll,
+    selectedRowIds
+  } = useTableContext();
+  const selectableRowCount = Object.keys(selectedRowIds).length;
+  return jsxs("tr", {
+    children: [hasSelectAllColumn ? jsx(HeaderCell, {
+      width: `${SELECT_CHECKBOX_SIZE}px`,
+      children: jsx(Checkbox, {
+        name: "table-select-all-checkbox",
+        value: "all",
+        "aria-label": "select all",
+        checked: allRowSelectValue,
+        onChange: allRowSelectValue === false ? selectAll : unselectAll,
+        disabled: selectableRowCount === 0,
+        size: SELECT_CHECKBOX_SIZE
+      })
+    }) : null, children]
+  });
+};
+
+export { HeaderRow, SELECT_CHECKBOX_SIZE };

package/dist/src/components/Table/Row.js

@@ -0,0 +1,70 @@
+import _styled from '@emotion/styled/base';
+import { useEffect } from 'react';
+import { Checkbox } from '../Checkbox/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { Cell } from './Cell.js';
+import { SELECT_CHECKBOX_SIZE } from './HeaderRow.js';
+import { useTableContext } from './TableContext.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+const StyledCheckboxContainer = /*#__PURE__*/_styled("div", {
+  target: "e1qvrbgq0"
+})("display:flex;background:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.background;
+}, ";");
+const Row = _ref2 => {
+  let {
+    children,
+    className,
+    id,
+    selectDisabled,
+    'data-testid': dataTestid
+  } = _ref2;
+  const {
+    allRowSelectValue,
+    selectable,
+    registerSelectableRow,
+    selectedRowIds,
+    selectRow,
+    unselectRow
+  } = useTableContext();
+  useEffect(() => {
+    if (!selectDisabled) {
+      const unregisterCallback = registerSelectableRow(id);
+      return unregisterCallback;
+    }
+    return undefined;
+  }, [id, registerSelectableRow, selectDisabled]);
+  return jsxs("tr", {
+    className: className,
+    "data-testid": dataTestid,
+    children: [selectable ? jsx(Cell, {
+      children: jsx(StyledCheckboxContainer, {
+        "data-visibility": allRowSelectValue === false ? 'hover' : undefined,
+        children: jsx(Tooltip, {
+          text: typeof selectDisabled === 'string' ? selectDisabled : undefined,
+          children: jsx(Checkbox, {
+            name: "table-select-checkbox",
+            "aria-label": "select",
+            checked: selectedRowIds[id],
+            value: id,
+            onChange: () => {
+              if (selectedRowIds[id]) {
+                unselectRow(id);
+              } else {
+                selectRow(id);
+              }
+            },
+            disabled: selectDisabled !== undefined,
+            size: SELECT_CHECKBOX_SIZE
+          })
+        })
+      })
+    }) : null, children]
+  });
+};
+
+export { Row };