@ntbjs/react-components 1.3.0-rc.8 → 2.0.0-rc.3

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

@@ -0,0 +1,277 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+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.button.attrs(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 && 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 && 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 && 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 && 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 && css(_t6 || (_t6 = _`
+      width: 100%;
+    `)), props => props.disabled && css(_t7 || (_t7 = _`
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    `)), props => props.size === 'x-small' && css(_t8 || (_t8 = _`
+      padding: 1px 16px;
+      height: 24px;
+    `)), props => props.size === 'small' && css(_t9 || (_t9 = _`
+      padding: 6px 16px;
+    `)), props => props.size === 'large' && css(_t10 || (_t10 = _`
+      padding: 16px 16px;
+    `)), props => props.singleAction && 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 && css(_t12 || (_t12 = _`
+      min-width: ${0}px;
+      justify-content: center;
+    `), props.width));
+const ButtonContent = styled.div.attrs(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' && css(_t14 || (_t14 = _`
+        max-width: 13px;
+        max-height: 13px;
+      `)), props => props.size === 'x-small' && css(_t15 || (_t15 = _`
+        max-width: 11px;
+        max-height: 11px;
+      `)), props => props.$loading && css(_t16 || (_t16 = _`
+      transform: scale(0.95);
+      opacity: 0;
+    `)), props => props.singleAction && css(_t17 || (_t17 = _`
+      svg {
+        width: 100% !important;
+        height: 100% !important;
+        margin-right: 24px;
+      }
+    `)));
+const LoadingIndicator = styled.div.attrs(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 && css(_t19 || (_t19 = _`
+      opacity: 1;
+    `)));
+const LoadingIndicatorSvg = styled.svg.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
+  height: 100%;
+  color: inherit;
+  transform: rotate(-88deg);
+`));
+const LoadingIndicatorSvgCircle = styled.circle.attrs(applyDefaultTheme)(_t21 || (_t21 = _`
+  transition: stroke-dashoffset 300ms linear;
+  stroke-dasharray: 113;
+`));
+const ButtonWrapper = styled.span.attrs(applyDefaultTheme)(_t22 || (_t22 = _`
+  white-space: nowrap;
+  display: flex;
+`));
+const MainButtonWrapper = styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
+  border-radius: 3px;
+  ${0};
+`), props => {
+  return (props.activeDropdown || props.dropdownItems) && !props.outlined && css(_t24 || (_t24 = _`
+        background: ${0};
+      `), props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
+});
+const MainButtonContainer = styled.div.attrs(applyDefaultTheme)(_t25 || (_t25 = _`
+  display: inline-block;
+  button {
+    ${0};
+
+    ${0};
+  }
+`), props => (props.activeDropdown || props.dropdownItems) && css(_t26 || (_t26 = _`
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      `)), props => (props.activeDropdown || props.dropdownItems) && props.outlined && css(_t27 || (_t27 = _`
+        border-right: none;
+      `)));
+const MainButtonContainerSingle = styled.div.attrs(applyDefaultTheme)(_t28 || (_t28 = _`
+  display: inline-block;
+  width: 100%;
+  ${0};
+
+  button {
+    ${0};
+  }
+`), props => props.singleAction && css(_t29 || (_t29 = _`
+      display: flex;
+      align-items: center;
+      border-radius: 3px !important;
+      transition: all 250ms, opacity 200ms;
+    `)), props => (props.activeDropdown || props.dropdownItems) && css(_t30 || (_t30 = _`
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      `)));
+const DropdownButtonContainer = styled.div.attrs(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');
+
+export { Button, ButtonContent, ButtonWrapper, DropdownButtonContainer, LoadingIndicator, LoadingIndicatorSvg, LoadingIndicatorSvgCircle, MainButtonContainer, MainButtonContainerSingle, MainButtonWrapper };

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

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

package/esm/components/inputs/Checkbox/Checkbox.js

@@ -0,0 +1,98 @@
+import React from '../../../node_modules/react/index.js';
+import { nanoid } from 'nanoid';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { isBoolean, isEmpty } from 'lodash';
+import { Checkbox as Checkbox$2, CheckboxLabel, IndeterminateCheckIcon, CheckIcon, CheckboxVisualLabel, Description } from './Checkbox.styled.js';
+import { r as react } from '../../../_virtual/index.js';
+
+const Checkbox = React.forwardRef(function Checkbox({
+  checked,
+  defaultChecked,
+  disabled,
+  readOnly,
+  name,
+  value,
+  description,
+  error,
+  indeterminate,
+  muted,
+  label,
+  onChange,
+  onBlur,
+  className,
+  style
+}, forwardedRef) {
+  const [uniqueId] = react.exports.useState(nanoid());
+  const hasError = react.exports.useMemo(() => {
+    if (isBoolean(error)) {
+      return error;
+    }
+    return !isEmpty(error);
+  }, [error]);
+  const descriptionText = react.exports.useMemo(() => {
+    if (!isEmpty(error)) {
+      return error;
+    }
+    if (!isEmpty(description)) {
+      return description;
+    }
+    return null;
+  }, [description, error]);
+  return React.createElement(Checkbox$2, {
+    className: className,
+    disabled: disabled,
+    readOnly: readOnly,
+    style: style
+  }, React.createElement(CheckboxLabel, {
+    disabled: disabled,
+    muted: muted,
+    readOnly: readOnly,
+    htmlFor: uniqueId
+  }, React.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
+  }), React.createElement(IndeterminateCheckIcon, null), React.createElement(CheckIcon, null, React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 10.9 8.45"
+  }, React.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') && React.createElement(CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && React.createElement(Description, {
+    error: hasError
+  }, descriptionText));
+});
+Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  description: PropTypes.string,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  indeterminate: PropTypes.bool,
+  muted: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  className: PropTypes.string,
+  style: PropTypes.object
+} : {};
+Checkbox.defaultProps = {
+  disabled: false,
+  readOnly: false,
+  indeterminate: false
+};
+var Checkbox$1 = Checkbox;
+
+export { Checkbox$1 as default };

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

@@ -0,0 +1,132 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9,
+  _t10;
+const checkboxSize = '18px';
+const Checkbox = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  display: flex;
+  flex-direction: column;
+`));
+const CheckIcon = styled.div.attrs(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.div.attrs(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.label.attrs(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 && css(_t5 || (_t5 = _`
+        opacity: 0.75;
+      `)), props => props.theme.getColor('emerald-500'), props => props.theme.getColor('emerald-500'), CheckIcon, IndeterminateCheckIcon, props => props.readOnly && css(_t6 || (_t6 = _`
+      opacity: 0.5;
+      cursor: default;
+      pointer-events: none;
+      user-select: text;
+    `)), props => props.disabled && css(_t7 || (_t7 = _`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `)));
+const CheckboxVisualLabel = styled.div.attrs(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.p.attrs(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 && css(_t10 || (_t10 = _`
+      content: 'error';
+      ${0}
+    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))));
+
+export { CheckIcon, Checkbox, CheckboxLabel, CheckboxVisualLabel, Description, IndeterminateCheckIcon };

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

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