@onesy/ui-react 1.0.0

package/esm/LinearProgress/LinearProgress.js

@@ -0,0 +1,333 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["tonal", "color", "value", "version", "buffer", "reverse", "Component", "className", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { clamp, is } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import { staticClassName } from '../utils';
+const other_ = {
+  position: 'absolute',
+  inset: '0',
+  height: '100%',
+  transformOrigin: 'inherit'
+};
+
+// @keyframes's for line, line1, inner and inner1 source: https://github.com/material-components/material-components-web/blob/master/packages/mdc-linear-progress/_keyframes.scss
+const useStyle = styleMethod(theme => ({
+  '@keyframes line': {
+    '0%': {
+      transform: 'translateX(0)'
+    },
+    '20%': {
+      'animation-timing-function': 'cubic-bezier(0.5, 0, 0.701732, 0.495819)',
+      transform: 'translateX(0)'
+    },
+    '59.15%': {
+      'animation-timing-function': 'cubic-bezier(0.302435, 0.381352, 0.55, 0.956352)',
+      transform: `translateX(83.67142%)`
+    },
+    '100%': {
+      transform: `translateX(200.611057%)`
+    }
+  },
+  '@keyframes line_reverse': {
+    '0%': {
+      transform: 'translateX(0)'
+    },
+    '20%': {
+      'animation-timing-function': 'cubic-bezier(0.5, 0, 0.701732, 0.495819)',
+      transform: 'translateX(0)'
+    },
+    '59.15%': {
+      'animation-timing-function': 'cubic-bezier(0.302435, 0.381352, 0.55, 0.956352)',
+      transform: `translateX(-83.67142%)`
+    },
+    '100%': {
+      transform: `translateX(-200.611057%)`
+    }
+  },
+  '@keyframes inner': {
+    '0%': {
+      transform: 'scaleX(0.08)'
+    },
+    '36.65%': {
+      'animation-timing-function': 'cubic-bezier(0.334731, 0.12482, 0.785844, 1)',
+      transform: 'scaleX(0.08)'
+    },
+    '69.15%': {
+      'animation-timing-function': 'cubic-bezier(0.06, 0.11, 0.6, 1)',
+      transform: 'scaleX(0.661479)'
+    },
+    '100%': {
+      transform: 'scaleX(0.08)'
+    }
+  },
+  '@keyframes line1': {
+    '0%': {
+      'animation-timing-function': 'cubic-bezier(0.15, 0, 0.515058, 0.409685)',
+      transform: 'translateX(0)'
+    },
+    '25%': {
+      'animation-timing-function': 'cubic-bezier(0.31033, 0.284058, 0.8, 0.733712)',
+      transform: `translateX(37.651913%)`
+    },
+    '48.35%': {
+      'animation-timing-function': 'cubic-bezier(0.4, 0.627035, 0.6, 0.902026)',
+      transform: `translateX(84.386165%)`
+    },
+    '100%': {
+      transform: `translateX(160.277782%)`
+    }
+  },
+  '@keyframes line1_reverse': {
+    '0%': {
+      'animation-timing-function': 'cubic-bezier(0.15, 0, 0.515058, 0.409685)',
+      transform: 'translateX(0)'
+    },
+    '25%': {
+      'animation-timing-function': 'cubic-bezier(0.31033, 0.284058, 0.8, 0.733712)',
+      transform: `translateX(-37.651913%)`
+    },
+    '48.35%': {
+      'animation-timing-function': 'cubic-bezier(0.4, 0.627035, 0.6, 0.902026)',
+      transform: `translateX(-84.386165%)`
+    },
+    '100%': {
+      transform: `translateX(-160.277782%)`
+    }
+  },
+  '@keyframes inner1': {
+    '0%': {
+      'animation-timing-function': 'cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971)',
+      transform: 'scaleX(0.08)'
+    },
+    '19.15%': {
+      'animation-timing-function': 'cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315)',
+      transform: 'scaleX(0.457104)'
+    },
+    '44.15%': {
+      'animation-timing-function': 'cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179)',
+      transform: 'scaleX(0.72796)'
+    },
+    '100%': {
+      transform: 'scaleX(0.08)'
+    }
+  },
+  '@keyframes bufferDots': {
+    '100%': {
+      backgroundPosition: '-10px 0'
+    }
+  },
+  '@keyframes bufferDotsInverted': {
+    '100%': {
+      backgroundPosition: '10px 0'
+    }
+  },
+  root: {
+    width: '100%',
+    height: '4px',
+    position: 'relative',
+    overflow: 'hidden',
+    transformOrigin: '0 0'
+  },
+  // Reverse
+  reverse: {
+    transformOrigin: '100% 0'
+  },
+  // Color
+  color_default: {
+    color: theme.palette.text.default.primary
+  },
+  color_neutral: {
+    color: theme.palette.color.neutral.main
+  },
+  color_primary: {
+    color: theme.palette.color.primary.main
+  },
+  color_secondary: {
+    color: theme.palette.color.secondary.main
+  },
+  color_tertiary: {
+    color: theme.palette.color.tertiary.main
+  },
+  color_quaternary: {
+    color: theme.palette.color.quaternary.main
+  },
+  color_info: {
+    color: theme.palette.color.info.main
+  },
+  color_success: {
+    color: theme.palette.color.success.main
+  },
+  color_warning: {
+    color: theme.palette.color.warning.main
+  },
+  color_error: {
+    color: theme.palette.color.error.main
+  },
+  tonal_color_neutral: {
+    color: theme.methods.palette.color.value('neutral', 50)
+  },
+  tonal_color_primary: {
+    color: theme.methods.palette.color.value('primary', 50)
+  },
+  tonal_color_secondary: {
+    color: theme.methods.palette.color.value('secondary', 50)
+  },
+  tonal_color_tertiary: {
+    color: theme.methods.palette.color.value('tertiary', 50)
+  },
+  tonal_color_quaternary: {
+    color: theme.methods.palette.color.value('quaternary', 50)
+  },
+  tonal_color_info: {
+    color: theme.methods.palette.color.value('info', 50)
+  },
+  tonal_color_success: {
+    color: theme.methods.palette.color.value('success', 50)
+  },
+  tonal_color_warning: {
+    color: theme.methods.palette.color.value('warning', 50)
+  },
+  tonal_color_error: {
+    color: theme.methods.palette.color.value('error', 50)
+  },
+  line: _objectSpread(_objectSpread({}, other_), {}, {
+    transition: theme.methods.transitions.make('transform'),
+    background: 'currentColor'
+  }),
+  lineIndeterminate: _objectSpread(_objectSpread({}, other_), {}, {
+    width: '100%',
+    left: '-145.166611%',
+    transformOrigin: 'initial',
+    animation: '$line 2s infinite linear'
+  }),
+  lineIndeterminate_reverse: _objectSpread(_objectSpread({}, other_), {}, {
+    width: '100%',
+    right: '-145.166611%',
+    transformOrigin: 'initial',
+    animation: '$line_reverse 2s infinite linear'
+  }),
+  inner: _objectSpread(_objectSpread({}, other_), {}, {
+    width: '100%',
+    background: 'currentColor',
+    animation: '$inner 2s infinite linear'
+  }),
+  lineIndeterminate1: _objectSpread(_objectSpread({}, other_), {}, {
+    width: '100%',
+    left: '-54.888891%',
+    transformOrigin: 'initial',
+    animation: '$line1 2s infinite linear'
+  }),
+  lineIndeterminate1_reverse: _objectSpread(_objectSpread({}, other_), {}, {
+    width: '100%',
+    right: '-54.888891%',
+    transformOrigin: 'initial',
+    animation: '$line1_reverse 2s infinite linear'
+  }),
+  inner1: _objectSpread(_objectSpread({}, other_), {}, {
+    width: '100%',
+    background: 'currentColor',
+    animation: '$inner1 2s infinite linear'
+  }),
+  buffer: _objectSpread(_objectSpread({}, other_), {}, {
+    background: 'currentColor',
+    opacity: '0.24',
+    transition: theme.methods.transitions.make('transform')
+  }),
+  bufferDots: _objectSpread(_objectSpread({}, other_), {}, {
+    backgroundImage: `radial-gradient(2px 2px at center, currentColor 4px, transparent 4px)`,
+    backgroundSize: '10px 4px',
+    opacity: '0.24',
+    animation: '$bufferDots .3s infinite linear'
+  }),
+  // Reverse
+  bufferDots_reverse: {
+    animation: '$bufferDotsInverted .3s infinite linear'
+  }
+}), {
+  name: 'onesy-LinearProgress'
+});
+const LinearProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLinearProgress?.props?.default), props_), [props_]);
+  const {
+      tonal = true,
+      color = 'primary',
+      value,
+      version = 'indeterminate',
+      buffer,
+      reverse: reverse_,
+      Component = 'div',
+      className,
+      style
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  let reverse = version === 'indeterminate' ? false : reverse_;
+  if (theme.direction === 'rtl' && version === 'indeterminate') reverse = !reverse;
+  const styles = {
+    root: {},
+    buffer: {},
+    bufferDots: {},
+    line: {}
+  };
+  if (!classes[`color_${color}`]) {
+    styles.root.color = color;
+    if (tonal) {
+      const palette = theme.methods.color(color);
+      styles.root.color = theme.methods.palette.color.value(undefined, 50, true, palette);
+    }
+  }
+  const withBuffer = version === 'determinate' && buffer;
+  if (version === 'determinate') {
+    const values = {
+      buffer: !buffer ? 100 : 0,
+      line: 0
+    };
+    if (is('object', value)) {
+      if (buffer) values.buffer = clamp(value?.buffer, 0, 100);
+      values.line = clamp(value?.progress, 0, 100);
+    } else {
+      if (buffer) values.buffer = clamp(value, 0, 100);
+      values.line = clamp(value, 0, 100);
+    }
+    styles.bufferDots[!reverse ? 'left' : 'right'] = `${values.buffer}%`;
+    styles.buffer.transform = `translateX(${!reverse ? '-' : ''}${100 - values.buffer}%)`;
+    styles.line.transform = `translateX(${!reverse ? '-' : ''}${100 - values.line}%)`;
+    other['aria-valuenow'] = values.line;
+    other['aria-valuemin'] = 0;
+    other['aria-valuemax'] = 100;
+    other['aria-valuetext'] = `${values.line}%`;
+  }
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    role: "meter",
+    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-root'], className, classes.root, classes[`color_${color}`], tonal && classes[`tonal_color_${color}`], reverse && classes.reverse]),
+    style: _objectSpread(_objectSpread({}, styles.root), style)
+  }, other), withBuffer && /*#__PURE__*/React.createElement("div", {
+    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-buffer-dots'], classes.bufferDots, reverse && classes.bufferDots_reverse]),
+    style: styles.bufferDots
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-buffer'], classes.buffer]),
+    style: styles.buffer
+  }), version === 'indeterminate' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-line-indeterminate'], classes[!reverse ? 'lineIndeterminate' : 'lineIndeterminate_reverse']])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-inner'], classes.inner])
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-line-indeterminate-1'], classes[!reverse ? 'lineIndeterminate1' : 'lineIndeterminate1_reverse']])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-inner-1'], classes.inner1])
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-line'], classes.line]),
+    style: styles.line
+  }));
+});
+LinearProgress.displayName = 'onesy-LinearProgress';
+export default LinearProgress;

