@ohos-ports/s-ui-react-atom-input 5.51.0-beta.0

package/lib/Input/Wrappers/Icons/InputIcons.js

@@ -0,0 +1,34 @@
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { BASE_CLASS_ICON, BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_HANDLER, BASE_CLASS_ICON_COMPONENT_LEFT, BASE_CLASS_ICON_COMPONENT_RIGHT, BASE_CLASS_ICON_LEFT, BASE_CLASS_ICON_RIGHT } from './config.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var InputIcons = function InputIcons(_ref) {
+  var _cx, _cx2, _cx3;
+  var leftIcon = _ref.leftIcon,
+    rightIcon = _ref.rightIcon,
+    onClickLeftIcon = _ref.onClickLeftIcon,
+    onClickRightIcon = _ref.onClickRightIcon,
+    children = _ref.children;
+  if (!(leftIcon || rightIcon)) {
+    return children;
+  }
+  var handleLeftClick = function handleLeftClick(event) {
+    onClickLeftIcon && onClickLeftIcon(event);
+  };
+  var handleRightClick = function handleRightClick(event) {
+    onClickRightIcon && onClickRightIcon(event);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(BASE_CLASS_ICON, (_cx = {}, _cx[BASE_CLASS_ICON_LEFT] = leftIcon, _cx[BASE_CLASS_ICON_RIGHT] = rightIcon, _cx)),
+    children: [leftIcon && /*#__PURE__*/_jsx("span", {
+      className: cx(BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_LEFT, (_cx2 = {}, _cx2[BASE_CLASS_ICON_COMPONENT_HANDLER] = onClickLeftIcon, _cx2)),
+      onClick: handleLeftClick,
+      children: leftIcon
+    }), children, rightIcon && /*#__PURE__*/_jsx("span", {
+      className: cx(BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_RIGHT, (_cx3 = {}, _cx3[BASE_CLASS_ICON_COMPONENT_HANDLER] = onClickRightIcon, _cx3)),
+      onClick: handleRightClick,
+      children: rightIcon
+    })]
+  });
+};
+export default InputIcons;

package/lib/Input/Wrappers/Icons/config.js

@@ -0,0 +1,12 @@
+import { BASE } from '../../../config.js';
+export var ICON_TYPES = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+export var BASE_CLASS_ICON = BASE + "--withIcon";
+export var BASE_CLASS_ICON_LEFT = BASE_CLASS_ICON + "--" + ICON_TYPES.LEFT;
+export var BASE_CLASS_ICON_RIGHT = BASE_CLASS_ICON + "--" + ICON_TYPES.RIGHT;
+export var BASE_CLASS_ICON_COMPONENT = BASE_CLASS_ICON + "-icon";
+export var BASE_CLASS_ICON_COMPONENT_HANDLER = BASE_CLASS_ICON_COMPONENT + "--withHandler";
+export var BASE_CLASS_ICON_COMPONENT_LEFT = BASE_CLASS_ICON_COMPONENT + "--" + ICON_TYPES.LEFT;
+export var BASE_CLASS_ICON_COMPONENT_RIGHT = BASE_CLASS_ICON_COMPONENT + "--" + ICON_TYPES.RIGHT;

package/lib/Input/Wrappers/Icons/index.scss

