@ultraviolet/ui 1.0.0

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

@@ -0,0 +1,154 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef, useMemo, useRef } from 'react';
+import { Checkbox } from '../Checkbox/index.js';
+import { Radio } from '../Radio/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const Container = /*#__PURE__*/_styled("div", {
+  target: "e1s5n3hj1"
+})("display:inline-flex;flex-direction:column;align-items:start;padding:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['2'];
+}, ";border-radius:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.radii.default;
+}, ";transition:border-color 200ms ease,box-shadow 200ms ease;cursor:pointer;border:1px solid ", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.borderWeak;
+}, ";color:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral.text;
+}, ";&[data-checked='true']{border:1px solid ", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.primary.borderWeak;
+}, ";}&[data-error='true']{border:1px solid ", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.danger.border;
+}, ";}&[data-disabled='true']{border:1px solid ", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colors.neutral.borderWeakDisabled;
+}, ";color:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.neutral.textDisabled;
+}, ";background:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral.backgroundDisabled;
+}, ";cursor:not-allowed;}&:hover,&:focus-within,&:active{&:not([data-error='true']):not([data-disabled='true']){border:1px solid ", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.primary.borderWeak;
+}, ";&[data-cheked='false']{box-shadow:", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.shadows.hoverPrimary;
+}, ";}}}");
+const StyledElement = element => /*#__PURE__*/_styled(element, {
+  shouldForwardProp: prop => !['showTick', 'hasLabel'].includes(prop),
+  target: "e1s5n3hj0"
+})("display:inline-flex;align-items:start;&[data-checked='true']{color:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.primary.textWeak;
+}, ";}&[data-error='true']{color:", _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.danger.text;
+}, ";}&[aria-disabled='true']{color:", _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.colors.neutral.textDisabled;
+}, ";}input+svg{", _ref15 => {
+  let {
+    showTick
+  } = _ref15;
+  return !showTick ? `display: none;` : null;
+}, ";}label{", _ref16 => {
+  let {
+    showTick,
+    hasLabel
+  } = _ref16;
+  return !showTick && !hasLabel ? `display: none;` : null;
+}, ";}");
+const SelectableCard = /*#__PURE__*/forwardRef((_ref17, ref) => {
+  let {
+    name,
+    value,
+    onChange,
+    showTick = false,
+    type = 'radio',
+    checked = false,
+    disabled = false,
+    children,
+    className,
+    isError,
+    onFocus,
+    onBlur,
+    tooltip,
+    id,
+    label,
+    'data-testid': dataTestId
+  } = _ref17;
+  const Element = useMemo(() => StyledElement(type === 'radio' ? Radio : Checkbox), [type]);
+  const innerRef = useRef(null);
+  return jsx(Tooltip, {
+    text: tooltip,
+    children: jsxs(Container, {
+      onClick: () => {
+        if (innerRef?.current) {
+          innerRef.current.click();
+        }
+      },
+      className: className,
+      "data-checked": checked,
+      "data-disabled": disabled,
+      "data-error": isError,
+      "data-testid": dataTestId,
+      ref: ref,
+      children: [jsx(Element, {
+        name: name,
+        value: value,
+        onChange: onChange,
+        showTick: showTick,
+        checked: checked,
+        disabled: disabled,
+        error: isError,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        hasLabel: !!label,
+        id: id,
+        ref: innerRef,
+        "data-error": isError,
+        children: label
+      }), typeof children === 'function' ? children({
+        checked,
+        disabled
+      }) : children]
+    })
+  });
+});
+
+export { SelectableCard };

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

@@ -0,0 +1,91 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '../Icon/index.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+const StyledIconWrapper = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['direction'].includes(prop),
+  target: "e1d1zom92"
+})("display:flex;flex-direction:", _ref => {
+  let {
+    direction
+  } = _ref;
+  return direction === 'vertical' ? 'column' : 'row';
+}, ";align-items:center;");
+const StyledIcon = /*#__PURE__*/_styled(Icon, {
+  target: "e1d1zom91"
+})("fill:", _ref2 => {
+  let {
+    color,
+    theme
+  } = _ref2;
+  return theme.colors[color].border;
+}, ";");
+const StyledHr = /*#__PURE__*/_styled('hr', {
+  shouldForwardProp: prop => !['direction', 'thickness', 'color', 'hasIcon'].includes(prop),
+  target: "e1d1zom90"
+})("margin:0;border:0;width:", _ref3 => {
+  let {
+    direction,
+    thickness = 1
+  } = _ref3;
+  return direction === 'vertical' ? `${thickness}px` : 'auto';
+}, ";height:", _ref4 => {
+  let {
+    direction,
+    thickness = 1
+  } = _ref4;
+  return direction === 'horizontal' ? `${thickness}px` : 'auto';
+}, ";flex-shrink:0;background-color:", _ref5 => {
+  let {
+    theme,
+    color
+  } = _ref5;
+  return theme.colors[color].border;
+}, ";", _ref6 => {
+  let {
+    hasIcon
+  } = _ref6;
+  return hasIcon && `flex: 1;`;
+}, ";");
+const Separator = _ref7 => {
+  let {
+    direction = 'horizontal',
+    thickness = 1,
+    color = 'neutral',
+    icon,
+    className,
+    'data-testid': dataTestId
+  } = _ref7;
+  return icon ? jsxs(StyledIconWrapper, {
+    role: "separator",
+    "aria-orientation": direction,
+    direction: direction,
+    className: className,
+    "data-testid": dataTestId,
+    children: [jsx(StyledHr, {
+      direction: direction,
+      thickness: thickness,
+      color: color,
+      hasIcon: true
+    }), jsx(StyledIcon, {
+      name: icon,
+      size: 24,
+      color: color
+    }), jsx(StyledHr, {
+      direction: direction,
+      thickness: thickness,
+      color: color,
+      hasIcon: true
+    })]
+  }) : jsx(StyledHr, {
+    role: "separator",
+    "aria-orientation": direction,
+    direction: direction,
+    thickness: thickness,
+    color: color,
+    className: className,
+    "data-testid": dataTestId
+  });
+};
+
+export { Separator };

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

