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

package/build/SectionSeparator-f47760a2.js

@@ -0,0 +1,31 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import React__default from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import styled from 'styled-components';
+
+const SectionSeparator$1 = styled.div.attrs(applyDefaultTheme)`
+  height: ${props => props.vertical ? '100%' : '1px'};
+  width: ${props => props.vertical ? '1px' : '100%'};
+
+  ${props => props.vertical ? `margin-left: ${props.margin}px; margin-right: ${props.margin}px;` : `margin-top: ${props.margin}px; margin-bottom: ${props.margin}px;`}
+
+  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+`;
+
+const SectionSeparator = React__default.forwardRef(function SectionSeparator({
+  vertical = false,
+  margin = 0,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(SectionSeparator$1, _extends({
+    vertical: vertical,
+    margin: margin,
+    ref: forwardedRef
+  }, props));
+});
+SectionSeparator.propTypes = process.env.NODE_ENV !== "production" ? {
+  vertical: PropTypes.bool,
+  margin: PropTypes.number
+} : {};
+
+export { SectionSeparator as S };

package/build/{Switch-d2d6e9ec.js → Switch-ecf3122b.js}

@@ -1,18 +1,11 @@
-'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);
+import React__default, { useState } from 'react';
+import { nanoid } from 'nanoid';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import { math, rgba } from 'polished';
+import styled, { css } from 'styled-components';
 
 const switchButtonSize = '16px';
-const Switch$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Switch$1 = styled.div.attrs(applyDefaultTheme)`
   * {
     box-sizing: border-box;
   }
@@ -20,7 +13,7 @@ const Switch$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultT
   display: flex;
   flex-direction: column;
 
-  ${props => props.readOnly && styled.css`
+  ${props => props.readOnly && css`
       opacity: 0.5;
       > * {
         pointer-events: none;
@@ -28,7 +21,7 @@ const Switch$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultT
       }
     `}
 
-  ${props => props.disabled && styled.css`
+  ${props => props.disabled && css`
       opacity: 0.5;
       cursor: not-allowed;
       * {
@@ -37,18 +30,18 @@ const Switch$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultT
       }
     `}
 `;
-const SwitchIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const SwitchIndicator = styled.div.attrs(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`)};
+  height: ${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)`
+const SwitchIndicatorButton = styled.div.attrs(applyDefaultTheme)`
   position: absolute;
   ${props => props.theme.themeProp('background', props.theme.getColor('gray-200'), props.theme.getColor('white'))}
   height: ${switchButtonSize};
@@ -57,7 +50,7 @@ const SwitchIndicatorButton = styled__default["default"].div.attrs(defaultTheme.
   box-shadow: ${props => props.theme.getColor('gray-500')} 0 0px 2px 0px;
   transition: left 200ms;
 `;
-const SwitchIndicatorLabelText = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const SwitchIndicatorLabelText = styled.div.attrs(applyDefaultTheme)`
   padding-left: 10px;
   font-weight: 400;
   font-size: 0.875rem;
@@ -65,7 +58,7 @@ const SwitchIndicatorLabelText = styled__default["default"].div.attrs(defaultThe
 
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
 `;
-const SwitchLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)`
+const SwitchLabel = styled.label.attrs(applyDefaultTheme)`
   display: inline-flex;
   margin-right: auto;
   cursor: pointer;
@@ -95,11 +88,11 @@ const SwitchLabel = styled__default["default"].label.attrs(defaultTheme.applyDef
 
   &: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)}
+      ${props => props.theme.themeProp('outline', `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.5)}`, `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.3)}`, 1)}
     }
   }
 `;
-const Description = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Description = styled.div.attrs(applyDefaultTheme)`
   margin: ${props => props.spaciousDescription ? '16px' : '6px'} 0 0 0;
   font-size: 0.75rem;
   line-height: 1.333;
@@ -107,7 +100,7 @@ const Description = styled__default["default"].div.attrs(defaultTheme.applyDefau
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
 `;
 
-const Switch = React__default["default"].forwardRef(function Switch({
+const Switch = React__default.forwardRef(function Switch({
   name,
   checked,
   defaultChecked,
@@ -121,15 +114,15 @@ const Switch = React__default["default"].forwardRef(function Switch({
   onChange,
   onBlur
 }, forwardedRef) {
-  const [uniqueId] = React.useState(nanoid.nanoid());
-  return React__default["default"].createElement(Switch$1, {
+  const [uniqueId] = useState(nanoid());
+  return React__default.createElement(Switch$1, {
     disabled: disabled,
     readOnly: readOnly,
     className: className,
     style: style
-  }, React__default["default"].createElement(SwitchLabel, {
+  }, React__default.createElement(SwitchLabel, {
     htmlFor: uniqueId
-  }, React__default["default"].createElement("input", {
+  }, React__default.createElement("input", {
     ref: forwardedRef,
     checked: checked,
     defaultChecked: defaultChecked,
@@ -140,28 +133,28 @@ const Switch = React__default["default"].forwardRef(function Switch({
     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, {
+  }), React__default.createElement(SwitchIndicator, null, React__default.createElement(SwitchIndicatorButton, null)), typeof label === 'string' && label.length > 0 && React__default.createElement(SwitchIndicatorLabelText, null, label)), typeof description === 'string' && description.length > 0 && React__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
+  children: PropTypes.any,
+  name: PropTypes.string.isRequired,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  label: PropTypes.string,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  description: PropTypes.string,
+  spaciousDescription: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func
 } : {};
 Switch.defaultProps = {
   disabled: false,
   readOnly: false
 };
 
-exports.Switch = Switch;
+export { Switch as S };

package/build/Tab-04d435c3.js

@@ -0,0 +1,32 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import React__default from 'react';
+import styled from 'styled-components';
+
+const Tab$1 = styled.p.attrs(applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 500;
+  border-bottom: 1px solid;
+  min-height: 35px;
+`;
+
+const Tab = React__default.forwardRef(function Tab({
+  children,
+  hidden,
+  ...props
+}, forwardedRef) {
+  if (hidden) return null;
+  return React__default.createElement(Tab$1, _extends({
+    ref: forwardedRef
+  }, props), children);
+});
+Tab.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.any,
+  hidden: PropTypes.bool
+} : {};
+Tab.defaultProps = {
+  hidden: false
+};
+
+export { Tab as T };

