@ntbjs/react-components 1.3.0-rc.9 → 2.0.0-rc.5

package/cjs/components/inputs/Button/Button.styled.js

@@ -0,0 +1,294 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9,
+  _t10,
+  _t11,
+  _t12,
+  _t13,
+  _t14,
+  _t15,
+  _t16,
+  _t17,
+  _t18,
+  _t19,
+  _t20,
+  _t21,
+  _t22,
+  _t23,
+  _t24,
+  _t25,
+  _t26,
+  _t27,
+  _t28,
+  _t29,
+  _t30,
+  _t31;
+const Button = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  position: relative;
+  border-radius: 3px;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  padding: 12px 16px;
+  cursor: pointer;
+  background: ${0};
+  border: 2px solid ${0};
+  transition: all 250ms, opacity 200ms;
+
+  &:hover,
+  &.dropdown-is-active {
+    background: #296c58;
+    border-color: #296c58;
+  }
+
+  ${0}
+
+  && {
+    ${0};
+  }
+
+  && {
+    ${0};
+  }
+
+  && {
+    ${0};
+  }
+
+  && {
+    ${0};
+  }
+
+  ${0};
+
+  ${0};
+
+  ${0};
+
+  ${0};
+
+  ${0};
+
+  ${0};
+
+  ${0};
+`), props => props.theme.getColor('emerald-500'), props => props.theme.getColor('emerald-500'), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white')), props => props.secondary && styled.css(_t2 || (_t2 = _`
+        background: ${0};
+        border-color: ${0};
+
+        ${0}
+
+        &:hover,
+        &.dropdown-is-active {
+          background: ${0};
+          border-color: ${0};
+        }
+      `), props => props.theme.getColor('gray-200'), props => props.theme.getColor('gray-200'), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700')), props => props.theme.getColor('gray-300'), props => props.theme.getColor('gray-300')), props => props.outlined && styled.css(_t3 || (_t3 = _`
+        background: transparent;
+        transition: none;
+
+        ${0}
+
+        ${0}
+
+        &:hover,
+        &.dropdown-is-active {
+          background-color: #296c58;
+
+          ${0}
+
+          ${0}
+        }
+      `), props.theme.themeProp('border-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('border-color', props.theme.getColor('emerald-600'), props.theme.getColor('emerald-600')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-200'))), props => props.outlined && props.secondary && styled.css(_t4 || (_t4 = _`
+        ${0}
+
+        ${0}
+
+        &:hover,
+        &.dropdown-is-active {
+          background: ${0};
+
+          ${0}
+
+          ${0}
+        }
+      `), props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props.theme.getColor('gray-300'), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300')), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'))), props => props.outlined && props.secondary && props.dropdownItems && styled.css(_t5 || (_t5 = _`
+        &:hover,
+        &.dropdown-is-active {
+          ${0}
+        }
+      `), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))), props => props.block && styled.css(_t6 || (_t6 = _`
+      width: 100%;
+    `)), props => props.disabled && styled.css(_t7 || (_t7 = _`
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    `)), props => props.size === 'x-small' && styled.css(_t8 || (_t8 = _`
+      padding: 1px 16px;
+      height: 24px;
+    `)), props => props.size === 'small' && styled.css(_t9 || (_t9 = _`
+      padding: 6px 16px;
+    `)), props => props.size === 'large' && styled.css(_t10 || (_t10 = _`
+      padding: 16px 16px;
+    `)), props => props.singleAction && styled.css(_t11 || (_t11 = _`
+      display: flex;
+      align-items: center;
+      gap: ${0}px;
+      border-radius: 3px !important;
+      transition: all 250ms, opacity 200ms;
+    `), props.singleActionGap), props => props.width && styled.css(_t12 || (_t12 = _`
+      min-width: ${0}px;
+      justify-content: center;
+    `), props.width));
+const ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t13 || (_t13 = _`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: scale(1);
+  opacity: 1;
+  transition: all 200ms;
+
+  > svg {
+    width: 100%;
+    max-width: 16px;
+    max-height: 16px;
+    margin-right: 8px;
+
+    ${0};
+
+    ${0};
+  }
+
+  ${0}
+
+  ${0};
+`), props => props.size === 'small' && styled.css(_t14 || (_t14 = _`
+        max-width: 13px;
+        max-height: 13px;
+      `)), props => props.size === 'x-small' && styled.css(_t15 || (_t15 = _`
+        max-width: 11px;
+        max-height: 11px;
+      `)), props => props.$loading && styled.css(_t16 || (_t16 = _`
+      transform: scale(0.95);
+      opacity: 0;
+    `)), props => props.singleAction && styled.css(_t17 || (_t17 = _`
+      svg {
+        width: 100% !important;
+        height: 100% !important;
+        margin-right: 24px;
+      }
+    `)));
+const LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  padding: 4px;
+  background: inherit;
+  opacity: 0;
+  transition: opacity 200ms;
+  box-sizing: border-box;
+
+  ${0}
+`), props => props.$loading && styled.css(_t19 || (_t19 = _`
+      opacity: 1;
+    `)));
+const LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(_t20 || (_t20 = _`
+  height: 100%;
+  color: inherit;
+  transform: rotate(-88deg);
+`));
+const LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)(_t21 || (_t21 = _`
+  transition: stroke-dashoffset 300ms linear;
+  stroke-dasharray: 113;
+`));
+const ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t22 || (_t22 = _`
+  white-space: nowrap;
+  display: flex;
+`));
+const MainButtonWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
+  border-radius: 3px;
+  ${0};
+`), props => {
+  return (props.activeDropdown || props.dropdownItems) && !props.outlined && styled.css(_t24 || (_t24 = _`
+        background: ${0};
+      `), props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
+});
+const MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t25 || (_t25 = _`
+  display: inline-block;
+  button {
+    ${0};
+
+    ${0};
+  }
+`), props => (props.activeDropdown || props.dropdownItems) && styled.css(_t26 || (_t26 = _`
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      `)), props => (props.activeDropdown || props.dropdownItems) && props.outlined && styled.css(_t27 || (_t27 = _`
+        border-right: none;
+      `)));
+const MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t28 || (_t28 = _`
+  display: inline-block;
+  width: 100%;
+  ${0};
+
+  button {
+    ${0};
+  }
+`), props => props.singleAction && styled.css(_t29 || (_t29 = _`
+      display: flex;
+      align-items: center;
+      border-radius: 3px !important;
+      transition: all 250ms, opacity 200ms;
+    `)), props => (props.activeDropdown || props.dropdownItems) && styled.css(_t30 || (_t30 = _`
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      `)));
+const DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t31 || (_t31 = _`
+  display: inline-block;
+
+  button {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+
+    ${0};
+  }
+
+  svg {
+    color: inherit;
+    height: 7px;
+    width: 12px;
+
+    ${0};
+  }
+`), props => !props.singleAction && 'border-left: none', props => !props.singleAction && 'margin-bottom: 1px');
+
+exports.Button = Button;
+exports.ButtonContent = ButtonContent;
+exports.ButtonWrapper = ButtonWrapper;
+exports.DropdownButtonContainer = DropdownButtonContainer;
+exports.LoadingIndicator = LoadingIndicator;
+exports.LoadingIndicatorSvg = LoadingIndicatorSvg;
+exports.LoadingIndicatorSvgCircle = LoadingIndicatorSvgCircle;
+exports.MainButtonContainer = MainButtonContainer;
+exports.MainButtonContainerSingle = MainButtonContainerSingle;
+exports.MainButtonWrapper = MainButtonWrapper;

package/cjs/components/inputs/Button/inputs/Button/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Button = require('../../Button.js');
+
+
+
+exports["default"] = Button["default"];

package/cjs/components/inputs/Checkbox/Checkbox.js

@@ -0,0 +1,102 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../../../node_modules/react/index.js');
+var nanoid = require('nanoid');
+var index$2 = require('../../../node_modules/prop-types/index.js');
+var lodash = require('lodash');
+var Checkbox_styled = require('./Checkbox.styled.js');
+var index$1 = require('../../../_virtual/index.js');
+
+const Checkbox = index["default"].forwardRef(function Checkbox({
+  checked,
+  defaultChecked,
+  disabled,
+  readOnly,
+  name,
+  value,
+  description,
+  error,
+  indeterminate,
+  muted,
+  label,
+  onChange,
+  onBlur,
+  className,
+  style
+}, forwardedRef) {
+  const [uniqueId] = index$1.react.exports.useState(nanoid.nanoid());
+  const hasError = index$1.react.exports.useMemo(() => {
+    if (lodash.isBoolean(error)) {
+      return error;
+    }
+    return !lodash.isEmpty(error);
+  }, [error]);
+  const descriptionText = index$1.react.exports.useMemo(() => {
+    if (!lodash.isEmpty(error)) {
+      return error;
+    }
+    if (!lodash.isEmpty(description)) {
+      return description;
+    }
+    return null;
+  }, [description, error]);
+  return index["default"].createElement(Checkbox_styled.Checkbox, {
+    className: className,
+    disabled: disabled,
+    readOnly: readOnly,
+    style: style
+  }, index["default"].createElement(Checkbox_styled.CheckboxLabel, {
+    disabled: disabled,
+    muted: muted,
+    readOnly: readOnly,
+    htmlFor: uniqueId
+  }, index["default"].createElement("input", {
+    ref: forwardedRef,
+    id: uniqueId,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    readOnly: readOnly,
+    value: value,
+    name: name,
+    type: "checkbox",
+    onChange: onChange,
+    onBlur: onBlur,
+    "data-indeterminate": indeterminate
+  }), index["default"].createElement(Checkbox_styled.IndeterminateCheckIcon, null), index["default"].createElement(Checkbox_styled.CheckIcon, null, index["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 10.9 8.45"
+  }, index["default"].createElement("path", {
+    d: "m3.68,8.45L0,4.75l1.21-1.21,2.47,2.45L9.7,0l1.21,1.23-7.22,7.22Z",
+    fill: "currentColor"
+  }))), (typeof label === 'string' && label.length > 0 || typeof label === 'object') && index["default"].createElement(Checkbox_styled.CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && index["default"].createElement(Checkbox_styled.Description, {
+    error: hasError
+  }, descriptionText));
+});
+Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
+  checked: index$2["default"].bool,
+  defaultChecked: index$2["default"].bool,
+  label: index$2["default"].oneOfType([index$2["default"].string, index$2["default"].element]),
+  disabled: index$2["default"].bool,
+  readOnly: index$2["default"].bool,
+  name: index$2["default"].string,
+  value: index$2["default"].string,
+  description: index$2["default"].string,
+  error: index$2["default"].oneOfType([index$2["default"].bool, index$2["default"].string]),
+  indeterminate: index$2["default"].bool,
+  muted: index$2["default"].bool,
+  onChange: index$2["default"].func,
+  onBlur: index$2["default"].func,
+  className: index$2["default"].string,
+  style: index$2["default"].object
+} : {};
+Checkbox.defaultProps = {
+  disabled: false,
+  readOnly: false,
+  indeterminate: false
+};
+var Checkbox$1 = Checkbox;
+
+exports["default"] = Checkbox$1;

package/cjs/components/inputs/Checkbox/Checkbox.styled.js

@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9,
+  _t10;
+const checkboxSize = '18px';
+const Checkbox = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  display: flex;
+  flex-direction: column;
+`));
+const CheckIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+  opacity: 0;
+  transform: scale(0.1);
+  transition: all 200ms;
+  position: absolute;
+  width: 12px;
+  top: 4px;
+  left: 3px;
+  color: ${0};
+
+  svg {
+    width: 100%;
+    display: block;
+  }
+`), props => props.theme.getColor('gray-100'));
+const IndeterminateCheckIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  opacity: 0;
+  transform: scale(0.1);
+  transition: all 200ms;
+  position: absolute;
+  height: 2px;
+  top: 8px;
+  left: 4px;
+  background: ${0};
+  width: 10px;
+`), props => props.theme.getColor('gray-100'));
+const CheckboxLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+  display: inline-flex;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  min-height: ${0};
+  text-align: left;
+  flex-wrap: wrap;
+  flex: 1;
+  line-height: ${0};
+  margin-right: auto;
+
+  & input[type='checkbox'] {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    margin: 0;
+  }
+
+  &::before {
+    content: '';
+    border: 2px solid ${0};
+    border-radius: 2px;
+    transition: all 200ms;
+    width: ${0};
+    height: ${0};
+    box-sizing: border-box;
+    ${0}
+  }
+
+  &:has(input[type='checkbox']:checked) {
+    &::before {
+      background: ${0};
+      border-color: ${0};
+    }
+  }
+
+  &:has(input[type='checkbox']:not([data-indeterminate='true']):checked) {
+    ${0} {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  &:has(input[type='checkbox'][data-indeterminate='true']:checked) {
+    ${0} {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  ${0}
+
+  ${0}
+`), checkboxSize, checkboxSize, props => props.theme.getColor('gray-300'), checkboxSize, checkboxSize, props => props.muted && styled.css(_t5 || (_t5 = _`
+        opacity: 0.75;
+      `)), props => props.theme.getColor('emerald-500'), props => props.theme.getColor('emerald-500'), CheckIcon, IndeterminateCheckIcon, props => props.readOnly && styled.css(_t6 || (_t6 = _`
+      opacity: 0.5;
+      cursor: default;
+      pointer-events: none;
+      user-select: text;
+    `)), props => props.disabled && styled.css(_t7 || (_t7 = _`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `)));
+const CheckboxVisualLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+  padding-left: 10px;
+  font-weight: 400;
+  font-size: 0.875rem;
+  flex: 1;
+
+  ${0};
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
+const Description = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
+  margin: 0.375rem 0 0 0;
+  font-size: 0.75rem;
+  line-height: 1.333;
+
+  ${0};
+
+  ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.error && styled.css(_t10 || (_t10 = _`
+      content: 'error';
+      ${0}
+    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))));
+
+exports.CheckIcon = CheckIcon;
+exports.Checkbox = Checkbox;
+exports.CheckboxLabel = CheckboxLabel;
+exports.CheckboxVisualLabel = CheckboxVisualLabel;
+exports.Description = Description;
+exports.IndeterminateCheckIcon = IndeterminateCheckIcon;

package/cjs/components/inputs/Checkbox/inputs/Checkbox/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Checkbox = require('../../Checkbox.js');
+
+
+
+exports["default"] = Checkbox["default"];