@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.26

package/build/Switch-d2d6e9ec.js

@@ -0,0 +1,167 @@
+'use strict';
+
+var React = require('react');
+var nanoid = require('nanoid');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var polished = require('polished');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const switchButtonSize = '16px';
+const Switch$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  * {
+    box-sizing: border-box;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  ${props => props.readOnly && styled.css`
+      opacity: 0.5;
+      > * {
+        pointer-events: none;
+        user-select: text;
+      }
+    `}
+
+  ${props => props.disabled && styled.css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      * {
+        pointer-events: none;
+        user-select: text;
+      }
+    `}
+`;
+const SwitchIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: inline-block;
+  position: relative;
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200'))}
+  height: ${polished.math(`${switchButtonSize} + 2px`)};
+  width: 32px;
+  border-radius: 20px;
+  border: 1px solid;
+  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-300'))}
+  transition: background 200ms;
+`;
+const SwitchIndicatorButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-200'), props.theme.getColor('white'))}
+  height: ${switchButtonSize};
+  width: ${switchButtonSize};
+  border-radius: 50%;
+  box-shadow: ${props => props.theme.getColor('gray-500')} 0 0px 2px 0px;
+  transition: left 200ms;
+`;
+const SwitchIndicatorLabelText = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  padding-left: 10px;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 18px;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
+`;
+const SwitchLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)`
+  display: inline-flex;
+  margin-right: auto;
+  cursor: pointer;
+
+  input[type='checkbox'] {
+    position: absolute;
+    opacity: 0;
+  }
+
+  &:has(input[type='checkbox']:not(:checked)) {
+    ${SwitchIndicatorButton} {
+      left: 0;
+    }
+  }
+
+  &:has(input[type='checkbox']:checked) {
+    ${SwitchIndicatorButton} {
+      left: calc(100% - ${switchButtonSize});
+    }
+
+    ${SwitchIndicator} {
+      background: ${props => props.theme.getColor('emerald-500')};
+
+      ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-300'), 1)}
+    }
+  }
+
+  &:has(input[type='checkbox']:focus-visible) {
+    ${SwitchIndicatorButton} {
+      ${props => props.theme.themeProp('outline', `8px solid ${polished.rgba(props.theme.getColor('emerald-500'), 0.5)}`, `8px solid ${polished.rgba(props.theme.getColor('emerald-500'), 0.3)}`, 1)}
+    }
+  }
+`;
+const Description = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  margin: ${props => props.spaciousDescription ? '16px' : '6px'} 0 0 0;
+  font-size: 0.75rem;
+  line-height: 1.333;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
+`;
+
+const Switch = React__default["default"].forwardRef(function Switch({
+  name,
+  checked,
+  defaultChecked,
+  label,
+  disabled,
+  readOnly,
+  description,
+  spaciousDescription,
+  className,
+  style,
+  onChange,
+  onBlur
+}, forwardedRef) {
+  const [uniqueId] = React.useState(nanoid.nanoid());
+  return React__default["default"].createElement(Switch$1, {
+    disabled: disabled,
+    readOnly: readOnly,
+    className: className,
+    style: style
+  }, React__default["default"].createElement(SwitchLabel, {
+    htmlFor: uniqueId
+  }, React__default["default"].createElement("input", {
+    ref: forwardedRef,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    readOnly: readOnly,
+    id: uniqueId,
+    name: name,
+    type: "checkbox",
+    onBlur: onBlur,
+    onChange: onChange
+  }), React__default["default"].createElement(SwitchIndicator, null, React__default["default"].createElement(SwitchIndicatorButton, null)), typeof label === 'string' && label.length > 0 && React__default["default"].createElement(SwitchIndicatorLabelText, null, label)), typeof description === 'string' && description.length > 0 && React__default["default"].createElement(Description, {
+    spaciousDescription: spaciousDescription
+  }, description));
+});
+Switch.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: defaultTheme.PropTypes.any,
+  name: defaultTheme.PropTypes.string.isRequired,
+  checked: defaultTheme.PropTypes.bool,
+  defaultChecked: defaultTheme.PropTypes.bool,
+  label: defaultTheme.PropTypes.string,
+  disabled: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  description: defaultTheme.PropTypes.string,
+  spaciousDescription: defaultTheme.PropTypes.bool,
+  className: defaultTheme.PropTypes.string,
+  style: defaultTheme.PropTypes.object,
+  onChange: defaultTheme.PropTypes.func,
+  onBlur: defaultTheme.PropTypes.func
+} : {};
+Switch.defaultProps = {
+  disabled: false,
+  readOnly: false
+};
+
+exports.Switch = Switch;

package/build/Tab-ccbca1f2.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var React = require('react');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Tab$1 = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 500;
+  border-bottom: 1px solid;
+  min-height: 35px;
+`;
+
+const Tab = React__default["default"].forwardRef(function Tab({
+  children,
+  hidden,
+  ...props
+}, forwardedRef) {
+  if (hidden) return null;
+  return React__default["default"].createElement(Tab$1, _rollupPluginBabelHelpers._extends({
+    ref: forwardedRef
+  }, props), children);
+});
+Tab.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: defaultTheme.PropTypes.any,
+  hidden: defaultTheme.PropTypes.bool
+} : {};
+Tab.defaultProps = {
+  hidden: false
+};
+
+exports.Tab = Tab;

package/build/Tabs-b06c0e24.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var lodash = require('lodash');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var React = require('react');
+var Tab = require('./Tab-ccbca1f2.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Tabs$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: block;
+  position: relative;
+  ${props => props.backgroundColor && styled.css`
+      background-color: ${props.backgroundColor};
+    `};
+`;
+const TabHeaders = styled__default["default"].ul.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  gap: 24px;
+
+  margin: 0;
+  ${props => !props.customPadding && styled.css`
+      padding: 0;
+    `};
+  ${props => props.customPadding && styled.css`
+      padding: 0 ${props.customPadding};
+    `};
+`;
+const TabHeader = styled__default["default"].li.attrs(defaultTheme.applyDefaultTheme)`
+  font-family: ${props => props.theme.secondaryFontFamily};
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 0.875rem;
+  display: flex;
+  padding-bottom: 8px;
+  letter-spacing: 0.6px;
+  cursor: pointer;
+  border-bottom: 1px solid;
+  border-color: transparent;
+  margin-bottom: 1px;
+
+  ${props => props.active && styled.css`
+      ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'))}
+    `};
+  &&:hover:not(:focus) {
+    ${props => props.theme.themeProp('border-color', () => {
+  if (props.active) {
+    return props.theme.getColor('gray-400');
+  } else {
+    return props.theme.getColor('gray-400');
+  }
+}, () => {
+  if (props.active) {
+    return props.theme.getColor('gray-700');
+  } else {
+    return props.theme.getColor('gray-700');
+  }
+})};
+  }
+`;
+const TabContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: block;
+`;
+const TabHeaderBorder = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  border-top: 1px solid;
+
+  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5')};
+  ${props => !props.customPadding && styled.css`
+      margin: -2px 0;
+    `};
+  ${props => props.customPadding && styled.css`
+      margin: -2px ${props.customPadding};
+    `};
+`;
+
+const Tabs = React__default["default"].forwardRef(function Tabs({
+  children,
+  defaultMinHeight = '',
+  customPadding = 0,
+  onTabClick = () => {},
+  ...props
+}, forwardedRef) {
+  const [activeTab, setActiveTab] = React.useState(0);
+  const contentRef = React.useRef(null);
+  const tabs = React.useMemo(() => {
+    const tabs = [];
+    function extractChildren(children) {
+      React.Children.forEach(children, (child, index) => {
+        if (lodash.isNil(child)) {
+          return null;
+        }
+        if (child.type === React.Fragment) {
+          extractChildren(child.props?.children);
+        }
+        if (child.props?.hidden) {
+          return null;
+        }
+        if (child.type === Tab.Tab) {
+          tabs.push({
+            key: index,
+            trigger: child.props?.trigger,
+            content: child.props?.children
+          });
+        }
+      });
+    }
+    extractChildren(children);
+    if (!tabs.some(tab => tab?.key === activeTab)) {
+      setActiveTab(tabs[0]?.key);
+    }
+    return tabs;
+  }, [children]);
+  const handleTabClick = tab => {
+    setActiveTab(tab.key);
+    let triggerText = '';
+    if (tab.trigger && tab.trigger.props && tab.trigger.props.children) {
+      triggerText = tab.trigger.props.children;
+    }
+    if (onTabClick) {
+      onTabClick({
+        ...tab,
+        triggerText: triggerText
+      });
+    }
+  };
+  return React__default["default"].createElement(Tabs$1, _rollupPluginBabelHelpers._extends({
+    ref: forwardedRef
+  }, props, {
+    role: "tablist"
+  }), React__default["default"].createElement(TabHeaders, {
+    customPadding: customPadding
+  }, tabs.map(tab => React__default["default"].createElement(TabHeader, {
+    key: tab.key,
+    hidden: tab.hidden,
+    active: tab.key === activeTab,
+    onClick: () => handleTabClick(tab),
+    role: "tab"
+  }, tab.trigger))), React__default["default"].createElement(TabHeaderBorder, {
+    customPadding: customPadding
+  }), React__default["default"].createElement(TabContent, null, tabs.map(tab => React__default["default"].createElement("div", {
+    ref: tab.key === activeTab?.key ? contentRef : null,
+    key: tab.key,
+    role: "tabpanel",
+    hidden: tab.key !== activeTab,
+    style: {
+      minHeight: !lodash.isEmpty(defaultMinHeight) ? defaultMinHeight : ''
+    }
+  }, tab.content))));
+});
+Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.array, defaultTheme.PropTypes.object]),
+  backgroundColor: defaultTheme.PropTypes.string,
+  defaultMinHeight: defaultTheme.PropTypes.string,
+  customPadding: defaultTheme.PropTypes.string,
+  onTabClick: defaultTheme.PropTypes.func
+} : {};
+
+exports.Tabs = Tabs;