package/build/{Tabs-b06c0e24.js → Tabs-74d1ea8a.js}

@@ -1,25 +1,18 @@
-'use strict';
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import { isEmpty, isNil } from 'lodash';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import React__default, { useState, useRef, useMemo, Children, Fragment } from 'react';
+import { T as Tab } from './Tab-04d435c3.js';
+import styled, { css } from 'styled-components';
 
-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)`
+const Tabs$1 = styled.div.attrs(applyDefaultTheme)`
   display: block;
   position: relative;
-  ${props => props.backgroundColor && styled.css`
+  ${props => props.backgroundColor && css`
       background-color: ${props.backgroundColor};
     `};
 `;
-const TabHeaders = styled__default["default"].ul.attrs(defaultTheme.applyDefaultTheme)`
+const TabHeaders = styled.ul.attrs(applyDefaultTheme)`
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
@@ -27,14 +20,14 @@ const TabHeaders = styled__default["default"].ul.attrs(defaultTheme.applyDefault
   gap: 24px;
 
   margin: 0;
-  ${props => !props.customPadding && styled.css`
+  ${props => !props.customPadding && css`
       padding: 0;
     `};
-  ${props => props.customPadding && styled.css`
+  ${props => props.customPadding && css`
       padding: 0 ${props.customPadding};
     `};
 `;
-const TabHeader = styled__default["default"].li.attrs(defaultTheme.applyDefaultTheme)`
+const TabHeader = styled.li.attrs(applyDefaultTheme)`
   font-family: ${props => props.theme.secondaryFontFamily};
   text-transform: uppercase;
   font-weight: 600;
@@ -47,7 +40,7 @@ const TabHeader = styled__default["default"].li.attrs(defaultTheme.applyDefaultT
   border-color: transparent;
   margin-bottom: 1px;
 
-  ${props => props.active && styled.css`
+  ${props => props.active && css`
       ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'))}
     `};
   &&:hover:not(:focus) {
@@ -66,44 +59,44 @@ const TabHeader = styled__default["default"].li.attrs(defaultTheme.applyDefaultT
 })};
   }
 `;
-const TabContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const TabContent = styled.div.attrs(applyDefaultTheme)`
   display: block;
 `;
-const TabHeaderBorder = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const TabHeaderBorder = styled.div.attrs(applyDefaultTheme)`
   border-top: 1px solid;
 
   ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5')};
-  ${props => !props.customPadding && styled.css`
+  ${props => !props.customPadding && css`
       margin: -2px 0;
     `};
-  ${props => props.customPadding && styled.css`
+  ${props => props.customPadding && css`
       margin: -2px ${props.customPadding};
     `};
 `;
 
-const Tabs = React__default["default"].forwardRef(function Tabs({
+const Tabs = React__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 [activeTab, setActiveTab] = useState(0);
+  const contentRef = useRef(null);
+  const tabs = useMemo(() => {
     const tabs = [];
     function extractChildren(children) {
-      React.Children.forEach(children, (child, index) => {
-        if (lodash.isNil(child)) {
+      Children.forEach(children, (child, index) => {
+        if (isNil(child)) {
           return null;
         }
-        if (child.type === React.Fragment) {
+        if (child.type === Fragment) {
           extractChildren(child.props?.children);
         }
         if (child.props?.hidden) {
           return null;
         }
-        if (child.type === Tab.Tab) {
+        if (child.type === Tab) {
           tabs.push({
             key: index,
             trigger: child.props?.trigger,
@@ -131,36 +124,36 @@ const Tabs = React__default["default"].forwardRef(function Tabs({
       });
     }
   };
-  return React__default["default"].createElement(Tabs$1, _rollupPluginBabelHelpers._extends({
+  return React__default.createElement(Tabs$1, _extends({
     ref: forwardedRef
   }, props, {
     role: "tablist"
-  }), React__default["default"].createElement(TabHeaders, {
+  }), React__default.createElement(TabHeaders, {
     customPadding: customPadding
-  }, tabs.map(tab => React__default["default"].createElement(TabHeader, {
+  }, tabs.map(tab => React__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, {
+  }, tab.trigger))), React__default.createElement(TabHeaderBorder, {
     customPadding: customPadding
-  }), React__default["default"].createElement(TabContent, null, tabs.map(tab => React__default["default"].createElement("div", {
+  }), React__default.createElement(TabContent, null, tabs.map(tab => React__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 : ''
+      minHeight: !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
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  backgroundColor: PropTypes.string,
+  defaultMinHeight: PropTypes.string,
+  customPadding: PropTypes.string,
+  onTabClick: PropTypes.func
 } : {};
 
-exports.Tabs = Tabs;
+export { Tabs as T };