@@ -0,0 +1,44 @@
+#{$base-class}--withIcon {
+  position: relative;
+  width: 100%;
+
+  &--left #{$base-class-input} {
+    padding-left: $pl-atom-input-input;
+  }
+
+  &--right #{$base-class-input} {
+    padding-right: $pr-atom-input-input;
+  }
+
+  &-icon {
+    align-items: center;
+    color: $c-atom-input-icon;
+    display: flex;
+    fill: $c-atom-input-icon;
+    height: $w-atom-input-icon;
+    justify-content: center;
+    position: absolute;
+    top: $t-atom-input-icon;
+    transform: translateY($trf-ty-atom-input-icon);
+    width: $w-atom-input-icon;
+    pointer-events: none;
+
+    &--withHandler {
+      cursor: pointer;
+      pointer-events: auto;
+    }
+
+    &--left {
+      left: $l-atom-input-icon;
+    }
+
+    &--right {
+      right: $r-atom-input-icon;
+    }
+
+    & > * {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}

package/lib/Input/Wrappers/Icons/settings.scss

@@ -0,0 +1,10 @@
+$l-atom-input-icon: $gutter !default;
+$r-atom-input-icon: $gutter !default;
+$w-atom-input-icon: $sz-icon-m !default;
+$h-atom-input-icon: $sz-icon-m !default;
+$t-atom-input-icon: 50% !default;
+$trf-ty-atom-input-icon: -50% !default;
+$pl-atom-input-icon: 50px !default;
+$pl-atom-input-input: $w-atom-input-icon + $l-atom-input-icon + $p-s !default;
+$pr-atom-input-input: $w-atom-input-icon + $r-atom-input-icon + $p-s !default;
+$c-atom-input-icon: $c-primary !default;

package/lib/Input/Wrappers/index.scss

@@ -0,0 +1,3 @@
+@import './Addons/index';
+@import './Icons/index';
+@import './Button/index';

package/lib/Input/Wrappers/settings.scss

@@ -0,0 +1,2 @@
+@import './Addons/settings';
+@import './Icons/settings';

package/lib/Input/index.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["button", "leftAddon", "rightAddon", "leftIcon", "rightIcon", "children", "onClickLeftIcon", "onClickRightIcon", "size", "shape"];
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { INPUT_SHAPES, SIZES } from '../config.js';
+import Input, { inputSizes, inputStates } from './Component/index.js';
+import InputAddons from './Wrappers/Addons/InputAddons.js';
+import InputButton from './Wrappers/Button/InputButton.js';
+import InputIcons from './Wrappers/Icons/InputIcons.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+var BaseInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var button = _ref.button,
+    leftAddon = _ref.leftAddon,
+    rightAddon = _ref.rightAddon,
+    leftIcon = _ref.leftIcon,
+    rightIcon = _ref.rightIcon,
+    children = _ref.children,
+    onClickLeftIcon = _ref.onClickLeftIcon,
+    onClickRightIcon = _ref.onClickRightIcon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SIZES.MEDIUM : _ref$size,
+    shape = _ref.shape,
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(InputButton, {
+    button: button,
+    children: /*#__PURE__*/_jsx(InputAddons, {
+      leftAddon: leftAddon,
+      rightAddon: rightAddon,
+      shape: shape,
+      size: size,
+      children: /*#__PURE__*/_jsx(InputIcons, {
+        leftIcon: leftIcon,
+        rightIcon: rightIcon,
+        onClickLeftIcon: onClickLeftIcon,
+        onClickRightIcon: onClickRightIcon,
+        children: /*#__PURE__*/_jsx(Input, _extends({
+          ref: forwardedRef,
+          shape: shape
+        }, inputProps, {
+          size: size,
+          children: children
+        }))
+      })
+    })
+  });
+});
+export default BaseInput;
+export { inputSizes, inputStates, BaseInput };

package/lib/Mask/iMask.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["inputRef", "value", "size"];
+import { IMaskMixin } from 'react-imask';
+import Input from '../Input/index.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+var IMask = IMaskMixin(function (_ref) {
+  var inputRef = _ref.inputRef,
+    value = _ref.value,
+    size = _ref.size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Input, _extends({
+    type: "text",
+    ref: inputRef,
+    size: size,
+    value: value
+  }, props));
+});
+export default IMask;