package/esm/LinearProgress/index.js

@@ -0,0 +1 @@
+export { default } from './LinearProgress';

package/esm/Link/Link.js

@@ -0,0 +1,175 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["tonal", "color", "version", "underline", "Component", "className", "style", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import TypeElement from '../Type';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'relative',
+    display: 'inline-flex',
+    transition: theme.methods.transitions.make(['color', 'text-decoration'], {
+      duration: 'xxs'
+    }),
+    '&::before': {
+      content: "''",
+      display: 'inline-flex',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      background: 'currentColor',
+      width: '100%',
+      height: '100%',
+      zIndex: '0',
+      padding: '0.14em 0.77em',
+      borderRadius: `${theme.shape.radius.unit / 8 * 0.4}em`,
+      transition: theme.methods.transitions.make(['opacity', 'background']),
+      opacity: '0'
+    }
+  },
+  focus: {
+    '&::before': {
+      opacity: theme.palette.visual_contrast.default.opacity.selected
+    }
+  },
+  // Underline
+  underline: {
+    textDecoration: 'underline'
+  },
+  underline_hover: {
+    '&:hover': {
+      textDecoration: 'underline'
+    }
+  },
+  // Color
+  color_default: {
+    color: theme.palette.text.default.primary
+  },
+  color_neutral: {
+    color: theme.palette.color.neutral.main
+  },
+  color_primary: {
+    color: theme.palette.color.primary.main
+  },
+  color_secondary: {
+    color: theme.palette.color.secondary.main
+  },
+  color_tertiary: {
+    color: theme.palette.color.tertiary.main
+  },
+  color_quaternary: {
+    color: theme.palette.color.quaternary.main
+  },
+  color_info: {
+    color: theme.palette.color.info.main
+  },
+  color_success: {
+    color: theme.palette.color.success.main
+  },
+  color_warning: {
+    color: theme.palette.color.warning.main
+  },
+  color_error: {
+    color: theme.palette.color.error.main
+  },
+  // Tonal
+  tonal_color_neutral: {
+    color: theme.methods.palette.color.value('neutral', 30)
+  },
+  tonal_color_primary: {
+    color: theme.methods.palette.color.value('primary', 30)
+  },
+  tonal_color_secondary: {
+    color: theme.methods.palette.color.value('secondary', 30)
+  },
+  tonal_color_tertiary: {
+    color: theme.methods.palette.color.value('tertiary', 30)
+  },
+  tonal_color_quaternary: {
+    color: theme.methods.palette.color.value('quaternary', 30)
+  },
+  tonal_color_info: {
+    color: theme.methods.palette.color.value('info', 30)
+  },
+  tonal_color_success: {
+    color: theme.methods.palette.color.value('success', 30)
+  },
+  tonal_color_warning: {
+    color: theme.methods.palette.color.value('warning', 30)
+  },
+  tonal_color_error: {
+    color: theme.methods.palette.color.value('error', 30)
+  }
+}), {
+  name: 'onesy-Link'
+});
+const Link = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLink?.props?.default), props_), [props_]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      tonal = true,
+      color: color_ = 'primary',
+      version = 'b2',
+      underline = true,
+      Component = 'a',
+      className,
+      style,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [focus, setFocus] = React.useState(false);
+  const [hover, setHover] = React.useState(false);
+  const styles = {
+    root: {}
+  };
+  const onFocus = React.useCallback(event => {
+    setFocus(true);
+  }, []);
+  const onBlur = React.useCallback(event => {
+    setFocus(false);
+  }, []);
+  const onMouseEnter = React.useCallback(event => {
+    setHover(true);
+  }, []);
+  const onMouseLeave = React.useCallback(event => {
+    setHover(false);
+  }, []);
+  const color = color_;
+  let palette;
+  if (!classes[`color_${color}`]) {
+    styles.root.color = color;
+    palette = theme.methods.color(color);
+    if (tonal) styles.root.color = theme.methods.palette.color.value(undefined, 30, true, palette);
+  }
+  if (underline === true && !hover) {
+    styles.root.textDecorationColor = theme.methods.palette.color.value(color, 70, true, palette);
+  }
+  if (hover) {
+    styles.root.color = theme.methods.palette.color.value(color, 10, true, palette);
+  }
+  return /*#__PURE__*/React.createElement(Type, _extends({
+    ref: ref,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onTouchStart: onMouseEnter,
+    onTouchEnd: onMouseLeave,
+    version: version,
+    role: "link",
+    Component: Component,
+    className: classNames([staticClassName('Link', theme) && ['onesy-Link-root', hover && `onesy-Link-hover`, focus && `onesy-Link-focus`], className, classes.root, classes[`color_${color}`], tonal && classes[`tonal_color_${color}`], underline === true && classes.underline, underline === 'hover' && classes.underline_hover, focus && classes.focus]),
+    style: _objectSpread(_objectSpread({}, style), styles.root)
+  }, other), children);
+});
+Link.displayName = 'onesy-Link';
+export default Link;

package/esm/Link/index.js

@@ -0,0 +1 @@
+export { default } from './Link';