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

package/build/Radio-73ca3ae2.js

@@ -0,0 +1,134 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import React__default, { useState } from 'react';
+import { nanoid } from 'nanoid';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import { math } from 'polished';
+import styled, { css } from 'styled-components';
+
+const radioSize = '18px';
+const RadioLabel = styled.div.attrs(applyDefaultTheme)`
+  padding-left: ${math(`${radioSize} + 10px`)};
+  font-weight: 400;
+  font-size: 0.875rem;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
+`;
+const Radio$1 = styled.label.attrs(applyDefaultTheme)`
+  display: block;
+  position: relative;
+  cursor: pointer;
+  line-height: ${radioSize};
+  user-select: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    border: 2px solid ${props => props.theme.getColor('gray-300')};
+    width: ${radioSize};
+    height: ${radioSize};
+    top: 0;
+    border-radius: 50%;
+    transition: all 200ms;
+    box-sizing: border-box;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    top: 5px;
+    left: 5px;
+    border-radius: 50%;
+    transform: scale(0);
+    transition: all 200ms;
+  }
+
+  &:has(input:checked) {
+    ::before {
+      border-color: ${props => props.theme.getColor('emerald-500')};
+    }
+
+    ::after {
+      background: ${props => props.theme.getColor('emerald-500')};
+      transform: scale(1);
+    }
+
+    ${RadioLabel} {
+      opacity: 1;
+    }
+  }
+  & {
+    input[type='radio'] {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  ${props => props.readOnly && css`
+      opacity: 0.5;
+      pointer-events: none;
+      user-select: text;
+    `}
+
+  ${props => props.disabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      user-select: text;
+    `}
+`;
+
+const Radio = React__default.forwardRef(function Radio({
+  name,
+  value,
+  checked,
+  defaultChecked,
+  disabled,
+  readOnly,
+  label,
+  className,
+  style,
+  onChange,
+  onBlur,
+  ...rest
+}, forwardedRef) {
+  const [uniqueId] = useState(nanoid());
+  return React__default.createElement(Radio$1, {
+    htmlFor: uniqueId,
+    disabled: disabled,
+    readOnly: readOnly,
+    className: className,
+    style: style
+  }, React__default.createElement("input", _extends({
+    ref: forwardedRef,
+    type: "radio",
+    name: name,
+    value: value,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    readOnly: readOnly,
+    id: uniqueId,
+    onChange: onChange,
+    onBlur: onBlur
+  }, rest)), React__default.createElement(RadioLabel, null, label));
+});
+Radio.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: PropTypes.any,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func
+} : {};
+Radio.defaultProps = {
+  disabled: false
+};
+
+export { Radio as R };

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-ecf3122b.js

@@ -0,0 +1,160 @@
+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.div.attrs(applyDefaultTheme)`
+  * {
+    box-sizing: border-box;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  ${props => props.readOnly && css`
+      opacity: 0.5;
+      > * {
+        pointer-events: none;
+        user-select: text;
+      }
+    `}
+
+  ${props => props.disabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      * {
+        pointer-events: none;
+        user-select: text;
+      }
+    `}
+`;
+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: ${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.div.attrs(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.div.attrs(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.label.attrs(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 ${rgba(props.theme.getColor('emerald-500'), 0.5)}`, `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.3)}`, 1)}
+    }
+  }
+`;
+const Description = styled.div.attrs(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.forwardRef(function Switch({
+  name,
+  checked,
+  defaultChecked,
+  label,
+  disabled,
+  readOnly,
+  description,
+  spaciousDescription,
+  className,
+  style,
+  onChange,
+  onBlur
+}, forwardedRef) {
+  const [uniqueId] = useState(nanoid());
+  return React__default.createElement(Switch$1, {
+    disabled: disabled,
+    readOnly: readOnly,
+    className: className,
+    style: style
+  }, React__default.createElement(SwitchLabel, {
+    htmlFor: uniqueId
+  }, React__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.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: 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
+};
+
+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-74d1ea8a.js

@@ -0,0 +1,159 @@
+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';
+
+const Tabs$1 = styled.div.attrs(applyDefaultTheme)`
+  display: block;
+  position: relative;
+  ${props => props.backgroundColor && css`
+      background-color: ${props.backgroundColor};
+    `};
+`;
+const TabHeaders = styled.ul.attrs(applyDefaultTheme)`
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  gap: 24px;
+
+  margin: 0;
+  ${props => !props.customPadding && css`
+      padding: 0;
+    `};
+  ${props => props.customPadding && css`
+      padding: 0 ${props.customPadding};
+    `};
+`;
+const TabHeader = styled.li.attrs(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 && 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.div.attrs(applyDefaultTheme)`
+  display: block;
+`;
+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 && css`
+      margin: -2px 0;
+    `};
+  ${props => props.customPadding && css`
+      margin: -2px ${props.customPadding};
+    `};
+`;
+
+const Tabs = React__default.forwardRef(function Tabs({
+  children,
+  defaultMinHeight = '',
+  customPadding = 0,
+  onTabClick = () => {},
+  ...props
+}, forwardedRef) {
+  const [activeTab, setActiveTab] = useState(0);
+  const contentRef = useRef(null);
+  const tabs = useMemo(() => {
+    const tabs = [];
+    function extractChildren(children) {
+      Children.forEach(children, (child, index) => {
+        if (isNil(child)) {
+          return null;
+        }
+        if (child.type === Fragment) {
+          extractChildren(child.props?.children);
+        }
+        if (child.props?.hidden) {
+          return null;
+        }
+        if (child.type === 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.createElement(Tabs$1, _extends({
+    ref: forwardedRef
+  }, props, {
+    role: "tablist"
+  }), React__default.createElement(TabHeaders, {
+    customPadding: customPadding
+  }, 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.createElement(TabHeaderBorder, {
+    customPadding: customPadding
+  }), 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: !isEmpty(defaultMinHeight) ? defaultMinHeight : ''
+    }
+  }, tab.content))));
+});
+Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  backgroundColor: PropTypes.string,
+  defaultMinHeight: PropTypes.string,
+  customPadding: PropTypes.string,
+  onTabClick: PropTypes.func
+} : {};
+
+export { Tabs as T };