package/lib/Mask/index.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["name", "onChange", "onComplete", "mask", "value", "defaultValue", "placeholder", "size"];
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { isFunction, SIZES } from '../config.js';
+import IMask from './iMask.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+var MaskInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var name = _ref.name,
+    onChange = _ref.onChange,
+    _onComplete = _ref.onComplete,
+    mask = _ref.mask,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    placeholder = _ref.placeholder,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SIZES.MEDIUM : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(IMask, _extends({
+    name: name,
+    mask: mask == null ? void 0 : mask.mask,
+    value: value,
+    size: size,
+    ref: forwardedRef,
+    placeholder: placeholder,
+    onAccept: function onAccept(value, maskRef, event) {
+      for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+        args[_key - 3] = arguments[_key];
+      }
+      return isFunction(onChange) && onChange(event, _extends({
+        value: value,
+        maskRef: maskRef
+      }, args));
+    },
+    onComplete: function onComplete(value, maskRef, event) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
+        args[_key2 - 3] = arguments[_key2];
+      }
+      return isFunction(_onComplete) && _onComplete(event, _extends({
+        value: value,
+        maskRef: maskRef
+      }, args));
+    }
+  }, props));
+});
+MaskInput.displayName = 'MaskInput';
+export default MaskInput;

package/lib/Password/config.js

@@ -0,0 +1,5 @@
+import { BASE_CLASS } from '../config.js';
+export var BASE_CLASS_PASSWORD = BASE_CLASS + "-password";
+export var BASE_CLASS_PASSWORD_TOGGLE_BUTTON = BASE_CLASS_PASSWORD + "--toggleButton";
+export var TEXT = 'text';
+export var PASSWORD = 'password';

package/lib/Password/index.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["onChange", "shape", "pwShowLabel", "pwHideLabel", "toggleAriaLabel", "value", "defaultValue", "state"];
+import { forwardRef, useState } from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import useControlledState from '@s-ui/react-hooks/lib/useControlledState';
+import { INPUT_SHAPES, INPUT_STATES } from '../config.js';
+import Input from '../Input/index.js';
+import { BASE_CLASS_PASSWORD, BASE_CLASS_PASSWORD_TOGGLE_BUTTON, PASSWORD, TEXT } from './config.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Password = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var onChange = _ref.onChange,
+    shape = _ref.shape,
+    pwShowLabel = _ref.pwShowLabel,
+    pwHideLabel = _ref.pwHideLabel,
+    toggleAriaLabel = _ref.toggleAriaLabel,
+    value = _ref.value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    state = _ref.state,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(PASSWORD),
+    type = _useState[0],
+    setType = _useState[1];
+  var _useControlledState = useControlledState(value, defaultValue),
+    innerValue = _useControlledState[0],
+    setInnerValue = _useControlledState[1];
+  var toggle = function toggle() {
+    var inputType = type === PASSWORD ? TEXT : PASSWORD;
+    setType(inputType);
+  };
+  var handleChange = function handleChange(ev, _ref2) {
+    var value = _ref2.value;
+    setInnerValue(value);
+    typeof onChange === 'function' && onChange(ev, {
+      value: value
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(BASE_CLASS_PASSWORD, shape && BASE_CLASS_PASSWORD + "-shape-" + shape, state && BASE_CLASS_PASSWORD + "--state-" + state),
+    children: [/*#__PURE__*/_jsx(Input, _extends({
+      ref: forwardedRef,
+      shape: shape
+    }, props, {
+      onChange: handleChange,
+      value: innerValue,
+      type: type,
+      noBorder: true
+    })), /*#__PURE__*/_jsx("button", {
+      onClick: toggle,
+      type: "button",
+      "aria-pressed": type !== PASSWORD,
+      "aria-label": toggleAriaLabel,
+      className: cx(BASE_CLASS_PASSWORD_TOGGLE_BUTTON, shape && BASE_CLASS_PASSWORD_TOGGLE_BUTTON + "-shape-" + shape),
+      children: type === PASSWORD ? pwShowLabel : pwHideLabel
+    })]
+  });
+});
+export default Password;

