@majoo-ui/react 2.0.0 → 2.1.0-rc.0

package/components/form/components/InputOTP/InputOTP.esm.js

@@ -0,0 +1,70 @@
+import { jsx } from 'react/jsx-runtime';
+import OTPInput, { ResendOTP as ResendOTP$1 } from 'otp-input-react';
+import Paragraph from '../../../paragraph/Paragraph.esm.js';
+import { useTranslation } from 'react-i18next';
+import { foundations } from '@majoo-ui/core';
+
+const {
+  colors
+} = foundations;
+function InputOTP(props) {
+  const {
+    isError
+  } = props;
+  const inputStyles = {
+    width: 48,
+    height: 48,
+    border: `1px solid ${isError ? colors.textRed : colors.gray300}`,
+    borderRadius: 4,
+    fontWeight: 600,
+    fontSize: 24,
+    textAlign: 'center',
+    color: colors.textPrimary
+  };
+  return jsx(OTPInput, Object.assign({
+    inputStyles: inputStyles
+  }, props));
+}
+InputOTP.defaultProps = {
+  OTPLength: 4,
+  value: '',
+  disabled: false,
+  autoFocus: false,
+  otpType: 'any',
+  secure: false
+};
+function ResendOTP(props) {
+  const {
+    t
+  } = useTranslation(['MajooUI/inputOtp', 'translation']);
+  function renderButton() {
+    return;
+  }
+  function renderTime(time) {
+    function handleClick() {
+      var _a;
+      if (time < 1) {
+        (_a = props === null || props === void 0 ? void 0 : props.onResendClick) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }
+    return jsx(Paragraph, {
+      color: "brand",
+      css: {
+        cursor: time > 0 ? 'not-allowed' : 'pointer',
+        userSelect: 'none'
+      },
+      onClick: handleClick,
+      children: `${t('resendingText', 'Kirim Ulang')} ${time > 0 ? `(${time}s)` : ''}`
+    });
+  }
+  return jsx(ResendOTP$1, Object.assign({
+    renderButton: renderButton,
+    renderTime: renderTime
+  }, props));
+}
+ResendOTP.defaultProps = {
+  maxTime: 60,
+  timeInterval: 1000
+};
+
+export { ResendOTP, InputOTP as default };

package/components/form/components/InputRadio/InputRadio.esm.js

@@ -0,0 +1,273 @@
+import 'react';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import FormLabel from '../FormLabel/Label.esm.js';
+import PropTypes from 'prop-types';
+import { InputRadioContext } from './context.esm.js';
+import { InputNumber } from '../InputNumber/InputNumber.esm.js';
+import { InputText } from '../InputText/InputText.esm.js';
+import Text from '../../../text/Text.esm.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const INDICATOR_BASE_STYLES = {
+  alignItems: 'center',
+  display: 'flex',
+  height: '100%',
+  justifyContent: 'center',
+  width: '100%',
+  position: 'relative',
+  '&::after': {
+    content: '""',
+    display: 'block',
+    minWidth: '8px',
+    minHeight: '8px',
+    width: '8px',
+    height: '8px',
+    borderRadius: '$round',
+    backgroundColor: '$primary500'
+  }
+};
+const StyledIndicator = styled(RadioGroupPrimitive.Indicator, INDICATOR_BASE_STYLES);
+const RADIO_BASE_STYLES = {
+  all: 'unset',
+  userSelect: 'none',
+  alignItems: 'center',
+  appearance: 'none',
+  display: 'inline-flex',
+  justifyContent: 'center',
+  lineHeight: '1',
+  margin: '0',
+  outline: 'none',
+  padding: '0',
+  textDecoration: 'none',
+  WWebkitTapHighlightColor: 'rgba(0,0,0,0)',
+  borderRadius: '$round',
+  border: '2px solid $bgOutline',
+  overflow: 'hidden',
+  '&[data-state=checked]': {
+    border: '2px solid $primary500'
+  }
+};
+const StyledRadio = styled(RadioGroupPrimitive.Item, RADIO_BASE_STYLES, {
+  minWidth: '12px',
+  minHeight: '12px',
+  width: '12px',
+  height: '12px',
+  '&:hover': {
+    cursor: 'pointer',
+    // boxShadow: 'inset 0 0 0 2px $colors$primary600',
+    border: '2px solid $primary600',
+    [`& ${StyledIndicator}`]: {
+      '&::after': {
+        backgroundColor: '$primary600'
+      }
+    }
+  },
+  '&:focus': {
+    outline: '2px solid #82C4E0',
+    outlineOffset: '1px'
+  },
+  '&:disabled': {
+    pointerEvents: 'none',
+    border: '2px solid $gray200',
+    '&::placeholder': {
+      color: '$textDisable'
+    },
+    [`& ${StyledIndicator}`]: {
+      '&::after': {
+        backgroundColor: '$gray200'
+      }
+    }
+  },
+  variants: {
+    readOnly: {
+      true: {
+        '&[data-state=checked]': {
+          border: '2px solid $primary500 !important'
+        },
+        [`& ${StyledIndicator}`]: {
+          '&::after': {
+            backgroundColor: '$primary500 !important'
+          }
+        }
+      }
+    }
+  }
+});
+const Container = styled(Flex, {
+  variants: {
+    outlined: {
+      true: {
+        border: '1px solid $bgOutline',
+        borderRadius: '$lg',
+        padding: '$spacing-03',
+        '& > input': {
+          border: 'none !important',
+          padding: '0px !important',
+          height: '24px !important',
+          '&:disabled': {
+            backgroundColor: '$transparent !important'
+          }
+        }
+      }
+    },
+    disabledOutlined: {
+      true: {
+        backgroundColor: '$gray150 !important'
+      }
+    },
+    active: {
+      true: {
+        border: '1px solid $primary400 !important'
+      },
+      false: {
+        '& > input': {
+          color: '$textPrimary !important'
+        }
+      }
+    },
+    disabled: {
+      true: {
+        '& > input': {
+          color: '$textSecondary !important'
+        }
+      }
+    },
+    withInputProps: {
+      true: {
+        padding: '0 $spacing-03'
+      }
+    },
+    block: {
+      true: {
+        flex: 1
+      }
+    }
+  },
+  compoundVariants: [{
+    outlined: true,
+    withInputProps: true,
+    css: {
+      padding: '0 $spacing-03'
+    }
+  }]
+});
+const ContainerLabel = styled('label', {
+  width: 'fit-content',
+  cursor: 'pointer',
+  variants: {
+    outlined: {
+      true: {
+        display: 'contents'
+      }
+    }
+  }
+});
+const InputRadio = ({
+  id,
+  disabled,
+  css,
+  inputType,
+  inputProps,
+  description,
+  readOnly,
+  ...props
+}) => {
+  function renderInputType(type, checkedValue, onValueChange) {
+    switch (type) {
+      case 'number':
+        return /*#__PURE__*/jsx(InputNumber, {
+          ...inputProps,
+          readOnly: readOnly,
+          onFocus: () => {
+            onValueChange(props.value);
+            inputProps?.onFocus?.();
+          },
+          asChild: true
+        });
+      case 'text':
+        return /*#__PURE__*/jsx(InputText, {
+          ...inputProps,
+          disabled: disabled,
+          readOnly: readOnly,
+          onFocus: () => {
+            onValueChange(props.value);
+            inputProps?.onFocus?.();
+          },
+          asChild: true
+        });
+      default:
+        return /*#__PURE__*/jsx(FormLabel, {
+          htmlFor: id,
+          mb: 0,
+          labelCss: {
+            fontSize: '$long-content-regular',
+            lineHeight: '$long-content-regular',
+            letterSpacing: '$long-content-regular',
+            fontWeight: '400',
+            cursor: 'pointer',
+            color: disabled || readOnly && checkedValue !== props.value ? '$textDisable' : '$textPrimary'
+          },
+          children: props.label
+        });
+    }
+  }
+  return /*#__PURE__*/jsx(InputRadioContext.Consumer, {
+    children: ({
+      defaultValue,
+      value,
+      outlined,
+      onValueChange,
+      block
+    }) => {
+      const checkedValue = value ?? defaultValue;
+      return /*#__PURE__*/jsx(ContainerLabel, {
+        htmlFor: id,
+        outlined: outlined,
+        children: /*#__PURE__*/jsxs(Container, {
+          direction: "column",
+          outlined: outlined,
+          disabledOutlined: outlined && (readOnly || disabled),
+          disabled: disabled,
+          active: outlined && checkedValue === props.value && !disabled && !readOnly,
+          withInputProps: !!inputProps,
+          block: block,
+          css: css,
+          children: [/*#__PURE__*/jsxs(Flex, {
+            align: "center",
+            gap: 4,
+            children: [/*#__PURE__*/jsx(StyledRadio, {
+              id: id,
+              disabled: disabled || readOnly,
+              readOnly: readOnly,
+              ...props,
+              children: /*#__PURE__*/jsx(StyledIndicator, {})
+            }), renderInputType(inputType, checkedValue, onValueChange)]
+          }), description && /*#__PURE__*/jsx(Text, {
+            variant: "caption",
+            color: "secondary",
+            css: {
+              marginLeft: '29px'
+            },
+            children: description
+          })]
+        })
+      });
+    }
+  });
+};
+InputRadio.propTypes = {
+  id: PropTypes.string,
+  disabled: PropTypes.bool,
+  value: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  css: PropTypes.object,
+  inputType: PropTypes.oneOf(['number', 'text', 'default']),
+  onChange: PropTypes.func,
+  description: PropTypes.string,
+  readOnly: PropTypes.bool
+};
+InputRadio.displayName = 'InputRadio';
+
+export { INDICATOR_BASE_STYLES, InputRadio, RADIO_BASE_STYLES, InputRadio as default };