@@ -0,0 +1,53 @@
+import _styled from '@emotion/styled/base';
+import { Fragment } from 'react';
+import { IconSkeleton } from './IconSkeleton.js';
+import { Line } from './Line.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const StyledLine = /*#__PURE__*/_styled("li", {
+  target: "ez87ex11"
+})("display:flex;align-items:center;padding:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return `${theme.space['3']} ${theme.space['2']}`;
+}, ";");
+const StyledList = /*#__PURE__*/_styled("ul", {
+  target: "ez87ex10"
+})("min-height:200px;width:100%;height:100%;padding:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['2'];
+}, ";border:1px solid ", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.borderWeak;
+}, ";border-radius:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.radii.default;
+}, ";margin:0;>", StyledLine, ":not(:last-child){border-bottom:1px solid ", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral.border;
+}, ";}");
+const Block = _ref6 => {
+  let {
+    length = 3
+  } = _ref6;
+  return jsx(StyledList, {
+    children: Array.from({
+      length
+    }, (_, i) => jsx(Fragment, {
+      children: jsxs(StyledLine, {
+        children: [jsx(IconSkeleton, {}), jsx(Line, {})]
+      })
+    }, `skeleton-block-${i}`))
+  });
+};
+
+export { Block };

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

@@ -0,0 +1,52 @@
+import _styled from '@emotion/styled/base';
+import { IconSkeleton } from './IconSkeleton.js';
+import { Line } from './Line.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "esrnljb1"
+})("display:grid;grid-template-columns:repeat(", _ref => {
+  let {
+    col
+  } = _ref;
+  return col;
+}, ", 1fr);gap:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['2'];
+}, ";");
+const Block = /*#__PURE__*/_styled("div", {
+  target: "esrnljb0"
+})("width:100%;display:flex;align-items:center;padding:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return `${theme.space['1']} ${theme.space['2']}`;
+}, ";border:1px solid ", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral.borderWeak;
+}, ";border-radius:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.radii.default;
+}, ";overflow:hidden;");
+const Blocks = _ref6 => {
+  let {
+    col = 4,
+    length = 8
+  } = _ref6;
+  return jsx(StyledContainer, {
+    col: col,
+    children: Array.from({
+      length
+    }, (_, i) => jsxs(Block, {
+      children: [jsx(IconSkeleton, {}), jsx(Line, {})]
+    }, `skeleton-blocks-${i}`))
+  });
+};
+
+export { Blocks };

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

@@ -0,0 +1,47 @@
+import _styled from '@emotion/styled/base';
+import { IconSkeleton } from './IconSkeleton.js';
+import { Line } from './Line.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "e18cng8b1"
+})("display:grid;grid-template-columns:repeat(", _ref => {
+  let {
+    col
+  } = _ref;
+  return col;
+}, ", 1fr);gap:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['2'];
+}, ";");
+const Block = /*#__PURE__*/_styled("div", {
+  target: "e18cng8b0"
+})("height:130px;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;border:1px solid ", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.borderWeak;
+}, ";border-radius:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.radii.default;
+}, ";overflow:hidden;");
+const BoxWithIcon = _ref5 => {
+  let {
+    col = 4,
+    length = 8
+  } = _ref5;
+  return jsx(StyledContainer, {
+    col: col,
+    children: Array.from({
+      length
+    }, (_, i) => jsxs(Block, {
+      children: [jsx(IconSkeleton, {}), jsx(Line, {})]
+    }, `skeleton-box-${i}`))
+  });
+};
+
+export { BoxWithIcon };

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