package/lib/Password/index.scss

@@ -0,0 +1,2 @@
+@import './styles/settings.scss';
+@import './styles/index.scss';

package/lib/Password/styles/index.scss

@@ -0,0 +1,58 @@
+$base-class-password: '#{$base-class-input}-password';
+
+#{$base-class-password} {
+  position: relative;
+  width: 100%;
+  display: flex;
+  @include sui-atom-input-input;
+  padding-left: 0;
+  border-radius: $bdrs-atom-input;
+
+  & > input {
+    padding-right: $pr-atom-input-password;
+  }
+
+  &-shape {
+    @each $shapeMapKey, $shapeMapValue in $bdrs-atom-input-shapes {
+      &-#{$shapeMapKey} {
+        border-radius: $shapeMapValue;
+      }
+    }
+  }
+
+  &--toggleButton {
+    &-shape {
+      @each $shapeMapKey, $shapeMapValue in $bdrs-atom-input-shapes {
+        &-#{$shapeMapKey} {
+          border-radius: $shapeMapValue;
+        }
+      }
+    }
+    margin-top: 8px;
+    margin-bottom: 8px;
+    border: none;
+    background: $c-white;
+    color: $c-atom-input-password-toggle-button;
+    display: inline-block;
+    user-select: none;
+    border-radius: $bdrs-atom-input;
+    &:focus-visible {
+      outline-style: solid;
+      outline-color: transparentize($c-primary, 0.2);
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+  }
+
+  &--state-error {
+    border-color: $c-atom-input--error;
+  }
+
+  &--state-success {
+    border-color: $c-atom-input--success;
+  }
+
+  &--state-alert {
+    border-color: $c-atom-input--alert;
+  }
+}

package/lib/Password/styles/settings.scss

@@ -0,0 +1,3 @@
+$r-atom-input-password-toggle-button: $gutter !default;
+$c-atom-input-password-toggle-button: $c-primary !default;
+$pr-atom-input-password: 0px !default;

package/lib/config.js

@@ -0,0 +1,55 @@
+import cx from 'classnames';
+export var PREFIX = 'sui';
+export var CATEGORY = 'Atom';
+export var COMPONENT = 'Input';
+export var BASE = PREFIX + "-" + CATEGORY + COMPONENT;
+export var BASE_CLASS = BASE + "-input";
+
+// Enums
+export var TYPES = {
+  DATE: 'date',
+  EMAIL: 'email',
+  MASK: 'mask',
+  NONE: 'none',
+  NUMBER: 'number',
+  PASSWORD: 'password',
+  SEARCH: 'search',
+  SUI_PASSWORD: 'sui-password',
+  TEL: 'tel',
+  TEXT: 'text'
+};
+export var SIZES = {
+  XLARGE: 'xl',
+  LARGE: 'l',
+  MEDIUM: 'm',
+  SMALL: 's',
+  XSMALL: 'xs'
+};
+export var INPUT_STATES = {
+  ERROR: 'error',
+  SUCCESS: 'success',
+  ALERT: 'alert'
+};
+export var INPUT_SHAPES = {
+  ROUNDED: 'rounded',
+  SQUARE: 'square',
+  CIRCLE: 'circle'
+};
+export var noop = function noop() {
+  return null;
+};
+export var isFunction = function isFunction(fn) {
+  return typeof fn === 'function';
+};
+export var getClassNames = function getClassNames(_ref) {
+  var size = _ref.size,
+    charsSize = _ref.charsSize,
+    hideInput = _ref.hideInput,
+    noBorder = _ref.noBorder,
+    readOnly = _ref.readOnly,
+    errorState = _ref.errorState,
+    state = _ref.state,
+    shape = _ref.shape,
+    className = _ref.className;
+  return cx(BASE_CLASS, size && BASE_CLASS + "-size-" + size, charsSize && BASE_CLASS + "--charsSize", hideInput && BASE_CLASS + "--hidden", noBorder && BASE_CLASS + "--noBorder", readOnly && BASE_CLASS + "--readOnly", errorState && BASE_CLASS + "--state-" + INPUT_STATES.ERROR, errorState === false && BASE_CLASS + "--state-" + INPUT_STATES.SUCCESS, state && BASE_CLASS + "--state-" + state, shape && BASE_CLASS + "-shape-" + shape, className);
+};