package/components/form/components/InputRadio/InputRadioGroup.esm.js

@@ -0,0 +1,35 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import React__default from 'react';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import PropTypes from 'prop-types';
+import { InputRadioContext } from './context.esm.js';
+import { jsx } from 'react/jsx-runtime';
+
+const RadioGroup = styled(RadioGroupPrimitive.Root, Flex);
+function InputRadioGroup(props) {
+  return props?.children && /*#__PURE__*/jsx(InputRadioContext.Provider, {
+    value: props,
+    children: /*#__PURE__*/jsx(RadioGroup, {
+      ...props,
+      children: React__default.Children.map(props?.children, child => /*#__PURE__*/React__default.cloneElement(child, {
+        style: {
+          ...child.props.style,
+          opacity: 1
+        }
+      }))
+    })
+  });
+}
+InputRadioGroup.propTypes = {
+  defaultValue: PropTypes.string,
+  value: PropTypes.string,
+  onValueChange: PropTypes.func,
+  outlined: PropTypes.bool,
+  block: PropTypes.bool
+};
+InputRadioGroup.displayName = 'InputRadioGroup';
+
+export { InputRadioGroup, InputRadioGroup as default };

package/components/form/components/InputRadio/context.esm.js

@@ -0,0 +1,5 @@
+import React__default from 'react';
+
+const InputRadioContext = /*#__PURE__*/React__default.createContext();
+
+export { InputRadioContext };