@@ -0,0 +1,58 @@
+import _styled from '@emotion/styled/base';
+import { Line } from './Line.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 CIRCLE_SIZE = 206;
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "e1bu753f3"
+})(process.env.NODE_ENV === "production" ? {
+  name: "zjik7",
+  styles: "display:flex"
+} : {
+  name: "zjik7",
+  styles: "display:flex",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledSVG = /*#__PURE__*/_styled("svg", {
+  target: "e1bu753f2"
+})("height:", CIRCLE_SIZE, "px;width:", CIRCLE_SIZE, "px;transform:rotate(-90deg);");
+const StyledCircle = /*#__PURE__*/_styled("circle", {
+  target: "e1bu753f1"
+})("transform-origin:50% 50%;stroke:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.borderWeak;
+}, ";stroke-width:18;stroke-linecap:butt;fill:none;");
+const LineList = /*#__PURE__*/_styled("ul", {
+  target: "e1bu753f0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "pct5nu",
+  styles: "display:grid;list-style:none;gap:16px"
+} : {
+  name: "pct5nu",
+  styles: "display:grid;list-style:none;gap:16px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Donut = () => jsxs(StyledContainer, {
+  children: [jsx(StyledSVG, {
+    children: jsx(StyledCircle, {
+      cx: CIRCLE_SIZE / 2,
+      cy: CIRCLE_SIZE / 2,
+      r: "90"
+    })
+  }), jsxs(LineList, {
+    children: [jsx("li", {
+      children: jsx(Line, {})
+    }), jsx("li", {
+      children: jsx(Line, {})
+    }), jsx("li", {
+      children: jsx(Line, {})
+    }), jsx("li", {
+      children: jsx(Line, {})
+    })]
+  })]
+});
+
+export { Donut };

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

@@ -0,0 +1,37 @@
+import _styled from '@emotion/styled/base';
+
+const IconSkeleton = /*#__PURE__*/_styled("div", {
+  target: "e1kubpd30"
+})("margin-right:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";width:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['4'];
+}, ";height:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['4'];
+}, ";min-width:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.space['4'];
+}, ";border-radius:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.radii.large;
+}, ";background-color:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.neutral.borderWeak;
+}, ";");
+
+export { IconSkeleton };

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

@@ -0,0 +1,19 @@
+import _styled from '@emotion/styled/base';
+
+const sizes = [80, 120, 160, 200];
+const randomSize = () => sizes[Math.floor(Math.random() * sizes.length)];
+const Line = /*#__PURE__*/_styled("div", {
+  target: "e1denkbe0"
+})("height:12px;width:", () => randomSize(), "px;max-width:100%;border-radius:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.radii.large;
+}, ";background-color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.borderWeak;
+}, ";");
+
+export { Line };

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

@@ -0,0 +1,60 @@
+import _styled from '@emotion/styled/base';
+import { Line } from './Line.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 StyledItem = /*#__PURE__*/_styled("li", {
+  target: "e639qnr2"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1t7ed8m",
+  styles: "display:flex;align-items:center;height:48px;padding:4px 8px"
+} : {
+  name: "1t7ed8m",
+  styles: "display:flex;align-items:center;height:48px;padding:4px 8px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledLine = /*#__PURE__*/_styled("div", {
+  target: "e639qnr1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "82a6rk",
+  styles: "flex:1"
+} : {
+  name: "82a6rk",
+  styles: "flex:1",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledList = /*#__PURE__*/_styled("ul", {
+  target: "e639qnr0"
+})("list-style:none;padding:0;margin:0;>", StyledItem, ":nth-of-type(even){background-color:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.backgroundDisabled;
+}, ";}");
+const Item = _ref2 => {
+  let {
+    col = 3
+  } = _ref2;
+  return jsx(StyledItem, {
+    children: Array.from({
+      length: col
+    }, (_, i) => jsx(StyledLine, {
+      children: jsx(Line, {})
+    }, `skeleton-list-col-${i}`))
+  });
+};
+const List = _ref3 => {
+  let {
+    length = 3,
+    col = 3
+  } = _ref3;
+  return jsx(StyledList, {
+    children: Array.from({
+      length
+    }, (_, i) => jsx(Item, {
+      col: col
+    }, `skeleton-list-${i}`))
+  });
+};
+
+export { List };

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

@@ -0,0 +1,57 @@
+import _styled from '@emotion/styled/base';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "e1yrvvrg2"
+})("height:277px;display:grid;grid-template-columns:repeat(", _ref => {
+  let {
+    length
+  } = _ref;
+  return length;
+}, ", 1fr);gap:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['2'];
+}, ";overflow:auto;");
+const StyledCard = /*#__PURE__*/_styled("div", {
+  target: "e1yrvvrg1"
+})("border:1px solid ", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.borderWeak;
+}, ";border-radius:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.radii.default;
+}, ";width:239px;height:261px;overflow:hidden;");
+const StyledBanner = /*#__PURE__*/_styled("div", {
+  target: "e1yrvvrg0"
+})("border:1px solid ", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral.borderWeak;
+}, ";background-color:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.neutral.borderWeak;
+}, ";width:100%;height:33%;");
+const Slider = _ref7 => {
+  let {
+    length = 4
+  } = _ref7;
+  return jsx(StyledContainer, {
+    length: length,
+    children: Array.from({
+      length
+    }, (_, i) => jsx(StyledCard, {
+      children: jsx(StyledBanner, {})
+    }, `skeleton-slider-card-${i}`))
+  });
+};
+
+export { Slider };