package/lib/helpers/getComponentAndProps.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["type"];
+import Input from '../Input/index.js';
+import Mask from '../Mask/index.js';
+import Password from '../Password/index.js';
+export default (function (_ref) {
+  var type = _ref.type,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  switch (type) {
+    case 'sui-password':
+      return [Password, _extends({}, rest, {
+        type: type
+      })];
+    case 'mask':
+      return [Mask, _extends({}, rest)];
+    default:
+      return [Input, _extends({}, rest, {
+        type: type
+      })];
+  }
+});

package/lib/helpers/isValidInputValue.js

@@ -0,0 +1,16 @@
+import { TYPES } from '../config.js';
+export default (function (event, _ref) {
+  var type = _ref.type,
+    onEnterKey = _ref.onEnterKey;
+  if (type === TYPES.NUMBER) {
+    // Check if input type number is valid as input type number doesn't currently work in browsers like Safari and Firefox
+    // Allowing: Integers | Backspace | Tab | Delete | Left & Right arrow keys
+
+    // const allowedCharacter =
+    //   /(^\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight|Enter)/
+    var onEnterKeyArray = Array.isArray(onEnterKey) ? onEnterKey : [onEnterKey];
+    var allowedCharacter = new RegExp("(^\\d*$)|(" + ['Backspace', 'Tab', 'Delete', 'ArrowLeft', 'ArrowRight'].concat(onEnterKeyArray).join('|') + ")");
+    return event.key.match(allowedCharacter);
+  }
+  return true;
+});

package/lib/index.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["type", "shape", "noBorder"];
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import InputContainer from './Container/InputContainer.js';
+import getComponentAndProps from './helpers/getComponentAndProps.js';
+import { inputSizes, inputStates } from './Input/index.js';
+import { INPUT_SHAPES, TYPES } from './config.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+var AtomInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var type = _ref.type,
+    shape = _ref.shape,
+    noBorder = _ref.noBorder,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _getComponentAndProps = getComponentAndProps(_extends({
+      type: type
+    }, props)),
+    Component = _getComponentAndProps[0],
+    newProps = _getComponentAndProps[1];
+  return /*#__PURE__*/_jsx(InputContainer, {
+    shape: shape,
+    noBorder: noBorder,
+    children: /*#__PURE__*/_jsx(Component, _extends({}, newProps, {
+      shape: shape,
+      noBorder: noBorder,
+      ref: ref
+    }))
+  });
+});
+AtomInput.displayName = 'AtomInput';
+export default AtomInput;
+export { inputSizes, inputStates, TYPES as inputTypes, INPUT_SHAPES as inputShapes };

package/lib/index.scss

@@ -0,0 +1,4 @@
+@import '~@s-ui/theme/lib/index';
+
+@import './styles/settings.scss';
+@import './styles/index.scss';

package/lib/mixins.scss

@@ -0,0 +1,75 @@
+@mixin atom-input-shape-wrapper(
+  $baseClass,
+  $baseClassName,
+  $shapeMap,
+  $sizesMap,
+  $bdrs-defaultValue,
+  $sz-defaultValue
+) {
+  $this: &;
+  @if #{'sui-AtomInput-input'} == $baseClassName {
+    @each $shapeMapKey, $shapeMapValue in $shapeMap {
+      @if $shapeMapKey != 'circle' {
+        &#{$baseClassName}-shape-#{$shapeMapKey} {
+          border-radius: $shapeMapValue;
+        }
+      } @else {
+        @each $sizeKey, $sizeValue in $sizesMap {
+          &#{$baseClassName}-shape-#{$shapeMapKey}#{$baseClassName}-size-#{$sizeKey} {
+            border-radius: $sizeValue * 0.5;
+          }
+        }
+      }
+    }
+  } @else {
+    > *,
+    #{$baseClass}-input {
+      border-radius: 0;
+    }
+    > *:first-child {
+      border-top-left-radius: $bdrs-defaultValue;
+      border-bottom-left-radius: $bdrs-defaultValue;
+    }
+    > *:last-child {
+      border-top-right-radius: $bdrs-defaultValue;
+      border-bottom-right-radius: $bdrs-defaultValue;
+    }
+    @each $shapeMapKey, $shapeMapValue in $shapeMap {
+      &#{$baseClassName}-shape-#{$shapeMapKey} {
+        > *,
+        #{$baseClass}-input {
+          border-radius: 0;
+        }
+        @if $shapeMapKey != 'circle' {
+          border-radius: $shapeMapValue;
+          > *:first-child {
+            border-top-left-radius: $shapeMapValue;
+            border-bottom-left-radius: $shapeMapValue;
+          }
+          > *:last-child {
+            border-top-right-radius: $shapeMapValue;
+            border-bottom-right-radius: $shapeMapValue;
+          }
+        } @else {
+          @each $sizeKey, $sizeValue in $sizesMap {
+            &#{$baseClassName}-shape-#{$shapeMapKey}#{$baseClassName}-size-#{$sizeKey} {
+              border-radius: $sizeValue * 0.5;
+              > *,
+              #{$baseClass}-input {
+                border-radius: 0;
+              }
+              > *:first-child {
+                border-top-left-radius: $sizeValue * 0.5;
+                border-bottom-left-radius: $sizeValue * 0.5;
+              }
+              > *:last-child {
+                border-top-right-radius: $sizeValue * 0.5;
+                border-bottom-right-radius: $sizeValue * 0.5;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/settings.scss

@@ -0,0 +1,5 @@
+@import './Input/Component/settings';
+
+@import './Input/Wrappers/settings';
+
+@import './Password/styles/settings.scss';

package/lib/styles/index.scss

@@ -0,0 +1,6 @@
+$base-class: '.sui-AtomInput';
+
+@import '../Input/Component/index';
+@import '../Container/index';
+@import '../Input/Wrappers/index';
+@import '../Password/index';

package/lib/styles/settings.scss

@@ -0,0 +1,3 @@
+@import '../settings.scss';
+
+@import '../mixins.scss';

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ohos-ports/s-ui-react-atom-input",
+  "version": "5.51.0-beta.0",
+  "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "@s-ui",
+    "react",
+    "component",
+    "atom",
+    "input"
+  ],
+  "main": "lib/index.js",
+  "scripts": {
+    "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles",
+    "build:js": "babel --presets sui ./src --out-dir ./lib",
+    "build:styles": "cpx './src/**/*.scss' ./lib"
+  },
+  "dependencies": {
+    "@s-ui/react-hooks": "1",
+    "@s-ui/react-primitive-polymorphic-element": "1",
+    "react-imask": "6.4.3"
+  },
+  "peerDependencies": {
+    "@s-ui/component-dependencies": "1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ohos-ports/ohos-ports.git",
+    "directory": "ports/@s-ui/react-atom-input/5.51.0"
+  },
+  "config": {
+    "title": "input",
+    "category": "atom",
+    "type": "components"
+  },
+  "bugs": {
+    "url": "https://github.com/ohos-ports/ohos-ports/issues"
+  },
+  "homepage": "https://sui-components.vercel.app/",
+  "license": "MIT",
+  "files": [
+    "lib",
+    "README.md",
+    "LICENSE.md"
+  ]
+}